@manta-eu/react 0.1.0

package/dist/graph/EntityCard.d.ts

@@ -0,0 +1,9 @@
+import { type JsonLdGraphDocument } from "@manta-eu/rdf-lib/jsonld";
+import type { RDFNode } from "./types.js";
+export declare function findEntityNode(nodes: RDFNode[], entityIri: string): RDFNode | undefined;
+export type EntityCardProps = {
+    entityIri: string;
+    graph: JsonLdGraphDocument;
+};
+export declare function EntityCard(props: EntityCardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EntityCard.d.ts.map

package/dist/graph/EntityCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EntityCard.d.ts","sourceRoot":"","sources":["../../src/graph/EntityCard.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAQpE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAEvC,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,EAAE,EAAE,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAIvF;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,mBAAmB,CAAC;CAC5B,CAAC;AAEF,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAkBhD"}

package/dist/graph/EntityCard.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isPresent } from "@manta-eu/lib/present";
+import { expandPrefix } from "@manta-eu/rdf-lib/namespaces";
+import { useMemo } from "react";
+import { findDetailViewForTypes } from "./detail-views.js";
+import { rdfGraphToNodesAndEdges } from "./graph-model.js";
+import { jsonLdToRdfGraph } from "./jsonld-bridge.js";
+import { GenericView, getEntityView } from "./special-nodes/index.js";
+import { stubNodeData } from "./stub-node.js";
+export function findEntityNode(nodes, entityIri) {
+    const node = nodes.find((candidate) => expandPrefix(candidate.id) === entityIri);
+    if (!node)
+        return undefined;
+    return { ...node, data: { ...node.data, jsonLd: { ...node.data.jsonLd, "@id": entityIri } } };
+}
+export function EntityCard(props) {
+    const { entityIri, graph } = props;
+    const node = useMemo(() => {
+        const { nodes } = rdfGraphToNodesAndEdges(jsonLdToRdfGraph(graph));
+        return findEntityNode(nodes, entityIri);
+    }, [graph, entityIri]);
+    const RichView = isPresent(node?.data.type) ? findDetailViewForTypes([node.data.type]) : undefined;
+    if (node && RichView)
+        return _jsx(RichView, { iri: entityIri });
+    const View = node ? getEntityView(node.data.type, node.data.actionShape) : undefined;
+    if (node && View)
+        return _jsx(View, { data: node.data });
+    return _jsx(GenericView, { data: node?.data ?? stubNodeData(entityIri) });
+}

package/dist/graph/EntityStripDisplay.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentType } from "react";
+export type EntityStripDisplayProps = {
+    iris: string[];
+    View: ComponentType<{
+        iri: string;
+    }>;
+    className?: string;
+};
+export declare function EntityStripDisplay(props: EntityStripDisplayProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EntityStripDisplay.d.ts.map

package/dist/graph/EntityStripDisplay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EntityStripDisplay.d.ts","sourceRoot":"","sources":["../../src/graph/EntityStripDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAI3C,MAAM,MAAM,uBAAuB,GAAG;IACpC,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,IAAI,EAAE,aAAa,CAAC;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,2CAiChE"}

package/dist/graph/EntityStripDisplay.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCanScroll } from "#lib/use-can-scroll";
+import { cn } from "#style";
+export function EntityStripDisplay(props) {
+    const { iris, View, className } = props;
+    const { ref: stripRef, canScrollLeft, canScrollRight } = useCanScroll({ axis: "x" });
+    return (_jsxs("div", { className: cn("relative max-w-full", className), children: [_jsx("div", { ref: stripRef, className: "max-w-full overflow-x-auto", children: _jsx("div", { className: "mx-auto flex w-fit items-start gap-3", children: iris.map((iri) => (_jsx("div", { className: "shrink-0", children: _jsx(View, { iri: iri }) }, iri))) }) }), _jsx("div", { "aria-hidden": true, className: cn("pointer-events-none absolute inset-y-0 left-0 w-8 bg-linear-to-r from-base-background to-transparent transition-opacity", canScrollLeft ? "opacity-100" : "opacity-0") }), _jsx("div", { "aria-hidden": true, className: cn("pointer-events-none absolute inset-y-0 right-0 w-8 bg-linear-to-l from-base-background to-transparent transition-opacity", canScrollRight ? "opacity-100" : "opacity-0") })] }));
+}

package/dist/graph/Graph.d.ts

