@neo4j-ndl/react-graph 1.1.16 → 1.1.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/lib/cjs/graph-visualization.js +1 -1
  2. package/lib/cjs/graph-visualization.js.map +1 -1
  3. package/lib/cjs/stories/graph-visualization-maximalist.story.js +1 -1
  4. package/lib/cjs/stories/graph-visualization-maximalist.story.js.map +1 -1
  5. package/lib/esm/graph-visualization.js +1 -1
  6. package/lib/esm/graph-visualization.js.map +1 -1
  7. package/lib/esm/stories/graph-visualization-maximalist.story.js +1 -1
  8. package/lib/esm/stories/graph-visualization-maximalist.story.js.map +1 -1
  9. package/lib/types/graph-visualization.d.ts.map +1 -1
  10. package/package.json +3 -3
package/lib/cjs/graph-visualization.js CHANGED
@@ -100,7 +100,7 @@ exports.DEFAULT_NVL_OPTIONS = {
100
100
  };
101
101
  const DEFAULT_COMPONENTS = {
102
102
  bottomLeftIsland: null,
103
- 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, {})] })),
103
+ bottomRightIsland: ((0, jsx_runtime_1.jsxs)(react_1.IconButtonArray, { orientation: "vertical", isFloating: true, size: "small", 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, {})] })),
104
104
  topLeftIsland: null,
105
105
  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, {})] })),
106
106
  };
