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

package/dist/esm/Cytoscape/CytoscapeElements.js

@@ -0,0 +1,40 @@
+import { ModuleWrapper } from '@xyo-network/module';
+import { parseModuleType } from '../lib';
+export class CytoscapeElements {
+    static MaxNameLength = 20;
+    static buildChild = async (wrapper, address) => {
+        const [result] = await wrapper.resolveWrapped(ModuleWrapper, { address: [address] });
+        const description = await result.describe();
+        return CytoscapeElements.buildNode(description);
+    };
+    static buildEdge(rootNode, newNode) {
+        return {
+            data: {
+                id: `${rootNode.data.id}/${newNode.data.id}`,
+                source: rootNode.data.id,
+                target: newNode.data.id,
+            },
+        };
+    }
+    static buildNode(description) {
+        const newNodeId = CytoscapeElements.normalizeName(description.name) ?? description.address.substring(0, 8);
+        return {
+            data: {
+                id: newNodeId,
+                type: parseModuleType(description.queries),
+            },
+        };
+    }
+    static buildRootNode = async (wrapper) => {
+        const description = await wrapper?.describe();
+        return [description, CytoscapeElements.buildNode(description)];
+    };
+    static normalizeName(name) {
+        if (!name)
+            return;
+        if (name.length > this.MaxNameLength)
+            return `${name.substring(0, 20)}...`;
+        return name;
+    }
+}
+//# sourceMappingURL=CytoscapeElements.js.map

package/dist/esm/Cytoscape/CytoscapeElements.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CytoscapeElements.js","sourceRoot":"","sources":["../../../src/Cytoscape/CytoscapeElements.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAItE,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAA;AAExC,MAAM,OAAO,iBAAiB;IAC5B,MAAM,CAAC,aAAa,GAAG,EAAE,CAAA;IAEzB,MAAM,CAAC,UAAU,GAAG,KAAK,EAAE,OAAoB,EAAE,OAAe,EAAE,EAAE;QAClE,MAAM,CAAC,MAAM,CAAC,GAAG,MAAM,OAAO,CAAC,cAAc,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,CAAA;QACpF,MAAM,WAAW,GAAG,MAAM,MAAM,CAAC,QAAQ,EAAE,CAAA;QAC3C,OAAO,iBAAiB,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IACjD,CAAC,CAAA;IAED,MAAM,CAAC,SAAS,CAAC,QAA2B,EAAE,OAA0B;QACtE,OAAO;YACL,IAAI,EAAE;gBACJ,EAAE,EAAE,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;gBAC5C,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,EAAE;gBACxB,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,EAAE;aACxB;SACF,CAAA;IACH,CAAC;IAED,MAAM,CAAC,SAAS,CAAC,WAA8B;QAC7C,MAAM,SAAS,GAAG,iBAAiB,CAAC,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,WAAW,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;QAC1G,OAAO;YACL,IAAI,EAAE;gBACJ,EAAE,EAAE,SAAS;gBACb,IAAI,EAAE,eAAe,CAAC,WAAW,CAAC,OAAO,CAAC;aAC3C;SACF,CAAA;IACH,CAAC;IAED,MAAM,CAAC,aAAa,GAAG,KAAK,EAAE,OAAoB,EAAmD,EAAE;QACrG,MAAM,WAAW,GAAG,MAAM,OAAO,EAAE,QAAQ,EAAE,CAAA;QAC7C,OAAO,CAAC,WAAW,EAAE,iBAAiB,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAA;IAChE,CAAC,CAAA;IAED,MAAM,CAAC,aAAa,CAAC,IAAa;QAChC,IAAI,CAAC,IAAI;YAAE,OAAM;QACjB,IAAI,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,aAAa;YAAE,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAA;QAC1E,OAAO,IAAI,CAAA;IACb,CAAC"}

package/dist/esm/Cytoscape/CytoscapeIcons.js

@@ -0,0 +1,14 @@
+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';
+// eslint-disable-next-line @typescript-eslint/ban-types
+export const CyIconSet = {
+    archivist: GridViewRoundedIcon,
+    diviner: CallMergeRoundedIcon,
+    module: QuestionMarkRoundedIcon,
+    node: HubIcon,
+    witness: VisibilityRoundedIcon,
+};
+//# sourceMappingURL=CytoscapeIcons.js.map

