@xyo-network/react-node-renderer 2.47.35

package/dist/esm/components/RelationalGraph.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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) => {
+    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) {
+            setCy(cytoscape({
+                container: sharedRef.current,
+                ...options,
+            }));
+        }
+    }, [options, sharedRef]);
+    return (_jsx(FlexCol, { ref: sharedRef, ...props, children: children }));
+});
+NodeRelationalGraph.displayName = 'NodeRelationalGraph';
+//# sourceMappingURL=RelationalGraph.js.map

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

@@ -0,0 +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"}

package/dist/esm/components/index.js

@@ -0,0 +1,2 @@
+export * from './RelationalGraph';
+//# sourceMappingURL=index.js.map

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

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

package/dist/esm/components/story/TestData.js

@@ -0,0 +1,45 @@
+const elements = [
+    {
+        // node a
+        data: { id: 'a', name: 'element a' },
+    },
+    {
+        // node b
+        data: { id: 'b', name: 'element b' },
+    },
+    {
+        // node c
+        data: { id: 'c', name: 'element c' },
+    },
+    {
+        // edge ab
+        data: { id: 'ab', source: 'a', target: 'b' },
+    },
+    {
+        // edge ac
+        data: { id: 'ac', source: 'a', target: 'c' },
+    },
+];
+const style = [
+    {
+        selector: 'node',
+        style: {
+            label: 'data(id)',
+        },
+    },
+    {
+        selector: 'edge',
+        style: {
+            'curve-style': 'bezier',
+            'line-color': '#ccc',
+            'target-arrow-color': '#ccc',
+            'target-arrow-shape': 'triangle',
+            width: 3,
+        },
+    },
+];
+export const options = {
+    elements,
+    style,
+};
+//# sourceMappingURL=TestData.js.map

package/dist/esm/components/story/TestData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TestData.js","sourceRoot":"","sources":["../../../../src/components/story/TestData.tsx"],"names":[],"mappings":"AAEA,MAAM,QAAQ,GAAiC;IAC7C;QACE,SAAS;QACT,IAAI,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,WAAW,EAAE;KACrC;IACD;QACE,SAAS;QACT,IAAI,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,WAAW,EAAE;KACrC;IACD;QACE,SAAS;QACT,IAAI,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,WAAW,EAAE;KACrC;IACD;QACE,UAAU;QACV,IAAI,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE;KAC7C;IACD;QACE,UAAU;QACV,IAAI,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE;KAC7C;CACF,CAAA;AAED,MAAM,KAAK,GAA8B;IACvC;QACE,QAAQ,EAAE,MAAM;QAChB,KAAK,EAAE;YACL,KAAK,EAAE,UAAU;SAClB;KACF;IAED;QACE,QAAQ,EAAE,MAAM;QAChB,KAAK,EAAE;YACL,aAAa,EAAE,QAAQ;YACvB,YAAY,EAAE,MAAM;YACpB,oBAAoB,EAAE,MAAM;YAC5B,oBAAoB,EAAE,UAAU;YAChC,KAAK,EAAE,CAAC;SACT;KACF;CACF,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAqB;IACvC,QAAQ;IACR,KAAK;CACN,CAAA"}

package/dist/esm/components/story/index.js

@@ -0,0 +1,2 @@
+export * from './TestData';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/story/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/story/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA"}

package/dist/esm/hooks/index.js

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

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

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

package/dist/esm/hooks/useCytoscapeElements.js

