@neo4j-ndl/react-graph 1.5.6 → 2.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"graph-visualization-context.js","sourceRoot":"","sources":["../../src/graph-visualization-context.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;AAIH,iCAAkD;AAqFrC,QAAA,yBAAyB,GAAG,IAAA,qBAAa,EAEpD,SAAS,CAAC,CAAC;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACI,MAAM,4BAA4B,GAAG,GAAG,EAAE;IAC/C,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,iCAAyB,CAAC,CAAC;IACtD,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CACb,8EAA8E,CAC/E,CAAC;IACJ,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AARW,QAAA,4BAA4B,gCAQvC","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 type NVL from '@neo4j-nvl/base';\nimport { type Layout, type Node, type Relationship } from '@neo4j-nvl/base';\nimport { createContext, useContext } from 'react';\n\nimport { type CompiledStyleRules } from './styling/compile-graph-styles';\n\nexport type GraphSelection = { nodeIds: string[]; relationshipIds: string[] };\nexport type Sidepanel = {\n  children: React.ReactNode;\n  isSidePanelOpen: boolean;\n  setIsSidePanelOpen?: (isSidePanelOpen: boolean) => void;\n  sidePanelWidth?: number;\n  onSidePanelResize: (width: number) => void;\n  minWidth?: number | string;\n  maxWidth?: number | string;\n};\n\nexport type NvlGraph = {\n  nodes: Node[];\n  nodeData: Record<string, NodeData>;\n  rels: Relationship[];\n  relData: Record<string, RelData>;\n};\n\nexport type ColorCount = { color: string; count: number };\n\nexport type GraphItemMetaData = {\n  totalCount: number;\n  /** Distribution of colors across all elements with this label/type, sorted descending by count. */\n  colorDistribution: ColorCount[];\n};\n\nexport type MetadataLookupTable = {\n  labels: string[];\n  labelMetaData: Record<string, GraphItemMetaData>;\n  reltypes: string[];\n  reltypeMetaData: Record<string, GraphItemMetaData>;\n  hasMultipleColors: boolean;\n};\n\n// We use this type to avoid coupling the graph visualization component to the neo4j driver types\n// The tradeoff is that it's limited to displaying values and not manipulating them\n// and that it's harder to pass to the graph visualization component from the raw driver result\nexport type PortableProperty = { stringified: string; type: string };\n\nexport type NodeData = {\n  labelsSorted: string[];\n  properties: Record<string, PortableProperty>;\n  id: string;\n};\nexport type RelData = {\n  type: string;\n  properties: Record<string, PortableProperty>;\n  id: string;\n};\n\nexport type NeoNode = Node & {\n  properties: Record<string, PortableProperty>;\n  labels: string[];\n};\n\nexport type NeoRel = Relationship & {\n  properties: Record<string, PortableProperty>;\n  type: string;\n};\n\n/**\n * Data that is shared across the graph visualization component.\n *\n * @see {@link useGraphVisualizationContext}\n * @alpha\n */\nexport type GraphVisualizationContextData = {\n  nvlInstance: React.MutableRefObject<NVL | null>;\n  sidepanel: Sidepanel | null;\n  gesture: Gesture;\n  setGesture?: (gesture: Gesture) => void;\n  interactionMode: InteractionMode;\n  nvlGraph: NvlGraph;\n  selected: GraphSelection;\n  metadataLookup: MetadataLookupTable;\n  compiledStyleRules: CompiledStyleRules;\n  layout: Layout;\n  setLayout?: (layout: Layout) => void;\n  portalTarget?: HTMLElement | null;\n};\n\nexport const GraphVisualizationContext = createContext<\n  GraphVisualizationContextData | undefined\n>(undefined);\n\n/**\n * Hook to access the graph visualization context.\n *\n * This hook is used to implement custom UI components like buttons, panels, and controls\n * that need access to data and functionality from the graph visualization component.\n * @see {@link GraphVisualizationContextData}\n *\n * @returns The graph visualization context containing NVL instance, sidepanel, gestures, and graph data\n * @throws Error if used outside of a GraphVisualizationContext provider\n *\n * @example\n * ```tsx\n * const NodeLoggerButton = () => {\n *   const { selected } = useGraphVisualizationContext();\n *\n *   const handleClick = () => {\n *     console.log('Selected nodes:', selected.nodeIds);\n *   };\n *\n *   return (\n *     <button onClick={handleClick}>\n *       Log Selected Nodes ({selected.nodeIds.length})\n *     </button>\n *   );\n * };\n * ```\n * @alpha\n */\nexport const useGraphVisualizationContext = () => {\n  const context = useContext(GraphVisualizationContext);\n  if (!context) {\n    throw new Error(\n      'useGraphVisualizationContext must be used within a GraphVisualizationContext',\n    );\n  }\n  return context;\n};\n\nexport type Gesture = 'single' | 'box' | 'lasso';\n\nexport type InteractionMode =\n  | 'select'\n  | 'draw'\n  | 'edit-text'\n  | 'pan'\n  | 'drag'\n  | 'none';\n"]}
+{"version":3,"file":"graph-visualization-context.js","sourceRoot":"","sources":["../../src/graph-visualization-context.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;AAIH,iCAAkD;AAqFrC,QAAA,yBAAyB,GAAG,IAAA,qBAAa,EAEpD,SAAS,CAAC,CAAC;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACI,MAAM,4BAA4B,GAAG,GAAG,EAAE;IAC/C,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,iCAAyB,CAAC,CAAC;IACtD,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CACb,8EAA8E,CAC/E,CAAC;IACJ,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AARW,QAAA,4BAA4B,gCAQvC","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 type NVL from '@neo4j-nvl/base';\nimport { type Layout, type Node, type Relationship } from '@neo4j-nvl/base';\nimport { createContext, useContext } from 'react';\n\nimport { type CompiledGraphStyleRules } from './styling/compile-graph-styles';\n\nexport type GraphSelection = { nodeIds: string[]; relationshipIds: string[] };\nexport type Sidepanel = {\n  children: React.ReactNode;\n  isSidePanelOpen: boolean;\n  setIsSidePanelOpen?: (isSidePanelOpen: boolean) => void;\n  sidePanelWidth?: number;\n  onSidePanelResize: (width: number) => void;\n  minWidth?: number | string;\n  maxWidth?: number | string;\n};\n\nexport type NvlGraph = {\n  nodes: Node[];\n  nodeData: Record<string, NodeData>;\n  rels: Relationship[];\n  relData: Record<string, RelData>;\n};\n\nexport type ColorCount = { color: string; count: number };\n\nexport type GraphItemMetaData = {\n  totalCount: number;\n  /** Distribution of colors across all elements with this label/type, sorted descending by count. */\n  colorDistribution: ColorCount[];\n};\n\nexport type MetadataLookupTable = {\n  labels: string[];\n  labelMetaData: Record<string, GraphItemMetaData>;\n  reltypes: string[];\n  reltypeMetaData: Record<string, GraphItemMetaData>;\n  hasMultipleColors: boolean;\n};\n\n// We use this type to avoid coupling the graph visualization component to the neo4j driver types\n// The tradeoff is that it's limited to displaying values and not manipulating them\n// and that it's harder to pass to the graph visualization component from the raw driver result\nexport type PortableProperty = { stringified: string; type: string };\n\nexport type NodeData = {\n  labelsSorted: string[];\n  properties: Record<string, PortableProperty>;\n  id: string;\n};\nexport type RelData = {\n  type: string;\n  properties: Record<string, PortableProperty>;\n  id: string;\n};\n\nexport type NeoNode = Node & {\n  properties: Record<string, PortableProperty>;\n  labels: string[];\n};\n\nexport type NeoRel = Relationship & {\n  properties: Record<string, PortableProperty>;\n  type: string;\n};\n\n/**\n * Data that is shared across the graph visualization component.\n *\n * @see {@link useGraphVisualizationContext}\n * @alpha\n */\nexport type GraphVisualizationContextData = {\n  nvlInstance: React.MutableRefObject<NVL | null>;\n  sidepanel: Sidepanel | null;\n  gesture: Gesture;\n  setGesture?: (gesture: Gesture) => void;\n  interactionMode: InteractionMode;\n  nvlGraph: NvlGraph;\n  selected: GraphSelection;\n  metadataLookup: MetadataLookupTable;\n  compiledStyleRules: CompiledGraphStyleRules;\n  layout: Layout;\n  setLayout?: (layout: Layout) => void;\n  portalTarget?: HTMLElement | null;\n};\n\nexport const GraphVisualizationContext = createContext<\n  GraphVisualizationContextData | undefined\n>(undefined);\n\n/**\n * Hook to access the graph visualization context.\n *\n * This hook is used to implement custom UI components like buttons, panels, and controls\n * that need access to data and functionality from the graph visualization component.\n * @see {@link GraphVisualizationContextData}\n *\n * @returns The graph visualization context containing NVL instance, sidepanel, gestures, and graph data\n * @throws Error if used outside of a GraphVisualizationContext provider\n *\n * @example\n * ```tsx\n * const NodeLoggerButton = () => {\n *   const { selected } = useGraphVisualizationContext();\n *\n *   const handleClick = () => {\n *     console.log('Selected nodes:', selected.nodeIds);\n *   };\n *\n *   return (\n *     <button onClick={handleClick}>\n *       Log Selected Nodes ({selected.nodeIds.length})\n *     </button>\n *   );\n * };\n * ```\n * @alpha\n */\nexport const useGraphVisualizationContext = () => {\n  const context = useContext(GraphVisualizationContext);\n  if (!context) {\n    throw new Error(\n      'useGraphVisualizationContext must be used within a GraphVisualizationContext',\n    );\n  }\n  return context;\n};\n\nexport type Gesture = 'single' | 'box' | 'lasso';\n\nexport type InteractionMode =\n  | 'select'\n  | 'draw'\n  | 'edit-text'\n  | 'pan'\n  | 'drag'\n  | 'none';\n"]}

