Überblick
Reine Frontend-Webapp ohne Serverteil. Cytoscape.js als Renderer und Algorithmen-Engine, LocalStorage als Persistenz, ES6-Module für die Codestruktur. Hosting ist trivial: ein Verzeichnis mit statischen Dateien auf einem beliebigen Webserver. Keine Build-Pipeline, kein npm-install.
Modulübersicht
| Datei |
Aufgabe |
index.html |
Layout, CDN-Includes, Modale |
style.css |
Dark-Theme, Design-Tokens, Komponenten |
app.js |
Orchestrator: Cytoscape-Setup, Event-Verdrahtung, Modus-Logik |
storage.js |
Persistenz-Backend (LocalStorageBackend, RestStorageBackend-Stub) |
io.js |
Import/Export für JSON, CSV, GraphML, DOT |
algorithms.js |
Wrapper um Cytoscapes Algorithmen mit einheitlichem Result-Format |
examples.js |
Initial-Beispieldaten |
Datenfluss
UI (app.js)
├── Cytoscape.js Visualisierung & eingebaute Algorithmen
├── algorithms.js Wrapper, einheitliches Result-Format
├── io.js Format-Konvertierung
└── storage.js StorageBackend-Interface
└── LocalStorageBackend ← austauschbar
Storage-Interface
Die Persistenz-Schicht ist hinter einem schmalen async-Interface gekapselt. Backend tauschen heißt: eine Zeile in app.js ändern.
class StorageBackend {
async list(); // Liste aller Graphen
async load(name); // Einzelner Graph
async save(name, payload); // Speichern
async remove(name); // Löschen
async rename(old, new); // Umbenennen
}
Implementierungen: LocalStorageBackend (aktiv), RestStorageBackend (Stub).
Algorithmen-Referenz
Alle Algorithmen stammen aus Cytoscape.js. Der Wrapper vereinheitlicht das Result-Format auf {ok, message, highlight, details}, sodass die UI nicht über Algorithmus-Spezifika Bescheid wissen muss.
| Algorithmus |
Komplexität |
Voraussetzungen |
| Dijkstra (Pfad) |
O((V+E) log V) |
Quelle, Ziel, nicht-negative Gewichte |
| Dijkstra (alle) |
O((V+E) log V) |
Quelle, nicht-negative Gewichte |
| BFS |
O(V+E) |
Quelle |
| DFS |
O(V+E) |
Quelle |
| Kruskal MST |
O(E log E) |
Ungerichteter Graph |
| Floyd-Warshall |
O(V³) |
— |
| Zusammenhang |
O(V+E) |
— |
| Knotengrade |
O(V) |
— |
Neuer Algorithmus: Funktion in algorithms.js schreiben, Eintrag in ALGORITHMS-Registry, Case in executeAlgorithm in app.js ergänzen.
Format-Spezifikationen
JSON — Cytoscape-natives Elements-Format:
{
"directed": true,
"elements": [
{ "data": { "id": "A", "label": "A" } },
{ "data": { "id": "eAB", "source": "A", "target": "B", "weight": 10 } }
]
}
CSV — Kantenliste, isolierte Knoten gehen verloren:
source,target,weight
A,B,10
B,A,15
GraphML — XML-Standard, kompatibel mit Gephi, yEd, NetworkX:
<graphml xmlns="http://graphml.graphdrawing.org/xmlns">
<graph id="G" edgedefault="directed">
<node id="A"><data key="label">A</data></node>
<edge source="A" target="B"><data key="weight">10</data></edge>
</graph>
</graphml>
DOT — Graphviz:
digraph G {
"A" [label="A"];
"A" -> "B" [weight=10, label="10"];
}
REST-API für späteres PHP-Backend
Das RestStorageBackend erwartet folgende Endpoints. Eine PHP+PDO-Implementierung ist pro Endpoint ~30 Zeilen.
| Methode |
Pfad |
Body / Antwort |
| GET |
/api/graphs |
Liste aller Graphen |
| GET |
/api/graphs/:name |
Einzelner Graph |
| PUT |
/api/graphs/:name |
Body: {directed, elements} |
| DELETE |
/api/graphs/:name |
— |
| POST |
/api/graphs/:name/rename |
Body: {newName} |
Bekannte Grenzen
- LocalStorage-Limit ~5–10 MB pro Origin. Für Demos ausreichend, bei sehr großen Graphen auf IndexedDB umsteigen.
- DOT-Importer ist ein Mini-Parser, deckt nur die häufigsten Konstrukte ab. Subgraphs und Graph-Attribute werden nicht gelesen.
- Dijkstra verlangt nicht-negative Gewichte. Für negative Gewichte müsste Bellman-Ford ergänzt werden.
- Multi-Edges (mehrere Kanten zwischen denselben Knoten) sind voll unterstützt — Kanten haben eigene IDs.
Download
Alle Module als ZIP-Paket. Das Archiv wird im Browser zusammengebaut — die Dateien werden direkt aus dem aktuellen Origin geladen, kein Server-Roundtrip nötig.
Enthalten: index.html, style.css, app.js, storage.js, io.js, algorithms.js, examples.js, README.md