@xyo-network/react-node-renderer 2.82.0 → 2.83.1

package/dist/node/index.cjs

@@ -1,1044 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  ColaLayout: () => ColaLayout,
-  ConcentricLayout: () => ConcentricLayout,
-  CyIconSet: () => CyIconSet,
-  CytoscapeElements: () => CytoscapeElements,
-  CytoscapeInstanceContext: () => CytoscapeInstanceContext,
-  CytoscapeInstanceProvider: () => CytoscapeInstanceProvider,
-  EdgeStyled: () => EdgeStyled,
-  ModuleCardParser: () => ModuleCardParser,
-  ModuleGraphFlexBox: () => ModuleGraphFlexBox,
-  ModuleGraphFlexBoxWithProvider: () => ModuleGraphFlexBoxWithProvider,
-  Node: () => Node,
-  NodeAsRoot: () => NodeAsRoot,
-  NodeRelationalGraph: () => NodeRelationalGraph,
-  NodeRelationalGraphFlexBox: () => NodeRelationalGraphFlexBox,
-  NodeWithName: () => NodeWithName,
-  ProvidedNodeRenderer: () => ProvidedNodeRenderer,
-  encodeSvg: () => encodeSvg,
-  generateIconMap: () => generateIconMap,
-  parseModuleType: () => parseModuleType,
-  useCytoscapeElements: () => useCytoscapeElements,
-  useCytoscapeInstance: () => useCytoscapeInstance,
-  useCytoscapeOptions: () => useCytoscapeOptions,
-  useElements: () => useElements,
-  useModuleDetails: () => useModuleDetails,
-  useRelationalGraphOptions: () => useRelationalGraphOptions
-});
-module.exports = __toCommonJS(src_exports);
-
-// src/components/module/CardParser.tsx
-var import_archivist_model = require("@xyo-network/archivist-model");
-var import_diviner_model = require("@xyo-network/diviner-model");
-var import_react_archivist = require("@xyo-network/react-archivist");
-var import_react_module = require("@xyo-network/react-module");
-var import_react = __toESM(require("react"), 1);
-var ModuleCardParser = /* @__PURE__ */ __name(({ mod }) => {
-  switch (true) {
-    case (0, import_archivist_model.isArchivistInstance)(mod): {
-      return /* @__PURE__ */ import_react.default.createElement(import_react_archivist.ArchivistCard, {
-        mod: (0, import_archivist_model.asArchivistInstance)(mod)
-      });
-    }
-    case (0, import_diviner_model.isDivinerInstance)(mod): {
-      return /* @__PURE__ */ import_react.default.createElement(import_react_module.DivinerCard, {
-        mod: (0, import_diviner_model.asDivinerInstance)(mod)
-      });
-    }
-    default: {
-      return /* @__PURE__ */ import_react.default.createElement(import_react_module.ModuleCard, {
-        mod
-      });
-    }
-  }
-}, "ModuleCardParser");
-
-// src/components/module/graph/GraphFlexBox.tsx
-var import_material7 = require("@mui/material");
-var import_react20 = __toESM(require("react"), 1);
-
-// src/contexts/CytoscapeInstance/Context.ts
-var import_react_shared = require("@xyo-network/react-shared");
-var CytoscapeInstanceContext = (0, import_react_shared.createContextEx)();
-
-// src/contexts/CytoscapeInstance/Provider.tsx
-var import_react2 = __toESM(require("react"), 1);
-var CytoscapeInstanceProvider = /* @__PURE__ */ __name(({ children, defaultInstance }) => {
-  const [cy, setCy] = (0, import_react2.useState)(defaultInstance);
-  (0, import_react2.useEffect)(() => {
-    setCy(defaultInstance);
-  }, [
-    defaultInstance
-  ]);
-  return /* @__PURE__ */ import_react2.default.createElement(CytoscapeInstanceContext.Provider, {
-    value: {
-      cy,
-      provided: true,
-      setCy
-    }
-  }, children);
-}, "CytoscapeInstanceProvider");
-
-// src/contexts/CytoscapeInstance/use.ts
-var import_react_shared2 = require("@xyo-network/react-shared");
-var useCytoscapeInstance = /* @__PURE__ */ __name((required = false) => (0, import_react_shared2.useContextEx)(CytoscapeInstanceContext, "CytoscapeInstance", required), "useCytoscapeInstance");
-
-// src/hooks/cytoscape/elements/useCytoscapeElements.ts
-var import_react_async_effect = require("@xylabs/react-async-effect");
-var import_node_model2 = require("@xyo-network/node-model");
-var import_react3 = require("react");
-
-// src/Cytoscape/CytoscapeElements.ts
-var import_exists = require("@xylabs/exists");
-
-// src/Cytoscape/lib/encodeSvg.ts
-var import_server = require("react-dom/server");
-var dataUri = "data:image/svg+xml,";
-var encodeSvg = /* @__PURE__ */ __name((reactElement, color) => {
-  const svgString = (0, import_server.renderToStaticMarkup)(reactElement);
-  const doc = new DOMParser().parseFromString(svgString, "text/html");
-  const svgElement = doc.querySelectorAll("svg")[0];
-  if (svgElement) {
-    svgElement.setAttribute("xmlns", "http://www.w3.org/2000/svg");
-    svgElement.setAttribute("height", "100");
-    svgElement.style.fill = color ?? "black";
-  }
-  return `${dataUri}${window.encodeURIComponent(svgElement.outerHTML)}`;
-}, "encodeSvg");
-
-// src/Cytoscape/lib/iconMap.ts
-var generateIconMap = /* @__PURE__ */ __name(() => ({
-  archivist: "",
-  bridge: "",
-  diviner: "",
-  module: "",
-  node: "",
-  sentinel: "",
-  witness: ""
-}), "generateIconMap");
-
-// src/Cytoscape/lib/layout/ColaLayout.ts
-var ColaLayout = {
-  centerGraph: false,
-  convergenceThreshold: 0.01,
-  name: "cola"
-};
-
-// src/Cytoscape/lib/layout/ConcentricLayout.ts
-var ConcentricLayout = {
-  concentric: /* @__PURE__ */ __name(function(node) {
-    return node.degree(false);
-  }, "concentric"),
-  levelWidth: /* @__PURE__ */ __name(function() {
-    return 2;
-  }, "levelWidth"),
-  minNodeSpacing: 75,
-  name: "concentric"
-};
-
-// src/Cytoscape/lib/parseModuleType.ts
-var import_archivist_model2 = require("@xyo-network/archivist-model");
-var import_bridge_model = require("@xyo-network/bridge-model");
-var import_diviner_model2 = require("@xyo-network/diviner-model");
-var import_node_model = require("@xyo-network/node-model");
-var import_sentinel_model = require("@xyo-network/sentinel-model");
-var import_witness_model = require("@xyo-network/witness-model");
-var parseModuleType = /* @__PURE__ */ __name((mod) => {
-  let type = "module";
-  if (mod) {
-    if ((0, import_archivist_model2.isArchivistInstance)(mod)) {
-      type = "archivist";
-    } else if ((0, import_bridge_model.isBridgeInstance)(mod)) {
-      type = "bridge";
-    } else if ((0, import_diviner_model2.isDivinerInstance)(mod)) {
-      type = "diviner";
-    } else if ((0, import_node_model.isNodeInstance)(mod)) {
-      type = "node";
-    } else if ((0, import_sentinel_model.isSentinelInstance)(mod)) {
-      type = "sentinel";
-    } else if ((0, import_witness_model.isWitnessModule)(mod)) {
-      type = "witness";
-    } else {
-      type = "module";
-    }
-  }
-  return type;
-}, "parseModuleType");
-
-// src/Cytoscape/CytoscapeElements.ts
-var CytoscapeElements = {
-  MaxNameLength: 20,
-  buildEdge(rootNode, newNode, properties) {
-    return {
-      data: {
-        id: `${rootNode.data.id}/${newNode.data.id}`,
-        source: rootNode.data.id,
-        target: newNode.data.id,
-        ...properties
-      }
-    };
-  },
-  async buildElements(mod) {
-    const info = await CytoscapeElements.recurseNodes(mod);
-    const newElements = await this.buildElementsFromInfo(info, void 0, [
-      "activeNode"
-    ]);
-    return newElements;
-  },
-  async buildElementsFromInfo(info, root, classes = []) {
-    const newNode = CytoscapeElements.buildNode(info.mod, {
-      childCount: info.children.length,
-      depth: info.depth
-    }, classes);
-    const newEdge = root ? CytoscapeElements.buildEdge(root, newNode, {
-      depth: info.depth,
-      siblingCount: info.children.length
-    }) : void 0;
-    const newElements = [
-      newNode
-    ];
-    if (newEdge) {
-      newElements.push(newEdge);
-    }
-    for (const childInfo of info.children) {
-      newElements.push(...await this.buildElementsFromInfo(childInfo, newNode));
-    }
-    return newElements;
-  },
-  buildNode(mod, properties, classes) {
-    const { address, id } = mod;
-    return {
-      classes,
-      data: {
-        address,
-        id: address,
-        name: id,
-        type: parseModuleType(mod),
-        ...properties
-      }
-    };
-  },
-  buildRootNode: /* @__PURE__ */ __name((mod) => {
-    return CytoscapeElements.buildNode(mod, {}, [
-      "activeNode"
-    ]);
-  }, "buildRootNode"),
-  normalizeName(name) {
-    if (!name) return;
-    if (name.length > this.MaxNameLength) return `${name.slice(0, 20)}...`;
-    return name;
-  },
-  async recurseNodes(root, maxDepth = 10, depth = 1) {
-    const info = {
-      children: [],
-      depth,
-      mod: root
-    };
-    if (maxDepth > 0) {
-      const children = await root.resolve("*", {
-        direction: "down",
-        maxDepth: 1
-      });
-      info.children = (await Promise.all(children.map(async (child) => {
-        if (child.address !== root.address) {
-          return await this.recurseNodes(child, maxDepth - 1, depth + 1);
-        }
-      }))).filter(import_exists.exists);
-    }
-    return info;
-  }
-};
-
-// src/Cytoscape/CytoscapeIcons.tsx
-var import_icons_material = require("@mui/icons-material");
-var CyIconSet = {
-  archivist: import_icons_material.Inventory2Rounded,
-  bridge: import_icons_material.InsertLinkRounded,
-  diviner: import_icons_material.BubbleChartRounded,
-  module: import_icons_material.QuestionMarkRounded,
-  node: import_icons_material.Hub,
-  sentinel: import_icons_material.TimerRounded,
-  witness: import_icons_material.VisibilityRounded
-};
-
-// src/Cytoscape/CytoscapeStyles.ts
-var NodeWithName = /* @__PURE__ */ __name((color, outlineColor) => ({
-  selector: "node[name]",
-  style: {
-    color,
-    "font-family": "Lexend Deca, Helvetica, sans-serif",
-    "font-size": 12,
-    "overlay-padding": "6px",
-    "text-halign": "center",
-    "text-outline-color": outlineColor,
-    "text-outline-width": "1px",
-    "text-valign": "top"
-  }
-}), "NodeWithName");
-var Node = /* @__PURE__ */ __name((icons, bgColor, hideLabels = false) => ({
-  selector: "node",
-  style: {
-    "background-color": bgColor,
-    "background-height": "75%",
-    "background-image": /* @__PURE__ */ __name((elem) => icons[elem.data("type")], "background-image"),
-    "background-width": "24",
-    "label": hideLabels ? void 0 : "data(name)",
-    "shape": "round-rectangle"
-  }
-}), "Node");
-var NodeAsRoot = /* @__PURE__ */ __name((bgColor) => ({
-  selector: ".activeNode",
-  style: {
-    "background-color": bgColor
-  }
-}), "NodeAsRoot");
-var EdgeStyled = /* @__PURE__ */ __name((lineColor, targetArrowColor) => ({
-  selector: "edge",
-  style: {
-    "curve-style": "bezier",
-    "line-color": lineColor,
-    "line-opacity": 0.1,
-    "target-arrow-color": targetArrowColor,
-    "target-arrow-shape": "triangle",
-    "width": 3
-  }
-}), "EdgeStyled");
-
-// src/hooks/cytoscape/elements/useCytoscapeElements.ts
-var useCytoscapeElements = /* @__PURE__ */ __name((mod) => {
-  const [elements, setElements] = (0, import_react3.useState)([]);
-  (0, import_react_async_effect.useAsyncEffect)(async () => {
-    const moduleInstance = mod == null ? void 0 : mod.deref();
-    if (moduleInstance) {
-      const newElements = await CytoscapeElements.buildElements(moduleInstance) ?? [];
-      setElements(newElements);
-    }
-  }, [
-    mod
-  ]);
-  (0, import_react3.useEffect)(() => {
-    let attachedListener;
-    let detachedListener;
-    if (mod && (0, import_node_model2.isNodeInstance)(mod)) {
-      attachedListener = mod.on("moduleAttached", async () => {
-        const newElements = await CytoscapeElements.buildElements(mod) ?? [];
-        setElements(newElements);
-      });
-      detachedListener = mod.on("moduleDetached", async () => {
-        const newElements = await CytoscapeElements.buildElements(mod) ?? [];
-        setElements(newElements);
-      });
-    }
-    return () => {
-      attachedListener == null ? void 0 : attachedListener();
-      detachedListener == null ? void 0 : detachedListener();
-    };
-  }, [
-    mod
-  ]);
-  return elements;
-}, "useCytoscapeElements");
-
-// src/hooks/cytoscape/elements/useHoveredNode.tsx
-var import_react4 = require("react");
-var useHoveredNode = /* @__PURE__ */ __name((renderedElements) => {
-  const { cy } = useCytoscapeInstance(true);
-  const [hoveredNode, setHoveredNode] = (0, import_react4.useState)();
-  const nodeListener = (0, import_react4.useCallback)((node) => {
-    node.on("mouseover tap", () => {
-      setHoveredNode(node);
-    });
-  }, []);
-  (0, import_react4.useEffect)(() => {
-    if (renderedElements) {
-      renderedElements.nodes().forEach(nodeListener);
-    }
-  }, [
-    nodeListener,
-    renderedElements
-  ]);
-  (0, import_react4.useEffect)(() => {
-    var _a;
-    (_a = cy == null ? void 0 : cy.deref()) == null ? void 0 : _a.ready(() => {
-      var _a2;
-      (_a2 = cy == null ? void 0 : cy.deref()) == null ? void 0 : _a2.nodes().forEach(nodeListener);
-    });
-  }, [
-    cy,
-    nodeListener
-  ]);
-  return [
-    hoveredNode,
-    setHoveredNode
-  ];
-}, "useHoveredNode");
-
-// src/hooks/cytoscape/elements/useNewElements.tsx
-var import_react_node = require("@xyo-network/react-node");
-var import_react5 = require("react");
-var useNewElements = /* @__PURE__ */ __name((selectedElement) => {
-  const selectedAddress = (0, import_react5.useMemo)(() => {
-    const { address: selectedAddress2 } = (selectedElement == null ? void 0 : selectedElement.data()) ?? {};
-    return selectedAddress2;
-  }, [
-    selectedElement
-  ]);
-  const [mod] = (0, import_react_node.useWeakModuleFromNode)(selectedAddress);
-  const newElements = useCytoscapeElements(mod);
-  return newElements;
-}, "useNewElements");
-
-// src/hooks/cytoscape/elements/useRenderNewElements.tsx
-var import_react6 = require("react");
-var useRenderNewElements = /* @__PURE__ */ __name((newElements = [], hideLabels) => {
-  const { cy } = useCytoscapeInstance(true);
-  const [renderedElements, setRenderedElements] = (0, import_react6.useState)();
-  (0, import_react6.useEffect)(() => {
-    var _a, _b;
-    if (newElements.length > 1) {
-      const renderedElements2 = (_a = cy == null ? void 0 : cy.deref()) == null ? void 0 : _a.add(newElements);
-      setRenderedElements(renderedElements2);
-      (_b = cy == null ? void 0 : cy.deref()) == null ? void 0 : _b.layout(ColaLayout).run();
-    }
-  }, [
-    cy,
-    hideLabels,
-    newElements
-  ]);
-  return renderedElements;
-}, "useRenderNewElements");
-
-// src/hooks/cytoscape/elements/useSelectedElement.tsx
-var import_react7 = require("react");
-var useSelectedElement = /* @__PURE__ */ __name(() => {
-  const [selectedElement, setSelectedElement] = (0, import_react7.useState)();
-  const { cy } = useCytoscapeInstance(true);
-  const updateStyles = /* @__PURE__ */ __name((element) => {
-    var _a;
-    const nodes = (_a = cy == null ? void 0 : cy.deref()) == null ? void 0 : _a.nodes();
-    nodes == null ? void 0 : nodes.toggleClass("activeNode", false);
-    element.toggleClass("activeNode", true);
-  }, "updateStyles");
-  const toggleSelectedElement = /* @__PURE__ */ __name((address) => {
-    var _a, _b;
-    const selectedNode = (_b = (_a = cy == null ? void 0 : cy.deref()) == null ? void 0 : _a.nodes(`[id="${address}"]`)) == null ? void 0 : _b[0];
-    if (selectedNode) {
-      setSelectedElement(selectedNode);
-      updateStyles(selectedNode);
-    }
-  }, "toggleSelectedElement");
-  return {
-    selectedElement,
-    toggleSelectedElement
-  };
-}, "useSelectedElement");
-
-// src/hooks/cytoscape/elements/useElements.tsx
-var useElements = /* @__PURE__ */ __name((hideLabels) => {
-  const { selectedElement, toggleSelectedElement } = useSelectedElement();
-  const newElements = useNewElements(selectedElement);
-  const renderedElements = useRenderNewElements(newElements, hideLabels);
-  const [hoveredNode, setHoveredNode] = useHoveredNode(renderedElements);
-  return {
-    hoveredNode,
-    setHoveredNode,
-    toggleSelectedElement
-  };
-}, "useElements");
-
-// src/hooks/cytoscape/useCytoscapeOptions.ts
-var import_react10 = require("react");
-
-// src/hooks/cytoscape/useCytoscapeStyle.tsx
-var import_material2 = require("@mui/material");
-var import_react9 = require("react");
-
-// src/hooks/cytoscape/useIcons.tsx
-var import_material = require("@mui/material");
-var import_react8 = __toESM(require("react"), 1);
-var useIcons = /* @__PURE__ */ __name(() => {
-  const theme = (0, import_material.useTheme)();
-  const icons = (0, import_react8.useMemo)(() => {
-    const iconMap = generateIconMap();
-    return Object.entries(CyIconSet).reduce((acc, [name, IconComponent]) => {
-      const icon = /* @__PURE__ */ import_react8.default.createElement(IconComponent, {
-        fontSize: "small"
-      });
-      acc[name] = encodeSvg(icon, theme.palette.getContrastText(theme.palette.text.primary));
-      return acc;
-    }, iconMap);
-  }, [
-    theme.palette
-  ]);
-  return icons;
-}, "useIcons");
-
-// src/hooks/cytoscape/useCytoscapeStyle.tsx
-var useCytoscapeStyle = /* @__PURE__ */ __name((hideLabels = false) => {
-  const theme = (0, import_material2.useTheme)();
-  const icons = useIcons();
-  const style = (0, import_react9.useMemo)(() => [
-    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
-  ]);
-  return style;
-}, "useCytoscapeStyle");
-
-// src/hooks/cytoscape/useCytoscapeOptions.ts
-var useCytoscapeOptions = /* @__PURE__ */ __name((elements, style, layout) => {
-  const defaultStyle = useCytoscapeStyle();
-  const resolvedLayout = layout ?? ConcentricLayout;
-  const resolvedStyle = style ?? defaultStyle;
-  const options = (0, import_react10.useMemo)(() => {
-    if (elements && resolvedLayout && resolvedStyle) {
-      return {
-        elements,
-        layout: resolvedLayout,
-        style: resolvedStyle
-      };
-    }
-  }, [
-    elements,
-    layout,
-    style
-  ]);
-  return options;
-}, "useCytoscapeOptions");
-
-// src/hooks/cytoscape/useModuleDetails.tsx
-var import_react_promise = require("@xylabs/react-promise");
-var import_react11 = require("react");
-var useModuleDetails = /* @__PURE__ */ __name((rootModule, onFoundModule) => {
-  const { cy } = useCytoscapeInstance();
-  const [moduleAddress, setModuleAddress] = (0, import_react11.useState)();
-  const [foundModule] = (0, import_react_promise.usePromise)(async () => {
-    if (moduleAddress === null) return null;
-    const rootModuleInstance = rootModule == null ? void 0 : rootModule.deref();
-    if (moduleAddress && rootModuleInstance) {
-      const foundModule2 = await rootModuleInstance.resolve(moduleAddress);
-      return foundModule2 ?? null;
-    }
-  }, [
-    moduleAddress,
-    rootModule
-  ]);
-  (0, import_react11.useEffect)(() => {
-    var _a;
-    const resizeObserver = new ResizeObserver(() => {
-      var _a2, _b;
-      if (moduleAddress === null) {
-        setTimeout(() => {
-          var _a3;
-          (_a3 = cy == null ? void 0 : cy.deref()) == null ? void 0 : _a3.center();
-        }, 100);
-      } else if (foundModule && cy) {
-        const node = (_b = (_a2 = cy == null ? void 0 : cy.deref()) == null ? void 0 : _a2.nodes(`[id="${moduleAddress}"]`)) == null ? void 0 : _b[0];
-        setTimeout(() => {
-          var _a3;
-          (_a3 = cy == null ? void 0 : cy.deref()) == null ? void 0 : _a3.center(node);
-        }, 100);
-      }
-    });
-    const container = (_a = cy == null ? void 0 : cy.deref()) == null ? void 0 : _a.container();
-    if (container) {
-      resizeObserver.observe(container);
-    }
-    return () => {
-      if (container) resizeObserver.unobserve(container);
-    };
-  }, [
-    cy,
-    moduleAddress,
-    foundModule,
-    rootModule
-  ]);
-  (0, import_react11.useEffect)(() => {
-    if (foundModule) {
-      onFoundModule == null ? void 0 : onFoundModule();
-    }
-  }, [
-    cy,
-    moduleAddress,
-    foundModule,
-    onFoundModule
-  ]);
-  const onModuleDetails = /* @__PURE__ */ __name((address) => {
-    var _a, _b, _c, _d, _e;
-    const moduleNode = (_a = cy == null ? void 0 : cy.deref()) == null ? void 0 : _a.nodes(`[id="${address}"]`);
-    const rootModuleNode = (_c = cy == null ? void 0 : cy.deref()) == null ? void 0 : _c.nodes(`[id="${(_b = rootModule == null ? void 0 : rootModule.deref()) == null ? void 0 : _b.address}"]`);
-    const foundModuleNode = (_d = cy == null ? void 0 : cy.deref()) == null ? void 0 : _d.nodes(`[id="${foundModule == null ? void 0 : foundModule.address}"]`);
-    const notModuleNode = (_e = cy == null ? void 0 : cy.deref()) == null ? void 0 : _e.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);
-  }, "onModuleDetails");
-  return {
-    mod: foundModule,
-    onModuleDetails
-  };
-}, "useModuleDetails");
-
-// src/hooks/cytoscape/useRelationalGraphOptions.tsx
-var import_react12 = require("react");
-var useRelationalGraphOptions = /* @__PURE__ */ __name((mod) => {
-  const [hideLabels, setHideLabels] = (0, import_react12.useState)(true);
-  const handleToggleLabels = /* @__PURE__ */ __name(() => {
-    setHideLabels((oldValue) => !oldValue);
-  }, "handleToggleLabels");
-  const elements = useCytoscapeElements(mod);
-  const style = useCytoscapeStyle(hideLabels);
-  const options = useCytoscapeOptions(elements, style, ConcentricLayout);
-  return {
-    handleToggleLabels,
-    hideLabels,
-    options
-  };
-}, "useRelationalGraphOptions");
-
-// src/components/cytoscape-extensions/WithExtensions.tsx
-var import_cytoscape = __toESM(require("cytoscape"), 1);
-var import_cytoscape_cola = __toESM(require("cytoscape-cola"), 1);
-var import_cytoscape_cose_bilkent = __toESM(require("cytoscape-cose-bilkent"), 1);
-var import_cytoscape_dagre = __toESM(require("cytoscape-dagre"), 1);
-var import_cytoscape_euler = __toESM(require("cytoscape-euler"), 1);
-var import_react13 = __toESM(require("react"), 1);
-var WithExtensions = /* @__PURE__ */ __name(({ children }) => {
-  const [initialized, setInitialized] = (0, import_react13.useState)(false);
-  (0, import_react13.useEffect)(() => {
-    import_cytoscape.default.use(import_cytoscape_cola.default);
-    import_cytoscape.default.use(import_cytoscape_dagre.default);
-    import_cytoscape.default.use(import_cytoscape_cose_bilkent.default);
-    import_cytoscape.default.use(import_cytoscape_euler.default);
-    setInitialized(true);
-  }, []);
-  return /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, initialized ? children : void 0);
-}, "WithExtensions");
-
-// src/components/relational/graph/Graph.tsx
-var import_material3 = require("@mui/material");
-var import_hex = require("@xylabs/hex");
-var import_react_flexbox = require("@xylabs/react-flexbox");
-var import_react_identicon = require("@xylabs/react-identicon");
-var import_react_node2 = require("@xyo-network/react-node");
-var import_cytoscape2 = __toESM(require("cytoscape"), 1);
-var import_cytoscape_cola2 = __toESM(require("cytoscape-cola"), 1);
-var import_cytoscape_cose_bilkent2 = __toESM(require("cytoscape-cose-bilkent"), 1);
-var import_cytoscape_dagre2 = __toESM(require("cytoscape-dagre"), 1);
-var import_cytoscape_euler2 = __toESM(require("cytoscape-euler"), 1);
-var import_react14 = __toESM(require("react"), 1);
-var applyLayout = /* @__PURE__ */ __name((cy, name = "cola", options) => {
-  cy == null ? void 0 : cy.layout({
-    name,
-    ...options
-  }).run();
-}, "applyLayout");
-var loadLayout = /* @__PURE__ */ __name((layout = "cola") => {
-  switch (layout) {
-    case "dagre": {
-      import_cytoscape2.default.use(import_cytoscape_dagre2.default);
-      break;
-    }
-    case "euler": {
-      import_cytoscape2.default.use(import_cytoscape_euler2.default);
-      break;
-    }
-    case "cose-bilkent": {
-      import_cytoscape2.default.use(import_cytoscape_cose_bilkent2.default);
-      break;
-    }
-    case "cola": {
-      import_cytoscape2.default.use(import_cytoscape_cola2.default);
-      break;
-    }
-  }
-}, "loadLayout");
-var ModuleHoverDetails = /* @__PURE__ */ __name(({ name, address, ...props }) => {
-  return /* @__PURE__ */ import_react14.default.createElement(import_material3.Card, {
-    elevation: 3,
-    ...props
-  }, /* @__PURE__ */ import_react14.default.createElement(import_material3.CardHeader, {
-    avatar: /* @__PURE__ */ import_react14.default.createElement(import_material3.Paper, {
-      elevation: 6,
-      sx: {
-        bgcolor: "#fff",
-        p: 1
-      }
-    }, /* @__PURE__ */ import_react14.default.createElement(import_react_identicon.Identicon, {
-      value: address,
-      size: 24
-    })),
-    title: name,
-    subheader: address
-  }));
-}, "ModuleHoverDetails");
-var NodeRelationalGraphFlexBox = /* @__PURE__ */ (0, import_react14.forwardRef)(({ actions, children, node, layout, layoutOptions, showDetails, detail, options, onHover, ...props }, ref) => {
-  var _a;
-  const theme = (0, import_material3.useTheme)();
-  const [cy, setCy] = (0, import_react14.useState)();
-  const cytoscapeRef = (0, import_react14.useRef)();
-  const [hoverPosition, setHoverBoundingBox] = (0, import_react14.useState)();
-  const [hoverAddress, setHoverAddress] = (0, import_react14.useState)();
-  const [moduleInstance] = (0, import_react_node2.useWeakModuleFromNode)(hoverAddress, {
-    node
-  });
-  (0, import_react14.useEffect)(() => {
-    cy == null ? void 0 : cy.on("mouseover tap", ({ target }) => {
-      var _a2, _b;
-      const cyNode = target;
-      const bb = (_a2 = cyNode == null ? void 0 : cyNode.renderedBoundingBox) == null ? void 0 : _a2.call(cyNode);
-      setHoverBoundingBox(bb);
-      const id = (_b = cyNode.id) == null ? void 0 : _b.call(cyNode);
-      if (id) {
-        if (id.includes("/")) {
-          setHoverAddress(void 0);
-          onHover == null ? void 0 : onHover();
-        } else {
-          setHoverAddress((0, import_hex.asAddress)(id));
-          onHover == null ? void 0 : onHover((0, import_hex.asAddress)(id));
-        }
-      }
-    });
-  }, [
-    onHover,
-    cy
-  ]);
-  const handleReset = /* @__PURE__ */ __name(() => {
-    cy == null ? void 0 : cy.reset();
-    applyLayout(cy, layout ?? "euler", layoutOptions);
-  }, "handleReset");
-  (0, import_react14.useEffect)(() => {
-    let newCy;
-    const container = cytoscapeRef.current;
-    if (container) {
-      newCy = (0, import_cytoscape2.default)({
-        container,
-        ...options
-      });
-      setCy(newCy);
-    }
-    return () => {
-      newCy == null ? void 0 : newCy.destroy();
-      setCy(void 0);
-    };
-  }, [
-    options,
-    cytoscapeRef,
-    layoutOptions
-  ]);
-  (0, import_react14.useEffect)(() => {
-    if (cy) {
-      loadLayout(layout);
-      applyLayout(cy, layout ?? "euler", layoutOptions);
-    }
-  }, [
-    cy,
-    layoutOptions,
-    layout
-  ]);
-  return /* @__PURE__ */ import_react14.default.createElement(import_react_flexbox.FlexCol, {
-    id: "relational-graph-wrapper",
-    ref,
-    ...props
-  }, hoverAddress && hoverPosition ? /* @__PURE__ */ import_react14.default.createElement(import_material3.Box, {
-    position: "absolute",
-    top: hoverPosition.y1,
-    left: hoverPosition.x1,
-    zIndex: 100
-  }, /* @__PURE__ */ import_react14.default.createElement(ModuleHoverDetails, {
-    address: hoverAddress,
-    name: ((_a = moduleInstance == null ? void 0 : moduleInstance.deref()) == null ? void 0 : _a.id) ?? "Unknown"
-  })) : null, /* @__PURE__ */ import_react14.default.createElement(import_react_flexbox.FlexRow, {
-    justifyContent: "start",
-    width: "100%"
-  }, actions === null ? null : actions ? /* @__PURE__ */ import_react14.default.createElement(import_material3.ButtonGroup, null, actions, /* @__PURE__ */ import_react14.default.createElement(import_material3.Button, {
-    size: "small",
-    variant: "contained",
-    onClick: handleReset
-  }, "Reset View")) : /* @__PURE__ */ import_react14.default.createElement(import_material3.Button, {
-    size: "small",
-    variant: "contained",
-    onClick: handleReset
-  }, "Reset")), /* @__PURE__ */ import_react14.default.createElement(import_react_flexbox.FlexGrowRow, {
-    width: "100%",
-    alignItems: "start"
-  }, showDetails ? /* @__PURE__ */ import_react14.default.createElement(import_react_flexbox.FlexCol, {
-    height: "100%",
-    width: "85%"
-  }, detail) : null, /* @__PURE__ */ import_react14.default.createElement(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
-  }, /* @__PURE__ */ import_react14.default.createElement(import_react_flexbox.FlexCol, {
-    alignItems: "stretch",
-    position: "absolute",
-    width: "100%",
-    height: "100%",
-    ref: cytoscapeRef
-  }), children)));
-});
-NodeRelationalGraphFlexBox.displayName = "NodeRelationalGraph";
-var NodeRelationalGraph = NodeRelationalGraphFlexBox;
-
-// src/components/relational/graph/ProvidedNodeRenderer.tsx
-var import_react_node3 = require("@xyo-network/react-node");
-var import_react15 = __toESM(require("react"), 1);
-var ProvidedNodeRenderer = /* @__PURE__ */ __name(({ node, ...props }) => {
-  const [providedNode] = (0, import_react_node3.useWeakProvidedNode)();
-  const elements = useCytoscapeElements(node ?? providedNode);
-  const options = useCytoscapeOptions(elements);
-  return /* @__PURE__ */ import_react15.default.createElement(NodeRelationalGraphFlexBox, {
-    alignItems: "stretch",
-    flexGrow: 1,
-    height: "100%",
-    options,
-    ...props
-  });
-}, "ProvidedNodeRenderer");
-
-// src/components/module/graph/DetailsFlexbox.tsx
-var import_icons_material2 = require("@mui/icons-material");
-var import_material4 = require("@mui/material");
-var import_react_flexbox2 = require("@xylabs/react-flexbox");
-var import_react16 = __toESM(require("react"), 1);
-var DetailsFlexbox = /* @__PURE__ */ __name(({ children, onClose }) => {
-  return /* @__PURE__ */ import_react16.default.createElement(import_react_flexbox2.FlexGrowCol, {
-    alignItems: "end",
-    justifyContent: "start",
-    id: "module-detail",
-    width: "100%",
-    p: 2,
-    gap: 2
-  }, /* @__PURE__ */ import_react16.default.createElement(import_react_flexbox2.FlexRow, {
-    justifyContent: "end"
-  }, /* @__PURE__ */ import_react16.default.createElement(import_material4.IconButton, {
-    onClick: onClose,
-    size: "small"
-  }, /* @__PURE__ */ import_react16.default.createElement(import_icons_material2.CancelRounded, null))), children);
-}, "DetailsFlexbox");
-
-// src/components/module/graph/node/Hover.tsx
-var import_material5 = require("@mui/material");
-var import_react_flexbox3 = require("@xylabs/react-flexbox");
-var import_react18 = __toESM(require("react"), 1);
-
-// src/components/module/graph/node/hooks/useNodeElement.tsx
-var import_react17 = require("react");
-var useNodeElement = /* @__PURE__ */ __name((node) => {
-  const ref = (0, import_react17.useRef)(null);
-  const [currentElement, setCurrentElement] = (0, import_react17.useState)(null);
-  const [boundingBox, setBoundingBox] = (0, import_react17.useState)(node == null ? void 0 : node.renderedBoundingBox());
-  (0, import_react17.useEffect)(() => {
-    setCurrentElement(null);
-  }, [
-    node
-  ]);
-  (0, import_react17.useEffect)(() => {
-    if (node) {
-      setBoundingBox(node.renderedBoundingBox());
-    }
-    const listener = /* @__PURE__ */ __name(() => {
-      setBoundingBox(node == null ? void 0 : node.renderedBoundingBox());
-    }, "listener");
-    node == null ? void 0 : node.on("position", listener);
-    return () => {
-      node == null ? void 0 : node.off("position", void 0, listener);
-    };
-  }, [
-    node
-  ]);
-  (0, import_react17.useEffect)(() => {
-    setCurrentElement(ref.current);
-  }, [
-    boundingBox
-  ]);
-  return {
-    boundingBox,
-    currentElement,
-    ref
-  };
-}, "useNodeElement");
-
-// src/components/module/graph/node/Hover.tsx
-var ModuleGraphNodeHover = /* @__PURE__ */ __name(({ children, node }) => {
-  const { boundingBox, ref, currentElement } = useNodeElement(node);
-  return /* @__PURE__ */ import_react18.default.createElement(import_react18.default.Fragment, null, /* @__PURE__ */ import_react18.default.createElement(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__ */ import_react18.default.createElement(import_react18.default.Fragment, null, children == null ? void 0 : children(currentElement)) : null);
-}, "ModuleGraphNodeHover");
-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,
-  cursor: "pointer",
-  pointerEvents: "none",
-  position: "absolute"
-}));
-
-// src/components/module/graph/Popper.tsx
-var import_icons_material3 = require("@mui/icons-material");
-var import_material6 = require("@mui/material");
-var import_react_identicon2 = require("@xylabs/react-identicon");
-var import_react19 = __toESM(require("react"), 1);
-var ModuleHoverPopper = /* @__PURE__ */ __name(({ anchorEl, onClose, onModuleDetails, onModuleExplore, node, ...props }) => {
-  const { address, name } = (node == null ? void 0 : node.data()) ?? {};
-  return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, anchorEl ? /* @__PURE__ */ import_react19.default.createElement(import_material6.Popper, {
-    anchorEl,
-    ...props
-  }, /* @__PURE__ */ import_react19.default.createElement(import_material6.Card, {
-    elevation: 3
-  }, /* @__PURE__ */ import_react19.default.createElement(import_material6.CardHeader, {
-    action: onClose ? /* @__PURE__ */ import_react19.default.createElement(import_material6.IconButton, {
-      size: "small",
-      onClick: onClose
-    }, /* @__PURE__ */ import_react19.default.createElement(import_icons_material3.CancelRounded, null)) : null,
-    avatar: /* @__PURE__ */ import_react19.default.createElement(import_material6.Paper, {
-      elevation: 6,
-      sx: {
-        bgcolor: "#fff",
-        p: 1
-      }
-    }, /* @__PURE__ */ import_react19.default.createElement(import_react_identicon2.Identicon, {
-      value: address,
-      size: 24
-    })),
-    title: name,
-    subheader: address
-  }), /* @__PURE__ */ import_react19.default.createElement(StyledCardActions, null, onModuleDetails ? /* @__PURE__ */ import_react19.default.createElement(import_material6.Button, {
-    onClick: /* @__PURE__ */ __name(() => onModuleDetails == null ? void 0 : onModuleDetails(address), "onClick"),
-    size: "small",
-    variant: "contained"
-  }, "Details") : null, onModuleExplore ? /* @__PURE__ */ import_react19.default.createElement(import_material6.Button, {
-    onClick: /* @__PURE__ */ __name(() => onModuleExplore == null ? void 0 : onModuleExplore(address), "onClick"),
-    size: "small",
-    variant: "contained"
-  }, "Explore") : null))) : null);
-}, "ModuleHoverPopper");
-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 ModuleGraphFlexBox = /* @__PURE__ */ __name(({ hideActions, rootModule, disableModuleDetails, ...props }) => {
-  const cytoscapeRef = (0, import_react20.useRef)(null);
-  const { handleToggleLabels, hideLabels, options } = useRelationalGraphOptions(rootModule ?? void 0);
-  const { hoveredNode, setHoveredNode, toggleSelectedElement } = useElements(hideLabels);
-  const { mod, onModuleDetails } = useModuleDetails(rootModule, () => setHoveredNode(void 0));
-  return /* @__PURE__ */ import_react20.default.createElement(WithExtensions, null, /* @__PURE__ */ import_react20.default.createElement(NodeRelationalGraphFlexBox, {
-    actions: mod ? null : hideActions ? null : /* @__PURE__ */ import_react20.default.createElement(import_material7.Button, {
-      size: "small",
-      onClick: handleToggleLabels,
-      variant: "contained"
-    }, "Toggle Labels"),
-    showDetails: !!mod,
-    detail: /* @__PURE__ */ import_react20.default.createElement(DetailsFlexbox, {
-      onClose: /* @__PURE__ */ __name(() => onModuleDetails(null), "onClose")
-    }),
-    options,
-    ref: cytoscapeRef,
-    width: "100%",
-    ...props
-  }, /* @__PURE__ */ import_react20.default.createElement(ModuleGraphNodeHover, {
-    node: hoveredNode
-  }, (element) => /* @__PURE__ */ import_react20.default.createElement(StyledModuleHoverPopper, {
-    anchorEl: element,
-    container: cytoscapeRef.current,
-    node: hoveredNode,
-    onClose: /* @__PURE__ */ __name(() => setHoveredNode(void 0), "onClose"),
-    onModuleExplore: toggleSelectedElement,
-    onModuleDetails: disableModuleDetails ? void 0 : onModuleDetails,
-    placement: "top",
-    open: true
-  }))));
-}, "ModuleGraphFlexBox");
-var ModuleGraphFlexBoxWithProvider = /* @__PURE__ */ __name((props) => {
-  return /* @__PURE__ */ import_react20.default.createElement(CytoscapeInstanceProvider, null, /* @__PURE__ */ import_react20.default.createElement(ModuleGraphFlexBox, props));
-}, "ModuleGraphFlexBoxWithProvider");
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ColaLayout,
-  ConcentricLayout,
-  CyIconSet,
-  CytoscapeElements,
-  CytoscapeInstanceContext,
-  CytoscapeInstanceProvider,
-  EdgeStyled,
-  ModuleCardParser,
-  ModuleGraphFlexBox,
-  ModuleGraphFlexBoxWithProvider,
-  Node,
-  NodeAsRoot,
-  NodeRelationalGraph,
-  NodeRelationalGraphFlexBox,
-  NodeWithName,
-  ProvidedNodeRenderer,
-  encodeSvg,
-  generateIconMap,
-  parseModuleType,
-  useCytoscapeElements,
-  useCytoscapeInstance,
-  useCytoscapeOptions,
-  useElements,
-  useModuleDetails,
-  useRelationalGraphOptions
-});
-//# sourceMappingURL=index.cjs.map