@@ -0,0 +1,25 @@
+import "@xyflow/react/dist/style.css";
+import { type JsonLdGraphDocument } from "@manta-eu/rdf-lib/jsonld";
+import { type ReactNode } from "react";
+import type { RdfGraph } from "../lib/rdf-helpers.js";
+import type { PreviewFieldHints } from "./graph-list-utils.js";
+import type { GraphViewMode } from "./graph-state.js";
+import { type GraphListViewRenderHeaderArgs, type GraphListViewRenderRowArgs } from "./GraphListView.js";
+import { type RenderPropertyDiffArgs } from "./NodeDetailPanel/index.js";
+export type LoadRelationships = (nodeIri: string, planGraphIri: string, depth: number) => Promise<JsonLdGraphDocument>;
+export type GraphProps = {
+    graph?: RdfGraph;
+    jsonLd?: JsonLdGraphDocument;
+    activeNodeIds?: string[];
+    fullHeight?: boolean;
+    planGraphIri?: string;
+    onLoadRelationships?: LoadRelationships;
+    renderPropertyDiff?: (args: RenderPropertyDiffArgs) => ReactNode;
+    renderListRow?: (args: GraphListViewRenderRowArgs) => ReactNode;
+    renderListHeader?: (args: GraphListViewRenderHeaderArgs) => ReactNode;
+    previewHints?: PreviewFieldHints;
+    defaultViewMode?: GraphViewMode;
+    disableSummaryView?: boolean;
+};
+export declare function Graph(props: GraphProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Graph.d.ts.map

package/dist/graph/Graph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Graph.d.ts","sourceRoot":"","sources":["../../src/graph/Graph.tsx"],"names":[],"mappings":"AAAA,OAAO,8BAA8B,CAAC;AACtC,OAAO,EAAE,KAAK,mBAAmB,EAAyB,MAAM,0BAA0B,CAAC;AAW3F,OAAO,EAAE,KAAK,SAAS,EAAqD,MAAM,OAAO,CAAC;AAK1F,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAEnD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAMnD,OAAO,EAAiB,KAAK,6BAA6B,EAAE,KAAK,0BAA0B,EAAE,MAAM,iBAAiB,CAAC;AAGrH,OAAO,EAAmB,KAAK,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAQjF,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,mBAAmB,CAAC,CAAC;AAEvH,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB,CAAC,EAAE,iBAAiB,CAAC;IACxC,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,sBAAsB,KAAK,SAAS,CAAC;IACjE,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,0BAA0B,KAAK,SAAS,CAAC;IAChE,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,6BAA6B,KAAK,SAAS,CAAC;IACtE,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,eAAe,CAAC,EAAE,aAAa,CAAC;IAChC,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AA4hBF,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,2CAQtC"}

package/dist/graph/Graph.js

@@ -0,0 +1,284 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@xyflow/react/dist/style.css";
+import { isJsonLdGraphDocument } from "@manta-eu/rdf-lib/jsonld";
+import { expandPrefix } from "@manta-eu/rdf-lib/namespaces";
+import { Background, BackgroundVariant, Panel, ReactFlow, ReactFlowProvider, useReactFlow, } from "@xyflow/react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { toast } from "sonner";
+import { useToggle } from "usehooks-ts";
+import { useStore } from "zustand";
+import { useShallow } from "zustand/react/shallow";
+import { edgeTypes, nodeTypes } from "./custom-nodes.js";
+import { rdfGraphToNodesAndEdges, rdfGraphToSummaryNodesAndEdges } from "./graph-model.js";
+import { createGraphStore } from "./graph-store.js";
+import { filterVisibleNodesAndEdges } from "./graph-utils.js";
+import { GraphContext } from "./GraphContext.js";
+import { GraphControls } from "./GraphControls.js";
+import { GraphErrorBoundary } from "./GraphErrorBoundary.js";
+import { GraphListView } from "./GraphListView.js";
+import { jsonLdToRdfGraph } from "./jsonld-bridge.js";
+import { NodeContextMenu } from "./NodeContextMenu.js";
+import { NodeDetailPanel } from "./NodeDetailPanel/index.js";
+import { mantaDarkTheme, useGraphTheme } from "./themes.js";
+import { cn } from "#style";
+const fitViewOptionsDefault = { padding: 0.4 };
+const proOptionsDefault = { hideAttribution: true };
+function GraphInternal(props) {
+    const { graph, jsonLd, activeNodeIds, fullHeight = false, planGraphIri, onLoadRelationships, renderPropertyDiff, renderListRow, renderListHeader, previewHints, defaultViewMode = "list", disableSummaryView = false, } = props;
+    const initialGraph = useMemo(() => {
+        if (graph) {
+            return graph;
+        }
+        if (jsonLd) {
+            return jsonLdToRdfGraph(jsonLd);
+        }
+        return new Map();
+    }, [graph, jsonLd]);
+    const [store] = useState(() => createGraphStore(initialGraph, { defaultViewMode }));
+    const { isGraphReady, isSummaryView, viewMode, layoutDirection, hasInitializedListCollapse, selectedNode, collapsedNodeIds, contextMenu, mergedGraph, graphVersion, listPage, } = useStore(store, useShallow((s) => ({
+        isGraphReady: s.isGraphReady,
+        isSummaryView: s.isSummaryView,
+        viewMode: s.viewMode,
+        layoutDirection: s.layoutDirection,
+        hasInitializedListCollapse: s.hasInitializedListCollapse,
+        selectedNode: s.selectedNode,
+        collapsedNodeIds: s.collapsedNodeIds,
+        contextMenu: s.contextMenu,
+        mergedGraph: s.mergedGraph,
+        graphVersion: s.graphVersion,
+        listPage: s.listPage,
+    })));
+    const reactFlowInstance = useRef(null);
+    const graphContainerRef = useRef(null);
+    const fitViewOptionsRef = useRef({ padding: 0.2, duration: 300 });
+    const [isFullscreen, toggleFullscreen] = useToggle(false);
+    const theme = useGraphTheme();
+    const { fitView } = useReactFlow();
+    useEffect(() => {
+        store.getState().resetForNewGraph(initialGraph);
+    }, [initialGraph, store]);
+    useEffect(() => {
+        if (viewMode !== "graph") {
+            store.getState().setIsGraphReady(true);
+            return;
+        }
+        const timer = setTimeout(() => {
+            store.getState().setIsGraphReady(true);
+            setTimeout(() => {
+                void fitView(fitViewOptionsRef.current);
+            }, 50);
+        }, 100);
+        return () => clearTimeout(timer);
+    }, [graphVersion, store, fitView, viewMode]);
+    const { nodes: detailedNodes, edges: detailedEdges, parentChildMap: detailedParentChildMap, } = useMemo(() => rdfGraphToNodesAndEdges(mergedGraph, "subject", layoutDirection), [mergedGraph, layoutDirection]);
+    const { nodes: allNodes, edges: allEdges, parentChildMap, } = useMemo(() => isSummaryView
+        ? rdfGraphToSummaryNodesAndEdges(mergedGraph, layoutDirection)
+        : { nodes: detailedNodes, edges: detailedEdges, parentChildMap: detailedParentChildMap }, [mergedGraph, layoutDirection, isSummaryView, detailedNodes, detailedEdges, detailedParentChildMap]);
+    const maxCanvasNodes = 150;
+    const { nodes, edges, isTruncated } = useMemo(() => {
+        const filtered = isSummaryView
+            ? { nodes: allNodes, edges: allEdges }
+            : filterVisibleNodesAndEdges(allNodes, allEdges, collapsedNodeIds, parentChildMap);
+        if (filtered.nodes.length <= maxCanvasNodes) {
+            return { ...filtered, isTruncated: false };
+        }
+        const visibleNodeIds = new Set(filtered.nodes.slice(0, maxCanvasNodes).map((n) => n.id));
+        return {
+            nodes: filtered.nodes.slice(0, maxCanvasNodes),
+            edges: filtered.edges.filter((e) => visibleNodeIds.has(e.source) && visibleNodeIds.has(e.target)),
+            isTruncated: true,
+        };
+    }, [allNodes, allEdges, collapsedNodeIds, parentChildMap, isSummaryView]);
+    useEffect(() => {
+        if (defaultViewMode === "graph")
+            return;
+        if (viewMode !== "list" || hasInitializedListCollapse)
+            return;
+        const parentNodeIds = detailedNodes.filter((node) => node.data.hasChildren).map((node) => node.id);
+        store.getState().setCollapsedNodeIds(new Set(parentNodeIds));
+        store.getState().setHasInitializedListCollapse(true);
+    }, [defaultViewMode, detailedNodes, hasInitializedListCollapse, store, viewMode]);
+    useEffect(() => {
+        if (viewMode !== "graph")
+            return;
+        if (!isGraphReady)
+            return;
+        if (collapsedNodeIds.size === 0 && layoutDirection === "LR")
+            return;
+        const timer = setTimeout(() => {
+            void fitView(fitViewOptionsRef.current);
+        }, 50);
+        return () => clearTimeout(timer);
+    }, [collapsedNodeIds, layoutDirection, fitView, isGraphReady, viewMode]);
+    useEffect(() => {
+        if (viewMode !== "graph")
+            return;
+        if (!isGraphReady || !activeNodeIds?.length || !reactFlowInstance.current)
+            return;
+        void reactFlowInstance.current.fitView({
+            nodes: activeNodeIds.map((id) => ({ id })),
+            padding: 0.3,
+            duration: 300,
+        });
+    }, [activeNodeIds, isGraphReady, viewMode]);
+    const handleNodeContextMenu = useCallback((nodeId, nodeLabel, x, y) => {
+        store.getState().setContextMenu({ nodeId, nodeLabel, x, y });
+    }, [store]);
+    const handleCloseContextMenu = useCallback(() => {
+        store.getState().setContextMenu(undefined);
+    }, [store]);
+    const handleLoadRelationships = useCallback(async (nodeId) => {
+        if (!planGraphIri) {
+            console.warn("Cannot load relationships: planGraphIri not provided");
+            return;
+        }
+        if (!onLoadRelationships) {
+            console.warn("Cannot load relationships: onLoadRelationships callback not provided");
+            return;
+        }
+        try {
+            const newGraph = await onLoadRelationships(expandPrefix(nodeId), planGraphIri, 1);
+            if (!isJsonLdGraphDocument(newGraph)) {
+                throw new Error("Invalid response: expected a JsonLdGraphDocument");
+            }
+            store.getState().mergeGraph(jsonLdToRdfGraph(newGraph));
+        }
+        catch (error) {
+            console.error("Failed to load relationships:", error);
+            toast.error(`Failed to load relationships: ${error instanceof Error ? error.message : String(error)}`);
+        }
+    }, [planGraphIri, onLoadRelationships, store]);
+    const getDescendants = useCallback((nodeId) => {
+        const descendants = new Set();
+        const queue = [nodeId];
+        while (queue.length > 0) {
+            const current = queue.shift();
+            const children = parentChildMap.get(current) || [];
+            for (const child of children) {
+                if (!descendants.has(child)) {
+                    descendants.add(child);
+                    queue.push(child);
+                }
+            }
+        }
+        return descendants;
+    }, [parentChildMap]);
+    const handleExpandAll = useCallback((nodeId) => {
+        const descendants = getDescendants(nodeId);
+        store.getState().setCollapsedNodeIds((prev) => {
+            const next = new Set(prev);
+            next.delete(nodeId);
+            for (const desc of descendants)
+                next.delete(desc);
+            return next;
+        });
+    }, [getDescendants, store]);
+    const handleCollapseAll = useCallback((nodeId) => {
+        const descendants = getDescendants(nodeId);
+        store.getState().setCollapsedNodeIds((prev) => {
+            const next = new Set(prev);
+            next.add(nodeId);
+            for (const desc of descendants)
+                next.add(desc);
+            return next;
+        });
+    }, [getDescendants, store]);
+    const isNodeExpanded = useCallback((nodeId) => {
+        const descendants = getDescendants(nodeId);
+        if (descendants.size === 0)
+            return false;
+        for (const desc of descendants) {
+            if (!collapsedNodeIds.has(desc))
+                return true;
+        }
+        return false;
+    }, [getDescendants, collapsedNodeIds]);
+    const handleExportNode = useCallback((nodeId) => {
+        const node = allNodes.find((n) => n.id === nodeId);
+        if (!node)
+            return;
+        const dataStr = JSON.stringify(node.data.jsonLd, null, 2);
+        const dataUri = `data:application/json;charset=utf-8,${encodeURIComponent(dataStr)}`;
+        const link = document.createElement("a");
+        link.setAttribute("href", dataUri);
+        link.setAttribute("download", `node-${nodeId}.json`);
+        link.click();
+    }, [allNodes]);
+    const handleSelectNode = useCallback((node) => {
+        store.getState().setSelectedNode(node.data);
+    }, [store]);
+    const graphContextValue = useMemo(() => ({
+        onToggleCollapse: store.getState().toggleCollapsedNode,
+        onNodeContextMenu: handleNodeContextMenu,
+        onSelectNode: handleSelectNode,
+        layoutDirection,
+        previewHints,
+    }), [store, handleNodeContextMenu, handleSelectNode, layoutDirection, previewHints]);
+    const handleToggleFullscreen = useCallback(() => {
+        toggleFullscreen();
+        if (viewMode !== "graph") {
+            return;
+        }
+        setTimeout(() => {
+            void fitView(fitViewOptionsRef.current);
+        }, 100);
+    }, [toggleFullscreen, fitView, viewMode]);
+    const handleToggleViewMode = useCallback(() => {
+        const state = store.getState();
+        if (state.viewMode === "graph") {
+            state.setViewMode("list");
+            return;
+        }
+        if (!disableSummaryView) {
+            state.setSummaryView(true);
+        }
+        state.setViewMode("graph");
+    }, [store, disableSummaryView]);
+    useEffect(() => {
+        if (!isFullscreen)
+            return;
+        function handleEsc(e) {
+            if (e.key === "Escape")
+                handleToggleFullscreen();
+        }
+        document.addEventListener("keydown", handleEsc);
+        return () => document.removeEventListener("keydown", handleEsc);
+    }, [isFullscreen, handleToggleFullscreen]);
+    const onInit = useCallback((instance) => {
+        reactFlowInstance.current = instance;
+    }, []);
+    const onNodeClick = useCallback((_, node) => {
+        store.getState().setSelectedNode(node.data);
+    }, [store]);
+    const onPaneClick = useCallback(() => {
+        store.getState().setSelectedNode(undefined);
+    }, [store]);
+    const selectedNodeId = useMemo(() => {
+        if (!selectedNode)
+            return undefined;
+        const jsonLdNode = selectedNode.jsonLd;
+        return jsonLdNode["@id"];
+    }, [selectedNode]);
+    const defaultEdgeOptions = useMemo(() => ({
+        type: "labeledEdge",
+        style: { stroke: theme.edge.default },
+    }), [theme.edge.default]);
+    const colorMode = theme === mantaDarkTheme ? "dark" : "light";
+    const containerClass = useMemo(() => isFullscreen
+        ? "fixed inset-0 z-[9999] bg-background"
+        : fullHeight
+            ? "w-full h-full min-w-0 overflow-hidden"
+            : "w-full space-y-2", [isFullscreen, fullHeight]);
+    const graphContainerClass = useMemo(() => isFullscreen || fullHeight
+        ? "relative w-full h-full min-w-0 overflow-hidden bg-background"
+        : cn("relative w-full bg-background border border-default-border", "rounded-lg overflow-hidden"), [isFullscreen, fullHeight]);
+    const isInStorybook = typeof window !== "undefined" && window.location.href.includes("iframe.html");
+    const graphContainerStyle = useMemo(() => ({
+        height: isFullscreen || fullHeight ? "100%" : isInStorybook ? "100vh" : "700px",
+    }), [isFullscreen, fullHeight, isInStorybook]);
+    const setSelectedNode = store.getState().setSelectedNode;
+    return (_jsxs("div", { className: containerClass, children: [_jsxs("div", { ref: graphContainerRef, className: graphContainerClass, style: graphContainerStyle, children: [!isGraphReady && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-background z-10", children: _jsxs("div", { className: "flex flex-col items-center gap-3", children: [_jsx("div", { className: "animate-spin rounded-full size-8 border-b-2 border-accent-foreground" }), _jsx("div", { className: "typography-small text-muted-foreground", children: "Loading graph..." })] }) })), _jsx("div", { className: cn("transition-opacity duration-500", isGraphReady ? "opacity-100" : "opacity-0"), style: { width: "100%", height: "100%" }, children: _jsx(GraphContext.Provider, { value: graphContextValue, children: viewMode === "graph" ? (_jsxs(ReactFlow, { nodes: nodes, edges: edges, onInit: onInit, onNodeClick: onNodeClick, onPaneClick: onPaneClick, nodeTypes: nodeTypes, edgeTypes: edgeTypes, nodesDraggable: true, nodesConnectable: false, elementsSelectable: true, fitView: true, fitViewOptions: fitViewOptionsDefault, minZoom: 0.1, maxZoom: 2, colorMode: colorMode, proOptions: proOptionsDefault, defaultEdgeOptions: defaultEdgeOptions, nodeOrigin: [0.5, 0.5], preventScrolling: false, autoPanOnNodeDrag: true, elevateNodesOnSelect: true, children: [_jsx(Background, { variant: BackgroundVariant.Dots, gap: 16, size: 1, color: theme.canvas.dots, style: { backgroundColor: theme.canvas.background } }), isTruncated && (_jsx(Panel, { position: "top-center", className: "mt-2", children: _jsxs("div", { className: "rounded-md bg-muted px-3 py-1.5 typography-small text-muted-foreground", children: ["Showing first ", maxCanvasNodes, " of ", allNodes.length, " nodes. Switch to list view to see all."] }) })), _jsx(Panel, { position: "bottom-center", className: "mb-3", children: _jsx(GraphControls, { reactFlowInstance: reactFlowInstance, graphContainerRef: graphContainerRef, graph: mergedGraph, isFullscreen: isFullscreen, onToggleFullscreen: handleToggleFullscreen, layoutDirection: layoutDirection, onToggleLayoutDirection: store.getState().toggleLayoutDirection, isSummaryView: isSummaryView, onToggleSummaryView: store.getState().toggleSummaryView, disableSummaryView: disableSummaryView, viewMode: viewMode, onToggleViewMode: handleToggleViewMode }) }), selectedNode && (_jsx(Panel, { position: "top-right", className: "w-1/4 min-w-[320px] max-h-[60vh]", children: _jsx(NodeDetailPanel, { node: selectedNode, allNodes: detailedNodes, planGraphIri: planGraphIri, onClose: () => setSelectedNode(undefined), renderPropertyDiff: renderPropertyDiff }) }))] }, `graph-${graphVersion}`)) : (_jsxs("div", { className: "relative flex h-full min-h-0", children: [_jsx("div", { className: cn("min-w-0 flex-1", selectedNode && "border-r border-default-border"), children: _jsx(GraphListView, { nodes: detailedNodes, parentChildMap: detailedParentChildMap, collapsedNodeIds: collapsedNodeIds, selectedNodeId: selectedNodeId, planGraphIri: planGraphIri, currentPage: listPage, onPageChange: store.getState().setListPage, renderHeader: renderListHeader ?? (() => null), renderRow: renderListRow ?? (() => null) }) }), selectedNode && (_jsx("div", { className: "w-[360px] max-w-[40%] shrink-0 overflow-auto p-4", children: _jsx(NodeDetailPanel, { node: selectedNode, allNodes: detailedNodes, planGraphIri: planGraphIri, onClose: () => setSelectedNode(undefined), renderPropertyDiff: renderPropertyDiff }) })), _jsx("div", { className: "absolute bottom-3 left-1/2 -translate-x-1/2", children: _jsx(GraphControls, { reactFlowInstance: reactFlowInstance, graphContainerRef: graphContainerRef, graph: mergedGraph, isFullscreen: isFullscreen, onToggleFullscreen: handleToggleFullscreen, layoutDirection: layoutDirection, onToggleLayoutDirection: store.getState().toggleLayoutDirection, isSummaryView: isSummaryView, onToggleSummaryView: store.getState().toggleSummaryView, disableSummaryView: disableSummaryView, viewMode: viewMode, onToggleViewMode: handleToggleViewMode }) })] })) }) })] }), isFullscreen && (_jsx("div", { className: cn("absolute top-4 left-4 typography-small", "text-muted-foreground bg-background", "px-2 py-1 rounded shadow"), children: "Press ESC or click Exit Fullscreen to close" })), contextMenu && (_jsx(NodeContextMenu, { nodeId: contextMenu.nodeId, nodeLabel: contextMenu.nodeLabel, nodeData: detailedNodes.find((n) => n.id === contextMenu.nodeId)?.data, x: contextMenu.x, y: contextMenu.y, onClose: handleCloseContextMenu, onLoadRelationships: handleLoadRelationships, onExpandAll: handleExpandAll, onCollapseAll: handleCollapseAll, onExportNode: handleExportNode, canLoadRelationships: !!planGraphIri, isExpanded: isNodeExpanded(contextMenu.nodeId) }))] }));
+}
+export function Graph(props) {
+    return (_jsx(GraphErrorBoundary, { children: _jsx(ReactFlowProvider, { children: _jsx(GraphInternal, { ...props }) }) }));
+}

package/dist/graph/GraphContext.d.ts

@@ -0,0 +1,12 @@
+import type { PreviewFieldHints } from "./graph-list-utils.js";
+import type { LayoutDirection, OnNodeContextMenu, RDFNode } from "./types.js";
+export type GraphContextValue = {
+    onToggleCollapse: (nodeId: string) => void;
+    onNodeContextMenu: OnNodeContextMenu;
+    onSelectNode: (node: RDFNode) => void;
+    layoutDirection: LayoutDirection;
+    previewHints?: PreviewFieldHints;
+};
+export declare const GraphContext: import("react").Context<GraphContextValue | undefined>;
+export declare function useGraphContext(): GraphContextValue;
+//# sourceMappingURL=GraphContext.d.ts.map

package/dist/graph/GraphContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphContext.d.ts","sourceRoot":"","sources":["../../src/graph/GraphContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,KAAK,EAAE,eAAe,EAAE,iBAAiB,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAE3E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,eAAe,EAAE,eAAe,CAAC;IACjC,YAAY,CAAC,EAAE,iBAAiB,CAAC;CAClC,CAAC;AAEF,eAAO,MAAM,YAAY,wDAA0D,CAAC;AAEpF,wBAAgB,eAAe,sBAM9B"}

package/dist/graph/GraphContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+export const GraphContext = createContext(undefined);
+export function useGraphContext() {
+    const context = useContext(GraphContext);
+    if (!context) {
+        throw new Error("useGraphContext must be used within GraphContext.Provider");
+    }
+    return context;
+}

package/dist/graph/GraphContextPanel.d.ts

@@ -0,0 +1,11 @@
+import { type JsonLdGraphDocument } from "@manta-eu/rdf-lib/jsonld";
+import { type ReactNode } from "react";
+export type GraphContextPanelProps = {
+    mergedGraph: JsonLdGraphDocument;
+    graphCount: number;
+    nodeCount: number;
+    sparqlQueries: string[];
+    renderGraph: (mergedGraph: JsonLdGraphDocument) => ReactNode;
+};
+export declare function GraphContextPanel(props: GraphContextPanelProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=GraphContextPanel.d.ts.map

package/dist/graph/GraphContextPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphContextPanel.d.ts","sourceRoot":"","sources":["../../src/graph/GraphContextPanel.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAEpE,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAQjD,MAAM,MAAM,sBAAsB,GAAG;IACnC,WAAW,EAAE,mBAAmB,CAAC;IACjC,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,WAAW,EAAE,CAAC,WAAW,EAAE,mBAAmB,KAAK,SAAS,CAAC;CAC9D,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,kDA0D9D"}

package/dist/graph/GraphContextPanel.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { humanCount } from "@manta-eu/lib/humanize";
+import { Network } from "lucide-react";
+import { useState } from "react";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "#components/modal/index";
+import { cn } from "#style";
+function formatQueryExecution(count) {
+    return `${humanCount(count, "query")} ${count === 1 ? "was" : "were"}`;
+}
+export function GraphContextPanel(props) {
+    const { mergedGraph, graphCount, nodeCount, sparqlQueries, renderGraph } = props;
+    const [isOpen, setIsOpen] = useState(false);
+    if (nodeCount === 0 && sparqlQueries.length === 0) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs("button", { onClick: () => setIsOpen(true), className: cn("px-4 py-2 flex items-center gap-2", "typography-small-medium text-muted-foreground", "hover:bg-muted/50 transition-colors rounded-md", "border border-muted-border cursor-pointer"), children: [_jsx(Network, { className: "size-4" }), _jsx("span", { children: "View Graph Context" }), _jsx("span", { className: "typography-tiny bg-accent-foreground/10 text-accent-foreground px-2 py-0.5 rounded-full", children: nodeCount > 0
+                            ? `${humanCount(nodeCount, "node")} from ${humanCount(graphCount, "query")}`
+                            : `${formatQueryExecution(sparqlQueries.length)} executed but returned no results` })] }), _jsx(Dialog, { open: isOpen, onOpenChange: setIsOpen, children: _jsxs(DialogContent, { className: "sm:max-w-[90vw] sm:h-[90vh] p-0 gap-0 flex flex-col", children: [_jsxs(DialogHeader, { className: "p-6 pb-4 flex-shrink-0", children: [_jsx(DialogTitle, { text: "Graph Context" }), _jsx(DialogDescription, { children: nodeCount > 0
+                                        ? `Visualizing ${humanCount(nodeCount, "node")} from ${humanCount(graphCount, "query")}`
+                                        : `${formatQueryExecution(sparqlQueries.length)} executed but returned no results` })] }), _jsx("div", { className: "flex-1 min-h-0 overflow-hidden", children: nodeCount > 0 ? (renderGraph(mergedGraph)) : (_jsxs("div", { className: "h-full flex flex-col items-center justify-center gap-4 text-muted-foreground", children: [_jsx(Network, { className: "size-12 opacity-50" }), _jsxs("div", { className: "text-center", children: [_jsx("p", { className: "typography-large-body-semibold", children: "No graph data returned" }), _jsxs("p", { className: "typography-small", children: [formatQueryExecution(sparqlQueries.length), " executed but returned no results"] }), _jsx("p", { className: "typography-tiny mt-2", children: "Use the copy button in the controls to view the SPARQL queries" })] })] })) })] }) })] }));
+}

package/dist/graph/GraphControls.d.ts

@@ -0,0 +1,22 @@
+import { type ReactFlowInstance } from "@xyflow/react";
+import type { RefObject } from "react";
+import type { RdfGraph } from "../lib/rdf-helpers.js";
+import type { GraphViewMode, LayoutDirection } from "./graph-state.js";
+import type { RDFEdge } from "./graph-utils.js";
+import type { RDFNode } from "./types.js";
+export type GraphControlsProps = {
+    reactFlowInstance: RefObject<ReactFlowInstance<RDFNode, RDFEdge> | null>;
+    graphContainerRef: RefObject<HTMLDivElement | null>;
+    graph: RdfGraph;
+    isFullscreen: boolean;
+    onToggleFullscreen: () => void;
+    layoutDirection: LayoutDirection;
+    onToggleLayoutDirection: () => void;
+    isSummaryView: boolean;
+    onToggleSummaryView: () => void;
+    viewMode: GraphViewMode;
+    onToggleViewMode: () => void;
+    disableSummaryView?: boolean;
+};
+export declare const GraphControls: import("react").NamedExoticComponent<GraphControlsProps>;
+//# sourceMappingURL=GraphControls.d.ts.map

package/dist/graph/GraphControls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphControls.d.ts","sourceRoot":"","sources":["../../src/graph/GraphControls.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAiBpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACpE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAG7C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAGvC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,iBAAiB,EAAE,SAAS,CAAC,iBAAiB,CAAC,OAAO,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC,CAAC;IACzE,iBAAiB,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACpD,KAAK,EAAE,QAAQ,CAAC;IAChB,YAAY,EAAE,OAAO,CAAC;IACtB,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,eAAe,EAAE,eAAe,CAAC;IACjC,uBAAuB,EAAE,MAAM,IAAI,CAAC;IACpC,aAAa,EAAE,OAAO,CAAC;IACvB,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,QAAQ,EAAE,aAAa,CAAC;IACxB,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,aAAa,0DAgJxB,CAAC"}

package/dist/graph/GraphControls.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useViewport } from "@xyflow/react";
+import { toPng } from "html-to-image";
+import { ArrowLeftRight, ArrowUpDown, Copy, Download, ListChecks, Maximize, Maximize2, Minimize2, Network, LayoutGrid, ZoomIn, ZoomOut, } from "lucide-react";
+import { memo, useCallback, useMemo } from "react";
+import { toast } from "sonner";
+import { serializeRdfGraph } from "./graph-utils.js";
+import { useGraphTheme } from "./themes.js";
+import { Button } from "#components/button/index";
+export const GraphControls = memo(function GraphControls(props) {
+    const { reactFlowInstance, graphContainerRef, graph, isFullscreen, onToggleFullscreen, layoutDirection, onToggleLayoutDirection, isSummaryView, onToggleSummaryView, viewMode, onToggleViewMode, disableSummaryView = false, } = props;
+    const isListView = viewMode === "list";
+    const { zoom } = useViewport();
+    const zoomPercent = Math.round(zoom * 100);
+    const theme = useGraphTheme();
+    const controlsStyle = useMemo(() => ({
+        backgroundColor: theme.node.background,
+        borderColor: theme.node.border,
+        color: theme.node.text,
+    }), [theme]);
+    const handleCopyJson = useCallback(() => {
+        const text = JSON.stringify(serializeRdfGraph(graph), null, 2);
+        void navigator.clipboard.writeText(text).then(() => toast.success("Graph data copied to clipboard"), () => toast.error("Failed to copy graph data"));
+    }, [graph]);
+    const handleZoomIn = useCallback(() => {
+        void reactFlowInstance.current?.zoomIn({ duration: 200 });
+    }, [reactFlowInstance]);
+    const handleZoomOut = useCallback(() => {
+        void reactFlowInstance.current?.zoomOut({ duration: 200 });
+    }, [reactFlowInstance]);
+    const handleFitView = useCallback(() => {
+        void reactFlowInstance.current?.fitView({ padding: 0.2, duration: 300 });
+    }, [reactFlowInstance]);
+    const exportGraph = useCallback(() => {
+        if (!graphContainerRef.current) {
+            console.error("Graph container not found");
+            return;
+        }
+        const viewport = graphContainerRef.current.querySelector(".react-flow__viewport");
+        if (!viewport) {
+            console.error("React Flow viewport not found");
+            return;
+        }
+        toPng(viewport, {
+            backgroundColor: theme.canvas.background,
+            pixelRatio: 2,
+        })
+            .then((dataUrl) => {
+            const link = document.createElement("a");
+            link.setAttribute("href", dataUrl);
+            link.setAttribute("download", "graph.png");
+            link.click();
+        })
+            .catch((error) => {
+            console.error("Failed to export graph:", error);
+        });
+    }, [graphContainerRef, theme.canvas.background]);
+    return (_jsxs("div", { className: "flex gap-1 backdrop-blur-sm rounded-md p-1 border shadow-sm", style: controlsStyle, children: [!isListView && (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: handleZoomIn, variant: "ghost", size: "sm", iconOnly: true, icon: ZoomIn, "aria-label": "Zoom In" }), _jsxs("span", { className: "flex items-center justify-center typography-small min-w-[36px] text-center align-center tabular-nums", style: { color: theme.node.textMuted }, children: [zoomPercent, "%"] }), _jsx(Button, { onClick: handleZoomOut, variant: "ghost", size: "sm", iconOnly: true, icon: ZoomOut, "aria-label": "Zoom Out" }), !disableSummaryView && (_jsx(Button, { onClick: onToggleSummaryView, variant: "ghost", size: "sm", iconOnly: true, icon: isSummaryView ? LayoutGrid : Network, "aria-label": isSummaryView ? "Switch to Detailed View" : "Switch to Summary View" }))] })), _jsx(Button, { onClick: onToggleViewMode, variant: "ghost", size: "sm", iconOnly: true, icon: isListView ? Network : ListChecks, "aria-label": isListView ? "Switch to Graph View" : "Switch to List View" }), !isListView && (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: handleFitView, variant: "ghost", size: "sm", iconOnly: true, icon: Maximize, "aria-label": "Fit View" }), _jsx(Button, { onClick: onToggleLayoutDirection, variant: "ghost", size: "sm", iconOnly: true, icon: layoutDirection === "LR" ? ArrowUpDown : ArrowLeftRight, "aria-label": layoutDirection === "LR" ? "Switch to Vertical Layout" : "Switch to Horizontal Layout" }), _jsx(Button, { onClick: handleCopyJson, variant: "ghost", size: "sm", iconOnly: true, icon: Copy, "aria-label": "Copy graph data to clipboard" })] })), isFullscreen && !isListView && (_jsx(Button, { onClick: exportGraph, variant: "ghost", size: "sm", iconOnly: true, icon: Download, "aria-label": "Export PNG" })), _jsx(Button, { onClick: onToggleFullscreen, variant: "ghost", size: "sm", iconOnly: true, icon: isFullscreen ? Minimize2 : Maximize2, "aria-label": isFullscreen ? "Exit Fullscreen" : "Fullscreen" })] }));
+});