@@ -0,0 +1,61 @@
+import { useAsyncEffect } from '@xylabs/react-shared';
+import { ModuleWrapper } from '@xyo-network/module';
+import { NodeWrapper } from '@xyo-network/node';
+import { useProvidedWrappedNode } from '@xyo-network/react-node';
+import { useState } from 'react';
+import { parseModuleType } from '../lib';
+/**
+ * Note: Relies on describe but could eventually be converted to a discover call
+ * Logic would be similar to what the bridge does
+ */
+export const useCytoscapeElements = () => {
+    const [node] = useProvidedWrappedNode();
+    const [elements, setElements] = useState();
+    useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async () => {
+        if (node) {
+            try {
+                const newElements = [];
+                const wrapper = NodeWrapper.wrap(node);
+                const description = await wrapper?.describe();
+                const rootNodeId = description.name ?? description.address.substring(0, 6);
+                newElements.push({
+                    data: { id: rootNodeId, type: parseModuleType(description.queries) },
+                });
+                const children = description.children;
+                await Promise.all((children ?? [])?.map(async (address) => {
+                    const [result] = await wrapper.resolveWrapped(ModuleWrapper, { address: [address] });
+                    try {
+                        const description = await result.describe();
+                        const newNodeId = description.name ?? description.address.substring(0, 6);
+                        const newNode = {
+                            data: {
+                                id: newNodeId,
+                                type: parseModuleType(description.queries),
+                            },
+                        };
+                        newElements.push(newNode);
+                        const newEdge = {
+                            data: {
+                                id: `${rootNodeId}/${newNodeId}`,
+                                source: rootNodeId,
+                                target: newNodeId,
+                            },
+                        };
+                        newElements.push(newEdge);
+                    }
+                    catch (e) {
+                        console.error(e, result);
+                    }
+                }));
+                setElements(newElements);
+            }
+            catch (e) {
+                console.error(e);
+            }
+        }
+    }, [node]);
+    return elements;
+};
+//# sourceMappingURL=useCytoscapeElements.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCytoscapeElements.js","sourceRoot":"","sources":["../../../src/hooks/useCytoscapeElements.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAA;AAEhE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAA;AAExC;;;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,EAAgC,CAAA;IAExE,cAAc;IACZ,uDAAuD;IACvD,KAAK,IAAI,EAAE;QACT,IAAI,IAAI,EAAE;YACR,IAAI;gBACF,MAAM,WAAW,GAAG,EAAE,CAAA;gBACtB,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;gBACtC,MAAM,WAAW,GAAG,MAAM,OAAO,EAAE,QAAQ,EAAE,CAAA;gBAC7C,MAAM,UAAU,GAAG,WAAW,CAAC,IAAI,IAAI,WAAW,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;gBAC1E,WAAW,CAAC,IAAI,CAAC;oBACf,IAAI,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,eAAe,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE;iBACrE,CAAC,CAAA;gBACF,MAAM,QAAQ,GAAG,WAAW,CAAC,QAAQ,CAAA;gBACrC,MAAM,OAAO,CAAC,GAAG,CACf,CAAC,QAAQ,IAAI,EAAE,CAAC,EAAE,GAAG,CAAC,KAAK,EAAE,OAAO,EAAE,EAAE;oBACtC,MAAM,CAAC,MAAM,CAAC,GAAG,MAAM,OAAO,CAAC,cAAc,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,CAAA;oBACpF,IAAI;wBACF,MAAM,WAAW,GAAG,MAAM,MAAM,CAAC,QAAQ,EAAE,CAAA;wBAC3C,MAAM,SAAS,GAAG,WAAW,CAAC,IAAI,IAAI,WAAW,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;wBACzE,MAAM,OAAO,GAAG;4BACd,IAAI,EAAE;gCACJ,EAAE,EAAE,SAAS;gCACb,IAAI,EAAE,eAAe,CAAC,WAAW,CAAC,OAAO,CAAC;6BAC3C;yBACF,CAAA;wBACD,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;wBACzB,MAAM,OAAO,GAAG;4BACd,IAAI,EAAE;gCACJ,EAAE,EAAE,GAAG,UAAU,IAAI,SAAS,EAAE;gCAChC,MAAM,EAAE,UAAU;gCAClB,MAAM,EAAE,SAAS;6BAClB;yBACF,CAAA;wBACD,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;qBAC1B;oBAAC,OAAO,CAAC,EAAE;wBACV,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,CAAC,CAAA;qBACzB;gBACH,CAAC,CAAC,CACH,CAAA;gBACD,WAAW,CAAC,WAAW,CAAC,CAAA;aACzB;YAAC,OAAO,CAAC,EAAE;gBACV,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;aACjB;SACF;IACH,CAAC,EACD,CAAC,IAAI,CAAC,CACP,CAAA;IAED,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAA"}