package/lib/cjs/graph-visualization.js

@@ -166,7 +166,7 @@ const DEFAULT_COMPONENTS = {
  */
 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, bottomCenterIsland = DEFAULT_COMPONENTS.bottomCenterIsland, bottomRightIsland = DEFAULT_COMPONENTS.bottomRightIsland, gesture = 'single', setGesture, layout: rawLayout, setLayout: rawSetLayout, portalTarget, selected: rawSelected, setSelected: rawSetSelected, interactionMode: rawInteractionMode, setInteractionMode: rawSetInteractionMode, mouseEventCallbacks = {}, className, style, htmlAttributes, ref, as, nvlStyleRules: styleRules } = _a, restProps = __rest(_a, ["nvlRef", "nvlCallbacks", "nvlOptions", "sidepanel", "nodes", "rels", "highlightedNodeIds", "highlightedRelationshipIds", "topLeftIsland", "topRightIsland", "bottomLeftIsland", "bottomCenterIsland", "bottomRightIsland", "gesture", "setGesture", "layout", "setLayout", "portalTarget", "selected", "setSelected", "interactionMode", "setInteractionMode", "mouseEventCallbacks", "className", "style", "htmlAttributes", "ref", "as", "nvlStyleRules"]);
+    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, bottomCenterIsland = DEFAULT_COMPONENTS.bottomCenterIsland, bottomRightIsland = DEFAULT_COMPONENTS.bottomRightIsland, gesture = 'single', setGesture, layout: rawLayout, setLayout: rawSetLayout, portalTarget, selected: rawSelected, setSelected: rawSetSelected, interactionMode: rawInteractionMode, setInteractionMode: rawSetInteractionMode, mouseEventCallbacks = {}, className, style, htmlAttributes, ref, as, styleRules } = _a, restProps = __rest(_a, ["nvlRef", "nvlCallbacks", "nvlOptions", "sidepanel", "nodes", "rels", "highlightedNodeIds", "highlightedRelationshipIds", "topLeftIsland", "topRightIsland", "bottomLeftIsland", "bottomCenterIsland", "bottomRightIsland", "gesture", "setGesture", "layout", "setLayout", "portalTarget", "selected", "setSelected", "interactionMode", "setInteractionMode", "mouseEventCallbacks", "className", "style", "htmlAttributes", "ref", "as", "styleRules"]);
     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

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