package/dist/esm/Cytoscape/CytoscapeIcons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CytoscapeIcons.js","sourceRoot":"","sources":["../../../src/Cytoscape/CytoscapeIcons.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;AAMzE,wDAAwD;AACxD,MAAM,CAAC,MAAM,SAAS,GAAyE;IAC7F,SAAS,EAAE,mBAAmB;IAC9B,OAAO,EAAE,oBAAoB;IAC7B,MAAM,EAAE,uBAAuB;IAC/B,IAAI,EAAE,OAAO;IACb,OAAO,EAAE,qBAAqB;CAC/B,CAAA"}

package/dist/esm/Cytoscape/CytoscapeStyles.js

@@ -0,0 +1,33 @@
+export const NodeIdStyles = (color) => ({
+    selector: 'node[id]',
+    style: {
+        color,
+        'font-family': 'Lexend Deca, Helvetica, sans-serif',
+        'font-size': 14,
+        'text-margin-y': -5,
+    },
+});
+export const NodeStyled = (icons, bgColor) => ({
+    selector: 'node',
+    style: {
+        'background-color': bgColor,
+        'background-height': '75%',
+        // TODO - make dynamic
+        'background-image': (elem) => icons[elem.data('type')],
+        'background-image-smoothing': 'yes',
+        'background-width': '75%',
+        label: 'data(id)',
+    },
+});
+export const 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,
+    },
+});
+//# sourceMappingURL=CytoscapeStyles.js.map

package/dist/esm/Cytoscape/CytoscapeStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CytoscapeStyles.js","sourceRoot":"","sources":["../../../src/Cytoscape/CytoscapeStyles.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAc,EAAc,EAAE,CAAC,CAAC;IAC3D,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE;QACL,KAAK;QACL,aAAa,EAAE,oCAAoC;QACnD,WAAW,EAAE,EAAE;QACf,eAAe,EAAE,CAAC,CAAC;KACpB;CACF,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAAkC,EAAE,OAAgB,EAAc,EAAE,CAAC,CAAC;IAC/F,QAAQ,EAAE,MAAM;IAChB,KAAK,EAAE;QACL,kBAAkB,EAAE,OAAO;QAC3B,mBAAmB,EAAE,KAAK;QAC1B,sBAAsB;QACtB,kBAAkB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAgB,CAAC;QACrE,4BAA4B,EAAE,KAAK;QACnC,kBAAkB,EAAE,KAAK;QACzB,KAAK,EAAE,UAAU;KAClB;CACF,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,SAAkB,EAAE,gBAAyB,EAAE,EAAE,CAAC,CAAC;IAC5E,QAAQ,EAAE,MAAM;IAChB,KAAK,EAAE;QACL,aAAa,EAAE,QAAQ;QACvB,YAAY,EAAE,SAAS;QACvB,cAAc,EAAE,GAAG;QACnB,oBAAoB,EAAE,gBAAgB;QACtC,oBAAoB,EAAE,UAAU;QAChC,KAAK,EAAE,CAAC;KACT;CACF,CAAC,CAAA"}

package/dist/esm/Cytoscape/index.js

@@ -0,0 +1,4 @@
+export * from './CytoscapeElements';
+export * from './CytoscapeIcons';
+export * from './CytoscapeStyles';
+//# sourceMappingURL=index.js.map

package/dist/esm/Cytoscape/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Cytoscape/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,kBAAkB,CAAA;AAChC,cAAc,mBAAmB,CAAA"}

package/dist/esm/components/RelationalGraph.js

@@ -1,12 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, styled } from '@mui/material';
 import { FlexCol } from '@xylabs/react-flexbox';
 import { useShareForwardedRef } from '@xyo-network/react-shared';
 import cytoscape from 'cytoscape';
 import { forwardRef, useEffect, useState } from 'react';
