defuss-shadcn / Application / Scaffolds / scaffold-knowledge-graph
Knowledge Graph
A knowledge graph of a million services, datasets and people as a clickdummy - "Atlas" for a fictional company. Zoom from the domains into a system, pick an API system or a dataset for its details, then press Expand: its page shows latency and traffic charts, the regions it runs in on a map, its endpoints, its team and its deploys - and every name on it opens the next page down. Click a link between two domains for its traffic and its circuit breakers. Every page is a route, so Back walks the drill-down back up. Part of the Application Scaffolds.
On this page (2)
§Knowledge graph
Zoom into a domain, then a system. Pick an API system or a dataset, press E for its page, then follow a name further down. Back in the graph's header returns to the selection before. The layer switch shows Labels, Health and Owners on top of the nodes and their relations. Press ⌘K (Ctrl+K) and type ledger; in the Hierarchy Explorer open a branch to go deeper. Live mode in the toolbar sends changes: dots on nodes, flashing links, rows in Updates. The language switch is in the toolbar.
§How it works
A page, not a component: it composes the library and keeps its own glue small - the plugins and two short scripts.
- Layout - a Border Layout whose regions are Panels in Resizers: the toolbar north, a stack of two Panels west (the Hierarchy Explorer above, Updates below - drag the line between them, fold either), the graph in the center, the details east, the relations south (folded at first). Every Panel resizes, folds and maximizes.
- The graph - one Graph Explorer of a million nodes; the toolbar, the layer switch, the details and the relations are its outlets (
data-graph-explorer-for="kg"), the Panel titles show its outputs beside a translated label. - Layers - the switch in the graph's header shows or hides layers of information, each in its own colour: Nodes and Relations (shown at first), Labels, Health and the page's own Owners layer. Each is a filter - with none shown only the clusters' circles remain -, and a node shows a part for every layer, bordered and tinted in its colour. Compact draws every node as its one-line chip. See Node Renderers.
- Live mode - the toolbar button starts the explorer's simulation: breakers trip and close, systems deploy, traffic moves, counts change. A changed node gets a glowing dot at its top right, a changed link lights up in its layer's colour, and each change becomes a row in Updates (a Virtual List, newest first) - only the shown layers' changes; a row selects its node or link. A deploy names who shipped it: the page's own update renderer.
- Hierarchy Explorer - a Tree Grid (the Data Grid with
data-parent-field) over the same million nodes, to any depth: a branch's children load when it opens (df$.shadcn.graphExplorer.subtree(kg, id, 2)asks the explorer's worker). One branch per level is open - opening one closes its open sibling and lets go of what was loaded below it -, so the tree holds one path and its children. The filter narrows the open branches; a row selects its node in the graph, and the graph's selection opens the way to it (graphExplorer.path(kg, id)). - Search - the search field in the toolbar opens a Command palette, also with ⌘K / Ctrl+K:
graphExplorer.find(kg, query)has the worker scan the million names in chunks and its hits become Command items, so the palette's filter, arrow keys and Enter work on them like on the actions below them. A hit flies the graph there and opens the way to it in the Hierarchy Explorer. - Drill-down - Expand (E) maximizes the details Panel with the node's page; every name on a page opens the next page down - a domain's systems, a system's datasets, a dataset's lineage - and the path above the title goes back up. See Details & Pages.
- Links - a click on a link (its label, its line, or the link button in a list) selects it: the details show its traffic both ways, its circuit breakers and who sends and receives most; Expand shows its page. See Edge Rules & Labels.
- Plugins - four detail renderers (API systems, domains, datasets, links between clusters) compose Chart, Geo Map, Avatar, Timeline, Progress, Table, Badge and Statistic; components with a script sit in islands (
ctx.island), so a chart keeps its canvas while the details re-render. A dataset's row count joins the Labels layer; Owners is a layer of the page's own. - Routing - defuss-dom-router in hash mode:
#/is the graph,#/node/:ida node's page,#/link/:from/:toa link's page. The explorer's store moves the address as you drill down, so Back walks back up; a page can be linked. Inside the docs preview the same routes match the frame's hash. See Client-side Routing. - Back and Out - in the graph's header, before its title: Back returns to the node or link selected before (a click, a row of the Hierarchy Explorer, a palette hit and a drill-down from a page's table are steps; its title names the step, read from the worker), Out moves the view up a level. A cluster's button in the details says what it shows - "Show its 14 systems".
- Translation - defuss-i18n: the language switch in the toolbar translates the brand, the buttons, the Panel labels and the tool labels between English and German; what the explorer and the plugins write stays as written. See Translation.
- Full screen - app-knowledge-graph.html is generated from this page's example at build time and loads only its own bundle.
Comments, ideas or improvements? Edit this page's source on GitHub