@@ -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  GestureSelectButton,\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 Sidepanel,\n} from './graph-visualization-context';\nimport { GraphVisualizationSidepanel } from './graph-visualization-sidepanel';\nimport { SingleSelectionSidepanelContents } from './sidepanel-components/single-selection-sidepanel-contents';\nimport { type StyleRule } from './styling/style-types';\nimport { useGraphData } from './styling/use-graph-data';\nimport { useManagedNodeState } from './use-managed-node-state';\nimport { useSemicontrolledState } from './use-semi-controlled-state';\n\ntype Placement =\n  | 'top-right'\n  | 'bottom-right'\n  | 'top-left'\n  | 'bottom-left'\n  | 'bottom-center';\n\nconst PLACEMENTS: Record<Placement, string> = {\n  'bottom-left': 'ndl-graph-visualization-interaction-island ndl-bottom-left',\n  'bottom-center':\n    'ndl-graph-visualization-interaction-island ndl-bottom-center',\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  bottomCenterIsland: 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  bottomCenterIsland?: React.ReactNode;\n  bottomRightIsland?: React.ReactNode;\n  topLeftIsland?: React.ReactNode;\n  topRightIsland?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n  /**\n   * Optional style rules to apply to graph elements.\n   * Consumer-set `color` on individual `NeoNode`/`NeoRel` objects takes precedence over rules.\n   * Compared by reference — memoize the array to avoid recompiling on every render.\n   */\n  nvlStyleRules?: StyleRule[];\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  portalTarget?: HTMLElement | null;\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  bottomCenterIsland = DEFAULT_COMPONENTS.bottomCenterIsland,\n  bottomRightIsland = DEFAULT_COMPONENTS.bottomRightIsland,\n  gesture = 'single',\n  setGesture,\n  layout: rawLayout,\n  setLayout: rawSetLayout,\n  portalTarget,\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  nvlStyleRules: styleRules,\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  const { styledGraph, metadataLookup, compiledStyleRules } = useGraphData(\n    rawNodes,\n    rawRels,\n    styleRules,\n  );\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 { nodesWithState, relsWithState, wrappedMouseEventCallbacks } =\n    useManagedNodeState({\n      gesture,\n      highlightedNodeIds,\n      highlightedRelationshipIds,\n      interactionMode,\n      mouseEventCallbacks,\n      nvlGraph: styledGraph,\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          compiledStyleRules,\n          gesture,\n          interactionMode,\n          layout,\n          metadataLookup,\n          nvlGraph: styledGraph,\n          nvlInstance: nvlRef,\n          portalTarget,\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          {bottomCenterIsland !== null && (\n            <InteractionIsland placement=\"bottom-center\">\n              {bottomCenterIsland}\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. Supports PNG and SVG formats.\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\n/**\n * Gesture selection button for use within a GraphVisualization component.\n *\n * @remarks\n * Opens a menu to select different interaction gestures.\n *\n * By default, the menu includes **single**, **box**, and **lasso** selection gestures.\n *\n * @see {@link GestureSelectOption} for the full set of gesture options supported by NVL.\n *\n * @alpha\n */\nGraphVisualization.GestureSelectButton = GestureSelectButton;\n"]}
+{"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  GestureSelectButton,\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 Sidepanel,\n} from './graph-visualization-context';\nimport { GraphVisualizationSidepanel } from './graph-visualization-sidepanel';\nimport { SingleSelectionSidepanelContents } from './sidepanel-components/single-selection-sidepanel-contents';\nimport { type GraphStyleRule } from './styling/style-types';\nimport { useGraphData } from './styling/use-graph-data';\nimport { useManagedNodeState } from './use-managed-node-state';\nimport { useSemicontrolledState } from './use-semi-controlled-state';\n\ntype Placement =\n  | 'top-right'\n  | 'bottom-right'\n  | 'top-left'\n  | 'bottom-left'\n  | 'bottom-center';\n\nconst PLACEMENTS: Record<Placement, string> = {\n  'bottom-left': 'ndl-graph-visualization-interaction-island ndl-bottom-left',\n  'bottom-center':\n    'ndl-graph-visualization-interaction-island ndl-bottom-center',\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  bottomCenterIsland: 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  bottomCenterIsland?: React.ReactNode;\n  bottomRightIsland?: React.ReactNode;\n  topLeftIsland?: React.ReactNode;\n  topRightIsland?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n  /**\n   * Optional style rules to apply to graph elements.\n   * Consumer-set `color` on individual `NeoNode`/`NeoRel` objects takes precedence over rules.\n   * Compared by reference — memoize the array to avoid recompiling on every render.\n   */\n  styleRules?: GraphStyleRule[];\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  portalTarget?: HTMLElement | null;\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  bottomCenterIsland = DEFAULT_COMPONENTS.bottomCenterIsland,\n  bottomRightIsland = DEFAULT_COMPONENTS.bottomRightIsland,\n  gesture = 'single',\n  setGesture,\n  layout: rawLayout,\n  setLayout: rawSetLayout,\n  portalTarget,\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  styleRules,\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  const { styledGraph, metadataLookup, compiledStyleRules } = useGraphData(\n    rawNodes,\n    rawRels,\n    styleRules,\n  );\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 { nodesWithState, relsWithState, wrappedMouseEventCallbacks } =\n    useManagedNodeState({\n      gesture,\n      highlightedNodeIds,\n      highlightedRelationshipIds,\n      interactionMode,\n      mouseEventCallbacks,\n      nvlGraph: styledGraph,\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          compiledStyleRules,\n          gesture,\n          interactionMode,\n          layout,\n          metadataLookup,\n          nvlGraph: styledGraph,\n          nvlInstance: nvlRef,\n          portalTarget,\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          {bottomCenterIsland !== null && (\n            <InteractionIsland placement=\"bottom-center\">\n              {bottomCenterIsland}\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. Supports PNG and SVG formats.\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\n/**\n * Gesture selection button for use within a GraphVisualization component.\n *\n * @remarks\n * Opens a menu to select different interaction gestures.\n *\n * By default, the menu includes **single**, **box**, and **lasso** selection gestures.\n *\n * @see {@link GestureSelectOption} for the full set of gesture options supported by NVL.\n *\n * @alpha\n */\nGraphVisualization.GestureSelectButton = GestureSelectButton;\n"]}

package/lib/cjs/index.js

@@ -20,9 +20,13 @@
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useGraphVisualizationContext = exports.GraphVisualization = void 0;
+exports.parseStyleRules = exports.compileGraphStyleRules = 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; } });
+var compile_graph_styles_1 = require("./styling/compile-graph-styles");
+Object.defineProperty(exports, "compileGraphStyleRules", { enumerable: true, get: function () { return compile_graph_styles_1.compileGraphStyleRules; } });
+var parse_style_rules_1 = require("./styling/parse-style-rules");
+Object.defineProperty(exports, "parseStyleRules", { enumerable: true, get: function () { return parse_style_rules_1.parseStyleRules; } });
 //# sourceMappingURL=index.js.map