-export const NodeRelationalGraph = forwardRef(({ children, options, ...props }, ref) => {
+export const NodeRelationalGraph = forwardRef(({ 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();
     useEffect(() => {
         if (sharedRef) {
@@ -16,7 +15,13 @@ export const NodeRelationalGraph = forwardRef(({ children, options, ...props },
             }));
         }
     }, [options, sharedRef]);
-    return (_jsx(FlexCol, { ref: sharedRef, ...props, children: children }));
+    return (_jsxs(FlexCol, { ...props, children: [_jsx(ResetButton, { size: 'small', variant: 'contained', onClick: () => cy?.reset(), children: "Reset" }), _jsx(FlexCol, { alignItems: "stretch", height: "100%", position: "absolute", ref: sharedRef, width: "100%" })] }));
 });
 NodeRelationalGraph.displayName = 'NodeRelationalGraph';
+const ResetButton = styled(Button, { name: 'ResetButton' })(() => ({
+    position: 'absolute',
+    right: '10px',
+    top: '10px',
+    zIndex: 2,
+}));
 //# sourceMappingURL=RelationalGraph.js.map

package/dist/esm/components/RelationalGraph.js.map

@@ -1 +1 @@
-{"version":3,"file":"RelationalGraph.js","sourceRoot":"","sources":["../../../src/components/RelationalGraph.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgB,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAE7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAA;AAChE,OAAO,SAAqC,MAAM,WAAW,CAAA;AAC7D,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAMvD,MAAM,CAAC,MAAM,mBAAmB,GAAG,UAAU,CAAsC,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC1H,MAAM,SAAS,GAAG,oBAAoB,CAAC,GAAG,CAAC,CAAA;IAC3C,4CAA4C;IAC5C,6DAA6D;IAC7D,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,QAAQ,EAAQ,CAAA;IAEpC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,EAAE;YACb,KAAK,CACH,SAAS,CAAC;gBACR,SAAS,EAAE,SAAS,CAAC,OAAO;gBAC5B,GAAG,OAAO;aACX,CAAC,CACH,CAAA;SACF;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAA;IAExB,OAAO,CACL,KAAC,OAAO,IAAC,GAAG,EAAE,SAAS,KAAM,KAAK,YAC/B,QAAQ,GACD,CACX,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,mBAAmB,CAAC,WAAW,GAAG,qBAAqB,CAAA"}
+{"version":3,"file":"RelationalGraph.js","sourceRoot":"","sources":["../../../src/components/RelationalGraph.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAgB,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAA;AAChE,OAAO,SAAqC,MAAM,WAAW,CAAA;AAC7D,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAMvD,MAAM,CAAC,MAAM,mBAAmB,GAAG,UAAU,CAAsC,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAChH,MAAM,SAAS,GAAG,oBAAoB,CAAC,GAAG,CAAC,CAAA;IAC3C,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,QAAQ,EAAQ,CAAA;IAEpC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,EAAE;YACb,KAAK,CACH,SAAS,CAAC;gBACR,SAAS,EAAE,SAAS,CAAC,OAAO;gBAC5B,GAAG,OAAO;aACX,CAAC,CACH,CAAA;SACF;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAA;IAExB,OAAO,CACL,MAAC,OAAO,OAAK,KAAK,aAChB,KAAC,WAAW,IAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,sBAE9D,EACd,KAAC,OAAO,IAAC,UAAU,EAAC,SAAS,EAAC,MAAM,EAAC,MAAM,EAAC,QAAQ,EAAC,UAAU,EAAC,GAAG,EAAE,SAAS,EAAE,KAAK,EAAC,MAAM,GAAW,IAC/F,CACX,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,mBAAmB,CAAC,WAAW,GAAG,qBAAqB,CAAA;AAEvD,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IACjE,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,MAAM;IACb,GAAG,EAAE,MAAM;IACX,MAAM,EAAE,CAAC;CACV,CAAC,CAAC,CAAA"}

package/dist/esm/hooks/cytoscape/index.js

@@ -0,0 +1,3 @@
+export * from './useCytoscapeElements';
+export * from './useCytoscapeOptions';
+//# sourceMappingURL=index.js.map

package/dist/esm/hooks/cytoscape/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA"}

package/dist/esm/hooks/{useCytoscapeElements.js → cytoscape/useCytoscapeElements.js}

@@ -1,41 +1,7 @@
 import { useAsyncEffect } from '@xylabs/react-shared';
-import { ModuleWrapper } from '@xyo-network/module';
 import { useProvidedWrappedNode } from '@xyo-network/react-node';
 import { useEffect, useState } from 'react';
-import { parseModuleType } from '../lib';
-const MaxNameLength = 20;
-const normalizeName = (name) => {
-    if (!name)
-        return;
-    if (name.length > MaxNameLength)
-        return `${name.substring(0, 20)}...`;
-    return name;
-};
-const buildNode = (description) => {
-    const newNodeId = normalizeName(description.name) ?? description.address.substring(0, 8);
-    return {
-        data: {
-            id: newNodeId,
-            type: parseModuleType(description.queries),
-        },
-    };
-};
-const buildEdge = (rootNode, newNode) => ({
-    data: {
-        id: `${rootNode.data.id}/${newNode.data.id}`,
-        source: rootNode.data.id,
-        target: newNode.data.id,
-    },
-});
-const buildRootNode = async (wrapper) => {
-    const description = await wrapper?.describe();
-    return [description, buildNode(description)];
-};
-const buildChild = async (wrapper, address) => {
-    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
  * Logic would be similar to what the bridge does
@@ -49,16 +15,16 @@ 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]);
                     }

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCytoscapeElements.js","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/useCytoscapeElements.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAErD,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAA;AAEhE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAEnD;;;GAGG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,EAAE;IACvC,MAAM,CAAC,IAAI,CAAC,GAAG,sBAAsB,EAAE,CAAA;IACvC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAsB,EAAE,CAAC,CAAA;IACjE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IAEzC,cAAc;IACZ,uDAAuD;IACvD,KAAK,EAAE,OAAO,EAAE,EAAE;QAChB,IAAI,IAAI,IAAI,OAAO,EAAE;YACnB,IAAI;gBACF,MAAM,CAAC,WAAW,EAAE,WAAW,CAAC,GAAG,MAAM,iBAAiB,CAAC,aAAa,CAAC,IAAI,CAAC,CAAA;gBAC9E,IAAI,OAAO,EAAE;oBAAE,WAAW,CAAC,GAAG,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC,CAAA;gBAE/C,MAAM,QAAQ,GAAG,WAAW,CAAC,QAAQ,CAAA;gBACrC,MAAM,OAAO,CAAC,UAAU,CACtB,CAAC,QAAQ,IAAI,EAAE,CAAC,EAAE,GAAG,CAAC,KAAK,EAAE,OAAO,EAAE,EAAE;oBACtC,IAAI;wBACF,MAAM,OAAO,GAAG,MAAM,iBAAiB,CAAC,UAAU,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;wBACjE,IAAI,OAAO,EAAE;4BAAE,WAAW,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,GAAG,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAA;wBAEhE,MAAM,OAAO,GAAG,iBAAiB,CAAC,SAAS,CAAC,WAAW,EAAE,OAAO,CAAC,CAAA;wBACjE,IAAI,OAAO,EAAE;4BAAE,WAAW,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,GAAG,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAA;qBACjE;oBAAC,OAAO,CAAC,EAAE;wBACV,OAAO,CAAC,KAAK,CAAC,wBAAwB,EAAE,CAAC,CAAC,CAAA;qBAC3C;gBACH,CAAC,CAAC,CACH,CAAA;aACF;YAAC,OAAO,CAAC,EAAE;gBACV,OAAO,CAAC,KAAK,CAAC,mCAAmC,EAAE,CAAC,CAAC,CAAA;aACtD;SACF;IACH,CAAC,EACD,CAAC,IAAI,EAAE,OAAO,CAAC,CAChB,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAkC,CAAA;QACtC,IAAI,IAAI,EAAE;YACR,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,SAAS,EAAE,EAAE;gBAClC,IAAI,SAAS,KAAK,gBAAgB;oBAAE,UAAU,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAA;YAC5E,CAAC,CAAC,CAAA;SACH;QACD,OAAO,GAAG,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAA;IAC3B,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAA"}

package/dist/esm/hooks/cytoscape/useCytoscapeLayout.js

@@ -0,0 +1,9 @@
+import { useMemo } from 'react';
+export const useCytoscapeLayout = () => {
+    const layout = useMemo(() => ({
+        minNodeSpacing: 75,
+        name: 'concentric',
+    }), []);
+    return layout;
+};
+//# sourceMappingURL=useCytoscapeLayout.js.map

package/dist/esm/hooks/cytoscape/useCytoscapeLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCytoscapeLayout.js","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/useCytoscapeLayout.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAE/B,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE;IACrC,MAAM,MAAM,GAA+B,OAAO,CAChD,GAAG,EAAE,CAAC,CAAC;QACL,cAAc,EAAE,EAAE;QAClB,IAAI,EAAE,YAAY;KACnB,CAAC,EACF,EAAE,CACH,CAAA;IAED,OAAO,MAAM,CAAA;AACf,CAAC,CAAA"}

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

@@ -0,0 +1,14 @@
+import { useMemo } from 'react';
+import { useCytoscapeLayout } from './useCytoscapeLayout';
+import { useCytoscapeStyle } from './useCytoscapeStyle';
+export const useCytoscapeOptions = (elements, style, layout) => {
+    const defaultStyle = useCytoscapeStyle();
+    const defaultLayout = useCytoscapeLayout();
+    const options = useMemo(() => ({
+        elements,
+        layout: layout ?? defaultLayout,
+        style: style ?? defaultStyle,
+    }), [defaultLayout, defaultStyle, elements, layout, style]);
+    return options;
+};
+//# sourceMappingURL=useCytoscapeOptions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCytoscapeOptions.js","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/useCytoscapeOptions.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAE/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAEvD,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,QAAsC,EACtC,KAAiC,EACjC,MAAmC,EACnC,EAAE;IACF,MAAM,YAAY,GAAG,iBAAiB,EAAE,CAAA;IACxC,MAAM,aAAa,GAAG,kBAAkB,EAAE,CAAA;IAE1C,MAAM,OAAO,GAAG,OAAO,CACrB,GAAG,EAAE,CAAC,CAAC;QACL,QAAQ;QACR,MAAM,EAAE,MAAM,IAAI,aAAa;QAC/B,KAAK,EAAE,KAAK,IAAI,YAAY;KAC7B,CAAC,EACF,CAAC,aAAa,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,CAAC,CACvD,CAAA;IAED,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA"}

package/dist/esm/hooks/cytoscape/useCytoscapeStyle.js

@@ -0,0 +1,15 @@
+import { useTheme } from '@mui/material';
+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 = 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;
+};
+//# sourceMappingURL=useCytoscapeStyle.js.map

package/dist/esm/hooks/cytoscape/useCytoscapeStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCytoscapeStyle.js","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/useCytoscapeStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAExC,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAE/B,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,EAAE;IACpC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,KAAK,GAA8B,OAAO,CAC9C,GAAG,EAAE,CAAC;QACJ,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;QACxC,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC;QAC7C,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC;KACzD,EACD,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CACvF,CAAA;IAED,OAAO,KAAK,CAAA;AACd,CAAC,CAAA"}

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTheme } from '@mui/material';
+import { useMemo } from 'react';
+import { CyIconSet } from '../../Cytoscape';
+import { encodeSvg } from '../../lib';
+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/cytoscape/useIcons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIcons.js","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/useIcons.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAE/B,OAAO,EAAE,SAAS,EAAe,MAAM,iBAAiB,CAAA;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AAErC,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/esm/hooks/index.js

