@rokkit/graph 1.8.0 → 1.8.1

package/dist/diagrams/LayersDiagram.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+	/**
+	 * The intended layers, top to bottom, with every dependency between them (#167).
+	 *
+	 * Arrows should only point DOWN. The ones that climb are layer violations and are the output
+	 * of the view — `ViolationsControl` shows only those. The host assigns each node its `layer`
+	 * (it knows the architecture it intends); rokkit computes no depth, and marks each edge
+	 * `down` / `skip` / `up` / `level` from those layers unless the host already said.
+	 */
+	import Graph from '../Graph.svelte'
+	import GraphLegend from '../GraphLegend.svelte'
+	import DiagramFrame from './DiagramFrame.svelte'
+	import DensityControl from '../controls/DensityControl.svelte'
+	import DrillBar from '../controls/DrillBar.svelte'
+	import ViolationsControl from '../controls/ViolationsControl.svelte'
+	import ZoomControl from '../controls/ZoomControl.svelte'
+	import { GraphState } from '../GraphState.svelte.js'
+	import type { Density } from '../layout/types.js'
+	import type { GraphFields, GraphNode } from '../types.js'
+	import type { GraphPreset } from '../preset.js'
+
+	type Props = {
+		/** Share one state with another view — see `DependencyDiagram`. */
+		state?: GraphState
+		nodes?: unknown[]
+		edges?: unknown[]
+		fields?: GraphFields
+		density?: Density
+		/** Every edge, or only the ones that climb. Bindable — the control moves it. */
+		showEdges?: 'all' | 'violations'
+		/** Band names by layer index; an unnamed layer reads "Layer N". */
+		layerLabels?: string[]
+		controls?: boolean
+		legend?: boolean
+		value?: string | null
+		preset?: GraphPreset
+		mode?: 'light' | 'dark'
+		arrows?: boolean
+		label?: string
+		onselect?: (id: string | null) => void
+		onexpand?: (id: string, node: GraphNode) => void
+		oncollapse?: (id: string, node: GraphNode) => void
+		class?: string
+	}
+
+	let {
+		state: provided,
+		nodes = [],
+		edges = [],
+		fields = {},
+		density = $bindable('names'),
+		showEdges = $bindable('all'),
+		layerLabels = undefined,
+		controls = false,
+		legend = false,
+		value = $bindable(undefined),
+		preset = undefined,
+		mode = 'light',
+		arrows = true,
+		label = undefined,
+		onselect = undefined,
+		onexpand = undefined,
+		oncollapse = undefined,
+		class: className = ''
+	}: Props = $props()
+
+	let zoom = $state(1)
+
+	const config = () => ({
+		nodes,
+		edges,
+		fields,
+		layout: 'layers',
+		density,
+		showEdges,
+		layerLabels,
+		value,
+		preset,
+		mode,
+		label,
+		onselect,
+		onexpand,
+		oncollapse
+	})
+
+	// svelte-ignore state_referenced_locally
+	const graph = provided ?? new GraphState(config())
+
+	$effect(() => {
+		if (!provided) {
+			graph.update(config())
+			return
+		}
+		// A supplied state is the caller's — see DependencyDiagram. Only this component's own
+		// options are merged in.
+		const { nodes: _n, edges: _e, fields: _f, preset: _p, mode: _m, value: _v, ...mine } =
+			config()
+		graph.apply(mine)
+	})
+</script>
+
+<!-- Snippets are declared OUTSIDE the frame and passed conditionally — see DependencyDiagram. -->
+{#snippet controlBar()}
+	<DrillBar state={graph} />
+	{#if controls}
+		<ViolationsControl {showEdges} onchange={(v) => (showEdges = v)} />
+		<DensityControl {density} onchange={(v) => (density = v)} />
+		<ZoomControl {zoom} onchange={(v) => (zoom = v)} />
+	{/if}
+{/snippet}
+
+{#snippet legendBar()}
+	<GraphLegend state={graph} relations />
+{/snippet}
+
+<DiagramFrame
+	class={className}
+	overlay={controls || graph.showsDrillBar ? controlBar : undefined}
+	footer={legend ? legendBar : undefined}
+>
+	{#snippet canvas()}
+		<Graph state={graph} bind:zoom {arrows} />
+	{/snippet}
+</DiagramFrame>

package/dist/diagrams/LayersDiagram.svelte.d.ts

@@ -0,0 +1,30 @@
+import { GraphState } from '../GraphState.svelte.js';
+import type { Density } from '../layout/types.js';
+import type { GraphFields, GraphNode } from '../types.js';
+import type { GraphPreset } from '../preset.js';
+type Props = {
+    /** Share one state with another view — see `DependencyDiagram`. */
+    state?: GraphState;
+    nodes?: unknown[];
+    edges?: unknown[];
+    fields?: GraphFields;
+    density?: Density;
+    /** Every edge, or only the ones that climb. Bindable — the control moves it. */
+    showEdges?: 'all' | 'violations';
+    /** Band names by layer index; an unnamed layer reads "Layer N". */
+    layerLabels?: string[];
+    controls?: boolean;
+    legend?: boolean;
+    value?: string | null;
+    preset?: GraphPreset;
+    mode?: 'light' | 'dark';
+    arrows?: boolean;
+    label?: string;
+    onselect?: (id: string | null) => void;
+    onexpand?: (id: string, node: GraphNode) => void;
+    oncollapse?: (id: string, node: GraphNode) => void;
+    class?: string;
+};
+declare const LayersDiagram: import("svelte").Component<Props, {}, "value" | "density" | "showEdges">;
+type LayersDiagram = ReturnType<typeof LayersDiagram>;
+export default LayersDiagram;

package/dist/diagrams/Neighborhood.svelte

@@ -12,11 +12,12 @@
 	import GraphLegend from '../GraphLegend.svelte'
 	import DiagramFrame from './DiagramFrame.svelte'
 	import DepthControl from '../controls/DepthControl.svelte'
+	import DrillBar from '../controls/DrillBar.svelte'
 	import EdgeStyleControl from '../controls/EdgeStyleControl.svelte'
 	import ZoomControl from '../controls/ZoomControl.svelte'
 	import { GraphState } from '../GraphState.svelte.js'
 	import type { EdgeStyle } from '../layout/types.js'
-	import type { GraphFields } from '../types.js'
+	import type { GraphFields, GraphNode } from '../types.js'
 	import type { GraphPreset } from '../preset.js'
 
 	type Props = {
@@ -34,6 +35,12 @@
 		/** How many hops out. One answers "what touches this"; two, "what does this reach". */
 		depth?: number
 		edgeStyle?: EdgeStyle
+		/**
+		 * Mark each card with its group's colour (#172). On by default, as in `ErDiagram`: a
+		 * neighbourhood has no group boxes either, so without it a table's schema is visible at
+		 * the root and invisible one click later.
+		 */
+		groupTint?: boolean
 		controls?: boolean
 		maxDepth?: number
 		legend?: boolean
@@ -43,6 +50,10 @@
 		arrows?: boolean
 		label?: string
 		onselect?: (id: string | null) => void
+		/** The reader expanded a group node (#166) — with its members in `nodes`, they appear at once. */
+		onexpand?: (id: string, node: GraphNode) => void
+		/** The reader collapsed a group back into one node. */
+		oncollapse?: (id: string, node: GraphNode) => void
 		class?: string
 	}
 
@@ -54,6 +65,7 @@
 		focus = $bindable(null),
 		depth = $bindable(1),
 		edgeStyle = $bindable('curved'),
+		groupTint = true,
 		controls = false,
 		maxDepth = 3,
 		legend = false,
@@ -63,6 +75,8 @@
 		arrows = true,
 		label = undefined,
 		onselect = undefined,
+		onexpand = undefined,
+		oncollapse = undefined,
 		class: className = ''
 	}: Props = $props()
 
@@ -76,11 +90,14 @@
 		focus,
 		depth,
 		edgeStyle,
+		groupTint,
 		value,
 		preset,
 		mode,
 		label,
-		onselect
+		onselect,
+		onexpand,
+		oncollapse
 	})
 
 	// svelte-ignore state_referenced_locally
@@ -107,9 +124,12 @@
      inside is always defined, so the frame would render an empty control bar over
      every diagram that asked for none. -->
 {#snippet controlBar()}
-	<DepthControl levels={depth} max={maxDepth} onchange={(v) => (depth = v)} />
-	<EdgeStyleControl {edgeStyle} onchange={(v) => (edgeStyle = v)} />
-	<ZoomControl {zoom} onchange={(v) => (zoom = v)} />
+	<DrillBar state={graph} />
+	{#if controls}
+		<DepthControl levels={depth} max={maxDepth} onchange={(v) => (depth = v)} />
+		<EdgeStyleControl {edgeStyle} onchange={(v) => (edgeStyle = v)} />
+		<ZoomControl {zoom} onchange={(v) => (zoom = v)} />
+	{/if}
 {/snippet}
 
 {#snippet legendBar()}
@@ -118,7 +138,7 @@
 
 <DiagramFrame
 	class={className}
-	overlay={controls ? controlBar : undefined}
+	overlay={controls || graph.showsDrillBar ? controlBar : undefined}
 	footer={legend ? legendBar : undefined}
 >
 	{#snippet canvas()}

package/dist/diagrams/Neighborhood.svelte.d.ts

@@ -1,6 +1,6 @@
 import { GraphState } from '../GraphState.svelte.js';
 import type { EdgeStyle } from '../layout/types.js';
-import type { GraphFields } from '../types.js';
+import type { GraphFields, GraphNode } from '../types.js';
 import type { GraphPreset } from '../preset.js';
 type Props = {
     /**
@@ -17,6 +17,12 @@ type Props = {
     /** How many hops out. One answers "what touches this"; two, "what does this reach". */
     depth?: number;
     edgeStyle?: EdgeStyle;
+    /**
+     * Mark each card with its group's colour (#172). On by default, as in `ErDiagram`: a
+     * neighbourhood has no group boxes either, so without it a table's schema is visible at
+     * the root and invisible one click later.
+     */
+    groupTint?: boolean;
     controls?: boolean;
     maxDepth?: number;
     legend?: boolean;
@@ -26,6 +32,10 @@ type Props = {
     arrows?: boolean;
     label?: string;
     onselect?: (id: string | null) => void;
+    /** The reader expanded a group node (#166) — with its members in `nodes`, they appear at once. */
+    onexpand?: (id: string, node: GraphNode) => void;
+    /** The reader collapsed a group back into one node. */
+    oncollapse?: (id: string, node: GraphNode) => void;
     class?: string;
 };
 declare const Neighborhood: import("svelte").Component<Props, {}, "focus" | "value" | "edgeStyle" | "depth">;

package/dist/diagrams/PolymetricTree.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+	/**
+	 * Lanza & Marinescu's System Complexity view (#168): the containment tree, each file a box
+	 * whose width, height and shade show three measures at once.
+	 *
+	 * `Treemap` encodes ONE measure as area; this encodes three, and the three-at-once is the
+	 * point — a narrow, tall, dark box reads differently from a wide, short, pale one. Each
+	 * channel is a prop and a picker, and the legend names them by default, because three
+	 * encodings are unreadable without a key.
+	 */
+	import Graph from '../Graph.svelte'
+	import GraphLegend from '../GraphLegend.svelte'
+	import DiagramFrame from './DiagramFrame.svelte'
+	import DrillBar from '../controls/DrillBar.svelte'
+	import MeasureControl from '../controls/MeasureControl.svelte'
+	import ZoomControl from '../controls/ZoomControl.svelte'
+	import { GraphState } from '../GraphState.svelte.js'
+	import type { GraphFields } from '../types.js'
+	import type { GraphPreset } from '../preset.js'
+
+	type Props = {
+		/** Share one state with another view — see `DependencyDiagram`. */
+		state?: GraphState
+		nodes?: unknown[]
+		edges?: unknown[]
+		fields?: GraphFields
+		/** What box WIDTH encodes: a `measures` key, `weight`, or `degree`. Bindable. */
+		widthBy?: string
+		/** What box HEIGHT encodes. Bindable. */
+		heightBy?: string
+		/** What box SHADE encodes; omit for no colour channel. Bindable. */
+		colorBy?: string
+		controls?: boolean
+		/** On by default: three encodings are unreadable without a key. */
+		legend?: boolean
+		value?: string | null
+		preset?: GraphPreset
+		mode?: 'light' | 'dark'
+		label?: string
+		onselect?: (id: string | null) => void
+		class?: string
+	}
+
+	let {
+		state: provided,
+		nodes = [],
+		edges = [],
+		fields = {},
+		widthBy = $bindable('weight'),
+		heightBy = $bindable('weight'),
+		colorBy = $bindable(undefined),
+		controls = false,
+		legend = true,
+		value = $bindable(undefined),
+		preset = undefined,
+		mode = 'light',
+		label = undefined,
+		onselect = undefined,
+		class: className = ''
+	}: Props = $props()
+
+	let zoom = $state(1)
+
+	const config = () => ({
+		nodes,
+		edges,
+		fields,
+		layout: 'polymetric',
+		widthBy,
+		heightBy,
+		colorBy,
+		value,
+		preset,
+		mode,
+		label,
+		onselect
+	})
+
+	// svelte-ignore state_referenced_locally
+	const graph = provided ?? new GraphState(config())
+
+	$effect(() => {
+		if (!provided) {
+			graph.update(config())
+			return
+		}
+		// A supplied state is the caller's — see DependencyDiagram.
+		const { nodes: _n, edges: _e, fields: _f, preset: _p, mode: _m, value: _v, ...mine } =
+			config()
+		graph.apply(mine)
+	})
+</script>
+
+{#snippet controlBar()}
+	<DrillBar state={graph} />
+	{#if controls}
+		<MeasureControl channel="width" value={widthBy} options={graph.measureKeys} onchange={(v) => (widthBy = v ?? 'weight')} />
+		<MeasureControl channel="height" value={heightBy} options={graph.measureKeys} onchange={(v) => (heightBy = v ?? 'weight')} />
+		<MeasureControl channel="color" value={colorBy} options={graph.measureKeys} allowNone onchange={(v) => (colorBy = v)} />
+		<ZoomControl {zoom} onchange={(v) => (zoom = v)} />
+	{/if}
+{/snippet}
+
+{#snippet legendBar()}
+	<GraphLegend state={graph} channels />
+{/snippet}
+
+<DiagramFrame
+	class={className}
+	overlay={controls || graph.showsDrillBar ? controlBar : undefined}
+	footer={legend ? legendBar : undefined}
+>
+	{#snippet canvas()}
+		<Graph state={graph} bind:zoom arrows={false} />
+	{/snippet}
+</DiagramFrame>

package/dist/diagrams/PolymetricTree.svelte.d.ts

@@ -0,0 +1,28 @@
+import { GraphState } from '../GraphState.svelte.js';
+import type { GraphFields } from '../types.js';
+import type { GraphPreset } from '../preset.js';
+type Props = {
+    /** Share one state with another view — see `DependencyDiagram`. */
+    state?: GraphState;
+    nodes?: unknown[];
+    edges?: unknown[];
+    fields?: GraphFields;
+    /** What box WIDTH encodes: a `measures` key, `weight`, or `degree`. Bindable. */
+    widthBy?: string;
+    /** What box HEIGHT encodes. Bindable. */
+    heightBy?: string;
+    /** What box SHADE encodes; omit for no colour channel. Bindable. */
+    colorBy?: string;
+    controls?: boolean;
+    /** On by default: three encodings are unreadable without a key. */
+    legend?: boolean;
+    value?: string | null;
+    preset?: GraphPreset;
+    mode?: 'light' | 'dark';
+    label?: string;
+    onselect?: (id: string | null) => void;
+    class?: string;
+};
+declare const PolymetricTree: import("svelte").Component<Props, {}, "value" | "widthBy" | "heightBy" | "colorBy">;
+type PolymetricTree = ReturnType<typeof PolymetricTree>;
+export default PolymetricTree;

package/dist/diagrams/StructureDiagram.svelte

@@ -15,10 +15,11 @@
 	import GraphLegend from '../GraphLegend.svelte'
 	import DiagramFrame from './DiagramFrame.svelte'
 	import DepthControl from '../controls/DepthControl.svelte'
+	import DrillBar from '../controls/DrillBar.svelte'
 	import BundleControl from '../controls/BundleControl.svelte'
 	import ZoomControl from '../controls/ZoomControl.svelte'
 	import { GraphState } from '../GraphState.svelte.js'
-	import type { GraphFields } from '../types.js'
+	import type { GraphFields, GraphNode } from '../types.js'
 	import type { GraphPreset } from '../preset.js'
 
 	type Props = {
@@ -44,6 +45,14 @@
 		mode?: 'light' | 'dark'
 		label?: string
 		onselect?: (id: string | null) => void
+		/**
+		 * The reader opened a box — `path` is the new `focusPath`, `node` the declared node there
+		 * (null for a synthesised container). Return a promise while you load that level; the
+		 * canvas shows it pending, and a rejection returns to the previous level.
+		 */
+		ondrill?: (path: string[], node: GraphNode | null) => void | Promise<void>
+		/** The reader climbed out; `path` is the new, shorter `focusPath`. */
+		ondrillup?: (path: string[]) => void | Promise<void>
 		class?: string
 	}
 
@@ -65,6 +74,8 @@
 		mode = 'light',
 		label = undefined,
 		onselect = undefined,
+		ondrill = undefined,
+		ondrillup = undefined,
 		class: className = ''
 	}: Props = $props()
 
@@ -84,7 +95,12 @@
 		preset,
 		mode,
 		label,
-		onselect
+		onselect,
+		ondrill,
+		ondrillup,
+		// Drilling moves focusPath inside the state; keep the bindable prop in step, or the next
+		// update() would put the old value back.
+		onfocuspath: (path: string[]) => (focusPath = path)
 	})
 
 	// svelte-ignore state_referenced_locally
@@ -101,8 +117,19 @@
 		// and are never reset here. What this component DOES own is the options its own
 		// controls drive — the layout above all, since choosing this component is choosing it.
 		// `apply` merges; `update` would revert everything it does not name.
-		const { nodes: _n, edges: _e, fields: _f, preset: _p, mode: _m, value: _v, ...mine } =
-			config()
+		// The drill path too: a caller's state holds where the reader drilled, and pushing this
+		// component's own focusPath prop back over it undid the drill on any prop change.
+		const {
+			nodes: _n,
+			edges: _e,
+			fields: _f,
+			preset: _p,
+			mode: _m,
+			value: _v,
+			focusPath: _fp,
+			onfocuspath: _sync,
+			...mine
+		} = config()
 		graph.apply(mine)
 	})
 </script>
@@ -111,9 +138,12 @@
      inside is always defined, so the frame would render an empty control bar over
      every diagram that asked for none. -->
 {#snippet controlBar()}
-	<DepthControl {levels} max={maxLevels} onchange={(v) => (levels = v)} />
-	<BundleControl {bundleTension} onchange={(v) => (bundleTension = v)} />
-	<ZoomControl {zoom} onchange={(v) => (zoom = v)} />
+	<DrillBar state={graph} />
+	{#if controls}
+		<DepthControl {levels} max={maxLevels} onchange={(v) => (levels = v)} />
+		<BundleControl {bundleTension} onchange={(v) => (bundleTension = v)} />
+		<ZoomControl {zoom} onchange={(v) => (zoom = v)} />
+	{/if}
 {/snippet}
 
 {#snippet legendBar()}
@@ -122,7 +152,7 @@
 
 <DiagramFrame
 	class={className}
-	overlay={controls ? controlBar : undefined}
+	overlay={controls || graph.showsDrillBar ? controlBar : undefined}
 	footer={legend ? legendBar : undefined}
 >
 	{#snippet canvas()}

package/dist/diagrams/StructureDiagram.svelte.d.ts

@@ -1,5 +1,5 @@
 import { GraphState } from '../GraphState.svelte.js';
-import type { GraphFields } from '../types.js';
+import type { GraphFields, GraphNode } from '../types.js';
 import type { GraphPreset } from '../preset.js';
 type Props = {
     /** Share one state with views beside this one. See `ErDiagram` for the contract. */
@@ -24,6 +24,14 @@ type Props = {
     mode?: 'light' | 'dark';
     label?: string;
     onselect?: (id: string | null) => void;
+    /**
+     * The reader opened a box — `path` is the new `focusPath`, `node` the declared node there
+     * (null for a synthesised container). Return a promise while you load that level; the
+     * canvas shows it pending, and a rejection returns to the previous level.
+     */
+    ondrill?: (path: string[], node: GraphNode | null) => void | Promise<void>;
+    /** The reader climbed out; `path` is the new, shorter `focusPath`. */
+    ondrillup?: (path: string[]) => void | Promise<void>;
     class?: string;
 };
 declare const StructureDiagram: import("svelte").Component<Props, {}, "value" | "focusPath" | "levels" | "bundleTension">;

package/dist/diagrams/Sunburst.svelte

@@ -13,9 +13,11 @@
 	import GraphLegend from '../GraphLegend.svelte'
 	import DiagramFrame from './DiagramFrame.svelte'
 	import DepthControl from '../controls/DepthControl.svelte'
+	import DrillBar from '../controls/DrillBar.svelte'
+	import MeasureControl from '../controls/MeasureControl.svelte'
 	import ZoomControl from '../controls/ZoomControl.svelte'
 	import { GraphState } from '../GraphState.svelte.js'
-	import type { GraphFields } from '../types.js'
+	import type { GraphFields, GraphNode } from '../types.js'
 	import type { GraphPreset } from '../preset.js'
 
 	type Props = {
@@ -30,6 +32,8 @@
 		fields?: GraphFields
 		/** What area encodes. A `measures` key, or `weight`, or `degree`. */
 		sizeBy?: string
+		/** The measure — a 0..1 share — each box is shaded by (#164). Bindable; the picker moves it. */
+		shadeBy?: string
 		/** How many levels below the focus to materialise. */
 		levels?: number
 		/** The subtree to render as the whole canvas. `[]` is the root. Drilling, not zooming. */
@@ -42,6 +46,14 @@
 		mode?: 'light' | 'dark'
 		label?: string
 		onselect?: (id: string | null) => void
+		/**
+		 * The reader opened a box — `path` is the new `focusPath`, `node` the declared node there
+		 * (null for a synthesised container). Return a promise while you load that level; the
+		 * canvas shows it pending, and a rejection returns to the previous level.
+		 */
+		ondrill?: (path: string[], node: GraphNode | null) => void | Promise<void>
+		/** The reader climbed out; `path` is the new, shorter `focusPath`. */
+		ondrillup?: (path: string[]) => void | Promise<void>
 		class?: string
 	}
 
@@ -51,6 +63,7 @@
 		edges = [],
 		fields = {},
 		sizeBy = 'weight',
+		shadeBy = $bindable(undefined),
 		levels = $bindable(2),
 		focusPath = $bindable([]),
 		controls = false,
@@ -61,6 +74,8 @@
 		mode = 'light',
 		label = undefined,
 		onselect = undefined,
+		ondrill = undefined,
+		ondrillup = undefined,
 		class: className = ''
 	}: Props = $props()
 
@@ -72,13 +87,19 @@
 		fields,
 		layout: 'sunburst',
 		sizeBy,
+		shadeBy,
 		levels,
 		focusPath,
 		value,
 		preset,
 		mode,
 		label,
-		onselect
+		onselect,
+		ondrill,
+		ondrillup,
+		// Drilling moves focusPath inside the state; keep the bindable prop in step, or the next
+		// update() would put the old value back.
+		onfocuspath: (path: string[]) => (focusPath = path)
 	})
 
 	// svelte-ignore state_referenced_locally
@@ -95,8 +116,19 @@
 		// and are never reset here. What this component DOES own is the options its own
 		// controls drive — the layout above all, since choosing this component is choosing it.
 		// `apply` merges; `update` would revert everything it does not name.
-		const { nodes: _n, edges: _e, fields: _f, preset: _p, mode: _m, value: _v, ...mine } =
-			config()
+		// The drill path too: a caller's state holds where the reader drilled, and pushing this
+		// component's own focusPath prop back over it undid the drill on any prop change.
+		const {
+			nodes: _n,
+			edges: _e,
+			fields: _f,
+			preset: _p,
+			mode: _m,
+			value: _v,
+			focusPath: _fp,
+			onfocuspath: _sync,
+			...mine
+		} = config()
 		graph.apply(mine)
 	})
 </script>
@@ -105,17 +137,21 @@
      inside is always defined, so the frame would render an empty control bar over
      every diagram that asked for none. -->
 {#snippet controlBar()}
-	<DepthControl {levels} max={maxLevels} onchange={(v) => (levels = v)} />
-	<ZoomControl {zoom} onchange={(v) => (zoom = v)} />
+	<DrillBar state={graph} />
+	{#if controls}
+		<DepthControl {levels} max={maxLevels} onchange={(v) => (levels = v)} />
+		<MeasureControl channel="color" value={shadeBy} options={graph.measureKeys} allowNone onchange={(v) => (shadeBy = v)} />
+		<ZoomControl {zoom} onchange={(v) => (zoom = v)} />
+	{/if}
 {/snippet}
 
 {#snippet legendBar()}
-	<GraphLegend state={graph} groups />
+	<GraphLegend state={graph} groups shade />
 {/snippet}
 
 <DiagramFrame
 	class={className}
-	overlay={controls ? controlBar : undefined}
+	overlay={controls || graph.showsDrillBar ? controlBar : undefined}
 	footer={legend ? legendBar : undefined}
 >
 	{#snippet canvas()}