@xyo-network/react-node-renderer 2.64.9 → 2.65.0

package/dist/browser/components/module/graph/index.js

@@ -1,683 +0,0 @@
-// src/components/module/graph/GraphFlexBox.tsx
-import { Button as Button3 } from "@mui/material";
-import { useRef as useRef2 } from "react";
-
-// src/contexts/CytoscapeInstance/Context.ts
-import { createContextEx } from "@xyo-network/react-shared";
-var CytoscapeInstanceContext = createContextEx();
-
-// src/contexts/CytoscapeInstance/Provider.tsx
-import { useEffect, useState } from "react";
-import { jsx } from "react/jsx-runtime";
-var CytoscapeInstanceProvider = ({ children, defaultInstance }) => {
-  const [cy, setCy] = useState(defaultInstance);
-  useEffect(() => {
-    setCy(defaultInstance);
-  }, [defaultInstance]);
-  return /* @__PURE__ */ jsx(CytoscapeInstanceContext.Provider, { value: { cy, provided: true, setCy }, children });
-};
-
-// src/contexts/CytoscapeInstance/use.ts
-import { useContextEx } from "@xyo-network/react-shared";
-var useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, "CytoscapeInstance", required);
-
-// src/hooks/cytoscape/elements/useCytoscapeElements.ts
-import { useAsyncEffect } from "@xylabs/react-async-effect";
-import { isNodeInstance as isNodeInstance3 } from "@xyo-network/node-model";
-import { useEffect as useEffect2, useState as useState2 } from "react";
-
-// src/Cytoscape/CytoscapeElements.ts
-import { isNodeInstance as isNodeInstance2 } from "@xyo-network/node-model";
-
-// src/Cytoscape/lib/encodeSvg.ts
-import { renderToStaticMarkup } from "react-dom/server";
-var dataUri = "data:image/svg+xml,";
-var encodeSvg = (reactElement, color) => {
-  const svgString = renderToStaticMarkup(reactElement);
-  const doc = new DOMParser().parseFromString(svgString, "text/html");
-  const svgElement = doc.getElementsByTagName("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)}`;
-};
-
-// src/Cytoscape/lib/iconMap.ts
-var generateIconMap = () => ({
-  archivist: "",
-  bridge: "",
-  diviner: "",
-  module: "",
-  node: "",
-  sentinel: "",
-  witness: ""
-});
-
-// src/Cytoscape/lib/layout/ColaLayout.ts
-var ColaLayout = {
-  centerGraph: false,
-  convergenceThreshold: 0.01,
-  name: "cola"
-};
-
-// src/Cytoscape/lib/layout/ConcentricLayout.ts
-var ConcentricLayout = {
-  concentric: function(node) {
-    return node.degree();
-  },
-  levelWidth: function() {
-    return 2;
-  },
-  minNodeSpacing: 75,
-  name: "concentric"
-};
-
-// src/Cytoscape/lib/parseModuleType.ts
-import { isArchivistInstance } from "@xyo-network/archivist-model";
-import { isBridgeInstance } from "@xyo-network/bridge-model";
-import { isDivinerInstance } from "@xyo-network/diviner-model";
-import { isNodeInstance } from "@xyo-network/node-model";
-import { isSentinelInstance } from "@xyo-network/sentinel";
-import { isWitnessModule } from "@xyo-network/witness";
-var parseModuleType = (module) => {
-  let type = "module";
-  if (module) {
-    if (isArchivistInstance(module)) {
-      type = "archivist";
-    } else if (isBridgeInstance(module)) {
-      type = "bridge";
-    } else if (isDivinerInstance(module)) {
-      type = "diviner";
-    } else if (isNodeInstance(module)) {
-      type = "node";
-    } else if (isSentinelInstance(module)) {
-      type = "sentinel";
-    } else if (isWitnessModule(module)) {
-      type = "witness";
-    } else {
-      type = "module";
-    }
-  }
-  return type;
-};
-
-// src/Cytoscape/CytoscapeElements.ts
-var CytoscapeElements = class _CytoscapeElements {
-  static MaxNameLength = 20;
-  static buildEdge(rootNode, newNode) {
-    return {
-      data: {
-        id: `${rootNode.data.id}/${newNode.data.id}`,
-        source: rootNode.data.id,
-        target: newNode.data.id
-      }
-    };
-  }
-  static async buildElements(module) {
-    const newRootNode = _CytoscapeElements.buildRootNode(module);
-    const newElements = [newRootNode];
-    try {
-      const childElements = await _CytoscapeElements.recurseNodes(module);
-      childElements?.forEach((module2) => {
-        const newNode = _CytoscapeElements.buildNode(module2);
-        newElements.push(newNode);
-        const newEdge = _CytoscapeElements.buildEdge(newRootNode, newNode);
-        newElements.push(newEdge);
-      });
-      return newElements;
-    } catch (e) {
-      console.error("error resolving modules", e);
-      return [];
-    }
-  }
-  static buildNode(module, properties, classes) {
-    const { address, config } = module;
-    const normalizedName = config.name ?? address.substring(0, 8);
-    return {
-      classes,
-      data: {
-        address,
-        id: address,
-        name: normalizedName,
-        type: parseModuleType(module),
-        ...properties
-      }
-    };
-  }
-  static buildRootNode = (module) => {
-    return _CytoscapeElements.buildNode(module, {}, ["activeNode"]);
-  };
-  static normalizeName(name) {
-    if (!name)
-      return;
-    if (name.length > this.MaxNameLength)
-      return `${name.substring(0, 20)}...`;
-    return name;
-  }
-  static async recurseNodes(module, maxTraversals = 1) {
-    let localDepth = 0;
-    const childModules = [];
-    const traverse = async (nestedNode) => {
-      if (localDepth < maxTraversals) {
-        const modules = await nestedNode.resolve(void 0, { direction: "down", maxDepth: 2 });
-        await Promise.all(
-          modules.map(async (child) => {
-            if (child !== nestedNode && isNodeInstance2(child)) {
-              localDepth++;
-              await traverse(child);
-            } else if (child !== module) {
-              childModules.push(child);
-            }
-          })
-        );
-      }
-    };
-    await traverse(module);
-    return childModules;
-  }
-};
-
-// src/Cytoscape/CytoscapeIcons.tsx
-import {
-  BubbleChartRounded as BubbleChartRoundedIcon,
-  Hub as HubIcon,
-  InsertLinkRounded as InsertLinkRoundedIcon,
-  Inventory2Rounded as Inventory2RoundedIcon,
-  QuestionMarkRounded as QuestionMarkRoundedIcon,
-  TimerRounded as TimerRoundedIcon,
-  VisibilityRounded as VisibilityRoundedIcon
-} from "@mui/icons-material";
-var CyIconSet = {
-  archivist: Inventory2RoundedIcon,
-  bridge: InsertLinkRoundedIcon,
-  diviner: BubbleChartRoundedIcon,
-  module: QuestionMarkRoundedIcon,
-  node: HubIcon,
-  sentinel: TimerRoundedIcon,
-  witness: VisibilityRoundedIcon
-};
-
-// src/Cytoscape/CytoscapeStyles.ts
-var NodeWithName = (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"
-  }
-});
-var Node = (icons, bgColor, hideLabels = false) => ({
-  selector: "node",
-  style: {
-    "background-color": bgColor,
-    "background-height": "75%",
-    "background-image": (elem) => icons[elem.data("type")],
-    "background-width": "24",
-    label: hideLabels ? void 0 : "data(name)",
-    shape: "round-rectangle"
-  }
-});
-var NodeAsRoot = (bgColor) => ({
-  selector: ".activeNode",
-  style: {
-    "background-color": bgColor
-  }
-});
-var EdgeStyled = (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
-  }
-});
-
-// src/hooks/cytoscape/elements/useCytoscapeElements.ts
-var useCytoscapeElements = (module) => {
-  const [elements, setElements] = useState2([]);
-  useAsyncEffect(
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    async () => {
-      if (module) {
-        const newElements = await CytoscapeElements.buildElements(module) ?? [];
-        setElements(newElements);
-      }
-    },
-    [module]
-  );
-  useEffect2(() => {
-    let attachedListener = void 0;
-    let detachedListener = void 0;
-    if (module && isNodeInstance3(module)) {
-      attachedListener = module.on("moduleAttached", async () => {
-        const newElements = await CytoscapeElements.buildElements(module) ?? [];
-        setElements(newElements);
-      });
-      detachedListener = module.on("moduleDetached", async () => {
-        const newElements = await CytoscapeElements.buildElements(module) ?? [];
-        setElements(newElements);
-      });
-    }
-    return () => {
-      attachedListener?.();
-      detachedListener?.();
-    };
-  }, [module]);
-  return elements;
-};
-
-// src/hooks/cytoscape/elements/useHoveredNode.tsx
-import { useCallback, useEffect as useEffect3, useState as useState3 } from "react";
-var useHoveredNode = (renderedElements) => {
-  const { cy } = useCytoscapeInstance(true);
-  const [hoveredNode, setHoveredNode] = useState3();
-  const nodeListener = useCallback((node) => {
-    node.on("mouseover tap", () => {
-      setHoveredNode(node);
-    });
-  }, []);
-  useEffect3(() => {
-    if (renderedElements) {
-      renderedElements.nodes().forEach(nodeListener);
-    }
-  }, [nodeListener, renderedElements]);
-  useEffect3(() => {
-    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 useEffect4, useState as useState4 } from "react";
-var useRenderNewElements = (newElements = [], hideLabels) => {
-  const { cy } = useCytoscapeInstance(true);
-  const [renderedElements, setRenderedElements] = useState4();
-  useEffect4(() => {
-    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 useState5 } from "react";
-var useSelectedElement = () => {
-  const [selectedElement, setSelectedElement] = useState5();
-  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";
-
-// src/hooks/cytoscape/useCytoscapeStyle.tsx
-import { useTheme as useTheme2 } from "@mui/material";
-import { useMemo as useMemo2 } from "react";
-
-// src/hooks/cytoscape/useIcons.tsx
-import { useTheme } from "@mui/material";
-import { useMemo } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var useIcons = () => {
-  const theme = useTheme();
-  const icons = useMemo(() => {
-    const iconMap = generateIconMap();
-    return Object.entries(CyIconSet).reduce((acc, [name, IconComponent]) => {
-      const icon = /* @__PURE__ */ jsx2(IconComponent, { fontSize: "small" });
-      acc[name] = encodeSvg(icon, theme.palette.getContrastText(theme.palette.text.primary));
-      return acc;
-    }, iconMap);
-  }, [theme.palette]);
-  return icons;
-};
-
-// src/hooks/cytoscape/useCytoscapeStyle.tsx
-var useCytoscapeStyle = (hideLabels = false) => {
-  const theme = useTheme2();
-  const icons = useIcons();
-  const style = useMemo2(
-    () => [
-      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;
-};
-
-// src/hooks/cytoscape/useCytoscapeOptions.ts
-var useCytoscapeOptions = (elements, style, layout) => {
-  const defaultStyle = useCytoscapeStyle();
-  const resolvedLayout = layout ?? ConcentricLayout;
-  const resolvedStyle = style ?? defaultStyle;
-  const options = useMemo3(() => {
-    if (elements && resolvedLayout && resolvedStyle) {
-      return {
-        elements,
-        layout: resolvedLayout,
-        style: resolvedStyle
-      };
-    }
-  }, [elements, layout, style]);
-  return options;
-};
-
-// src/hooks/cytoscape/useModuleDetails.tsx
-import { usePromise } from "@xylabs/react-promise";
-import { useEffect as useEffect5, useState as useState6 } from "react";
-var useModuleDetails = (rootModule, onFoundModule) => {
-  const { cy } = useCytoscapeInstance();
-  const [moduleAddress, setModuleAddress] = useState6();
-  const [foundModule] = usePromise(async () => {
-    if (moduleAddress === null)
-      return null;
-    if (moduleAddress && rootModule) {
-      const foundModule2 = await rootModule.resolve(moduleAddress);
-      return foundModule2 ? foundModule2 : null;
-    }
-  }, [moduleAddress, rootModule]);
-  useEffect5(() => {
-    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);
-      }
-    });
-    const container = cy?.container();
-    if (container) {
-      resizeObserver.observe(container);
-    }
-    return () => {
-      if (container)
-        resizeObserver.unobserve(container);
-    };
-  }, [cy, moduleAddress, foundModule, rootModule?.address]);
-  useEffect5(() => {
-    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 useState7 } from "react";
-var useRelationalGraphOptions = (module) => {
-  const [hideLabels, setHideLabels] = useState7(true);
-  const handleToggleLabels = () => {
-    setHideLabels((oldValue) => !oldValue);
-  };
-  const elements = useCytoscapeElements(module);
-  const style = useCytoscapeStyle(hideLabels);
-  const options = useCytoscapeOptions(elements, style, ConcentricLayout);
-  return { handleToggleLabels, hideLabels, options };
-};
-
-// src/components/cytoscape-extensions/WithExtensions.tsx
-import { use } from "cytoscape";
-import cola from "cytoscape-cola";
-import { useEffect as useEffect6, useState as useState8 } from "react";
-import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
-var WithExtensions = ({ children }) => {
-  const [initialized, setInitialized] = useState8(false);
-  useEffect6(() => {
-    use(cola);
-    setInitialized(true);
-  }, []);
-  return /* @__PURE__ */ jsx3(Fragment, { children: initialized ? children : void 0 });
-};
-
-// src/components/relational/graph/Graph.tsx
-import { Button, ButtonGroup, useTheme as useTheme3 } from "@mui/material";
-import { FlexCol, FlexGrowRow, FlexRow } from "@xylabs/react-flexbox";
-import { useShareForwardedRef } from "@xyo-network/react-shared";
-import cytoscape from "cytoscape";
-import { forwardRef, useEffect as useEffect7, useState as useState9 } from "react";
-import { jsx as jsx4, jsxs } from "react/jsx-runtime";
-var NodeRelationalGraphFlexBox = forwardRef(
-  ({ actions, children, showDetails, detail, options, ...props }, ref) => {
-    const theme = useTheme3();
-    const [cy, setCy] = useState9();
-    const { setCy: setCyContext } = useCytoscapeInstance();
-    const sharedRef = useShareForwardedRef(ref);
-    const handleReset = () => {
-      cy?.reset();
-      cy?.fit(void 0, 20);
-    };
-    useEffect7(() => {
-      if (sharedRef) {
-        const newCy = cytoscape({
-          container: sharedRef.current,
-          ...options
-        });
-        setCy(newCy);
-      }
-    }, [options, sharedRef]);
-    useEffect7(() => {
-      setCyContext?.(cy);
-    }, [cy, setCyContext]);
-    return /* @__PURE__ */ jsxs(FlexCol, { id: "relational-graph-wrapper", ...props, children: [
-      /* @__PURE__ */ jsx4(FlexRow, { justifyContent: "start", width: "100%", children: actions === null ? null : actions ? /* @__PURE__ */ jsxs(ButtonGroup, { children: [
-        actions,
-        /* @__PURE__ */ jsx4(Button, { size: "small", variant: "contained", onClick: handleReset, children: "Reset View" })
-      ] }) : /* @__PURE__ */ jsx4(Button, { size: "small", variant: "contained", onClick: handleReset, children: "Reset" }) }),
-      /* @__PURE__ */ jsxs(FlexGrowRow, { width: "100%", alignItems: "start", children: [
-        showDetails ? /* @__PURE__ */ jsx4(FlexCol, { height: "100%", width: "85%", children: detail }) : null,
-        /* @__PURE__ */ jsxs(
-          FlexCol,
-          {
-            justifyContent: "start",
-            classes: "cytoscape-wrap",
-            width: showDetails ? "15%" : "100%",
-            height: showDetails ? "50%" : "100%",
-            border: showDetails ? `1px solid ${theme.palette.divider}` : void 0,
-            children: [
-              /* @__PURE__ */ jsx4(FlexCol, { alignItems: "stretch", position: "absolute", width: "100%", height: "100%", ref: sharedRef }),
-              children
-            ]
-          }
-        )
-      ] })
-    ] });
-  }
-);
-NodeRelationalGraphFlexBox.displayName = "NodeRelationalGraph";
-
-// src/components/module/graph/DetailsFlexbox.tsx
-import { CancelRounded } from "@mui/icons-material";
-import { IconButton } from "@mui/material";
-import { FlexGrowCol, FlexRow as FlexRow2 } from "@xylabs/react-flexbox";
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
-var DetailsFlexbox = ({ children, onClose }) => {
-  return /* @__PURE__ */ jsxs2(FlexGrowCol, { alignItems: "end", justifyContent: "start", id: "module-detail", width: "100%", p: 2, gap: 2, children: [
-    /* @__PURE__ */ jsx5(FlexRow2, { justifyContent: "end", children: /* @__PURE__ */ jsx5(IconButton, { onClick: onClose, size: "small", children: /* @__PURE__ */ jsx5(CancelRounded, {}) }) }),
-    children
-  ] });
-};
-
-// src/components/module/graph/node/Hover.tsx
-import { styled } from "@mui/material";
-import { FlexCol as FlexCol2 } from "@xylabs/react-flexbox";
-
-// src/components/module/graph/node/hooks/useNodeElement.tsx
-import { useEffect as useEffect8, useRef, useState as useState10 } from "react";
-var useNodeElement = (node) => {
-  const ref = useRef(null);
-  const [currentElement, setCurrentElement] = useState10(null);
-  const [boundingBox, setBoundingBox] = useState10(node?.renderedBoundingBox());
-  useEffect8(() => {
-    setCurrentElement(null);
-  }, [node]);
-  useEffect8(() => {
-    if (node) {
-      setBoundingBox(node.renderedBoundingBox());
-    }
-    const listener = () => {
-      setBoundingBox(node?.renderedBoundingBox());
-    };
-    node?.on("position", listener);
-    return () => {
-      node?.off("position", void 0, listener);
-    };
-  }, [node]);
-  useEffect8(() => {
-    setCurrentElement(ref.current);
-  }, [boundingBox]);
-  return { boundingBox, currentElement, ref };
-};
-
-// src/components/module/graph/node/Hover.tsx
-import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
-var ModuleGraphNodeHover = ({ children, node }) => {
-  const { boundingBox, ref, currentElement } = useNodeElement(node);
-  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
-    /* @__PURE__ */ jsx6(StyledNodeGhostElementFlexCol, { ref, left: boundingBox?.x1, height: boundingBox?.h, top: boundingBox?.y1, width: boundingBox?.w }),
-    node ? /* @__PURE__ */ jsx6(Fragment2, { children: children?.(currentElement) }) : null
-  ] });
-};
-var StyledNodeGhostElementFlexCol = styled(FlexCol2, { name: "StyledNodeGhostElementFlexCol" })(() => ({
-  // For easier debugging of the 'ghost' element that matches the hovered cytoscape node
-  // backgroundColor: '#fff',
-  // opacity: 0.25,
-  // eslint-disable-next-line sort-keys-fix/sort-keys-fix
-  cursor: "pointer",
-  pointerEvents: "none",
-  position: "absolute"
-}));
-
-// src/components/module/graph/Popper.tsx
-import { CancelRounded as CancelRounded2 } from "@mui/icons-material";
-import { Button as Button2, Card, CardActions, CardHeader, IconButton as IconButton2, Paper, Popper, styled as styled2 } from "@mui/material";
-import { Identicon } from "@xylabs/react-identicon";
-import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-var ModuleHoverPopper = ({ anchorEl, onClose, onModuleDetails, onModuleExplore, node, ...props }) => {
-  const { address, name } = node?.data() ?? {};
-  return /* @__PURE__ */ jsx7(Fragment3, { children: anchorEl ? /* @__PURE__ */ jsx7(Popper, { anchorEl, ...props, children: /* @__PURE__ */ jsxs4(Card, { elevation: 3, children: [
-    /* @__PURE__ */ jsx7(
-      CardHeader,
-      {
-        action: onClose ? /* @__PURE__ */ jsx7(IconButton2, { size: "small", onClick: onClose, children: /* @__PURE__ */ jsx7(CancelRounded2, {}) }) : null,
-        avatar: /* @__PURE__ */ jsx7(Paper, { elevation: 6, sx: { bgcolor: "#fff", p: 1 }, children: /* @__PURE__ */ jsx7(Identicon, { value: address, size: 24 }) }),
-        title: name,
-        subheader: address
-      }
-    ),
-    /* @__PURE__ */ jsxs4(StyledCardActions, { children: [
-      onModuleDetails ? /* @__PURE__ */ jsx7(Button2, { onClick: () => onModuleDetails?.(address), size: "small", variant: "contained", children: "Details" }) : null,
-      onModuleExplore ? /* @__PURE__ */ jsx7(Button2, { onClick: () => onModuleExplore?.(address), size: "small", variant: "contained", children: "Explore" }) : null
-    ] })
-  ] }) }) : null });
-};
-var StyledModuleHoverPopper = styled2(ModuleHoverPopper, { name: "StyledComponents" })(() => ({
-  zIndex: 2
-}));
-var StyledCardActions = styled2(CardActions, { name: "StyledCardActions" })(() => ({
-  display: "flex",
-  justifyContent: "center"
-}));
-
-// src/components/module/graph/GraphFlexBox.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
-var ModuleGraphFlexBox = ({ rootModule, disableModuleDetails, ...props }) => {
-  const cytoscapeRef = useRef2(null);
-  const { handleToggleLabels, hideLabels, options } = useRelationalGraphOptions(rootModule ?? void 0);
-  const { hoveredNode, setHoveredNode, toggleSelectedElement } = useElements(hideLabels);
-  const { module, onModuleDetails } = useModuleDetails(rootModule, () => setHoveredNode(void 0));
-  return /* @__PURE__ */ jsx8(WithExtensions, { children: /* @__PURE__ */ jsx8(
-    NodeRelationalGraphFlexBox,
-    {
-      actions: module ? null : /* @__PURE__ */ jsx8(Button3, { size: "small", onClick: handleToggleLabels, variant: "contained", children: "Toggle Labels" }),
-      showDetails: !!module,
-      detail: /* @__PURE__ */ jsx8(DetailsFlexbox, { onClose: () => onModuleDetails(null) }),
-      options,
-      ref: cytoscapeRef,
-      width: "100%",
-      ...props,
-      children: /* @__PURE__ */ jsx8(ModuleGraphNodeHover, { node: hoveredNode, children: (element) => /* @__PURE__ */ jsx8(
-        StyledModuleHoverPopper,
-        {
-          anchorEl: element,
-          container: cytoscapeRef.current,
-          node: hoveredNode,
-          onClose: () => setHoveredNode(void 0),
-          onModuleExplore: toggleSelectedElement,
-          onModuleDetails: disableModuleDetails ? void 0 : onModuleDetails,
-          placement: "top",
-          open: true
-        }
-      ) })
-    }
-  ) });
-};
-var ModuleGraphFlexBoxWithProvider = (props) => {
-  return /* @__PURE__ */ jsx8(CytoscapeInstanceProvider, { children: /* @__PURE__ */ jsx8(ModuleGraphFlexBox, { ...props }) });
-};
-export {
-  ModuleGraphFlexBox,
-  ModuleGraphFlexBoxWithProvider
-};
-//# sourceMappingURL=index.js.map