@@ -1,3 +1,2 @@
-export * from './useCytoscapeElements';
-export * from './useCytoscapeOptions';
+export * from './cytoscape';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA"}

package/dist/types/Cytoscape/CytoscapeElements.d.ts

@@ -0,0 +1,18 @@
+import { ModuleDescription } from '@xyo-network/module';
+import { NodeWrapper } from '@xyo-network/node';
+import { ElementDefinition } from 'cytoscape';
+export declare class CytoscapeElements {
+    static MaxNameLength: number;
+    static buildChild: (wrapper: NodeWrapper, address: string) => Promise<ElementDefinition>;
+    static buildEdge(rootNode: ElementDefinition, newNode: ElementDefinition): {
+        data: {
+            id: string;
+            source: string | undefined;
+            target: string | undefined;
+        };
+    };
+    static buildNode(description: ModuleDescription): ElementDefinition;
+    static buildRootNode: (wrapper: NodeWrapper) => Promise<[ModuleDescription, ElementDefinition]>;
+    static normalizeName(name?: string): string | undefined;
+}
+//# sourceMappingURL=CytoscapeElements.d.ts.map

package/dist/types/Cytoscape/CytoscapeElements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CytoscapeElements.d.ts","sourceRoot":"","sources":["../../../src/Cytoscape/CytoscapeElements.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAiB,MAAM,qBAAqB,CAAA;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAI7C,qBAAa,iBAAiB;IAC5B,MAAM,CAAC,aAAa,SAAK;IAEzB,MAAM,CAAC,UAAU,YAAmB,WAAW,WAAW,MAAM,gCAI/D;IAED,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,iBAAiB,EAAE,OAAO,EAAE,iBAAiB;;;;;;;IAUxE,MAAM,CAAC,SAAS,CAAC,WAAW,EAAE,iBAAiB,GAAG,iBAAiB;IAUnE,MAAM,CAAC,aAAa,YAAmB,WAAW,KAAG,QAAQ,CAAC,iBAAiB,EAAE,iBAAiB,CAAC,CAAC,CAGnG;IAED,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,MAAM;CAKnC"}