package/lib/cjs/graph-visualization.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"graph-visualization.js","sourceRoot":"","sources":["../../src/graph-visualization.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { tokens } from '@neo4j-ndl/base';\nimport { IconButtonArray, useNeedleTheme } from '@neo4j-ndl/react';\nimport type NVL from '@neo4j-nvl/base';\nimport { type Layout } from '@neo4j-nvl/base';\nimport {\n InteractiveNvlWrapper,\n type InteractiveNvlWrapperProps,\n} from '@neo4j-nvl/react';\nimport { default as cx } from 'classnames';\nimport React, { useEffect, useId, useMemo, useState } from 'react';\n\nimport {\n BoxSelectButton,\n DownloadButton,\n LassoSelectButton,\n LayoutSelectButton,\n SearchButton,\n SingleSelectButton,\n ToggleSidePanelButton,\n ZoomInButton,\n ZoomOutButton,\n ZoomToFitButton,\n} from './graph-visualization-buttons';\nimport {\n type Gesture,\n type GraphSelection,\n GraphVisualizationContext,\n type InteractionMode,\n type NeoNode,\n type NeoRel,\n type NvlGraph,\n type Sidepanel,\n} from './graph-visualization-context';\nimport { GraphVisualizationSidepanel } from './graph-visualization-sidepanel';\nimport { mapToNvlGraph } from './map-to-nvl-graph';\nimport { SingleSelectionSidepanelContents } from './sidepanel-components/single-selection-sidepanel-contents';\nimport { useManagedNodeState } from './use-managed-node-state';\nimport { useSemicontrolledState } from './use-semi-controlled-state';\n\ntype Placement = 'top-right' | 'bottom-right' | 'top-left' | 'bottom-left';\n\nconst PLACEMENTS: Record<Placement, string> = {\n 'bottom-left': 'ndl-graph-visualization-interaction-island ndl-bottom-left',\n 'bottom-right': 'ndl-graph-visualization-interaction-island ndl-bottom-right',\n 'top-left': 'ndl-graph-visualization-interaction-island ndl-top-left',\n 'top-right': 'ndl-graph-visualization-interaction-island ndl-top-right',\n};\n\nconst InteractionIsland = ({\n children,\n className,\n placement,\n}: {\n children: React.ReactNode;\n placement: Placement;\n className?: string;\n}) => {\n return <div className={cx(PLACEMENTS[placement], className)}>{children}</div>;\n};\n\nexport const DEFAULT_NVL_OPTIONS = {\n disableTelemetry: true,\n disableWebGL: true,\n maxZoom: 3,\n minZoom: 0.05,\n relationshipThreshold: 0.55,\n};\n\nconst DEFAULT_COMPONENTS = {\n bottomLeftIsland: null,\n bottomRightIsland: (\n <IconButtonArray orientation=\"vertical\" isFloating>\n <ZoomInButton /> <ZoomOutButton /> <ZoomToFitButton />\n </IconButtonArray>\n ),\n topLeftIsland: null,\n topRightIsland: (\n <div className=\"ndl-graph-visualization-default-download-group\">\n <DownloadButton /> <ToggleSidePanelButton />\n </div>\n ),\n};\n\nexport type GraphVisualizationProps<T extends React.ElementType = 'div'> = {\n nvlRef?: React.RefObject<NVL | null>;\n sidepanel?: Sidepanel | null;\n bottomLeftIsland?: React.ReactNode;\n bottomRightIsland?: React.ReactNode;\n topLeftIsland?: React.ReactNode;\n topRightIsland?: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n\n gesture?: Gesture;\n setGesture?: (gesture: Gesture) => void;\n selected?: GraphSelection;\n setSelected?: (newSelection: GraphSelection) => void;\n interactionMode?: InteractionMode;\n setInteractionMode?: (interactionMode: InteractionMode) => void;\n layout?: Layout;\n setLayout?: (layout: Layout) => void;\n\n nodes: NeoNode[];\n rels: NeoRel[];\n\n highlightedNodeIds?: string[];\n highlightedRelationshipIds?: string[];\n\n as?: T;\n ref?: React.ComponentPropsWithRef<T>['ref'];\n htmlAttributes?: React.HTMLAttributes<T>;\n} & InteractiveNvlWrapperProps;\n\n/**\n * A comprehensive graph visualization component for rendering Neo4j-style graphs with interactive features.\n *\n * @remarks\n * This component provides a complete graph visualization solution with built-in interaction modes,\n * selection handling, zoom controls, and an optional sidepanel. It wraps the NVL (Neo4j Visualization Library)\n * with additional UI controls and state management.\n *\n * The component supports various interaction modes including single selection, box selection, and lasso selection.\n * It also provides customizable UI islands for placing controls at different corners of the visualization.\n *\n * @example\n * Basic usage:\n * ```tsx\n * <GraphVisualization\n * nodes={nodes}\n * rels={relationships}\n * selected={selection}\n * setSelected={setSelection}\n * />\n * ```\n *\n * @example\n * With custom controls:\n * ```tsx\n * <GraphVisualization\n * nodes={nodes}\n * rels={relationships}\n * topRightIsland={<CustomControls />}\n * sidepanel={{\n * contents: <CustomSidepanel />,\n * isSidePanelOpen: true,\n * setIsSidePanelOpen: setSidepanelOpen\n * sidePanelWidth: 400,\n * onSidePanelResize: setSidepanelWidth,\n * }}\n * />\n * ```\n *\n * @example\n * With highlighting:\n * ```tsx\n * <GraphVisualization\n * nodes={nodes}\n * rels={relationships}\n * // undefined = no highlighting (default behavior)\n * // empty array = no search matches (dims all nodes)\n * // array with IDs = highlight only those items\n * highlightedNodeIds={searchResults.nodeIds}\n * highlightedRelationshipIds={searchResults.relationshipIds}\n * />\n * ```\n *\n * @param props - {@link GraphVisualizationProps}\n * @returns A React component that renders an interactive graph visualization\n *\n * @alpha\n */\nexport function GraphVisualization<T extends React.ElementType = 'div'>({\n nvlRef: rawNvlRef,\n nvlCallbacks,\n nvlOptions,\n sidepanel: rawSidepanel,\n nodes: rawNodes,\n rels: rawRels,\n highlightedNodeIds,\n highlightedRelationshipIds,\n topLeftIsland = DEFAULT_COMPONENTS.topLeftIsland,\n topRightIsland = DEFAULT_COMPONENTS.topRightIsland,\n bottomLeftIsland = DEFAULT_COMPONENTS.bottomLeftIsland,\n bottomRightIsland = DEFAULT_COMPONENTS.bottomRightIsland,\n gesture = 'single',\n setGesture,\n layout: rawLayout,\n setLayout: rawSetLayout,\n selected: rawSelected,\n setSelected: rawSetSelected,\n interactionMode: rawInteractionMode,\n setInteractionMode: rawSetInteractionMode,\n mouseEventCallbacks = {},\n className,\n style,\n htmlAttributes,\n ref,\n as,\n ...restProps\n}: GraphVisualizationProps<T>) {\n const nvlRef = useMemo(\n () => rawNvlRef ?? React.createRef<NVL>(),\n [rawNvlRef],\n );\n\n const instanceId = useId();\n\n // Respect NDL theme changes\n const { theme } = useNeedleTheme();\n const { bg, border, text } = tokens.theme[theme].color.neutral;\n\n // key required for nvl react responsiveness\n const [key, setKey] = useState(0);\n useEffect(() => {\n setKey((prevKey) => prevKey + 1);\n }, [theme]);\n\n // Semi-control interaction mode and selection state\n const [interactionMode, setInteractionMode] = useSemicontrolledState({\n isControlled: rawInteractionMode !== undefined,\n onChange: rawSetInteractionMode,\n state: rawInteractionMode ?? 'select',\n });\n const [selected, setSelected] = useSemicontrolledState({\n isControlled: rawSelected !== undefined,\n onChange: rawSetSelected,\n state: rawSelected ?? { nodeIds: [], relationshipIds: [] },\n });\n const [layout, setLayout] = useSemicontrolledState({\n isControlled: rawLayout !== undefined,\n onChange: rawSetLayout,\n state: rawLayout ?? 'd3Force',\n });\n\n const nvlGraph = useMemo(\n (): NvlGraph => mapToNvlGraph(rawNodes, rawRels),\n [rawNodes, rawRels],\n );\n\n const { nodesWithState, relsWithState, wrappedMouseEventCallbacks } =\n useManagedNodeState({\n gesture,\n highlightedNodeIds,\n highlightedRelationshipIds,\n interactionMode,\n mouseEventCallbacks,\n nvlGraph,\n selected,\n setInteractionMode,\n setSelected,\n });\n\n const [isSidePanelOpen, setIsSidePanelOpen] = useSemicontrolledState({\n isControlled: rawSidepanel?.isSidePanelOpen !== undefined,\n onChange: rawSidepanel?.setIsSidePanelOpen,\n state: rawSidepanel?.isSidePanelOpen ?? true,\n });\n const [sidePanelWidth, setSidePanelWidth] = useSemicontrolledState({\n isControlled: rawSidepanel?.sidePanelWidth !== undefined,\n onChange: rawSidepanel?.onSidePanelResize,\n state: rawSidepanel?.sidePanelWidth ?? 400,\n });\n\n const sidepanel = useMemo((): Sidepanel | null => {\n if (rawSidepanel === undefined) {\n return {\n children: <GraphVisualization.SingleSelectionSidePanelContents />,\n isSidePanelOpen,\n onSidePanelResize: setSidePanelWidth,\n setIsSidePanelOpen,\n sidePanelWidth,\n };\n }\n return rawSidepanel;\n }, [\n rawSidepanel,\n isSidePanelOpen,\n setIsSidePanelOpen,\n sidePanelWidth,\n setSidePanelWidth,\n ]);\n\n const Component: React.ElementType = as ?? 'div';\n return (\n <Component\n ref={ref}\n className={cx('ndl-graph-visualization-container', className)}\n style={style}\n {...htmlAttributes}\n >\n <GraphVisualizationContext.Provider\n value={{\n gesture,\n interactionMode,\n layout,\n nvlGraph,\n nvlInstance: nvlRef,\n selected,\n setGesture,\n setLayout,\n sidepanel,\n }}\n >\n <div className=\"ndl-graph-visualization\">\n <InteractiveNvlWrapper\n key={key}\n layout={layout}\n nodes={nodesWithState}\n rels={relsWithState}\n nvlOptions={{\n ...DEFAULT_NVL_OPTIONS,\n instanceId,\n styling: {\n defaultRelationshipColor: border.strongest,\n disabledItemColor: bg.strong,\n disabledItemFontColor: text.weakest,\n dropShadowColor: border.weak,\n selectedInnerBorderColor: bg.default,\n },\n ...nvlOptions,\n }}\n nvlCallbacks={{\n onLayoutComputing(isComputing) {\n if (!isComputing) {\n nvlRef.current?.fit(\n nvlRef.current.getNodes().map((neighbors) => neighbors.id),\n { noPan: true },\n );\n }\n },\n ...nvlCallbacks,\n }}\n mouseEventCallbacks={wrappedMouseEventCallbacks}\n ref={nvlRef}\n {...restProps}\n />\n {topLeftIsland !== null && (\n <InteractionIsland placement=\"top-left\">\n {topLeftIsland}\n </InteractionIsland>\n )}\n\n {topRightIsland !== null && (\n <InteractionIsland placement=\"top-right\">\n {topRightIsland}\n </InteractionIsland>\n )}\n\n {bottomLeftIsland !== null && (\n <InteractionIsland placement=\"bottom-left\">\n {bottomLeftIsland}\n </InteractionIsland>\n )}\n\n {bottomRightIsland !== null && (\n <InteractionIsland placement=\"bottom-right\">\n {bottomRightIsland}\n </InteractionIsland>\n )}\n </div>\n {sidepanel && <GraphVisualizationSidepanel sidepanel={sidepanel} />}\n </GraphVisualizationContext.Provider>\n </Component>\n );\n}\n\n/**\n * Zoom in button for use within a GraphVisualization component.\n *\n * @remarks\n * Increases zoom level by 1.3x\n *\n * @alpha\n */\nGraphVisualization.ZoomInButton = ZoomInButton;\n\n/**\n * Zoom out button for use within a GraphVisualization component.\n *\n * @remarks\n * Decreases zoom level by 0.7x\n *\n * @alpha\n */\nGraphVisualization.ZoomOutButton = ZoomOutButton;\n\n/**\n * Zoom to fit button for use within a GraphVisualization component.\n *\n * @remarks\n * Automatically adjusts zoom and pan to show all nodes and relationships\n *\n * @alpha\n */\nGraphVisualization.ZoomToFitButton = ZoomToFitButton;\n\n/**\n * Sidepanel toggle button for use within a GraphVisualization component.\n *\n * @remarks\n * Shows or hides the sidepanel containing node and relationship details.\n * Requires a sidepanel to be configured in the GraphVisualization component.\n *\n * @throws Error when used without a configured sidepanel\n *\n * @alpha\n */\nGraphVisualization.ToggleSidePanelButton = ToggleSidePanelButton;\n\n/**\n * Download button for use within a GraphVisualization component.\n *\n * @remarks\n * Opens a dropdown menu with download options. Currently supports PNG format.\n * Captures the current visualization state including zoom level.\n *\n * @alpha\n */\nGraphVisualization.DownloadButton = DownloadButton;\n\n/**\n * Box selection button for use within a GraphVisualization component.\n *\n * @remarks\n * Enables box selection mode where dragging creates a rectangular selection area.\n * Disabled unless the `setGesture` callback is passed.\n * Shows active state when enabled and supports keyboard shortcut 'B'.\n *\n * @alpha\n */\nGraphVisualization.BoxSelectButton = BoxSelectButton;\n\n/**\n * Lasso selection button for use within a GraphVisualization component.\n *\n * @remarks\n * Enables lasso selection mode where dragging creates a free-form selection area.\n * Disabled unless the `setGesture` callback is passed.\n * Shows active state when enabled and supports keyboard shortcut 'L'.\n *\n * @alpha\n */\nGraphVisualization.LassoSelectButton = LassoSelectButton;\n\n/**\n * Single node selection button for use within a GraphVisualization component.\n *\n * @remarks\n * Enables single selection mode where clicking selects individual nodes or relationships.\n * Shows active state when enabled and supports keyboard shortcut 'S'.\n *\n * @alpha\n */\nGraphVisualization.SingleSelectButton = SingleSelectButton;\n\n/**\n * Search button for use within a GraphVisualization component.\n *\n * @remarks\n * Enables search mode where clicking opens a search input for filtering nodes and relationships.\n *\n * @alpha\n */\nGraphVisualization.SearchButton = SearchButton;\n\n/**\n * Single node selection side panel for use within a GraphVisualization component.\n *\n * @remarks\n * Displays detailed information about the selected node or relationship.\n * Panel is automatically opened when a node or relationship is selected.\n * Also when user click on the show panel button in the top right corner.\n *\n * @alpha\n */\nGraphVisualization.SingleSelectionSidePanelContents =\n SingleSelectionSidepanelContents;\n\n/**\n * Layout selection button for use within a GraphVisualization component.\n *\n * @remarks\n * Opens a menu to select different graph layout algorithms.\n *\n * By default, the menu includes the **force-based** (`d3Force`) and\n * **hierarchical** layouts. Additional layouts can be enabled via configuration.\n *\n * @see {@link LayoutSelectOption} for the full set of layout options supported by NVL.\n *\n * @alpha\n */\nGraphVisualization.LayoutSelectButton = LayoutSelectButton;\n"]}
1
+ {"version":3,"file":"graph-visualization.js","sourceRoot":"","sources":["../../src/graph-visualization.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { tokens } from '@neo4j-ndl/base';\nimport { IconButtonArray, useNeedleTheme } from '@neo4j-ndl/react';\nimport type NVL from '@neo4j-nvl/base';\nimport { type Layout } from '@neo4j-nvl/base';\nimport {\n InteractiveNvlWrapper,\n type InteractiveNvlWrapperProps,\n} from '@neo4j-nvl/react';\nimport { default as cx } from 'classnames';\nimport React, { useEffect, useId, useMemo, useState } from 'react';\n\nimport {\n BoxSelectButton,\n DownloadButton,\n LassoSelectButton,\n LayoutSelectButton,\n SearchButton,\n SingleSelectButton,\n ToggleSidePanelButton,\n ZoomInButton,\n ZoomOutButton,\n ZoomToFitButton,\n} from './graph-visualization-buttons';\nimport {\n type Gesture,\n type GraphSelection,\n GraphVisualizationContext,\n type InteractionMode,\n type NeoNode,\n type NeoRel,\n type NvlGraph,\n type Sidepanel,\n} from './graph-visualization-context';\nimport { GraphVisualizationSidepanel } from './graph-visualization-sidepanel';\nimport { mapToNvlGraph } from './map-to-nvl-graph';\nimport { SingleSelectionSidepanelContents } from './sidepanel-components/single-selection-sidepanel-contents';\nimport { useManagedNodeState } from './use-managed-node-state';\nimport { useSemicontrolledState } from './use-semi-controlled-state';\n\ntype Placement = 'top-right' | 'bottom-right' | 'top-left' | 'bottom-left';\n\nconst PLACEMENTS: Record<Placement, string> = {\n 'bottom-left': 'ndl-graph-visualization-interaction-island ndl-bottom-left',\n 'bottom-right': 'ndl-graph-visualization-interaction-island ndl-bottom-right',\n 'top-left': 'ndl-graph-visualization-interaction-island ndl-top-left',\n 'top-right': 'ndl-graph-visualization-interaction-island ndl-top-right',\n};\n\nconst InteractionIsland = ({\n children,\n className,\n placement,\n}: {\n children: React.ReactNode;\n placement: Placement;\n className?: string;\n}) => {\n return <div className={cx(PLACEMENTS[placement], className)}>{children}</div>;\n};\n\nexport const DEFAULT_NVL_OPTIONS = {\n disableTelemetry: true,\n disableWebGL: true,\n maxZoom: 3,\n minZoom: 0.05,\n relationshipThreshold: 0.55,\n};\n\nconst DEFAULT_COMPONENTS = {\n bottomLeftIsland: null,\n bottomRightIsland: (\n <IconButtonArray orientation=\"vertical\" isFloating size=\"small\">\n <ZoomInButton /> <ZoomOutButton /> <ZoomToFitButton />\n </IconButtonArray>\n ),\n topLeftIsland: null,\n topRightIsland: (\n <div className=\"ndl-graph-visualization-default-download-group\">\n <DownloadButton /> <ToggleSidePanelButton />\n </div>\n ),\n};\n\nexport type GraphVisualizationProps<T extends React.ElementType = 'div'> = {\n nvlRef?: React.RefObject<NVL | null>;\n sidepanel?: Sidepanel | null;\n bottomLeftIsland?: React.ReactNode;\n bottomRightIsland?: React.ReactNode;\n topLeftIsland?: React.ReactNode;\n topRightIsland?: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n\n gesture?: Gesture;\n setGesture?: (gesture: Gesture) => void;\n selected?: GraphSelection;\n setSelected?: (newSelection: GraphSelection) => void;\n interactionMode?: InteractionMode;\n setInteractionMode?: (interactionMode: InteractionMode) => void;\n layout?: Layout;\n setLayout?: (layout: Layout) => void;\n\n nodes: NeoNode[];\n rels: NeoRel[];\n\n highlightedNodeIds?: string[];\n highlightedRelationshipIds?: string[];\n\n as?: T;\n ref?: React.ComponentPropsWithRef<T>['ref'];\n htmlAttributes?: React.HTMLAttributes<T>;\n} & InteractiveNvlWrapperProps;\n\n/**\n * A comprehensive graph visualization component for rendering Neo4j-style graphs with interactive features.\n *\n * @remarks\n * This component provides a complete graph visualization solution with built-in interaction modes,\n * selection handling, zoom controls, and an optional sidepanel. It wraps the NVL (Neo4j Visualization Library)\n * with additional UI controls and state management.\n *\n * The component supports various interaction modes including single selection, box selection, and lasso selection.\n * It also provides customizable UI islands for placing controls at different corners of the visualization.\n *\n * @example\n * Basic usage:\n * ```tsx\n * <GraphVisualization\n * nodes={nodes}\n * rels={relationships}\n * selected={selection}\n * setSelected={setSelection}\n * />\n * ```\n *\n * @example\n * With custom controls:\n * ```tsx\n * <GraphVisualization\n * nodes={nodes}\n * rels={relationships}\n * topRightIsland={<CustomControls />}\n * sidepanel={{\n * contents: <CustomSidepanel />,\n * isSidePanelOpen: true,\n * setIsSidePanelOpen: setSidepanelOpen\n * sidePanelWidth: 400,\n * onSidePanelResize: setSidepanelWidth,\n * }}\n * />\n * ```\n *\n * @example\n * With highlighting:\n * ```tsx\n * <GraphVisualization\n * nodes={nodes}\n * rels={relationships}\n * // undefined = no highlighting (default behavior)\n * // empty array = no search matches (dims all nodes)\n * // array with IDs = highlight only those items\n * highlightedNodeIds={searchResults.nodeIds}\n * highlightedRelationshipIds={searchResults.relationshipIds}\n * />\n * ```\n *\n * @param props - {@link GraphVisualizationProps}\n * @returns A React component that renders an interactive graph visualization\n *\n * @alpha\n */\nexport function GraphVisualization<T extends React.ElementType = 'div'>({\n nvlRef: rawNvlRef,\n nvlCallbacks,\n nvlOptions,\n sidepanel: rawSidepanel,\n nodes: rawNodes,\n rels: rawRels,\n highlightedNodeIds,\n highlightedRelationshipIds,\n topLeftIsland = DEFAULT_COMPONENTS.topLeftIsland,\n topRightIsland = DEFAULT_COMPONENTS.topRightIsland,\n bottomLeftIsland = DEFAULT_COMPONENTS.bottomLeftIsland,\n bottomRightIsland = DEFAULT_COMPONENTS.bottomRightIsland,\n gesture = 'single',\n setGesture,\n layout: rawLayout,\n setLayout: rawSetLayout,\n selected: rawSelected,\n setSelected: rawSetSelected,\n interactionMode: rawInteractionMode,\n setInteractionMode: rawSetInteractionMode,\n mouseEventCallbacks = {},\n className,\n style,\n htmlAttributes,\n ref,\n as,\n ...restProps\n}: GraphVisualizationProps<T>) {\n const nvlRef = useMemo(\n () => rawNvlRef ?? React.createRef<NVL>(),\n [rawNvlRef],\n );\n\n const instanceId = useId();\n\n // Respect NDL theme changes\n const { theme } = useNeedleTheme();\n const { bg, border, text } = tokens.theme[theme].color.neutral;\n\n // key required for nvl react responsiveness\n const [key, setKey] = useState(0);\n useEffect(() => {\n setKey((prevKey) => prevKey + 1);\n }, [theme]);\n\n // Semi-control interaction mode and selection state\n const [interactionMode, setInteractionMode] = useSemicontrolledState({\n isControlled: rawInteractionMode !== undefined,\n onChange: rawSetInteractionMode,\n state: rawInteractionMode ?? 'select',\n });\n const [selected, setSelected] = useSemicontrolledState({\n isControlled: rawSelected !== undefined,\n onChange: rawSetSelected,\n state: rawSelected ?? { nodeIds: [], relationshipIds: [] },\n });\n const [layout, setLayout] = useSemicontrolledState({\n isControlled: rawLayout !== undefined,\n onChange: rawSetLayout,\n state: rawLayout ?? 'd3Force',\n });\n\n const nvlGraph = useMemo(\n (): NvlGraph => mapToNvlGraph(rawNodes, rawRels),\n [rawNodes, rawRels],\n );\n\n const { nodesWithState, relsWithState, wrappedMouseEventCallbacks } =\n useManagedNodeState({\n gesture,\n highlightedNodeIds,\n highlightedRelationshipIds,\n interactionMode,\n mouseEventCallbacks,\n nvlGraph,\n selected,\n setInteractionMode,\n setSelected,\n });\n\n const [isSidePanelOpen, setIsSidePanelOpen] = useSemicontrolledState({\n isControlled: rawSidepanel?.isSidePanelOpen !== undefined,\n onChange: rawSidepanel?.setIsSidePanelOpen,\n state: rawSidepanel?.isSidePanelOpen ?? true,\n });\n const [sidePanelWidth, setSidePanelWidth] = useSemicontrolledState({\n isControlled: rawSidepanel?.sidePanelWidth !== undefined,\n onChange: rawSidepanel?.onSidePanelResize,\n state: rawSidepanel?.sidePanelWidth ?? 400,\n });\n\n const sidepanel = useMemo((): Sidepanel | null => {\n if (rawSidepanel === undefined) {\n return {\n children: <GraphVisualization.SingleSelectionSidePanelContents />,\n isSidePanelOpen,\n onSidePanelResize: setSidePanelWidth,\n setIsSidePanelOpen,\n sidePanelWidth,\n };\n }\n return rawSidepanel;\n }, [\n rawSidepanel,\n isSidePanelOpen,\n setIsSidePanelOpen,\n sidePanelWidth,\n setSidePanelWidth,\n ]);\n\n const Component: React.ElementType = as ?? 'div';\n return (\n <Component\n ref={ref}\n className={cx('ndl-graph-visualization-container', className)}\n style={style}\n {...htmlAttributes}\n >\n <GraphVisualizationContext.Provider\n value={{\n gesture,\n interactionMode,\n layout,\n nvlGraph,\n nvlInstance: nvlRef,\n selected,\n setGesture,\n setLayout,\n sidepanel,\n }}\n >\n <div className=\"ndl-graph-visualization\">\n <InteractiveNvlWrapper\n key={key}\n layout={layout}\n nodes={nodesWithState}\n rels={relsWithState}\n nvlOptions={{\n ...DEFAULT_NVL_OPTIONS,\n instanceId,\n styling: {\n defaultRelationshipColor: border.strongest,\n disabledItemColor: bg.strong,\n disabledItemFontColor: text.weakest,\n dropShadowColor: border.weak,\n selectedInnerBorderColor: bg.default,\n },\n ...nvlOptions,\n }}\n nvlCallbacks={{\n onLayoutComputing(isComputing) {\n if (!isComputing) {\n nvlRef.current?.fit(\n nvlRef.current.getNodes().map((neighbors) => neighbors.id),\n { noPan: true },\n );\n }\n },\n ...nvlCallbacks,\n }}\n mouseEventCallbacks={wrappedMouseEventCallbacks}\n ref={nvlRef}\n {...restProps}\n />\n {topLeftIsland !== null && (\n <InteractionIsland placement=\"top-left\">\n {topLeftIsland}\n </InteractionIsland>\n )}\n\n {topRightIsland !== null && (\n <InteractionIsland placement=\"top-right\">\n {topRightIsland}\n </InteractionIsland>\n )}\n\n {bottomLeftIsland !== null && (\n <InteractionIsland placement=\"bottom-left\">\n {bottomLeftIsland}\n </InteractionIsland>\n )}\n\n {bottomRightIsland !== null && (\n <InteractionIsland placement=\"bottom-right\">\n {bottomRightIsland}\n </InteractionIsland>\n )}\n </div>\n {sidepanel && <GraphVisualizationSidepanel sidepanel={sidepanel} />}\n </GraphVisualizationContext.Provider>\n </Component>\n );\n}\n\n/**\n * Zoom in button for use within a GraphVisualization component.\n *\n * @remarks\n * Increases zoom level by 1.3x\n *\n * @alpha\n */\nGraphVisualization.ZoomInButton = ZoomInButton;\n\n/**\n * Zoom out button for use within a GraphVisualization component.\n *\n * @remarks\n * Decreases zoom level by 0.7x\n *\n * @alpha\n */\nGraphVisualization.ZoomOutButton = ZoomOutButton;\n\n/**\n * Zoom to fit button for use within a GraphVisualization component.\n *\n * @remarks\n * Automatically adjusts zoom and pan to show all nodes and relationships\n *\n * @alpha\n */\nGraphVisualization.ZoomToFitButton = ZoomToFitButton;\n\n/**\n * Sidepanel toggle button for use within a GraphVisualization component.\n *\n * @remarks\n * Shows or hides the sidepanel containing node and relationship details.\n * Requires a sidepanel to be configured in the GraphVisualization component.\n *\n * @throws Error when used without a configured sidepanel\n *\n * @alpha\n */\nGraphVisualization.ToggleSidePanelButton = ToggleSidePanelButton;\n\n/**\n * Download button for use within a GraphVisualization component.\n *\n * @remarks\n * Opens a dropdown menu with download options. Currently supports PNG format.\n * Captures the current visualization state including zoom level.\n *\n * @alpha\n */\nGraphVisualization.DownloadButton = DownloadButton;\n\n/**\n * Box selection button for use within a GraphVisualization component.\n *\n * @remarks\n * Enables box selection mode where dragging creates a rectangular selection area.\n * Disabled unless the `setGesture` callback is passed.\n * Shows active state when enabled and supports keyboard shortcut 'B'.\n *\n * @alpha\n */\nGraphVisualization.BoxSelectButton = BoxSelectButton;\n\n/**\n * Lasso selection button for use within a GraphVisualization component.\n *\n * @remarks\n * Enables lasso selection mode where dragging creates a free-form selection area.\n * Disabled unless the `setGesture` callback is passed.\n * Shows active state when enabled and supports keyboard shortcut 'L'.\n *\n * @alpha\n */\nGraphVisualization.LassoSelectButton = LassoSelectButton;\n\n/**\n * Single node selection button for use within a GraphVisualization component.\n *\n * @remarks\n * Enables single selection mode where clicking selects individual nodes or relationships.\n * Shows active state when enabled and supports keyboard shortcut 'S'.\n *\n * @alpha\n */\nGraphVisualization.SingleSelectButton = SingleSelectButton;\n\n/**\n * Search button for use within a GraphVisualization component.\n *\n * @remarks\n * Enables search mode where clicking opens a search input for filtering nodes and relationships.\n *\n * @alpha\n */\nGraphVisualization.SearchButton = SearchButton;\n\n/**\n * Single node selection side panel for use within a GraphVisualization component.\n *\n * @remarks\n * Displays detailed information about the selected node or relationship.\n * Panel is automatically opened when a node or relationship is selected.\n * Also when user click on the show panel button in the top right corner.\n *\n * @alpha\n */\nGraphVisualization.SingleSelectionSidePanelContents =\n SingleSelectionSidepanelContents;\n\n/**\n * Layout selection button for use within a GraphVisualization component.\n *\n * @remarks\n * Opens a menu to select different graph layout algorithms.\n *\n * By default, the menu includes the **force-based** (`d3Force`) and\n * **hierarchical** layouts. Additional layouts can be enabled via configuration.\n *\n * @see {@link LayoutSelectOption} for the full set of layout options supported by NVL.\n *\n * @alpha\n */\nGraphVisualization.LayoutSelectButton = LayoutSelectButton;\n"]}
package/lib/cjs/stories/graph-visualization-maximalist.story.js CHANGED
@@ -93,7 +93,7 @@ const Component = () => {
93
93
  const [gesture, setGesture] = (0, react_2.useState)('box');
94
94
  // Hierarchical layout not working properly with storybook
95
95
  const [layout, setLayout] = (0, react_2.useState)('hierarchical');
96
- return ((0, jsx_runtime_1.jsx)("div", { style: { height: '600px' }, children: (0, jsx_runtime_1.jsx)(graph_visualization_1.GraphVisualization, { gesture: gesture, setGesture: setGesture, layout: layout, setLayout: setLayout, bottomLeftIsland: (0, jsx_runtime_1.jsxs)(react_1.IconButtonArray, { children: [(0, jsx_runtime_1.jsx)(graph_visualization_1.GraphVisualization.LassoSelectButton, {}), (0, jsx_runtime_1.jsx)(graph_visualization_1.GraphVisualization.SingleSelectButton, {}), (0, jsx_runtime_1.jsx)(graph_visualization_1.GraphVisualization.BoxSelectButton, {})] }), bottomRightIsland: (0, jsx_runtime_1.jsxs)(react_1.IconButtonArray, { children: [(0, jsx_runtime_1.jsx)(graph_visualization_1.GraphVisualization.LayoutSelectButton, { menuPlacement: "top-end-bottom-end" }), (0, jsx_runtime_1.jsx)(react_1.Divider, { orientation: "vertical" }), (0, jsx_runtime_1.jsx)(graph_visualization_1.GraphVisualization.ZoomInButton, {}), (0, jsx_runtime_1.jsx)(graph_visualization_1.GraphVisualization.ZoomOutButton, {}), (0, jsx_runtime_1.jsx)(graph_visualization_1.GraphVisualization.ZoomToFitButton, {})] }), nodes: nodes, rels: rels, sidepanel: {
96
+ return ((0, jsx_runtime_1.jsx)("div", { style: { height: '600px' }, children: (0, jsx_runtime_1.jsx)(graph_visualization_1.GraphVisualization, { gesture: gesture, setGesture: setGesture, layout: layout, setLayout: setLayout, bottomLeftIsland: (0, jsx_runtime_1.jsxs)(react_1.IconButtonArray, { size: "small", children: [(0, jsx_runtime_1.jsx)(graph_visualization_1.GraphVisualization.LassoSelectButton, {}), (0, jsx_runtime_1.jsx)(graph_visualization_1.GraphVisualization.SingleSelectButton, {}), (0, jsx_runtime_1.jsx)(graph_visualization_1.GraphVisualization.BoxSelectButton, {})] }), bottomRightIsland: (0, jsx_runtime_1.jsxs)(react_1.IconButtonArray, { size: "medium", children: [(0, jsx_runtime_1.jsx)(graph_visualization_1.GraphVisualization.LayoutSelectButton, { menuPlacement: "top-end-bottom-end" }), (0, jsx_runtime_1.jsx)(react_1.Divider, { orientation: "vertical" }), (0, jsx_runtime_1.jsx)(graph_visualization_1.GraphVisualization.ZoomInButton, {}), (0, jsx_runtime_1.jsx)(graph_visualization_1.GraphVisualization.ZoomOutButton, {}), (0, jsx_runtime_1.jsx)(graph_visualization_1.GraphVisualization.ZoomToFitButton, {})] }), nodes: nodes, rels: rels, sidepanel: {
97
97
  children: (0, jsx_runtime_1.jsx)(graph_visualization_1.GraphVisualization.SingleSelectionSidePanelContents, {}),
98
98
  isSidePanelOpen: isOpen,
99
99
  onSidePanelResize: () => {
package/lib/cjs/stories/graph-visualization-maximalist.story.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"graph-visualization-maximalist.story.js","sourceRoot":"","sources":["../../../src/stories/graph-visualization-maximalist.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { Divider, IconButtonArray } from '@neo4j-ndl/react';\nimport { type Layout } from '@neo4j-nvl/base';\nimport { useState } from 'react';\n\nimport { GraphVisualization } from '../graph-visualization';\nimport { type Gesture, type NeoNode } from '../graph-visualization-context';\n\nconst nodes: NeoNode[] = [\n {\n id: 'node1',\n labels: ['Pokemon', 'Legendary'],\n properties: {\n durationToWinBattle: {\n stringified: 'P0M0DT0.000000001S',\n type: 'duration',\n },\n favoriteColors: {\n stringified: '[\"red\", \"blue\", \"green\"]',\n type: 'list',\n },\n getsBeatBy: {\n stringified: 'null',\n type: 'null',\n },\n isAwesome: {\n stringified: 'true',\n type: 'boolean',\n },\n location: {\n stringified: 'point({srid:1, x:100, y:200, z:300})',\n type: 'point',\n },\n name: {\n stringified: '\"Rayquaza\"',\n type: 'string',\n },\n weight: {\n stringified: '392.0',\n type: 'float',\n },\n },\n },\n {\n id: 'node2',\n labels: ['Type'],\n properties: { name: { stringified: 'Dragon', type: 'String' } },\n },\n {\n id: 'node3',\n labels: ['Type'],\n properties: { name: { stringified: 'Flying', type: 'String' } },\n },\n];\n\nconst rels = [\n {\n from: 'node1',\n id: 'rel1',\n properties: {},\n to: 'node2',\n type: 'HAS_TYPE',\n },\n {\n from: 'node1',\n id: 'rel2',\n properties: {},\n to: 'node3',\n type: 'HAS_TYPE',\n },\n];\n\nexport const containerClasses =\n 'n-w-full n-border-neutral-border-weak n-mx-2 n-rounded-lg n-border';\n\nconst Component = () => {\n const [isOpen, setIsOpen] = useState(true);\n const [gesture, setGesture] = useState<Gesture>('box');\n // Hierarchical layout not working properly with storybook\n const [layout, setLayout] = useState<Layout>('hierarchical');\n\n return (\n <div style={{ height: '600px' }}>\n <GraphVisualization\n gesture={gesture}\n setGesture={setGesture}\n layout={layout}\n setLayout={setLayout}\n bottomLeftIsland={\n <IconButtonArray>\n <GraphVisualization.LassoSelectButton />\n <GraphVisualization.SingleSelectButton />\n <GraphVisualization.BoxSelectButton />\n </IconButtonArray>\n }\n bottomRightIsland={\n <IconButtonArray>\n <GraphVisualization.LayoutSelectButton menuPlacement=\"top-end-bottom-end\" />\n <Divider orientation=\"vertical\" />\n <GraphVisualization.ZoomInButton />\n <GraphVisualization.ZoomOutButton />\n <GraphVisualization.ZoomToFitButton />\n </IconButtonArray>\n }\n nodes={nodes}\n rels={rels}\n sidepanel={{\n children: <GraphVisualization.SingleSelectionSidePanelContents />,\n isSidePanelOpen: isOpen,\n onSidePanelResize: () => {\n /* no op */\n },\n setIsSidePanelOpen: setIsOpen,\n sidePanelWidth: 300,\n }}\n topLeftIsland={<GraphVisualization.DownloadButton />}\n topRightIsland={<GraphVisualization.ToggleSidePanelButton />}\n className={containerClasses}\n />\n </div>\n );\n};\n\nexport default Component;\n"]}
1
+ {"version":3,"file":"graph-visualization-maximalist.story.js","sourceRoot":"","sources":["../../../src/stories/graph-visualization-maximalist.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { Divider, IconButtonArray } from '@neo4j-ndl/react';\nimport { type Layout } from '@neo4j-nvl/base';\nimport { useState } from 'react';\n\nimport { GraphVisualization } from '../graph-visualization';\nimport { type Gesture, type NeoNode } from '../graph-visualization-context';\n\nconst nodes: NeoNode[] = [\n {\n id: 'node1',\n labels: ['Pokemon', 'Legendary'],\n properties: {\n durationToWinBattle: {\n stringified: 'P0M0DT0.000000001S',\n type: 'duration',\n },\n favoriteColors: {\n stringified: '[\"red\", \"blue\", \"green\"]',\n type: 'list',\n },\n getsBeatBy: {\n stringified: 'null',\n type: 'null',\n },\n isAwesome: {\n stringified: 'true',\n type: 'boolean',\n },\n location: {\n stringified: 'point({srid:1, x:100, y:200, z:300})',\n type: 'point',\n },\n name: {\n stringified: '\"Rayquaza\"',\n type: 'string',\n },\n weight: {\n stringified: '392.0',\n type: 'float',\n },\n },\n },\n {\n id: 'node2',\n labels: ['Type'],\n properties: { name: { stringified: 'Dragon', type: 'String' } },\n },\n {\n id: 'node3',\n labels: ['Type'],\n properties: { name: { stringified: 'Flying', type: 'String' } },\n },\n];\n\nconst rels = [\n {\n from: 'node1',\n id: 'rel1',\n properties: {},\n to: 'node2',\n type: 'HAS_TYPE',\n },\n {\n from: 'node1',\n id: 'rel2',\n properties: {},\n to: 'node3',\n type: 'HAS_TYPE',\n },\n];\n\nexport const containerClasses =\n 'n-w-full n-border-neutral-border-weak n-mx-2 n-rounded-lg n-border';\n\nconst Component = () => {\n const [isOpen, setIsOpen] = useState(true);\n const [gesture, setGesture] = useState<Gesture>('box');\n // Hierarchical layout not working properly with storybook\n const [layout, setLayout] = useState<Layout>('hierarchical');\n\n return (\n <div style={{ height: '600px' }}>\n <GraphVisualization\n gesture={gesture}\n setGesture={setGesture}\n layout={layout}\n setLayout={setLayout}\n bottomLeftIsland={\n <IconButtonArray size=\"small\">\n <GraphVisualization.LassoSelectButton />\n <GraphVisualization.SingleSelectButton />\n <GraphVisualization.BoxSelectButton />\n </IconButtonArray>\n }\n bottomRightIsland={\n <IconButtonArray size=\"medium\">\n <GraphVisualization.LayoutSelectButton menuPlacement=\"top-end-bottom-end\" />\n <Divider orientation=\"vertical\" />\n <GraphVisualization.ZoomInButton />\n <GraphVisualization.ZoomOutButton />\n <GraphVisualization.ZoomToFitButton />\n </IconButtonArray>\n }\n nodes={nodes}\n rels={rels}\n sidepanel={{\n children: <GraphVisualization.SingleSelectionSidePanelContents />,\n isSidePanelOpen: isOpen,\n onSidePanelResize: () => {\n /* no op */\n },\n setIsSidePanelOpen: setIsOpen,\n sidePanelWidth: 300,\n }}\n topLeftIsland={<GraphVisualization.DownloadButton />}\n topRightIsland={<GraphVisualization.ToggleSidePanelButton />}\n className={containerClasses}\n />\n </div>\n );\n};\n\nexport default Component;\n"]}
package/lib/esm/graph-visualization.js CHANGED
@@ -60,7 +60,7 @@ export const DEFAULT_NVL_OPTIONS = {
60
60
  };
61
61
  const DEFAULT_COMPONENTS = {
62
62
  bottomLeftIsland: null,
63
- bottomRightIsland: (_jsxs(IconButtonArray, { orientation: "vertical", isFloating: true, children: [_jsx(ZoomInButton, {}), " ", _jsx(ZoomOutButton, {}), " ", _jsx(ZoomToFitButton, {})] })),
63
+ bottomRightIsland: (_jsxs(IconButtonArray, { orientation: "vertical", isFloating: true, size: "small", children: [_jsx(ZoomInButton, {}), " ", _jsx(ZoomOutButton, {}), " ", _jsx(ZoomToFitButton, {})] })),
64
64
  topLeftIsland: null,
65
65
  topRightIsland: (_jsxs("div", { className: "ndl-graph-visualization-default-download-group", children: [_jsx(DownloadButton, {}), " ", _jsx(ToggleSidePanelButton, {})] })),
66
66
  };
package/lib/esm/graph-visualization.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"graph-visualization.js","sourceRoot":"","sources":["../../src/graph-visualization.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { tokens } from '@neo4j-ndl/base';\nimport { IconButtonArray, useNeedleTheme } from '@neo4j-ndl/react';\nimport type NVL from '@neo4j-nvl/base';\nimport { type Layout } from '@neo4j-nvl/base';\nimport {\n InteractiveNvlWrapper,\n type InteractiveNvlWrapperProps,\n} from '@neo4j-nvl/react';\nimport { default as cx } from 'classnames';\nimport React, { useEffect, useId, useMemo, useState } from 'react';\n\nimport {\n BoxSelectButton,\n DownloadButton,\n LassoSelectButton,\n LayoutSelectButton,\n SearchButton,\n SingleSelectButton,\n ToggleSidePanelButton,\n ZoomInButton,\n ZoomOutButton,\n ZoomToFitButton,\n} from './graph-visualization-buttons';\nimport {\n type Gesture,\n type GraphSelection,\n GraphVisualizationContext,\n type InteractionMode,\n type NeoNode,\n type NeoRel,\n type NvlGraph,\n type Sidepanel,\n} from './graph-visualization-context';\nimport { GraphVisualizationSidepanel } from './graph-visualization-sidepanel';\nimport { mapToNvlGraph } from './map-to-nvl-graph';\nimport { SingleSelectionSidepanelContents } from './sidepanel-components/single-selection-sidepanel-contents';\nimport { useManagedNodeState } from './use-managed-node-state';\nimport { useSemicontrolledState } from './use-semi-controlled-state';\n\ntype Placement = 'top-right' | 'bottom-right' | 'top-left' | 'bottom-left';\n\nconst PLACEMENTS: Record<Placement, string> = {\n 'bottom-left': 'ndl-graph-visualization-interaction-island ndl-bottom-left',\n 'bottom-right': 'ndl-graph-visualization-interaction-island ndl-bottom-right',\n 'top-left': 'ndl-graph-visualization-interaction-island ndl-top-left',\n 'top-right': 'ndl-graph-visualization-interaction-island ndl-top-right',\n};\n\nconst InteractionIsland = ({\n children,\n className,\n placement,\n}: {\n children: React.ReactNode;\n placement: Placement;\n className?: string;\n}) => {\n return <div className={cx(PLACEMENTS[placement], className)}>{children}</div>;\n};\n\nexport const DEFAULT_NVL_OPTIONS = {\n disableTelemetry: true,\n disableWebGL: true,\n maxZoom: 3,\n minZoom: 0.05,\n relationshipThreshold: 0.55,\n};\n\nconst DEFAULT_COMPONENTS = {\n bottomLeftIsland: null,\n bottomRightIsland: (\n <IconButtonArray orientation=\"vertical\" isFloating>\n <ZoomInButton /> <ZoomOutButton /> <ZoomToFitButton />\n </IconButtonArray>\n ),\n topLeftIsland: null,\n topRightIsland: (\n <div className=\"ndl-graph-visualization-default-download-group\">\n <DownloadButton /> <ToggleSidePanelButton />\n </div>\n ),\n};\n\nexport type GraphVisualizationProps<T extends React.ElementType = 'div'> = {\n nvlRef?: React.RefObject<NVL | null>;\n sidepanel?: Sidepanel | null;\n bottomLeftIsland?: React.ReactNode;\n bottomRightIsland?: React.ReactNode;\n topLeftIsland?: React.ReactNode;\n topRightIsland?: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n\n gesture?: Gesture;\n setGesture?: (gesture: Gesture) => void;\n selected?: GraphSelection;\n setSelected?: (newSelection: GraphSelection) => void;\n interactionMode?: InteractionMode;\n setInteractionMode?: (interactionMode: InteractionMode) => void;\n layout?: Layout;\n setLayout?: (layout: Layout) => void;\n\n nodes: NeoNode[];\n rels: NeoRel[];\n\n highlightedNodeIds?: string[];\n highlightedRelationshipIds?: string[];\n\n as?: T;\n ref?: React.ComponentPropsWithRef<T>['ref'];\n htmlAttributes?: React.HTMLAttributes<T>;\n} & InteractiveNvlWrapperProps;\n\n/**\n * A comprehensive graph visualization component for rendering Neo4j-style graphs with interactive features.\n *\n * @remarks\n * This component provides a complete graph visualization solution with built-in interaction modes,\n * selection handling, zoom controls, and an optional sidepanel. It wraps the NVL (Neo4j Visualization Library)\n * with additional UI controls and state management.\n *\n * The component supports various interaction modes including single selection, box selection, and lasso selection.\n * It also provides customizable UI islands for placing controls at different corners of the visualization.\n *\n * @example\n * Basic usage:\n * ```tsx\n * <GraphVisualization\n * nodes={nodes}\n * rels={relationships}\n * selected={selection}\n * setSelected={setSelection}\n * />\n * ```\n *\n * @example\n * With custom controls:\n * ```tsx\n * <GraphVisualization\n * nodes={nodes}\n * rels={relationships}\n * topRightIsland={<CustomControls />}\n * sidepanel={{\n * contents: <CustomSidepanel />,\n * isSidePanelOpen: true,\n * setIsSidePanelOpen: setSidepanelOpen\n * sidePanelWidth: 400,\n * onSidePanelResize: setSidepanelWidth,\n * }}\n * />\n * ```\n *\n * @example\n * With highlighting:\n * ```tsx\n * <GraphVisualization\n * nodes={nodes}\n * rels={relationships}\n * // undefined = no highlighting (default behavior)\n * // empty array = no search matches (dims all nodes)\n * // array with IDs = highlight only those items\n * highlightedNodeIds={searchResults.nodeIds}\n * highlightedRelationshipIds={searchResults.relationshipIds}\n * />\n * ```\n *\n * @param props - {@link GraphVisualizationProps}\n * @returns A React component that renders an interactive graph visualization\n *\n * @alpha\n */\nexport function GraphVisualization<T extends React.ElementType = 'div'>({\n nvlRef: rawNvlRef,\n nvlCallbacks,\n nvlOptions,\n sidepanel: rawSidepanel,\n nodes: rawNodes,\n rels: rawRels,\n highlightedNodeIds,\n highlightedRelationshipIds,\n topLeftIsland = DEFAULT_COMPONENTS.topLeftIsland,\n topRightIsland = DEFAULT_COMPONENTS.topRightIsland,\n bottomLeftIsland = DEFAULT_COMPONENTS.bottomLeftIsland,\n bottomRightIsland = DEFAULT_COMPONENTS.bottomRightIsland,\n gesture = 'single',\n setGesture,\n layout: rawLayout,\n setLayout: rawSetLayout,\n selected: rawSelected,\n setSelected: rawSetSelected,\n interactionMode: rawInteractionMode,\n setInteractionMode: rawSetInteractionMode,\n mouseEventCallbacks = {},\n className,\n style,\n htmlAttributes,\n ref,\n as,\n ...restProps\n}: GraphVisualizationProps<T>) {\n const nvlRef = useMemo(\n () => rawNvlRef ?? React.createRef<NVL>(),\n [rawNvlRef],\n );\n\n const instanceId = useId();\n\n // Respect NDL theme changes\n const { theme } = useNeedleTheme();\n const { bg, border, text } = tokens.theme[theme].color.neutral;\n\n // key required for nvl react responsiveness\n const [key, setKey] = useState(0);\n useEffect(() => {\n setKey((prevKey) => prevKey + 1);\n }, [theme]);\n\n // Semi-control interaction mode and selection state\n const [interactionMode, setInteractionMode] = useSemicontrolledState({\n isControlled: rawInteractionMode !== undefined,\n onChange: rawSetInteractionMode,\n state: rawInteractionMode ?? 'select',\n });\n const [selected, setSelected] = useSemicontrolledState({\n isControlled: rawSelected !== undefined,\n onChange: rawSetSelected,\n state: rawSelected ?? { nodeIds: [], relationshipIds: [] },\n });\n const [layout, setLayout] = useSemicontrolledState({\n isControlled: rawLayout !== undefined,\n onChange: rawSetLayout,\n state: rawLayout ?? 'd3Force',\n });\n\n const nvlGraph = useMemo(\n (): NvlGraph => mapToNvlGraph(rawNodes, rawRels),\n [rawNodes, rawRels],\n );\n\n const { nodesWithState, relsWithState, wrappedMouseEventCallbacks } =\n useManagedNodeState({\n gesture,\n highlightedNodeIds,\n highlightedRelationshipIds,\n interactionMode,\n mouseEventCallbacks,\n nvlGraph,\n selected,\n setInteractionMode,\n setSelected,\n });\n\n const [isSidePanelOpen, setIsSidePanelOpen] = useSemicontrolledState({\n isControlled: rawSidepanel?.isSidePanelOpen !== undefined,\n onChange: rawSidepanel?.setIsSidePanelOpen,\n state: rawSidepanel?.isSidePanelOpen ?? true,\n });\n const [sidePanelWidth, setSidePanelWidth] = useSemicontrolledState({\n isControlled: rawSidepanel?.sidePanelWidth !== undefined,\n onChange: rawSidepanel?.onSidePanelResize,\n state: rawSidepanel?.sidePanelWidth ?? 400,\n });\n\n const sidepanel = useMemo((): Sidepanel | null => {\n if (rawSidepanel === undefined) {\n return {\n children: <GraphVisualization.SingleSelectionSidePanelContents />,\n isSidePanelOpen,\n onSidePanelResize: setSidePanelWidth,\n setIsSidePanelOpen,\n sidePanelWidth,\n };\n }\n return rawSidepanel;\n }, [\n rawSidepanel,\n isSidePanelOpen,\n setIsSidePanelOpen,\n sidePanelWidth,\n setSidePanelWidth,\n ]);\n\n const Component: React.ElementType = as ?? 'div';\n return (\n <Component\n ref={ref}\n className={cx('ndl-graph-visualization-container', className)}\n style={style}\n {...htmlAttributes}\n >\n <GraphVisualizationContext.Provider\n value={{\n gesture,\n interactionMode,\n layout,\n nvlGraph,\n nvlInstance: nvlRef,\n selected,\n setGesture,\n setLayout,\n sidepanel,\n }}\n >\n <div className=\"ndl-graph-visualization\">\n <InteractiveNvlWrapper\n key={key}\n layout={layout}\n nodes={nodesWithState}\n rels={relsWithState}\n nvlOptions={{\n ...DEFAULT_NVL_OPTIONS,\n instanceId,\n styling: {\n defaultRelationshipColor: border.strongest,\n disabledItemColor: bg.strong,\n disabledItemFontColor: text.weakest,\n dropShadowColor: border.weak,\n selectedInnerBorderColor: bg.default,\n },\n ...nvlOptions,\n }}\n nvlCallbacks={{\n onLayoutComputing(isComputing) {\n if (!isComputing) {\n nvlRef.current?.fit(\n nvlRef.current.getNodes().map((neighbors) => neighbors.id),\n { noPan: true },\n );\n }\n },\n ...nvlCallbacks,\n }}\n mouseEventCallbacks={wrappedMouseEventCallbacks}\n ref={nvlRef}\n {...restProps}\n />\n {topLeftIsland !== null && (\n <InteractionIsland placement=\"top-left\">\n {topLeftIsland}\n </InteractionIsland>\n )}\n\n {topRightIsland !== null && (\n <InteractionIsland placement=\"top-right\">\n {topRightIsland}\n </InteractionIsland>\n )}\n\n {bottomLeftIsland !== null && (\n <InteractionIsland placement=\"bottom-left\">\n {bottomLeftIsland}\n </InteractionIsland>\n )}\n\n {bottomRightIsland !== null && (\n <InteractionIsland placement=\"bottom-right\">\n {bottomRightIsland}\n </InteractionIsland>\n )}\n </div>\n {sidepanel && <GraphVisualizationSidepanel sidepanel={sidepanel} />}\n </GraphVisualizationContext.Provider>\n </Component>\n );\n}\n\n/**\n * Zoom in button for use within a GraphVisualization component.\n *\n * @remarks\n * Increases zoom level by 1.3x\n *\n * @alpha\n */\nGraphVisualization.ZoomInButton = ZoomInButton;\n\n/**\n * Zoom out button for use within a GraphVisualization component.\n *\n * @remarks\n * Decreases zoom level by 0.7x\n *\n * @alpha\n */\nGraphVisualization.ZoomOutButton = ZoomOutButton;\n\n/**\n * Zoom to fit button for use within a GraphVisualization component.\n *\n * @remarks\n * Automatically adjusts zoom and pan to show all nodes and relationships\n *\n * @alpha\n */\nGraphVisualization.ZoomToFitButton = ZoomToFitButton;\n\n/**\n * Sidepanel toggle button for use within a GraphVisualization component.\n *\n * @remarks\n * Shows or hides the sidepanel containing node and relationship details.\n * Requires a sidepanel to be configured in the GraphVisualization component.\n *\n * @throws Error when used without a configured sidepanel\n *\n * @alpha\n */\nGraphVisualization.ToggleSidePanelButton = ToggleSidePanelButton;\n\n/**\n * Download button for use within a GraphVisualization component.\n *\n * @remarks\n * Opens a dropdown menu with download options. Currently supports PNG format.\n * Captures the current visualization state including zoom level.\n *\n * @alpha\n */\nGraphVisualization.DownloadButton = DownloadButton;\n\n/**\n * Box selection button for use within a GraphVisualization component.\n *\n * @remarks\n * Enables box selection mode where dragging creates a rectangular selection area.\n * Disabled unless the `setGesture` callback is passed.\n * Shows active state when enabled and supports keyboard shortcut 'B'.\n *\n * @alpha\n */\nGraphVisualization.BoxSelectButton = BoxSelectButton;\n\n/**\n * Lasso selection button for use within a GraphVisualization component.\n *\n * @remarks\n * Enables lasso selection mode where dragging creates a free-form selection area.\n * Disabled unless the `setGesture` callback is passed.\n * Shows active state when enabled and supports keyboard shortcut 'L'.\n *\n * @alpha\n */\nGraphVisualization.LassoSelectButton = LassoSelectButton;\n\n/**\n * Single node selection button for use within a GraphVisualization component.\n *\n * @remarks\n * Enables single selection mode where clicking selects individual nodes or relationships.\n * Shows active state when enabled and supports keyboard shortcut 'S'.\n *\n * @alpha\n */\nGraphVisualization.SingleSelectButton = SingleSelectButton;\n\n/**\n * Search button for use within a GraphVisualization component.\n *\n * @remarks\n * Enables search mode where clicking opens a search input for filtering nodes and relationships.\n *\n * @alpha\n */\nGraphVisualization.SearchButton = SearchButton;\n\n/**\n * Single node selection side panel for use within a GraphVisualization component.\n *\n * @remarks\n * Displays detailed information about the selected node or relationship.\n * Panel is automatically opened when a node or relationship is selected.\n * Also when user click on the show panel button in the top right corner.\n *\n * @alpha\n */\nGraphVisualization.SingleSelectionSidePanelContents =\n SingleSelectionSidepanelContents;\n\n/**\n * Layout selection button for use within a GraphVisualization component.\n *\n * @remarks\n * Opens a menu to select different graph layout algorithms.\n *\n * By default, the menu includes the **force-based** (`d3Force`) and\n * **hierarchical** layouts. Additional layouts can be enabled via configuration.\n *\n * @see {@link LayoutSelectOption} for the full set of layout options supported by NVL.\n *\n * @alpha\n */\nGraphVisualization.LayoutSelectButton = LayoutSelectButton;\n"]}
1
+ {"version":3,"file":"graph-visualization.js","sourceRoot":"","sources":["../../src/graph-visualization.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { tokens } from '@neo4j-ndl/base';\nimport { IconButtonArray, useNeedleTheme } from '@neo4j-ndl/react';\nimport type NVL from '@neo4j-nvl/base';\nimport { type Layout } from '@neo4j-nvl/base';\nimport {\n InteractiveNvlWrapper,\n type InteractiveNvlWrapperProps,\n} from '@neo4j-nvl/react';\nimport { default as cx } from 'classnames';\nimport React, { useEffect, useId, useMemo, useState } from 'react';\n\nimport {\n BoxSelectButton,\n DownloadButton,\n LassoSelectButton,\n LayoutSelectButton,\n SearchButton,\n SingleSelectButton,\n ToggleSidePanelButton,\n ZoomInButton,\n ZoomOutButton,\n ZoomToFitButton,\n} from './graph-visualization-buttons';\nimport {\n type Gesture,\n type GraphSelection,\n GraphVisualizationContext,\n type InteractionMode,\n type NeoNode,\n type NeoRel,\n type NvlGraph,\n type Sidepanel,\n} from './graph-visualization-context';\nimport { GraphVisualizationSidepanel } from './graph-visualization-sidepanel';\nimport { mapToNvlGraph } from './map-to-nvl-graph';\nimport { SingleSelectionSidepanelContents } from './sidepanel-components/single-selection-sidepanel-contents';\nimport { useManagedNodeState } from './use-managed-node-state';\nimport { useSemicontrolledState } from './use-semi-controlled-state';\n\ntype Placement = 'top-right' | 'bottom-right' | 'top-left' | 'bottom-left';\n\nconst PLACEMENTS: Record<Placement, string> = {\n 'bottom-left': 'ndl-graph-visualization-interaction-island ndl-bottom-left',\n 'bottom-right': 'ndl-graph-visualization-interaction-island ndl-bottom-right',\n 'top-left': 'ndl-graph-visualization-interaction-island ndl-top-left',\n 'top-right': 'ndl-graph-visualization-interaction-island ndl-top-right',\n};\n\nconst InteractionIsland = ({\n children,\n className,\n placement,\n}: {\n children: React.ReactNode;\n placement: Placement;\n className?: string;\n}) => {\n return <div className={cx(PLACEMENTS[placement], className)}>{children}</div>;\n};\n\nexport const DEFAULT_NVL_OPTIONS = {\n disableTelemetry: true,\n disableWebGL: true,\n maxZoom: 3,\n minZoom: 0.05,\n relationshipThreshold: 0.55,\n};\n\nconst DEFAULT_COMPONENTS = {\n bottomLeftIsland: null,\n bottomRightIsland: (\n <IconButtonArray orientation=\"vertical\" isFloating size=\"small\">\n <ZoomInButton /> <ZoomOutButton /> <ZoomToFitButton />\n </IconButtonArray>\n ),\n topLeftIsland: null,\n topRightIsland: (\n <div className=\"ndl-graph-visualization-default-download-group\">\n <DownloadButton /> <ToggleSidePanelButton />\n </div>\n ),\n};\n\nexport type GraphVisualizationProps<T extends React.ElementType = 'div'> = {\n nvlRef?: React.RefObject<NVL | null>;\n sidepanel?: Sidepanel | null;\n bottomLeftIsland?: React.ReactNode;\n bottomRightIsland?: React.ReactNode;\n topLeftIsland?: React.ReactNode;\n topRightIsland?: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n\n gesture?: Gesture;\n setGesture?: (gesture: Gesture) => void;\n selected?: GraphSelection;\n setSelected?: (newSelection: GraphSelection) => void;\n interactionMode?: InteractionMode;\n setInteractionMode?: (interactionMode: InteractionMode) => void;\n layout?: Layout;\n setLayout?: (layout: Layout) => void;\n\n nodes: NeoNode[];\n rels: NeoRel[];\n\n highlightedNodeIds?: string[];\n highlightedRelationshipIds?: string[];\n\n as?: T;\n ref?: React.ComponentPropsWithRef<T>['ref'];\n htmlAttributes?: React.HTMLAttributes<T>;\n} & InteractiveNvlWrapperProps;\n\n/**\n * A comprehensive graph visualization component for rendering Neo4j-style graphs with interactive features.\n *\n * @remarks\n * This component provides a complete graph visualization solution with built-in interaction modes,\n * selection handling, zoom controls, and an optional sidepanel. It wraps the NVL (Neo4j Visualization Library)\n * with additional UI controls and state management.\n *\n * The component supports various interaction modes including single selection, box selection, and lasso selection.\n * It also provides customizable UI islands for placing controls at different corners of the visualization.\n *\n * @example\n * Basic usage:\n * ```tsx\n * <GraphVisualization\n * nodes={nodes}\n * rels={relationships}\n * selected={selection}\n * setSelected={setSelection}\n * />\n * ```\n *\n * @example\n * With custom controls:\n * ```tsx\n * <GraphVisualization\n * nodes={nodes}\n * rels={relationships}\n * topRightIsland={<CustomControls />}\n * sidepanel={{\n * contents: <CustomSidepanel />,\n * isSidePanelOpen: true,\n * setIsSidePanelOpen: setSidepanelOpen\n * sidePanelWidth: 400,\n * onSidePanelResize: setSidepanelWidth,\n * }}\n * />\n * ```\n *\n * @example\n * With highlighting:\n * ```tsx\n * <GraphVisualization\n * nodes={nodes}\n * rels={relationships}\n * // undefined = no highlighting (default behavior)\n * // empty array = no search matches (dims all nodes)\n * // array with IDs = highlight only those items\n * highlightedNodeIds={searchResults.nodeIds}\n * highlightedRelationshipIds={searchResults.relationshipIds}\n * />\n * ```\n *\n * @param props - {@link GraphVisualizationProps}\n * @returns A React component that renders an interactive graph visualization\n *\n * @alpha\n */\nexport function GraphVisualization<T extends React.ElementType = 'div'>({\n nvlRef: rawNvlRef,\n nvlCallbacks,\n nvlOptions,\n sidepanel: rawSidepanel,\n nodes: rawNodes,\n rels: rawRels,\n highlightedNodeIds,\n highlightedRelationshipIds,\n topLeftIsland = DEFAULT_COMPONENTS.topLeftIsland,\n topRightIsland = DEFAULT_COMPONENTS.topRightIsland,\n bottomLeftIsland = DEFAULT_COMPONENTS.bottomLeftIsland,\n bottomRightIsland = DEFAULT_COMPONENTS.bottomRightIsland,\n gesture = 'single',\n setGesture,\n layout: rawLayout,\n setLayout: rawSetLayout,\n selected: rawSelected,\n setSelected: rawSetSelected,\n interactionMode: rawInteractionMode,\n setInteractionMode: rawSetInteractionMode,\n mouseEventCallbacks = {},\n className,\n style,\n htmlAttributes,\n ref,\n as,\n ...restProps\n}: GraphVisualizationProps<T>) {\n const nvlRef = useMemo(\n () => rawNvlRef ?? React.createRef<NVL>(),\n [rawNvlRef],\n );\n\n const instanceId = useId();\n\n // Respect NDL theme changes\n const { theme } = useNeedleTheme();\n const { bg, border, text } = tokens.theme[theme].color.neutral;\n\n // key required for nvl react responsiveness\n const [key, setKey] = useState(0);\n useEffect(() => {\n setKey((prevKey) => prevKey + 1);\n }, [theme]);\n\n // Semi-control interaction mode and selection state\n const [interactionMode, setInteractionMode] = useSemicontrolledState({\n isControlled: rawInteractionMode !== undefined,\n onChange: rawSetInteractionMode,\n state: rawInteractionMode ?? 'select',\n });\n const [selected, setSelected] = useSemicontrolledState({\n isControlled: rawSelected !== undefined,\n onChange: rawSetSelected,\n state: rawSelected ?? { nodeIds: [], relationshipIds: [] },\n });\n const [layout, setLayout] = useSemicontrolledState({\n isControlled: rawLayout !== undefined,\n onChange: rawSetLayout,\n state: rawLayout ?? 'd3Force',\n });\n\n const nvlGraph = useMemo(\n (): NvlGraph => mapToNvlGraph(rawNodes, rawRels),\n [rawNodes, rawRels],\n );\n\n const { nodesWithState, relsWithState, wrappedMouseEventCallbacks } =\n useManagedNodeState({\n gesture,\n highlightedNodeIds,\n highlightedRelationshipIds,\n interactionMode,\n mouseEventCallbacks,\n nvlGraph,\n selected,\n setInteractionMode,\n setSelected,\n });\n\n const [isSidePanelOpen, setIsSidePanelOpen] = useSemicontrolledState({\n isControlled: rawSidepanel?.isSidePanelOpen !== undefined,\n onChange: rawSidepanel?.setIsSidePanelOpen,\n state: rawSidepanel?.isSidePanelOpen ?? true,\n });\n const [sidePanelWidth, setSidePanelWidth] = useSemicontrolledState({\n isControlled: rawSidepanel?.sidePanelWidth !== undefined,\n onChange: rawSidepanel?.onSidePanelResize,\n state: rawSidepanel?.sidePanelWidth ?? 400,\n });\n\n const sidepanel = useMemo((): Sidepanel | null => {\n if (rawSidepanel === undefined) {\n return {\n children: <GraphVisualization.SingleSelectionSidePanelContents />,\n isSidePanelOpen,\n onSidePanelResize: setSidePanelWidth,\n setIsSidePanelOpen,\n sidePanelWidth,\n };\n }\n return rawSidepanel;\n }, [\n rawSidepanel,\n isSidePanelOpen,\n setIsSidePanelOpen,\n sidePanelWidth,\n setSidePanelWidth,\n ]);\n\n const Component: React.ElementType = as ?? 'div';\n return (\n <Component\n ref={ref}\n className={cx('ndl-graph-visualization-container', className)}\n style={style}\n {...htmlAttributes}\n >\n <GraphVisualizationContext.Provider\n value={{\n gesture,\n interactionMode,\n layout,\n nvlGraph,\n nvlInstance: nvlRef,\n selected,\n setGesture,\n setLayout,\n sidepanel,\n }}\n >\n <div className=\"ndl-graph-visualization\">\n <InteractiveNvlWrapper\n key={key}\n layout={layout}\n nodes={nodesWithState}\n rels={relsWithState}\n nvlOptions={{\n ...DEFAULT_NVL_OPTIONS,\n instanceId,\n styling: {\n defaultRelationshipColor: border.strongest,\n disabledItemColor: bg.strong,\n disabledItemFontColor: text.weakest,\n dropShadowColor: border.weak,\n selectedInnerBorderColor: bg.default,\n },\n ...nvlOptions,\n }}\n nvlCallbacks={{\n onLayoutComputing(isComputing) {\n if (!isComputing) {\n nvlRef.current?.fit(\n nvlRef.current.getNodes().map((neighbors) => neighbors.id),\n { noPan: true },\n );\n }\n },\n ...nvlCallbacks,\n }}\n mouseEventCallbacks={wrappedMouseEventCallbacks}\n ref={nvlRef}\n {...restProps}\n />\n {topLeftIsland !== null && (\n <InteractionIsland placement=\"top-left\">\n {topLeftIsland}\n </InteractionIsland>\n )}\n\n {topRightIsland !== null && (\n <InteractionIsland placement=\"top-right\">\n {topRightIsland}\n </InteractionIsland>\n )}\n\n {bottomLeftIsland !== null && (\n <InteractionIsland placement=\"bottom-left\">\n {bottomLeftIsland}\n </InteractionIsland>\n )}\n\n {bottomRightIsland !== null && (\n <InteractionIsland placement=\"bottom-right\">\n {bottomRightIsland}\n </InteractionIsland>\n )}\n </div>\n {sidepanel && <GraphVisualizationSidepanel sidepanel={sidepanel} />}\n </GraphVisualizationContext.Provider>\n </Component>\n );\n}\n\n/**\n * Zoom in button for use within a GraphVisualization component.\n *\n * @remarks\n * Increases zoom level by 1.3x\n *\n * @alpha\n */\nGraphVisualization.ZoomInButton = ZoomInButton;\n\n/**\n * Zoom out button for use within a GraphVisualization component.\n *\n * @remarks\n * Decreases zoom level by 0.7x\n *\n * @alpha\n */\nGraphVisualization.ZoomOutButton = ZoomOutButton;\n\n/**\n * Zoom to fit button for use within a GraphVisualization component.\n *\n * @remarks\n * Automatically adjusts zoom and pan to show all nodes and relationships\n *\n * @alpha\n */\nGraphVisualization.ZoomToFitButton = ZoomToFitButton;\n\n/**\n * Sidepanel toggle button for use within a GraphVisualization component.\n *\n * @remarks\n * Shows or hides the sidepanel containing node and relationship details.\n * Requires a sidepanel to be configured in the GraphVisualization component.\n *\n * @throws Error when used without a configured sidepanel\n *\n * @alpha\n */\nGraphVisualization.ToggleSidePanelButton = ToggleSidePanelButton;\n\n/**\n * Download button for use within a GraphVisualization component.\n *\n * @remarks\n * Opens a dropdown menu with download options. Currently supports PNG format.\n * Captures the current visualization state including zoom level.\n *\n * @alpha\n */\nGraphVisualization.DownloadButton = DownloadButton;\n\n/**\n * Box selection button for use within a GraphVisualization component.\n *\n * @remarks\n * Enables box selection mode where dragging creates a rectangular selection area.\n * Disabled unless the `setGesture` callback is passed.\n * Shows active state when enabled and supports keyboard shortcut 'B'.\n *\n * @alpha\n */\nGraphVisualization.BoxSelectButton = BoxSelectButton;\n\n/**\n * Lasso selection button for use within a GraphVisualization component.\n *\n * @remarks\n * Enables lasso selection mode where dragging creates a free-form selection area.\n * Disabled unless the `setGesture` callback is passed.\n * Shows active state when enabled and supports keyboard shortcut 'L'.\n *\n * @alpha\n */\nGraphVisualization.LassoSelectButton = LassoSelectButton;\n\n/**\n * Single node selection button for use within a GraphVisualization component.\n *\n * @remarks\n * Enables single selection mode where clicking selects individual nodes or relationships.\n * Shows active state when enabled and supports keyboard shortcut 'S'.\n *\n * @alpha\n */\nGraphVisualization.SingleSelectButton = SingleSelectButton;\n\n/**\n * Search button for use within a GraphVisualization component.\n *\n * @remarks\n * Enables search mode where clicking opens a search input for filtering nodes and relationships.\n *\n * @alpha\n */\nGraphVisualization.SearchButton = SearchButton;\n\n/**\n * Single node selection side panel for use within a GraphVisualization component.\n *\n * @remarks\n * Displays detailed information about the selected node or relationship.\n * Panel is automatically opened when a node or relationship is selected.\n * Also when user click on the show panel button in the top right corner.\n *\n * @alpha\n */\nGraphVisualization.SingleSelectionSidePanelContents =\n SingleSelectionSidepanelContents;\n\n/**\n * Layout selection button for use within a GraphVisualization component.\n *\n * @remarks\n * Opens a menu to select different graph layout algorithms.\n *\n * By default, the menu includes the **force-based** (`d3Force`) and\n * **hierarchical** layouts. Additional layouts can be enabled via configuration.\n *\n * @see {@link LayoutSelectOption} for the full set of layout options supported by NVL.\n *\n * @alpha\n */\nGraphVisualization.LayoutSelectButton = LayoutSelectButton;\n"]}
package/lib/esm/stories/graph-visualization-maximalist.story.js CHANGED
@@ -90,7 +90,7 @@ const Component = () => {
90
90
  const [gesture, setGesture] = useState('box');
91
91
  // Hierarchical layout not working properly with storybook
92
92
  const [layout, setLayout] = useState('hierarchical');
93
- return (_jsx("div", { style: { height: '600px' }, children: _jsx(GraphVisualization, { gesture: gesture, setGesture: setGesture, layout: layout, setLayout: setLayout, bottomLeftIsland: _jsxs(IconButtonArray, { children: [_jsx(GraphVisualization.LassoSelectButton, {}), _jsx(GraphVisualization.SingleSelectButton, {}), _jsx(GraphVisualization.BoxSelectButton, {})] }), bottomRightIsland: _jsxs(IconButtonArray, { children: [_jsx(GraphVisualization.LayoutSelectButton, { menuPlacement: "top-end-bottom-end" }), _jsx(Divider, { orientation: "vertical" }), _jsx(GraphVisualization.ZoomInButton, {}), _jsx(GraphVisualization.ZoomOutButton, {}), _jsx(GraphVisualization.ZoomToFitButton, {})] }), nodes: nodes, rels: rels, sidepanel: {
93
+ return (_jsx("div", { style: { height: '600px' }, children: _jsx(GraphVisualization, { gesture: gesture, setGesture: setGesture, layout: layout, setLayout: setLayout, bottomLeftIsland: _jsxs(IconButtonArray, { size: "small", children: [_jsx(GraphVisualization.LassoSelectButton, {}), _jsx(GraphVisualization.SingleSelectButton, {}), _jsx(GraphVisualization.BoxSelectButton, {})] }), bottomRightIsland: _jsxs(IconButtonArray, { size: "medium", children: [_jsx(GraphVisualization.LayoutSelectButton, { menuPlacement: "top-end-bottom-end" }), _jsx(Divider, { orientation: "vertical" }), _jsx(GraphVisualization.ZoomInButton, {}), _jsx(GraphVisualization.ZoomOutButton, {}), _jsx(GraphVisualization.ZoomToFitButton, {})] }), nodes: nodes, rels: rels, sidepanel: {
94
94
  children: _jsx(GraphVisualization.SingleSelectionSidePanelContents, {}),
95
95
  isSidePanelOpen: isOpen,
96
96
  onSidePanelResize: () => {
package/lib/esm/stories/graph-visualization-maximalist.story.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"graph-visualization-maximalist.story.js","sourceRoot":"","sources":["../../../src/stories/graph-visualization-maximalist.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { Divider, IconButtonArray } from '@neo4j-ndl/react';\nimport { type Layout } from '@neo4j-nvl/base';\nimport { useState } from 'react';\n\nimport { GraphVisualization } from '../graph-visualization';\nimport { type Gesture, type NeoNode } from '../graph-visualization-context';\n\nconst nodes: NeoNode[] = [\n {\n id: 'node1',\n labels: ['Pokemon', 'Legendary'],\n properties: {\n durationToWinBattle: {\n stringified: 'P0M0DT0.000000001S',\n type: 'duration',\n },\n favoriteColors: {\n stringified: '[\"red\", \"blue\", \"green\"]',\n type: 'list',\n },\n getsBeatBy: {\n stringified: 'null',\n type: 'null',\n },\n isAwesome: {\n stringified: 'true',\n type: 'boolean',\n },\n location: {\n stringified: 'point({srid:1, x:100, y:200, z:300})',\n type: 'point',\n },\n name: {\n stringified: '\"Rayquaza\"',\n type: 'string',\n },\n weight: {\n stringified: '392.0',\n type: 'float',\n },\n },\n },\n {\n id: 'node2',\n labels: ['Type'],\n properties: { name: { stringified: 'Dragon', type: 'String' } },\n },\n {\n id: 'node3',\n labels: ['Type'],\n properties: { name: { stringified: 'Flying', type: 'String' } },\n },\n];\n\nconst rels = [\n {\n from: 'node1',\n id: 'rel1',\n properties: {},\n to: 'node2',\n type: 'HAS_TYPE',\n },\n {\n from: 'node1',\n id: 'rel2',\n properties: {},\n to: 'node3',\n type: 'HAS_TYPE',\n },\n];\n\nexport const containerClasses =\n 'n-w-full n-border-neutral-border-weak n-mx-2 n-rounded-lg n-border';\n\nconst Component = () => {\n const [isOpen, setIsOpen] = useState(true);\n const [gesture, setGesture] = useState<Gesture>('box');\n // Hierarchical layout not working properly with storybook\n const [layout, setLayout] = useState<Layout>('hierarchical');\n\n return (\n <div style={{ height: '600px' }}>\n <GraphVisualization\n gesture={gesture}\n setGesture={setGesture}\n layout={layout}\n setLayout={setLayout}\n bottomLeftIsland={\n <IconButtonArray>\n <GraphVisualization.LassoSelectButton />\n <GraphVisualization.SingleSelectButton />\n <GraphVisualization.BoxSelectButton />\n </IconButtonArray>\n }\n bottomRightIsland={\n <IconButtonArray>\n <GraphVisualization.LayoutSelectButton menuPlacement=\"top-end-bottom-end\" />\n <Divider orientation=\"vertical\" />\n <GraphVisualization.ZoomInButton />\n <GraphVisualization.ZoomOutButton />\n <GraphVisualization.ZoomToFitButton />\n </IconButtonArray>\n }\n nodes={nodes}\n rels={rels}\n sidepanel={{\n children: <GraphVisualization.SingleSelectionSidePanelContents />,\n isSidePanelOpen: isOpen,\n onSidePanelResize: () => {\n /* no op */\n },\n setIsSidePanelOpen: setIsOpen,\n sidePanelWidth: 300,\n }}\n topLeftIsland={<GraphVisualization.DownloadButton />}\n topRightIsland={<GraphVisualization.ToggleSidePanelButton />}\n className={containerClasses}\n />\n </div>\n );\n};\n\nexport default Component;\n"]}
1
+ {"version":3,"file":"graph-visualization-maximalist.story.js","sourceRoot":"","sources":["../../../src/stories/graph-visualization-maximalist.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { Divider, IconButtonArray } from '@neo4j-ndl/react';\nimport { type Layout } from '@neo4j-nvl/base';\nimport { useState } from 'react';\n\nimport { GraphVisualization } from '../graph-visualization';\nimport { type Gesture, type NeoNode } from '../graph-visualization-context';\n\nconst nodes: NeoNode[] = [\n {\n id: 'node1',\n labels: ['Pokemon', 'Legendary'],\n properties: {\n durationToWinBattle: {\n stringified: 'P0M0DT0.000000001S',\n type: 'duration',\n },\n favoriteColors: {\n stringified: '[\"red\", \"blue\", \"green\"]',\n type: 'list',\n },\n getsBeatBy: {\n stringified: 'null',\n type: 'null',\n },\n isAwesome: {\n stringified: 'true',\n type: 'boolean',\n },\n location: {\n stringified: 'point({srid:1, x:100, y:200, z:300})',\n type: 'point',\n },\n name: {\n stringified: '\"Rayquaza\"',\n type: 'string',\n },\n weight: {\n stringified: '392.0',\n type: 'float',\n },\n },\n },\n {\n id: 'node2',\n labels: ['Type'],\n properties: { name: { stringified: 'Dragon', type: 'String' } },\n },\n {\n id: 'node3',\n labels: ['Type'],\n properties: { name: { stringified: 'Flying', type: 'String' } },\n },\n];\n\nconst rels = [\n {\n from: 'node1',\n id: 'rel1',\n properties: {},\n to: 'node2',\n type: 'HAS_TYPE',\n },\n {\n from: 'node1',\n id: 'rel2',\n properties: {},\n to: 'node3',\n type: 'HAS_TYPE',\n },\n];\n\nexport const containerClasses =\n 'n-w-full n-border-neutral-border-weak n-mx-2 n-rounded-lg n-border';\n\nconst Component = () => {\n const [isOpen, setIsOpen] = useState(true);\n const [gesture, setGesture] = useState<Gesture>('box');\n // Hierarchical layout not working properly with storybook\n const [layout, setLayout] = useState<Layout>('hierarchical');\n\n return (\n <div style={{ height: '600px' }}>\n <GraphVisualization\n gesture={gesture}\n setGesture={setGesture}\n layout={layout}\n setLayout={setLayout}\n bottomLeftIsland={\n <IconButtonArray size=\"small\">\n <GraphVisualization.LassoSelectButton />\n <GraphVisualization.SingleSelectButton />\n <GraphVisualization.BoxSelectButton />\n </IconButtonArray>\n }\n bottomRightIsland={\n <IconButtonArray size=\"medium\">\n <GraphVisualization.LayoutSelectButton menuPlacement=\"top-end-bottom-end\" />\n <Divider orientation=\"vertical\" />\n <GraphVisualization.ZoomInButton />\n <GraphVisualization.ZoomOutButton />\n <GraphVisualization.ZoomToFitButton />\n </IconButtonArray>\n }\n nodes={nodes}\n rels={rels}\n sidepanel={{\n children: <GraphVisualization.SingleSelectionSidePanelContents />,\n isSidePanelOpen: isOpen,\n onSidePanelResize: () => {\n /* no op */\n },\n setIsSidePanelOpen: setIsOpen,\n sidePanelWidth: 300,\n }}\n topLeftIsland={<GraphVisualization.DownloadButton />}\n topRightIsland={<GraphVisualization.ToggleSidePanelButton />}\n className={containerClasses}\n />\n </div>\n );\n};\n\nexport default Component;\n"]}
package/lib/types/graph-visualization.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"graph-visualization.d.ts","sourceRoot":"","sources":["../../src/graph-visualization.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"graph-visualization.d.ts","sourceRoot":"","sources":["../../src/graph-visualization.tsx"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neo4j-ndl/react-graph",
3
- "version": "1.1.16",
3
+ "version": "1.1.18",
4
4
  "sideEffects": false,
5
5
  "description": "React implementation of the graph visualization from Neo4j Design System",
6
6
  "keywords": [
@@ -55,8 +55,8 @@
55
55
  "@neo4j-nvl/base": "^1.0.0",
56
56
  "@neo4j-nvl/interaction-handlers": "^1.0.0",
57
57
  "@neo4j-nvl/react": "^1.0.0",
58
- "@neo4j-ndl/react": "^4.5.7",
59
- "@neo4j-ndl/base": "^4.5.2"
58
+ "@neo4j-ndl/base": "^4.5.4",
59
+ "@neo4j-ndl/react": "^4.5.9"
60
60
  },
61
61
  "dependencies": {
62
62
  "classnames": "2.5.1",