@corensystem/coren-ui 1.0.0-next.20260924.75108.887a9c2

package/dist/pages/wc3-lineage-data-view.mjs

@@ -0,0 +1,481 @@
+import { Badge } from "../badge.mjs";
+import { HoverTooltip } from "../tooltip.mjs";
+import { Button } from "../button.mjs";
+import { Card, CardContent, CardHeader, CardTitle } from "../card.mjs";
+import { GraphCanvas } from "../graph-canvas.mjs";
+import { WC3_OBJECT_TYPES, getObjectType, instanceCount } from "./wc3-ontology-data.mjs";
+import { LineageGlyph, Mono, Pane, TypeGlyphLabel, lineageNav } from "./wc3-lineage-shared.mjs";
+import { WC3_NODE_KINDS, WC3_PIPELINES, WC3_PROJECTION_USAGE, appliedInstalls, getLineageProduct, lineageSources, productTypeMeta, syncedObjectTypeIds, typesFromProduct } from "./wc3-lineage-data.mjs";
+import { cn } from "@corensystem/coren-utils";
+import { ArrowRight, Box, Pencil } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Handle, Position, useEdgesState, useNodesState } from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+//#region src/pages/wc3-lineage-data-view.tsx
+/** The pseudo-node for the presence_events stream. It is not an object type and resolves to nothing. */
+const TOPIC_ID = "__topic__";
+/** Object types a pipeline syncs into — the join every connection rule is expressed in terms of. */
+function sinkTargets(pipelineId) {
+	const pipeline = WC3_PIPELINES.find((p) => p.id === pipelineId);
+	if (!pipeline) return [];
+	return pipeline.nodes.filter((n) => n.kind === "sink_sync" && n.params.targetOt).map((n) => n.params.targetOt);
+}
+/** A source node's id is the composite "<pipelineId>:<nodeId>". */
+const pipelineOfSource = (sourceId) => sourceId.split(":")[0] ?? "";
+const projectionUses = (key) => WC3_PROJECTION_USAGE[key]?.uses ?? [];
+const installedProductKey = (otId) => getObjectType(otId)?.installedBy?.productKey;
+/**
+* The prototype's `connected(kind, id)`, reproduced rule for rule. Order matters: the product branch
+* runs FIRST and short-circuits, which is why selecting a product lights only pipelines and object
+* types (the Datasources and Consuming projections columns go fully dim), and why selecting a
+* datasource or a projection dims the whole Products column.
+*/
+function isConnected(sel, kind, id) {
+	if (!sel) return true;
+	if (sel.kind === kind && sel.id === id) return true;
+	if (sel.kind === "prod" || kind === "prod") {
+		const productKey = sel.kind === "prod" ? sel.id : id;
+		const other = sel.kind === "prod" ? {
+			kind,
+			id
+		} : sel;
+		if (other.kind === "ot") return installedProductKey(other.id) === productKey;
+		if (other.kind === "pipe") return sinkTargets(other.id).some((t) => installedProductKey(t) === productKey);
+		return false;
+	}
+	if (sel.kind === "pipe") {
+		const targets = sinkTargets(sel.id);
+		if (kind === "src") return id.startsWith(`${sel.id}:`);
+		if (kind === "ot") return targets.includes(id);
+		if (kind === "proj") return projectionUses(id).some((t) => targets.includes(t));
+		return false;
+	}
+	if (sel.kind === "ot") {
+		if (kind === "pipe") return sinkTargets(id).includes(sel.id);
+		if (kind === "src") return sinkTargets(pipelineOfSource(id)).includes(sel.id);
+		if (kind === "proj") return projectionUses(id).includes(sel.id);
+		return false;
+	}
+	if (sel.kind === "proj") {
+		const uses = projectionUses(sel.id);
+		if (kind === "ot") return uses.includes(id);
+		if (kind === "pipe") return sinkTargets(id).some((t) => uses.includes(t));
+		if (kind === "src") return sinkTargets(pipelineOfSource(id)).some((t) => uses.includes(t));
+		return false;
+	}
+	if (sel.kind === "src") {
+		const pipelineId = pipelineOfSource(sel.id);
+		const targets = sinkTargets(pipelineId);
+		if (kind === "pipe") return id === pipelineId;
+		if (kind === "ot") return targets.includes(id);
+		if (kind === "proj") return projectionUses(id).some((t) => targets.includes(t));
+		return false;
+	}
+	return false;
+}
+/** Layer geometry. One column per node kind, in flow order, left to right. */
+const COLUMN_GAP = 300;
+const ROW_GAP = 104;
+const HEADING_Y = -56;
+const COLUMNS = [
+	{
+		field: "products",
+		kind: "prod",
+		heading: "Products (provenance)"
+	},
+	{
+		field: "sources",
+		kind: "src",
+		heading: "Datasources / drops"
+	},
+	{
+		field: "pipelines",
+		kind: "pipe",
+		heading: "Pipelines"
+	},
+	{
+		field: "objectTypes",
+		kind: "ot",
+		heading: "Object types synced"
+	},
+	{
+		field: "projections",
+		kind: "proj",
+		heading: "Consuming projections"
+	}
+];
+/** Node ids carry their kind: an id can repeat across columns (a pipeline and its source share one). */
+const flowId = (kind, id) => `${kind}:${id}`;
+const parseFlowId = (flowNodeId) => {
+	const at = flowNodeId.indexOf(":");
+	return {
+		kind: flowNodeId.slice(0, at),
+		id: flowNodeId.slice(at + 1)
+	};
+};
+/**
+* A node on the canvas. Same visual language as the ontology graph explorer's node, so the two
+* canvases read as one system. Handles are transparent — edges attach, but no dots show.
+*/
+function LineageFlowNode({ data }) {
+	const { node, dimmed, picked } = data;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("wwc:w-[224px] wwc:rounded-lg wwc:border wwc:bg-card wwc:px-3 wwc:py-2 wwc:transition-opacity", picked ? "wwc:border-primary wwc:ring-1 wwc:ring-primary" : "wwc:border-border wwc:hover:border-primary/50", dimmed && "wwc:opacity-25"),
+		children: [
+			/* @__PURE__ */ jsx(Handle, {
+				type: "target",
+				position: Position.Left,
+				className: "wwc:!border-0 wwc:!bg-transparent"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "wwc:flex wwc:items-start wwc:gap-1.5 wwc:text-xs wwc:font-semibold",
+				children: [/* @__PURE__ */ jsx(LineageGlyph, { name: node.icon }), /* @__PURE__ */ jsx("span", {
+					className: "wwc:min-w-0 wwc:break-words",
+					children: node.label
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "wwc:mt-0.5 wwc:flex wwc:items-center wwc:gap-2",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "wwc:min-w-0 wwc:break-words wwc:text-[10px] wwc:text-muted-foreground",
+					children: node.sub
+				}), node.open && /* @__PURE__ */ jsxs(Button, {
+					variant: "ghost",
+					size: "sm",
+					className: "wwc:nodrag wwc:ml-auto wwc:h-5 wwc:shrink-0 wwc:gap-0.5 wwc:px-1 wwc:text-[10px]",
+					onClick: (event) => {
+						event.stopPropagation();
+						node.open?.();
+					},
+					children: ["Open", /* @__PURE__ */ jsx(ArrowRight, { className: "wwc:h-3 wwc:w-3" })]
+				})]
+			}),
+			/* @__PURE__ */ jsx(Handle, {
+				type: "source",
+				position: Position.Right,
+				className: "wwc:!border-0 wwc:!bg-transparent"
+			})
+		]
+	});
+}
+/** A column heading, parked above its column so it pans and zooms with the layer it labels. */
+function LineageHeadingNode({ data }) {
+	const { label } = data;
+	return /* @__PURE__ */ jsx("div", {
+		className: "wwc:w-[224px] wwc:text-[10px] wwc:font-semibold wwc:uppercase wwc:tracking-wider wwc:text-muted-foreground",
+		children: label
+	});
+}
+const FLOW_NODE_TYPES = {
+	lineage: LineageFlowNode,
+	heading: LineageHeadingNode
+};
+function ProvenanceCard({ onNavigate }) {
+	const withProvenance = WC3_OBJECT_TYPES.filter((o) => o.installedBy);
+	const without = WC3_OBJECT_TYPES.filter((o) => !o.installedBy);
+	const rows = appliedInstalls().map((install) => ({
+		install,
+		types: typesFromProduct(install.productKey)
+	})).filter((r) => r.types.length > 0);
+	return /* @__PURE__ */ jsxs(Card, { children: [/* @__PURE__ */ jsx(CardHeader, {
+		className: "wwc:p-4",
+		children: /* @__PURE__ */ jsxs(CardTitle, {
+			className: "wwc:flex wwc:flex-wrap wwc:items-center wwc:gap-1.5 wwc:text-sm",
+			children: [
+				/* @__PURE__ */ jsx(Box, { className: "wwc:h-4 wwc:w-4 wwc:shrink-0" }),
+				"Product provenance",
+				/* @__PURE__ */ jsxs("span", {
+					className: "wwc:font-normal wwc:text-muted-foreground",
+					children: [
+						"which product install put each object type in the store — ",
+						withProvenance.length,
+						" of",
+						" ",
+						WC3_OBJECT_TYPES.length,
+						" object types carry provenance"
+					]
+				})
+			]
+		})
+	}), /* @__PURE__ */ jsxs(CardContent, {
+		className: "wwc:space-y-2 wwc:p-4 wwc:pt-0",
+		"data-lineage-provenance": withProvenance.length,
+		children: [rows.length === 0 ? /* @__PURE__ */ jsx("div", {
+			className: "wwc:text-xs wwc:text-muted-foreground",
+			children: "No applied product install has put a type in this store."
+		}) : rows.map(({ install, types }) => {
+			const product = getLineageProduct(install.productKey);
+			const meta = productTypeMeta(product?.productType ?? "");
+			return /* @__PURE__ */ jsxs("div", {
+				className: "wwc:space-y-2 wwc:rounded-md wwc:border wwc:border-border wwc:p-2.5",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "wwc:flex wwc:flex-wrap wwc:items-center wwc:gap-2",
+					children: [
+						/* @__PURE__ */ jsx(LineageGlyph, { name: meta.icon }),
+						/* @__PURE__ */ jsx("span", {
+							className: "wwc:text-xs wwc:font-semibold",
+							children: product?.displayName ?? install.productKey
+						}),
+						/* @__PURE__ */ jsxs(Mono, { children: [
+							install.productKey,
+							" ",
+							install.version
+						] }),
+						/* @__PURE__ */ jsxs(Badge, {
+							variant: "neutralSoft",
+							className: "wwc:font-normal",
+							children: [install.environment, install.baseline ? " · baseline" : ""]
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							size: "sm",
+							className: "wwc:ml-auto wwc:shrink-0",
+							onClick: () => onNavigate?.(lineageNav.product(install.productKey)),
+							children: "Open product"
+						})
+					]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "wwc:flex wwc:flex-wrap wwc:items-center wwc:gap-1.5",
+					children: types.map((type) => /* @__PURE__ */ jsx(HoverTooltip, {
+						content: `installed by ${type.installedBy?.productKey} ${type.installedBy?.version} (install ${type.installedBy?.installId})`,
+						children: /* @__PURE__ */ jsx("button", {
+							type: "button",
+							"data-prov-type": type.apiName,
+							onClick: () => onNavigate?.(lineageNav.objectType(type.id)),
+							className: "wwc:rounded-md wwc:border wwc:border-border wwc:px-1.5 wwc:py-0.5 wwc:text-[11px] wwc:hover:bg-accent wwc:focus-visible:outline-none wwc:focus-visible:ring-1 wwc:focus-visible:ring-ring",
+							children: /* @__PURE__ */ jsx(TypeGlyphLabel, { type })
+						})
+					}, type.id))
+				})]
+			}, install.id);
+		}), without.length > 0 && /* @__PURE__ */ jsxs("div", {
+			className: "wwc:flex wwc:items-start wwc:gap-1.5 wwc:text-[11px] wwc:text-muted-foreground",
+			children: [/* @__PURE__ */ jsx(Pencil, { className: "wwc:mt-0.5 wwc:h-3.5 wwc:w-3.5 wwc:shrink-0" }), /* @__PURE__ */ jsxs("span", { children: [
+				without.length,
+				" object type(s) carry no product provenance — they were authored directly in this workspace (",
+				without.slice(0, 6).map((o) => o.displayName).join(", "),
+				")."
+			] })]
+		})]
+	})] });
+}
+/**
+* The wires. Solid edges are the data flow between adjacent layers; the dashed product → object type
+* edge is provenance, which skips the middle layers because it is not a flow step. Every edge is
+* guarded on the target actually being on the canvas, so a pipeline that syncs a type outside the
+* synced column simply draws no wire rather than dangling.
+*/
+function buildEdges(columns) {
+	const edges = [];
+	const has = (field, id) => (columns[field] ?? []).some((n) => n.id === id);
+	for (const source of columns.sources ?? []) {
+		const pipelineId = pipelineOfSource(source.id);
+		if (has("pipelines", pipelineId)) edges.push({
+			id: `e:src:${source.id}`,
+			source: flowId("src", source.id),
+			target: flowId("pipe", pipelineId)
+		});
+	}
+	for (const pipeline of columns.pipelines ?? []) {
+		for (const target of sinkTargets(pipeline.id)) if (has("objectTypes", target)) edges.push({
+			id: `e:pipe:${pipeline.id}:${target}`,
+			source: flowId("pipe", pipeline.id),
+			target: flowId("ot", target)
+		});
+		if (WC3_PIPELINES.find((p) => p.id === pipeline.id)?.nodes.some((n) => n.kind === "sink_topic") && has("objectTypes", TOPIC_ID)) edges.push({
+			id: `e:pipe:${pipeline.id}:topic`,
+			source: flowId("pipe", pipeline.id),
+			target: flowId("ot", TOPIC_ID)
+		});
+	}
+	for (const projection of columns.projections ?? []) for (const used of projectionUses(projection.id)) if (has("objectTypes", used)) edges.push({
+		id: `e:proj:${projection.id}:${used}`,
+		source: flowId("ot", used),
+		target: flowId("proj", projection.id)
+	});
+	for (const type of columns.objectTypes ?? []) {
+		const productKey = installedProductKey(type.id);
+		if (productKey && has("products", productKey)) edges.push({
+			id: `e:prod:${productKey}:${type.id}`,
+			source: flowId("prod", productKey),
+			target: flowId("ot", type.id),
+			data: { provenance: true }
+		});
+	}
+	return edges;
+}
+/** Edge paint. Dimming an edge as well as its endpoints is what makes the selected slice readable. */
+function edgeStyle(edge, sel) {
+	const provenance = !!edge.data?.provenance;
+	const ends = [edge.source, edge.target].map(parseFlowId);
+	const active = !sel || ends.every((end) => isConnected(sel, end.kind, end.id));
+	return {
+		strokeDasharray: provenance ? "4 3" : void 0,
+		stroke: active && sel ? "var(--wwc-color-primary)" : "var(--wwc-color-border)",
+		strokeWidth: active && sel ? 1.5 : 1,
+		opacity: active ? 1 : .12
+	};
+}
+function LineageDataView({ onNavigate } = {}) {
+	const [sel, setSel] = useState(null);
+	const columns = useMemo(() => {
+		const products = appliedInstalls().map((install) => {
+			const product = getLineageProduct(install.productKey);
+			return {
+				key: install.id,
+				kind: "prod",
+				id: install.productKey,
+				icon: productTypeMeta(product?.productType ?? "").icon,
+				label: product?.displayName ?? install.productKey,
+				sub: `${install.addedObjectTypes.length} object types · ${install.environment}${install.baseline ? " · baseline" : ""}`,
+				open: () => onNavigate?.(lineageNav.product(install.productKey))
+			};
+		});
+		const sources = lineageSources().map((source) => ({
+			key: source.id,
+			kind: "src",
+			id: source.id,
+			icon: WC3_NODE_KINDS[source.node.kind]?.icon ?? "database",
+			label: source.name,
+			sub: source.pipeline.name,
+			open: () => onNavigate?.(lineageNav.pipeline(source.pipeline.id))
+		}));
+		const pipelines = WC3_PIPELINES.map((pipeline) => ({
+			key: pipeline.id,
+			kind: "pipe",
+			id: pipeline.id,
+			icon: pipeline.icon,
+			label: pipeline.name,
+			sub: `${pipeline.nodes.length} nodes · ${pipeline.runs.length} run(s)`,
+			open: () => onNavigate?.(lineageNav.pipeline(pipeline.id))
+		}));
+		const objectTypes = syncedObjectTypeIds().map((otId) => {
+			const type = getObjectType(otId);
+			return {
+				key: otId,
+				kind: "ot",
+				id: otId,
+				icon: type?.icon ?? "box",
+				label: type?.displayName ?? otId,
+				sub: `${instanceCount(otId)} instances`,
+				open: () => onNavigate?.(lineageNav.objectType(otId))
+			};
+		});
+		objectTypes.push({
+			key: TOPIC_ID,
+			kind: "ot",
+			id: TOPIC_ID,
+			icon: "upload",
+			label: "presence_events topic",
+			sub: "stream — feeds live occupancy"
+		});
+		return {
+			products,
+			sources,
+			pipelines,
+			objectTypes,
+			projections: Object.entries(WC3_PROJECTION_USAGE).map(([key, usage]) => ({
+				key,
+				kind: "proj",
+				id: key,
+				icon: usage.icon,
+				label: usage.label,
+				sub: `${usage.uses.length} types consumed`,
+				open: () => onNavigate?.(lineageNav.projection(key))
+			}))
+		};
+	}, [onNavigate]);
+	const toggle = (node) => setSel((current) => current && current.kind === node.kind && current.id === node.id ? null : {
+		kind: node.kind,
+		id: node.id
+	});
+	const initialNodes = useMemo(() => {
+		const built = [];
+		COLUMNS.forEach((column, columnIndex) => {
+			const x = columnIndex * COLUMN_GAP;
+			built.push({
+				id: `head:${column.kind}`,
+				type: "heading",
+				position: {
+					x,
+					y: HEADING_Y
+				},
+				data: { label: column.heading },
+				draggable: false,
+				selectable: false,
+				connectable: false
+			});
+			columns[column.field]?.forEach((node, rowIndex) => {
+				built.push({
+					id: flowId(node.kind, node.id),
+					type: "lineage",
+					position: {
+						x,
+						y: rowIndex * ROW_GAP
+					},
+					data: {
+						node,
+						dimmed: false,
+						picked: false
+					}
+				});
+			});
+		});
+		return built;
+	}, [columns]);
+	const initialEdges = useMemo(() => buildEdges(columns), [columns]);
+	const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+	const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+	useEffect(() => {
+		setNodes((current) => current.map((node) => {
+			if (node.type !== "lineage") return node;
+			const data = node.data;
+			const picked = !!sel && sel.kind === data.node.kind && sel.id === data.node.id;
+			const dimmed = !!sel && !isConnected(sel, data.node.kind, data.node.id);
+			if (picked === data.picked && dimmed === data.dimmed) return node;
+			return {
+				...node,
+				data: {
+					...data,
+					picked,
+					dimmed
+				}
+			};
+		}));
+		setEdges((current) => current.map((edge) => ({
+			...edge,
+			style: edgeStyle(edge, sel)
+		})));
+	}, [
+		sel,
+		setNodes,
+		setEdges
+	]);
+	return /* @__PURE__ */ jsxs(Pane, { children: [
+		/* @__PURE__ */ jsx("p", {
+			className: "wwc:text-xs wwc:text-muted-foreground",
+			children: "Click any node to highlight its connected slice (product → datasource → pipeline → object type → consuming projection). Click again to clear. Drag to rearrange, scroll to zoom."
+		}),
+		/* @__PURE__ */ jsx(Card, {
+			className: "wwc:h-[560px] wwc:shrink-0 wwc:overflow-hidden",
+			children: /* @__PURE__ */ jsx(GraphCanvas, {
+				nodes,
+				edges,
+				onNodesChange,
+				onEdgesChange,
+				nodeTypes: FLOW_NODE_TYPES,
+				onNodeClick: (_event, node) => {
+					if (node.type !== "lineage") return;
+					toggle(node.data.node);
+				},
+				onPaneClick: () => setSel(null)
+			})
+		}),
+		/* @__PURE__ */ jsx(ProvenanceCard, { onNavigate })
+	] });
+}
+//#endregion
+export { LineageDataView };
+
+//# sourceMappingURL=wc3-lineage-data-view.mjs.map