package/dist/types/Cytoscape/CytoscapeIcons.d.ts

@@ -0,0 +1,5 @@
+import { SvgIconTypeMap } from '@mui/material';
+import { OverridableComponent } from '@mui/material/OverridableComponent';
+export type CyNodeIcons = 'archivist' | 'diviner' | 'module' | 'node' | 'witness';
+export declare const CyIconSet: Record<CyNodeIcons, OverridableComponent<SvgIconTypeMap<{}, 'svg'>>>;
+//# sourceMappingURL=CytoscapeIcons.d.ts.map

package/dist/types/Cytoscape/CytoscapeIcons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CytoscapeIcons.d.ts","sourceRoot":"","sources":["../../../src/Cytoscape/CytoscapeIcons.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAA;AAEzE,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAA;AAGjF,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,WAAW,EAAE,oBAAoB,CAAC,cAAc,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,CAM1F,CAAA"}

package/dist/types/Cytoscape/CytoscapeStyles.d.ts

@@ -0,0 +1,16 @@
+import { Stylesheet } from 'cytoscape';
+import { CyNodeIcons } from './CytoscapeIcons';
+export declare const NodeIdStyles: (color?: string) => Stylesheet;
+export declare const NodeStyled: (icons: Record<CyNodeIcons, string>, bgColor?: string) => Stylesheet;
+export declare const EdgeStyled: (lineColor?: string, targetArrowColor?: string) => {
+    selector: string;
+    style: {
+        'curve-style': string;
+        'line-color': string | undefined;
+        'line-opacity': number;
+        'target-arrow-color': string | undefined;
+        'target-arrow-shape': string;
+        width: number;
+    };
+};
+//# sourceMappingURL=CytoscapeStyles.d.ts.map