package/dist/esm/hooks/useCytoscapeOptions.js

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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: VisibilityRoundedIcon,
+    module: QuestionMarkRoundedIcon,
+    node: HubIcon,
+};
+export const useIcons = () => {
+    const theme = useTheme();
+    const icons = useMemo(() => {
+        const iconMap = { archivist: '', diviner: '', module: '', node: '' };
+        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

@@ -0,0 +1 @@
+{"version":3,"file":"useIcons.js","sourceRoot":"","sources":["../../../src/hooks/useIcons.tsx"],"names":[],"mappings":";AAAA,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,qBAAqB;IAC9B,MAAM,EAAE,uBAAuB;IAC/B,IAAI,EAAE,OAAO;CACd,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,CAAA;QACjG,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/index.js

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

package/dist/esm/index.js.map

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

package/dist/esm/lib/index.js

@@ -0,0 +1,2 @@
+export * from './utils';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA"}

package/dist/esm/lib/utils.js

@@ -0,0 +1,36 @@
+// eslint-disable-next-line import/no-internal-modules
+import { renderToStaticMarkup } from 'react-dom/server';
+const dataUri = 'data:image/svg+xml,';
+export const encodeSvg = (reactElement, color) => {
+    const svgString = renderToStaticMarkup(reactElement);
+    const doc = new DOMParser().parseFromString(svgString, 'text/html');
+    const svgElement = doc.getElementsByTagName('svg')[0];
+    if (svgElement) {
+        svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+        svgElement.setAttribute('height', '100');
+        svgElement.style.fill = color ?? 'black';
+    }
+    return `${dataUri}${window.encodeURIComponent(svgElement.outerHTML)}`;
+};
+export const parseModuleType = (queries) => {
+    let type;
+    if (queries) {
+        for (let i = 0; i < queries.length; i++) {
+            if (queries[i].includes('archivist')) {
+                type = 'archivist';
+                break;
+            }
+            if (queries[i].includes('diviner')) {
+                type = 'diviner';
+                break;
+            }
+            if (queries[i].includes('node')) {
+                type = 'node';
+                break;
+            }
+            type = 'module';
+        }
+        return type;
+    }
+};
+//# sourceMappingURL=utils.js.map

package/dist/esm/lib/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/lib/utils.ts"],"names":[],"mappings":"AACA,sDAAsD;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAA;AAEvD,MAAM,OAAO,GAAG,qBAAqB,CAAA;AAErC,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,YAA0B,EAAE,KAAc,EAAE,EAAE;IACtE,MAAM,SAAS,GAAG,oBAAoB,CAAC,YAAY,CAAC,CAAA;IAEpD,MAAM,GAAG,GAAG,IAAI,SAAS,EAAE,CAAC,eAAe,CAAC,SAAS,EAAE,WAAW,CAAC,CAAA;IACnE,MAAM,UAAU,GAAG,GAAG,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;IACrD,IAAI,UAAU,EAAE;QACd,UAAU,CAAC,YAAY,CAAC,OAAO,EAAE,4BAA4B,CAAC,CAAA;QAC9D,UAAU,CAAC,YAAY,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAA;QACxC,UAAU,CAAC,KAAK,CAAC,IAAI,GAAG,KAAK,IAAI,OAAO,CAAA;KACzC;IAED,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC,kBAAkB,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,CAAA;AACvE,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,OAAkB,EAAE,EAAE;IACpD,IAAI,IAAI,CAAA;IACR,IAAI,OAAO,EAAE;QACX,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACvC,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE;gBACpC,IAAI,GAAG,WAAW,CAAA;gBAClB,MAAK;aACN;YACD,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE;gBAClC,IAAI,GAAG,SAAS,CAAA;gBAChB,MAAK;aACN;YACD,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;gBAC/B,IAAI,GAAG,MAAM,CAAA;gBACb,MAAK;aACN;YACD,IAAI,GAAG,QAAQ,CAAA;SAChB;QACD,OAAO,IAAI,CAAA;KACZ;AACH,CAAC,CAAA"}

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

@@ -0,0 +1,9 @@
+/// <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> {
+    options?: CytoscapeOptions;
+}
+export declare const NodeRelationalGraph: import("react").ForwardRefExoticComponent<NodeRelationalGraph & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=RelationalGraph.d.ts.map

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

@@ -0,0 +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"}

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

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

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

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

package/dist/types/components/story/TestData.d.ts

@@ -0,0 +1,3 @@
+import { CytoscapeOptions } from 'cytoscape';
+export declare const options: CytoscapeOptions;
+//# sourceMappingURL=TestData.d.ts.map

package/dist/types/components/story/TestData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TestData.d.ts","sourceRoot":"","sources":["../../../../src/components/story/TestData.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AA6C5C,eAAO,MAAM,OAAO,EAAE,gBAGrB,CAAA"}

package/dist/types/components/story/index.d.ts

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

package/dist/types/components/story/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/story/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA"}

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

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

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

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

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

@@ -0,0 +1,6 @@
+/**
+ * Note: Relies on describe but could eventually be converted to a discover call
+ * Logic would be similar to what the bridge does
+ */
+export declare const useCytoscapeElements: () => import("cytoscape").ElementsDefinition | import("cytoscape").ElementDefinition[] | Promise<import("cytoscape").ElementsDefinition> | Promise<import("cytoscape").ElementDefinition[]> | undefined;
+//# sourceMappingURL=useCytoscapeElements.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCytoscapeElements.d.ts","sourceRoot":"","sources":["../../../src/hooks/useCytoscapeElements.ts"],"names":[],"mappings":"AASA;;;GAGG;AACH,eAAO,MAAM,oBAAoB,yMAqDhC,CAAA"}

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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1 @@
+{"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

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

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

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

package/dist/types/index.d.ts

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA"}

package/dist/types/lib/utils.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+export declare const encodeSvg: (reactElement: ReactElement, color?: string) => string;
+export declare const parseModuleType: (queries?: string[]) => string | undefined;
+//# sourceMappingURL=utils.d.ts.map

package/dist/types/lib/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAMpC,eAAO,MAAM,SAAS,iBAAkB,YAAY,UAAU,MAAM,WAYnE,CAAA;AAED,eAAO,MAAM,eAAe,aAAc,MAAM,EAAE,uBAoBjD,CAAA"}

package/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "@xyo-network/react-node-renderer",
+  "author": {
+    "email": "support@xyo.network",
+    "name": "XYO Development Team",
+    "url": "https://xyo.network"
+  },
+  "bugs": {
+    "email": "support@xyo.network",
+    "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
+  },
+  "dependencies": {
+    "@xylabs/react-flexbox": "^2.16.14",
+    "@xylabs/react-shared": "^2.16.14",
+    "@xyo-network/module": "^2.53.36",
+    "@xyo-network/node": "^2.53.36",
+    "@xyo-network/react-node": "^2.47.35",
+    "@xyo-network/react-shared": "^2.47.35",
+    "cytoscape": "^3.23.0"
+  },
+  "peerDependencies": {
+    "@mui/icons-material": "^5",
+    "@mui/material": "^5",
+    "@mui/styles": "^5",
+    "axios": "^1",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-router-dom": "^6"
+  },
+  "devDependencies": {
+    "@storybook/react": "^6.5.16",
+    "@types/cytoscape": "^3.19.9",
+    "@types/react-dom": "^18.0.11",
+    "@xylabs/ts-scripts-yarn3": "^2.16.1",
+    "@xylabs/tsconfig-react": "^2.16.1",
+    "@xyo-network/account": "^2.53.34",
+    "@xyo-network/archivist": "^2.53.34",
+    "@xyo-network/bridge": "^2.53.34",
+    "@xyo-network/module": "^2.53.34",
+    "@xyo-network/node": "^2.53.34",
+    "@xyo-network/react-node": "^2.47.35",
+    "@xyo-network/react-storybook": "^2.47.35",
+    "@xyo-network/react-wallet": "^2.47.35",
+    "require-from-string": "^2.0.2",
+    "typescript": "^4.9.5"
+  },
+  "description": "Common React library for all XYO projects that use React",
+  "browser": "dist/esm/index.js",
+  "docs": "dist/docs.json",
+  "exports": {
+    ".": {
+      "node": {
+        "import": "./dist/esm/index.js",
+        "require": "./dist/cjs/index.js"
+      },
+      "browser": {
+        "import": "./dist/esm/index.js",
+        "require": "./dist/cjs/index.js"
+      },
+      "default": "./dist/esm/index.js"
+    },
+    "./dist/docs.json": {
+      "default": "./dist/docs.json"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "homepage": "https://xyo.network",
+  "keywords": [
+    "xyo",
+    "utility",
+    "typescript",
+    "react"
+  ],
+  "license": "LGPL-3.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js.git"
+  },
+  "scripts": {
+    "lint-pkg": "npmPkgJsonLint .",
+    "license": "yarn license-checker --exclude \"MIT, ISC, Apache-2.0, BSD, BSD-2-Clause, CC-BY-4.0, Unlicense, CC-BY-3.0, CC0-1.0\""
+  },
+  "sideEffects": false,
+  "types": "dist/types/index.d.ts",
+  "version": "2.47.35"
+}

package/src/components/RelationalGraph.stories.tsx

@@ -0,0 +1,86 @@
+import { ComponentStory, DecoratorFn, Meta } from '@storybook/react'
+import { useAsyncEffect } from '@xylabs/react-shared'
+import { HDWallet } from '@xyo-network/account'
+import { ArchivistConfigSchema, MemoryArchivist } from '@xyo-network/archivist'
+import { HttpBridge, HttpBridgeConfigSchema } from '@xyo-network/bridge'
+import { MemoryNode, NodeConfigSchema } from '@xyo-network/node'
+import { NodeProvider } from '@xyo-network/react-node'
+import { DefaultSeedPhrase } from '@xyo-network/react-storybook'
+import { WalletProvider } from '@xyo-network/react-wallet'
+import { useState } from 'react'
+
+import { useCytoscapeElements, useCytoscapeOptions } from '../hooks'
+import { NodeRelationalGraph } from './RelationalGraph'
+import { options } from './story'
+
+const nodeUrl = 'http://localhost:8080/node'
+const randomWallet = HDWallet.fromMnemonic(DefaultSeedPhrase)
+
+export const MemoryNodeDecorator: DecoratorFn = (Story, args) => {
+  const [node, setNode] = useState<MemoryNode>()
+
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async () => {
+      const node = await MemoryNode.create({ config: { name: 'GlobalNode', schema: NodeConfigSchema } })
+      const node1 = await MemoryNode.create({ config: { name: 'ChildNode', schema: NodeConfigSchema } })
+      const bridge = await HttpBridge.create({
+        config: { name: 'Bridge', nodeUrl, schema: HttpBridgeConfigSchema, security: { allowAnonymous: true } },
+      })
+      await node.register(bridge)
+      await node.attach(bridge.address, true)
+
+      const archivist = await MemoryArchivist.create({ config: { name: 'RootStorageArchivist', schema: ArchivistConfigSchema } })
+      await node.register(archivist)
+      await node.attach(archivist.address, true)
+
+      const archivist1 = await MemoryArchivist.create({ config: { name: 'RootStorageArchivist1', schema: ArchivistConfigSchema } })
+      await node1.register(archivist1)
+      await node1.attach(archivist1.address, true)
+
+      await node.register(node1)
+      await node.attach(node1.address, true)
+
+      setNode(node)
+    },
+    [],
+  )
+
+  return (
+    <WalletProvider defaultWallet={randomWallet}>
+      <NodeProvider node={node}>
+        <Story {...args} />
+      </NodeProvider>
+    </WalletProvider>
+  )
+}
+
+// eslint-disable-next-line import/no-default-export
+export default {
+  component: NodeRelationalGraph,
+  title: 'node/renderer/NodeRelationalGraph',
+} as Meta
+
+const Template: ComponentStory<typeof NodeRelationalGraph> = (props) => <NodeRelationalGraph {...props} />
+const TemplateDescribe: ComponentStory<typeof NodeRelationalGraph> = (props) => {
+  const elements = useCytoscapeElements()
+  const options = useCytoscapeOptions(elements)
+  return <NodeRelationalGraph options={options} {...props} />
+}
+
+const defaultProps = {
+  height: 'calc(100vh - 20px)',
+  width: '100%',
+}
+
+const Default = Template.bind({})
+Default.args = {}
+
+const WithData = Template.bind({})
+WithData.args = { options, ...defaultProps }
+
+const WithDescribe = TemplateDescribe.bind({})
+WithDescribe.args = { ...defaultProps }
+WithDescribe.decorators = [MemoryNodeDecorator]
+
+export { Default, WithData, WithDescribe }