@xyo-network/react-node-renderer 2.64.1 → 2.64.4

package/dist/browser/index.js

@@ -1,34 +1,47 @@
-// src/components/ModuleCardParser.tsx
-import { asArchivistInstance } from "@xyo-network/archivist-model";
-import { asDivinerInstance } from "@xyo-network/diviner-model";
+// src/components/module/CardParser.tsx
+import { asArchivistInstance, isArchivistInstance } from "@xyo-network/archivist-model";
+import { asDivinerInstance, isDivinerInstance } from "@xyo-network/diviner-model";
 import { ArchivistCard } from "@xyo-network/react-archivist";
 import { DivinerCard, ModuleCard } from "@xyo-network/react-module";
 import { jsx } from "react/jsx-runtime";
 var ModuleCardParser = ({ module }) => {
   switch (true) {
-    case module?.config.schema.includes("archivist"):
+    case isArchivistInstance(module):
       return /* @__PURE__ */ jsx(ArchivistCard, { module: asArchivistInstance(module) });
-    case module?.config.schema.includes("diviner"):
+    case isDivinerInstance(module):
       return /* @__PURE__ */ jsx(DivinerCard, { module: asDivinerInstance(module) });
     default:
       return /* @__PURE__ */ jsx(ModuleCard, { module });
   }
 };
 
-// src/components/ProvidedNodeRenderer.tsx
-import { useProvidedNode } from "@xyo-network/react-node";
-
-// src/hooks/cytoscape/useAddNewElements.tsx
-import { useEffect } from "react";
+// src/components/module/graph/GraphFlexBox.tsx
+import { Button as Button2 } from "@mui/material";
 
 // src/contexts/CytoscapeInstance/Context.ts
 import { createContextEx } from "@xyo-network/react-shared";
 var CytoscapeInstanceContext = createContextEx();
 
+// src/contexts/CytoscapeInstance/Provider.tsx
+import { useEffect, useState } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var CytoscapeInstanceProvider = ({ children, defaultInstance }) => {
+  const [cy, setCy] = useState(defaultInstance);
+  useEffect(() => {
+    setCy(defaultInstance);
+  }, [defaultInstance]);
+  return /* @__PURE__ */ jsx2(CytoscapeInstanceContext.Provider, { value: { cy, provided: true, setCy }, children });
+};
+
 // src/contexts/CytoscapeInstance/use.ts
 import { useContextEx } from "@xyo-network/react-shared";
 var useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, "CytoscapeInstance", required);
 
+// src/hooks/cytoscape/useCytoscapeElements.ts
+import { useAsyncEffect } from "@xylabs/react-async-effect";
+import { isNodeInstance as isNodeInstance3 } from "@xyo-network/node-model";
+import { useEffect as useEffect2, useState as useState2 } from "react";
+
 // src/Cytoscape/CytoscapeElements.ts
 import { isNodeInstance as isNodeInstance2 } from "@xyo-network/node-model";
 
@@ -78,20 +91,20 @@ var ConcentricLayout = {
 };
 
 // src/Cytoscape/lib/parseModuleType.ts
-import { isArchivistInstance } from "@xyo-network/archivist-model";
+import { isArchivistInstance as isArchivistInstance2 } from "@xyo-network/archivist-model";
 import { isBridgeInstance } from "@xyo-network/bridge-model";