package/dist/types/Cytoscape/CytoscapeStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CytoscapeStyles.d.ts","sourceRoot":"","sources":["../../../src/Cytoscape/CytoscapeStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AAEtC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAE9C,eAAO,MAAM,YAAY,WAAY,MAAM,KAAG,UAQ5C,CAAA;AAEF,eAAO,MAAM,UAAU,UAAW,OAAO,WAAW,EAAE,MAAM,CAAC,YAAY,MAAM,KAAG,UAWhF,CAAA;AAEF,eAAO,MAAM,UAAU,eAAgB,MAAM,qBAAqB,MAAM;;;;;;;;;;CAUtE,CAAA"}

package/dist/types/Cytoscape/index.d.ts

@@ -0,0 +1,4 @@
+export * from './CytoscapeElements';
+export * from './CytoscapeIcons';
+export * from './CytoscapeStyles';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/Cytoscape/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Cytoscape/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,kBAAkB,CAAA;AAChC,cAAc,mBAAmB,CAAA"}

package/dist/types/components/RelationalGraph.d.ts

@@ -1,8 +1,7 @@
 /// <reference types="react" />
 import { FlexBoxProps } from '@xylabs/react-flexbox';
-import { WithChildren } from '@xylabs/react-shared';
 import { CytoscapeOptions } from 'cytoscape';
