Context
Selma is a web application that displays hierarchical classifications — taxonomies and DAG as well — and lets users navigate them interactively. The included example dataset traces the evolution of writing systems, a structure where some items belong to several categories at once.
Challenge
Taxonomies are typically trees in which each node has a single parent. However, most data is not that simple; a concept may lie at the intersection of multiple branches. The goal of this project is to provide a framework capable of representing these multi-parent relationships.
Approach
The project is built with React and Vite. Graphs are rendered with React Flow; automatic layout is handled by ELK.js. The interface uses Tailwind CSS for styling. Node detail pages — which can contain formatted text, images, mathematical formulas, and code blocks — are rendered through react-markdown with remark and rehype plugins. Translations are managed by i18next.
Features
- Four display modes: organic graph, compact box layout, collapsible list, and Miller columns.
- DAG detection: nodes with multiple parents are identified automatically.
- Multiple taxonomies: different classification schemes can be defined on the same set of nodes and switched at runtime.
- Tag filtering: each tag can be set to neutral, included, or excluded; filters can operate as union or intersection.
- Internationalisation: the user interface and node descriptions are available in several languages.
- Export: diagrams can be saved as SVG, PNG, or JPG; tree views as plain text; node details can be printed.
Outcome
The application is distributed as a template. To use it for a different subject, replace the contents of the public/ directory with your own node definitions, taxonomies, and Markdown pages, then redeploy. A live demo is hosted on Hugging Face Spaces.