@neo4j-ndl/react-graph 0.0.2

package/lib/cjs/graph-visualization.js

@@ -0,0 +1,328 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_NVL_OPTIONS = void 0;
+exports.GraphVisualization = GraphVisualization;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+const base_1 = require("@neo4j-ndl/base");
+const react_1 = require("@neo4j-ndl/react");
+const react_2 = require("@neo4j-nvl/react");
+const classnames_1 = __importDefault(require("classnames"));
+const react_3 = __importStar(require("react"));
+const graph_visualization_buttons_1 = require("./graph-visualization-buttons");
+const graph_visualization_context_1 = require("./graph-visualization-context");
+const graph_visualization_sidepanel_1 = require("./graph-visualization-sidepanel");
+const map_to_nvl_graph_1 = require("./map-to-nvl-graph");
+const single_selection_sidepanel_contents_1 = require("./sidepanel-components/single-selection-sidepanel-contents");
+const use_managed_node_state_1 = require("./use-managed-node-state");
+const use_semi_controlled_state_1 = require("./use-semi-controlled-state");
+const PLACEMENTS = {
+    'bottom-left': 'ndl-graph-visualization-interaction-island ndl-bottom-left',
+    'bottom-right': 'ndl-graph-visualization-interaction-island ndl-bottom-right',
+    'top-left': 'ndl-graph-visualization-interaction-island ndl-top-left',
+    'top-right': 'ndl-graph-visualization-interaction-island ndl-top-right',
+};
+const InteractionIsland = ({ children, className, placement, }) => {
+    return (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(PLACEMENTS[placement], className), children: children });
+};
+exports.DEFAULT_NVL_OPTIONS = {
+    disableTelemetry: true,
+    disableWebGL: true,
+    maxZoom: 3,
+    minZoom: 0.05,
+    relationshipThreshold: 0.55,
+    useWebGL: false,
+};
+const DEFAULT_COMPONENTS = {
+    bottomLeftIsland: null,
+    bottomRightIsland: ((0, jsx_runtime_1.jsxs)(react_1.IconButtonArray, { orientation: "vertical", isFloating: true, children: [(0, jsx_runtime_1.jsx)(graph_visualization_buttons_1.ZoomInButton, {}), " ", (0, jsx_runtime_1.jsx)(graph_visualization_buttons_1.ZoomOutButton, {}), " ", (0, jsx_runtime_1.jsx)(graph_visualization_buttons_1.ZoomToFitButton, {})] })),
+    topLeftIsland: null,
+    topRightIsland: ((0, jsx_runtime_1.jsxs)("div", { className: "ndl-graph-visualization-default-download-group", children: [(0, jsx_runtime_1.jsx)(graph_visualization_buttons_1.DownloadButton, {}), " ", (0, jsx_runtime_1.jsx)(graph_visualization_buttons_1.ToggleSidePanelButton, {})] })),
+};
+/**
+ * A comprehensive graph visualization component for rendering Neo4j-style graphs with interactive features.
+ *
+ * @remarks
+ * This component provides a complete graph visualization solution with built-in interaction modes,
+ * selection handling, zoom controls, and an optional sidepanel. It wraps the NVL (Neo4j Visualization Library)
+ * with additional UI controls and state management.
+ *
+ * The component supports various interaction modes including single selection, box selection, and lasso selection.
+ * It also provides customizable UI islands for placing controls at different corners of the visualization.
+ *
+ * @example
+ * Basic usage:
+ * ```tsx
+ * <GraphVisualization
+ *   nodes={nodes}
+ *   rels={relationships}
+ *   selected={selection}
+ *   setSelected={setSelection}
+ * />
+ * ```
+ *
+ * @example
+ * With custom controls:
+ * ```tsx
+ * <GraphVisualization
+ *   nodes={nodes}
+ *   rels={relationships}
+ *   topRightIsland={<CustomControls />}
+ *   sidepanel={{
+ *     contents: <CustomSidepanel />,
+ *     isSidePanelOpen: true,
+ *     setIsSidePanelOpen: setSidepanelOpen
+ *     sidePanelWidth: 400,
+ *     onSidePanelResize: setSidepanelWidth,
+ *   }}
+ * />
+ * ```
+ *
+ * @example
+ * With highlighting:
+ * ```tsx
+ * <GraphVisualization
+ *   nodes={nodes}
+ *   rels={relationships}
+ *   // undefined = no highlighting (default behavior)
+ *   // empty array = no search matches (dims all nodes)
+ *   // array with IDs = highlight only those items
+ *   highlightedNodeIds={searchResults.nodeIds}
+ *   highlightedRelationshipIds={searchResults.relationshipIds}
+ * />
+ * ```
+ *
+ * @param props - {@link GraphVisualizationProps}
+ * @returns A React component that renders an interactive graph visualization
+ *
+ * @alpha
+ */
+function GraphVisualization(_a) {
+    var _b, _c;
+    var { nvlRef: rawNvlRef, nvlCallbacks, nvlOptions, sidepanel: rawSidepanel, nodes: rawNodes, rels: rawRels, highlightedNodeIds, highlightedRelationshipIds, topLeftIsland = DEFAULT_COMPONENTS.topLeftIsland, topRightIsland = DEFAULT_COMPONENTS.topRightIsland, bottomLeftIsland = DEFAULT_COMPONENTS.bottomLeftIsland, bottomRightIsland = DEFAULT_COMPONENTS.bottomRightIsland, gesture = 'single', setGesture, selected: rawSelected, setSelected: rawSetSelected, interactionMode: rawInteractionMode, setInteractionMode: rawSetInteractionMode, mouseEventCallbacks = {}, className, style, htmlAttributes, ref, as } = _a, restProps = __rest(_a, ["nvlRef", "nvlCallbacks", "nvlOptions", "sidepanel", "nodes", "rels", "highlightedNodeIds", "highlightedRelationshipIds", "topLeftIsland", "topRightIsland", "bottomLeftIsland", "bottomRightIsland", "gesture", "setGesture", "selected", "setSelected", "interactionMode", "setInteractionMode", "mouseEventCallbacks", "className", "style", "htmlAttributes", "ref", "as"]);
+    const nvlRef = (0, react_3.useMemo)(() => rawNvlRef !== null && rawNvlRef !== void 0 ? rawNvlRef : react_3.default.createRef(), [rawNvlRef]);
+    const instanceId = (0, react_3.useId)();
+    // Respect NDL theme changes
+    const { theme } = (0, react_1.useNeedleTheme)();
+    const { bg, border, text } = base_1.tokens.theme[theme].palette.neutral;
+    // key required for nvl react responsiveness
+    const [key, setKey] = (0, react_3.useState)(0);
+    (0, react_3.useEffect)(() => {
+        setKey((prevKey) => prevKey + 1);
+    }, [theme]);
+    // Semi-control interaction mode and selection state
+    const [interactionMode, setInteractionMode] = (0, use_semi_controlled_state_1.useSemicontrolledState)(rawInteractionMode !== null && rawInteractionMode !== void 0 ? rawInteractionMode : 'select', rawSetInteractionMode);
+    const [selected, setSelected] = (0, use_semi_controlled_state_1.useSemicontrolledState)(rawSelected !== null && rawSelected !== void 0 ? rawSelected : { nodeIds: [], relationshipIds: [] }, rawSetSelected);
+    const nvlGraph = (0, react_3.useMemo)(() => (0, map_to_nvl_graph_1.mapToNvlGraph)(rawNodes, rawRels), [rawNodes, rawRels]);
+    const { nodesWithState, relsWithState, wrappedMouseEventCallbacks } = (0, use_managed_node_state_1.useManagedNodeState)({
+        gesture,
+        highlightedNodeIds,
+        highlightedRelationshipIds,
+        interactionMode,
+        mouseEventCallbacks,
+        nvlGraph,
+        selected,
+        setInteractionMode,
+        setSelected,
+    });
+    const [isSidePanelOpen, setIsSidePanelOpen] = (0, use_semi_controlled_state_1.useSemicontrolledState)((_b = rawSidepanel === null || rawSidepanel === void 0 ? void 0 : rawSidepanel.isSidePanelOpen) !== null && _b !== void 0 ? _b : true, rawSidepanel === null || rawSidepanel === void 0 ? void 0 : rawSidepanel.setIsSidePanelOpen);
+    const [sidePanelWidth, setSidePanelWidth] = (0, use_semi_controlled_state_1.useSemicontrolledState)((_c = rawSidepanel === null || rawSidepanel === void 0 ? void 0 : rawSidepanel.sidePanelWidth) !== null && _c !== void 0 ? _c : 400, rawSidepanel === null || rawSidepanel === void 0 ? void 0 : rawSidepanel.onSidePanelResize);
+    const sidepanel = (0, react_3.useMemo)(() => {
+        if (rawSidepanel === undefined) {
+            return {
+                children: (0, jsx_runtime_1.jsx)(GraphVisualization.SingleSelectionSidePanelContents, {}),
+                isSidePanelOpen,
+                onSidePanelResize: setSidePanelWidth,
+                setIsSidePanelOpen,
+                sidePanelWidth,
+            };
+        }
+        return rawSidepanel;
+    }, [
+        rawSidepanel,
+        isSidePanelOpen,
+        setIsSidePanelOpen,
+        sidePanelWidth,
+        setSidePanelWidth,
+    ]);
+    const Component = as !== null && as !== void 0 ? as : 'div';
+    return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ ref: ref, className: (0, classnames_1.default)('ndl-graph-visualization-container', className), style: style }, htmlAttributes, { children: (0, jsx_runtime_1.jsxs)(graph_visualization_context_1.GraphVisualizationContext.Provider, { value: {
+                gesture,
+                interactionMode,
+                nvlGraph,
+                nvlInstance: nvlRef,
+                selected,
+                setGesture,
+                sidepanel,
+            }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "ndl-graph-visualization", children: [(0, jsx_runtime_1.jsx)(react_2.InteractiveNvlWrapper, Object.assign({ layout: "d3Force", nodes: nodesWithState, rels: relsWithState, nvlOptions: Object.assign(Object.assign(Object.assign({}, exports.DEFAULT_NVL_OPTIONS), { instanceId, styling: {
+                                    defaultRelationshipColor: border.strongest,
+                                    disabledItemColor: bg.strong,
+                                    disabledItemFontColor: text.weakest,
+                                    dropShadowColor: border.weak,
+                                    selectedInnerBorderColor: bg.default,
+                                } }), nvlOptions), nvlCallbacks: Object.assign({ onLayoutComputing(isComputing) {
+                                    var _a;
+                                    if (!isComputing) {
+                                        (_a = nvlRef.current) === null || _a === void 0 ? void 0 : _a.fit(nvlRef.current.getNodes().map((neighbors) => neighbors.id), { noPan: true });
+                                    }
+                                } }, nvlCallbacks), mouseEventCallbacks: wrappedMouseEventCallbacks, ref: nvlRef }, restProps), key), topLeftIsland !== null && ((0, jsx_runtime_1.jsx)(InteractionIsland, { placement: "top-left", children: topLeftIsland })), topRightIsland !== null && ((0, jsx_runtime_1.jsx)(InteractionIsland, { placement: "top-right", children: topRightIsland })), bottomLeftIsland !== null && ((0, jsx_runtime_1.jsx)(InteractionIsland, { placement: "bottom-left", children: bottomLeftIsland })), bottomRightIsland !== null && ((0, jsx_runtime_1.jsx)(InteractionIsland, { placement: "bottom-right", children: bottomRightIsland }))] }), sidepanel && (0, jsx_runtime_1.jsx)(graph_visualization_sidepanel_1.GraphVisualizationSidepanel, { sidepanel: sidepanel })] }) })));
+}
+/**
+ * Zoom in button for use within a GraphVisualization component.
+ *
+ * @remarks
+ * Increases zoom level by 1.3x
+ *
+ * @alpha
+ */
+GraphVisualization.ZoomInButton = graph_visualization_buttons_1.ZoomInButton;
+/**
+ * Zoom out button for use within a GraphVisualization component.
+ *
+ * @remarks
+ * Decreases zoom level by 0.7x
+ *
+ * @alpha
+ */
+GraphVisualization.ZoomOutButton = graph_visualization_buttons_1.ZoomOutButton;
+/**
+ * Zoom to fit button for use within a GraphVisualization component.
+ *
+ * @remarks
+ * Automatically adjusts zoom and pan to show all nodes and relationships
+ *
+ * @alpha
+ */
+GraphVisualization.ZoomToFitButton = graph_visualization_buttons_1.ZoomToFitButton;
+/**
+ * Sidepanel toggle button for use within a GraphVisualization component.
+ *
+ * @remarks
+ * Shows or hides the sidepanel containing node and relationship details.
+ * Requires a sidepanel to be configured in the GraphVisualization component.
+ *
+ * @throws Error when used without a configured sidepanel
+ *
+ * @alpha
+ */
+GraphVisualization.ToggleSidePanelButton = graph_visualization_buttons_1.ToggleSidePanelButton;
+/**
+ * Download button for use within a GraphVisualization component.
+ *
+ * @remarks
+ * Opens a dropdown menu with download options. Currently supports PNG format.
+ * Captures the current visualization state including zoom level.
+ *
+ * @alpha
+ */
+GraphVisualization.DownloadButton = graph_visualization_buttons_1.DownloadButton;
+/**
+ * Box selection button for use within a GraphVisualization component.
+ *
+ * @remarks
+ * Enables box selection mode where dragging creates a rectangular selection area.
+ * Disabled unless the `setGesture` callback is passed.
+ * Shows active state when enabled and supports keyboard shortcut 'B'.
+ *
+ * @alpha
+ */
+GraphVisualization.BoxSelectButton = graph_visualization_buttons_1.BoxSelectButton;
+/**
+ * Lasso selection button for use within a GraphVisualization component.
+ *
+ * @remarks
+ * Enables lasso selection mode where dragging creates a free-form selection area.
+ * Disabled unless the `setGesture` callback is passed.
+ * Shows active state when enabled and supports keyboard shortcut 'L'.
+ *
+ * @alpha
+ */
+GraphVisualization.LassoSelectButton = graph_visualization_buttons_1.LassoSelectButton;
+/**
+ * Single node selection button for use within a GraphVisualization component.
+ *
+ * @remarks
+ * Enables single selection mode where clicking selects individual nodes or relationships.
+ * Shows active state when enabled and supports keyboard shortcut 'S'.
+ *
+ * @alpha
+ */
+GraphVisualization.SingleSelectButton = graph_visualization_buttons_1.SingleSelectButton;
+/**
+ * Search button for use within a GraphVisualization component.
+ *
+ * @remarks
+ * Enables search mode where clicking opens a search input for filtering nodes and relationships.
+ *
+ * @alpha
+ */
+GraphVisualization.SearchButton = graph_visualization_buttons_1.SearchButton;
+/**
+ * Single node selection side panel for use within a GraphVisualization component.
+ *
+ * @remarks
+ * Displays detailed information about the selected node or relationship.
+ * Panel is automatically opened when a node or relationship is selected.
+ * Also when user click on the show panel button in the top right corner.
+ *
+ * @alpha
+ */
+GraphVisualization.SingleSelectionSidePanelContents =
+    single_selection_sidepanel_contents_1.SingleSelectionSidepanelContents;
+//# sourceMappingURL=graph-visualization.js.map

