Use sigma as the graph library

Author: twwd

package.json

@@ -31,6 +31,7 @@
 		"eslint-config-prettier": "^10.0.1",
 		"eslint-plugin-svelte": "^2.46.1",
 		"globals": "^15.14.0",
+		"graphology-types": "^0.24.8",
 		"jsdom": "^25.0.1",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.3",
@@ -49,13 +50,18 @@
 	},
 	"packageManager": "[email protected]+sha512.e5a7e52a4183a02d5931057f7a0dbff9d5e9ce3161e33fa68ae392125b79282a8a8a470a51dfc8a0ed86221442eb2fb57019b0990ed24fab519bf0e1bc5ccfc4",
 	"dependencies": {
-		"@carbon/charts-svelte": "^1.22.17",
 		"@carbon/layout": "^11.29.0",
 		"@carbon/styles": "^1.75.0",
+		"@carbon/themes": "^11.46.0",
 		"@carbon/type": "^11.35.0",
 		"@cyclonedx/cyclonedx-library": "^7.1.0",
+		"@dagrejs/dagre": "^1.1.4",
 		"@ibm/plex": "^6.4.1",
 		"carbon-components-svelte": "^0.87.5",
-		"carbon-icons-svelte": "^13.2.0"
+		"carbon-icons-svelte": "^13.2.0",
+		"graphology": "^0.26.0",
+		"graphology-shortest-path": "^2.1.0",
+		"graphology-simple-path": "^0.2.0",
+		"sigma": "^3.0.1"
 	}
 }

pnpm-lock.yaml

@@ -6,25 +6,39 @@
 	import ComponentsTreeChart from '$lib/components/ComponentsTreeChart.svelte';
 	import ComponentModal from '$lib/components/ComponentModal.svelte';
 	import { Document } from 'carbon-icons-svelte';
-	import { createTreeDataFromBom } from '$lib/tree';
-	import type { TreeItem } from '$lib/models/tree';
 
 	let { bom = null }: { bom: Bom | null } = $props();
 
 	let selectedComponentForModal: Component | undefined = $state();
 	let selectedComponentRefInTreeView: string | undefined = $state();
+	let selectedComponentRefInTreeGraph: string | undefined = $state();
+	let searchValueInTable: string = $state('');
 
 	function searchComponentInTreeView(id: string) {
 		selectedComponentRefInTreeView = id;
 	}
 
+	function searchComponentInTreeGraph(id: string) {
+		selectedTabIndex = 1; // Switch to graph tab
+		selectedComponentRefInTreeGraph = id;
+	}
+
 	function showComponentModal(component?: Component) {
 		selectedComponentForModal = component;
 	}
 
