@xyo-network/react-node-renderer 2.47.36 → 2.47.38

package/src/components/RelationalGraph.tsx

@@ -1,19 +1,22 @@
+import { Button, styled } from '@mui/material'
 import { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'
-import { WithChildren } from '@xylabs/react-shared'
 import { useShareForwardedRef } from '@xyo-network/react-shared'
 import cytoscape, { Core, CytoscapeOptions } from 'cytoscape'
 import { forwardRef, useEffect, useState } from 'react'
 
-export interface NodeRelationalGraph extends WithChildren<FlexBoxProps> {
+export interface NodeRelationalGraph extends FlexBoxProps {
   options?: CytoscapeOptions
 }
 
-export const NodeRelationalGraph = forwardRef<HTMLDivElement, NodeRelationalGraph>(({ children, options, ...props }, ref) => {
+export const NodeRelationalGraph = forwardRef<HTMLDivElement, NodeRelationalGraph>(({ options, ...props }, ref) => {
   const sharedRef = useShareForwardedRef(ref)
-  // TODO - likely a value to stick in context
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [cy, setCy] = useState<Core>()
 
+  const handleReset = () => {
+    cy?.reset()
+    cy?.fit(undefined, 20)
+  }
+
   useEffect(() => {
     if (sharedRef) {
       setCy(
@@ -26,10 +29,20 @@ export const NodeRelationalGraph = forwardRef<HTMLDivElement, NodeRelationalGrap
   }, [options, sharedRef])
 
   return (
-    <FlexCol ref={sharedRef} {...props}>
-      {children}
+    <FlexCol {...props}>
+      <ResetButton size={'small'} variant={'contained'} onClick={handleReset}>
+        Reset
+      </ResetButton>
+      <FlexCol alignItems="stretch" height="100%" position="absolute" ref={sharedRef} width="100%"></FlexCol>
     </FlexCol>
   )
 })
 
 NodeRelationalGraph.displayName = 'NodeRelationalGraph'
+
+const ResetButton = styled(Button, { name: 'ResetButton' })(() => ({
+  position: 'absolute',
+  right: '10px',
+  top: '10px',
+  zIndex: 2,
+}))

package/src/hooks/cytoscape/index.ts

@@ -0,0 +1,2 @@
+export * from './useCytoscapeElements'
+export * from './useCytoscapeOptions'

package/src/hooks/{useCytoscapeElements.ts → cytoscape/useCytoscapeElements.ts}

@@ -1,48 +1,10 @@
 import { useAsyncEffect } from '@xylabs/react-shared'
-import { EventUnsubscribeFunction, ModuleDescription, ModuleWrapper } from '@xyo-network/module'
-import { NodeWrapper } from '@xyo-network/node'
+import { EventUnsubscribeFunction } from '@xyo-network/module'
 import { useProvidedWrappedNode } from '@xyo-network/react-node'
 import { ElementDefinition } from 'cytoscape'
 import { useEffect, useState } from 'react'
 
-import { parseModuleType } from '../lib'
-
-const MaxNameLength = 20
-
-const normalizeName = (name?: string) => {
-  if (!name) return
-  if (name.length > MaxNameLength) return `${name.substring(0, 20)}...`
-  return name
-}
-
-const buildNode = (description: ModuleDescription): ElementDefinition => {
-  const newNodeId = normalizeName(description.name) ?? description.address.substring(0, 8)
-  return {
-    data: {
-      id: newNodeId,
-      type: parseModuleType(description.queries),
-    },
-  }
-}
-
-const buildEdge = (rootNode: ElementDefinition, newNode: ElementDefinition) => ({
-  data: {
-    id: `${rootNode.data.id}/${newNode.data.id}`,
-    source: rootNode.data.id,
-    target: newNode.data.id,
-  },
-})
-
-const buildRootNode = async (wrapper: NodeWrapper): Promise<[ModuleDescription, ElementDefinition]> => {
-  const description = await wrapper?.describe()
-  return [description, buildNode(description)]
-}
-
-const buildChild = async (wrapper: NodeWrapper, address: string) => {
-  const [result] = await wrapper.resolveWrapped(ModuleWrapper, { address: [address] })
-  const description = await result.describe()
-  return buildNode(description)
-}
+import { CytoscapeElements } from '../../Cytoscape'
 
 /**
  * Note: Relies on describe but could eventually be converted to a discover call
@@ -58,17 +20,17 @@ export const useCytoscapeElements = () => {
     async (mounted) => {
       if (node && refresh) {
         try {
-          const [description, newRootNode] = await buildRootNode(node)
+          const [description, newRootNode] = await CytoscapeElements.buildRootNode(node)
           if (mounted()) setElements(() => [newRootNode])
 
           const children = description.children
           await Promise.allSettled(
             (children ?? [])?.map(async (address) => {
               try {
-                const newNode = await buildChild(node, address)
+                const newNode = await CytoscapeElements.buildChild(node, address)
                 if (mounted()) setElements((previous) => [...previous, newNode])
 
-                const newEdge = buildEdge(newRootNode, newNode)
+                const newEdge = CytoscapeElements.buildEdge(newRootNode, newNode)
                 if (mounted()) setElements((previous) => [...previous, newEdge])
               } catch (e) {
                 console.error('Error parsing children', e)

package/src/hooks/cytoscape/useCytoscapeLayout.ts

@@ -0,0 +1,14 @@
+import { CytoscapeOptions } from 'cytoscape'
+import { useMemo } from 'react'
+
+export const useCytoscapeLayout = () => {
+  const layout: CytoscapeOptions['layout'] = useMemo(
+    () => ({
+      minNodeSpacing: 75,
+      name: 'concentric',
+    }),
+    [],
+  )
+
+  return layout
+}

package/src/hooks/cytoscape/useCytoscapeOptions.ts

@@ -0,0 +1,25 @@
+import { CytoscapeOptions } from 'cytoscape'
+import { useMemo } from 'react'
+
+import { useCytoscapeLayout } from './useCytoscapeLayout'
+import { useCytoscapeStyle } from './useCytoscapeStyle'
+
+export const useCytoscapeOptions = (
+  elements: CytoscapeOptions['elements'],
+  style?: CytoscapeOptions['style'],
+  layout?: CytoscapeOptions['layout'],
+) => {
+  const defaultStyle = useCytoscapeStyle()
+  const defaultLayout = useCytoscapeLayout()
+
+  const options = useMemo<CytoscapeOptions>(
+    () => ({
+      elements,
+      layout: layout ?? defaultLayout,
+      style: style ?? defaultStyle,
+    }),
+    [defaultLayout, defaultStyle, elements, layout, style],
+  )
+
+  return options
+}

package/src/hooks/cytoscape/useCytoscapeStyle.ts

@@ -0,0 +1,22 @@
+import { useTheme } from '@mui/material'
+import { CytoscapeOptions } from 'cytoscape'
+import { useMemo } from 'react'
+
+import { EdgeStyled, NodeIdStyles, NodeStyled } from '../../Cytoscape'
+import { useIcons } from './useIcons'
+
+export const useCytoscapeStyle = () => {
+  const theme = useTheme()
+  const icons = useIcons()
+
+  const style: CytoscapeOptions['style'] = useMemo(
+    () => [
+      NodeIdStyles(theme.palette.text.primary),
+      NodeStyled(icons, theme.palette.primary.main),
+      EdgeStyled(theme.palette.divider, theme.palette.divider),
+    ],
+    [icons, theme.palette.divider, theme.palette.primary.main, theme.palette.text.primary],
+  )
+
+  return style
+}

package/src/hooks/cytoscape/useIcons.tsx

@@ -0,0 +1,19 @@
+import { useTheme } from '@mui/material'
+import { useMemo } from 'react'
+
+import { CyIconSet, CyNodeIcons } from '../../Cytoscape'
+import { encodeSvg } from '../../lib'
+
+export const useIcons = () => {
+  const theme = useTheme()
+  const icons = useMemo(() => {
+    const iconMap: Record<CyNodeIcons, string> = { archivist: '', diviner: '', module: '', node: '', witness: '' }
+    return Object.entries(CyIconSet).reduce((acc, [name, IconComponent]) => {
+      const icon = <IconComponent fontSize="small" />
+      acc[name as CyNodeIcons] = encodeSvg(icon, theme.palette.getContrastText(theme.palette.text.primary))
+      return acc
+    }, iconMap)
+  }, [theme.palette])
+
+  return icons
+}

package/src/hooks/index.ts

@@ -1,2 +1 @@
-export * from './useCytoscapeElements'
-export * from './useCytoscapeOptions'
+export * from './cytoscape'

package/dist/cjs/hooks/useCytoscapeElements.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCytoscapeElements.js","sourceRoot":"","sources":["../../../src/hooks/useCytoscapeElements.ts"],"names":[],"mappings":"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"}

package/dist/cjs/hooks/useCytoscapeOptions.js

@@ -1,54 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCytoscapeOptions = void 0;
-const material_1 = require("@mui/material");
-const react_1 = require("react");
-const useIcons_1 = require("./useIcons");
-const useCytoscapeOptions = (elements) => {
-    const theme = (0, material_1.useTheme)();
-    const icons = (0, useIcons_1.useIcons)();
-    const options = (0, react_1.useMemo)(() => ({
-        elements,
-        layout: {
-            minNodeSpacing: 75,
-            name: 'concentric',
-        },
-        style: [
-            {
-                selector: 'node[id]',
-                style: {
-                    color: theme.palette.text.primary,
-                    'font-family': 'Lexend Deca, Helvetica, sans-serif',
-                    'font-size': 14,
-                    'text-margin-y': -5,
-                },
-            },
-            {
-                selector: 'node',
-                style: {
-                    'background-color': theme.palette.primary.main,
-                    'background-height': '75%',
-                    // TODO - make dynamic
-                    'background-image': (elem) => icons[elem.data('type')],
-                    'background-image-smoothing': 'yes',
-                    'background-width': '75%',
-                    label: 'data(id)',
-                },
-            },
-            {
-                selector: 'edge',
-                style: {
-                    'curve-style': 'bezier',
-                    'line-color': theme.palette.divider,
-                    'line-opacity': 0.1,
-                    'target-arrow-color': theme.palette.divider,
-                    'target-arrow-shape': 'triangle',
-                    width: 3,
-                },
-            },
-        ],
-    }), [elements, icons, theme.palette.divider, theme.palette.primary.main, theme.palette.text.primary]);
-    return options;
-};
-exports.useCytoscapeOptions = useCytoscapeOptions;
-//# sourceMappingURL=useCytoscapeOptions.js.map

package/dist/cjs/hooks/useCytoscapeOptions.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCytoscapeOptions.js","sourceRoot":"","sources":["../../../src/hooks/useCytoscapeOptions.ts"],"names":[],"mappings":";;;AAAA,4CAAwC;AAExC,iCAA+B;AAE/B,yCAAkD;AAE3C,MAAM,mBAAmB,GAAG,CAAC,QAAsC,EAAE,EAAE;IAC5E,MAAM,KAAK,GAAG,IAAA,mBAAQ,GAAE,CAAA;IACxB,MAAM,KAAK,GAAG,IAAA,mBAAQ,GAAE,CAAA;IAExB,MAAM,OAAO,GAAG,IAAA,eAAO,EACrB,GAAG,EAAE,CAAC,CAAC;QACL,QAAQ;QACR,MAAM,EAAE;YACN,cAAc,EAAE,EAAE;YAClB,IAAI,EAAE,YAAY;SACnB;QACD,KAAK,EAAE;YACL;gBACE,QAAQ,EAAE,UAAU;gBACpB,KAAK,EAAE;oBACL,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO;oBACjC,aAAa,EAAE,oCAAoC;oBACnD,WAAW,EAAE,EAAE;oBACf,eAAe,EAAE,CAAC,CAAC;iBACpB;aACF;YACD;gBACE,QAAQ,EAAE,MAAM;gBAChB,KAAK,EAAE;oBACL,kBAAkB,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI;oBAC9C,mBAAmB,EAAE,KAAK;oBAC1B,sBAAsB;oBACtB,kBAAkB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAgB,CAAC;oBACrE,4BAA4B,EAAE,KAAK;oBACnC,kBAAkB,EAAE,KAAK;oBACzB,KAAK,EAAE,UAAU;iBAClB;aACF;YACD;gBACE,QAAQ,EAAE,MAAM;gBAChB,KAAK,EAAE;oBACL,aAAa,EAAE,QAAQ;oBACvB,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO;oBACnC,cAAc,EAAE,GAAG;oBACnB,oBAAoB,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO;oBAC3C,oBAAoB,EAAE,UAAU;oBAChC,KAAK,EAAE,CAAC;iBACT;aACF;SACF;KACF,CAAC,EACF,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CACjG,CAAA;IAED,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA;AAlDY,QAAA,mBAAmB,uBAkD/B"}

package/dist/cjs/hooks/useIcons.js

@@ -1,35 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useIcons = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const CallMergeRounded_1 = tslib_1.__importDefault(require("@mui/icons-material/CallMergeRounded"));
-const GridViewRounded_1 = tslib_1.__importDefault(require("@mui/icons-material/GridViewRounded"));
-const Hub_1 = tslib_1.__importDefault(require("@mui/icons-material/Hub"));
-const QuestionMarkRounded_1 = tslib_1.__importDefault(require("@mui/icons-material/QuestionMarkRounded"));
-const VisibilityRounded_1 = tslib_1.__importDefault(require("@mui/icons-material/VisibilityRounded"));
-const material_1 = require("@mui/material");
-const react_1 = require("react");
-const lib_1 = require("../lib");
-// eslint-disable-next-line @typescript-eslint/ban-types
-const CyIconSet = {
-    archivist: GridViewRounded_1.default,
-    diviner: CallMergeRounded_1.default,
-    module: QuestionMarkRounded_1.default,
-    node: Hub_1.default,
-    witness: VisibilityRounded_1.default,
-};
-const useIcons = () => {
-    const theme = (0, material_1.useTheme)();
-    const icons = (0, react_1.useMemo)(() => {
-        const iconMap = { archivist: '', diviner: '', module: '', node: '', witness: '' };
-        return Object.entries(CyIconSet).reduce((acc, [name, IconComponent]) => {
-            const icon = (0, jsx_runtime_1.jsx)(IconComponent, { fontSize: "small" });
-            acc[name] = (0, lib_1.encodeSvg)(icon, theme.palette.getContrastText(theme.palette.text.primary));
-            return acc;
-        }, iconMap);
-    }, [theme.palette]);
-    return icons;
-};
-exports.useIcons = useIcons;
-//# sourceMappingURL=useIcons.js.map

package/dist/cjs/hooks/useIcons.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useIcons.js","sourceRoot":"","sources":["../../../src/hooks/useIcons.tsx"],"names":[],"mappings":";;;;;AAAA,oGAAuE;AACvE,kGAAqE;AACrE,0EAA6C;AAC7C,0GAA6E;AAC7E,sGAAyE;AACzE,4CAAwD;AAExD,iCAA+B;AAE/B,gCAAkC;AAIlC,wDAAwD;AACxD,MAAM,SAAS,GAAyE;IACtF,SAAS,EAAE,yBAAmB;IAC9B,OAAO,EAAE,0BAAoB;IAC7B,MAAM,EAAE,6BAAuB;IAC/B,IAAI,EAAE,aAAO;IACb,OAAO,EAAE,2BAAqB;CAC/B,CAAA;AAEM,MAAM,QAAQ,GAAG,GAAG,EAAE;IAC3B,MAAM,KAAK,GAAG,IAAA,mBAAQ,GAAE,CAAA;IACxB,MAAM,KAAK,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACzB,MAAM,OAAO,GAAgC,EAAE,SAAS,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,CAAA;QAC9G,OAAO,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,EAAE,EAAE;YACrE,MAAM,IAAI,GAAG,uBAAC,aAAa,IAAC,QAAQ,EAAC,OAAO,GAAG,CAAA;YAC/C,GAAG,CAAC,IAAmB,CAAC,GAAG,IAAA,eAAS,EAAC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAA;YACrG,OAAO,GAAG,CAAA;QACZ,CAAC,EAAE,OAAO,CAAC,CAAA;IACb,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAA;IAEnB,OAAO,KAAK,CAAA;AACd,CAAC,CAAA;AAZY,QAAA,QAAQ,YAYpB"}

package/dist/esm/hooks/useCytoscapeElements.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCytoscapeElements.js","sourceRoot":"","sources":["../../../src/hooks/useCytoscapeElements.ts"],"names":[],"mappings":"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"}

package/dist/esm/hooks/useCytoscapeOptions.js

@@ -1,50 +0,0 @@
-import { useTheme } from '@mui/material';
-import { useMemo } from 'react';
-import { useIcons } from './useIcons';
-export const useCytoscapeOptions = (elements) => {
-    const theme = useTheme();
-    const icons = useIcons();
-    const options = useMemo(() => ({
-        elements,
-        layout: {
-            minNodeSpacing: 75,
-            name: 'concentric',
-        },
-        style: [
-            {
-                selector: 'node[id]',
-                style: {
-                    color: theme.palette.text.primary,
-                    'font-family': 'Lexend Deca, Helvetica, sans-serif',
-                    'font-size': 14,
-                    'text-margin-y': -5,
-                },
-            },
-            {
-                selector: 'node',
-                style: {
-                    'background-color': theme.palette.primary.main,
-                    'background-height': '75%',
-                    // TODO - make dynamic
-                    'background-image': (elem) => icons[elem.data('type')],
-                    'background-image-smoothing': 'yes',
-                    'background-width': '75%',
-                    label: 'data(id)',
-                },
-            },
-            {
-                selector: 'edge',
-                style: {
-                    'curve-style': 'bezier',
-                    'line-color': theme.palette.divider,
-                    'line-opacity': 0.1,
-                    'target-arrow-color': theme.palette.divider,
-                    'target-arrow-shape': 'triangle',
-                    width: 3,
-                },
-            },
-        ],
-    }), [elements, icons, theme.palette.divider, theme.palette.primary.main, theme.palette.text.primary]);
-    return options;
-};
-//# sourceMappingURL=useCytoscapeOptions.js.map

package/dist/esm/hooks/useCytoscapeOptions.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCytoscapeOptions.js","sourceRoot":"","sources":["../../../src/hooks/useCytoscapeOptions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAExC,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAE/B,OAAO,EAAe,QAAQ,EAAE,MAAM,YAAY,CAAA;AAElD,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,QAAsC,EAAE,EAAE;IAC5E,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,OAAO,GAAG,OAAO,CACrB,GAAG,EAAE,CAAC,CAAC;QACL,QAAQ;QACR,MAAM,EAAE;YACN,cAAc,EAAE,EAAE;YAClB,IAAI,EAAE,YAAY;SACnB;QACD,KAAK,EAAE;YACL;gBACE,QAAQ,EAAE,UAAU;gBACpB,KAAK,EAAE;oBACL,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO;oBACjC,aAAa,EAAE,oCAAoC;oBACnD,WAAW,EAAE,EAAE;oBACf,eAAe,EAAE,CAAC,CAAC;iBACpB;aACF;YACD;gBACE,QAAQ,EAAE,MAAM;gBAChB,KAAK,EAAE;oBACL,kBAAkB,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI;oBAC9C,mBAAmB,EAAE,KAAK;oBAC1B,sBAAsB;oBACtB,kBAAkB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAgB,CAAC;oBACrE,4BAA4B,EAAE,KAAK;oBACnC,kBAAkB,EAAE,KAAK;oBACzB,KAAK,EAAE,UAAU;iBAClB;aACF;YACD;gBACE,QAAQ,EAAE,MAAM;gBAChB,KAAK,EAAE;oBACL,aAAa,EAAE,QAAQ;oBACvB,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO;oBACnC,cAAc,EAAE,GAAG;oBACnB,oBAAoB,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO;oBAC3C,oBAAoB,EAAE,UAAU;oBAChC,KAAK,EAAE,CAAC;iBACT;aACF;SACF;KACF,CAAC,EACF,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CACjG,CAAA;IAED,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA"}

package/dist/esm/hooks/useIcons.js

@@ -1,30 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import CallMergeRoundedIcon from '@mui/icons-material/CallMergeRounded';
-import GridViewRoundedIcon from '@mui/icons-material/GridViewRounded';
-import HubIcon from '@mui/icons-material/Hub';
-import QuestionMarkRoundedIcon from '@mui/icons-material/QuestionMarkRounded';
-import VisibilityRoundedIcon from '@mui/icons-material/VisibilityRounded';
-import { useTheme } from '@mui/material';
-import { useMemo } from 'react';
-import { encodeSvg } from '../lib';
-// eslint-disable-next-line @typescript-eslint/ban-types
-const CyIconSet = {
-    archivist: GridViewRoundedIcon,
-    diviner: CallMergeRoundedIcon,
-    module: QuestionMarkRoundedIcon,
-    node: HubIcon,
-    witness: VisibilityRoundedIcon,
-};
-export const useIcons = () => {
-    const theme = useTheme();
-    const icons = useMemo(() => {
-        const iconMap = { archivist: '', diviner: '', module: '', node: '', witness: '' };
-        return Object.entries(CyIconSet).reduce((acc, [name, IconComponent]) => {
-            const icon = _jsx(IconComponent, { fontSize: "small" });
-            acc[name] = encodeSvg(icon, theme.palette.getContrastText(theme.palette.text.primary));
-            return acc;
-        }, iconMap);
-    }, [theme.palette]);
-    return icons;
-};
-//# sourceMappingURL=useIcons.js.map

package/dist/esm/hooks/useIcons.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useIcons.js","sourceRoot":"","sources":["../../../src/hooks/useIcons.tsx"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,MAAM,sCAAsC,CAAA;AACvE,OAAO,mBAAmB,MAAM,qCAAqC,CAAA;AACrE,OAAO,OAAO,MAAM,yBAAyB,CAAA;AAC7C,OAAO,uBAAuB,MAAM,yCAAyC,CAAA;AAC7E,OAAO,qBAAqB,MAAM,uCAAuC,CAAA;AACzE,OAAO,EAAkB,QAAQ,EAAE,MAAM,eAAe,CAAA;AAExD,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAE/B,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAIlC,wDAAwD;AACxD,MAAM,SAAS,GAAyE;IACtF,SAAS,EAAE,mBAAmB;IAC9B,OAAO,EAAE,oBAAoB;IAC7B,MAAM,EAAE,uBAAuB;IAC/B,IAAI,EAAE,OAAO;IACb,OAAO,EAAE,qBAAqB;CAC/B,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,EAAE;IAC3B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,MAAM,OAAO,GAAgC,EAAE,SAAS,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,CAAA;QAC9G,OAAO,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,EAAE,EAAE;YACrE,MAAM,IAAI,GAAG,KAAC,aAAa,IAAC,QAAQ,EAAC,OAAO,GAAG,CAAA;YAC/C,GAAG,CAAC,IAAmB,CAAC,GAAG,SAAS,CAAC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAA;YACrG,OAAO,GAAG,CAAA;QACZ,CAAC,EAAE,OAAO,CAAC,CAAA;IACb,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAA;IAEnB,OAAO,KAAK,CAAA;AACd,CAAC,CAAA"}

package/dist/types/hooks/useCytoscapeElements.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCytoscapeElements.d.ts","sourceRoot":"","sources":["../../../src/hooks/useCytoscapeElements.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AA0C7C;;;GAGG;AACH,eAAO,MAAM,oBAAoB,2BA8ChC,CAAA"}

package/dist/types/hooks/useCytoscapeOptions.d.ts

@@ -1,3 +0,0 @@
-import { CytoscapeOptions } from 'cytoscape';
-export declare const useCytoscapeOptions: (elements: CytoscapeOptions['elements']) => CytoscapeOptions;
-//# sourceMappingURL=useCytoscapeOptions.d.ts.map

package/dist/types/hooks/useCytoscapeOptions.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCytoscapeOptions.d.ts","sourceRoot":"","sources":["../../../src/hooks/useCytoscapeOptions.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAK5C,eAAO,MAAM,mBAAmB,aAAc,gBAAgB,CAAC,UAAU,CAAC,qBAkDzE,CAAA"}

package/dist/types/hooks/useIcons.d.ts

@@ -1,3 +0,0 @@
-export type CyNodeIcons = 'archivist' | 'diviner' | 'module' | 'node' | 'witness';
-export declare const useIcons: () => Record<CyNodeIcons, string>;
-//# sourceMappingURL=useIcons.d.ts.map

package/dist/types/hooks/useIcons.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useIcons.d.ts","sourceRoot":"","sources":["../../../src/hooks/useIcons.tsx"],"names":[],"mappings":"AAWA,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAA;AAWjF,eAAO,MAAM,QAAQ,mCAYpB,CAAA"}

package/src/hooks/useCytoscapeOptions.ts

@@ -1,57 +0,0 @@
-import { useTheme } from '@mui/material'
-import { CytoscapeOptions } from 'cytoscape'
-import { useMemo } from 'react'
-
-import { CyNodeIcons, useIcons } from './useIcons'
-
-export const useCytoscapeOptions = (elements: CytoscapeOptions['elements']) => {
-  const theme = useTheme()
-  const icons = useIcons()
-
-  const options = useMemo<CytoscapeOptions>(
-    () => ({
-      elements,
-      layout: {
-        minNodeSpacing: 75,
-        name: 'concentric',
-      },
-      style: [
-        {
-          selector: 'node[id]',
-          style: {
-            color: theme.palette.text.primary,
-            'font-family': 'Lexend Deca, Helvetica, sans-serif',
-            'font-size': 14,
-            'text-margin-y': -5,
-          },
-        },
-        {
-          selector: 'node',
-          style: {
-            'background-color': theme.palette.primary.main,
-            'background-height': '75%',
-            // TODO - make dynamic
-            'background-image': (elem) => icons[elem.data('type') as CyNodeIcons],
-            'background-image-smoothing': 'yes',
-            'background-width': '75%',
-            label: 'data(id)',
-          },
-        },
-        {
-          selector: 'edge',
-          style: {
-            'curve-style': 'bezier',
-            'line-color': theme.palette.divider,
-            'line-opacity': 0.1,
-            'target-arrow-color': theme.palette.divider,
-            'target-arrow-shape': 'triangle',
-            width: 3,
-          },
-        },
-      ],
-    }),
-    [elements, icons, theme.palette.divider, theme.palette.primary.main, theme.palette.text.primary],
-  )
-
-  return options
-}

package/src/hooks/useIcons.tsx

@@ -1,35 +0,0 @@
-import CallMergeRoundedIcon from '@mui/icons-material/CallMergeRounded'
-import GridViewRoundedIcon from '@mui/icons-material/GridViewRounded'
-import HubIcon from '@mui/icons-material/Hub'
-import QuestionMarkRoundedIcon from '@mui/icons-material/QuestionMarkRounded'
-import VisibilityRoundedIcon from '@mui/icons-material/VisibilityRounded'
-import { SvgIconTypeMap, useTheme } from '@mui/material'
-import { OverridableComponent } from '@mui/material/OverridableComponent'
-import { useMemo } from 'react'
-
-import { encodeSvg } from '../lib'
-
-export type CyNodeIcons = 'archivist' | 'diviner' | 'module' | 'node' | 'witness'
-
-// eslint-disable-next-line @typescript-eslint/ban-types
-const CyIconSet: Record<CyNodeIcons, OverridableComponent<SvgIconTypeMap<{}, 'svg'>>> = {
-  archivist: GridViewRoundedIcon,
-  diviner: CallMergeRoundedIcon,
-  module: QuestionMarkRoundedIcon,
-  node: HubIcon,
-  witness: VisibilityRoundedIcon,
-}
-
-export const useIcons = () => {
-  const theme = useTheme()
-  const icons = useMemo(() => {
-    const iconMap: Record<CyNodeIcons, string> = { archivist: '', diviner: '', module: '', node: '', witness: '' }
-    return Object.entries(CyIconSet).reduce((acc, [name, IconComponent]) => {
-      const icon = <IconComponent fontSize="small" />
-      acc[name as CyNodeIcons] = encodeSvg(icon, theme.palette.getContrastText(theme.palette.text.primary))
-      return acc
-    }, iconMap)
-  }, [theme.palette])
-
-  return icons
-}