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

package/dist/node/components/module/index.cjs

@@ -54,7 +54,8 @@ var ModuleCardParser = ({ module: module2 }) => {
 };
 
 // src/components/module/graph/GraphFlexBox.tsx
-var import_material6 = require("@mui/material");
+var import_material7 = require("@mui/material");
+var import_react14 = require("react");
 
 // src/contexts/CytoscapeInstance/Context.ts
 var import_react_shared = require("@xyo-network/react-shared");
@@ -75,7 +76,7 @@ var CytoscapeInstanceProvider = ({ children, defaultInstance }) => {
 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
+// src/hooks/cytoscape/elements/useCytoscapeElements.ts
 var import_react_async_effect = require("@xylabs/react-async-effect");
 var import_node_model3 = require("@xyo-network/node-model");
 var import_react2 = require("react");
@@ -175,7 +176,7 @@ var CytoscapeElements = class _CytoscapeElements {
     try {
       const childElements = await _CytoscapeElements.recurseNodes(module2);
       childElements == null ? void 0 : childElements.forEach((module3) => {
-        const newNode = _CytoscapeElements.buildNode(module3, { rootNodeId: newRootNode.data.id });
+        const newNode = _CytoscapeElements.buildNode(module3);
         newElements.push(newNode);
         const newEdge = _CytoscapeElements.buildEdge(newRootNode, newNode);
         newElements.push(newEdge);
@@ -186,10 +187,11 @@ var CytoscapeElements = class _CytoscapeElements {
       return [];
     }
   }
-  static buildNode(module2, properties) {
+  static buildNode(module2, properties, classes) {
     const { address, config } = module2;
     const normalizedName = config.name ?? address.substring(0, 8);
     return {
+      classes,
       data: {
         address,
         id: address,
@@ -200,7 +202,7 @@ var CytoscapeElements = class _CytoscapeElements {
     };
   }
   static buildRootNode = (module2) => {
-    return _CytoscapeElements.buildNode(module2, { root: true });
+    return _CytoscapeElements.buildNode(module2, {}, ["activeNode"]);
   };
   static normalizeName(name) {
     if (!name)
@@ -245,7 +247,7 @@ var CyIconSet = {
 };
 
 // src/Cytoscape/CytoscapeStyles.ts
-var NodeIdStyles = (color, outlineColor) => ({
+var NodeWithName = (color, outlineColor) => ({
   selector: "node[name]",
   style: {
     color,
@@ -258,7 +260,7 @@ var NodeIdStyles = (color, outlineColor) => ({
     "text-valign": "top"
   }
 });
-var NodeStyled = (icons, bgColor, hideLabels = false) => ({
+var Node = (icons, bgColor, hideLabels = false) => ({
   selector: "node",
   style: {
     "background-color": bgColor,
@@ -269,6 +271,12 @@ var NodeStyled = (icons, bgColor, hideLabels = false) => ({
     shape: "round-rectangle"
   }
 });
+var NodeAsRoot = (bgColor) => ({
+  selector: ".activeNode",
+  style: {
+    "background-color": bgColor
+  }
+});
 var EdgeStyled = (lineColor, targetArrowColor) => ({
   selector: "edge",
   style: {
@@ -280,9 +288,8 @@ var EdgeStyled = (lineColor, targetArrowColor) => ({
     width: 3
   }
 });
-var NodeBgStyles = (bgColor) => ["background-color", bgColor];
 
-// src/hooks/cytoscape/useCytoscapeElements.ts
+// src/hooks/cytoscape/elements/useCytoscapeElements.ts
 var useCytoscapeElements = (module2) => {
   const [elements, setElements] = (0, import_react2.useState)([]);
   (0, import_react_async_effect.useAsyncEffect)(
@@ -316,20 +323,97 @@ var useCytoscapeElements = (module2) => {
   return elements;
 };
 
-// src/hooks/cytoscape/useCytoscapeOptions.ts
+// src/hooks/cytoscape/elements/useHoveredNode.tsx
+var import_react3 = require("react");
+var useHoveredNode = (renderedElements) => {
+  const { cy } = useCytoscapeInstance(true);
+  const [hoveredNode, setHoveredNode] = (0, import_react3.useState)();
+  const nodeListener = (0, import_react3.useCallback)((node) => {
+    node.on("mouseover tap", () => {
+      setHoveredNode(node);
+    });
+  }, []);
+  (0, import_react3.useEffect)(() => {
+    if (renderedElements) {
+      renderedElements.nodes().forEach(nodeListener);
+    }
+  }, [nodeListener, renderedElements]);
+  (0, import_react3.useEffect)(() => {
+    cy == null ? void 0 : cy.ready(() => {
+      cy.nodes().forEach(nodeListener);
+    });
+  }, [cy, nodeListener]);
+  return [hoveredNode, setHoveredNode];
+};
+
+// src/hooks/cytoscape/elements/useNewElements.tsx
+var import_react_node = require("@xyo-network/react-node");
+var useNewElements = (selectedElement) => {
+  const { address: selectedAddress } = (selectedElement == null ? void 0 : selectedElement.data()) ?? {};
+  const [module2] = (0, import_react_node.useModuleFromNode)(selectedAddress);
+  const newElements = useCytoscapeElements(module2);
+  return newElements;
+};
+
+// src/hooks/cytoscape/elements/useRenderNewElements.tsx
+var import_react4 = require("react");
+var useRenderNewElements = (newElements = [], hideLabels) => {
+  const { cy } = useCytoscapeInstance(true);
+  const [renderedElements, setRenderedElements] = (0, import_react4.useState)();
+  (0, import_react4.useEffect)(() => {
+    if (newElements.length > 1) {
+      const renderedElements2 = cy == null ? void 0 : cy.add(newElements);
+      setRenderedElements(renderedElements2);
+      cy == null ? void 0 : cy.layout(ColaLayout).run();
+    }
+  }, [cy, hideLabels, newElements]);
+  return renderedElements;
+};
+
+// src/hooks/cytoscape/elements/useSelectedElement.tsx
 var import_react5 = require("react");
+var useSelectedElement = () => {
+  const [selectedElement, setSelectedElement] = (0, import_react5.useState)();
+  const { cy } = useCytoscapeInstance(true);
+  const updateStyles = (element) => {
+    const nodes = cy == null ? void 0 : cy.nodes();
+    nodes == null ? void 0 : nodes.toggleClass("activeNode", false);
+    element.toggleClass("activeNode", true);
+  };
+  const toggleSelectedElement = (address) => {
+    var _a;
+    const selectedNode = (_a = cy == null ? void 0 : cy.nodes(`[id="${address}"]`)) == null ? void 0 : _a[0];
+    if (selectedNode) {
+      setSelectedElement(selectedNode);
+      updateStyles(selectedNode);
+    }
+  };
+  return { selectedElement, toggleSelectedElement };
+};
+
+// src/hooks/cytoscape/elements/useElements.tsx
+var useElements = (hideLabels) => {
+  const { selectedElement, toggleSelectedElement } = useSelectedElement();
+  const newElements = useNewElements(selectedElement);
+  const renderedElements = useRenderNewElements(newElements, hideLabels);
+  const [hoveredNode, setHoveredNode] = useHoveredNode(renderedElements);
+  return { hoveredNode, setHoveredNode, toggleSelectedElement };
+};
+
+// src/hooks/cytoscape/useCytoscapeOptions.ts
+var import_react8 = require("react");
 
 // src/hooks/cytoscape/useCytoscapeStyle.tsx
 var import_material2 = require("@mui/material");
-var import_react4 = require("react");
+var import_react7 = require("react");
 
 // src/hooks/cytoscape/useIcons.tsx
 var import_material = require("@mui/material");
-var import_react3 = require("react");
+var import_react6 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var useIcons = () => {
   const theme = (0, import_material.useTheme)();
-  const icons = (0, import_react3.useMemo)(() => {
+  const icons = (0, import_react6.useMemo)(() => {
     const iconMap = generateIconMap();
     return Object.entries(CyIconSet).reduce((acc, [name, IconComponent]) => {
       const icon = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconComponent, { fontSize: "small" });
@@ -344,10 +428,11 @@ var useIcons = () => {
 var useCytoscapeStyle = (hideLabels = false) => {
   const theme = (0, import_material2.useTheme)();
   const icons = useIcons();
-  const style = (0, import_react4.useMemo)(
+  const style = (0, import_react7.useMemo)(
     () => [
-      NodeIdStyles(theme.palette.text.primary, theme.palette.getContrastText(theme.palette.text.primary)),
-      NodeStyled(icons, theme.palette.primary.main, hideLabels),
+      Node(icons, theme.palette.primary.main, hideLabels),
+      NodeWithName(theme.palette.text.primary, theme.palette.getContrastText(theme.palette.text.primary)),
+      NodeAsRoot(theme.palette.secondary.main),
       EdgeStyled(theme.palette.divider, theme.palette.divider)
     ],
     [icons, hideLabels, theme]
@@ -360,7 +445,7 @@ var useCytoscapeOptions = (elements, style, layout) => {
   const defaultStyle = useCytoscapeStyle();
   const resolvedLayout = layout ?? ConcentricLayout;
   const resolvedStyle = style ?? defaultStyle;
-  const options = (0, import_react5.useMemo)(() => {
+  const options = (0, import_react8.useMemo)(() => {
     if (elements && resolvedLayout && resolvedStyle) {
       return {
         elements,
@@ -372,45 +457,66 @@ var useCytoscapeOptions = (elements, style, layout) => {
   return options;
 };
 
-// src/hooks/cytoscape/useHoveredNode.tsx
-var import_react6 = require("react");
-var useHoveredNode = (renderedElements) => {
-  const { cy } = useCytoscapeInstance(true);
-  const [hoveredNode, setHoveredNode] = (0, import_react6.useState)();
-  const nodeListener = (0, import_react6.useCallback)((node) => {
-    node.on("mouseover tap", () => {
-      setHoveredNode(node);
-    });
-    node.on("mouseout", () => {
-      setHoveredNode(void 0);
-    });
-  }, []);
-  (0, import_react6.useEffect)(() => {
-    if (renderedElements) {
-      renderedElements.nodes().forEach(nodeListener);
+// src/hooks/cytoscape/useModuleDetails.tsx
+var import_react_promise = require("@xylabs/react-promise");
+var import_react9 = require("react");
+var useModuleDetails = (rootModule, onFoundModule) => {
+  const { cy } = useCytoscapeInstance();
+  const [moduleAddress, setModuleAddress] = (0, import_react9.useState)();
+  const [foundModule] = (0, import_react_promise.usePromise)(async () => {
+    if (moduleAddress === null)
+      return null;
+    if (moduleAddress && rootModule) {
+      const foundModule2 = await rootModule.resolve(moduleAddress);
+      return foundModule2 ? foundModule2 : null;
     }
-  }, [nodeListener, renderedElements]);
-  (0, import_react6.useEffect)(() => {
-    cy == null ? void 0 : cy.ready(() => {
-      cy.nodes().forEach(nodeListener);
+  }, [moduleAddress, rootModule]);
+  (0, import_react9.useEffect)(() => {
+    const resizeObserver = new ResizeObserver(() => {
+      var _a;
+      if (moduleAddress === null) {
+        setTimeout(() => cy == null ? void 0 : cy.center(), 100);
+      } else if (foundModule && cy) {
+        const node = (_a = cy.nodes(`[id="${moduleAddress}"]`)) == null ? void 0 : _a[0];
+        setTimeout(() => cy.center(node), 100);
+      }
     });
-  }, [cy, nodeListener]);
-  return hoveredNode;
-};
-
-// src/hooks/cytoscape/useNewElements.tsx
-var import_react_node = require("@xyo-network/react-node");
-var useNewElements = (selectedElement) => {
-  const { address: selectedAddress } = (selectedElement == null ? void 0 : selectedElement.data()) ?? {};
-  const [module2] = (0, import_react_node.useModuleFromNode)(selectedAddress);
-  const newElements = useCytoscapeElements(module2);
-  return newElements;
+    const container = cy == null ? void 0 : cy.container();
+    if (container) {
+      resizeObserver.observe(container);
+    }
+    return () => {
+      if (container)
+        resizeObserver.unobserve(container);
+    };
+  }, [cy, moduleAddress, foundModule, rootModule == null ? void 0 : rootModule.address]);
+  (0, import_react9.useEffect)(() => {
+    if (foundModule) {
+      onFoundModule == null ? void 0 : onFoundModule();
+    }
+  }, [cy, moduleAddress, foundModule, onFoundModule]);
+  const onModuleDetails = (address) => {
+    const moduleNode = cy == null ? void 0 : cy.nodes(`[id="${address}"]`);
+    const rootModuleNode = cy == null ? void 0 : cy.nodes(`[id="${rootModule == null ? void 0 : rootModule.address}"]`);
+    const foundModuleNode = cy == null ? void 0 : cy.nodes(`[id="${foundModule == null ? void 0 : foundModule.address}"]`);
+    const notModuleNode = cy == null ? void 0 : cy.nodes(`[id != "${address}"]`);
+    if (address) {
+      moduleNode == null ? void 0 : moduleNode.toggleClass("activeNode", true);
+      notModuleNode == null ? void 0 : notModuleNode.toggleClass("activeNode", false);
+    } else {
+      notModuleNode == null ? void 0 : notModuleNode.toggleClass("activeNode", false);
+      const activeNode = (foundModuleNode == null ? void 0 : foundModuleNode.length) ? foundModuleNode : rootModuleNode;
+      activeNode == null ? void 0 : activeNode.toggleClass("activeNode", true);
+    }
+    setModuleAddress(address);
+  };
+  return { module: foundModule, onModuleDetails };
 };
 
 // src/hooks/cytoscape/useRelationalGraphOptions.tsx
-var import_react7 = require("react");
+var import_react10 = require("react");
 var useRelationalGraphOptions = (module2) => {
-  const [hideLabels, setHideLabels] = (0, import_react7.useState)(true);
+  const [hideLabels, setHideLabels] = (0, import_react10.useState)(true);
   const handleToggleLabels = () => {
     setHideLabels((oldValue) => !oldValue);
   };
@@ -420,154 +526,102 @@ var useRelationalGraphOptions = (module2) => {
   return { handleToggleLabels, hideLabels, options };
 };
 
-// src/hooks/cytoscape/useRenderNewElements.tsx
-var import_react8 = require("react");
-var useRenderNewElements = (newElements = [], hideLabels) => {
-  const { cy } = useCytoscapeInstance(true);
-  const [renderedElements, setRenderedElements] = (0, import_react8.useState)();
-  (0, import_react8.useEffect)(() => {
-    if (newElements.length > 1) {
-      const renderedElements2 = cy == null ? void 0 : cy.add(newElements);
-      setRenderedElements(renderedElements2);
-      cy == null ? void 0 : cy.layout(ColaLayout).run();
-    }
-  }, [cy, hideLabels, newElements]);
-  return renderedElements;
-};
-
-// 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 == null ? void 0 : 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()) {
-        toggleSelectedElement(element);
-      }
-    };
-    cy == null ? void 0 : cy.on("select", listener);
-    return () => {
-      cy == null ? void 0 : cy.off("select", listener);
-    };
-  }, [cy, toggleSelectedElement]);
-  return selectedElement;
-};
-
 // src/components/cytoscape-extensions/WithExtensions.tsx
 var import_cytoscape = require("cytoscape");
 var import_cytoscape_cola = __toESM(require("cytoscape-cola"), 1);
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var WithExtensions = ({ children }) => {
-  const [initialized, setInitialized] = (0, import_react10.useState)(false);
-  (0, import_react10.useEffect)(() => {
+  const [initialized, setInitialized] = (0, import_react11.useState)(false);
+  (0, import_react11.useEffect)(() => {
     (0, import_cytoscape.use)(import_cytoscape_cola.default);
     setInitialized(true);
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: initialized ? children : void 0 });
 };
 
-// src/components/RelationalGraph.tsx
-var import_material4 = require("@mui/material");
+// src/components/relational/graph/Graph.tsx
+var import_material3 = 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_react12 = require("react");
 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();
-  const sharedRef = (0, import_react_shared3.useShareForwardedRef)(ref);
-  const handleReset = () => {
-    cy == null ? void 0 : cy.reset();
-    cy == null ? void 0 : cy.fit(void 0, 20);
-  };
-  (0, import_react11.useEffect)(() => {
-    if (sharedRef) {
-      const newCy = (0, import_cytoscape2.default)({
-        container: sharedRef.current,
-        ...options
-      });
-      setCy(newCy);
-    }
-  }, [options, sharedRef]);
-  (0, import_react11.useEffect)(() => {
-    setCyContext == null ? void 0 : setCyContext(cy);
-  }, [cy, setCyContext]);
-  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_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
-  ] });
-});
+var NodeRelationalGraphFlexBox = (0, import_react12.forwardRef)(
+  ({ actions, children, showDetails, detail, options, ...props }, ref) => {
+    const theme = (0, import_material3.useTheme)();
+    const [cy, setCy] = (0, import_react12.useState)();
+    const { setCy: setCyContext } = useCytoscapeInstance();
+    const sharedRef = (0, import_react_shared3.useShareForwardedRef)(ref);
+    const handleReset = () => {
+      cy == null ? void 0 : cy.reset();
+      cy == null ? void 0 : cy.fit(void 0, 20);
+    };
+    (0, import_react12.useEffect)(() => {
+      if (sharedRef) {
+        const newCy = (0, import_cytoscape2.default)({
+          container: sharedRef.current,
+          ...options
+        });
+        setCy(newCy);
+      }
+    }, [options, sharedRef]);
+    (0, import_react12.useEffect)(() => {
+      setCyContext == null ? void 0 : setCyContext(cy);
+    }, [cy, setCyContext]);
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_flexbox.FlexCol, { id: "relational-graph-wrapper", ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_flexbox.FlexRow, { justifyContent: "start", width: "100%", children: actions === null ? null : actions ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material3.ButtonGroup, { children: [
+        actions,
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material3.Button, { size: "small", variant: "contained", onClick: handleReset, children: "Reset View" })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material3.Button, { size: "small", variant: "contained", onClick: handleReset, children: "Reset" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_flexbox.FlexGrowRow, { width: "100%", alignItems: "start", children: [
+        showDetails ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_flexbox.FlexCol, { height: "100%", width: "85%", children: detail }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          import_react_flexbox.FlexCol,
+          {
+            justifyContent: "start",
+            classes: "cytoscape-wrap",
+            width: showDetails ? "15%" : "100%",
+            height: showDetails ? "50%" : "100%",
+            border: showDetails ? `1px solid ${theme.palette.divider}` : void 0,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_flexbox.FlexCol, { alignItems: "stretch", position: "absolute", width: "100%", height: "100%", ref: sharedRef }),
+              children
+            ]
+          }
+        )
+      ] })
+    ] });
+  }
+);
 NodeRelationalGraphFlexBox.displayName = "NodeRelationalGraph";
-var ActionsContainer = (0, import_material4.styled)(import_react_flexbox.FlexRow, { name: "ActionsContainer" })(({ theme }) => ({
-  flexWrap: "wrap",
-  gap: theme.spacing(1),
-  position: "absolute",
-  right: "10px",
-  top: "10px",
-  zIndex: 2
-}));
-
-// 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_material5 = require("@mui/material");
+// src/components/module/graph/DetailsFlexbox.tsx
+var import_CancelRounded = __toESM(require("@mui/icons-material/CancelRounded"), 1);
+var import_material4 = require("@mui/material");
 var import_react_flexbox2 = require("@xylabs/react-flexbox");
-var import_react_identicon = require("@xylabs/react-identicon");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var ModuleHoverPopper = ({ address, element, name, ...props }) => {
-  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_runtime6.jsx)(import_material5.Chip, { label: address, color: "primary" })
-  ] }) }) : null });
+var DetailsFlexbox = ({ children, onClose }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_flexbox2.FlexGrowCol, { alignItems: "end", justifyContent: "start", id: "module-detail", width: "100%", p: 2, gap: 2, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_flexbox2.FlexRow, { justifyContent: "end", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material4.IconButton, { onClick: onClose, size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_CancelRounded.default, {}) }) }),
+    children
+  ] });
 };
 
-// src/components/module/graph/NodeHover.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var ModuleGraphNodeHover = ({ node }) => {
-  const { address, name } = (node == null ? void 0 : node.data()) ?? {};
-  const [boundingBox, setBoundingBox] = (0, import_react12.useState)(node == null ? void 0 : node.renderedBoundingBox());
-  const ref = (0, import_react12.useRef)(null);
-  const [currentEl, setCurrentEl] = (0, import_react12.useState)(null);
-  (0, import_react12.useEffect)(() => {
-    setCurrentEl(null);
+// src/components/module/graph/node/Hover.tsx
+var import_material5 = require("@mui/material");
+var import_react_flexbox3 = require("@xylabs/react-flexbox");
+
+// src/components/module/graph/node/hooks/useNodeElement.tsx
+var import_react13 = require("react");
+var useNodeElement = (node) => {
+  const ref = (0, import_react13.useRef)(null);
+  const [currentElement, setCurrentElement] = (0, import_react13.useState)(null);
+  const [boundingBox, setBoundingBox] = (0, import_react13.useState)(node == null ? void 0 : node.renderedBoundingBox());
+  (0, import_react13.useEffect)(() => {
+    setCurrentElement(null);
   }, [node]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (node) {
       setBoundingBox(node.renderedBoundingBox());
     }
@@ -579,52 +633,97 @@ var ModuleGraphNodeHover = ({ node }) => {
       node == null ? void 0 : node.off("position", void 0, listener);
     };
   }, [node]);
-  (0, import_react12.useLayoutEffect)(() => {
-    setCurrentEl(ref.current);
+  (0, import_react13.useEffect)(() => {
+    setCurrentElement(ref.current);
   }, [boundingBox]);
+  return { boundingBox, currentElement, ref };
+};
+
+// src/components/module/graph/node/Hover.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var ModuleGraphNodeHover = ({ children, node }) => {
+  const { boundingBox, ref, currentElement } = useNodeElement(node);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      import_react_flexbox3.FlexCol,
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(StyledNodeGhostElementFlexCol, { ref, left: boundingBox == null ? void 0 : boundingBox.x1, height: boundingBox == null ? void 0 : boundingBox.h, top: boundingBox == null ? void 0 : boundingBox.y1, width: boundingBox == null ? void 0 : boundingBox.w }),
+    node ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: children == null ? void 0 : children(currentElement) }) : null
+  ] });
+};
+var StyledNodeGhostElementFlexCol = (0, import_material5.styled)(import_react_flexbox3.FlexCol, { name: "StyledNodeGhostElementFlexCol" })(() => ({
+  // For easier debugging of the 'ghost' element that matches the hovered cytoscape node
+  // backgroundColor: '#fff',
+  // opacity: 0.25,
+  // eslint-disable-next-line sort-keys-fix/sort-keys-fix
+  cursor: "pointer",
+  pointerEvents: "none",
+  position: "absolute"
+}));
+
+// src/components/module/graph/Popper.tsx
+var import_CancelRounded2 = __toESM(require("@mui/icons-material/CancelRounded"), 1);
+var import_material6 = require("@mui/material");
+var import_react_identicon = require("@xylabs/react-identicon");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var ModuleHoverPopper = ({ anchorEl, onClose, onModuleDetails, onModuleExplore, node, ...props }) => {
+  const { address, name } = (node == null ? void 0 : node.data()) ?? {};
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: anchorEl ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.Popper, { anchorEl, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_material6.Card, { elevation: 3, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      import_material6.CardHeader,
       {
-        ref,
-        sx: {
-          // For easier debugging of the 'ghost' element that matches the hovered cytoscape node
-          // backgroundColor: '#fff',
-          // opacity: 0.25,
-          cursor: "pointer",
-          height: boundingBox == null ? void 0 : boundingBox.h,
-          left: boundingBox == null ? void 0 : boundingBox.x1,
-          pointerEvents: "none",
-          position: "absolute",
-          top: boundingBox == null ? void 0 : boundingBox.y1,
-          width: boundingBox == null ? void 0 : boundingBox.w
-        }
+        action: onClose ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.IconButton, { size: "small", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_CancelRounded2.default, {}) }) : null,
+        avatar: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.Paper, { elevation: 6, sx: { bgcolor: "#fff", p: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_identicon.Identicon, { value: address, size: 24 }) }),
+        title: name,
+        subheader: address
       }
     ),
-    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
-  ] });
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(StyledCardActions, { children: [
+      onModuleDetails ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.Button, { onClick: () => onModuleDetails == null ? void 0 : onModuleDetails(address), size: "small", variant: "contained", children: "Details" }) : null,
+      onModuleExplore ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.Button, { onClick: () => onModuleExplore == null ? void 0 : onModuleExplore(address), size: "small", variant: "contained", children: "Explore" }) : null
+    ] })
+  ] }) }) : null });
 };
+var StyledModuleHoverPopper = (0, import_material6.styled)(ModuleHoverPopper, { name: "StyledComponents" })(() => ({
+  zIndex: 2
+}));
+var StyledCardActions = (0, import_material6.styled)(import_material6.CardActions, { name: "StyledCardActions" })(() => ({
+  display: "flex",
+  justifyContent: "center"
+}));
 
 // src/components/module/graph/GraphFlexBox.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var ModuleGraphFlexBox = ({ rootModule, ...props }) => {
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var ModuleGraphFlexBox = ({ rootModule, disableModuleDetails, ...props }) => {
+  const cytoscapeRef = (0, import_react14.useRef)(null);
   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_runtime8.jsx)(WithExtensions, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  const { hoveredNode, setHoveredNode, toggleSelectedElement } = useElements(hideLabels);
+  const { module: module2, onModuleDetails } = useModuleDetails(rootModule, () => setHoveredNode(void 0));
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(WithExtensions, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     NodeRelationalGraphFlexBox,
     {
-      actions: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material6.Button, { size: "small", onClick: handleToggleLabels, variant: "contained", children: "Toggle Labels" }),
+      actions: module2 ? null : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material7.Button, { size: "small", onClick: handleToggleLabels, variant: "contained", children: "Toggle Labels" }),
+      showDetails: !!module2,
+      detail: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DetailsFlexbox, { onClose: () => onModuleDetails(null) }),
       options,
+      ref: cytoscapeRef,
+      width: "100%",
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ModuleGraphNodeHover, { node: hoveredNode })
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ModuleGraphNodeHover, { node: hoveredNode, children: (element) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        StyledModuleHoverPopper,
+        {
+          anchorEl: element,
+          container: cytoscapeRef.current,
+          node: hoveredNode,
+          onClose: () => setHoveredNode(void 0),
+          onModuleExplore: toggleSelectedElement,
+          onModuleDetails: disableModuleDetails ? void 0 : onModuleDetails,
+          placement: "top",
+          open: true
+        }
+      ) })
     }
   ) });
 };
 var ModuleGraphFlexBoxWithProvider = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CytoscapeInstanceProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ModuleGraphFlexBox, { ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CytoscapeInstanceProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ModuleGraphFlexBox, { ...props }) });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {