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

package/dist/browser/components/{ProvidedNodeRenderer.cjs → relational/graph/ProvidedNodeRenderer.cjs}

@@ -27,7 +27,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/components/ProvidedNodeRenderer.tsx
+// src/components/relational/graph/ProvidedNodeRenderer.tsx
 var ProvidedNodeRenderer_exports = {};
 __export(ProvidedNodeRenderer_exports, {
   ProvidedNodeRenderer: () => ProvidedNodeRenderer
@@ -35,7 +35,7 @@ __export(ProvidedNodeRenderer_exports, {
 module.exports = __toCommonJS(ProvidedNodeRenderer_exports);
 var import_react_node = require("@xyo-network/react-node");
 
-// src/hooks/cytoscape/useCytoscapeElements.ts
+// src/hooks/cytoscape/elements/useCytoscapeElements.ts
 var import_react_async_effect = require("@xylabs/react-async-effect");
 var import_node_model3 = require("@xyo-network/node-model");
 var import_react = require("react");
@@ -128,7 +128,7 @@ var CytoscapeElements = class _CytoscapeElements {
     try {
       const childElements = await _CytoscapeElements.recurseNodes(module2);
       childElements?.forEach((module3) => {
-        const newNode = _CytoscapeElements.buildNode(module3, { rootNodeId: newRootNode.data.id });
+        const newNode = _CytoscapeElements.buildNode(module3);
         newElements.push(newNode);
         const newEdge = _CytoscapeElements.buildEdge(newRootNode, newNode);
         newElements.push(newEdge);
@@ -139,10 +139,11 @@ var CytoscapeElements = class _CytoscapeElements {
       return [];
     }
   }
-  static buildNode(module2, properties) {
+  static buildNode(module2, properties, classes) {
     const { address, config } = module2;
     const normalizedName = config.name ?? address.substring(0, 8);
     return {
+      classes,
       data: {
         address,
         id: address,
@@ -153,7 +154,7 @@ var CytoscapeElements = class _CytoscapeElements {
     };
   }
   static buildRootNode = (module2) => {
-    return _CytoscapeElements.buildNode(module2, { root: true });
+    return _CytoscapeElements.buildNode(module2, {}, ["activeNode"]);
   };
   static normalizeName(name) {
     if (!name)
@@ -198,7 +199,7 @@ var CyIconSet = {
 };
 
 // src/Cytoscape/CytoscapeStyles.ts
-var NodeIdStyles = (color, outlineColor) => ({
+var NodeWithName = (color, outlineColor) => ({
   selector: "node[name]",
   style: {
     color,
@@ -211,7 +212,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,
@@ -222,6 +223,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: {
@@ -234,7 +241,7 @@ var EdgeStyled = (lineColor, targetArrowColor) => ({
   }
 });
 
-// src/hooks/cytoscape/useCytoscapeElements.ts
+// src/hooks/cytoscape/elements/useCytoscapeElements.ts
 var useCytoscapeElements = (module2) => {
   const [elements, setElements] = (0, import_react.useState)([]);
   (0, import_react_async_effect.useAsyncEffect)(
@@ -268,6 +275,14 @@ var useCytoscapeElements = (module2) => {
   return elements;
 };
 
+// src/contexts/CytoscapeInstance/Context.ts
+var import_react_shared = require("@xyo-network/react-shared");
+var CytoscapeInstanceContext = (0, import_react_shared.createContextEx)();
+
+// src/contexts/CytoscapeInstance/use.ts
+var import_react_shared2 = require("@xyo-network/react-shared");
+var useCytoscapeInstance = (required = false) => (0, import_react_shared2.useContextEx)(CytoscapeInstanceContext, "CytoscapeInstance", required);
+
 // src/hooks/cytoscape/useCytoscapeOptions.ts
 var import_react4 = require("react");
 
@@ -298,8 +313,9 @@ var useCytoscapeStyle = (hideLabels = false) => {
   const icons = useIcons();
   const style = (0, import_react3.useMemo)(
     () => [
-      NodeIdStyles(theme.palette.text.primary, theme.palette.getContrastText(theme.palette.text.primary)),
-      NodeStyled(icons, theme.palette.primary.main, hideLabels),
+      Node(icons, theme.palette.primary.main, hideLabels),
+      NodeWithName(theme.palette.text.primary, theme.palette.getContrastText(theme.palette.text.primary)),
+      NodeAsRoot(theme.palette.secondary.main),
       EdgeStyled(theme.palette.divider, theme.palette.divider)
     ],
     [icons, hideLabels, theme]
@@ -324,61 +340,63 @@ var useCytoscapeOptions = (elements, style, layout) => {
   return options;
 };
 
-// src/contexts/CytoscapeInstance/Context.ts
-var import_react_shared = require("@xyo-network/react-shared");
-var CytoscapeInstanceContext = (0, import_react_shared.createContextEx)();
-
-// src/contexts/CytoscapeInstance/use.ts
-var import_react_shared2 = require("@xyo-network/react-shared");
-var useCytoscapeInstance = (required = false) => (0, import_react_shared2.useContextEx)(CytoscapeInstanceContext, "CytoscapeInstance", required);
-
-// src/components/RelationalGraph.tsx
+// src/components/relational/graph/Graph.tsx
 var import_material3 = require("@mui/material");
 var import_react_flexbox = require("@xylabs/react-flexbox");
 var import_react_shared3 = require("@xyo-network/react-shared");
 var import_cytoscape = __toESM(require("cytoscape"), 1);
 var import_react5 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var NodeRelationalGraphFlexBox = (0, import_react5.forwardRef)(({ actions, children, options, ...props }, ref) => {
-  const [cy, setCy] = (0, import_react5.useState)();
-  const { setCy: setCyContext } = useCytoscapeInstance();
-  const sharedRef = (0, import_react_shared3.useShareForwardedRef)(ref);
-  const handleReset = () => {
-    cy?.reset();
-    cy?.fit(void 0, 20);
-  };
-  (0, import_react5.useEffect)(() => {
-    if (sharedRef) {
-      const newCy = (0, import_cytoscape.default)({
-        container: sharedRef.current,
-        ...options
-      });
-      setCy(newCy);
-    }
-  }, [options, sharedRef]);
-  (0, import_react5.useEffect)(() => {
-    setCyContext?.(cy);
-  }, [cy, setCyContext]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_flexbox.FlexCol, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ActionsContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: actions ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.ButtonGroup, { children: [
-      actions,
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Button, { size: "small", variant: "contained", onClick: handleReset, children: "Reset View" })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Button, { size: "small", variant: "contained", onClick: handleReset, children: "Reset" }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_flexbox.FlexCol, { alignItems: "stretch", height: "100%", position: "absolute", ref: sharedRef, width: "100%" }),
-    children
-  ] });
-});
+var NodeRelationalGraphFlexBox = (0, import_react5.forwardRef)(
+  ({ actions, children, showDetails, detail, options, ...props }, ref) => {
+    const theme = (0, import_material3.useTheme)();
+    const [cy, setCy] = (0, import_react5.useState)();
+    const { setCy: setCyContext } = useCytoscapeInstance();
+    const sharedRef = (0, import_react_shared3.useShareForwardedRef)(ref);
+    const handleReset = () => {
+      cy?.reset();
+      cy?.fit(void 0, 20);
+    };
+    (0, import_react5.useEffect)(() => {
+      if (sharedRef) {
+        const newCy = (0, import_cytoscape.default)({
+          container: sharedRef.current,
+          ...options
+        });
+        setCy(newCy);
+      }
+    }, [options, sharedRef]);
+    (0, import_react5.useEffect)(() => {
+      setCyContext?.(cy);
+    }, [cy, setCyContext]);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_flexbox.FlexCol, { id: "relational-graph-wrapper", ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_flexbox.FlexRow, { justifyContent: "start", width: "100%", children: actions === null ? null : actions ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material3.ButtonGroup, { children: [
+        actions,
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Button, { size: "small", variant: "contained", onClick: handleReset, children: "Reset View" })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material3.Button, { size: "small", variant: "contained", onClick: handleReset, children: "Reset" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_flexbox.FlexGrowRow, { width: "100%", alignItems: "start", children: [
+        showDetails ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_flexbox.FlexCol, { height: "100%", width: "85%", children: detail }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          import_react_flexbox.FlexCol,
+          {
+            justifyContent: "start",
+            classes: "cytoscape-wrap",
+            width: showDetails ? "15%" : "100%",
+            height: showDetails ? "50%" : "100%",
+            border: showDetails ? `1px solid ${theme.palette.divider}` : void 0,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_flexbox.FlexCol, { alignItems: "stretch", position: "absolute", width: "100%", height: "100%", ref: sharedRef }),
+              children
+            ]
+          }
+        )
+      ] })
+    ] });
+  }
+);
 NodeRelationalGraphFlexBox.displayName = "NodeRelationalGraph";
-var ActionsContainer = (0, import_material3.styled)(import_react_flexbox.FlexRow, { name: "ActionsContainer" })(({ theme }) => ({
-  flexWrap: "wrap",
-  gap: theme.spacing(1),
-  position: "absolute",
-  right: "10px",
-  top: "10px",
-  zIndex: 2
-}));
 
-// src/components/ProvidedNodeRenderer.tsx
+// src/components/relational/graph/ProvidedNodeRenderer.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var ProvidedNodeRenderer = ({ node, ...props }) => {
   const [providedNode] = (0, import_react_node.useProvidedNode)();

package/dist/browser/components/relational/graph/ProvidedNodeRenderer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/relational/graph/ProvidedNodeRenderer.tsx","../../../../../src/hooks/cytoscape/elements/useCytoscapeElements.ts","../../../../../src/Cytoscape/CytoscapeElements.ts","../../../../../src/Cytoscape/lib/encodeSvg.ts","../../../../../src/Cytoscape/lib/iconMap.ts","../../../../../src/Cytoscape/lib/layout/ConcentricLayout.ts","../../../../../src/Cytoscape/lib/parseModuleType.ts","../../../../../src/Cytoscape/CytoscapeIcons.tsx","../../../../../src/Cytoscape/CytoscapeStyles.ts","../../../../../src/contexts/CytoscapeInstance/Context.ts","../../../../../src/contexts/CytoscapeInstance/use.ts","../../../../../src/hooks/cytoscape/useCytoscapeOptions.ts","../../../../../src/hooks/cytoscape/useCytoscapeStyle.tsx","../../../../../src/hooks/cytoscape/useIcons.tsx","../../../../../src/components/relational/graph/Graph.tsx"],"sourcesContent":["import { AccountInstance } from '@xyo-network/account-model'\nimport { NodeInstance } from '@xyo-network/node-model'\nimport { useProvidedNode } from '@xyo-network/react-node'\n\nimport { useCytoscapeElements, useCytoscapeOptions } from '../../../hooks'\nimport { NodeRelationalGraphProps } from '../../lib'\nimport { NodeRelationalGraphFlexBox } from './Graph'\n\nexport interface ProvidedNodeRendererProps extends NodeRelationalGraphProps {\n  account?: AccountInstance\n  node?: NodeInstance\n}\n\nexport const ProvidedNodeRenderer: React.FC<ProvidedNodeRendererProps> = ({ node, ...props }) => {\n  const [providedNode] = useProvidedNode()\n  const elements = useCytoscapeElements(node ?? providedNode)\n  const options = useCytoscapeOptions(elements)\n\n  return <NodeRelationalGraphFlexBox alignItems=\"stretch\" flexGrow={1} height=\"100%\" options={options} {...props} />\n}\n","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","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 { 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 { 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 { Button, ButtonGroup, useTheme } from '@mui/material'\nimport { FlexCol, FlexGrowRow, FlexRow } from '@xylabs/react-flexbox'\nimport { useShareForwardedRef } from '@xyo-network/react-shared'\nimport cytoscape, { Core } from 'cytoscape'\nimport { forwardRef, useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../../contexts'\nimport { NodeRelationalGraphProps } from '../../lib'\n\nexport const NodeRelationalGraphFlexBox = forwardRef<HTMLDivElement, NodeRelationalGraphProps>(\n  ({ actions, children, showDetails, detail, options, ...props }, ref) => {\n    const theme = useTheme()\n    const [cy, setCy] = useState<Core>()\n    const { setCy: setCyContext } = useCytoscapeInstance()\n    const sharedRef = useShareForwardedRef(ref)\n\n    const handleReset = () => {\n      cy?.reset()\n      cy?.fit(undefined, 20)\n    }\n\n    useEffect(() => {\n      if (sharedRef) {\n        const newCy = cytoscape({\n          container: sharedRef.current,\n          ...options,\n        })\n        setCy(newCy)\n      }\n    }, [options, sharedRef])\n\n    useEffect(() => {\n      setCyContext?.(cy)\n    }, [cy, setCyContext])\n\n    return (\n      <FlexCol id=\"relational-graph-wrapper\" {...props}>\n        <FlexRow justifyContent=\"start\" width=\"100%\">\n          {actions === null ? null : actions ? (\n            <ButtonGroup>\n              {actions}\n              <Button size={'small'} variant={'contained'} onClick={handleReset}>\n                Reset View\n              </Button>\n            </ButtonGroup>\n          ) : (\n            <Button size={'small'} variant={'contained'} onClick={handleReset}>\n              Reset\n            </Button>\n          )}\n        </FlexRow>\n        <FlexGrowRow width=\"100%\" alignItems=\"start\">\n          {showDetails ? (\n            <FlexCol height=\"100%\" width={'85%'}>\n              {detail}\n            </FlexCol>\n          ) : null}\n          <FlexCol\n            justifyContent=\"start\"\n            classes=\"cytoscape-wrap\"\n            width={showDetails ? '15%' : '100%'}\n            height={showDetails ? '50%' : '100%'}\n            border={showDetails ? `1px solid ${theme.palette.divider}` : undefined}\n          >\n            {/* Cytoscape Element */}\n            <FlexCol alignItems=\"stretch\" position=\"absolute\" width=\"100%\" height=\"100%\" ref={sharedRef} />\n            {children}\n          </FlexCol>\n        </FlexGrowRow>\n      </FlexCol>\n    )\n  },\n)\n\nNodeRelationalGraphFlexBox.displayName = 'NodeRelationalGraph'\n\n/** @deprecated */\nexport const NodeRelationalGraph = NodeRelationalGraphFlexBox\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,wBAAgC;;;ACFhC,gCAA+B;AAE/B,IAAAA,qBAA+B;AAE/B,mBAAoC;;;ACHpC,IAAAC,qBAA+B;;;ACC/B,oBAAqC;AAErC,IAAM,UAAU;AAET,IAAM,YAAY,CAAC,cAA4B,UAAmB;AACvE,QAAM,gBAAY,oCAAqB,YAAY;AAEnD,QAAM,MAAM,IAAI,UAAU,EAAE,gBAAgB,WAAW,WAAW;AAClE,QAAM,aAAa,IAAI,qBAAqB,KAAK,EAAE,CAAC;AACpD,MAAI,YAAY;AACd,eAAW,aAAa,SAAS,4BAA4B;AAC7D,eAAW,aAAa,UAAU,KAAK;AACvC,eAAW,MAAM,OAAO,SAAS;AAAA,EACnC;AAEA,SAAO,GAAG,OAAO,GAAG,OAAO,mBAAmB,WAAW,SAAS,CAAC;AACrE;;;AChBO,IAAM,kBAA2D,OAAO;AAAA,EAC7E,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,UAAU;AAAA,EACV,SAAS;AACX;;;ACRO,IAAM,mBAAkC;AAAA,EAC7C,YAAY,SAAU,MAAM;AAC1B,WAAO,KAAK,OAAO;AAAA,EACrB;AAAA,EACA,YAAY,WAAY;AACtB,WAAO;AAAA,EACT;AAAA,EACA,gBAAgB;AAAA,EAChB,MAAM;AACR;;;ACXA,6BAAoC;AACpC,0BAAiC;AACjC,2BAAkC;AAElC,wBAA+B;AAC/B,sBAAmC;AACnC,qBAAgC;AAIzB,IAAM,kBAAkB,CAACC,YAA+C;AAC7E,MAAI,OAA0B;AAC9B,MAAIA,SAAQ;AACV,YAAI,4CAAoBA,OAAM,GAAG;AAC/B,aAAO;AAAA,IACT,eAAW,sCAAiBA,OAAM,GAAG;AACnC,aAAO;AAAA,IACT,eAAW,wCAAkBA,OAAM,GAAG;AACpC,aAAO;AAAA,IACT,eAAW,kCAAeA,OAAM,GAAG;AACjC,aAAO;AAAA,IACT,eAAW,oCAAmBA,OAAM,GAAG;AACrC,aAAO;AAAA,IACT,eAAW,gCAAgBA,OAAM,GAAG;AAClC,aAAO;AAAA,IACT,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;;;AJxBO,IAAM,oBAAN,MAAM,mBAAkB;AAAA,EAC7B,OAAO,gBAAgB;AAAA,EAEvB,OAAO,UAAU,UAA6B,SAA4B;AACxE,WAAO;AAAA,MACL,MAAM;AAAA,QACJ,IAAI,GAAG,SAAS,KAAK,EAAE,IAAI,QAAQ,KAAK,EAAE;AAAA,QAC1C,QAAQ,SAAS,KAAK;AAAA,QACtB,QAAQ,QAAQ,KAAK;AAAA,MACvB;AAAA,IACF;AAAA,EACF;AAAA,EAEA,aAAa,cAAcC,SAAsD;AAC/E,UAAM,cAAc,mBAAkB,cAAcA,OAAM;AAC1D,UAAM,cAAmC,CAAC,WAAW;AAErD,QAAI;AACF,YAAM,gBAAgB,MAAM,mBAAkB,aAAaA,OAAM;AACjE,qBAAe,QAAQ,CAACA,YAAW;AACjC,cAAM,UAAU,mBAAkB,UAAUA,OAAM;AAClD,oBAAY,KAAK,OAAO;AAExB,cAAM,UAAU,mBAAkB,UAAU,aAAa,OAAO;AAChE,oBAAY,KAAK,OAAO;AAAA,MAC1B,CAAC;AAED,aAAO;AAAA,IACT,SAAS,GAAG;AACV,cAAQ,MAAM,2BAA2B,CAAC;AAC1C,aAAO,CAAC;AAAA,IACV;AAAA,EACF;AAAA,EAEA,OAAO,UAAUA,SAAwB,YAAyC,SAAuC;AACvH,UAAM,EAAE,SAAS,OAAO,IAAIA;AAC5B,UAAM,iBAAiB,OAAO,QAAQ,QAAQ,UAAU,GAAG,CAAC;AAC5D,WAAO;AAAA,MACL;AAAA,MACA,MAAM;AAAA,QACJ;AAAA,QACA,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,MAAM,gBAAgBA,OAAM;AAAA,QAC5B,GAAG;AAAA,MACL;AAAA,IACF;AAAA,EACF;AAAA,EAEA,OAAO,gBAAgB,CAACA,YAA8C;AACpE,WAAO,mBAAkB,UAAUA,SAAQ,CAAC,GAAG,CAAC,YAAY,CAAC;AAAA,EAC/D;AAAA,EAEA,OAAO,cAAc,MAAe;AAClC,QAAI,CAAC;AAAM;AACX,QAAI,KAAK,SAAS,KAAK;AAAe,aAAO,GAAG,KAAK,UAAU,GAAG,EAAE,CAAC;AACrE,WAAO;AAAA,EACT;AAAA,EAEA,aAAa,aAAaA,SAAwB,gBAAgB,GAA8B;AAC9F,QAAI,aAAa;AACjB,UAAM,eAAiC,CAAC;AAExC,UAAM,WAAW,OAAO,eAA+B;AACrD,UAAI,aAAa,eAAe;AAC9B,cAAM,UAAU,MAAM,WAAW,QAAQ,QAAW,EAAE,WAAW,QAAQ,UAAU,EAAE,CAAC;AACtF,cAAM,QAAQ;AAAA,UACZ,QAAQ,IAAI,OAAO,UAAU;AAC3B,gBAAI,UAAU,kBAAc,mCAAe,KAAK,GAAG;AACjD;AACA,oBAAM,SAAS,KAAK;AAAA,YAEtB,WAAW,UAAUA,SAAQ;AAC3B,2BAAa,KAAK,KAAK;AAAA,YACzB;AAAA,UACF,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAEA,UAAM,SAASA,OAAM;AAErB,WAAO;AAAA,EACT;AACF;;;AK1FA,4BAQO;AAOA,IAAM,YAAwF;AAAA,EACnG,WAAW,sBAAAC;AAAA,EACX,QAAQ,sBAAAC;AAAA,EACR,SAAS,sBAAAC;AAAA,EACT,QAAQ,sBAAAC;AAAA,EACR,MAAM,sBAAAC;AAAA,EACN,UAAU,sBAAAC;AAAA,EACV,SAAS,sBAAAC;AACX;;;ACnBO,IAAM,eAAe,CAAC,OAAgB,kBAAuC;AAAA,EAClF,UAAU;AAAA,EACV,OAAO;AAAA,IACL;AAAA,IACA,eAAe;AAAA,IACf,aAAa;AAAA,IACb,mBAAmB;AAAA,IACnB,eAAe;AAAA,IACf,sBAAsB;AAAA,IACtB,sBAAsB;AAAA,IACtB,eAAe;AAAA,EACjB;AACF;AAEO,IAAM,OAAO,CAAC,OAA0C,SAAkB,aAAa,WAAuB;AAAA,EACnH,UAAU;AAAA,EACV,OAAO;AAAA,IACL,oBAAoB;AAAA,IACpB,qBAAqB;AAAA,IACrB,oBAAoB,CAAC,SAAS,MAAM,KAAK,KAAK,MAAM,CAAsB;AAAA,IAC1E,oBAAoB;AAAA,IACpB,OAAO,aAAa,SAAY;AAAA,IAChC,OAAO;AAAA,EACT;AACF;AAEO,IAAM,aAAa,CAAC,aAAsB;AAAA,EAC/C,UAAU;AAAA,EACV,OAAO;AAAA,IACL,oBAAoB;AAAA,EACtB;AACF;AAEO,IAAM,aAAa,CAAC,WAAoB,sBAA+B;AAAA,EAC5E,UAAU;AAAA,EACV,OAAO;AAAA,IACL,eAAe;AAAA,IACf,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB,sBAAsB;AAAA,IACtB,sBAAsB;AAAA,IACtB,OAAO;AAAA,EACT;AACF;;;APvCO,IAAM,uBAAuB,CAACC,YAAmC;AACtE,QAAM,CAAC,UAAU,WAAW,QAAI,uBAA8B,CAAC,CAAC;AAEhE;AAAA;AAAA,IAEE,YAAY;AACV,UAAIA,SAAQ;AACV,cAAM,cAAe,MAAM,kBAAkB,cAAcA,OAAM,KAAM,CAAC;AACxE,oBAAY,WAAW;AAAA,MACzB;AAAA,IACF;AAAA,IACA,CAACA,OAAM;AAAA,EACT;AAEA,8BAAU,MAAM;AACd,QAAI,mBAAyD;AAC7D,QAAI,mBAAyD;AAE7D,QAAIA,eAAU,mCAAeA,OAAM,GAAG;AACpC,yBAAmBA,QAAO,GAAG,kBAAkB,YAAY;AACzD,cAAM,cAAe,MAAM,kBAAkB,cAAcA,OAAM,KAAM,CAAC;AACxE,oBAAY,WAAW;AAAA,MACzB,CAAC;AACD,yBAAmBA,QAAO,GAAG,kBAAkB,YAAY;AACzD,cAAM,cAAe,MAAM,kBAAkB,cAAcA,OAAM,KAAM,CAAC;AACxE,oBAAY,WAAW;AAAA,MACzB,CAAC;AAAA,IACH;AAEA,WAAO,MAAM;AACX,yBAAmB;AACnB,yBAAmB;AAAA,IACrB;AAAA,EACF,GAAG,CAACA,OAAM,CAAC;AAEX,SAAO;AACT;;;AQ5CA,0BAAgC;AAIzB,IAAM,+BAA2B,qCAAwC;;;ACJhF,IAAAC,uBAA6B;AAItB,IAAM,uBAAuB,CAAC,WAAW,cAAU,mCAAa,0BAA0B,qBAAqB,QAAQ;;;ACH9H,IAAAC,gBAAwB;;;ACDxB,IAAAC,mBAAyB;AAEzB,IAAAC,gBAAwB;;;ACFxB,sBAAyB;AACzB,IAAAC,gBAAwB;AASL;AALZ,IAAM,WAAW,MAAM;AAC5B,QAAM,YAAQ,0BAAS;AACvB,QAAM,YAAQ,uBAAQ,MAAM;AAC1B,UAAM,UAAU,gBAAgB;AAChC,WAAO,OAAO,QAAQ,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,MAAM,aAAa,MAAM;AACtE,YAAM,OAAO,4CAAC,iBAAc,UAAS,SAAQ;AAC7C,UAAI,IAAyB,IAAI,UAAU,MAAM,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,KAAK,OAAO,CAAC;AAC1G,aAAO;AAAA,IACT,GAAG,OAAO;AAAA,EACZ,GAAG,CAAC,MAAM,OAAO,CAAC;AAElB,SAAO;AACT;;;ADVO,IAAM,oBAAoB,CAAC,aAAa,UAAU;AACvD,QAAM,YAAQ,2BAAS;AACvB,QAAM,QAAQ,SAAS;AAEvB,QAAM,YAAmC;AAAA,IACvC,MAAM;AAAA,MACJ,KAAK,OAAO,MAAM,QAAQ,QAAQ,MAAM,UAAU;AAAA,MAClD,aAAa,MAAM,QAAQ,KAAK,SAAS,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,KAAK,OAAO,CAAC;AAAA,MAClG,WAAW,MAAM,QAAQ,UAAU,IAAI;AAAA,MACvC,WAAW,MAAM,QAAQ,SAAS,MAAM,QAAQ,OAAO;AAAA,IACzD;AAAA,IACA,CAAC,OAAO,YAAY,KAAK;AAAA,EAC3B;AAEA,SAAO;AACT;;;ADhBO,IAAM,sBAAsB,CACjC,UACA,OACA,WACG;AACH,QAAM,eAAe,kBAAkB;AAEvC,QAAM,iBAAiB,UAAU;AACjC,QAAM,gBAAgB,SAAS;AAE/B,QAAM,cAAU,uBAAsC,MAAM;AAC1D,QAAI,YAAY,kBAAkB,eAAe;AAC/C,aAAO;AAAA,QACL;AAAA,QACA,QAAQ;AAAA,QACR,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF,GAAG,CAAC,UAAU,QAAQ,KAAK,CAAC;AAE5B,SAAO;AACT;;;AG3BA,IAAAC,mBAA8C;AAC9C,2BAA8C;AAC9C,IAAAC,uBAAqC;AACrC,uBAAgC;AAChC,IAAAC,gBAAgD;AAmCpC,IAAAC,sBAAA;AA9BL,IAAM,iCAA6B;AAAA,EACxC,CAAC,EAAE,SAAS,UAAU,aAAa,QAAQ,SAAS,GAAG,MAAM,GAAG,QAAQ;AACtE,UAAM,YAAQ,2BAAS;AACvB,UAAM,CAAC,IAAI,KAAK,QAAI,wBAAe;AACnC,UAAM,EAAE,OAAO,aAAa,IAAI,qBAAqB;AACrD,UAAM,gBAAY,2CAAqB,GAAG;AAE1C,UAAM,cAAc,MAAM;AACxB,UAAI,MAAM;AACV,UAAI,IAAI,QAAW,EAAE;AAAA,IACvB;AAEA,iCAAU,MAAM;AACd,UAAI,WAAW;AACb,cAAM,YAAQ,iBAAAC,SAAU;AAAA,UACtB,WAAW,UAAU;AAAA,UACrB,GAAG;AAAA,QACL,CAAC;AACD,cAAM,KAAK;AAAA,MACb;AAAA,IACF,GAAG,CAAC,SAAS,SAAS,CAAC;AAEvB,iCAAU,MAAM;AACd,qBAAe,EAAE;AAAA,IACnB,GAAG,CAAC,IAAI,YAAY,CAAC;AAErB,WACE,8CAAC,gCAAQ,IAAG,4BAA4B,GAAG,OACzC;AAAA,mDAAC,gCAAQ,gBAAe,SAAQ,OAAM,QACnC,sBAAY,OAAO,OAAO,UACzB,8CAAC,gCACE;AAAA;AAAA,QACD,6CAAC,2BAAO,MAAM,SAAS,SAAS,aAAa,SAAS,aAAa,wBAEnE;AAAA,SACF,IAEA,6CAAC,2BAAO,MAAM,SAAS,SAAS,aAAa,SAAS,aAAa,mBAEnE,GAEJ;AAAA,MACA,8CAAC,oCAAY,OAAM,QAAO,YAAW,SAClC;AAAA,sBACC,6CAAC,gCAAQ,QAAO,QAAO,OAAO,OAC3B,kBACH,IACE;AAAA,QACJ;AAAA,UAAC;AAAA;AAAA,YACC,gBAAe;AAAA,YACf,SAAQ;AAAA,YACR,OAAO,cAAc,QAAQ;AAAA,YAC7B,QAAQ,cAAc,QAAQ;AAAA,YAC9B,QAAQ,cAAc,aAAa,MAAM,QAAQ,OAAO,KAAK;AAAA,YAG7D;AAAA,2DAAC,gCAAQ,YAAW,WAAU,UAAS,YAAW,OAAM,QAAO,QAAO,QAAO,KAAK,WAAW;AAAA,cAC5F;AAAA;AAAA;AAAA,QACH;AAAA,SACF;AAAA,OACF;AAAA,EAEJ;AACF;AAEA,2BAA2B,cAAc;;;AdxDhC,IAAAC,sBAAA;AALF,IAAM,uBAA4D,CAAC,EAAE,MAAM,GAAG,MAAM,MAAM;AAC/F,QAAM,CAAC,YAAY,QAAI,mCAAgB;AACvC,QAAM,WAAW,qBAAqB,QAAQ,YAAY;AAC1D,QAAM,UAAU,oBAAoB,QAAQ;AAE5C,SAAO,6CAAC,8BAA2B,YAAW,WAAU,UAAU,GAAG,QAAO,QAAO,SAAmB,GAAG,OAAO;AAClH;","names":["import_node_model","import_node_model","module","module","Inventory2RoundedIcon","InsertLinkRoundedIcon","BubbleChartRoundedIcon","QuestionMarkRoundedIcon","HubIcon","TimerRoundedIcon","VisibilityRoundedIcon","module","import_react_shared","import_react","import_material","import_react","import_react","import_material","import_react_shared","import_react","import_jsx_runtime","cytoscape","import_jsx_runtime"]}

package/dist/browser/components/{ProvidedNodeRenderer.d.cts → relational/graph/ProvidedNodeRenderer.d.cts}

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { AccountInstance } from '@xyo-network/account-model';
 import { NodeInstance } from '@xyo-network/node-model';
-import { NodeRelationalGraphProps } from './lib';
+import { NodeRelationalGraphProps } from '../../lib';
 export interface ProvidedNodeRendererProps extends NodeRelationalGraphProps {
     account?: AccountInstance;
     node?: NodeInstance;

package/dist/browser/components/relational/graph/ProvidedNodeRenderer.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProvidedNodeRenderer.d.ts","sourceRoot":"","sources":["../../../../../src/components/relational/graph/ProvidedNodeRenderer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAItD,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAA;AAGpD,MAAM,WAAW,yBAA0B,SAAQ,wBAAwB;IACzE,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAMpE,CAAA"}

package/dist/browser/components/{ProvidedNodeRenderer.d.mts → relational/graph/ProvidedNodeRenderer.d.mts}

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { AccountInstance } from '@xyo-network/account-model';
 import { NodeInstance } from '@xyo-network/node-model';
-import { NodeRelationalGraphProps } from './lib';
+import { NodeRelationalGraphProps } from '../../lib';
 export interface ProvidedNodeRendererProps extends NodeRelationalGraphProps {
     account?: AccountInstance;
     node?: NodeInstance;

package/dist/browser/components/relational/graph/ProvidedNodeRenderer.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProvidedNodeRenderer.d.ts","sourceRoot":"","sources":["../../../../../src/components/relational/graph/ProvidedNodeRenderer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAItD,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAA;AAGpD,MAAM,WAAW,yBAA0B,SAAQ,wBAAwB;IACzE,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAMpE,CAAA"}

package/dist/{node/components → browser/components/relational/graph}/ProvidedNodeRenderer.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { AccountInstance } from '@xyo-network/account-model';
 import { NodeInstance } from '@xyo-network/node-model';
-import { NodeRelationalGraphProps } from './lib';
+import { NodeRelationalGraphProps } from '../../lib';
 export interface ProvidedNodeRendererProps extends NodeRelationalGraphProps {
     account?: AccountInstance;
     node?: NodeInstance;

package/dist/browser/components/relational/graph/ProvidedNodeRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProvidedNodeRenderer.d.ts","sourceRoot":"","sources":["../../../../../src/components/relational/graph/ProvidedNodeRenderer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAItD,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAA;AAGpD,MAAM,WAAW,yBAA0B,SAAQ,wBAAwB;IACzE,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAMpE,CAAA"}

package/dist/browser/components/{ProvidedNodeRenderer.js → relational/graph/ProvidedNodeRenderer.js}

@@ -1,7 +1,7 @@
-// src/components/ProvidedNodeRenderer.tsx
+// src/components/relational/graph/ProvidedNodeRenderer.tsx
 import { useProvidedNode } from "@xyo-network/react-node";
 
-// 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";
@@ -94,7 +94,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);
@@ -105,10 +105,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,
@@ -119,7 +120,7 @@ var CytoscapeElements = class _CytoscapeElements {
     };
   }
   static buildRootNode = (module) => {
-    return _CytoscapeElements.buildNode(module, { root: true });
+    return _CytoscapeElements.buildNode(module, {}, ["activeNode"]);
   };
   static normalizeName(name) {
     if (!name)
@@ -172,7 +173,7 @@ var CyIconSet = {
 };
 
 // src/Cytoscape/CytoscapeStyles.ts
-var NodeIdStyles = (color, outlineColor) => ({
+var NodeWithName = (color, outlineColor) => ({
   selector: "node[name]",
   style: {
     color,
@@ -185,7 +186,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,
@@ -196,6 +197,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: {
@@ -208,7 +215,7 @@ var EdgeStyled = (lineColor, targetArrowColor) => ({
   }
 });
 
-// src/hooks/cytoscape/useCytoscapeElements.ts
+// src/hooks/cytoscape/elements/useCytoscapeElements.ts
 var useCytoscapeElements = (module) => {
   const [elements, setElements] = useState([]);
   useAsyncEffect(
@@ -242,6 +249,14 @@ var useCytoscapeElements = (module) => {
   return elements;
 };
 
+// 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/useCytoscapeOptions.ts
 import { useMemo as useMemo3 } from "react";
 
@@ -272,8 +287,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]
@@ -298,61 +314,63 @@ var useCytoscapeOptions = (elements, style, layout) => {
   return options;
 };
 
-// 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/components/RelationalGraph.tsx
-import { Button, ButtonGroup, styled } from "@mui/material";
-import { FlexCol, FlexRow } from "@xylabs/react-flexbox";
+// 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 useEffect2, useState as useState2 } from "react";
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
-var NodeRelationalGraphFlexBox = forwardRef(({ actions, children, options, ...props }, ref) => {
-  const [cy, setCy] = useState2();
-  const { setCy: setCyContext } = useCytoscapeInstance();
-  const sharedRef = useShareForwardedRef(ref);
-  const handleReset = () => {
-    cy?.reset();
-    cy?.fit(void 0, 20);
-  };
-  useEffect2(() => {
-    if (sharedRef) {
-      const newCy = cytoscape({
-        container: sharedRef.current,
-        ...options
-      });
-      setCy(newCy);
-    }
-  }, [options, sharedRef]);
-  useEffect2(() => {
-    setCyContext?.(cy);
-  }, [cy, setCyContext]);
-  return /* @__PURE__ */ jsxs(FlexCol, { ...props, children: [
-    /* @__PURE__ */ jsx2(ActionsContainer, { children: /* @__PURE__ */ jsx2(Fragment, { children: actions ? /* @__PURE__ */ jsxs(ButtonGroup, { children: [
-      actions,
-      /* @__PURE__ */ jsx2(Button, { size: "small", variant: "contained", onClick: handleReset, children: "Reset View" })
-    ] }) : /* @__PURE__ */ jsx2(Button, { size: "small", variant: "contained", onClick: handleReset, children: "Reset" }) }) }),
-    /* @__PURE__ */ jsx2(FlexCol, { alignItems: "stretch", height: "100%", position: "absolute", ref: sharedRef, width: "100%" }),
-    children
-  ] });
-});
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var NodeRelationalGraphFlexBox = forwardRef(
+  ({ actions, children, showDetails, detail, options, ...props }, ref) => {
+    const theme = useTheme3();
+    const [cy, setCy] = useState2();
+    const { setCy: setCyContext } = useCytoscapeInstance();
+    const sharedRef = useShareForwardedRef(ref);
+    const handleReset = () => {
+      cy?.reset();
+      cy?.fit(void 0, 20);
+    };
+    useEffect2(() => {
+      if (sharedRef) {
+        const newCy = cytoscape({
+          container: sharedRef.current,
+          ...options
+        });
+        setCy(newCy);
+      }
+    }, [options, sharedRef]);
+    useEffect2(() => {
+      setCyContext?.(cy);
+    }, [cy, setCyContext]);
+    return /* @__PURE__ */ jsxs(FlexCol, { id: "relational-graph-wrapper", ...props, children: [
+      /* @__PURE__ */ jsx2(FlexRow, { justifyContent: "start", width: "100%", children: actions === null ? null : actions ? /* @__PURE__ */ jsxs(ButtonGroup, { children: [
+        actions,
+        /* @__PURE__ */ jsx2(Button, { size: "small", variant: "contained", onClick: handleReset, children: "Reset View" })
+      ] }) : /* @__PURE__ */ jsx2(Button, { size: "small", variant: "contained", onClick: handleReset, children: "Reset" }) }),
+      /* @__PURE__ */ jsxs(FlexGrowRow, { width: "100%", alignItems: "start", children: [
+        showDetails ? /* @__PURE__ */ jsx2(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__ */ jsx2(FlexCol, { alignItems: "stretch", position: "absolute", width: "100%", height: "100%", ref: sharedRef }),
+              children
+            ]
+          }
+        )
+      ] })
+    ] });
+  }
+);
 NodeRelationalGraphFlexBox.displayName = "NodeRelationalGraph";
-var ActionsContainer = styled(FlexRow, { name: "ActionsContainer" })(({ theme }) => ({
-  flexWrap: "wrap",
-  gap: theme.spacing(1),
-  position: "absolute",
-  right: "10px",
-  top: "10px",
-  zIndex: 2
-}));
 
-// src/components/ProvidedNodeRenderer.tsx
+// src/components/relational/graph/ProvidedNodeRenderer.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
 var ProvidedNodeRenderer = ({ node, ...props }) => {
   const [providedNode] = useProvidedNode();

package/dist/browser/components/relational/graph/ProvidedNodeRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/relational/graph/ProvidedNodeRenderer.tsx","../../../../../src/hooks/cytoscape/elements/useCytoscapeElements.ts","../../../../../src/Cytoscape/CytoscapeElements.ts","../../../../../src/Cytoscape/lib/encodeSvg.ts","../../../../../src/Cytoscape/lib/iconMap.ts","../../../../../src/Cytoscape/lib/layout/ConcentricLayout.ts","../../../../../src/Cytoscape/lib/parseModuleType.ts","../../../../../src/Cytoscape/CytoscapeIcons.tsx","../../../../../src/Cytoscape/CytoscapeStyles.ts","../../../../../src/contexts/CytoscapeInstance/Context.ts","../../../../../src/contexts/CytoscapeInstance/use.ts","../../../../../src/hooks/cytoscape/useCytoscapeOptions.ts","../../../../../src/hooks/cytoscape/useCytoscapeStyle.tsx","../../../../../src/hooks/cytoscape/useIcons.tsx","../../../../../src/components/relational/graph/Graph.tsx"],"sourcesContent":["import { AccountInstance } from '@xyo-network/account-model'\nimport { NodeInstance } from '@xyo-network/node-model'\nimport { useProvidedNode } from '@xyo-network/react-node'\n\nimport { useCytoscapeElements, useCytoscapeOptions } from '../../../hooks'\nimport { NodeRelationalGraphProps } from '../../lib'\nimport { NodeRelationalGraphFlexBox } from './Graph'\n\nexport interface ProvidedNodeRendererProps extends NodeRelationalGraphProps {\n  account?: AccountInstance\n  node?: NodeInstance\n}\n\nexport const ProvidedNodeRenderer: React.FC<ProvidedNodeRendererProps> = ({ node, ...props }) => {\n  const [providedNode] = useProvidedNode()\n  const elements = useCytoscapeElements(node ?? providedNode)\n  const options = useCytoscapeOptions(elements)\n\n  return <NodeRelationalGraphFlexBox alignItems=\"stretch\" flexGrow={1} height=\"100%\" options={options} {...props} />\n}\n","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","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 { 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 { 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 { Button, ButtonGroup, useTheme } from '@mui/material'\nimport { FlexCol, FlexGrowRow, FlexRow } from '@xylabs/react-flexbox'\nimport { useShareForwardedRef } from '@xyo-network/react-shared'\nimport cytoscape, { Core } from 'cytoscape'\nimport { forwardRef, useEffect, useState } from 'react'\n\nimport { useCytoscapeInstance } from '../../../contexts'\nimport { NodeRelationalGraphProps } from '../../lib'\n\nexport const NodeRelationalGraphFlexBox = forwardRef<HTMLDivElement, NodeRelationalGraphProps>(\n  ({ actions, children, showDetails, detail, options, ...props }, ref) => {\n    const theme = useTheme()\n    const [cy, setCy] = useState<Core>()\n    const { setCy: setCyContext } = useCytoscapeInstance()\n    const sharedRef = useShareForwardedRef(ref)\n\n    const handleReset = () => {\n      cy?.reset()\n      cy?.fit(undefined, 20)\n    }\n\n    useEffect(() => {\n      if (sharedRef) {\n        const newCy = cytoscape({\n          container: sharedRef.current,\n          ...options,\n        })\n        setCy(newCy)\n      }\n    }, [options, sharedRef])\n\n    useEffect(() => {\n      setCyContext?.(cy)\n    }, [cy, setCyContext])\n\n    return (\n      <FlexCol id=\"relational-graph-wrapper\" {...props}>\n        <FlexRow justifyContent=\"start\" width=\"100%\">\n          {actions === null ? null : actions ? (\n            <ButtonGroup>\n              {actions}\n              <Button size={'small'} variant={'contained'} onClick={handleReset}>\n                Reset View\n              </Button>\n            </ButtonGroup>\n          ) : (\n            <Button size={'small'} variant={'contained'} onClick={handleReset}>\n              Reset\n            </Button>\n          )}\n        </FlexRow>\n        <FlexGrowRow width=\"100%\" alignItems=\"start\">\n          {showDetails ? (\n            <FlexCol height=\"100%\" width={'85%'}>\n              {detail}\n            </FlexCol>\n          ) : null}\n          <FlexCol\n            justifyContent=\"start\"\n            classes=\"cytoscape-wrap\"\n            width={showDetails ? '15%' : '100%'}\n            height={showDetails ? '50%' : '100%'}\n            border={showDetails ? `1px solid ${theme.palette.divider}` : undefined}\n          >\n            {/* Cytoscape Element */}\n            <FlexCol alignItems=\"stretch\" position=\"absolute\" width=\"100%\" height=\"100%\" ref={sharedRef} />\n            {children}\n          </FlexCol>\n        </FlexGrowRow>\n      </FlexCol>\n    )\n  },\n)\n\nNodeRelationalGraphFlexBox.displayName = 'NodeRelationalGraph'\n\n/** @deprecated */\nexport const NodeRelationalGraph = NodeRelationalGraphFlexBox\n"],"mappings":"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","names":["isNodeInstance","isNodeInstance","module","isNodeInstance","isNodeInstance","useMemo","useTheme","useMemo","useTheme","useMemo","useMemo","useTheme","useEffect","useState","jsx","useTheme","useState","useEffect","jsx"]}