-export interface NodeRelationalGraph extends WithChildren<FlexBoxProps> {
+export interface NodeRelationalGraph extends FlexBoxProps {
     options?: CytoscapeOptions;
 }
 export declare const NodeRelationalGraph: import("react").ForwardRefExoticComponent<NodeRelationalGraph & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/RelationalGraph.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RelationalGraph.d.ts","sourceRoot":"","sources":["../../../src/components/RelationalGraph.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAW,MAAM,uBAAuB,CAAA;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAEnD,OAAkB,EAAQ,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAG7D,MAAM,WAAW,mBAAoB,SAAQ,YAAY,CAAC,YAAY,CAAC;IACrE,OAAO,CAAC,EAAE,gBAAgB,CAAA;CAC3B;AAED,eAAO,MAAM,mBAAmB,gHAsB9B,CAAA"}
+{"version":3,"file":"RelationalGraph.d.ts","sourceRoot":"","sources":["../../../src/components/RelationalGraph.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAW,MAAM,uBAAuB,CAAA;AAE7D,OAAkB,EAAQ,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAG7D,MAAM,WAAW,mBAAoB,SAAQ,YAAY;IACvD,OAAO,CAAC,EAAE,gBAAgB,CAAA;CAC3B;AAED,eAAO,MAAM,mBAAmB,gHAuB9B,CAAA"}

package/dist/types/hooks/cytoscape/index.d.ts

@@ -0,0 +1,3 @@
+export * from './useCytoscapeElements';
+export * from './useCytoscapeOptions';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/hooks/cytoscape/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA"}

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

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

package/dist/types/hooks/cytoscape/useCytoscapeLayout.d.ts

@@ -0,0 +1,2 @@
+export declare const useCytoscapeLayout: () => import("cytoscape").BaseLayoutOptions | import("cytoscape").ConcentricLayoutOptions;
+//# sourceMappingURL=useCytoscapeLayout.d.ts.map

package/dist/types/hooks/cytoscape/useCytoscapeLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCytoscapeLayout.d.ts","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/useCytoscapeLayout.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB,2FAU9B,CAAA"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCytoscapeOptions.d.ts","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/useCytoscapeOptions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAM5C,eAAO,MAAM,mBAAmB,aACpB,gBAAgB,CAAC,UAAU,CAAC,UAC9B,gBAAgB,CAAC,OAAO,CAAC,WACxB,gBAAgB,CAAC,QAAQ,CAAC,qBAepC,CAAA"}

package/dist/types/hooks/cytoscape/useCytoscapeStyle.d.ts

@@ -0,0 +1,2 @@
+export declare const useCytoscapeStyle: () => import("cytoscape").Stylesheet[];
+//# sourceMappingURL=useCytoscapeStyle.d.ts.map

package/dist/types/hooks/cytoscape/useCytoscapeStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCytoscapeStyle.d.ts","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/useCytoscapeStyle.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,iBAAiB,wCAc7B,CAAA"}

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

@@ -0,0 +1,3 @@
+import { CyNodeIcons } from '../../Cytoscape';
+export declare const useIcons: () => Record<CyNodeIcons, string>;
+//# sourceMappingURL=useIcons.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useIcons.d.ts","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/useIcons.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAGxD,eAAO,MAAM,QAAQ,mCAYpB,CAAA"}

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

@@ -1,3 +1,2 @@
-export * from './useCytoscapeElements';
-export * from './useCytoscapeOptions';
+export * from './cytoscape';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA"}

package/package.json

@@ -14,8 +14,8 @@
     "@xylabs/react-shared": "^2.16.14",
     "@xyo-network/module": "^2.53.36",
     "@xyo-network/node": "^2.53.36",
-    "@xyo-network/react-node": "^2.47.36",
-    "@xyo-network/react-shared": "^2.47.36",
+    "@xyo-network/react-node": "^2.47.37",
+    "@xyo-network/react-shared": "^2.47.37",
     "cytoscape": "^3.23.0"
   },
   "peerDependencies": {
@@ -39,9 +39,9 @@
     "@xyo-network/id-plugin": "^2.53.34",
     "@xyo-network/module": "^2.53.34",
     "@xyo-network/node": "^2.53.34",
-    "@xyo-network/react-node": "^2.47.36",
-    "@xyo-network/react-storybook": "^2.47.36",
-    "@xyo-network/react-wallet": "^2.47.36",
+    "@xyo-network/react-node": "^2.47.37",
+    "@xyo-network/react-storybook": "^2.47.37",
+    "@xyo-network/react-wallet": "^2.47.37",
     "require-from-string": "^2.0.2",
     "typescript": "^4.9.5"
   },
