Show subchart of the currently selected component in the modal; separate graph generation and layout construction into separate web workers

Author: twwd

src/lib/components/Bom.svelte

@@ -2,12 +2,22 @@
 	import type { Bom, Component } from '$lib/cyclonedx/models';
 	import ComponentsTable from '$lib/components/ComponentsTable.svelte';
 	import { Button, Tab, TabContent, Tabs, Tile } from 'carbon-components-svelte';
-	import ComponentsTreeChart from '$lib/components/ComponentsTreeChart.svelte';
 	import ComponentModal from '$lib/components/ComponentModal.svelte';
 	import { Document } from 'carbon-icons-svelte';
+	import Graph from 'graphology';
+	import type { AbstractGraph } from 'graphology-types';
+	import { onDestroy } from 'svelte';
+	import { TreeGenerationWorkerWrapper } from '$lib/worker/GraphWorkerWrapper';
+	import GlobalComponentsTreeChart from '$lib/components/GlobalComponentsTreeChart.svelte';
 
 	let { bom = null }: { bom: Bom | null } = $props();
 
+	let graph: AbstractGraph | null = $state(null);
+
+	const treeGenerationWorkerWrapper = new TreeGenerationWorkerWrapper((g: Graph) => {
+		graph = g;
+	});
+
 	let selectedComponentForModal: Component | undefined = $state();
 	let selectedComponentRefInTreeGraph: string | undefined = $state();
 	let searchValueInTable: string = $state('');
@@ -30,7 +40,17 @@
 
 	let showGraph: boolean = $state(false);
 