package/dist/pages/wc3-lineage-data-view.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"wc3-lineage-data-view.mjs","names":[],"sources":["../../src/pages/wc3-lineage-data-view.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {Handle, Position, type Edge, type Node, type NodeProps, useEdgesState, useNodesState} from \"@xyflow/react\";\nimport \"@xyflow/react/dist/style.css\";\nimport {ArrowRight, Box, Pencil} from \"lucide-react\";\nimport {useEffect, useMemo, useState} from \"react\";\n// React Flow ships its own positioning styles; without these the canvas does not lay out at all.\n\nimport {Badge} from \"../badge\";\nimport {Button} from \"../button\";\nimport {Card, CardContent, CardHeader, CardTitle} from \"../card\";\nimport {GraphCanvas} from \"../graph-canvas\";\nimport {HoverTooltip} from \"../tooltip\";\nimport {\n\tWC3_NODE_KINDS,\n\tWC3_PIPELINES,\n\tWC3_PROJECTION_USAGE,\n\tappliedInstalls,\n\tgetLineageProduct,\n\tlineageSources,\n\tproductTypeMeta,\n\tsyncedObjectTypeIds,\n\ttypesFromProduct,\n} from \"./wc3-lineage-data\";\nimport {LineageGlyph, Mono, Pane, TypeGlyphLabel, lineageNav, type LineageViewProps} from \"./wc3-lineage-shared\";\nimport {WC3_OBJECT_TYPES, getObjectType, instanceCount} from \"./wc3-ontology-data\";\n\n// Tab \"data\" of the Lineage perspective — the datasource → pipeline → object type → projection DAG,\n// ported from the prototype's m7-lineage.js `LineageData`.\n//\n// The prototype draws NO wires: it is five columns of cards that fade on selection, so the viewer has\n// to infer which node feeds which. This renders the same five layers on React Flow instead, with the\n// edges drawn, so the path is visible before anything is clicked. The selection model is unchanged —\n// `isConnected` below is still the prototype's rule set, and it now dims edges as well as nodes.\n//\n// Two edge kinds, because two different relationships are in play:\n//   solid  — data flow:   datasource → pipeline → object type → consuming projection\n//   dashed — provenance:  which product install put an object type in the store (not a flow step)\n\n// ─── Selection model ─────────────────────────────────────────────────────────\n\ntype NodeKind = \"prod\" | \"src\" | \"pipe\" | \"ot\" | \"proj\";\ntype Selection = {kind: NodeKind; id: string};\n\n/** The pseudo-node for the presence_events stream. It is not an object type and resolves to nothing. */\nconst TOPIC_ID = \"__topic__\";\n\n/** Object types a pipeline syncs into — the join every connection rule is expressed in terms of. */\nfunction sinkTargets(pipelineId: string): string[] {\n\tconst pipeline = WC3_PIPELINES.find((p) => p.id === pipelineId);\n\tif (!pipeline) return [];\n\treturn pipeline.nodes.filter((n) => n.kind === \"sink_sync\" && n.params.targetOt).map((n) => n.params.targetOt);\n}\n\n/** A source node's id is the composite \"<pipelineId>:<nodeId>\". */\nconst pipelineOfSource = (sourceId: string) => sourceId.split(\":\")[0] ?? \"\";\n\nconst projectionUses = (key: string) => WC3_PROJECTION_USAGE[key]?.uses ?? [];\n\nconst installedProductKey = (otId: string) => getObjectType(otId)?.installedBy?.productKey;\n\n/**\n * The prototype's `connected(kind, id)`, reproduced rule for rule. Order matters: the product branch\n * runs FIRST and short-circuits, which is why selecting a product lights only pipelines and object\n * types (the Datasources and Consuming projections columns go fully dim), and why selecting a\n * datasource or a projection dims the whole Products column.\n */\nfunction isConnected(sel: Selection | null, kind: NodeKind, id: string): boolean {\n\tif (!sel) return true;\n\tif (sel.kind === kind && sel.id === id) return true;\n\n\t// ── Product branch: one side is a product, and only object types and pipelines can reach it.\n\tif (sel.kind === \"prod\" || kind === \"prod\") {\n\t\tconst productKey = sel.kind === \"prod\" ? sel.id : id;\n\t\tconst other: Selection = sel.kind === \"prod\" ? {kind, id} : sel;\n\t\tif (other.kind === \"ot\") return installedProductKey(other.id) === productKey;\n\t\tif (other.kind === \"pipe\") return sinkTargets(other.id).some((t) => installedProductKey(t) === productKey);\n\t\treturn false;\n\t}\n\n\tif (sel.kind === \"pipe\") {\n\t\tconst targets = sinkTargets(sel.id);\n\t\tif (kind === \"src\") return id.startsWith(`${sel.id}:`);\n\t\tif (kind === \"ot\") return targets.includes(id);\n\t\tif (kind === \"proj\") return projectionUses(id).some((t) => targets.includes(t));\n\t\treturn false;\n\t}\n\n\tif (sel.kind === \"ot\") {\n\t\tif (kind === \"pipe\") return sinkTargets(id).includes(sel.id);\n\t\tif (kind === \"src\") return sinkTargets(pipelineOfSource(id)).includes(sel.id);\n\t\tif (kind === \"proj\") return projectionUses(id).includes(sel.id);\n\t\treturn false;\n\t}\n\n\tif (sel.kind === \"proj\") {\n\t\tconst uses = projectionUses(sel.id);\n\t\tif (kind === \"ot\") return uses.includes(id);\n\t\tif (kind === \"pipe\") return sinkTargets(id).some((t) => uses.includes(t));\n\t\tif (kind === \"src\") return sinkTargets(pipelineOfSource(id)).some((t) => uses.includes(t));\n\t\treturn false;\n\t}\n\n\tif (sel.kind === \"src\") {\n\t\tconst pipelineId = pipelineOfSource(sel.id);\n\t\tconst targets = sinkTargets(pipelineId);\n\t\tif (kind === \"pipe\") return id === pipelineId;\n\t\tif (kind === \"ot\") return targets.includes(id);\n\t\tif (kind === \"proj\") return projectionUses(id).some((t) => targets.includes(t));\n\t\treturn false;\n\t}\n\n\treturn false;\n}\n\n// ─── Canvas ──────────────────────────────────────────────────────────────────\n\ntype LineageNode = {\n\t/** React key — an id can repeat across columns, so it carries its kind. */\n\tkey: string;\n\tkind: NodeKind;\n\tid: string;\n\ticon: string;\n\tlabel: string;\n\tsub: string;\n\t/** Omitted for the presence_events topic, the one node with no destination. */\n\topen?: () => void;\n};\n\ntype FlowNodeData = {node: LineageNode; dimmed: boolean; picked: boolean};\n\n/** Layer geometry. One column per node kind, in flow order, left to right. */\nconst COLUMN_GAP = 300;\nconst ROW_GAP = 104;\nconst HEADING_Y = -56;\n\nconst COLUMNS = [\n\t{field: \"products\", kind: \"prod\", heading: \"Products (provenance)\"},\n\t{field: \"sources\", kind: \"src\", heading: \"Datasources / drops\"},\n\t{field: \"pipelines\", kind: \"pipe\", heading: \"Pipelines\"},\n\t{field: \"objectTypes\", kind: \"ot\", heading: \"Object types synced\"},\n\t{field: \"projections\", kind: \"proj\", heading: \"Consuming projections\"},\n] as const;\n\n/** Node ids carry their kind: an id can repeat across columns (a pipeline and its source share one). */\nconst flowId = (kind: NodeKind, id: string) => `${kind}:${id}`;\nconst parseFlowId = (flowNodeId: string): Selection => {\n\tconst at = flowNodeId.indexOf(\":\");\n\treturn {kind: flowNodeId.slice(0, at) as NodeKind, id: flowNodeId.slice(at + 1)};\n};\n\n/**\n * A node on the canvas. Same visual language as the ontology graph explorer's node, so the two\n * canvases read as one system. Handles are transparent — edges attach, but no dots show.\n */\nfunction LineageFlowNode({data}: NodeProps) {\n\tconst {node, dimmed, picked} = data as unknown as FlowNodeData;\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"wwc:w-[224px] wwc:rounded-lg wwc:border wwc:bg-card wwc:px-3 wwc:py-2 wwc:transition-opacity\",\n\t\t\t\tpicked ? \"wwc:border-primary wwc:ring-1 wwc:ring-primary\" : \"wwc:border-border wwc:hover:border-primary/50\",\n\t\t\t\tdimmed && \"wwc:opacity-25\",\n\t\t\t)}\n\t\t>\n\t\t\t<Handle type=\"target\" position={Position.Left} className=\"wwc:!border-0 wwc:!bg-transparent\" />\n\t\t\t<div className=\"wwc:flex wwc:items-start wwc:gap-1.5 wwc:text-xs wwc:font-semibold\">\n\t\t\t\t<LineageGlyph name={node.icon} />\n\t\t\t\t<span className=\"wwc:min-w-0 wwc:break-words\">{node.label}</span>\n\t\t\t</div>\n\t\t\t<div className=\"wwc:mt-0.5 wwc:flex wwc:items-center wwc:gap-2\">\n\t\t\t\t<span className=\"wwc:min-w-0 wwc:break-words wwc:text-[10px] wwc:text-muted-foreground\">{node.sub}</span>\n\t\t\t\t{node.open && (\n\t\t\t\t\t// nodrag keeps React Flow from starting a drag on the button; stopPropagation keeps the\n\t\t\t\t\t// click from also toggling the selection, since the whole node is the select target.\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\tclassName=\"wwc:nodrag wwc:ml-auto wwc:h-5 wwc:shrink-0 wwc:gap-0.5 wwc:px-1 wwc:text-[10px]\"\n\t\t\t\t\t\tonClick={(event) => {\n\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\tnode.open?.();\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\tOpen\n\t\t\t\t\t\t<ArrowRight className=\"wwc:h-3 wwc:w-3\" />\n\t\t\t\t\t</Button>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t<Handle type=\"source\" position={Position.Right} className=\"wwc:!border-0 wwc:!bg-transparent\" />\n\t\t</div>\n\t);\n}\n\n/** A column heading, parked above its column so it pans and zooms with the layer it labels. */\nfunction LineageHeadingNode({data}: NodeProps) {\n\tconst {label} = data as unknown as {label: string};\n\treturn (\n\t\t<div className=\"wwc:w-[224px] wwc:text-[10px] wwc:font-semibold wwc:uppercase wwc:tracking-wider wwc:text-muted-foreground\">\n\t\t\t{label}\n\t\t</div>\n\t);\n}\n\nconst FLOW_NODE_TYPES = {lineage: LineageFlowNode, heading: LineageHeadingNode};\n\nfunction ProvenanceCard({onNavigate}: Pick<LineageViewProps, \"onNavigate\">) {\n\tconst withProvenance = WC3_OBJECT_TYPES.filter((o) => o.installedBy);\n\tconst without = WC3_OBJECT_TYPES.filter((o) => !o.installedBy);\n\tconst rows = appliedInstalls()\n\t\t.map((install) => ({install, types: typesFromProduct(install.productKey)}))\n\t\t.filter((r) => r.types.length > 0);\n\n\treturn (\n\t\t<Card>\n\t\t\t<CardHeader className=\"wwc:p-4\">\n\t\t\t\t<CardTitle className=\"wwc:flex wwc:flex-wrap wwc:items-center wwc:gap-1.5 wwc:text-sm\">\n\t\t\t\t\t<Box className=\"wwc:h-4 wwc:w-4 wwc:shrink-0\" />\n\t\t\t\t\tProduct provenance\n\t\t\t\t\t<span className=\"wwc:font-normal wwc:text-muted-foreground\">\n\t\t\t\t\t\twhich product install put each object type in the store — {withProvenance.length} of{\" \"}\n\t\t\t\t\t\t{WC3_OBJECT_TYPES.length} object types carry provenance\n\t\t\t\t\t</span>\n\t\t\t\t</CardTitle>\n\t\t\t</CardHeader>\n\t\t\t{/* The count rides on the DOM so the prototype's own assertion still has something to read. */}\n\t\t\t<CardContent className=\"wwc:space-y-2 wwc:p-4 wwc:pt-0\" data-lineage-provenance={withProvenance.length}>\n\t\t\t\t{rows.length === 0 ? (\n\t\t\t\t\t<div className=\"wwc:text-xs wwc:text-muted-foreground\">\n\t\t\t\t\t\tNo applied product install has put a type in this store.\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\trows.map(({install, types}) => {\n\t\t\t\t\t\tconst product = getLineageProduct(install.productKey);\n\t\t\t\t\t\tconst meta = productTypeMeta(product?.productType ?? \"\");\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<div key={install.id} className=\"wwc:space-y-2 wwc:rounded-md wwc:border wwc:border-border wwc:p-2.5\">\n\t\t\t\t\t\t\t\t<div className=\"wwc:flex wwc:flex-wrap wwc:items-center wwc:gap-2\">\n\t\t\t\t\t\t\t\t\t<LineageGlyph name={meta.icon} />\n\t\t\t\t\t\t\t\t\t<span className=\"wwc:text-xs wwc:font-semibold\">{product?.displayName ?? install.productKey}</span>\n\t\t\t\t\t\t\t\t\t<Mono>\n\t\t\t\t\t\t\t\t\t\t{install.productKey} {install.version}\n\t\t\t\t\t\t\t\t\t</Mono>\n\t\t\t\t\t\t\t\t\t<Badge variant=\"neutralSoft\" className=\"wwc:font-normal\">\n\t\t\t\t\t\t\t\t\t\t{install.environment}\n\t\t\t\t\t\t\t\t\t\t{install.baseline ? \" · baseline\" : \"\"}\n\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"wwc:ml-auto wwc:shrink-0\"\n\t\t\t\t\t\t\t\t\t\tonClick={() => onNavigate?.(lineageNav.product(install.productKey))}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\tOpen product\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div className=\"wwc:flex wwc:flex-wrap wwc:items-center wwc:gap-1.5\">\n\t\t\t\t\t\t\t\t\t{types.map((type) => (\n\t\t\t\t\t\t\t\t\t\t<HoverTooltip\n\t\t\t\t\t\t\t\t\t\t\tkey={type.id}\n\t\t\t\t\t\t\t\t\t\t\tcontent={`installed by ${type.installedBy?.productKey} ${type.installedBy?.version} (install ${type.installedBy?.installId})`}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\t\tdata-prov-type={type.apiName}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => onNavigate?.(lineageNav.objectType(type.id))}\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"wwc:rounded-md wwc:border wwc:border-border wwc:px-1.5 wwc:py-0.5 wwc:text-[11px] wwc:hover:bg-accent wwc:focus-visible:outline-none wwc:focus-visible:ring-1 wwc:focus-visible:ring-ring\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<TypeGlyphLabel type={type} />\n\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t</HoverTooltip>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t);\n\t\t\t\t\t})\n\t\t\t\t)}\n\t\t\t\t{without.length > 0 && (\n\t\t\t\t\t<div className=\"wwc:flex wwc:items-start wwc:gap-1.5 wwc:text-[11px] wwc:text-muted-foreground\">\n\t\t\t\t\t\t<Pencil className=\"wwc:mt-0.5 wwc:h-3.5 wwc:w-3.5 wwc:shrink-0\" />\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t{without.length} object type(s) carry no product provenance — they were authored directly in this\n\t\t\t\t\t\t\tworkspace (\n\t\t\t\t\t\t\t{without\n\t\t\t\t\t\t\t\t.slice(0, 6)\n\t\t\t\t\t\t\t\t.map((o) => o.displayName)\n\t\t\t\t\t\t\t\t.join(\", \")}\n\t\t\t\t\t\t\t).\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</CardContent>\n\t\t</Card>\n\t);\n}\n\n// ─── View ────────────────────────────────────────────────────────────────────\n\ntype ColumnMap = Record<string, LineageNode[]>;\n\n/**\n * The wires. Solid edges are the data flow between adjacent layers; the dashed product → object type\n * edge is provenance, which skips the middle layers because it is not a flow step. Every edge is\n * guarded on the target actually being on the canvas, so a pipeline that syncs a type outside the\n * synced column simply draws no wire rather than dangling.\n */\nfunction buildEdges(columns: ColumnMap): Edge[] {\n\tconst edges: Edge[] = [];\n\tconst has = (field: string, id: string) => (columns[field] ?? []).some((n) => n.id === id);\n\n\t// datasource → its pipeline (the source id is \"<pipelineId>:<nodeId>\")\n\tfor (const source of columns.sources ?? []) {\n\t\tconst pipelineId = pipelineOfSource(source.id);\n\t\tif (has(\"pipelines\", pipelineId)) {\n\t\t\tedges.push({id: `e:src:${source.id}`, source: flowId(\"src\", source.id), target: flowId(\"pipe\", pipelineId)});\n\t\t}\n\t}\n\n\t// pipeline → every object type it syncs, plus the stream topic when it has one\n\tfor (const pipeline of columns.pipelines ?? []) {\n\t\tfor (const target of sinkTargets(pipeline.id)) {\n\t\t\tif (has(\"objectTypes\", target)) {\n\t\t\t\tedges.push({\n\t\t\t\t\tid: `e:pipe:${pipeline.id}:${target}`,\n\t\t\t\t\tsource: flowId(\"pipe\", pipeline.id),\n\t\t\t\t\ttarget: flowId(\"ot\", target),\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t\tconst emitsTopic = WC3_PIPELINES.find((p) => p.id === pipeline.id)?.nodes.some((n) => n.kind === \"sink_topic\");\n\t\tif (emitsTopic && has(\"objectTypes\", TOPIC_ID)) {\n\t\t\tedges.push({\n\t\t\t\tid: `e:pipe:${pipeline.id}:topic`,\n\t\t\t\tsource: flowId(\"pipe\", pipeline.id),\n\t\t\t\ttarget: flowId(\"ot\", TOPIC_ID),\n\t\t\t});\n\t\t}\n\t}\n\n\t// object type → each projection that consumes it\n\tfor (const projection of columns.projections ?? []) {\n\t\tfor (const used of projectionUses(projection.id)) {\n\t\t\tif (has(\"objectTypes\", used)) {\n\t\t\t\tedges.push({\n\t\t\t\t\tid: `e:proj:${projection.id}:${used}`,\n\t\t\t\t\tsource: flowId(\"ot\", used),\n\t\t\t\t\ttarget: flowId(\"proj\", projection.id),\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t}\n\n\t// product ⇢ object type it installed (provenance, not flow)\n\tfor (const type of columns.objectTypes ?? []) {\n\t\tconst productKey = installedProductKey(type.id);\n\t\tif (productKey && has(\"products\", productKey)) {\n\t\t\tedges.push({\n\t\t\t\tid: `e:prod:${productKey}:${type.id}`,\n\t\t\t\tsource: flowId(\"prod\", productKey),\n\t\t\t\ttarget: flowId(\"ot\", type.id),\n\t\t\t\tdata: {provenance: true},\n\t\t\t});\n\t\t}\n\t}\n\n\treturn edges;\n}\n\n/** Edge paint. Dimming an edge as well as its endpoints is what makes the selected slice readable. */\nfunction edgeStyle(edge: Edge, sel: Selection | null) {\n\tconst provenance = !!(edge.data as {provenance?: boolean} | undefined)?.provenance;\n\tconst ends = [edge.source, edge.target].map(parseFlowId);\n\tconst active = !sel || ends.every((end) => isConnected(sel, end.kind, end.id));\n\treturn {\n\t\tstrokeDasharray: provenance ? \"4 3\" : undefined,\n\t\tstroke: active && sel ? \"var(--wwc-color-primary)\" : \"var(--wwc-color-border)\",\n\t\tstrokeWidth: active && sel ? 1.5 : 1,\n\t\topacity: active ? 1 : 0.12,\n\t};\n}\n\nexport function LineageDataView({onNavigate}: LineageViewProps = {}) {\n\tconst [sel, setSel] = useState<Selection | null>(null);\n\n\t// The five columns are pure derivations of the fixture — nothing here depends on the selection.\n\tconst columns = useMemo(() => {\n\t\tconst products: LineageNode[] = appliedInstalls().map((install) => {\n\t\t\tconst product = getLineageProduct(install.productKey);\n\t\t\treturn {\n\t\t\t\tkey: install.id,\n\t\t\t\tkind: \"prod\",\n\t\t\t\tid: install.productKey,\n\t\t\t\ticon: productTypeMeta(product?.productType ?? \"\").icon,\n\t\t\t\tlabel: product?.displayName ?? install.productKey,\n\t\t\t\tsub: `${install.addedObjectTypes.length} object types · ${install.environment}${install.baseline ? \" · baseline\" : \"\"}`,\n\t\t\t\topen: () => onNavigate?.(lineageNav.product(install.productKey)),\n\t\t\t};\n\t\t});\n\n\t\tconst sources: LineageNode[] = lineageSources().map((source) => ({\n\t\t\tkey: source.id,\n\t\t\tkind: \"src\",\n\t\t\tid: source.id,\n\t\t\ticon: WC3_NODE_KINDS[source.node.kind]?.icon ?? \"database\",\n\t\t\tlabel: source.name,\n\t\t\tsub: source.pipeline.name,\n\t\t\topen: () => onNavigate?.(lineageNav.pipeline(source.pipeline.id)),\n\t\t}));\n\n\t\tconst pipelines: LineageNode[] = WC3_PIPELINES.map((pipeline) => ({\n\t\t\tkey: pipeline.id,\n\t\t\tkind: \"pipe\",\n\t\t\tid: pipeline.id,\n\t\t\ticon: pipeline.icon,\n\t\t\tlabel: pipeline.name,\n\t\t\tsub: `${pipeline.nodes.length} nodes · ${pipeline.runs.length} run(s)`,\n\t\t\topen: () => onNavigate?.(lineageNav.pipeline(pipeline.id)),\n\t\t}));\n\n\t\tconst objectTypes: LineageNode[] = syncedObjectTypeIds().map((otId) => {\n\t\t\tconst type = getObjectType(otId);\n\t\t\treturn {\n\t\t\t\tkey: otId,\n\t\t\t\tkind: \"ot\",\n\t\t\t\tid: otId,\n\t\t\t\ticon: type?.icon ?? \"box\",\n\t\t\t\tlabel: type?.displayName ?? otId,\n\t\t\t\tsub: `${instanceCount(otId)} instances`,\n\t\t\t\topen: () => onNavigate?.(lineageNav.objectType(otId)),\n\t\t\t};\n\t\t});\n\t\t// Appended unconditionally, and the only node with no \"Open\": the presence_events stream is a\n\t\t// Kafka-style topic, not an object type, so it resolves to nothing and connects to nothing.\n\t\tobjectTypes.push({\n\t\t\tkey: TOPIC_ID,\n\t\t\tkind: \"ot\",\n\t\t\tid: TOPIC_ID,\n\t\t\ticon: \"upload\",\n\t\t\tlabel: \"presence_events topic\",\n\t\t\tsub: \"stream — feeds live occupancy\",\n\t\t});\n\n\t\tconst projections: LineageNode[] = Object.entries(WC3_PROJECTION_USAGE).map(([key, usage]) => ({\n\t\t\tkey,\n\t\t\tkind: \"proj\",\n\t\t\tid: key,\n\t\t\ticon: usage.icon,\n\t\t\tlabel: usage.label,\n\t\t\tsub: `${usage.uses.length} types consumed`,\n\t\t\topen: () => onNavigate?.(lineageNav.projection(key)),\n\t\t}));\n\n\t\treturn {products, sources, pipelines, objectTypes, projections};\n\t}, [onNavigate]);\n\n\tconst toggle = (node: LineageNode) =>\n\t\tsetSel((current) =>\n\t\t\tcurrent && current.kind === node.kind && current.id === node.id ? null : {kind: node.kind, id: node.id},\n\t\t);\n\n\t// Positions are computed once from the derivation; React Flow then owns them so nodes stay where the\n\t// user drags them. Selection only ever rewrites `data`, never `position`.\n\tconst initialNodes = useMemo<Node[]>(() => {\n\t\tconst built: Node[] = [];\n\t\tCOLUMNS.forEach((column, columnIndex) => {\n\t\t\tconst x = columnIndex * COLUMN_GAP;\n\t\t\tbuilt.push({\n\t\t\t\tid: `head:${column.kind}`,\n\t\t\t\ttype: \"heading\",\n\t\t\t\tposition: {x, y: HEADING_Y},\n\t\t\t\tdata: {label: column.heading},\n\t\t\t\tdraggable: false,\n\t\t\t\tselectable: false,\n\t\t\t\tconnectable: false,\n\t\t\t});\n\t\t\t(columns as ColumnMap)[column.field]?.forEach((node, rowIndex) => {\n\t\t\t\tbuilt.push({\n\t\t\t\t\tid: flowId(node.kind, node.id),\n\t\t\t\t\ttype: \"lineage\",\n\t\t\t\t\tposition: {x, y: rowIndex * ROW_GAP},\n\t\t\t\t\tdata: {node, dimmed: false, picked: false} satisfies FlowNodeData as unknown as Record<string, unknown>,\n\t\t\t\t});\n\t\t\t});\n\t\t});\n\t\treturn built;\n\t}, [columns]);\n\n\tconst initialEdges = useMemo(() => buildEdges(columns as ColumnMap), [columns]);\n\n\tconst [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);\n\tconst [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);\n\n\t// Repaint on selection. Node positions and the user's drags survive because only `data` is rewritten.\n\tuseEffect(() => {\n\t\tsetNodes((current) =>\n\t\t\tcurrent.map((node) => {\n\t\t\t\tif (node.type !== \"lineage\") return node;\n\t\t\t\tconst data = node.data as unknown as FlowNodeData;\n\t\t\t\tconst picked = !!sel && sel.kind === data.node.kind && sel.id === data.node.id;\n\t\t\t\tconst dimmed = !!sel && !isConnected(sel, data.node.kind, data.node.id);\n\t\t\t\tif (picked === data.picked && dimmed === data.dimmed) return node;\n\t\t\t\treturn {...node, data: {...data, picked, dimmed} as unknown as Record<string, unknown>};\n\t\t\t}),\n\t\t);\n\t\tsetEdges((current) => current.map((edge) => ({...edge, style: edgeStyle(edge, sel)})));\n\t}, [sel, setNodes, setEdges]);\n\n\treturn (\n\t\t<Pane>\n\t\t\t<p className=\"wwc:text-xs wwc:text-muted-foreground\">\n\t\t\t\tClick any node to highlight its connected slice (product → datasource → pipeline → object type → consuming\n\t\t\t\tprojection). Click again to clear. Drag to rearrange, scroll to zoom.\n\t\t\t</p>\n\n\t\t\t{/* Fixed height: this pane scrolls (the provenance card sits below), so a flex-1 canvas would\n\t\t\t    collapse to nothing. fitView frames the whole DAG on mount regardless of the layer sizes. */}\n\t\t\t<Card className=\"wwc:h-[560px] wwc:shrink-0 wwc:overflow-hidden\">\n\t\t\t\t<GraphCanvas\n\t\t\t\t\tnodes={nodes}\n\t\t\t\t\tedges={edges}\n\t\t\t\t\tonNodesChange={onNodesChange}\n\t\t\t\t\tonEdgesChange={onEdgesChange}\n\t\t\t\t\tnodeTypes={FLOW_NODE_TYPES}\n\t\t\t\t\tonNodeClick={(_event, node) => {\n\t\t\t\t\t\tif (node.type !== \"lineage\") return;\n\t\t\t\t\t\ttoggle((node.data as unknown as FlowNodeData).node);\n\t\t\t\t\t}}\n\t\t\t\t\tonPaneClick={() => setSel(null)}\n\t\t\t\t/>\n\t\t\t</Card>\n\n\t\t\t{/* Never dimmed: the provenance card answers a different question than the selection does. */}\n\t\t\t<ProvenanceCard onNavigate={onNavigate} />\n\t\t</Pane>\n\t);\n}\n"],"mappings":"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"}