src/components.py

import streamlit as st
from datetime import datetime
from huggingface_hub import HfApi
from src.text_content import REVIEW_TEXT, INTRO_TEXT_AR, INTRO_TEXT_EN, INTRO_TEXT_FR
from src.dataframes import INTERVENTIONS_PROCESSED_URL, VERIFIED_REQUESTS_PROCESSED_URL
from src.utils import parse_gg_sheet

import plotly.express as px

PIE_CHART_COLOR_MAP = {
    "REFUGE / SHELTER": "#83C9FD",
    "COUVERTURES / COVERS": "#FFABAB",
    "OTHER": "#7FEFA5",
    "SECOURS / RESCUE": "#FFD171",
    "KITCHEN TOOLS / USTENSILES DE CUISINE": "#FF8718",
    "ALIMENTATION ET EAU / FOOD AND WATER": "#0068C7",
    "ASSISTANCE MÉDICALE / MEDICAL ASSISTANCE": "#2CB09E",
    "VÊTEMENTS / CLOTHES": "#FF2B2B",
    "PHARMACEUTICALS / MEDICAMENTS": "#6D40BD"
}

def id_review_submission(api: HfApi):
    """Id review submission form"""
    # collapse the text
    with st.expander("🔍 Review of requests | مراجعة طلب مساعدة"):
        st.markdown(REVIEW_TEXT)

        id_to_review = st.number_input("Enter id / أدخل الرقم", min_value=0, value=0, step=1)
        reason_for_review = st.text_area("Explain why / أدخل سبب المراجعة")
        if st.button("Submit / أرسل"):
            if reason_for_review == "":
                st.error("Please enter a reason / الرجاء إدخال سبب")
            else:
                filename = f"review_id_{id_to_review}_{datetime.now().strftime('%Y-%m-%d_%H-%M-%S')}.txt"
                with open(filename, "w") as f:
                    f.write(f"id: {id_to_review}, explanation: {reason_for_review}\n")
                api.upload_file(
                    path_or_fileobj=filename,
                    path_in_repo=filename,
                    repo_id="nt3awnou/review_requests",
                    repo_type="dataset",
                )
                st.success("Submitted at https://huggingface.co/datasets/nt3awnou/review_requests/ تم الإرسال")


def show_embed_code():
    with st.expander(_("💻 For Developers only, embed code for the map")):
        st.code(
            """
    <iframe id="nt3awnou-map"
    src="https://nt3awnou-embed-rescue-map.hf.space/?embed=true" width="1200" height="720"
    frameborder="0"
    width="850"
    height="450"
    title="Nt3awno Rescue Map">
    </iframe>
    <script src="https://cdn.jsdelivr.net/npm/iframe-resizer@4.3.4/js/iframeResizer.min.js"></script>
    <script>
    iFrameResize({}, "#nt3awnou-map");
    </script>
            """,
            language="html",
        )


def show_dataframes_metrics(len_requests, len_interventions, len_solved_verified_requests, lang, show_col_3=False):
    if lang == "en":
        # with st.expander("📝 Nt3awnou Platform Description"):
        st.markdown(INTRO_TEXT_EN, unsafe_allow_html=True)
        if show_col_3:
            col1, col2, col3 = st.columns([1, 1, 1])
        else:
            col1, col2 = st.columns([1, 1])
        with col1:
            st.metric(
                "# Number of help requests",
                len_requests,
            )
        with col2:
            st.metric(
                "# Number of interventions",
                len_interventions + len_solved_verified_requests,
            )
        if show_col_3:
            with col3:
                st.metric(
                    "# Number of solved requests",
                    len_solved_verified_requests,
                )
    elif lang == "ar":
        # with st.expander("📝 شرح منصة نتعاونو"):
        st.markdown(INTRO_TEXT_AR, unsafe_allow_html=True)
        if show_col_3:
            col1, col2, col3 = st.columns([1, 1, 1])
        else:
            col1, col2 = st.columns([1, 1])
        with col1:
            st.metric(
                "# عدد طلبات المساعدة",
                len_requests,
            )
        with col2:
            st.metric(
                "# عدد التدخلات",
                len_interventions + len_solved_verified_requests,
            )
        if show_col_3:
            with col3:
                st.metric(
                    "# عدد الطلبات المستجاب لها",
                    len_solved_verified_requests,
                )
    elif lang == "fr":
        # with st.expander("📝 Description de la plateforme Nt3awnou"):
        st.markdown(INTRO_TEXT_FR, unsafe_allow_html=True)
        if show_col_3:
            col1, col2, col3 = st.columns([1, 1, 1])
        else:
            col1, col2 = st.columns([1, 1])
        with col1:
            st.metric(
                "# Nombre de demandes d'aide",
                len_requests,
            )
        with col2:
            st.metric(
                "# Nombre d'interventions",
                len_interventions + len_solved_verified_requests,
            )
        if show_col_3:
            with col3:
                st.metric(
                    "# Nombre de demandes résolues",
                    len_solved_verified_requests,
                )