@@ -88,5 +88,5 @@
   },
   "sideEffects": false,
   "types": "dist/types/index.d.ts",
-  "version": "2.47.36"
+  "version": "2.47.37"
 }

package/src/Cytoscape/CytoscapeElements.ts

@@ -0,0 +1,46 @@
+import { ModuleDescription, ModuleWrapper } from '@xyo-network/module'
+import { NodeWrapper } from '@xyo-network/node'
+import { ElementDefinition } from 'cytoscape'
+
+import { parseModuleType } from '../lib'
+
+export class CytoscapeElements {
+  static MaxNameLength = 20
+
+  static buildChild = async (wrapper: NodeWrapper, address: string) => {
+    const [result] = await wrapper.resolveWrapped(ModuleWrapper, { address: [address] })
+    const description = await result.describe()
+    return CytoscapeElements.buildNode(description)
+  }
+
+  static buildEdge(rootNode: ElementDefinition, newNode: ElementDefinition) {
+    return {
+      data: {
+        id: `${rootNode.data.id}/${newNode.data.id}`,
+        source: rootNode.data.id,
+        target: newNode.data.id,
+      },
+    }
+  }
+
+  static buildNode(description: ModuleDescription): ElementDefinition {
+    const newNodeId = CytoscapeElements.normalizeName(description.name) ?? description.address.substring(0, 8)
+    return {
+      data: {
+        id: newNodeId,
+        type: parseModuleType(description.queries),
+      },
+    }
+  }
+
+  static buildRootNode = async (wrapper: NodeWrapper): Promise<[ModuleDescription, ElementDefinition]> => {
+    const description = await wrapper?.describe()
+    return [description, CytoscapeElements.buildNode(description)]
+  }
+
+  static normalizeName(name?: string) {
+    if (!name) return
+    if (name.length > this.MaxNameLength) return `${name.substring(0, 20)}...`
+    return name
+  }
+}

package/src/Cytoscape/CytoscapeIcons.tsx

@@ -0,0 +1,18 @@
+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 } from '@mui/material'
+import { OverridableComponent } from '@mui/material/OverridableComponent'
+
+export type CyNodeIcons = 'archivist' | 'diviner' | 'module' | 'node' | 'witness'
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export const CyIconSet: Record<CyNodeIcons, OverridableComponent<SvgIconTypeMap<{}, 'svg'>>> = {
+  archivist: GridViewRoundedIcon,
+  diviner: CallMergeRoundedIcon,
+  module: QuestionMarkRoundedIcon,
+  node: HubIcon,
+  witness: VisibilityRoundedIcon,
+}

package/src/Cytoscape/CytoscapeStyles.ts

@@ -0,0 +1,38 @@
+import { Stylesheet } from 'cytoscape'
+
+import { CyNodeIcons } from './CytoscapeIcons'
+
+export const NodeIdStyles = (color?: string): Stylesheet => ({
+  selector: 'node[id]',
+  style: {
+    color,
+    'font-family': 'Lexend Deca, Helvetica, sans-serif',
+    'font-size': 14,
+    'text-margin-y': -5,
+  },
+})
+
+export const NodeStyled = (icons: Record<CyNodeIcons, string>, bgColor?: string): Stylesheet => ({
+  selector: 'node',
+  style: {
+    'background-color': bgColor,
+    '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)',
+  },
+})
+
+export const EdgeStyled = (lineColor?: string, targetArrowColor?: string) => ({
+  selector: 'edge',
+  style: {
+    'curve-style': 'bezier',
+    'line-color': lineColor,
+    'line-opacity': 0.1,
+    'target-arrow-color': targetArrowColor,
+    'target-arrow-shape': 'triangle',
+    width: 3,
+  },
+})

package/src/Cytoscape/index.ts

@@ -0,0 +1,3 @@
+export * from './CytoscapeElements'
+export * from './CytoscapeIcons'
+export * from './CytoscapeStyles'