package/lib/cjs/graph-visualization.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph-visualization.js","sourceRoot":"","sources":["../../src/graph-visualization.tsx"],"names":[],"mappings":"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"}

package/lib/cjs/index.js

@@ -0,0 +1,28 @@
+"use strict";
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGraphVisualizationContext = exports.GraphVisualization = void 0;
+var graph_visualization_1 = require("./graph-visualization");
+Object.defineProperty(exports, "GraphVisualization", { enumerable: true, get: function () { return graph_visualization_1.GraphVisualization; } });
+var graph_visualization_context_1 = require("./graph-visualization-context");
+Object.defineProperty(exports, "useGraphVisualizationContext", { enumerable: true, get: function () { return graph_visualization_context_1.useGraphVisualizationContext; } });
+//# sourceMappingURL=index.js.map

package/lib/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;AAEH,6DAA2D;AAAlD,yHAAA,kBAAkB,OAAA;AAC3B,6EAeuC;AAdrC,2IAAA,4BAA4B,OAAA"}

package/lib/cjs/map-to-nvl-graph.js

@@ -0,0 +1,167 @@
+"use strict";
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.captionPriorityOrder = exports.NO_LABEL_FALLBACK_COLOR = exports.DEFAULT_REL_COLOR = void 0;
+exports.getDefaultCaptionKey = getDefaultCaptionKey;
+exports.mapToNvlGraph = mapToNvlGraph;
+const word_color_1 = require("@neo4j-devtools/word-color");
+const base_1 = require("@neo4j-ndl/base");
+exports.DEFAULT_REL_COLOR = base_1.tokens.colors.neutral['40'];
+exports.NO_LABEL_FALLBACK_COLOR = base_1.tokens.colors.neutral['40'];
+const sortAlphabetically = (a = '', b = '') => a.toLowerCase().localeCompare(b.toLowerCase());
+function getMostCommonColor(colors) {
+    var _a;
+    const [firstColor] = colors;
+    if (firstColor === undefined) {
+        return exports.NO_LABEL_FALLBACK_COLOR;
+    }
+    const colorCounts = {};
+    for (const color of colors) {
+        colorCounts[color] = ((_a = colorCounts[color]) !== null && _a !== void 0 ? _a : 0) + 1;
+    }
+    let maxCount = 0;
+    let mostCommonColor = firstColor;
+    for (const [color, colorCount] of Object.entries(colorCounts)) {
+        if (colorCount > maxCount) {
+            maxCount = colorCount;
+            mostCommonColor = color;
+        }
+    }
+    return mostCommonColor;
+}
+function transformToItemMetada(arg) {
+    return Object.entries(arg).reduce((acc, [label, colors]) => {
+        acc[label] = {
+            mostCommonColor: getMostCommonColor(colors),
+            totalCount: colors.length,
+        };
+        return acc;
+    }, {});
+}
+exports.captionPriorityOrder = [
+    /^name$/i,
+    /^title$/i,
+    /^label$/i,
+    /name$/i,
+    /description$/i,
+    /^.+/,
+];
+function getDefaultCaptionKey(options) {
+    const captionKeys = options
+        .filter((option) => option.type === 'property')
+        .map((option) => option.captionKey);
+    for (const regex of exports.captionPriorityOrder) {
+        const matchingKey = captionKeys.find((key) => regex.test(key));
+        if (matchingKey !== undefined) {
+            return {
+                captionKey: matchingKey,
+                type: 'property',
+            };
+        }
+    }
+    const typeOption = options.find((option) => option.type === 'type');
+    if (typeOption) {
+        return typeOption;
+    }
+    return options.find((option) => option.type === 'id');
+}
+const getDefaultNodeCaption = (item) => {
+    const options = Object.keys(item.properties).map((property) => ({
+        captionKey: property,
+        type: 'property',
+    }));
+    options.push({ type: 'id' }, { type: 'type' });
+    const defaultCaptionKey = getDefaultCaptionKey(options);
+    if ((defaultCaptionKey === null || defaultCaptionKey === void 0 ? void 0 : defaultCaptionKey.type) === 'property') {
+        const caption = item.properties[defaultCaptionKey.captionKey];
+        if (caption !== undefined) {
+            // remove quotes from string
+            if (caption.type === 'string') {
+                return [{ value: caption.stringified.slice(1, -1) }];
+            }
+            return [{ value: caption.stringified }];
+        }
+    }
+    const [firstLabel] = item.labels;
+    if ((defaultCaptionKey === null || defaultCaptionKey === void 0 ? void 0 : defaultCaptionKey.type) === 'type' && firstLabel !== undefined) {
+        return [{ value: firstLabel }];
+    }
+    return [{ value: item.id }];
+};
+// Properties can be huge, so we split them out into a separate lookup table
+// to prevent them from making the physics slow
+// here we also apply default colors & captions to nodes and relationships
+// and sample colors for the sidepanel
+// in the future we'll apply styling here as well
+function mapToNvlGraph(rawNodes, rawRels) {
+    const labelColorPairs = {};
+    const typeColorPairs = {};
+    const nodeData = {};
+    const relData = {};
+    const nodes = rawNodes.map((node) => {
+        var _a;
+        const [firstLabel] = node.labels;
+        const newNode = Object.assign(Object.assign({ captions: getDefaultNodeCaption(node), color: (_a = node.color) !== null && _a !== void 0 ? _a : (firstLabel === undefined
+                ? exports.NO_LABEL_FALLBACK_COLOR
+                : (0, word_color_1.calculateDefaultNodeColors)(firstLabel).backgroundColor) }, node), { labels: undefined, properties: undefined });
+        nodeData[node.id] = {
+            color: newNode.color,
+            id: node.id,
+            labelsSorted: [...node.labels].sort(sortAlphabetically),
+            properties: node.properties,
+        };
+        node.labels.forEach((label) => {
+            var _a;
+            labelColorPairs[label] = [
+                ...((_a = labelColorPairs[label]) !== null && _a !== void 0 ? _a : []),
+                newNode.color,
+            ];
+        });
+        return newNode;
+    });
+    const rels = rawRels.map((rel) => {
+        var _a, _b, _c;
+        relData[rel.id] = {
+            color: (_a = rel.color) !== null && _a !== void 0 ? _a : exports.DEFAULT_REL_COLOR,
+            id: rel.id,
+            properties: rel.properties,
+            type: rel.type,
+        };
+        typeColorPairs[rel.type] = [
+            ...((_b = typeColorPairs[rel.type]) !== null && _b !== void 0 ? _b : []),
+            (_c = rel.color) !== null && _c !== void 0 ? _c : exports.DEFAULT_REL_COLOR,
+        ];
+        return Object.assign(Object.assign({ captions: [{ value: rel.type }], color: exports.DEFAULT_REL_COLOR }, rel), { properties: undefined, type: undefined });
+    });
+    const labelMetaData = transformToItemMetada(labelColorPairs);
+    const typeMetaData = transformToItemMetada(typeColorPairs);
+    const dataLookupTable = {
+        labelMetaData,
+        labels: Object.keys(labelMetaData).sort((a, b) => sortAlphabetically(a, b)),
+        nodes: nodeData,
+        relationships: relData,
+        typeMetaData,
+        types: Object.keys(typeMetaData).sort((a, b) => sortAlphabetically(a, b)),
+    };
+    return { dataLookupTable, nodes, rels };
+}
+//# sourceMappingURL=map-to-nvl-graph.js.map