@st.cache_data(ttl=60 * 60 * 24)
def cached_parse_gg_sheet(url):
    return parse_gg_sheet(url)


def show_charts():
    st.subheader(_("📊 **Charts**"))
    col1, col2 = st.columns([1, 1])

    # interventions_categories
    interventions_processed_df = cached_parse_gg_sheet(INTERVENTIONS_PROCESSED_URL)
    supply_data = (
        interventions_processed_df["supplies_category"]
        .str.split(",")
        .explode()
        .str.strip("[] '")
        .dropna()
        .astype("category")
    )
    interv_fig = px.pie(supply_data, names="supplies_category", color='supplies_category', color_discrete_map=PIE_CHART_COLOR_MAP)
    interv_fig.update_layout(
        autosize=True,
        legend=dict(
            orientation="h",
            # entrywidth=40,
            yanchor="bottom",
            y=1.02,
            xanchor="right",
            x=1,
            font=dict(
                # family="Courier",
                # size=10,
                # color="black"
            ),
            itemwidth=100,
        ),
    )
    with col1:
        st.subheader(_("Supplies Categories"))
        st.plotly_chart(interv_fig, use_container_width=True)

    # requests_categories
    requests_processed_df = cached_parse_gg_sheet(VERIFIED_REQUESTS_PROCESSED_URL)
    need_data = (
        requests_processed_df["need_category"].str.split(",").explode().str.strip("[] '").dropna().astype("category")
    )
    req_fig = px.pie(need_data, names="need_category", color='need_category', color_discrete_map=PIE_CHART_COLOR_MAP)
    req_fig.update_layout(
        autosize=True,
        legend=dict(
            orientation="h",
            # entrywidth=40,
            yanchor="bottom",
            y=1.02,
            xanchor="right",
            x=1,
            font=dict(
                # family="Courier",
                # size=10,
                # color="black"
            ),
            itemwidth=100,
        ),
    )
    with col2:
        st.subheader(_("Needs Categories"))
        st.plotly_chart(req_fig, use_container_width=True)


def show_donations(lang):
    st.subheader(_("📝 **Donations**"))
    if lang == "en":
        st.markdown(
            """
            <b>Notice:</b> We are not responsible for the donations collection. This is the official bank account dedicated to tackle the consequences of the earthquake.""",
            unsafe_allow_html=True,
        )
        st.markdown(
            """
            <div style="text-align: center;">
            <h4>The official bank account dedicated to tackle the consequences of the earthquake is:</h4>
            <b>Account number:</b>
            <h2>126</h2>
            <b>RIB:</b> 001-810-0078000201106203-18
            <br>
            <b>For the money transfers coming from outside Morocco</b>
            <br>
            <b>IBAN:</b> MA64001810007800020110620318
            <br>
            """,
            unsafe_allow_html=True,
        )
    elif lang == "ar":
        st.markdown(
            """
            <b>ملاحظة:</b> نحن لسنا مسؤولين عن جمع التبرعات. هذا هو الحساب البنكي الرسمي المخصص لمواجهة عواقب الزلزال.
            """,
            unsafe_allow_html=True,
        )
        st.markdown(
            """
            <div style="text-align: center;">
            <h4>الحساب البنكي الرسمي المخصص لمواجهة عواقب الزلزال</h4>
            <b>رقم الحساب</b>
            <h2>126</h2>
            <b>RIB:</b> 001-810-0078000201106203-18
            <br>
            <b>للتحويلات القادمة من خارج المغرب</b>
            <br>
            <b>IBAN:</b> MA64001810007800020110620318
            <br>
            </div>
            """,
            unsafe_allow_html=True,
        )
    elif lang == "fr":
        st.markdown(
            """
            <b>Remarque:</b> Nous ne sommes pas responsables de la collecte des dons. Ceci est le compte bancaire officiel dédié à la lutte contre les conséquences du séisme.
            """,
            unsafe_allow_html=True,
        )
        st.markdown(
            """
            <div style="text-align: center;">
            <h4>Le compte bancaire officiel dédié à la lutte contre les conséquences du séisme est le suivant:</h4>
            <b>Numéro de compte:</b>
            <h2>126</h2>
            <b>RIB:</b> 001-810-0078000201106203-18
            <br>
            <b>Pour les transferts d'argent en provenance de l'étranger</b>
            <br>
            <b>IBAN:</b> MA64001810007800020110620318
            <br>
            """,
            unsafe_allow_html=True,
        )