-	$effect.pre(() => {
+	onDestroy(() => {
+		treeGenerationWorkerWrapper?.terminate();
+	});
+
+	$effect(() => {
+		if (bom) {
+			treeGenerationWorkerWrapper.sendMessage(bom);
+		}
+	});
+
+	$effect(() => {
 		if (selectedTabIndex === 1) {
 			showGraph = true;
 		}
@@ -75,8 +95,8 @@
 					<TabContent>
 						<div class="tab__tile">
 							{#if showGraph}
-								<ComponentsTreeChart
-									{bom}
+								<GlobalComponentsTreeChart
+									{graph}
 									selectedComponentRef={selectedComponentRefInTreeGraph}
 									searchForComponent={searchForComponentInTable}
 								/>
@@ -89,7 +109,7 @@
 	{/if}
 {/if}
 
-<ComponentModal component={selectedComponentForModal} />
+<ComponentModal component={selectedComponentForModal} {graph} />
 
 <style lang="scss">
 	@use '@carbon/layout';

src/lib/components/ComponentModal.svelte

@@ -3,12 +3,31 @@
 	import ComponentInfo from '$lib/components/ComponentInfo.svelte';
 	import { CodeSnippet, Modal } from 'carbon-components-svelte';
 	import { ComponentModalContent } from '$lib/components/ComponentModalContent';
+	import type { AbstractGraph } from 'graphology-types';
+	import { allSimplePaths } from 'graphology-simple-path';
+	import { subgraph as generateSubgraph } from 'graphology-operators';
+	import ComponentsTreeChart from '$lib/components/ComponentsTreeChart.svelte';
+	import { getGraphRootNode } from '$lib/graphs/utils';
 
-	let { component }: { component?: Component } = $props();
+	let { component, graph }: { component?: Component; graph?: AbstractGraph | null } = $props();
 
 	let componentModalContent = $derived(new ComponentModalContent(component));
 	let componentModelIsOpen: boolean = $state(false);
 
+	let subgraph: AbstractGraph | null | undefined = $derived.by(() => {
+		if (graph && component) {
+			const root = getGraphRootNode(graph);
+			const paths = allSimplePaths(graph, root, component['bom-ref']);
+			if (paths && paths.length > 0) {
+				const interestingNodes = paths.reduce((p, c) => p.union(new Set(c)), new Set<string>());
+				return generateSubgraph(graph, interestingNodes);
+			}
+			console.warn(`No useful subgraph found: ${paths.join(',')}`);
+
+			return null;
+		}
+	});
+
 	$effect(() => {
 		if (component) {
 			componentModelIsOpen = true;
@@ -19,6 +38,11 @@
 <Modal bind:open={componentModelIsOpen} passiveModal modalHeading={componentModalContent.heading}>
 	{#if componentModalContent.component}
 		<ComponentInfo component={componentModalContent.component} />
+		{#if !!subgraph}
+			<h4>Dependency Graph</h4>
+			<ComponentsTreeChart graph={subgraph} />
+		{/if}
+		<h4>Component JSON</h4>
 		<CodeSnippet type="multi" code={componentModalContent.code} expanded />
 	{/if}
 </Modal>

src/lib/components/ComponentsTreeChart.svelte

@@ -1,54 +1,48 @@
 <script lang="ts">
 	import { getContext, onDestroy } from 'svelte';
 	import Sigma from 'sigma';
-	import type { Bom } from '$lib/cyclonedx/models';
 	import type { Coordinates, EdgeDisplayData, NodeDisplayData } from 'sigma/types';
-	import type { AbstractGraph, SerializedGraph } from 'graphology-types';
+	import type { AbstractGraph } from 'graphology-types';
 	import { borderSubtle01, borderStrong01, tagTokens, textDisabled } from '@carbon/themes';
 	import type { TreeChartState } from '$lib/models/treechart';
-	import type { PostMessage } from '$lib/models/worker';
-	import Graph from 'graphology';
 	import { SkeletonPlaceholder } from 'carbon-components-svelte';
 	import {
 		getHighlightedGraphState,
 		isInterestingEdge,
 		isInterestingNode
 	} from '$lib/graphs/highlighting';
+	import { LayoutGraphWorkerWrapper } from '$lib/worker/GraphWorkerWrapper';
+	import Graph from 'graphology';
 
 	let {
-		bom,
+		graph,
 		selectedComponentRef,
 		searchForComponent
-	}: { bom: Bom; selectedComponentRef?: string; searchForComponent: (ref?: string) => void } =
-		$props();
+	}: {
+		graph: AbstractGraph | null;
+		selectedComponentRef?: string;
+		searchForComponent?: (ref: string) => void;
+	} = $props();
 	const theme: () => string = getContext('theme');
 
+	let internalGraph: Graph | undefined = $state();
+	let lastUnprocessedGraph: Graph | undefined = $state();
+
 	let container: HTMLDivElement;
 	let renderer: Sigma | undefined;
-	let graph: AbstractGraph | undefined;
-	let isLoading: boolean = $state(true);
+
+	const treeGenerationWorkerWrapper = new LayoutGraphWorkerWrapper((g: Graph) => {
+		internalGraph = g;
+		setupGraph();
+	});
+
+	let isLoading: boolean = $derived(graph === null);
 
 	const treeChartState: TreeChartState = {
 		hovered: {},
 		selected: {}
 	};
 
-	let treeGenerationWorker: Worker | undefined = undefined;
-
-	function handleWorkerMessage({ data: { payload } }: MessageEvent<PostMessage<SerializedGraph>>) {
-		if (payload) {
-			setupGraph(new Graph().import(payload));
-		}
-	}
-
-	function setupWorker() {
-		treeGenerationWorker = new Worker(new URL('$lib/worker/tree-generation.ts', import.meta.url), {
-			type: 'module'
-		});
-
-		treeGenerationWorker.onmessage = handleWorkerMessage;
-	}
-
 	function refreshGraph() {
 		// Refresh rendering
 		renderer?.refresh({
@@ -57,35 +51,44 @@
 		});
 	}
 
-	function setupGraph(localGraph: Graph) {
-		graph = localGraph;
+	function setupGraph() {
+		if (!internalGraph) {
+			return;
+		}
 
-		// Initialize sigma to render the graph
-		renderer = new Sigma(graph, container, {
+		// Stop old renderer and reset chart state
+		if (renderer) {
+			renderer.kill();
+			treeChartState.hovered = {};
+			treeChartState.selected = {};
+		}
+		// Initialize sigma to render the internalGraph
+		renderer = new Sigma(internalGraph, container, {
 			defaultEdgeType: 'arrow',
 			defaultNodeColor: tagTokens.tagTokens.tagColorBlue[theme()],
 			defaultEdgeColor: borderSubtle01
 		});
-		isLoading = false;
 
-		// Bind graph interactions:
+		// Bind internalGraph interactions:
 		renderer?.on('enterNode', ({ node }) => {
-			treeChartState.hovered = getHighlightedGraphState(graph, node);
+			treeChartState.hovered = getHighlightedGraphState(internalGraph, node);
 			refreshGraph();
 		});
 		renderer?.on('clickNode', ({ node }) => {
-			treeChartState.selected = getHighlightedGraphState(graph, node);
+			treeChartState.selected = getHighlightedGraphState(internalGraph, node);
 			refreshGraph();
 		});
 		renderer?.on('doubleClickNode', ({ node }) => {
-			searchForComponent(node);
+			if (searchForComponent) {
+				searchForComponent(node);
+			}
 		});
 		renderer?.on('leaveNode', () => {
-			treeChartState.hovered = getHighlightedGraphState(graph);
+			treeChartState.hovered = getHighlightedGraphState(internalGraph);
 			refreshGraph();
 		});
 		renderer?.on('clickStage', () => {
-			treeChartState.selected = getHighlightedGraphState(graph);
+			treeChartState.selected = getHighlightedGraphState(internalGraph);
 			refreshGraph();
 		});
 
@@ -122,61 +125,34 @@
 	}
 
 	onDestroy(() => {
-		treeGenerationWorker?.terminate();
 		renderer?.kill();
+		treeGenerationWorkerWrapper?.terminate();
 	});
 
 	$effect(() => {
-		if (!treeGenerationWorker) {
-			setupWorker();
-		}
-
-		if (bom && !graph) {
-			isLoading = true;
-			treeGenerationWorker?.postMessage({
-				payload: bom
-			});
+		if (graph !== null && graph !== lastUnprocessedGraph) {
+			lastUnprocessedGraph = graph;
+			treeGenerationWorkerWrapper.sendMessage(graph.export());
 		}
 
-		if (selectedComponentRef) {
-			treeChartState.selected = getHighlightedGraphState(graph, selectedComponentRef);
-			refreshGraph();
-
-			const nodePosition = renderer?.getNodeDisplayData(selectedComponentRef) as Coordinates;
-			renderer?.getCamera().animate(
-				{ ...nodePosition, ratio: 0.2 },
-				{
-					duration: 500
-				}
-			);
+		if (internalGraph) {
+			if (selectedComponentRef) {
+				treeChartState.selected = getHighlightedGraphState(internalGraph, selectedComponentRef);
+				refreshGraph();
+
+				const nodePosition = renderer?.getNodeDisplayData(selectedComponentRef) as Coordinates;
+				renderer?.getCamera().animate(
+					{ ...nodePosition, ratio: 0.2 },
+					{
+						duration: 500
+					}
+				);
+			}
 		}
 	});
 </script>
 
-<h2>Dependency Graph</h2>
-
-<p>
-	<em>Double click a node to locate it in the dependency table.</em>
-</p>
-
 {#if isLoading}
 	<SkeletonPlaceholder style="min-height: 50rem; width: 100%;" />
 {/if}
-<div class="chart-container" bind:this={container}></div>
-
-<style lang="scss">
-	@use '@carbon/layout';
-
-	h2 {
-		margin-bottom: layout.$spacing-05;
-	}
-
-	p {
-		margin-bottom: layout.$spacing-05;
-	}
-
-	.chart-container {
-		width: 100%;
-		min-height: 50rem;
-	}
-</style>
+<div style="min-height: 50rem; width: 100%;" bind:this={container}></div>

src/lib/components/GlobalComponentsTreeChart.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { AbstractGraph } from 'graphology-types';
+	import ComponentsTreeChart from '$lib/components/ComponentsTreeChart.svelte';
+
+	let {
+		graph,
+		selectedComponentRef,
+		searchForComponent
+	}: {
+		graph: AbstractGraph | null;
+		selectedComponentRef?: string;
+		searchForComponent: (ref: string) => void;
+	} = $props();
+</script>
+
+<h2>Dependency Graph</h2>
+
+<p>
+	<em>Double click a node to locate it in the dependency table.</em>
+</p>
+
+<ComponentsTreeChart {graph} {selectedComponentRef} {searchForComponent} />
+
+<style lang="scss">
+	@use '@carbon/layout';
+
+	h2 {
+		margin-bottom: layout.$spacing-05;
+	}
+
+	p {
+		margin-bottom: layout.$spacing-05;
+	}
+</style>

src/lib/transformations/graph.ts

@@ -45,17 +45,14 @@ export function createGraphFromBom(bom: Bom): Graph {
 	addNodes(graph, bom.components);
 	addEdges(graph, bom.dependencies);
 
-	// Use dagre to compute the layout
-	computeLayoutWithDagre(graph);
-
 	return graph;
 }
 
 /**
  * Function to compute the layout using dagre and assign positions to graph nodes
  * @param graph - The graphology graph
  */
-function computeLayoutWithDagre(graph: Graph) {
+export function computeLayoutWithDagre(graph: Graph): Graph {
 	// Create a new directed graph for dagre
 	const g = new dagre.graphlib.Graph();
 
@@ -94,4 +91,5 @@ function computeLayoutWithDagre(graph: Graph) {
 			y: nodeData.y
 		});
 	});
+	return graph;
 }