-	let treeData: TreeItem[] | undefined = $derived.by(() => {
-		if (bom) {
-			return createTreeDataFromBom(bom);
+	function searchForComponentInTable(ref: string) {
+		selectedTabIndex = 0; // Switch to table tab
+		searchValueInTable = ref;
+	}
+
+	let selectedTabIndex: number = $state(0); // for lazy-loading the chart
+
+	let showGraph: boolean = $state(false);
+
+	$effect.pre(() => {
+		if (selectedTabIndex === 1) {
+			showGraph = true;
 		}
 	});
 </script>
@@ -50,33 +64,34 @@
 	{/if}
 	{#if bom.components}
 		<section class="tabs">
-			<Tabs type="default">
+			<Tabs type="default" bind:selected={selectedTabIndex}>
 				<Tab label="Table" />
 				<Tab label="Chart" />
 				<svelte:fragment slot="content">
 					<TabContent>
-						{#if treeData}
-							<div class="tab__tile">
-								<ComponentsTreeView
-									nodes={treeData}
-									selectedComponentRef={selectedComponentRefInTreeView}
-								/>
-							</div>
-						{/if}
+						<div class="tab__tile">
+							<ComponentsTreeView {bom} selectedComponentRef={selectedComponentRefInTreeView} />
+						</div>
 						<div class="tab__tile">
 							<ComponentsTable
 								components={bom.components}
-								searchComponent={searchComponentInTreeView}
+								{searchComponentInTreeView}
+								{searchComponentInTreeGraph}
 								showComponentDetails={showComponentModal}
+								searchValue={searchValueInTable}
 							/>
 						</div>
 					</TabContent>
 					<TabContent>
-						{#if treeData}
-							<div class="tab__tile">
-								<ComponentsTreeChart {bom} nodes={treeData} />
-							</div>
-						{/if}
+						<div class="tab__tile">
+							{#if showGraph}
+								<ComponentsTreeChart
+									{bom}
+									selectedComponentRef={selectedComponentRefInTreeGraph}
+									searchForComponent={searchForComponentInTable}
+								/>
+							{/if}
+						</div>
 					</TabContent>
 				</svelte:fragment>
 			</Tabs>
@@ -110,7 +125,7 @@
 	}
 
 	.tab__tile {
-		background-color: theme.$layer-01;
+		background-color: theme.$layer;
 		padding: layout.$spacing-05;
 	}
 

src/lib/components/Bom.svelte

@@ -9,16 +9,20 @@
 	} from 'carbon-components-svelte';
 	import type { DataTableRow } from 'carbon-components-svelte/src/DataTable/DataTable.svelte';
 	import type { Component } from '$lib/cyclonedx/models';
-	import { Document, Search } from 'carbon-icons-svelte';
+	import { DecisionTree, Document, TreeView } from 'carbon-icons-svelte';
 
 	let {
 		components,
-		searchComponent,
-		showComponentDetails
+		searchComponentInTreeView,
+		searchComponentInTreeGraph,
+		showComponentDetails,
+		searchValue = ''
 	}: {
 		components: Component[];
-		searchComponent: (id: string) => void;
+		searchComponentInTreeView: (id: string) => void;
+		searchComponentInTreeGraph: (id: string) => void;
 		showComponentDetails: (component: Component) => void;
+		searchValue: string;
 	} = $props();
 
 	let rows: DataTableRow[] = $derived.by(() => {
@@ -65,25 +69,34 @@
 >
 	<Toolbar>
 		<ToolbarContent>
-			<ToolbarSearch persistent shouldFilterRows />
+			<ToolbarSearch persistent shouldFilterRows value={searchValue} />
 		</ToolbarContent>
 	</Toolbar>
 	<svelte:fragment slot="cell" let:row let:cell>
 		{#if cell.key === 'actions'}
-			<Button
-				size="small"
-				icon={Search}
-				iconDescription="Show component in dependency tree"
-				kind="ghost"
-				on:click={() => searchComponent(row.id)}
-			/>
-			<Button
-				size="small"
-				icon={Document}
-				iconDescription="Show details"
-				kind="ghost"
-				on:click={() => showComponentDetailsForRow(row)}
-			/>
+			<div class="actions">
+				<Button
+					size="small"
+					icon={TreeView}
+					iconDescription="Show component in dependency tree view"
+					kind="ghost"
+					on:click={() => searchComponentInTreeView(row.id)}
+				/>
+				<Button
+					size="small"
+					icon={DecisionTree}
+					iconDescription="Show component in dependency tree graph"
+					kind="ghost"
+					on:click={() => searchComponentInTreeGraph(row.id)}
+				/>
+				<Button
+					size="small"
+					icon={Document}
+					iconDescription="Show details"
+					kind="ghost"
+					on:click={() => showComponentDetailsForRow(row)}
+				/>
+			</div>
 		{:else}{cell.value}{/if}
 	</svelte:fragment>
 </DataTable>
@@ -100,4 +113,8 @@
 	p {
 		margin-bottom: layout.$spacing-04;
 	}
+
+	.actions {
+		white-space: nowrap;
+	}
 </style>