package/lib/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;AAEH,6DAA2D;AAAlD,yHAAA,kBAAkB,OAAA;AAC3B,6EAgBuC;AAfrC,2IAAA,4BAA4B,OAAA","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\nexport { GraphVisualization } from './graph-visualization';\nexport {\n  useGraphVisualizationContext,\n  type ColorCount,\n  type Gesture,\n  type GraphItemMetaData,\n  type GraphSelection,\n  type GraphVisualizationContextData,\n  type InteractionMode,\n  type MetadataLookupTable,\n  type NeoNode,\n  type NeoRel,\n  type NodeData,\n  type NvlGraph,\n  type PortableProperty,\n  type RelData,\n  type Sidepanel,\n} from './graph-visualization-context';\nexport { type StyleRule } from './styling/style-types';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;AAEH,6DAA2D;AAAlD,yHAAA,kBAAkB,OAAA;AAC3B,6EAgBuC;AAfrC,2IAAA,4BAA4B,OAAA;AAiB9B,uEAAwE;AAA/D,8HAAA,sBAAsB,OAAA;AAC/B,iEAA8D;AAArD,oHAAA,eAAe,OAAA","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\nexport { GraphVisualization } from './graph-visualization';\nexport {\n  useGraphVisualizationContext,\n  type ColorCount,\n  type Gesture,\n  type GraphItemMetaData,\n  type GraphSelection,\n  type GraphVisualizationContextData,\n  type InteractionMode,\n  type MetadataLookupTable,\n  type NeoNode,\n  type NeoRel,\n  type NodeData,\n  type NvlGraph,\n  type PortableProperty,\n  type RelData,\n  type Sidepanel,\n} from './graph-visualization-context';\nexport { type GraphStyleRule } from './styling/style-types';\nexport { compileGraphStyleRules } from './styling/compile-graph-styles';\nexport { parseStyleRules } from './styling/parse-style-rules';\n"]}

package/lib/cjs/stories/graph-visualization-range-styling.story.js

@@ -37,18 +37,20 @@ const pokemonRules = [
                 maxValue: 88,
                 maxColor: '#e74c3c',
             },
