Sample Graph

Demo Angular per visualizzare e modificare un grafo di dipendenze tra asset applicativi.

L'app usa graphology come modello dati del grafo e sigma per il rendering interattivo. Il componente principale mostra un grafo iniziale con frontend, API gateway, servizi, database, cache e coda, e permette di aggiungere nodi e relazioni durante l'esecuzione.

Stack

• Angular 18 con componenti standalone.
• Graphology MultiDirectedGraph per nodi, archi direzionati e relazioni multiple.
• Sigma.js 3 per rendering canvas, label, frecce e interazioni.
• FormsModule per i controlli della toolbar.

Funzionalita

• Visualizzazione di un asset dependency graph interattivo.
• Nodi colorati in base a tipo e stato:
  • tipo asset: app, service, database, cache, queue;
  • stato asset: ok, warning, critical.
• Archi direzionati con tipi relazione:
  • calls;
  • depends_on;
  • reads;
  • writes;
  • publishes;
  • subscribes;
  • cache.
• Hover sugli archi per mostrare la label della relazione.
• Drag dei nodi con camera bloccata durante lo spostamento.
• Toolbar per:
  • aggiungere un singolo nodo servizio collegato all'API Gateway;
  • aggiungere 100 nodi di test con relazioni casuali;
  • rilassare il layout con un algoritmo force-directed locale;
  • resettare il grafo allo stato iniziale;
  • creare una relazione scegliendo source, target e tipo.
• Contatori live per numero di nodi e relazioni.

Avvio locale

Installa le dipendenze:

npm install

Avvia il server di sviluppo:

npm start

Apri http://localhost:4200/. L'app si ricarica automaticamente quando modifichi i file sorgente.

Script disponibili

npm start

Avvia ng serve.

npm run build

Compila il progetto in dist/.

npm run watch

Compila in modalita development e resta in ascolto delle modifiche.

npm test

Esegue i test unitari con Karma.

Struttura principale

• src/app/app.component.*: shell minima dell'app, monta il grafo.
• src/app/large-asset-graph/large-asset-graph.component.ts: logica del grafo, interazioni Sigma, generazione nodi e relazioni, layout.
• src/app/large-asset-graph/large-asset-graph.component.html: header, statistiche, toolbar e container del grafo.
• src/app/large-asset-graph/large-asset-graph.component.scss: layout responsive e stile della pagina.
• src/app/large-asset-graph/asset-graph.types.ts: tipi di nodi, relazioni, edge e statistiche.
• src/app/large-asset-graph/asset-graph-utils.ts: utility per colori, dimensioni, UUID e selezioni casuali.

Note implementative

Il grafo iniziale viene creato in seedGraph(). I nodi runtime sono posizionati vicino al nodo a cui vengono collegati, mentre il pulsante Relax layout ricalcola le posizioni con una simulazione semplificata di repulsione tra nodi e attrazione sugli archi.

Il componente usa ChangeDetectionStrategy.OnPush: dopo le modifiche al grafo aggiorna esplicitamente le statistiche e richiede il refresh del renderer Sigma.