@xyo-network/react-node-renderer 2.64.3 → 2.64.5

package/dist/browser/index.cjs

@@ -34,9 +34,13 @@ __export(src_exports, {
   ConcentricLayout: () => ConcentricLayout,
   CyIconSet: () => CyIconSet,
   CytoscapeElements: () => CytoscapeElements,
+  CytoscapeInstanceContext: () => CytoscapeInstanceContext,
+  CytoscapeInstanceProvider: () => CytoscapeInstanceProvider,
   EdgeStyled: () => EdgeStyled,
   ModuleCardParser: () => ModuleCardParser,
   ModuleGraphFlexBox: () => ModuleGraphFlexBox,
+  ModuleGraphFlexBoxWithProvider: () => ModuleGraphFlexBoxWithProvider,
+  NodeBgStyles: () => NodeBgStyles,
   NodeIdStyles: () => NodeIdStyles,
   NodeRelationalGraph: () => NodeRelationalGraph,
   NodeRelationalGraphFlexBox: () => NodeRelationalGraphFlexBox,
@@ -46,6 +50,7 @@ __export(src_exports, {
   generateIconMap: () => generateIconMap,
   parseModuleType: () => parseModuleType,
   useCytoscapeElements: () => useCytoscapeElements,
+  useCytoscapeInstance: () => useCytoscapeInstance,
   useCytoscapeOptions: () => useCytoscapeOptions,
   useHoveredNode: () => useHoveredNode,
   useNewElements: () => useNewElements,
@@ -73,12 +78,31 @@ var ModuleCardParser = ({ module: module2 }) => {
 };
 
 // src/components/module/graph/GraphFlexBox.tsx
-var import_material5 = require("@mui/material");
+var import_material6 = require("@mui/material");
+
+// src/contexts/CytoscapeInstance/Context.ts
+var import_react_shared = require("@xyo-network/react-shared");
+var CytoscapeInstanceContext = (0, import_react_shared.createContextEx)();
+
+// src/contexts/CytoscapeInstance/Provider.tsx
+var import_react = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var CytoscapeInstanceProvider = ({ children, defaultInstance }) => {
+  const [cy, setCy] = (0, import_react.useState)(defaultInstance);
+  (0, import_react.useEffect)(() => {
+    setCy(defaultInstance);
+  }, [defaultInstance]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CytoscapeInstanceContext.Provider, { value: { cy, provided: true, setCy }, children });
+};
+
+// src/contexts/CytoscapeInstance/use.ts
+var import_react_shared2 = require("@xyo-network/react-shared");
+var useCytoscapeInstance = (required = false) => (0, import_react_shared2.useContextEx)(CytoscapeInstanceContext, "CytoscapeInstance", required);
 
 // src/hooks/cytoscape/useCytoscapeElements.ts
 var import_react_async_effect = require("@xylabs/react-async-effect");
 var import_node_model3 = require("@xyo-network/node-model");
-var import_react = require("react");
+var import_react2 = require("react");
 
 // src/Cytoscape/CytoscapeElements.ts
 var import_node_model2 = require("@xyo-network/node-model");
@@ -175,7 +199,7 @@ var CytoscapeElements = class _CytoscapeElements {
     try {
       const childElements = await _CytoscapeElements.recurseNodes(module2);
       childElements?.forEach((module3) => {
-        const newNode = _CytoscapeElements.buildNode(module3, newRootNode.data.id);
+        const newNode = _CytoscapeElements.buildNode(module3, { rootNodeId: newRootNode.data.id });
         newElements.push(newNode);
         const newEdge = _CytoscapeElements.buildEdge(newRootNode, newNode);
         newElements.push(newEdge);
@@ -186,7 +210,7 @@ var CytoscapeElements = class _CytoscapeElements {
       return [];
     }
   }
-  static buildNode(module2, rootNodeId) {
+  static buildNode(module2, properties) {
     const { address, config } = module2;
     const normalizedName = config.name ?? address.substring(0, 8);
     return {
@@ -194,13 +218,13 @@ var CytoscapeElements = class _CytoscapeElements {
         address,
         id: address,
         name: normalizedName,
-        rootNodeId,
-        type: parseModuleType(module2)
+        type: parseModuleType(module2),
+        ...properties
       }
     };
   }
   static buildRootNode = (module2) => {
-    return _CytoscapeElements.buildNode(module2);
+    return _CytoscapeElements.buildNode(module2, { root: true });
   };
   static normalizeName(name) {
     if (!name)
@@ -280,10 +304,11 @@ var EdgeStyled = (lineColor, targetArrowColor) => ({
     width: 3
   }
 });
+var NodeBgStyles = (bgColor) => ["background-color", bgColor];
 
 // src/hooks/cytoscape/useCytoscapeElements.ts
 var useCytoscapeElements = (module2) => {
-  const [elements, setElements] = (0, import_react.useState)([]);
+  const [elements, setElements] = (0, import_react2.useState)([]);
   (0, import_react_async_effect.useAsyncEffect)(
     // eslint-disable-next-line react-hooks/exhaustive-deps
     async () => {
@@ -294,7 +319,7 @@ var useCytoscapeElements = (module2) => {
     },
     [module2]
   );
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     let attachedListener = void 0;
     let detachedListener = void 0;
     if (module2 && (0, import_node_model3.isNodeInstance)(module2)) {
@@ -316,22 +341,22 @@ var useCytoscapeElements = (module2) => {
 };
 
 // src/hooks/cytoscape/useCytoscapeOptions.ts
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/hooks/cytoscape/useCytoscapeStyle.tsx
 var import_material2 = require("@mui/material");
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/hooks/cytoscape/useIcons.tsx
 var import_material = require("@mui/material");
-var import_react2 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_react3 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var useIcons = () => {
   const theme = (0, import_material.useTheme)();
-  const icons = (0, import_react2.useMemo)(() => {
+  const icons = (0, import_react3.useMemo)(() => {
     const iconMap = generateIconMap();
     return Object.entries(CyIconSet).reduce((acc, [name, IconComponent]) => {
-      const icon = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IconComponent, { fontSize: "small" });
+      const icon = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconComponent, { fontSize: "small" });
       acc[name] = encodeSvg(icon, theme.palette.getContrastText(theme.palette.text.primary));
       return acc;
     }, iconMap);
@@ -343,7 +368,7 @@ var useIcons = () => {
 var useCytoscapeStyle = (hideLabels = false) => {
   const theme = (0, import_material2.useTheme)();
   const icons = useIcons();
-  const style = (0, import_react3.useMemo)(
+  const style = (0, import_react4.useMemo)(
     () => [
       NodeIdStyles(theme.palette.text.primary, theme.palette.getContrastText(theme.palette.text.primary)),
       NodeStyled(icons, theme.palette.primary.main, hideLabels),
@@ -357,12 +382,14 @@ var useCytoscapeStyle = (hideLabels = false) => {
 // src/hooks/cytoscape/useCytoscapeOptions.ts
 var useCytoscapeOptions = (elements, style, layout) => {
   const defaultStyle = useCytoscapeStyle();
-  const options = (0, import_react4.useMemo)(() => {
-    if (elements && layout && style) {
+  const resolvedLayout = layout ?? ConcentricLayout;
+  const resolvedStyle = style ?? defaultStyle;
+  const options = (0, import_react5.useMemo)(() => {
+    if (elements && resolvedLayout && resolvedStyle) {
       return {
         elements,
-        layout: layout ?? ConcentricLayout,
-        style: style ?? defaultStyle
+        layout: resolvedLayout,
+        style: resolvedStyle
       };
     }
   }, [elements, layout, style]);
@@ -370,21 +397,11 @@ var useCytoscapeOptions = (elements, style, layout) => {
 };
 
 // src/hooks/cytoscape/useHoveredNode.tsx
-var import_react5 = require("react");
-
-// src/contexts/CytoscapeInstance/Context.ts
-var import_react_shared = require("@xyo-network/react-shared");
-var CytoscapeInstanceContext = (0, import_react_shared.createContextEx)();
-
-// src/contexts/CytoscapeInstance/use.ts
-var import_react_shared2 = require("@xyo-network/react-shared");
-var useCytoscapeInstance = (required = false) => (0, import_react_shared2.useContextEx)(CytoscapeInstanceContext, "CytoscapeInstance", required);
-
-// src/hooks/cytoscape/useHoveredNode.tsx
+var import_react6 = require("react");
 var useHoveredNode = (renderedElements) => {
   const { cy } = useCytoscapeInstance(true);
-  const [hoveredNode, setHoveredNode] = (0, import_react5.useState)();
-  const nodeListener = (0, import_react5.useCallback)((node) => {
+  const [hoveredNode, setHoveredNode] = (0, import_react6.useState)();
+  const nodeListener = (0, import_react6.useCallback)((node) => {
     node.on("mouseover tap", () => {
       setHoveredNode(node);
     });
@@ -392,12 +409,12 @@ var useHoveredNode = (renderedElements) => {
       setHoveredNode(void 0);
     });
   }, []);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (renderedElements) {
       renderedElements.nodes().forEach(nodeListener);
     }
   }, [nodeListener, renderedElements]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     cy?.ready(() => {
       cy.nodes().forEach(nodeListener);
     });
@@ -407,19 +424,10 @@ var useHoveredNode = (renderedElements) => {
 
 // src/hooks/cytoscape/useNewElements.tsx
 var import_react_node = require("@xyo-network/react-node");
-var import_react6 = require("react");
 var useNewElements = (selectedElement) => {
-  const { cy } = useCytoscapeInstance(true);
   const { address: selectedAddress } = selectedElement?.data() ?? {};
   const [module2] = (0, import_react_node.useModuleFromNode)(selectedAddress);
   const newElements = useCytoscapeElements(module2);
-  (0, import_react6.useEffect)(() => {
-    if (selectedAddress) {
-      const element = cy?.$(`node[id="${selectedAddress}"]`);
-      if (element?.length)
-        cy?.center(element);
-    }
-  }, [cy, selectedAddress]);
   return newElements;
 };
 
@@ -453,20 +461,44 @@ var useRenderNewElements = (newElements = [], hideLabels) => {
 
 // src/hooks/cytoscape/useSelectedElement.tsx
 var import_react9 = require("react");
+
+// src/hooks/cytoscape/useToggleSelectedElement.tsx
+var import_material3 = require("@mui/material");
+var useToggleSelectedElement = (setSelectedElement) => {
+  const { cy } = useCytoscapeInstance(true);
+  const theme = (0, import_material3.useTheme)();
+  const updateStyles = (element, styles) => {
+    cy?.style().selector(`node[id="${element.data().id}"]`).style(...styles);
+  };
+  const toggleSelectedElement = (element) => {
+    setSelectedElement((previousSelectedElement) => {
+      if (previousSelectedElement) {
+        updateStyles(previousSelectedElement, NodeBgStyles(theme.palette.primary.main));
+      }
+      return element;
+    });
+    updateStyles(element, NodeBgStyles(theme.palette.secondary.main));
+  };
+  return toggleSelectedElement;
+};
+
+// src/hooks/cytoscape/useSelectedElement.tsx
 var useSelectedElement = () => {
   const { cy } = useCytoscapeInstance(true);
   const [selectedElement, setSelectedElement] = (0, import_react9.useState)();
+  const toggleSelectedElement = useToggleSelectedElement(setSelectedElement);
   (0, import_react9.useEffect)(() => {
     const listener = (event) => {
       const element = event.target[0];
-      if (element.isNode())
-        setSelectedElement(element);
+      if (element.isNode()) {
+        toggleSelectedElement(element);
+      }
     };
     cy?.on("select", listener);
     return () => {
       cy?.off("select", listener);
     };
-  }, [cy, setSelectedElement]);
+  }, [cy, toggleSelectedElement]);
   return selectedElement;
 };
 
@@ -474,23 +506,23 @@ var useSelectedElement = () => {
 var import_cytoscape = require("cytoscape");
 var import_cytoscape_cola = __toESM(require("cytoscape-cola"), 1);
 var import_react10 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var WithExtensions = ({ children }) => {
   const [initialized, setInitialized] = (0, import_react10.useState)(false);
   (0, import_react10.useEffect)(() => {
     (0, import_cytoscape.use)(import_cytoscape_cola.default);
     setInitialized(true);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: initialized ? children : void 0 });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: initialized ? children : void 0 });
 };
 
 // src/components/RelationalGraph.tsx
-var import_material3 = require("@mui/material");
+var import_material4 = require("@mui/material");
 var import_react_flexbox = require("@xylabs/react-flexbox");
 var import_react_shared3 = require("@xyo-network/react-shared");
 var import_cytoscape2 = __toESM(require("cytoscape"), 1);
 var import_react11 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var NodeRelationalGraphFlexBox = (0, import_react11.forwardRef)(({ actions, children, options, ...props }, ref) => {
   const [cy, setCy] = (0, import_react11.useState)();
   const { setCy: setCyContext } = useCytoscapeInstance();
@@ -511,17 +543,17 @@ var NodeRelationalGraphFlexBox = (0, import_react11.forwardRef)(({ actions, chil
   (0, import_react11.useEffect)(() => {
     setCyContext?.(cy);
   }, [cy, setCyContext]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_flexbox.FlexCol, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ActionsContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_material3.ButtonGroup, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_flexbox.FlexCol, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ActionsContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: actions ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material4.ButtonGroup, { children: [
       actions,
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material3.Button, { size: "small", variant: "contained", onClick: handleReset, children: "Reset" })
-    ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_flexbox.FlexCol, { alignItems: "stretch", height: "100%", position: "absolute", ref: sharedRef, width: "100%" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material4.Button, { size: "small", variant: "contained", onClick: handleReset, children: "Reset View" })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material4.Button, { size: "small", variant: "contained", onClick: handleReset, children: "Reset" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_flexbox.FlexCol, { alignItems: "stretch", height: "100%", position: "absolute", ref: sharedRef, width: "100%" }),
     children
   ] });
 });
 NodeRelationalGraphFlexBox.displayName = "NodeRelationalGraph";
-var ActionsContainer = (0, import_material3.styled)(import_react_flexbox.FlexRow, { name: "ActionsContainer" })(({ theme }) => ({
+var ActionsContainer = (0, import_material4.styled)(import_react_flexbox.FlexRow, { name: "ActionsContainer" })(({ theme }) => ({
   flexWrap: "wrap",
   gap: theme.spacing(1),
   position: "absolute",
@@ -532,34 +564,37 @@ var ActionsContainer = (0, import_material3.styled)(import_react_flexbox.FlexRow
 var NodeRelationalGraph = NodeRelationalGraphFlexBox;
 
 // src/components/module/graph/NodeHover.tsx
+var import_react_flexbox3 = require("@xylabs/react-flexbox");
 var import_react12 = require("react");
 
 // src/components/module/graph/Popper.tsx
-var import_material4 = require("@mui/material");
+var import_material5 = require("@mui/material");
 var import_react_flexbox2 = require("@xylabs/react-flexbox");
 var import_react_identicon = require("@xylabs/react-identicon");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var ModuleHoverPopper = ({ address, element, name, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material4.Popper, { anchorEl: element, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_flexbox2.FlexCol, { gap: 2, p: 2, paper: true, sx: { backgroundColor: (theme) => (0, import_material4.alpha)(theme.palette.background.paper, 0.95) }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_flexbox2.FlexRow, { gap: 2, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_identicon.Identicon, { value: address, size: 24 }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material4.Typography, { children: name })
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: element ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material5.Popper, { anchorEl: element, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_flexbox2.FlexCol, { gap: 2, p: 2, paper: true, sx: { backgroundColor: (theme) => (0, import_material5.alpha)(theme.palette.background.paper, 0.95) }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_flexbox2.FlexRow, { gap: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_identicon.Identicon, { value: address, size: 24 }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material5.Typography, { children: name })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material4.Chip, { label: address, color: "primary" })
-  ] }) });
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material5.Chip, { label: address, color: "primary" })
+  ] }) }) : null });
 };
 
 // src/components/module/graph/NodeHover.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var ModuleGraphNodeHover = ({ node }) => {
   const { address, name } = node?.data() ?? {};
   const [boundingBox, setBoundingBox] = (0, import_react12.useState)(node?.renderedBoundingBox());
   const ref = (0, import_react12.useRef)(null);
   const [currentEl, setCurrentEl] = (0, import_react12.useState)(null);
-  (0, import_react12.useLayoutEffect)(() => {
-    if (node && ref.current) {
+  (0, import_react12.useEffect)(() => {
+    setCurrentEl(null);
+  }, [node]);
+  (0, import_react12.useEffect)(() => {
+    if (node) {
       setBoundingBox(node.renderedBoundingBox());
-      setCurrentEl(ref.current);
     }
     const listener = () => {
       setBoundingBox(node?.renderedBoundingBox());
@@ -569,12 +604,16 @@ var ModuleGraphNodeHover = ({ node }) => {
       node?.off("position", void 0, listener);
     };
   }, [node]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: node ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      "div",
+  (0, import_react12.useLayoutEffect)(() => {
+    setCurrentEl(ref.current);
+  }, [boundingBox]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_react_flexbox3.FlexCol,
       {
         ref,
-        style: {
+        sx: {
+          // For easier debugging of the 'ghost' element that matches the hovered cytoscape node
           // backgroundColor: '#fff',
           // opacity: 0.25,
           cursor: "pointer",
@@ -587,36 +626,39 @@ var ModuleGraphNodeHover = ({ node }) => {
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ModuleHoverPopper, { address, element: currentEl, name, placement: "top", open: true })
-  ] }) : null });
+    node ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ModuleHoverPopper, { address, element: currentEl, name, placement: "top", open: true, sx: { zIndex: 2 } }) }) : null
+  ] });
 };
 
 // src/components/module/graph/GraphFlexBox.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var ModuleGraphFlexBox = ({ rootModule, ...props }) => {
   const { handleToggleLabels, hideLabels, options } = useRelationalGraphOptions(rootModule ?? void 0);
   const selectedElement = useSelectedElement();
   const newElements = useNewElements(selectedElement);
   const renderedElements = useRenderNewElements(newElements, hideLabels);
   const hoveredNode = useHoveredNode(renderedElements);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(WithExtensions, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(WithExtensions, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     NodeRelationalGraphFlexBox,
     {
-      actions: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material5.Button, { size: "small", onClick: handleToggleLabels, variant: "contained", children: "Toggle Labels" }),
+      actions: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.Button, { size: "small", onClick: handleToggleLabels, variant: "contained", children: "Toggle Labels" }),
       options,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ModuleGraphNodeHover, { node: hoveredNode })
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ModuleGraphNodeHover, { node: hoveredNode })
     }
   ) });
 };
+var ModuleGraphFlexBoxWithProvider = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CytoscapeInstanceProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ModuleGraphFlexBox, { ...props }) });
+};
 
 // src/components/ProvidedNodeRenderer.tsx
 var import_react_node2 = require("@xyo-network/react-node");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var ProvidedNodeRenderer = ({ node, ...props }) => {
   const [providedNode] = (0, import_react_node2.useProvidedNode)();
   const elements = useCytoscapeElements(node ?? providedNode);
   const options = useCytoscapeOptions(elements);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(NodeRelationalGraphFlexBox, { alignItems: "stretch", flexGrow: 1, height: "100%", options, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(NodeRelationalGraphFlexBox, { alignItems: "stretch", flexGrow: 1, height: "100%", options, ...props });
 };
 //# sourceMappingURL=index.cjs.map