package/lib/cjs/map-to-nvl-graph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"map-to-nvl-graph.js","sourceRoot":"","sources":["../../src/map-to-nvl-graph.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;AA8EH,oDAuBC;AAuCD,sCA2EC;AArND,2DAAwE;AACxE,0CAAyC;AAsB5B,QAAA,iBAAiB,GAAG,aAAM,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;AAChD,QAAA,uBAAuB,GAAG,aAAM,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;AAEnE,MAAM,kBAAkB,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,EAAE,EAAE,CAC5C,CAAC,CAAC,WAAW,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC;AAEjD,SAAS,kBAAkB,CAAC,MAAgB;;IAC1C,MAAM,CAAC,UAAU,CAAC,GAAG,MAAM,CAAC;IAE5B,IAAI,UAAU,KAAK,SAAS,EAAE,CAAC;QAC7B,OAAO,+BAAuB,CAAC;IACjC,CAAC;IAED,MAAM,WAAW,GAA2B,EAAE,CAAC;IAC/C,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;QAC3B,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,MAAA,WAAW,CAAC,KAAK,CAAC,mCAAI,CAAC,CAAC,GAAG,CAAC,CAAC;IACrD,CAAC;IAED,IAAI,QAAQ,GAAG,CAAC,CAAC;IACjB,IAAI,eAAe,GAAG,UAAU,CAAC;IAEjC,KAAK,MAAM,CAAC,KAAK,EAAE,UAAU,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC;QAC9D,IAAI,UAAU,GAAG,QAAQ,EAAE,CAAC;YAC1B,QAAQ,GAAG,UAAU,CAAC;YACtB,eAAe,GAAG,KAAK,CAAC;QAC1B,CAAC;IACH,CAAC;IAED,OAAO,eAAe,CAAC;AACzB,CAAC;AAED,SAAS,qBAAqB,CAAC,GAA6B;IAC1D,OAAO,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,CAC/B,CAAC,GAAG,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,EAAE;QACvB,GAAG,CAAC,KAAK,CAAC,GAAG;YACX,eAAe,EAAE,kBAAkB,CAAC,MAAM,CAAC;YAC3C,UAAU,EAAE,MAAM,CAAC,MAAM;SAC1B,CAAC;QACF,OAAO,GAAG,CAAC;IACb,CAAC,EACD,EAAE,CACH,CAAC;AACJ,CAAC;AAEY,QAAA,oBAAoB,GAAG;IAClC,SAAS;IACT,UAAU;IACV,UAAU;IACV,QAAQ;IACR,eAAe;IACf,KAAK;CACN,CAAC;AAEF,SAAgB,oBAAoB,CAClC,OAAwB;IAExB,MAAM,WAAW,GAAG,OAAO;SACxB,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,KAAK,UAAU,CAAC;SAC9C,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;IAEtC,KAAK,MAAM,KAAK,IAAI,4BAAoB,EAAE,CAAC;QACzC,MAAM,WAAW,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;QAC/D,IAAI,WAAW,KAAK,SAAS,EAAE,CAAC;YAC9B,OAAO;gBACL,UAAU,EAAE,WAAW;gBACvB,IAAI,EAAE,UAAU;aACjB,CAAC;QACJ,CAAC;IACH,CAAC;IAED,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC;IACpE,IAAI,UAAU,EAAE,CAAC;QACf,OAAO,UAAU,CAAC;IACpB,CAAC;IAED,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC;AACxD,CAAC;AAED,MAAM,qBAAqB,GAAG,CAAC,IAAa,EAAmB,EAAE;IAC/D,MAAM,OAAO,GAAoB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,CAC/D,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;QACb,UAAU,EAAE,QAAQ;QACpB,IAAI,EAAE,UAAU;KACjB,CAAC,CACH,CAAC;IAEF,OAAO,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAa,EAAE,EAAE,EAAE,IAAI,EAAE,MAAe,EAAE,CAAC,CAAC;IAEjE,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAExD,IAAI,CAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,IAAI,MAAK,UAAU,EAAE,CAAC;QAC3C,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC;QAE9D,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;YAC1B,4BAA4B;YAC5B,IAAI,OAAO,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;gBAC9B,OAAO,CAAC,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;YACvD,CAAC;YACD,OAAO,CAAC,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;QAC1C,CAAC;IACH,CAAC;IAED,MAAM,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC;IACjC,IAAI,CAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,IAAI,MAAK,MAAM,IAAI,UAAU,KAAK,SAAS,EAAE,CAAC;QACnE,OAAO,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC;IACjC,CAAC;IAED,OAAO,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;AAC9B,CAAC,CAAC;AAEF,4EAA4E;AAC5E,+CAA+C;AAC/C,0EAA0E;AAC1E,sCAAsC;AACtC,iDAAiD;AACjD,SAAgB,aAAa,CAC3B,QAAmB,EACnB,OAAiB;IAEjB,MAAM,eAAe,GAA6B,EAAE,CAAC;IACrD,MAAM,cAAc,GAA6B,EAAE,CAAC;IACpD,MAAM,QAAQ,GAA6B,EAAE,CAAC;IAC9C,MAAM,OAAO,GAA4B,EAAE,CAAC;IAE5C,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;;QAClC,MAAM,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC;QACjC,MAAM,OAAO,iCACX,QAAQ,EAAE,qBAAqB,CAAC,IAAI,CAAC,EACrC,KAAK,EACH,MAAA,IAAI,CAAC,KAAK,mCACV,CAAC,UAAU,KAAK,SAAS;gBACvB,CAAC,CAAC,+BAAuB;gBACzB,CAAC,CAAC,IAAA,uCAA0B,EAAC,UAAU,CAAC,CAAC,eAAe,CAAC,IAC1D,IAAI,KACP,MAAM,EAAE,SAAS,EACjB,UAAU,EAAE,SAAS,GACtB,CAAC;QAEF,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG;YAClB,KAAK,EAAE,OAAO,CAAC,KAAK;YACpB,EAAE,EAAE,IAAI,CAAC,EAAE;YACX,YAAY,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC;YACvD,UAAU,EAAE,IAAI,CAAC,UAAU;SAC5B,CAAC;QAEF,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;;YAC5B,eAAe,CAAC,KAAK,CAAC,GAAG;gBACvB,GAAG,CAAC,MAAA,eAAe,CAAC,KAAK,CAAC,mCAAI,EAAE,CAAC;gBACjC,OAAO,CAAC,KAAK;aACd,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,OAAO,OAAO,CAAC;IACjB,CAAC,CAAC,CAAC;IAEH,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;;QAC/B,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG;YAChB,KAAK,EAAE,MAAA,GAAG,CAAC,KAAK,mCAAI,yBAAiB;YACrC,EAAE,EAAE,GAAG,CAAC,EAAE;YACV,UAAU,EAAE,GAAG,CAAC,UAAU;YAC1B,IAAI,EAAE,GAAG,CAAC,IAAI;SACf,CAAC;QAEF,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG;YACzB,GAAG,CAAC,MAAA,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,mCAAI,EAAE,CAAC;YACnC,MAAA,GAAG,CAAC,KAAK,mCAAI,yBAAiB;SAC/B,CAAC;QAEF,qCACE,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,CAAC,IAAI,EAAE,CAAC,EAC/B,KAAK,EAAE,yBAAiB,IACrB,GAAG,KACN,UAAU,EAAE,SAAS,EACrB,IAAI,EAAE,SAAS,IACf;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,qBAAqB,CAAC,eAAe,CAAC,CAAC;IAC7D,MAAM,YAAY,GAAG,qBAAqB,CAAC,cAAc,CAAC,CAAC;IAE3D,MAAM,eAAe,GAAoB;QACvC,aAAa;QACb,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QAC3E,KAAK,EAAE,QAAQ;QACf,aAAa,EAAE,OAAO;QACtB,YAAY;QACZ,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;KAC1E,CAAC;IAEF,OAAO,EAAE,eAAe,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;AAC1C,CAAC"}

