Contexte
Selma est une application web qui affiche des classifications hiérarchiques — taxonomies et graphes orientés acycliques — et permet de les parcourir de manière interactive. Le jeu de données fourni en exemple retrace l’évolution des systèmes d’écriture, une structure dans laquelle certains éléments appartiennent à plusieurs catégories à la fois.
Objectif
Les taxonomies sont généralement des arbres dont chaque nœud possède un seul parent. La plupart des données ne sont toutefois pas aussi simples; un concept peut se situer à l’intersection de plusieurs branches. Offrir un framework capable de représenter ces relations multi-parentales est l’objectif de ce projet.
Approche
Le projet est construit avec React et Vite. Les graphes sont rendus avec React Flow ; le placement automatique est géré par ELK.js. L’interface utilise Tailwind CSS pour le style. Les pages de détail des nœuds — qui peuvent contenir du texte formaté, des images, des formules mathématiques et des blocs de code — sont rendues via react-markdown avec les plugins remark et rehype. Les traductions sont gérées par i18next.
Fonctionnalités
- Quatre modes d’affichage : graphique organique, disposition en blocs compacts, liste repliable et colonnes de Miller.
- Détection des DAG : les nœuds ayant plusieurs parents sont identifiés automatiquement.
- Taxonomies multiples : différents schémas de classification peuvent être définis sur le même ensemble de nœuds, et choisis ensuite dans l’interface.
- Filtrage par étiquette : chaque étiquette peut être en état neutre, inclus ou exclu ; les filtres peuvent fonctionner en mode union ou intersection.
- Internationalisation : l’interface utilisateur et les descriptions des nœuds sont disponibles en plusieurs langues.
- Export : les diagrammes peuvent être sauvegardés en SVG, PNG ou JPG ; les vues arborescentes en texte brut ; les détails des nœuds peuvent être imprimés.
Résultat
L’application est distribuée comme un modèle. Pour l’adapter à un autre sujet, remplacez le contenu du répertoire public/ par vos propres définitions de nœuds, taxonomies et pages Markdown, puis redéployez. Une démonstration en ligne est hébergée sur Hugging Face Spaces.