package/dist/graph/GraphErrorBoundary.d.ts

@@ -0,0 +1,17 @@
+import type { ErrorInfo, ReactNode } from "react";
+import { Component } from "react";
+export type ErrorBoundaryState = {
+    hasError: boolean;
+    error?: Error;
+};
+export type GraphErrorBoundaryProps = {
+    children: ReactNode;
+    fallback?: ReactNode;
+};
+export declare class GraphErrorBoundary extends Component<GraphErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: GraphErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}
+//# sourceMappingURL=GraphErrorBoundary.d.ts.map

package/dist/graph/GraphErrorBoundary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphErrorBoundary.d.ts","sourceRoot":"","sources":["../../src/graph/GraphErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,qBAAa,kBAAmB,SAAQ,SAAS,CAAC,uBAAuB,EAAE,kBAAkB,CAAC;gBAChF,KAAK,EAAE,uBAAuB;IAK1C,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK,GAAG,kBAAkB;IAIjE,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS;IAIpD,MAAM;CAgBP"}

package/dist/graph/GraphErrorBoundary.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Component } from "react";
+export class GraphErrorBoundary extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error("Graph component error:", error, errorInfo);
+    }
+    render() {
+        if (this.state.hasError) {
+            return (this.props.fallback || (_jsxs("div", { className: "p-4 border border-error-border bg-error rounded-md", children: [_jsx("h3", { className: "typography-small-medium text-error-foreground", children: "Graph Visualization Error" }), _jsxs("p", { className: "typography-small text-error-foreground mt-1", children: ["Failed to render graph: ", this.state.error?.message || "Unknown error"] })] })));
+        }
+        return this.props.children;
+    }
+}