-            nodeSizeRange: {
+            sizeRange: {
                 onProperty: 'level',
                 minValue: 1,
                 maxValue: 88,
                 minSize: 20,
                 maxSize: 50,
             },
-            captions: [
-                { value: { property: 'name' }, styles: ['bold'] },
-                { value: ' Lv', styles: [] },
-                { value: { property: 'level' }, styles: [] },
-            ],
+            captions: {
+                text: [
+                    { value: { property: 'name' }, styles: ['bold'] },
+                    { value: ' Lv', styles: [] },
+                    { value: { property: 'level' }, styles: [] },
+                ],
+            },
         },
     },
 ];
@@ -63,25 +65,28 @@ const caughtRelRules = [
                 maxValue: 40,
                 maxColor: '#ff2d78',
             },
-            relWidthRange: {
+            width: { value: 4 },
+            widthRange: {
                 onProperty: 'level',
                 minValue: 1,
                 maxValue: 40,
                 minWidth: 1,
                 maxWidth: 8,
             },
-            captions: [
-                { value: 'Caught @ Lv', styles: [] },
-                { value: { property: 'level' }, styles: ['bold'] },
-            ],
-            captionSize: 1.5,
+            captions: {
+                text: [
+                    { value: 'Caught @ Lv', styles: [] },
+                    { value: { property: 'level' }, styles: ['bold'] },
+                ],
+                size: 1.5,
+            },
         },
     },
 ];
 const otherNodeRules = [
-    { match: { label: 'Trainer' }, apply: { color: '#95a5a6' } },
-    { match: { label: 'Type' }, apply: { color: '#bdc3c7' } },
-    { match: { label: 'Gym' }, apply: { color: '#bdc3c7' } },
+    { match: { label: 'Trainer' }, apply: { color: { value: '#95a5a6' } } },
+    { match: { label: 'Type' }, apply: { color: { value: '#bdc3c7' } } },
+    { match: { label: 'Gym' }, apply: { color: { value: '#bdc3c7' } } },
 ];
 exports.colorRangeStyleRules = [
     ...pokemonRules,
@@ -89,7 +94,7 @@ exports.colorRangeStyleRules = [
     ...otherNodeRules,
 ];
 const Component = () => {
-    return ((0, jsx_runtime_1.jsx)("div", { style: { height: '600px' }, children: (0, jsx_runtime_1.jsx)(graph_visualization_1.GraphVisualization, { nodes: story_data_1.advancedStoryGraph.nodes, rels: story_data_1.advancedStoryGraph.rels, className: story_data_1.containerClasses, nvlStyleRules: exports.colorRangeStyleRules }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { style: { height: '600px' }, children: (0, jsx_runtime_1.jsx)(graph_visualization_1.GraphVisualization, { nodes: story_data_1.advancedStoryGraph.nodes, rels: story_data_1.advancedStoryGraph.rels, className: story_data_1.containerClasses, styleRules: exports.colorRangeStyleRules }) }));
 };
 exports.default = Component;
 //# sourceMappingURL=graph-visualization-range-styling.story.js.map

package/lib/cjs/stories/graph-visualization-range-styling.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"graph-visualization-range-styling.story.js","sourceRoot":"","sources":["../../../src/stories/graph-visualization-range-styling.story.tsx"],"names":[],"mappings":";;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,gEAA4D;AAE5D,6CAAoE;AAEpE,MAAM,YAAY,GAAgB;IAChC;QACE,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;QAC3B,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,UAAU,EAAE,OAAO;gBACnB,QAAQ,EAAE,CAAC;gBACX,QAAQ,EAAE,SAAS;gBACnB,QAAQ,EAAE,EAAE;gBACZ,QAAQ,EAAE,SAAS;gBACnB,QAAQ,EAAE,EAAE;gBACZ,QAAQ,EAAE,SAAS;aACpB;YACD,aAAa,EAAE;gBACb,UAAU,EAAE,OAAO;gBACnB,QAAQ,EAAE,CAAC;gBACX,QAAQ,EAAE,EAAE;gBACZ,OAAO,EAAE,EAAE;gBACX,OAAO,EAAE,EAAE;aACZ;YACD,QAAQ,EAAE;gBACR,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,CAAC,MAAM,CAAC,EAAE;gBACjD,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE;gBAC5B,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;aAC7C;SACF;KACF;CACF,CAAC;AAEF,MAAM,cAAc,GAAgB;IAClC;QACE,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,UAAU,EAAE,OAAO;gBACnB,QAAQ,EAAE,CAAC;gBACX,QAAQ,EAAE,SAAS;gBACnB,QAAQ,EAAE,EAAE;gBACZ,QAAQ,EAAE,SAAS;aACpB;YACD,aAAa,EAAE;gBACb,UAAU,EAAE,OAAO;gBACnB,QAAQ,EAAE,CAAC;gBACX,QAAQ,EAAE,EAAE;gBACZ,QAAQ,EAAE,CAAC;gBACX,QAAQ,EAAE,CAAC;aACZ;YACD,QAAQ,EAAE;gBACR,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,EAAE;gBACpC,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,MAAM,EAAE,CAAC,MAAM,CAAC,EAAE;aACnD;YACD,WAAW,EAAE,GAAG;SACjB;KACF;CACF,CAAC;AAEF,MAAM,cAAc,GAAgB;IAClC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;IAC5D,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;IACzD,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;CACzD,CAAC;AAEW,QAAA,oBAAoB,GAAgB;IAC/C,GAAG,YAAY;IACf,GAAG,cAAc;IACjB,GAAG,cAAc;CAClB,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,gCAAK,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,YAC7B,uBAAC,wCAAkB,IACjB,KAAK,EAAE,+BAAkB,CAAC,KAAK,EAC/B,IAAI,EAAE,+BAAkB,CAAC,IAAI,EAC7B,SAAS,EAAE,6BAAgB,EAC3B,aAAa,EAAE,4BAAoB,GACnC,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","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 { GraphVisualization } from '../graph-visualization';\nimport { type StyleRule } from '../styling/style-types';\nimport { advancedStoryGraph, containerClasses } from './story-data';\n\nconst pokemonRules: StyleRule[] = [\n  {\n    match: { label: 'Pokemon' },\n    apply: {\n      colorRange: {\n        onProperty: 'level',\n        minValue: 1,\n        minColor: '#3498db',\n        midValue: 45,\n        midColor: '#f1c40f',\n        maxValue: 88,\n        maxColor: '#e74c3c',\n      },\n      nodeSizeRange: {\n        onProperty: 'level',\n        minValue: 1,\n        maxValue: 88,\n        minSize: 20,\n        maxSize: 50,\n      },\n      captions: [\n        { value: { property: 'name' }, styles: ['bold'] },\n        { value: ' Lv', styles: [] },\n        { value: { property: 'level' }, styles: [] },\n      ],\n    },\n  },\n];\n\nconst caughtRelRules: StyleRule[] = [\n  {\n    match: { reltype: 'CAUGHT' },\n    apply: {\n      colorRange: {\n        onProperty: 'level',\n        minValue: 1,\n        minColor: '#00d2ff',\n        maxValue: 40,\n        maxColor: '#ff2d78',\n      },\n      relWidthRange: {\n        onProperty: 'level',\n        minValue: 1,\n        maxValue: 40,\n        minWidth: 1,\n        maxWidth: 8,\n      },\n      captions: [\n        { value: 'Caught @ Lv', styles: [] },\n        { value: { property: 'level' }, styles: ['bold'] },\n      ],\n      captionSize: 1.5,\n    },\n  },\n];\n\nconst otherNodeRules: StyleRule[] = [\n  { match: { label: 'Trainer' }, apply: { color: '#95a5a6' } },\n  { match: { label: 'Type' }, apply: { color: '#bdc3c7' } },\n  { match: { label: 'Gym' }, apply: { color: '#bdc3c7' } },\n];\n\nexport const colorRangeStyleRules: StyleRule[] = [\n  ...pokemonRules,\n  ...caughtRelRules,\n  ...otherNodeRules,\n];\n\nconst Component = () => {\n  return (\n    <div style={{ height: '600px' }}>\n      <GraphVisualization\n        nodes={advancedStoryGraph.nodes}\n        rels={advancedStoryGraph.rels}\n        className={containerClasses}\n        nvlStyleRules={colorRangeStyleRules}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"graph-visualization-range-styling.story.js","sourceRoot":"","sources":["../../../src/stories/graph-visualization-range-styling.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 { GraphVisualization } from '../graph-visualization';\nimport { type GraphStyleRule } from '../styling/style-types';\nimport { advancedStoryGraph, containerClasses } from './story-data';\n\nconst pokemonRules: GraphStyleRule[] = [\n  {\n    match: { label: 'Pokemon' },\n    apply: {\n      colorRange: {\n        onProperty: 'level',\n        minValue: 1,\n        minColor: '#3498db',\n        midValue: 45,\n        midColor: '#f1c40f',\n        maxValue: 88,\n        maxColor: '#e74c3c',\n      },\n      sizeRange: {\n        onProperty: 'level',\n        minValue: 1,\n        maxValue: 88,\n        minSize: 20,\n        maxSize: 50,\n      },\n      captions: {\n        text: [\n          { value: { property: 'name' }, styles: ['bold'] },\n          { value: ' Lv', styles: [] },\n          { value: { property: 'level' }, styles: [] },\n        ],\n      },\n    },\n  },\n];\n\nconst caughtRelRules: GraphStyleRule[] = [\n  {\n    match: { reltype: 'CAUGHT' },\n    apply: {\n      colorRange: {\n        onProperty: 'level',\n        minValue: 1,\n        minColor: '#00d2ff',\n        maxValue: 40,\n        maxColor: '#ff2d78',\n      },\n      width: { value: 4 },\n      widthRange: {\n        onProperty: 'level',\n        minValue: 1,\n        maxValue: 40,\n        minWidth: 1,\n        maxWidth: 8,\n      },\n      captions: {\n        text: [\n          { value: 'Caught @ Lv', styles: [] },\n          { value: { property: 'level' }, styles: ['bold'] },\n        ],\n        size: 1.5,\n      },\n    },\n  },\n];\n\nconst otherNodeRules: GraphStyleRule[] = [\n  { match: { label: 'Trainer' }, apply: { color: { value: '#95a5a6' } } },\n  { match: { label: 'Type' }, apply: { color: { value: '#bdc3c7' } } },\n  { match: { label: 'Gym' }, apply: { color: { value: '#bdc3c7' } } },\n];\n\nexport const colorRangeStyleRules: GraphStyleRule[] = [\n  ...pokemonRules,\n  ...caughtRelRules,\n  ...otherNodeRules,\n];\n\nconst Component = () => {\n  return (\n    <div style={{ height: '600px' }}>\n      <GraphVisualization\n        nodes={advancedStoryGraph.nodes}\n        rels={advancedStoryGraph.rels}\n        className={containerClasses}\n        styleRules={colorRangeStyleRules}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/stories/graph-visualization-rule-based-styling-advanced.story.js

@@ -27,7 +27,7 @@ const story_data_1 = require("./story-data");
 exports.defaultNodeRules = [
     {
         match: { label: null },
-        apply: { size: 10 },
+        apply: { size: { value: 10 } },
     },
 ];
 exports.trainerRules = [
@@ -36,14 +36,16 @@ exports.trainerRules = [
         where: { equal: [{ property: 'reputation' }, 'Gym Leader'] },
         priority: 20, // Gym Leaders are special - should override level-based styling
         apply: {
-            color: '#9b59b6',
-            captions: [
-                { value: { property: 'name' }, styles: ['bold'] },
-                { value: ' 🏆', styles: [] },
-                { value: ' Gym Leader', styles: ['italic'] },
-            ],
-            size: 45,
-            captionAlign: 'bottom',
+            color: { value: '#9b59b6' },
+            captions: {
+                text: [
+                    { value: { property: 'name' }, styles: ['bold'] },
+                    { value: ' 🏆', styles: [] },
+                    { value: ' Gym Leader', styles: ['italic'] },
+                ],
+                align: 'bottom',
+            },
+            size: { value: 45 },
         },
     },
     {
@@ -51,14 +53,16 @@ exports.trainerRules = [
         where: { greaterThanOrEqual: [{ property: 'level' }, 85] },
         priority: 10, // Base high-level styling
         apply: {
-            size: 30,
-            captions: [
-                { value: { property: 'name' }, styles: ['bold'] },
-                { value: ' (Lv ', styles: [] },
-                { value: { property: 'level' }, styles: [] },
-                { value: ')', styles: [] },
-            ],
-            captionSize: 2,
+            size: { value: 30 },
+            captions: {
+                text: [
+                    { value: { property: 'name' }, styles: ['bold'] },
+                    { value: ' (Lv ', styles: [] },
+                    { value: { property: 'level' }, styles: [] },
+                    { value: ')', styles: [] },
+                ],
+                size: 2,
+            },
         },
     },
 ];
@@ -69,23 +73,27 @@ exports.pokemonRules = [
         where: { endsWith: [{ property: 'name' }, 'saur'] },
         priority: 50,
         apply: {
-            color: '#2ecc71',
-            captions: [
-                { value: '🌿 ', styles: [] },
-                { value: { property: 'name' }, styles: ['bold', 'italic'] },
-            ],
+            color: { value: '#2ecc71' },
+            captions: {
+                text: [
+                    { value: '🌿 ', styles: [] },
+                    { value: { property: 'name' }, styles: ['bold', 'italic'] },
+                ],
+            },
         },
     },
     {
         match: { label: 'Pokemon' },
         where: { equal: [{ property: 'is_starter' }, true] },
         apply: {
-            color: '#f39c12',
-            captions: [
-                { value: { property: 'name' }, styles: ['bold'] },
-                { value: ' ⭐', styles: [] },
-            ],
-            size: 40,
+            color: { value: '#f39c12' },
+            captions: {
+                text: [
+                    { value: { property: 'name' }, styles: ['bold'] },
+                    { value: ' ⭐', styles: [] },
+                ],
+            },
+            size: { value: 40 },
         },
     },
     {
@@ -93,14 +101,16 @@ exports.pokemonRules = [
         where: { greaterThanOrEqual: [{ property: 'level' }, 85] },
         priority: 30, // High-level Pokemon override starter styling
         apply: {
-            color: '#c0392b',
-            captions: [
-                { value: '💪 ', styles: [] },
-                { value: { property: 'name' }, styles: ['bold'] },
-                { value: ' Lv', styles: [] },
-                { value: { property: 'level' }, styles: [] },
-            ],
-            size: 42,
+            color: { value: '#c0392b' },
+            captions: {
+                text: [
+                    { value: '💪 ', styles: [] },
+                    { value: { property: 'name' }, styles: ['bold'] },
+                    { value: ' Lv', styles: [] },
+                    { value: { property: 'level' }, styles: [] },
+                ],
+            },
+            size: { value: 42 },
         },
     },
     {
@@ -108,10 +118,12 @@ exports.pokemonRules = [
         where: { lessThan: [{ property: 'catch_rate' }, 50] },
         priority: 40, // Rare caption is our second highest priority
         apply: {
-            captions: [
-                { value: { property: 'name' }, styles: ['bold'] },
-                { value: ' (Rare)', styles: ['italic'] },
-            ],
+            captions: {
+                text: [
+                    { value: { property: 'name' }, styles: ['bold'] },
+                    { value: ' (Rare)', styles: ['italic'] },
+                ],
+            },
         },
     },
     {
@@ -124,12 +136,14 @@ exports.pokemonRules = [
         },
         priority: 15, // Baby Pokemon get special styling
         apply: {
-            size: 25,
-            color: '#95a5a6',
-            captions: [
-                { value: { property: 'name' }, styles: ['italic'] },
-                { value: ' (Smol)', styles: [] },
-            ],
+            size: { value: 25 },
+            color: { value: '#95a5a6' },
+            captions: {
+                text: [
+                    { value: { property: 'name' }, styles: ['italic'] },
+                    { value: ' (Smol)', styles: [] },
+                ],
+            },
         },
     },
 ];
@@ -143,7 +157,7 @@ exports.typeRules = [
             ],
         },
         apply: {
-            color: '#27ae60',
+            color: { value: '#27ae60' },
         },
     },
 ];
@@ -151,13 +165,15 @@ exports.gymRules = [
     {
         match: { label: 'Gym' },
         apply: {
-            color: '#8e44ad',
-            size: 48,
-            captionAlign: 'top',
-            captions: [
-                { value: '🏛️ ', styles: [] },
-                { value: { property: 'name' }, styles: ['bold', 'underline'] },
-            ],
+            color: { value: '#8e44ad' },
+            size: { value: 48 },
+            captions: {
+                text: [
+                    { value: '🏛️ ', styles: [] },
+                    { value: { property: 'name' }, styles: ['bold', 'underline'] },
+                ],
+                align: 'top',
+            },
         },
     },
 ];
@@ -166,20 +182,21 @@ exports.battledRelRules = [
         match: { reltype: 'BATTLED' },
         where: { equal: [{ property: 'won' }, true] },
         apply: {
-            color: '#27ae60',
-            width: 4,
-            captions: [{ value: 'WON BATTLE', styles: ['bold'] }],
-            captionSize: 2,
+            color: { value: '#27ae60' },
+            width: { value: 4 },
+            captions: { text: [{ value: 'WON BATTLE', styles: ['bold'] }], size: 2 },
         },
     },
     {
         match: { reltype: 'BATTLED' },
         where: { equal: [{ property: 'won' }, false] },
         apply: {
-            color: '#e74c3c',
-            width: 2,
-            captions: [{ value: 'LOST BATTLE', styles: ['italic'] }],
-            captionSize: 2,
+            color: { value: '#e74c3c' },
+            width: { value: 2 },
+            captions: {
+                text: [{ value: 'LOST BATTLE', styles: ['italic'] }],
+                size: 2,
+            },
         },
     },
 ];
@@ -187,13 +204,15 @@ exports.caughtRelRules = [
     {
         match: { reltype: 'CAUGHT' },
         apply: {
-            color: '#e91e63',
-            width: 3,
-            captions: [
-                { value: 'Caught @ Lv', styles: [] },
-                { value: { property: 'level' }, styles: ['bold'] },
-            ],
-            captionSize: 1.5,
+            color: { value: '#e91e63' },
+            width: { value: 3 },
+            captions: {
+                text: [
+                    { value: 'Caught @ Lv', styles: [] },
+                    { value: { property: 'level' }, styles: ['bold'] },
+                ],
+                size: 1.5,
+            },
         },
     },
 ];
@@ -201,9 +220,9 @@ exports.evolvesToRelRules = [
     {
         match: { reltype: 'EVOLVES_TO' },
         apply: {
-            color: '#16a085',
-            width: 2,
-            captions: [{ value: '→', styles: ['bold'] }],
+            color: { value: '#16a085' },
+            width: { value: 2 },
+            captions: { text: [{ value: '→', styles: ['bold'] }] },
         },
     },
     {
@@ -211,10 +230,12 @@ exports.evolvesToRelRules = [
         where: { equal: [{ property: 'method' }, 'Level'] },
         priority: 1,
         apply: {
-            captions: [
-                { value: '→ Lv', styles: [] },
-                { value: { property: 'level' }, styles: ['bold'] },
-            ],
+            captions: {
+                text: [
+                    { value: '→ Lv', styles: [] },
+                    { value: { property: 'level' }, styles: ['bold'] },
+                ],
+            },
         },
     },
     {
@@ -222,11 +243,13 @@ exports.evolvesToRelRules = [
         where: { not: { equal: [{ property: 'method' }, 'Level'] } },
         priority: 1,
         apply: {
-            color: '#8e44ad',
-            captions: [
-                { value: '→ ', styles: [] },
-                { value: { property: 'method' }, styles: ['italic'] },
-            ],
+            color: { value: '#8e44ad' },
+            captions: {
+                text: [
+                    { value: '→ ', styles: [] },
+                    { value: { property: 'method' }, styles: ['italic'] },
+                ],
+            },
         },
     },
 ];
@@ -241,7 +264,7 @@ exports.advancedStyleRules = [
     ...exports.evolvesToRelRules,
 ];
 const Component = () => {
-    return ((0, jsx_runtime_1.jsx)("div", { style: { height: '600px' }, children: (0, jsx_runtime_1.jsx)(graph_visualization_1.GraphVisualization, { nodes: story_data_1.advancedStoryGraph.nodes, rels: story_data_1.advancedStoryGraph.rels, className: story_data_1.containerClasses, nvlStyleRules: exports.advancedStyleRules }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { style: { height: '600px' }, children: (0, jsx_runtime_1.jsx)(graph_visualization_1.GraphVisualization, { nodes: story_data_1.advancedStoryGraph.nodes, rels: story_data_1.advancedStoryGraph.rels, className: story_data_1.containerClasses, styleRules: exports.advancedStyleRules }) }));
 };
 exports.default = Component;
 //# sourceMappingURL=graph-visualization-rule-based-styling-advanced.story.js.map