-import { isDivinerInstance } from "@xyo-network/diviner-model";
+import { isDivinerInstance as isDivinerInstance2 } from "@xyo-network/diviner-model";
 import { isNodeInstance } from "@xyo-network/node-model";
 import { isSentinelInstance } from "@xyo-network/sentinel";
 import { isWitnessModule } from "@xyo-network/witness";
 var parseModuleType = (module) => {
   let type = "module";
   if (module) {
-    if (isArchivistInstance(module)) {
+    if (isArchivistInstance2(module)) {
       type = "archivist";
     } else if (isBridgeInstance(module)) {
       type = "bridge";
-    } else if (isDivinerInstance(module)) {
+    } else if (isDivinerInstance2(module)) {
       type = "diviner";
     } else if (isNodeInstance(module)) {
       type = "node";
@@ -238,57 +251,9 @@ var EdgeStyled = (lineColor, targetArrowColor) => ({
   }
 });
 
-// src/hooks/cytoscape/usePopperListener.tsx
-import { useTheme } from "@mui/material";
-import { useCallback } from "react";
-var usePopperListener = () => {
-  const theme = useTheme();
-  const popperListener = useCallback(
-    (node, hideLabels, cy) => {
-      const div = document.createElement("div");
-      const shadowColor = theme.palette.getContrastText(theme.palette.text.primary);
-      const popper = node.popper({
-        content: () => {
-          div.innerHTML = node.data().name;
-          div.style.opacity = "0";
-          div.style.transition = "opacity .25s";
-          div.style.textShadow = `0 0 3px ${shadowColor}`;
-          document.body.appendChild(div);
-          return div;
-        }
-      });
-      const update = async () => {
-        await popper.update();
-      };
-      node.on("position", update);
-      node.on("mouseover", () => hideLabels ? div.style.opacity = "1" : void 0);
-      node.on("mouseout", () => hideLabels ? div.style.opacity = "0" : void 0);
-      cy?.on("pan zoom resize", update);
-    },
-    [theme]
-  );
-  return popperListener;
-};
-
-// src/hooks/cytoscape/useAddNewElements.tsx
-var useAddNewElements = (newElements = [], hideLabels) => {
-  const { cy } = useCytoscapeInstance(true);
-  const popperListener = usePopperListener();
-  useEffect(() => {
-    if (newElements.length > 1) {
-      const renderedElements = cy?.add(newElements);
-      renderedElements?.nodes().forEach((node) => popperListener(node, hideLabels, cy));
-      cy?.layout(ColaLayout).run();
-    }
-  }, [cy, hideLabels, newElements, popperListener]);
-};
-
 // src/hooks/cytoscape/useCytoscapeElements.ts
-import { useAsyncEffect } from "@xylabs/react-async-effect";
-import { isNodeInstance as isNodeInstance3 } from "@xyo-network/node-model";
-import { useEffect as useEffect2, useState } from "react";
 var useCytoscapeElements = (module) => {
-  const [elements, setElements] = useState([]);
+  const [elements, setElements] = useState2([]);
   useAsyncEffect(
     // eslint-disable-next-line react-hooks/exhaustive-deps
     async () => {
@@ -324,19 +289,19 @@ var useCytoscapeElements = (module) => {
 import { useMemo as useMemo3 } from "react";
 
 // src/hooks/cytoscape/useCytoscapeStyle.tsx
-import { useTheme as useTheme3 } from "@mui/material";
+import { useTheme as useTheme2 } from "@mui/material";
 import { useMemo as useMemo2 } from "react";
 
 // src/hooks/cytoscape/useIcons.tsx
-import { useTheme as useTheme2 } from "@mui/material";
+import { useTheme } from "@mui/material";
 import { useMemo } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var useIcons = () => {
-  const theme = useTheme2();
+  const theme = useTheme();
   const icons = useMemo(() => {
     const iconMap = generateIconMap();
     return Object.entries(CyIconSet).reduce((acc, [name, IconComponent]) => {
-      const icon = /* @__PURE__ */ jsx2(IconComponent, { fontSize: "small" });
+      const icon = /* @__PURE__ */ jsx3(IconComponent, { fontSize: "small" });
       acc[name] = encodeSvg(icon, theme.palette.getContrastText(theme.palette.text.primary));
       return acc;
     }, iconMap);
@@ -346,7 +311,7 @@ var useIcons = () => {
 
 // src/hooks/cytoscape/useCytoscapeStyle.tsx
 var useCytoscapeStyle = (hideLabels = false) => {
-  const theme = useTheme3();
+  const theme = useTheme2();
   const icons = useIcons();
   const style = useMemo2(
     () => [
@@ -362,66 +327,141 @@ var useCytoscapeStyle = (hideLabels = false) => {
 // src/hooks/cytoscape/useCytoscapeOptions.ts
 var useCytoscapeOptions = (elements, style, layout) => {
   const defaultStyle = useCytoscapeStyle();
+  const resolvedLayout = layout ?? ConcentricLayout;
+  const resolvedStyle = style ?? defaultStyle;
   const options = useMemo3(() => {
-    if (elements && layout && style) {
+    if (elements && resolvedLayout && resolvedStyle) {
       return {
         elements,
-        layout: layout ?? ConcentricLayout,
-        style: style ?? defaultStyle
+        layout: resolvedLayout,
+        style: resolvedStyle
       };
     }
   }, [elements, layout, style]);
   return options;
 };
 
+// src/hooks/cytoscape/useHoveredNode.tsx
+import { useCallback, useEffect as useEffect3, useState as useState3 } from "react";
+var useHoveredNode = (renderedElements) => {
+  const { cy } = useCytoscapeInstance(true);
+  const [hoveredNode, setHoveredNode] = useState3();
+  const nodeListener = useCallback((node) => {
+    node.on("mouseover tap", () => {
+      setHoveredNode(node);
+    });
+    node.on("mouseout", () => {
+      setHoveredNode(void 0);
+    });
+  }, []);
+  useEffect3(() => {
+    if (renderedElements) {
+      renderedElements.nodes().forEach(nodeListener);
+    }
+  }, [nodeListener, renderedElements]);
+  useEffect3(() => {
+    cy?.ready(() => {
+      cy.nodes().forEach(nodeListener);
+    });
+  }, [cy, nodeListener]);
+  return hoveredNode;
+};
+
 // src/hooks/cytoscape/useNewElements.tsx
 import { useModuleFromNode } from "@xyo-network/react-node";
-import { useEffect as useEffect3, useState as useState2 } from "react";
-var useNewElements = () => {
+import { useEffect as useEffect4 } from "react";
+var useNewElements = (selectedElement) => {
   const { cy } = useCytoscapeInstance(true);
-  const [selectedElement, setSelectedElement] = useState2();
   const { address: selectedAddress } = selectedElement?.data() ?? {};
   const [module] = useModuleFromNode(selectedAddress);
   const newElements = useCytoscapeElements(module);
-  useEffect3(() => {
+  useEffect4(() => {
     if (selectedAddress) {
       const element = cy?.$(`node[id="${selectedAddress}"]`);
       if (element?.length)
         cy?.center(element);
     }
   }, [cy, selectedAddress]);
-  return { newElements, setSelectedElement };
+  return newElements;
 };
 
 // src/hooks/cytoscape/useRelationalGraphOptions.tsx
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 var useRelationalGraphOptions = (module) => {
-  const [hideLabels, setHideLabels] = useState3(false);
+  const [hideLabels, setHideLabels] = useState4(true);
   const handleToggleLabels = () => {
     setHideLabels((oldValue) => !oldValue);
   };
   const elements = useCytoscapeElements(module);
   const style = useCytoscapeStyle(hideLabels);
-  const options = useCytoscapeOptions(elements, style, ColaLayout);
+  const options = useCytoscapeOptions(elements, style, ConcentricLayout);
   return { handleToggleLabels, hideLabels, options };
 };
 
+// src/hooks/cytoscape/useRenderNewElements.tsx
+import { useEffect as useEffect5, useState as useState5 } from "react";
+var useRenderNewElements = (newElements = [], hideLabels) => {
+  const { cy } = useCytoscapeInstance(true);
+  const [renderedElements, setRenderedElements] = useState5();
+  useEffect5(() => {
+    if (newElements.length > 1) {
+      const renderedElements2 = cy?.add(newElements);
+      setRenderedElements(renderedElements2);
+      cy?.layout(ColaLayout).run();
+    }
+  }, [cy, hideLabels, newElements]);
+  return renderedElements;
+};
+
+// src/hooks/cytoscape/useSelectedElement.tsx
+import { useEffect as useEffect6, useState as useState6 } from "react";
+var useSelectedElement = () => {
+  const { cy } = useCytoscapeInstance(true);
+  const [selectedElement, setSelectedElement] = useState6();
+  useEffect6(() => {
+    const listener = (event) => {
+      const element = event.target[0];
+      if (element.isNode())
+        setSelectedElement(element);
+    };
+    cy?.on("select", listener);
+    return () => {
+      cy?.off("select", listener);
+    };
+  }, [cy, setSelectedElement]);
+  return selectedElement;
+};
+
+// src/components/cytoscape-extensions/WithExtensions.tsx
+import { use } from "cytoscape";
+import cola from "cytoscape-cola";
+import { useEffect as useEffect7, useState as useState7 } from "react";
+import { Fragment, jsx as jsx4 } from "react/jsx-runtime";
+var WithExtensions = ({ children }) => {
+  const [initialized, setInitialized] = useState7(false);
+  useEffect7(() => {
+    use(cola);
+    setInitialized(true);
+  }, []);
+  return /* @__PURE__ */ jsx4(Fragment, { children: initialized ? children : void 0 });
+};
+
 // src/components/RelationalGraph.tsx
 import { Button, ButtonGroup, styled } from "@mui/material";
 import { FlexCol, FlexRow } from "@xylabs/react-flexbox";
 import { useShareForwardedRef } from "@xyo-network/react-shared";
 import cytoscape from "cytoscape";
-import { forwardRef, useEffect as useEffect4, useState as useState4 } from "react";
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-var NodeRelationalGraphFlexBox = forwardRef(({ actions, options, ...props }, ref) => {
-  const [cy, setCy] = useState4();
+import { forwardRef, useEffect as useEffect8, useState as useState8 } from "react";
+import { Fragment as Fragment2, jsx as jsx5, jsxs } from "react/jsx-runtime";
+var NodeRelationalGraphFlexBox = forwardRef(({ actions, children, options, ...props }, ref) => {
+  const [cy, setCy] = useState8();
   const { setCy: setCyContext } = useCytoscapeInstance();
   const sharedRef = useShareForwardedRef(ref);
   const handleReset = () => {
     cy?.reset();
     cy?.fit(void 0, 20);
   };
-  useEffect4(() => {
+  useEffect8(() => {
     if (sharedRef) {
       const newCy = cytoscape({
         container: sharedRef.current,
@@ -430,15 +470,16 @@ var NodeRelationalGraphFlexBox = forwardRef(({ actions, options, ...props }, ref
       setCy(newCy);
     }
   }, [options, sharedRef]);
-  useEffect4(() => {
+  useEffect8(() => {
     setCyContext?.(cy);
   }, [cy, setCyContext]);
   return /* @__PURE__ */ jsxs(FlexCol, { ...props, children: [
-    /* @__PURE__ */ jsx3(ActionsContainer, { children: /* @__PURE__ */ jsxs(ButtonGroup, { children: [
+    /* @__PURE__ */ jsx5(ActionsContainer, { children: /* @__PURE__ */ jsx5(Fragment2, { children: actions ? /* @__PURE__ */ jsxs(ButtonGroup, { children: [
       actions,
-      /* @__PURE__ */ jsx3(Button, { size: "small", variant: "contained", onClick: handleReset, children: "Reset" })
-    ] }) }),
-    /* @__PURE__ */ jsx3(FlexCol, { alignItems: "stretch", height: "100%", position: "absolute", ref: sharedRef, width: "100%" })
+      /* @__PURE__ */ jsx5(Button, { size: "small", variant: "contained", onClick: handleReset, children: "Reset" })
+    ] }) : /* @__PURE__ */ jsx5(Button, { size: "small", variant: "contained", onClick: handleReset, children: "Reset" }) }) }),
+    /* @__PURE__ */ jsx5(FlexCol, { alignItems: "stretch", height: "100%", position: "absolute", ref: sharedRef, width: "100%" }),
+    children
   ] });
 });
 NodeRelationalGraphFlexBox.displayName = "NodeRelationalGraph";
@@ -452,21 +493,115 @@ var ActionsContainer = styled(FlexRow, { name: "ActionsContainer" })(({ theme })
 }));
 var NodeRelationalGraph = NodeRelationalGraphFlexBox;
 
+// src/components/module/graph/NodeHover.tsx
+import { FlexCol as FlexCol3 } from "@xylabs/react-flexbox";
+import { useEffect as useEffect9, useLayoutEffect, useRef, useState as useState9 } from "react";
+
+// src/components/module/graph/Popper.tsx
+import { alpha, Chip, Popper, Typography } from "@mui/material";
+import { FlexCol as FlexCol2, FlexRow as FlexRow2 } from "@xylabs/react-flexbox";
+import { Identicon } from "@xylabs/react-identicon";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var ModuleHoverPopper = ({ address, element, name, ...props }) => {
+  return /* @__PURE__ */ jsx6(Fragment3, { children: element ? /* @__PURE__ */ jsx6(Popper, { anchorEl: element, ...props, children: /* @__PURE__ */ jsxs2(FlexCol2, { gap: 2, p: 2, paper: true, sx: { backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.95) }, children: [
+    /* @__PURE__ */ jsxs2(FlexRow2, { gap: 2, children: [
+      /* @__PURE__ */ jsx6(Identicon, { value: address, size: 24 }),
+      /* @__PURE__ */ jsx6(Typography, { children: name })
+    ] }),
+    /* @__PURE__ */ jsx6(Chip, { label: address, color: "primary" })
+  ] }) }) : null });
+};
+
+// src/components/module/graph/NodeHover.tsx
+import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var ModuleGraphNodeHover = ({ node }) => {
+  const { address, name } = node?.data() ?? {};
+  const [boundingBox, setBoundingBox] = useState9(node?.renderedBoundingBox());
+  const ref = useRef(null);
+  const [currentEl, setCurrentEl] = useState9(null);
+  useEffect9(() => {
+    setCurrentEl(null);
+  }, [node]);
+  useEffect9(() => {
+    if (node) {
+      setBoundingBox(node.renderedBoundingBox());
+    }
+    const listener = () => {
+      setBoundingBox(node?.renderedBoundingBox());
+    };
+    node?.on("position", listener);
+    return () => {
+      node?.off("position", void 0, listener);
+    };
+  }, [node]);
+  useLayoutEffect(() => {
+    setCurrentEl(ref.current);
+  }, [boundingBox]);
+  return /* @__PURE__ */ jsxs3(Fragment4, { children: [
+    /* @__PURE__ */ jsx7(
+      FlexCol3,
+      {
+        ref,
+        sx: {
+          // For easier debugging of the 'ghost' element that matches the hovered cytoscape node
+          // backgroundColor: '#fff',
+          // opacity: 0.25,
+          cursor: "pointer",
+          height: boundingBox?.h,
+          left: boundingBox?.x1,
+          pointerEvents: "none",
+          position: "absolute",
+          top: boundingBox?.y1,
+          width: boundingBox?.w
+        }
+      }
+    ),
+    node ? /* @__PURE__ */ jsx7(Fragment4, { children: /* @__PURE__ */ jsx7(ModuleHoverPopper, { address, element: currentEl, name, placement: "top", open: true }) }) : null
+  ] });
+};
+
+// src/components/module/graph/GraphFlexBox.tsx
+import { jsx as jsx8 } from "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__ */ jsx8(WithExtensions, { children: /* @__PURE__ */ jsx8(
+    NodeRelationalGraphFlexBox,
+    {
+      actions: /* @__PURE__ */ jsx8(Button2, { size: "small", onClick: handleToggleLabels, variant: "contained", children: "Toggle Labels" }),
+      options,
+      ...props,
+      children: /* @__PURE__ */ jsx8(ModuleGraphNodeHover, { node: hoveredNode })
+    }
+  ) });
+};
+var ModuleGraphFlexBoxWithProvider = (props) => {
+  return /* @__PURE__ */ jsx8(CytoscapeInstanceProvider, { children: /* @__PURE__ */ jsx8(ModuleGraphFlexBox, { ...props }) });
+};
+
 // src/components/ProvidedNodeRenderer.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { useProvidedNode } from "@xyo-network/react-node";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var ProvidedNodeRenderer = ({ node, ...props }) => {
   const [providedNode] = useProvidedNode();
   const elements = useCytoscapeElements(node ?? providedNode);
   const options = useCytoscapeOptions(elements);
-  return /* @__PURE__ */ jsx4(NodeRelationalGraphFlexBox, { alignItems: "stretch", flexGrow: 1, height: "100%", options, ...props });
+  return /* @__PURE__ */ jsx9(NodeRelationalGraphFlexBox, { alignItems: "stretch", flexGrow: 1, height: "100%", options, ...props });
 };
 export {
   ColaLayout,
   ConcentricLayout,
   CyIconSet,
   CytoscapeElements,
+  CytoscapeInstanceContext,
+  CytoscapeInstanceProvider,
   EdgeStyled,
   ModuleCardParser,
+  ModuleGraphFlexBox,
+  ModuleGraphFlexBoxWithProvider,
   NodeIdStyles,
   NodeRelationalGraph,
   NodeRelationalGraphFlexBox,
@@ -475,11 +610,13 @@ export {
   encodeSvg,
   generateIconMap,
   parseModuleType,
-  useAddNewElements,
   useCytoscapeElements,
+  useCytoscapeInstance,
   useCytoscapeOptions,
+  useHoveredNode,
   useNewElements,
-  usePopperListener,
-  useRelationalGraphOptions
+  useRelationalGraphOptions,
+  useRenderNewElements,
+  useSelectedElement
 };
 //# sourceMappingURL=index.js.map