package/dist/graph/GraphListView.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode } from "react";
+import type { RDFNode } from "./types.js";
+export type GraphListViewRenderHeaderArgs = {
+    nodes: RDFNode[];
+    nodeMap: Map<string, RDFNode>;
+    planGraphIri?: string;
+};
+export type GraphListViewRenderRowArgs = {
+    node: RDFNode;
+    depth: number;
+    parentLabel?: string;
+    isSelected: boolean;
+    isCollapsed: boolean;
+    planGraphIri?: string;
+};
+export type GraphListViewProps = {
+    nodes: RDFNode[];
+    parentChildMap: Map<string, string[]>;
+    collapsedNodeIds: Set<string>;
+    selectedNodeId?: string;
+    planGraphIri?: string;
+    currentPage: number;
+    onPageChange: (page: number) => void;
+    renderHeader: (args: GraphListViewRenderHeaderArgs) => ReactNode;
+    renderRow: (args: GraphListViewRenderRowArgs) => ReactNode;
+};
+export declare function GraphListView(props: GraphListViewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=GraphListView.d.ts.map

package/dist/graph/GraphListView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphListView.d.ts","sourceRoot":"","sources":["../../src/graph/GraphListView.tsx"],"names":[],"mappings":"AACA,OAAO,EAAsB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAGvC,MAAM,MAAM,6BAA6B,GAAG;IAC1C,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;IACtC,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,YAAY,EAAE,CAAC,IAAI,EAAE,6BAA6B,KAAK,SAAS,CAAC;IACjE,SAAS,EAAE,CAAC,IAAI,EAAE,0BAA0B,KAAK,SAAS,CAAC;CAC5D,CAAC;AAEF,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAyGtD"}