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

package/dist/browser/hooks/index.js

@@ -1,4 +1,4 @@
-// src/hooks/cytoscape/useCytoscapeElements.ts
+// src/hooks/cytoscape/elements/useCytoscapeElements.ts
 import { useAsyncEffect } from "@xylabs/react-async-effect";
 import { isNodeInstance as isNodeInstance3 } from "@xyo-network/node-model";
 import { useEffect, useState } from "react";
@@ -98,7 +98,7 @@ var CytoscapeElements = class _CytoscapeElements {
     try {
       const childElements = await _CytoscapeElements.recurseNodes(module);
       childElements?.forEach((module2) => {
-        const newNode = _CytoscapeElements.buildNode(module2, { rootNodeId: newRootNode.data.id });
+        const newNode = _CytoscapeElements.buildNode(module2);
         newElements.push(newNode);
         const newEdge = _CytoscapeElements.buildEdge(newRootNode, newNode);
         newElements.push(newEdge);
@@ -109,10 +109,11 @@ var CytoscapeElements = class _CytoscapeElements {
       return [];
     }
   }
-  static buildNode(module, properties) {
+  static buildNode(module, properties, classes) {
     const { address, config } = module;
     const normalizedName = config.name ?? address.substring(0, 8);
     return {
+      classes,
       data: {
         address,
         id: address,
@@ -123,7 +124,7 @@ var CytoscapeElements = class _CytoscapeElements {
     };
   }
   static buildRootNode = (module) => {
-    return _CytoscapeElements.buildNode(module, { root: true });
+    return _CytoscapeElements.buildNode(module, {}, ["activeNode"]);
   };
   static normalizeName(name) {
     if (!name)
@@ -176,7 +177,7 @@ var CyIconSet = {
 };
 
 // src/Cytoscape/CytoscapeStyles.ts
-var NodeIdStyles = (color, outlineColor) => ({
+var NodeWithName = (color, outlineColor) => ({
   selector: "node[name]",
   style: {
     color,
@@ -189,7 +190,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,
@@ -200,6 +201,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: {
@@ -211,9 +218,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 = (module) => {
   const [elements, setElements] = useState([]);
   useAsyncEffect(
@@ -247,6 +253,92 @@ var useCytoscapeElements = (module) => {
   return elements;
 };
 
+// src/hooks/cytoscape/elements/useHoveredNode.tsx
+import { useCallback, useEffect as useEffect2, useState as useState2 } from "react";
+
+// src/contexts/CytoscapeInstance/Context.ts
+import { createContextEx } from "@xyo-network/react-shared";
+var CytoscapeInstanceContext = createContextEx();
+
+// src/contexts/CytoscapeInstance/use.ts
+import { useContextEx } from "@xyo-network/react-shared";
+var useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, "CytoscapeInstance", required);
+
+// src/hooks/cytoscape/elements/useHoveredNode.tsx
+var useHoveredNode = (renderedElements) => {
+  const { cy } = useCytoscapeInstance(true);
+  const [hoveredNode, setHoveredNode] = useState2();
+  const nodeListener = useCallback((node) => {
+    node.on("mouseover tap", () => {
+      setHoveredNode(node);
+    });
+  }, []);
+  useEffect2(() => {
+    if (renderedElements) {
+      renderedElements.nodes().forEach(nodeListener);
+    }
+  }, [nodeListener, renderedElements]);
+  useEffect2(() => {
+    cy?.ready(() => {
+      cy.nodes().forEach(nodeListener);
+    });
+  }, [cy, nodeListener]);
+  return [hoveredNode, setHoveredNode];
+};
+
+// src/hooks/cytoscape/elements/useNewElements.tsx
+import { useModuleFromNode } from "@xyo-network/react-node";
+var useNewElements = (selectedElement) => {
+  const { address: selectedAddress } = selectedElement?.data() ?? {};
+  const [module] = useModuleFromNode(selectedAddress);
+  const newElements = useCytoscapeElements(module);
+  return newElements;
+};
+
+// src/hooks/cytoscape/elements/useRenderNewElements.tsx
+import { useEffect as useEffect3, useState as useState3 } from "react";
+var useRenderNewElements = (newElements = [], hideLabels) => {
+  const { cy } = useCytoscapeInstance(true);
+  const [renderedElements, setRenderedElements] = useState3();
+  useEffect3(() => {
+    if (newElements.length > 1) {
+      const renderedElements2 = cy?.add(newElements);
+      setRenderedElements(renderedElements2);
+      cy?.layout(ColaLayout).run();
+    }
+  }, [cy, hideLabels, newElements]);
+  return renderedElements;
+};
+
+// src/hooks/cytoscape/elements/useSelectedElement.tsx
+import { useState as useState4 } from "react";
+var useSelectedElement = () => {
+  const [selectedElement, setSelectedElement] = useState4();
+  const { cy } = useCytoscapeInstance(true);
+  const updateStyles = (element) => {
+    const nodes = cy?.nodes();
+    nodes?.toggleClass("activeNode", false);
+    element.toggleClass("activeNode", true);
+  };
+  const toggleSelectedElement = (address) => {
+    const selectedNode = cy?.nodes(`[id="${address}"]`)?.[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
 import { useMemo as useMemo3 } from "react";
 
@@ -277,8 +369,9 @@ var useCytoscapeStyle = (hideLabels = false) => {
   const icons = useIcons();
   const style = useMemo2(
     () => [
-      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]
@@ -303,55 +396,65 @@ var useCytoscapeOptions = (elements, style, layout) => {
   return options;
 };
 
-// src/hooks/cytoscape/useHoveredNode.tsx
-import { useCallback, useEffect as useEffect2, useState as useState2 } from "react";
-
-// src/contexts/CytoscapeInstance/Context.ts
-import { createContextEx } from "@xyo-network/react-shared";
-var CytoscapeInstanceContext = createContextEx();
-
-// src/contexts/CytoscapeInstance/use.ts
-import { useContextEx } from "@xyo-network/react-shared";
-var useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, "CytoscapeInstance", required);
-
-// src/hooks/cytoscape/useHoveredNode.tsx
-var useHoveredNode = (renderedElements) => {
-  const { cy } = useCytoscapeInstance(true);
-  const [hoveredNode, setHoveredNode] = useState2();
-  const nodeListener = useCallback((node) => {
-    node.on("mouseover tap", () => {
-      setHoveredNode(node);
-    });
-    node.on("mouseout", () => {
-      setHoveredNode(void 0);
-    });
-  }, []);
-  useEffect2(() => {
-    if (renderedElements) {
-      renderedElements.nodes().forEach(nodeListener);
+// src/hooks/cytoscape/useModuleDetails.tsx
+import { usePromise } from "@xylabs/react-promise";
+import { useEffect as useEffect4, useState as useState5 } from "react";
+var useModuleDetails = (rootModule, onFoundModule) => {
+  const { cy } = useCytoscapeInstance();
+  const [moduleAddress, setModuleAddress] = useState5();
+  const [foundModule] = usePromise(async () => {
+    if (moduleAddress === null)
+      return null;
+    if (moduleAddress && rootModule) {
+      const foundModule2 = await rootModule.resolve(moduleAddress);
+      return foundModule2 ? foundModule2 : null;
     }
-  }, [nodeListener, renderedElements]);
-  useEffect2(() => {
-    cy?.ready(() => {
-      cy.nodes().forEach(nodeListener);
+  }, [moduleAddress, rootModule]);
+  useEffect4(() => {
+    const resizeObserver = new ResizeObserver(() => {
+      if (moduleAddress === null) {
+        setTimeout(() => cy?.center(), 100);
+      } else if (foundModule && cy) {
+        const node = cy.nodes(`[id="${moduleAddress}"]`)?.[0];
+        setTimeout(() => cy.center(node), 100);
+      }
     });
-  }, [cy, nodeListener]);
-  return hoveredNode;
-};
-
-// src/hooks/cytoscape/useNewElements.tsx
-import { useModuleFromNode } from "@xyo-network/react-node";
-var useNewElements = (selectedElement) => {
-  const { address: selectedAddress } = selectedElement?.data() ?? {};
-  const [module] = useModuleFromNode(selectedAddress);
-  const newElements = useCytoscapeElements(module);
-  return newElements;
+    const container = cy?.container();
+    if (container) {
+      resizeObserver.observe(container);
+    }
+    return () => {
+      if (container)
+        resizeObserver.unobserve(container);
+    };
+  }, [cy, moduleAddress, foundModule, rootModule?.address]);
+  useEffect4(() => {
+    if (foundModule) {
+      onFoundModule?.();
+    }
+  }, [cy, moduleAddress, foundModule, onFoundModule]);
+  const onModuleDetails = (address) => {
+    const moduleNode = cy?.nodes(`[id="${address}"]`);
+    const rootModuleNode = cy?.nodes(`[id="${rootModule?.address}"]`);
+    const foundModuleNode = cy?.nodes(`[id="${foundModule?.address}"]`);
+    const notModuleNode = cy?.nodes(`[id != "${address}"]`);
+    if (address) {
+      moduleNode?.toggleClass("activeNode", true);
+      notModuleNode?.toggleClass("activeNode", false);
+    } else {
+      notModuleNode?.toggleClass("activeNode", false);
+      const activeNode = foundModuleNode?.length ? foundModuleNode : rootModuleNode;
+      activeNode?.toggleClass("activeNode", true);
+    }
+    setModuleAddress(address);
+  };
+  return { module: foundModule, onModuleDetails };
 };
 
 // src/hooks/cytoscape/useRelationalGraphOptions.tsx
-import { useState as useState3 } from "react";
+import { useState as useState6 } from "react";
 var useRelationalGraphOptions = (module) => {
-  const [hideLabels, setHideLabels] = useState3(true);
+  const [hideLabels, setHideLabels] = useState6(true);
   const handleToggleLabels = () => {
     setHideLabels((oldValue) => !oldValue);
   };
@@ -360,71 +463,11 @@ var useRelationalGraphOptions = (module) => {
   const options = useCytoscapeOptions(elements, style, ConcentricLayout);
   return { handleToggleLabels, hideLabels, options };
 };
-
-// src/hooks/cytoscape/useRenderNewElements.tsx
-import { useEffect as useEffect3, useState as useState4 } from "react";
-var useRenderNewElements = (newElements = [], hideLabels) => {
-  const { cy } = useCytoscapeInstance(true);
-  const [renderedElements, setRenderedElements] = useState4();
-  useEffect3(() => {
-    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 useEffect4, useState as useState5 } from "react";
-
-// src/hooks/cytoscape/useToggleSelectedElement.tsx
-import { useTheme as useTheme3 } from "@mui/material";
-var useToggleSelectedElement = (setSelectedElement) => {
-  const { cy } = useCytoscapeInstance(true);
-  const theme = useTheme3();
-  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] = useState5();
-  const toggleSelectedElement = useToggleSelectedElement(setSelectedElement);
-  useEffect4(() => {
-    const listener = (event) => {
-      const element = event.target[0];
-      if (element.isNode()) {
-        toggleSelectedElement(element);
-      }
-    };
-    cy?.on("select", listener);
-    return () => {
-      cy?.off("select", listener);
-    };
-  }, [cy, toggleSelectedElement]);
-  return selectedElement;
-};
 export {
   useCytoscapeElements,
   useCytoscapeOptions,
-  useHoveredNode,
-  useNewElements,
-  useRelationalGraphOptions,
-  useRenderNewElements,
-  useSelectedElement
+  useElements,
+  useModuleDetails,
+  useRelationalGraphOptions
 };
 //# sourceMappingURL=index.js.map

package/dist/browser/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/cytoscape/useCytoscapeElements.ts","../../../src/Cytoscape/CytoscapeElements.ts","../../../src/Cytoscape/lib/encodeSvg.ts","../../../src/Cytoscape/lib/iconMap.ts","../../../src/Cytoscape/lib/layout/ColaLayout.ts","../../../src/Cytoscape/lib/layout/ConcentricLayout.ts","../../../src/Cytoscape/lib/parseModuleType.ts","../../../src/Cytoscape/CytoscapeIcons.tsx","../../../src/Cytoscape/CytoscapeStyles.ts","../../../src/hooks/cytoscape/useCytoscapeOptions.ts","../../../src/hooks/cytoscape/useCytoscapeStyle.tsx","../../../src/hooks/cytoscape/useIcons.tsx","../../../src/hooks/cytoscape/useHoveredNode.tsx","../../../src/contexts/CytoscapeInstance/Context.ts","../../../src/contexts/CytoscapeInstance/use.ts","../../../src/hooks/cytoscape/useNewElements.tsx","../../../src/hooks/cytoscape/useRelationalGraphOptions.tsx","../../../src/hooks/cytoscape/useRenderNewElements.tsx","../../../src/hooks/cytoscape/useSelectedElement.tsx","../../../src/hooks/cytoscape/useToggleSelectedElement.tsx"],"sourcesContent":["import { useAsyncEffect } from '@xylabs/react-async-effect'\nimport { EventUnsubscribeFunction, ModuleInstance } from '@xyo-network/module'\nimport { isNodeInstance } from '@xyo-network/node-model'\nimport { ElementDefinition } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { CytoscapeElements } from '../../Cytoscape'\n\nexport const useCytoscapeElements = (module?: ModuleInstance | null) => {\n  const [elements, setElements] = useState<ElementDefinition[]>([])\n\n  useAsyncEffect(\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    async () => {\n      if (module) {\n        const newElements = (await CytoscapeElements.buildElements(module)) ?? []\n        setElements(newElements)\n      }\n    },\n    [module],\n  )\n\n  useEffect(() => {\n    let attachedListener: EventUnsubscribeFunction | undefined = undefined\n    let detachedListener: EventUnsubscribeFunction | undefined = undefined\n\n    if (module && isNodeInstance(module)) {\n      attachedListener = module.on('moduleAttached', async () => {\n        const newElements = (await CytoscapeElements.buildElements(module)) ?? []\n        setElements(newElements)\n      })\n      detachedListener = module.on('moduleDetached', async () => {\n        const newElements = (await CytoscapeElements.buildElements(module)) ?? []\n        setElements(newElements)\n      })\n    }\n\n    return () => {\n      attachedListener?.()\n      detachedListener?.()\n    }\n  }, [module])\n\n  return elements\n}\n","import { ModuleInstance } from '@xyo-network/module'\nimport { isNodeInstance } from '@xyo-network/node-model'\nimport { ElementDefinition } from 'cytoscape'\n\nimport { parseModuleType } from './lib'\n\nexport class CytoscapeElements {\n  static MaxNameLength = 20\n\n  static buildEdge(rootNode: ElementDefinition, newNode: ElementDefinition) {\n    return {\n      data: {\n        id: `${rootNode.data.id}/${newNode.data.id}`,\n        source: rootNode.data.id,\n        target: newNode.data.id,\n      },\n    }\n  }\n\n  static async buildElements(module: ModuleInstance): Promise<ElementDefinition[]> {\n    const newRootNode = CytoscapeElements.buildRootNode(module)\n    const newElements: ElementDefinition[] = [newRootNode]\n\n    try {\n      const childElements = await CytoscapeElements.recurseNodes(module)\n      childElements?.forEach((module) => {\n        const newNode = CytoscapeElements.buildNode(module, { rootNodeId: newRootNode.data.id })\n        newElements.push(newNode)\n\n        const newEdge = CytoscapeElements.buildEdge(newRootNode, newNode)\n        newElements.push(newEdge)\n      })\n\n      return newElements\n    } catch (e) {\n      console.error('error resolving modules', e)\n      return []\n    }\n  }\n\n  static buildNode(module: ModuleInstance, properties?: { [key: string]: unknown }): ElementDefinition {\n    const { address, config } = module\n    const normalizedName = config.name ?? address.substring(0, 8)\n    return {\n      data: {\n        address,\n        id: address,\n        name: normalizedName,\n        type: parseModuleType(module),\n        ...properties,\n      },\n    }\n  }\n\n  static buildRootNode = (module: ModuleInstance): ElementDefinition => {\n    return CytoscapeElements.buildNode(module, { root: true })\n  }\n\n  static normalizeName(name?: string) {\n    if (!name) return\n    if (name.length > this.MaxNameLength) return `${name.substring(0, 20)}...`\n    return name\n  }\n\n  static async recurseNodes(module: ModuleInstance, maxTraversals = 1): Promise<ModuleInstance[]> {\n    let localDepth = 0\n    const childModules: ModuleInstance[] = []\n\n    const traverse = async (nestedNode: ModuleInstance) => {\n      if (localDepth < maxTraversals) {\n        const modules = await nestedNode.resolve(undefined, { direction: 'down', maxDepth: 2 })\n        await Promise.all(\n          modules.map(async (child) => {\n            if (child !== nestedNode && isNodeInstance(child)) {\n              localDepth++\n              await traverse(child)\n              // don't re add the root module that was passed in\n            } else if (child !== module) {\n              childModules.push(child)\n            }\n          }),\n        )\n      }\n    }\n\n    await traverse(module)\n\n    return childModules\n  }\n}\n","import { ReactElement } from 'react'\n// eslint-disable-next-line import/no-internal-modules\nimport { renderToStaticMarkup } from 'react-dom/server'\n\nconst dataUri = 'data:image/svg+xml,'\n\nexport const encodeSvg = (reactElement: ReactElement, color?: string) => {\n  const svgString = renderToStaticMarkup(reactElement)\n\n  const doc = new DOMParser().parseFromString(svgString, 'text/html')\n  const svgElement = doc.getElementsByTagName('svg')[0]\n  if (svgElement) {\n    svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg')\n    svgElement.setAttribute('height', '100')\n    svgElement.style.fill = color ?? 'black'\n  }\n\n  return `${dataUri}${window.encodeURIComponent(svgElement.outerHTML)}`\n}\n","import { CyNodeModuleTypes } from './CyNodeModuleTypes'\n\nexport const generateIconMap: () => Record<CyNodeModuleTypes, string> = () => ({\n  archivist: '',\n  bridge: '',\n  diviner: '',\n  module: '',\n  node: '',\n  sentinel: '',\n  witness: '',\n})\n","export const ColaLayout = {\n  centerGraph: false,\n  convergenceThreshold: 0.01,\n  name: 'cola',\n}\n","import { LayoutOptions } from 'cytoscape'\n\nexport const ConcentricLayout: LayoutOptions = {\n  concentric: function (node) {\n    return node.degree()\n  },\n  levelWidth: function () {\n    return 2\n  },\n  minNodeSpacing: 75,\n  name: 'concentric',\n}\n","import { isArchivistInstance } from '@xyo-network/archivist-model'\nimport { isBridgeInstance } from '@xyo-network/bridge-model'\nimport { isDivinerInstance } from '@xyo-network/diviner-model'\nimport { ModuleInstance } from '@xyo-network/module'\nimport { isNodeInstance } from '@xyo-network/node-model'\nimport { isSentinelInstance } from '@xyo-network/sentinel'\nimport { isWitnessModule } from '@xyo-network/witness'\n\nimport { CyNodeModuleTypes } from './CyNodeModuleTypes'\n\nexport const parseModuleType = (module?: ModuleInstance): CyNodeModuleTypes => {\n  let type: CyNodeModuleTypes = 'module'\n  if (module) {\n    if (isArchivistInstance(module)) {\n      type = 'archivist'\n    } else if (isBridgeInstance(module)) {\n      type = 'bridge'\n    } else if (isDivinerInstance(module)) {\n      type = 'diviner'\n    } else if (isNodeInstance(module)) {\n      type = 'node'\n    } else if (isSentinelInstance(module)) {\n      type = 'sentinel'\n    } else if (isWitnessModule(module)) {\n      type = 'witness'\n    } else {\n      type = 'module'\n    }\n  }\n  return type\n}\n","import {\n  BubbleChartRounded as BubbleChartRoundedIcon,\n  Hub as HubIcon,\n  InsertLinkRounded as InsertLinkRoundedIcon,\n  Inventory2Rounded as Inventory2RoundedIcon,\n  QuestionMarkRounded as QuestionMarkRoundedIcon,\n  TimerRounded as TimerRoundedIcon,\n  VisibilityRounded as VisibilityRoundedIcon,\n} from '@mui/icons-material'\nimport { SvgIconTypeMap } from '@mui/material'\nimport { OverridableComponent } from '@mui/material/OverridableComponent'\n\nimport { CyNodeModuleTypes } from './lib'\n\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport const CyIconSet: Record<CyNodeModuleTypes, OverridableComponent<SvgIconTypeMap<{}, 'svg'>>> = {\n  archivist: Inventory2RoundedIcon,\n  bridge: InsertLinkRoundedIcon,\n  diviner: BubbleChartRoundedIcon,\n  module: QuestionMarkRoundedIcon,\n  node: HubIcon,\n  sentinel: TimerRoundedIcon,\n  witness: VisibilityRoundedIcon,\n}\n","import { Stylesheet } from 'cytoscape'\n\nimport { CyNodeModuleTypes } from './lib'\n\nexport const NodeIdStyles = (color?: string, outlineColor?: string): Stylesheet => ({\n  selector: 'node[name]',\n  style: {\n    color,\n    'font-family': 'Lexend Deca, Helvetica, sans-serif',\n    'font-size': 12,\n    'overlay-padding': '6px',\n    'text-halign': 'center',\n    'text-outline-color': outlineColor,\n    'text-outline-width': '1px',\n    'text-valign': 'top',\n  },\n})\n\nexport const NodeStyled = (icons: Record<CyNodeModuleTypes, string>, bgColor?: string, hideLabels = false): Stylesheet => ({\n  selector: 'node',\n  style: {\n    'background-color': bgColor,\n    'background-height': '75%',\n    'background-image': (elem) => icons[elem.data('type') as CyNodeModuleTypes],\n    'background-width': '24',\n    label: hideLabels ? undefined : 'data(name)',\n    shape: 'round-rectangle',\n  },\n})\n\nexport const EdgeStyled = (lineColor?: string, targetArrowColor?: string) => ({\n  selector: 'edge',\n  style: {\n    'curve-style': 'bezier',\n    'line-color': lineColor,\n    'line-opacity': 0.1,\n    'target-arrow-color': targetArrowColor,\n    'target-arrow-shape': 'triangle',\n    width: 3,\n  },\n})\n\nexport const NodeBgStyles = (bgColor: string): [string, string] => ['background-color', bgColor]\n","import { CytoscapeOptions } from 'cytoscape'\nimport { useMemo } from 'react'\n\nimport { ConcentricLayout } from '../../Cytoscape'\nimport { useCytoscapeStyle } from './useCytoscapeStyle'\n\nexport const useCytoscapeOptions = (\n  elements: CytoscapeOptions['elements'],\n  style?: CytoscapeOptions['style'],\n  layout?: CytoscapeOptions['layout'],\n) => {\n  const defaultStyle = useCytoscapeStyle()\n\n  const resolvedLayout = layout ?? ConcentricLayout\n  const resolvedStyle = style ?? defaultStyle\n\n  const options = useMemo<CytoscapeOptions | undefined>(() => {\n    if (elements && resolvedLayout && resolvedStyle) {\n      return {\n        elements,\n        layout: resolvedLayout,\n        style: resolvedStyle,\n      }\n    }\n  }, [elements, layout, style])\n\n  return options\n}\n","import { useTheme } from '@mui/material'\nimport { CytoscapeOptions } from 'cytoscape'\nimport { useMemo } from 'react'\n\nimport { EdgeStyled, NodeIdStyles, NodeStyled } from '../../Cytoscape'\nimport { useIcons } from './useIcons'\n\nexport const useCytoscapeStyle = (hideLabels = false) => {\n  const theme = useTheme()\n  const icons = useIcons()\n\n  const style: CytoscapeOptions['style'] = useMemo(\n    () => [\n      NodeIdStyles(theme.palette.text.primary, theme.palette.getContrastText(theme.palette.text.primary)),\n      NodeStyled(icons, theme.palette.primary.main, hideLabels),\n      EdgeStyled(theme.palette.divider, theme.palette.divider),\n    ],\n    [icons, hideLabels, theme],\n  )\n\n  return style\n}\n","import { useTheme } from '@mui/material'\nimport { useMemo } from 'react'\n\nimport { CyIconSet, CyNodeModuleTypes, encodeSvg, generateIconMap } from '../../Cytoscape'\n\nexport const useIcons = () => {\n  const theme = useTheme()\n  const icons = useMemo(() => {\n    const iconMap = generateIconMap()\n    return Object.entries(CyIconSet).reduce((acc, [name, IconComponent]) => {\n      const icon = <IconComponent fontSize=\"small\" />\n      acc[name as CyNodeModuleTypes] = encodeSvg(icon, theme.palette.getContrastText(theme.palette.text.primary))\n      return acc\n    }, iconMap)\n  }, [theme.palette])\n\n  return icons\n}\n","import { NodeCollection, NodeSingular } from 'cytoscape'\nimport { useCallback, useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\n\nexport const useHoveredNode = (renderedElements?: NodeCollection) => {\n  const { cy } = useCytoscapeInstance(true)\n  const [hoveredNode, setHoveredNode] = useState<NodeSingular>()\n\n  const nodeListener = useCallback((node: NodeSingular) => {\n    node.on('mouseover tap', () => {\n      setHoveredNode(node)\n    })\n    node.on('mouseout', () => {\n      setHoveredNode(undefined)\n    })\n  }, [])\n\n  useEffect(() => {\n    if (renderedElements) {\n      renderedElements.nodes().forEach(nodeListener)\n    }\n  }, [nodeListener, renderedElements])\n\n  useEffect(() => {\n    cy?.ready(() => {\n      cy.nodes().forEach(nodeListener)\n    })\n  }, [cy, nodeListener])\n\n  return hoveredNode\n}\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceState } from './State'\n\nexport const CytoscapeInstanceContext = createContextEx<CytoscapeInstanceState>()\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceContext } from './Context'\n\nexport const useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, 'CytoscapeInstance', required)\n","import { useModuleFromNode } from '@xyo-network/react-node'\nimport { NodeSingular } from 'cytoscape'\n\nimport { useCytoscapeElements } from './useCytoscapeElements'\n\nexport const useNewElements = (selectedElement?: NodeSingular) => {\n  const { address: selectedAddress } = selectedElement?.data() ?? {}\n  const [module] = useModuleFromNode(selectedAddress)\n  const newElements = useCytoscapeElements(module)\n\n  return newElements\n}\n","import { ModuleInstance } from '@xyo-network/module'\nimport { useState } from 'react'\n\nimport { ConcentricLayout } from '../../Cytoscape'\nimport { useCytoscapeElements } from './useCytoscapeElements'\nimport { useCytoscapeOptions } from './useCytoscapeOptions'\nimport { useCytoscapeStyle } from './useCytoscapeStyle'\n\nexport const useRelationalGraphOptions = (module?: ModuleInstance) => {\n  const [hideLabels, setHideLabels] = useState(true)\n\n  const handleToggleLabels = () => {\n    setHideLabels((oldValue) => !oldValue)\n  }\n\n  const elements = useCytoscapeElements(module)\n  const style = useCytoscapeStyle(hideLabels)\n  const options = useCytoscapeOptions(elements, style, ConcentricLayout)\n\n  return { handleToggleLabels, hideLabels, options }\n}\n","import { CollectionReturnValue, ElementDefinition } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\nimport { ColaLayout } from '../../Cytoscape'\n\nexport const useRenderNewElements = (newElements: ElementDefinition[] = [], hideLabels?: boolean) => {\n  const { cy } = useCytoscapeInstance(true)\n  const [renderedElements, setRenderedElements] = useState<CollectionReturnValue>()\n\n  useEffect(() => {\n    if (newElements.length > 1) {\n      const renderedElements = cy?.add(newElements)\n      setRenderedElements(renderedElements)\n      cy?.layout(ColaLayout).run()\n    }\n  }, [cy, hideLabels, newElements])\n\n  return renderedElements\n}\n","import { EventObject, NodeSingular } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\nimport { useToggleSelectedElement } from './useToggleSelectedElement'\n\nexport const useSelectedElement = () => {\n  const { cy } = useCytoscapeInstance(true)\n  const [selectedElement, setSelectedElement] = useState<NodeSingular>()\n  const toggleSelectedElement = useToggleSelectedElement(setSelectedElement)\n\n  useEffect(() => {\n    const listener = (event: EventObject) => {\n      const element: NodeSingular = event.target[0]\n      if (element.isNode()) {\n        toggleSelectedElement(element)\n      }\n    }\n\n    cy?.on('select', listener)\n\n    return () => {\n      cy?.off('select', listener)\n    }\n  }, [cy, toggleSelectedElement])\n\n  return selectedElement\n}\n","import { useTheme } from '@mui/material'\nimport { NodeSingular } from 'cytoscape'\nimport { Dispatch, SetStateAction } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\nimport { NodeBgStyles } from '../../Cytoscape'\n\nexport const useToggleSelectedElement = (setSelectedElement: Dispatch<SetStateAction<NodeSingular | undefined>>) => {\n  const { cy } = useCytoscapeInstance(true)\n  const theme = useTheme()\n\n  const updateStyles = (element: NodeSingular, styles: [string, string]) => {\n    cy\n      ?.style()\n      .selector(`node[id=\"${element.data().id}\"]`)\n      .style(...styles)\n  }\n\n  const toggleSelectedElement = (element: NodeSingular) => {\n    setSelectedElement((previousSelectedElement) => {\n      if (previousSelectedElement) {\n        updateStyles(previousSelectedElement, NodeBgStyles(theme.palette.primary.main))\n      }\n      return element\n    })\n    updateStyles(element, NodeBgStyles(theme.palette.secondary.main))\n  }\n\n  return toggleSelectedElement\n}\n"],"mappings":"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","names":["isNodeInstance","isNodeInstance","module","isNodeInstance","isNodeInstance","useMemo","useTheme","useMemo","useTheme","useMemo","useMemo","useEffect","useState","useState","useEffect","useState","useState","useEffect","useState","useState","useEffect","renderedElements","useEffect","useState","useTheme","useTheme","useState","useEffect"]}
+{"version":3,"sources":["../../../src/hooks/cytoscape/elements/useCytoscapeElements.ts","../../../src/Cytoscape/CytoscapeElements.ts","../../../src/Cytoscape/lib/encodeSvg.ts","../../../src/Cytoscape/lib/iconMap.ts","../../../src/Cytoscape/lib/layout/ColaLayout.ts","../../../src/Cytoscape/lib/layout/ConcentricLayout.ts","../../../src/Cytoscape/lib/parseModuleType.ts","../../../src/Cytoscape/CytoscapeIcons.tsx","../../../src/Cytoscape/CytoscapeStyles.ts","../../../src/hooks/cytoscape/elements/useHoveredNode.tsx","../../../src/contexts/CytoscapeInstance/Context.ts","../../../src/contexts/CytoscapeInstance/use.ts","../../../src/hooks/cytoscape/elements/useNewElements.tsx","../../../src/hooks/cytoscape/elements/useRenderNewElements.tsx","../../../src/hooks/cytoscape/elements/useSelectedElement.tsx","../../../src/hooks/cytoscape/elements/useElements.tsx","../../../src/hooks/cytoscape/useCytoscapeOptions.ts","../../../src/hooks/cytoscape/useCytoscapeStyle.tsx","../../../src/hooks/cytoscape/useIcons.tsx","../../../src/hooks/cytoscape/useModuleDetails.tsx","../../../src/hooks/cytoscape/useRelationalGraphOptions.tsx"],"sourcesContent":["import { useAsyncEffect } from '@xylabs/react-async-effect'\nimport { EventUnsubscribeFunction, ModuleInstance } from '@xyo-network/module'\nimport { isNodeInstance } from '@xyo-network/node-model'\nimport { ElementDefinition } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { CytoscapeElements } from '../../../Cytoscape'\n\nexport const useCytoscapeElements = (module?: ModuleInstance | null) => {\n  const [elements, setElements] = useState<ElementDefinition[]>([])\n\n  useAsyncEffect(\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    async () => {\n      if (module) {\n        const newElements = (await CytoscapeElements.buildElements(module)) ?? []\n        setElements(newElements)\n      }\n    },\n    [module],\n  )\n\n  useEffect(() => {\n    let attachedListener: EventUnsubscribeFunction | undefined = undefined\n    let detachedListener: EventUnsubscribeFunction | undefined = undefined\n\n    if (module && isNodeInstance(module)) {\n      attachedListener = module.on('moduleAttached', async () => {\n        const newElements = (await CytoscapeElements.buildElements(module)) ?? []\n        setElements(newElements)\n      })\n      detachedListener = module.on('moduleDetached', async () => {\n        const newElements = (await CytoscapeElements.buildElements(module)) ?? []\n        setElements(newElements)\n      })\n    }\n\n    return () => {\n      attachedListener?.()\n      detachedListener?.()\n    }\n  }, [module])\n\n  return elements\n}\n","import { ModuleInstance } from '@xyo-network/module'\nimport { isNodeInstance } from '@xyo-network/node-model'\nimport { ElementDefinition } from 'cytoscape'\n\nimport { parseModuleType } from './lib'\n\nexport class CytoscapeElements {\n  static MaxNameLength = 20\n\n  static buildEdge(rootNode: ElementDefinition, newNode: ElementDefinition) {\n    return {\n      data: {\n        id: `${rootNode.data.id}/${newNode.data.id}`,\n        source: rootNode.data.id,\n        target: newNode.data.id,\n      },\n    }\n  }\n\n  static async buildElements(module: ModuleInstance): Promise<ElementDefinition[]> {\n    const newRootNode = CytoscapeElements.buildRootNode(module)\n    const newElements: ElementDefinition[] = [newRootNode]\n\n    try {\n      const childElements = await CytoscapeElements.recurseNodes(module)\n      childElements?.forEach((module) => {\n        const newNode = CytoscapeElements.buildNode(module)\n        newElements.push(newNode)\n\n        const newEdge = CytoscapeElements.buildEdge(newRootNode, newNode)\n        newElements.push(newEdge)\n      })\n\n      return newElements\n    } catch (e) {\n      console.error('error resolving modules', e)\n      return []\n    }\n  }\n\n  static buildNode(module: ModuleInstance, properties?: { [key: string]: unknown }, classes?: string[]): ElementDefinition {\n    const { address, config } = module\n    const normalizedName = config.name ?? address.substring(0, 8)\n    return {\n      classes,\n      data: {\n        address,\n        id: address,\n        name: normalizedName,\n        type: parseModuleType(module),\n        ...properties,\n      },\n    }\n  }\n\n  static buildRootNode = (module: ModuleInstance): ElementDefinition => {\n    return CytoscapeElements.buildNode(module, {}, ['activeNode'])\n  }\n\n  static normalizeName(name?: string) {\n    if (!name) return\n    if (name.length > this.MaxNameLength) return `${name.substring(0, 20)}...`\n    return name\n  }\n\n  static async recurseNodes(module: ModuleInstance, maxTraversals = 1): Promise<ModuleInstance[]> {\n    let localDepth = 0\n    const childModules: ModuleInstance[] = []\n\n    const traverse = async (nestedNode: ModuleInstance) => {\n      if (localDepth < maxTraversals) {\n        const modules = await nestedNode.resolve(undefined, { direction: 'down', maxDepth: 2 })\n        await Promise.all(\n          modules.map(async (child) => {\n            if (child !== nestedNode && isNodeInstance(child)) {\n              localDepth++\n              await traverse(child)\n              // don't re add the root module that was passed in\n            } else if (child !== module) {\n              childModules.push(child)\n            }\n          }),\n        )\n      }\n    }\n\n    await traverse(module)\n\n    return childModules\n  }\n}\n","import { ReactElement } from 'react'\n// eslint-disable-next-line import/no-internal-modules\nimport { renderToStaticMarkup } from 'react-dom/server'\n\nconst dataUri = 'data:image/svg+xml,'\n\nexport const encodeSvg = (reactElement: ReactElement, color?: string) => {\n  const svgString = renderToStaticMarkup(reactElement)\n\n  const doc = new DOMParser().parseFromString(svgString, 'text/html')\n  const svgElement = doc.getElementsByTagName('svg')[0]\n  if (svgElement) {\n    svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg')\n    svgElement.setAttribute('height', '100')\n    svgElement.style.fill = color ?? 'black'\n  }\n\n  return `${dataUri}${window.encodeURIComponent(svgElement.outerHTML)}`\n}\n","import { CyNodeModuleTypes } from './CyNodeModuleTypes'\n\nexport const generateIconMap: () => Record<CyNodeModuleTypes, string> = () => ({\n  archivist: '',\n  bridge: '',\n  diviner: '',\n  module: '',\n  node: '',\n  sentinel: '',\n  witness: '',\n})\n","export const ColaLayout = {\n  centerGraph: false,\n  convergenceThreshold: 0.01,\n  name: 'cola',\n}\n","import { LayoutOptions } from 'cytoscape'\n\nexport const ConcentricLayout: LayoutOptions = {\n  concentric: function (node) {\n    return node.degree()\n  },\n  levelWidth: function () {\n    return 2\n  },\n  minNodeSpacing: 75,\n  name: 'concentric',\n}\n","import { isArchivistInstance } from '@xyo-network/archivist-model'\nimport { isBridgeInstance } from '@xyo-network/bridge-model'\nimport { isDivinerInstance } from '@xyo-network/diviner-model'\nimport { ModuleInstance } from '@xyo-network/module'\nimport { isNodeInstance } from '@xyo-network/node-model'\nimport { isSentinelInstance } from '@xyo-network/sentinel'\nimport { isWitnessModule } from '@xyo-network/witness'\n\nimport { CyNodeModuleTypes } from './CyNodeModuleTypes'\n\nexport const parseModuleType = (module?: ModuleInstance): CyNodeModuleTypes => {\n  let type: CyNodeModuleTypes = 'module'\n  if (module) {\n    if (isArchivistInstance(module)) {\n      type = 'archivist'\n    } else if (isBridgeInstance(module)) {\n      type = 'bridge'\n    } else if (isDivinerInstance(module)) {\n      type = 'diviner'\n    } else if (isNodeInstance(module)) {\n      type = 'node'\n    } else if (isSentinelInstance(module)) {\n      type = 'sentinel'\n    } else if (isWitnessModule(module)) {\n      type = 'witness'\n    } else {\n      type = 'module'\n    }\n  }\n  return type\n}\n","import {\n  BubbleChartRounded as BubbleChartRoundedIcon,\n  Hub as HubIcon,\n  InsertLinkRounded as InsertLinkRoundedIcon,\n  Inventory2Rounded as Inventory2RoundedIcon,\n  QuestionMarkRounded as QuestionMarkRoundedIcon,\n  TimerRounded as TimerRoundedIcon,\n  VisibilityRounded as VisibilityRoundedIcon,\n} from '@mui/icons-material'\nimport { SvgIconTypeMap } from '@mui/material'\nimport { OverridableComponent } from '@mui/material/OverridableComponent'\n\nimport { CyNodeModuleTypes } from './lib'\n\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport const CyIconSet: Record<CyNodeModuleTypes, OverridableComponent<SvgIconTypeMap<{}, 'svg'>>> = {\n  archivist: Inventory2RoundedIcon,\n  bridge: InsertLinkRoundedIcon,\n  diviner: BubbleChartRoundedIcon,\n  module: QuestionMarkRoundedIcon,\n  node: HubIcon,\n  sentinel: TimerRoundedIcon,\n  witness: VisibilityRoundedIcon,\n}\n","import { Stylesheet } from 'cytoscape'\n\nimport { CyNodeModuleTypes } from './lib'\n\nexport const NodeWithName = (color?: string, outlineColor?: string): Stylesheet => ({\n  selector: 'node[name]',\n  style: {\n    color,\n    'font-family': 'Lexend Deca, Helvetica, sans-serif',\n    'font-size': 12,\n    'overlay-padding': '6px',\n    'text-halign': 'center',\n    'text-outline-color': outlineColor,\n    'text-outline-width': '1px',\n    'text-valign': 'top',\n  },\n})\n\nexport const Node = (icons: Record<CyNodeModuleTypes, string>, bgColor?: string, hideLabels = false): Stylesheet => ({\n  selector: 'node',\n  style: {\n    'background-color': bgColor,\n    'background-height': '75%',\n    'background-image': (elem) => icons[elem.data('type') as CyNodeModuleTypes],\n    'background-width': '24',\n    label: hideLabels ? undefined : 'data(name)',\n    shape: 'round-rectangle',\n  },\n})\n\nexport const NodeAsRoot = (bgColor?: string) => ({\n  selector: '.activeNode',\n  style: {\n    'background-color': bgColor,\n  },\n})\n\nexport const EdgeStyled = (lineColor?: string, targetArrowColor?: string) => ({\n  selector: 'edge',\n  style: {\n    'curve-style': 'bezier',\n    'line-color': lineColor,\n    'line-opacity': 0.1,\n    'target-arrow-color': targetArrowColor,\n    'target-arrow-shape': 'triangle',\n    width: 3,\n  },\n})\n","import { NodeCollection, NodeSingular } from 'cytoscape'\nimport { Dispatch, SetStateAction, useCallback, useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../../contexts'\n\nexport const useHoveredNode = (renderedElements?: NodeCollection): [NodeSingular | undefined, Dispatch<SetStateAction<NodeSingular | undefined>>] => {\n  const { cy } = useCytoscapeInstance(true)\n  const [hoveredNode, setHoveredNode] = useState<NodeSingular>()\n\n  const nodeListener = useCallback((node: NodeSingular) => {\n    node.on('mouseover tap', () => {\n      setHoveredNode(node)\n    })\n  }, [])\n\n  useEffect(() => {\n    if (renderedElements) {\n      renderedElements.nodes().forEach(nodeListener)\n    }\n  }, [nodeListener, renderedElements])\n\n  useEffect(() => {\n    cy?.ready(() => {\n      cy.nodes().forEach(nodeListener)\n    })\n  }, [cy, nodeListener])\n\n  return [hoveredNode, setHoveredNode]\n}\n","import { createContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceState } from './State'\n\nexport const CytoscapeInstanceContext = createContextEx<CytoscapeInstanceState>()\n","import { useContextEx } from '@xyo-network/react-shared'\n\nimport { CytoscapeInstanceContext } from './Context'\n\nexport const useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, 'CytoscapeInstance', required)\n","import { useModuleFromNode } from '@xyo-network/react-node'\nimport { NodeSingular } from 'cytoscape'\n\nimport { useCytoscapeElements } from './useCytoscapeElements'\n\nexport const useNewElements = (selectedElement?: NodeSingular) => {\n  const { address: selectedAddress } = selectedElement?.data() ?? {}\n  const [module] = useModuleFromNode(selectedAddress)\n  const newElements = useCytoscapeElements(module)\n\n  return newElements\n}\n","import { CollectionReturnValue, ElementDefinition } from 'cytoscape'\nimport { useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../../contexts'\nimport { ColaLayout } from '../../../Cytoscape'\n\nexport const useRenderNewElements = (newElements: ElementDefinition[] = [], hideLabels?: boolean) => {\n  const { cy } = useCytoscapeInstance(true)\n  const [renderedElements, setRenderedElements] = useState<CollectionReturnValue>()\n\n  useEffect(() => {\n    if (newElements.length > 1) {\n      const renderedElements = cy?.add(newElements)\n      setRenderedElements(renderedElements)\n      cy?.layout(ColaLayout).run()\n    }\n  }, [cy, hideLabels, newElements])\n\n  return renderedElements\n}\n","import { NodeSingular } from 'cytoscape'\nimport { useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../../contexts'\n\nexport const useSelectedElement = () => {\n  const [selectedElement, setSelectedElement] = useState<NodeSingular>()\n  const { cy } = useCytoscapeInstance(true)\n\n  const updateStyles = (element: NodeSingular) => {\n    const nodes = cy?.nodes()\n    nodes?.toggleClass('activeNode', false)\n    element.toggleClass('activeNode', true)\n  }\n\n  const toggleSelectedElement = (address?: string) => {\n    const selectedNode = cy?.nodes(`[id=\"${address}\"]`)?.[0]\n    if (selectedNode) {\n      setSelectedElement(selectedNode)\n      updateStyles(selectedNode)\n    }\n  }\n\n  return { selectedElement, toggleSelectedElement }\n}\n","import { useHoveredNode } from './useHoveredNode'\nimport { useNewElements } from './useNewElements'\nimport { useRenderNewElements } from './useRenderNewElements'\nimport { useSelectedElement } from './useSelectedElement'\n\nexport const useElements = (hideLabels: boolean) => {\n  const { selectedElement, toggleSelectedElement } = useSelectedElement()\n  const newElements = useNewElements(selectedElement)\n  const renderedElements = useRenderNewElements(newElements, hideLabels)\n  const [hoveredNode, setHoveredNode] = useHoveredNode(renderedElements)\n\n  return { hoveredNode, setHoveredNode, toggleSelectedElement }\n}\n","import { CytoscapeOptions } from 'cytoscape'\nimport { useMemo } from 'react'\n\nimport { ConcentricLayout } from '../../Cytoscape'\nimport { useCytoscapeStyle } from './useCytoscapeStyle'\n\nexport const useCytoscapeOptions = (\n  elements: CytoscapeOptions['elements'],\n  style?: CytoscapeOptions['style'],\n  layout?: CytoscapeOptions['layout'],\n) => {\n  const defaultStyle = useCytoscapeStyle()\n\n  const resolvedLayout = layout ?? ConcentricLayout\n  const resolvedStyle = style ?? defaultStyle\n\n  const options = useMemo<CytoscapeOptions | undefined>(() => {\n    if (elements && resolvedLayout && resolvedStyle) {\n      return {\n        elements,\n        layout: resolvedLayout,\n        style: resolvedStyle,\n      }\n    }\n  }, [elements, layout, style])\n\n  return options\n}\n","import { useTheme } from '@mui/material'\nimport { CytoscapeOptions } from 'cytoscape'\nimport { useMemo } from 'react'\n\nimport { EdgeStyled, Node, NodeAsRoot, NodeWithName } from '../../Cytoscape'\nimport { useIcons } from './useIcons'\n\nexport const useCytoscapeStyle = (hideLabels = false) => {\n  const theme = useTheme()\n  const icons = useIcons()\n\n  const style: CytoscapeOptions['style'] = useMemo(\n    () => [\n      Node(icons, theme.palette.primary.main, hideLabels),\n      NodeWithName(theme.palette.text.primary, theme.palette.getContrastText(theme.palette.text.primary)),\n      NodeAsRoot(theme.palette.secondary.main),\n      EdgeStyled(theme.palette.divider, theme.palette.divider),\n    ],\n    [icons, hideLabels, theme],\n  )\n\n  return style\n}\n","import { useTheme } from '@mui/material'\nimport { useMemo } from 'react'\n\nimport { CyIconSet, CyNodeModuleTypes, encodeSvg, generateIconMap } from '../../Cytoscape'\n\nexport const useIcons = () => {\n  const theme = useTheme()\n  const icons = useMemo(() => {\n    const iconMap = generateIconMap()\n    return Object.entries(CyIconSet).reduce((acc, [name, IconComponent]) => {\n      const icon = <IconComponent fontSize=\"small\" />\n      acc[name as CyNodeModuleTypes] = encodeSvg(icon, theme.palette.getContrastText(theme.palette.text.primary))\n      return acc\n    }, iconMap)\n  }, [theme.palette])\n\n  return icons\n}\n","import { usePromise } from '@xylabs/react-promise'\nimport { ModuleInstance } from '@xyo-network/module'\nimport { useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../contexts'\n\nexport const useModuleDetails = (rootModule?: ModuleInstance | null, onFoundModule?: () => void) => {\n  const { cy } = useCytoscapeInstance()\n  const [moduleAddress, setModuleAddress] = useState<string | null>()\n\n  const [foundModule] = usePromise(async () => {\n    if (moduleAddress === null) return null\n    if (moduleAddress && rootModule) {\n      const foundModule = await rootModule.resolve(moduleAddress)\n      return foundModule ? foundModule : null\n    }\n  }, [moduleAddress, rootModule])\n\n  useEffect(() => {\n    const resizeObserver = new ResizeObserver(() => {\n      if (moduleAddress === null) {\n        // cytoscape tries to center prematurely without it :(\n        setTimeout(() => cy?.center(), 100)\n      } else if (foundModule && cy) {\n        const node = cy.nodes(`[id=\"${moduleAddress}\"]`)?.[0]\n        // cy.pan(newPan)\n        // cytoscape tries to center prematurely without it :(\n        setTimeout(() => cy.center(node), 100)\n      }\n    })\n\n    const container = cy?.container()\n    if (container) {\n      resizeObserver.observe(container)\n    }\n\n    return () => {\n      if (container) resizeObserver.unobserve(container)\n    }\n  }, [cy, moduleAddress, foundModule, rootModule?.address])\n\n  useEffect(() => {\n    if (foundModule) {\n      onFoundModule?.()\n    }\n  }, [cy, moduleAddress, foundModule, onFoundModule])\n\n  const onModuleDetails = (address?: string | null) => {\n    const moduleNode = cy?.nodes(`[id=\"${address}\"]`)\n    const rootModuleNode = cy?.nodes(`[id=\"${rootModule?.address}\"]`)\n    const foundModuleNode = cy?.nodes(`[id=\"${foundModule?.address}\"]`)\n    const notModuleNode = cy?.nodes(`[id != \"${address}\"]`)\n\n    if (address) {\n      // address was passed so we set the node to active styles\n      moduleNode?.toggleClass('activeNode', true)\n      notModuleNode?.toggleClass('activeNode', false)\n    } else {\n      // no address was passes so we reset the state\n      notModuleNode?.toggleClass('activeNode', false)\n      const activeNode = foundModuleNode?.length ? foundModuleNode : rootModuleNode\n      activeNode?.toggleClass('activeNode', true)\n    }\n    setModuleAddress(address)\n  }\n\n  return { module: foundModule, onModuleDetails }\n}\n","import { ModuleInstance } from '@xyo-network/module'\nimport { useState } from 'react'\n\nimport { ConcentricLayout } from '../../Cytoscape'\nimport { useCytoscapeElements } from './elements'\nimport { useCytoscapeOptions } from './useCytoscapeOptions'\nimport { useCytoscapeStyle } from './useCytoscapeStyle'\n\nexport const useRelationalGraphOptions = (module?: ModuleInstance) => {\n  const [hideLabels, setHideLabels] = useState(true)\n\n  const handleToggleLabels = () => {\n    setHideLabels((oldValue) => !oldValue)\n  }\n\n  const elements = useCytoscapeElements(module)\n  const style = useCytoscapeStyle(hideLabels)\n  const options = useCytoscapeOptions(elements, style, ConcentricLayout)\n\n  return { handleToggleLabels, hideLabels, options }\n}\n"],"mappings":"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","names":["isNodeInstance","isNodeInstance","module","isNodeInstance","isNodeInstance","useEffect","useState","useState","useEffect","useEffect","useState","useState","useEffect","renderedElements","useState","useState","useMemo","useTheme","useMemo","useTheme","useMemo","useMemo","useEffect","useState","useState","foundModule","useEffect","useState","useState"]}