package/lib/cjs/sidepanel-components/button-group.js

@@ -0,0 +1,96 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonGroup = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+const react_1 = __importStar(require("react"));
+const ButtonGroup = ({ children }) => {
+    const [selectedIndex, setSelectedIndex] = (0, react_1.useState)(0);
+    const parentRef = (0, react_1.useRef)(null);
+    const focusElement = (index) => {
+        var _a, _b;
+        const child = (_b = (_a = parentRef.current) === null || _a === void 0 ? void 0 : _a.children[index]) === null || _b === void 0 ? void 0 : _b.children[0];
+        if (child instanceof HTMLElement) {
+            child.focus();
+        }
+    };
+    const childrenCount = (0, react_1.useMemo)(() => react_1.default.Children.count(children), [children]);
+    const safeSetSelectedIndex = (0, react_1.useCallback)((index) => {
+        if (index >= childrenCount) {
+            setSelectedIndex(childrenCount - 1);
+        }
+        else {
+            setSelectedIndex(Math.max(0, index));
+        }
+    }, [childrenCount, setSelectedIndex]);
+    const handleKeyDown = (event) => {
+        let newIndx = selectedIndex;
+        if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+            newIndx = (selectedIndex + 1) % react_1.default.Children.count(children);
+            safeSetSelectedIndex(newIndx);
+        }
+        else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
+            newIndx =
+                (selectedIndex - 1 + react_1.default.Children.count(children)) %
+                    react_1.default.Children.count(children);
+            safeSetSelectedIndex(newIndx);
+        }
+        // set focus to new button
+        focusElement(newIndx);
+    };
+    return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    (0, jsx_runtime_1.jsx)("ul", { onKeyDown: (e) => handleKeyDown(e), ref: parentRef, style: { all: 'inherit', listStyleType: 'none' }, children: react_1.default.Children.map(children, (child, index) => {
+            if (!react_1.default.isValidElement(child)) {
+                return null;
+            }
+            const clonedElement = (0, react_1.cloneElement)(child, {
+                tabIndex: selectedIndex === index ? 0 : -1,
+            });
+            return (0, jsx_runtime_1.jsx)("li", { children: clonedElement }, index);
+        }) }));
+};
+exports.ButtonGroup = ButtonGroup;
+//# sourceMappingURL=button-group.js.map

package/lib/cjs/sidepanel-components/button-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.js","sourceRoot":"","sources":["../../../src/sidepanel-components/button-group.tsx"],"names":[],"mappings":"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"}