Ajout du widget html_expander en lieu et place de st.expander

This commit is contained in:
Stéphan Peccini 2025-05-15 21:44:59 +02:00
parent cf604957e3
commit fc08a00a6c
9 changed files with 308 additions and 166 deletions

1
.gitignore vendored
View File

@ -21,7 +21,6 @@ Local/
HTML/
# Ignorer données Fiches (adapté à ton projet)
Instructions.md
Fiches/
HTML/
static/Fiches/

88
Instructions.md Normal file
View File

@ -0,0 +1,88 @@
# Bienvenue dans l'application Fabnum
## Présentation de l'application
Cet outil interactif vous permet d'explorer et d'analyser les vulnérabilités de la chaîne de fabrication du numérique. Grâce à une interface, espérons-le, intuitive, vous pourrez visualiser les différentes étapes de production, identifier les points critiques et comprendre les enjeux géopolitiques et plus liés à la fabrication des technologies numériques.
L'application vous offre diverses fonctionnalités :
* Visualisation des données et des graphiques
* Personnalisation des produits à analyser
* Exploration détaillée des indices de vulnérabilité et des opérations
* Possibilité d'exporter les résultats selon différents formats selon autorisation
## Comprendre la chaîne de fabrication numérique
### Structure de la chaîne
La chaîne de fabrication numérique se décompose en trois niveaux hiérarchiques :
* Produits finaux : appareils complets comme les smartphones, ordinateurs, serveurs, etc.
* Composants : éléments constitutifs comme les processeurs, écrans, capteurs, batteries, etc.
* Minerais et matériaux : ressources de base nécessaires à la fabrication des composants
### Opérations à chaque niveau
Chaque niveau de la chaîne implique des opérations spécifiques :
* Niveau Produit final : assemblage des composants pour créer le produit fini
* Niveau Composant : fabrication des pièces à partir des minerais et matériaux
* Niveau Minerai : extraction et traitement des ressources premières
### Dimension géopolitique
Pour chaque opération, l'application détaille :
* Les pays où l'opération est réalisée, avec leur part respective du marché mondial
* Les acteurs économiques impliqués dans chaque pays, avec leur part de marché
* Les liens entre les pays d'opération, les acteurs et leur contexte géopolitique
[Voir la vision détaillée du projet](https://fabnum-dev.peccini.fr/app/static/Description/Objectif%20final.pdf)
## Comprendre les indices de vulnérabilité
L'application utilise quatre indices clés pour évaluer les vulnérabilités dans la chaîne de fabrication numérique :
### Indice de Herfindahl-Hirschmann (IHH)
* Que mesure-t-il ? La concentration géographique ou industrielle d'une opération.
* Comment l'interpréter ? Plus l'indice est élevé, plus l'opération est concentrée dans un nombre limité de pays, ce qui augmente la vulnérabilité.
* Où le trouver ? Associé à chaque opération dans les graphiques d'analyse.
[Voir la fiche détaillée](https://fabnum-dev.peccini.fr/app/static/Fiches/Criticit%C3%A9s/Fiche%20technique%20IHH.pdf)
### Indice de Vulnérabilité Concurrentielle (IVC)
* Que mesure-t-il ? La pression exercée par d'autres secteurs industriels sur une même ressource minérale.
* Comment l'interpréter ? Un IVC élevé indique une forte compétition pour accéder à ce minerai, augmentant le risque de pénurie.
* Où le trouver ? Associé à chaque minerai dans les visualisations et fiches.
[Voir la fiche détaillée](https://fabnum-dev.peccini.fr/app/static/Fiches/Criticit%C3%A9s/Fiche%20technique%20IVC.pdf)
### Indice de Criticité de Substituabilité (ICS)
* Que mesure-t-il ? La possibilité de remplacer un minerai par un autre dans la fabrication d'un composant. Plus rarement, il matérialise la capacité de remplacer un procédé.
* Comment l'interpréter ? Un ICS élevé signifie qu'il est difficile de trouver une alternative à ce minerai.
* Où le trouver ? Associé à la relation entre composants et minerais.
[Voir la fiche détaillée](https://fabnum-dev.peccini.fr/app/static/Fiches/Criticit%C3%A9s/Fiche%20technique%20ICS.pdf)
### Indice de Stabilité Géopolitique (ISG)
* Que mesure-t-il ? La stabilité politique, économique et sociale d'un pays, basée sur trois sous-indicateurs.
* Comment l'interpréter ? Un ISG élevé indique un pays instable, ce qui augmente les risques d'approvisionnement.
* Où le trouver ? Utilisé pour pondérer les risques identifiés tout au long de la chaîne.
[Voir la fiche détaillée](https://fabnum-dev.peccini.fr/app/static/Fiches/Criticit%C3%A9s/Fiche%20technique%20ISG.pdf)
## Guide d'utilisation de l'application
L'application est organisée en quatre onglets principaux, chacun offrant une perspective différente sur la chaîne de fabrication numérique :
* Onglet Personnalisation : Créer et gérer des produits finaux personnalisés pour des analyses spécifiques.
* À noter : Les produits personnalisés sont temporaires par défaut, mais peuvent être sauvegardés pour une utilisation ultérieure.
* Onglet Analyse : Explorer visuellement les relations entre les différents niveaux de la chaîne de fabrication.
* Exemple d'utilisation : Pour comprendre les vulnérabilités liées aux composants d'un smartphone, sélectionnez « Produit final » comme niveau de départ, « Composant » comme niveau d'arrivée, puis spécifiez « Smartphone » comme item de produit final.
* Onglet Visualisations : Observer les corrélations entre les différents indices et comprendre les tendances globales.
* Indicateurs clés : Portez attention aux points situés dans les zones de haute valeur pour les deux indices, car ils représentent les vulnérabilités les plus critiques.
* Onglet Fiches : Accéder à des informations détaillées sur chaque opération et minerai.
* À explorer : Les fiches contiennent souvent des informations qui ne sont pas visibles directement dans les graphiques, comme des tendances historiques ou des prévisions futures ; n'hésitez pas à les consulter
En début de chacun des onglets, vous trouverez un mini-guide spécifique sur leur utilisation.

View File

@ -1,5 +1,6 @@
import streamlit as st
from utils.translations import _
from utils.widgets import html_expander
from .sankey import afficher_sankey
@ -123,8 +124,7 @@ def configurer_filtres_vulnerabilite():
def interface_analyse(G_temp):
st.markdown(f"# {str(_('pages.analyse.title'))}")
with st.expander(str(_("pages.analyse.help")), expanded=False):
st.markdown("\n".join(_("pages.analyse.help_content")))
html_expander(f"{str(_('pages.analyse.help'))}", content="\n".join(_("pages.analyse.help_content")), open_by_default=False, details_class="details_introduction")
st.markdown("---")
try:

View File

@ -2,7 +2,6 @@
import streamlit as st
import requests
import os
import pathlib
from utils.translations import _
from .utils.tickets.display import afficher_tickets_par_fiche
@ -16,11 +15,11 @@ from utils.gitea import charger_arborescence_fiches
from .utils.fiche_utils import load_seuils, doit_regenerer_fiche
from .generer import generer_fiche
from utils.widgets import html_expander
def interface_fiches():
st.markdown(f"# {str(_('pages.fiches.title'))}")
with st.expander(str(_("pages.fiches.help")), expanded=False):
st.markdown("\n".join(_("pages.fiches.help_content")))
html_expander(f"{str(_('pages.fiches.help'))}", content="\n".join(_("pages.fiches.help_content")), open_by_default=False, details_class="details_introduction")
st.markdown("---")
if "fiches_arbo" not in st.session_state:
@ -102,4 +101,4 @@ def interface_fiches():
formulaire_creation_ticket_dynamique(fiche_choisie)
except Exception as e:
st.error(f"{str(_('pages.fiches.loading_error', 'Erreur lors du chargement de la fiche :'))} {e}")
st.error(f"{str(_('pages.fiches.loading_error'))} {e}")

View File

@ -5,11 +5,11 @@ from utils.translations import _
from .ajout import ajouter_produit
from .modification import modifier_produit
from .import_export import importer_exporter_graph
from utils.widgets import html_expander
def interface_personnalisation(G):
st.markdown(f"# {str(_('pages.personnalisation.title'))}")
with st.expander(str(_("pages.personnalisation.help")), expanded=False):
st.markdown("\n".join(_("pages.personnalisation.help_content")))
html_expander(f"{str(_('pages.personnalisation.help'))}", content="\n".join(_("pages.personnalisation.help_content")), open_by_default=False, details_class="details_introduction")
st.markdown("---")
G = ajouter_produit(G)

View File

@ -1,4 +1,5 @@
import streamlit as st
from utils.widgets import html_expander
from utils.translations import _
from .graphes import (
@ -9,8 +10,7 @@ from .graphes import (
def interface_visualisations(G_temp, G_temp_ivc):
st.markdown(f"# {str(_('pages.visualisations.title'))}")
with st.expander(str(_("pages.visualisations.help")), expanded=False):
st.markdown("\n".join(_("pages.visualisations.help_content")))
html_expander(f"{str(_('pages.visualisations.help'))}", content="\n".join(_("pages.visualisations.help_content")), open_by_default=False, details_class="details_introduction")
st.markdown("---")
st.markdown(f"""## {str(_("pages.visualisations.ihh_criticality"))}

View File

@ -345,3 +345,8 @@ div.stElementContainer.element-container.st-key-nom_utilisateur {
margin-right: auto;
margin-top: 1rem;
}
.details_introduction {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}

View File

@ -19,6 +19,8 @@ from utils.gitea import (
# Import du module de traductions
from utils.translations import init_translations, _, set_language
from utils.widgets import html_expander
def afficher_instructions_avec_expanders(markdown_content):
"""
Affiche le contenu markdown avec les sections de niveau 2 (## Titre) dans des expanders
@ -57,8 +59,8 @@ def afficher_instructions_avec_expanders(markdown_content):
# Affichage dans un expander
status = True if i == 1 else False
with st.expander(f"## {titre_section}", expanded=status):
st.markdown(contenu_section, unsafe_allow_html=True)
# with st.expander(f"## {titre_section}", expanded=status):
html_expander(f"{titre_section}", content=contenu_section, open_by_default=status, details_class="details_introduction")
from utils.graph_utils import (
charger_graphe

49
utils/widgets.py Normal file
View File

@ -0,0 +1,49 @@
import streamlit as st
import uuid
import markdown
import html
# html_expander remplace st.expander
#
# En effet, st.expander présente un défaut lors de la fermeture
# avec une fois la fermeture terminée, un dernier mouvement
# gênant visuellement.
def html_expander(title, content, open_by_default=False, details_class="", summary_class=""):
"""
Creates an HTML details/summary expander with content inside.
Args:
title (str): Text to display in the summary/header.
content (str): Markdown content to display inside the expander.
open_by_default (bool): Whether the expander is open by default.
details_class (str): CSS class for the details element.
summary_class (str): CSS class for the summary element.
"""
# Generate a unique ID for this expander
expander_id = f"expander_{uuid.uuid4().hex}"
# Set attributes
expanded = "open" if open_by_default else ""
details_attr = f'class="{details_class}"' if details_class else ""
summary_attr = f'class="{summary_class}"' if summary_class else ""
# Convert markdown to HTML (use Python's markdown library)
try:
# Try to use markdown package if available
html_content = markdown.markdown(content)
except:
# Fallback to basic html escaping if markdown package not available
html_content = html.escape(content).replace('\n', '<br>')
# Build the complete HTML structure
complete_html = f"""
<details id="{expander_id}" {expanded} {details_attr}>
<summary {summary_attr}>{title}</summary>
<div class="details-content">
{html_content}
</div>
</details>
"""
# Render the complete HTML in one call
st.markdown(complete_html, unsafe_allow_html=True)