@xyo-network/react-node-renderer 2.47.43 → 2.47.45

package/dist/esm/Cytoscape/CytoscapeElements.js

@@ -20,6 +20,7 @@ export class CytoscapeElements {
         const newNodeId = CytoscapeElements.normalizeName(description.name) ?? description.address.substring(0, 8);
         return {
             data: {
+                address: description.address,
                 id: newNodeId,
                 type: parseModuleType(description.queries),
             },

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

@@ -1 +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"}
+{"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,OAAO,EAAE,WAAW,CAAC,OAAO;gBAC5B,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/components/RelationalGraph.js

@@ -1,28 +1,35 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, styled } from '@mui/material';
-import { FlexCol } from '@xylabs/react-flexbox';
+import { FlexCol, FlexRow } 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(({ options, ...props }, ref) => {
-    const sharedRef = useShareForwardedRef(ref);
+import { useCytoscapeInstance } from '../contexts';
+export const NodeRelationalGraph = forwardRef(({ actions, options, ...props }, ref) => {
     const [cy, setCy] = useState();
+    const { setCy: setCyContext } = useCytoscapeInstance();
+    const sharedRef = useShareForwardedRef(ref);
     const handleReset = () => {
         cy?.reset();
         cy?.fit(undefined, 20);
     };
     useEffect(() => {
         if (sharedRef) {
-            setCy(cytoscape({
+            const newCy = cytoscape({
                 container: sharedRef.current,
                 ...options,
-            }));
+            });
+            setCy(newCy);
         }
     }, [options, sharedRef]);
-    return (_jsxs(FlexCol, { ...props, children: [_jsx(ResetButton, { size: 'small', variant: 'contained', onClick: handleReset, children: "Reset" }), _jsx(FlexCol, { alignItems: "stretch", height: "100%", position: "absolute", ref: sharedRef, width: "100%" })] }));
+    useEffect(() => {
+        setCyContext?.(cy);
+    }, [cy, setCyContext]);
+    return (_jsxs(FlexCol, { ...props, children: [_jsxs(ActionsContainer, { children: [actions, _jsx(Button, { size: 'small', variant: 'contained', onClick: handleReset, children: "Reset" })] }), _jsx(FlexCol, { alignItems: "stretch", height: "100%", position: "absolute", ref: sharedRef, width: "100%" })] }));
 });
 NodeRelationalGraph.displayName = 'NodeRelationalGraph';
-const ResetButton = styled(Button, { name: 'ResetButton' })(() => ({
+const ActionsContainer = styled(FlexRow, { name: 'ActionsContainer' })(() => ({
+    flexWrap: 'wrap',
     position: 'absolute',
     right: '10px',
     top: '10px',

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

@@ -1 +1 @@
-{"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,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,EAAE,EAAE,KAAK,EAAE,CAAA;QACX,EAAE,EAAE,GAAG,CAAC,SAAS,EAAE,EAAE,CAAC,CAAA;IACxB,CAAC,CAAA;IAED,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,WAAW,sBAExD,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"}
+{"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,OAAO,EAAE,MAAM,uBAAuB,CAAA;AACtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAA;AAChE,OAAO,SAAqC,MAAM,WAAW,CAAA;AAC7D,OAAO,EAAE,UAAU,EAAa,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAElE,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAOlD,MAAM,CAAC,MAAM,mBAAmB,GAAG,UAAU,CAAsC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzH,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,QAAQ,EAAQ,CAAA;IACpC,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,oBAAoB,EAAE,CAAA;IACtD,MAAM,SAAS,GAAG,oBAAoB,CAAC,GAAG,CAAC,CAAA;IAE3C,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,EAAE,EAAE,KAAK,EAAE,CAAA;QACX,EAAE,EAAE,GAAG,CAAC,SAAS,EAAE,EAAE,CAAC,CAAA;IACxB,CAAC,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,EAAE;YACb,MAAM,KAAK,GAAG,SAAS,CAAC;gBACtB,SAAS,EAAE,SAAS,CAAC,OAAO;gBAC5B,GAAG,OAAO;aACX,CAAC,CAAA;YACF,KAAK,CAAC,KAAK,CAAC,CAAA;SACb;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAA;IAExB,SAAS,CAAC,GAAG,EAAE;QACb,YAAY,EAAE,CAAC,EAAE,CAAC,CAAA;IACpB,CAAC,EAAE,CAAC,EAAE,EAAE,YAAY,CAAC,CAAC,CAAA;IAEtB,OAAO,CACL,MAAC,OAAO,OAAK,KAAK,aAChB,MAAC,gBAAgB,eACd,OAAO,EACR,KAAC,MAAM,IAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,WAAW,sBAExD,IACQ,EACnB,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,gBAAgB,GAAG,MAAM,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,kBAAkB,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IAC5E,QAAQ,EAAE,MAAM;IAChB,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,MAAM;IACb,GAAG,EAAE,MAAM;IACX,MAAM,EAAE,CAAC;CACV,CAAC,CAAC,CAAA"}

package/dist/esm/contexts/CytoscapeInstance/Context.js

@@ -0,0 +1,3 @@
+import { createContextEx } from '@xyo-network/react-shared';
+export const CytoscapeInstanceContext = createContextEx();
+//# sourceMappingURL=Context.js.map

package/dist/esm/contexts/CytoscapeInstance/Context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Context.js","sourceRoot":"","sources":["../../../../src/contexts/CytoscapeInstance/Context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAI3D,MAAM,CAAC,MAAM,wBAAwB,GAAG,eAAe,EAA0B,CAAA"}

package/dist/esm/contexts/CytoscapeInstance/Provider.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { CytoscapeInstanceContext } from './Context';
+export const CytoscapeInstanceProvider = ({ children, defaultInstance }) => {
+    const [cy, setCy] = useState(defaultInstance);
+    useEffect(() => {
+        setCy(defaultInstance);
+    }, [defaultInstance]);
+    return _jsx(CytoscapeInstanceContext.Provider, { value: { cy, provided: true, setCy }, children: children });
+};
+//# sourceMappingURL=Provider.js.map

package/dist/esm/contexts/CytoscapeInstance/Provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Provider.js","sourceRoot":"","sources":["../../../../src/contexts/CytoscapeInstance/Provider.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAA;AAMpD,MAAM,CAAC,MAAM,yBAAyB,GAA6C,CAAC,EAAE,QAAQ,EAAE,eAAe,EAAE,EAAE,EAAE;IACnH,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAmB,eAAe,CAAC,CAAA;IAC/D,SAAS,CAAC,GAAG,EAAE;QACb,KAAK,CAAC,eAAe,CAAC,CAAA;IACxB,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAA;IAErB,OAAO,KAAC,wBAAwB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,YAAG,QAAQ,GAAqC,CAAA;AAChI,CAAC,CAAA"}

package/dist/esm/contexts/CytoscapeInstance/State.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=State.js.map

package/dist/esm/contexts/CytoscapeInstance/State.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"State.js","sourceRoot":"","sources":["../../../../src/contexts/CytoscapeInstance/State.ts"],"names":[],"mappings":""}

package/dist/esm/contexts/CytoscapeInstance/index.js

@@ -0,0 +1,5 @@
+export * from './Context';
+export * from './Provider';
+export * from './State';
+export * from './use';
+//# sourceMappingURL=index.js.map

package/dist/esm/contexts/CytoscapeInstance/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/contexts/CytoscapeInstance/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA"}

package/dist/esm/contexts/CytoscapeInstance/use.js

@@ -0,0 +1,4 @@
+import { useContextEx } from '@xyo-network/react-shared';
+import { CytoscapeInstanceContext } from './Context';
+export const useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, 'CytoscapeInstance', required);
+//# sourceMappingURL=use.js.map

package/dist/esm/contexts/CytoscapeInstance/use.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use.js","sourceRoot":"","sources":["../../../../src/contexts/CytoscapeInstance/use.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAExD,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAA;AAEpD,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,QAAQ,GAAG,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,wBAAwB,EAAE,mBAAmB,EAAE,QAAQ,CAAC,CAAA"}

package/dist/esm/contexts/index.js

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

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

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

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

@@ -32,7 +32,6 @@ export const useCytoscapeElements = (targetNode) => {
                 console.error('Error Getting initial description', e);
             }
         }
-        return () => console.log('unmounted');
     }, [targetNode]);
     return elements;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"useCytoscapeElements.js","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/useCytoscapeElements.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAGrD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAEnD;;;GAGG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,UAAwB,EAAE,EAAE;IAC/D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAsB,EAAE,CAAC,CAAA;IAEjE,cAAc;IACZ,uDAAuD;IACvD,KAAK,IAAI,EAAE;QACT,IAAI,UAAU,EAAE;YACd,IAAI;gBACF,MAAM,CAAC,WAAW,EAAE,WAAW,CAAC,GAAG,MAAM,iBAAiB,CAAC,aAAa,CAAC,UAAU,CAAC,CAAA;gBACpF,MAAM,WAAW,GAAG,CAAC,WAAW,CAAC,CAAA;gBAEjC,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,UAAU,EAAE,OAAO,CAAC,CAAA;wBACvE,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;wBAEzB,MAAM,OAAO,GAAG,iBAAiB,CAAC,SAAS,CAAC,WAAW,EAAE,OAAO,CAAC,CAAA;wBACjE,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;qBAC1B;oBAAC,OAAO,CAAC,EAAE;wBACV,OAAO,CAAC,KAAK,CAAC,wBAAwB,EAAE,CAAC,CAAC,CAAA;qBAC3C;gBACH,CAAC,CAAC,CACH,CAAA;gBACD,WAAW,CAAC,WAAW,CAAC,CAAA;aACzB;YAAC,OAAO,CAAC,EAAE;gBACV,OAAO,CAAC,KAAK,CAAC,mCAAmC,EAAE,CAAC,CAAC,CAAA;aACtD;SACF;QACD,OAAO,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;IACvC,CAAC,EACD,CAAC,UAAU,CAAC,CACb,CAAA;IAED,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAA"}
+{"version":3,"file":"useCytoscapeElements.js","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/useCytoscapeElements.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAGrD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAEnD;;;GAGG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,UAAwB,EAAE,EAAE;IAC/D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAsB,EAAE,CAAC,CAAA;IAEjE,cAAc;IACZ,uDAAuD;IACvD,KAAK,IAAI,EAAE;QACT,IAAI,UAAU,EAAE;YACd,IAAI;gBACF,MAAM,CAAC,WAAW,EAAE,WAAW,CAAC,GAAG,MAAM,iBAAiB,CAAC,aAAa,CAAC,UAAU,CAAC,CAAA;gBACpF,MAAM,WAAW,GAAG,CAAC,WAAW,CAAC,CAAA;gBAEjC,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,UAAU,EAAE,OAAO,CAAC,CAAA;wBACvE,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;wBAEzB,MAAM,OAAO,GAAG,iBAAiB,CAAC,SAAS,CAAC,WAAW,EAAE,OAAO,CAAC,CAAA;wBACjE,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;qBAC1B;oBAAC,OAAO,CAAC,EAAE;wBACV,OAAO,CAAC,KAAK,CAAC,wBAAwB,EAAE,CAAC,CAAC,CAAA;qBAC3C;gBACH,CAAC,CAAC,CACH,CAAA;gBACD,WAAW,CAAC,WAAW,CAAC,CAAA;aACzB;YAAC,OAAO,CAAC,EAAE;gBACV,OAAO,CAAC,KAAK,CAAC,mCAAmC,EAAE,CAAC,CAAC,CAAA;aACtD;SACF;IACH,CAAC,EACD,CAAC,UAAU,CAAC,CACb,CAAA;IAED,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAA"}

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

@@ -1 +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"}
+{"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;IAWnE,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/components/RelationalGraph.d.ts

@@ -1,7 +1,8 @@
-/// <reference types="react" />
 import { FlexBoxProps } from '@xylabs/react-flexbox';
 import { CytoscapeOptions } from 'cytoscape';
+import { ReactNode } from 'react';
 export interface NodeRelationalGraph extends FlexBoxProps {
+    actions?: ReactNode;
     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":";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,gHA4B9B,CAAA"}
+{"version":3,"file":"RelationalGraph.d.ts","sourceRoot":"","sources":["../../../src/components/RelationalGraph.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAoB,MAAM,uBAAuB,CAAA;AAEtE,OAAkB,EAAQ,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAC7D,OAAO,EAAc,SAAS,EAAuB,MAAM,OAAO,CAAA;AAIlE,MAAM,WAAW,mBAAoB,SAAQ,YAAY;IACvD,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,OAAO,CAAC,EAAE,gBAAgB,CAAA;CAC3B;AAED,eAAO,MAAM,mBAAmB,gHAmC9B,CAAA"}

package/dist/types/contexts/CytoscapeInstance/Context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { CytoscapeInstanceState } from './State';
+export declare const CytoscapeInstanceContext: import("react").Context<CytoscapeInstanceState & import("@xyo-network/react-shared").ContextExState>;
+//# sourceMappingURL=Context.d.ts.map

package/dist/types/contexts/CytoscapeInstance/Context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Context.d.ts","sourceRoot":"","sources":["../../../../src/contexts/CytoscapeInstance/Context.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAEhD,eAAO,MAAM,wBAAwB,sGAA4C,CAAA"}

package/dist/types/contexts/CytoscapeInstance/Provider.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { WithChildren } from '@xylabs/react-shared';
+import { Core } from 'cytoscape';
+export interface CytoscapeInstanceProviderProps extends WithChildren {
+    defaultInstance?: Core;
+}
+export declare const CytoscapeInstanceProvider: React.FC<CytoscapeInstanceProviderProps>;
+//# sourceMappingURL=Provider.d.ts.map

package/dist/types/contexts/CytoscapeInstance/Provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Provider.d.ts","sourceRoot":"","sources":["../../../../src/contexts/CytoscapeInstance/Provider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAKhC,MAAM,WAAW,8BAA+B,SAAQ,YAAY;IAClE,eAAe,CAAC,EAAE,IAAI,CAAA;CACvB;AAED,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAAC,8BAA8B,CAO9E,CAAA"}

package/dist/types/contexts/CytoscapeInstance/State.d.ts

@@ -0,0 +1,8 @@
+import { ContextExState } from '@xyo-network/react-shared';
+import { Core } from 'cytoscape';
+import { Dispatch, SetStateAction } from 'react';
+export interface CytoscapeInstanceState extends ContextExState {
+    cy?: Core;
+    setCy?: Dispatch<SetStateAction<Core | undefined>>;
+}
+//# sourceMappingURL=State.d.ts.map

package/dist/types/contexts/CytoscapeInstance/State.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"State.d.ts","sourceRoot":"","sources":["../../../../src/contexts/CytoscapeInstance/State.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAChC,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAEhD,MAAM,WAAW,sBAAuB,SAAQ,cAAc;IAC5D,EAAE,CAAC,EAAE,IAAI,CAAA;IACT,KAAK,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,IAAI,GAAG,SAAS,CAAC,CAAC,CAAA;CACnD"}

package/dist/types/contexts/CytoscapeInstance/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Context';
+export * from './Provider';
+export * from './State';
+export * from './use';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/contexts/CytoscapeInstance/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA"}

package/dist/types/contexts/CytoscapeInstance/use.d.ts

@@ -0,0 +1,2 @@
+export declare const useCytoscapeInstance: (required?: boolean) => Omit<import("./State").CytoscapeInstanceState & import("@xyo-network/react-shared").ContextExState, "provided">;
+//# sourceMappingURL=use.d.ts.map

package/dist/types/contexts/CytoscapeInstance/use.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use.d.ts","sourceRoot":"","sources":["../../../../src/contexts/CytoscapeInstance/use.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,oBAAoB,yIAA8F,CAAA"}

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"useCytoscapeElements.d.ts","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/useCytoscapeElements.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAK7C;;;GAGG;AACH,eAAO,MAAM,oBAAoB,gBAAiB,WAAW,wBAoC5D,CAAA"}
+{"version":3,"file":"useCytoscapeElements.d.ts","sourceRoot":"","sources":["../../../../src/hooks/cytoscape/useCytoscapeElements.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAK7C;;;GAGG;AACH,eAAO,MAAM,oBAAoB,gBAAiB,WAAW,wBAmC5D,CAAA"}

package/package.json

@@ -12,9 +12,9 @@
   "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-shared": "^2.47.43",
+    "@xyo-network/module": "^2.54.7",
+    "@xyo-network/node": "^2.54.7",
+    "@xyo-network/react-shared": "^2.47.45",
     "cytoscape": "^3.23.0"
   },
   "peerDependencies": {
@@ -32,15 +32,15 @@
     "@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/id-plugin": "^2.53.34",
-    "@xyo-network/module": "^2.53.34",
-    "@xyo-network/node": "^2.53.34",
-    "@xyo-network/react-node": "^2.47.43",
-    "@xyo-network/react-storybook": "^2.47.43",
-    "@xyo-network/react-wallet": "^2.47.43",
+    "@xyo-network/account": "^2.54.7",
+    "@xyo-network/archivist": "^2.54.7",
+    "@xyo-network/bridge": "^2.54.7",
+    "@xyo-network/id-plugin": "^2.54.7",
+    "@xyo-network/module": "^2.54.7",
+    "@xyo-network/node": "^2.54.7",
+    "@xyo-network/react-node": "^2.47.45",
+    "@xyo-network/react-storybook": "^2.47.45",
+    "@xyo-network/react-wallet": "^2.47.45",
     "require-from-string": "^2.0.2",
     "typescript": "^4.9.5"
   },
@@ -87,5 +87,5 @@
   },
   "sideEffects": false,
   "types": "dist/types/index.d.ts",
-  "version": "2.47.43"
+  "version": "2.47.45"
 }

package/src/Cytoscape/CytoscapeElements.ts

@@ -27,6 +27,7 @@ export class CytoscapeElements {
     const newNodeId = CytoscapeElements.normalizeName(description.name) ?? description.address.substring(0, 8)
     return {
       data: {
+        address: description.address,
         id: newNodeId,
         type: parseModuleType(description.queries),
       },

package/src/components/RelationalGraph.tsx

@@ -1,16 +1,20 @@
 import { Button, styled } from '@mui/material'
-import { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'
+import { FlexBoxProps, FlexCol, FlexRow } from '@xylabs/react-flexbox'
 import { useShareForwardedRef } from '@xyo-network/react-shared'
 import cytoscape, { Core, CytoscapeOptions } from 'cytoscape'
-import { forwardRef, useEffect, useState } from 'react'
+import { forwardRef, ReactNode, useEffect, useState } from 'react'
+
+import { useCytoscapeInstance } from '../contexts'
 
 export interface NodeRelationalGraph extends FlexBoxProps {
+  actions?: ReactNode
   options?: CytoscapeOptions
 }
 
-export const NodeRelationalGraph = forwardRef<HTMLDivElement, NodeRelationalGraph>(({ options, ...props }, ref) => {
-  const sharedRef = useShareForwardedRef(ref)
+export const NodeRelationalGraph = forwardRef<HTMLDivElement, NodeRelationalGraph>(({ actions, options, ...props }, ref) => {
   const [cy, setCy] = useState<Core>()
+  const { setCy: setCyContext } = useCytoscapeInstance()
+  const sharedRef = useShareForwardedRef(ref)
 
   const handleReset = () => {
     cy?.reset()
@@ -19,20 +23,26 @@ export const NodeRelationalGraph = forwardRef<HTMLDivElement, NodeRelationalGrap
 
   useEffect(() => {
     if (sharedRef) {
-      setCy(
-        cytoscape({
-          container: sharedRef.current,
-          ...options,
-        }),
-      )
+      const newCy = cytoscape({
+        container: sharedRef.current,
+        ...options,
+      })
+      setCy(newCy)
     }
   }, [options, sharedRef])
 
+  useEffect(() => {
+    setCyContext?.(cy)
+  }, [cy, setCyContext])
+
   return (
     <FlexCol {...props}>
-      <ResetButton size={'small'} variant={'contained'} onClick={handleReset}>
-        Reset
-      </ResetButton>
+      <ActionsContainer>
+        {actions}
+        <Button size={'small'} variant={'contained'} onClick={handleReset}>
+          Reset
+        </Button>
+      </ActionsContainer>
       <FlexCol alignItems="stretch" height="100%" position="absolute" ref={sharedRef} width="100%"></FlexCol>
     </FlexCol>
   )
@@ -40,7 +50,8 @@ export const NodeRelationalGraph = forwardRef<HTMLDivElement, NodeRelationalGrap
 
 NodeRelationalGraph.displayName = 'NodeRelationalGraph'
 
-const ResetButton = styled(Button, { name: 'ResetButton' })(() => ({
+const ActionsContainer = styled(FlexRow, { name: 'ActionsContainer' })(() => ({
+  flexWrap: 'wrap',
   position: 'absolute',
   right: '10px',
   top: '10px',

package/src/components/RelationalGraphEvents.stories.tsx

@@ -0,0 +1,84 @@
+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 { MemoryNode, NodeConfigSchema } from '@xyo-network/node'
+import { NodeProvider, useProvidedWrappedNode } from '@xyo-network/react-node'
+import { DefaultSeedPhrase } from '@xyo-network/react-storybook'
+import { WalletProvider } from '@xyo-network/react-wallet'
+import { EventObject } from 'cytoscape'
+import { useEffect, useState } from 'react'
+
+import { CytoscapeInstanceProvider, useCytoscapeInstance } from '../contexts'
+import { useCytoscapeElements, useCytoscapeOptions } from '../hooks'
+import { NodeRelationalGraph } from './RelationalGraph'
+
+const randomWallet = HDWallet.fromMnemonic(DefaultSeedPhrase)
+
+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 archivist = await MemoryArchivist.create({ config: { name: 'RootStorageArchivist', schema: ArchivistConfigSchema } })
+      await node.register(archivist)
+      await node.attach(archivist.address, true)
+
+      setNode(node)
+    },
+    [],
+  )
+
+  return (
+    <WalletProvider defaultWallet={randomWallet}>
+      <NodeProvider node={node}>
+        <CytoscapeInstanceProvider>
+          <Story {...args} />
+        </CytoscapeInstanceProvider>
+      </NodeProvider>
+    </WalletProvider>
+  )
+}
+
+// eslint-disable-next-line import/no-default-export
+export default {
+  component: NodeRelationalGraph,
+  title: 'node/renderer/NodeRelationalGraphEvents',
+} as Meta
+
+const Template: ComponentStory<typeof NodeRelationalGraph> = (props) => {
+  const [node] = useProvidedWrappedNode()
+  const elements = useCytoscapeElements(node)
+  const options = useCytoscapeOptions(elements)
+
+  const { cy } = useCytoscapeInstance(true)
+
+  useEffect(() => {
+    const listener = (event: EventObject) => {
+      const element = event.target[0]
+      console.log(element.data().address)
+    }
+    if (cy) {
+      cy.on('select', listener)
+    }
+
+    return () => {
+      cy?.off('select', listener)
+    }
+  }, [cy])
+  return <NodeRelationalGraph options={options} {...props} />
+}
+
+const defaultProps = {
+  height: 'calc(100vh - 20px)',
+  width: '100%',
+}
+
+const Default = Template.bind({})
+Default.args = { ...defaultProps }
+Default.decorators = [MemoryNodeDecorator]
+
+export { Default }

package/src/contexts/CytoscapeInstance/Context.ts

@@ -0,0 +1,5 @@
+import { createContextEx } from '@xyo-network/react-shared'
+
+import { CytoscapeInstanceState } from './State'
+
+export const CytoscapeInstanceContext = createContextEx<CytoscapeInstanceState>()

package/src/contexts/CytoscapeInstance/Provider.tsx

@@ -0,0 +1,18 @@
+import { WithChildren } from '@xylabs/react-shared'
+import { Core } from 'cytoscape'
+import { useEffect, useState } from 'react'
+
+import { CytoscapeInstanceContext } from './Context'
+
+export interface CytoscapeInstanceProviderProps extends WithChildren {
+  defaultInstance?: Core
+}
+
+export const CytoscapeInstanceProvider: React.FC<CytoscapeInstanceProviderProps> = ({ children, defaultInstance }) => {
+  const [cy, setCy] = useState<Core | undefined>(defaultInstance)
+  useEffect(() => {
+    setCy(defaultInstance)
+  }, [defaultInstance])
+
+  return <CytoscapeInstanceContext.Provider value={{ cy, provided: true, setCy }}>{children}</CytoscapeInstanceContext.Provider>
+}

package/src/contexts/CytoscapeInstance/State.ts

@@ -0,0 +1,8 @@
+import { ContextExState } from '@xyo-network/react-shared'
+import { Core } from 'cytoscape'
+import { Dispatch, SetStateAction } from 'react'
+
+export interface CytoscapeInstanceState extends ContextExState {
+  cy?: Core
+  setCy?: Dispatch<SetStateAction<Core | undefined>>
+}

package/src/contexts/CytoscapeInstance/index.ts

@@ -0,0 +1,4 @@
+export * from './Context'
+export * from './Provider'
+export * from './State'
+export * from './use'

package/src/contexts/CytoscapeInstance/use.ts

@@ -0,0 +1,5 @@
+import { useContextEx } from '@xyo-network/react-shared'
+
+import { CytoscapeInstanceContext } from './Context'
+
+export const useCytoscapeInstance = (required = false) => useContextEx(CytoscapeInstanceContext, 'CytoscapeInstance', required)

package/src/contexts/index.ts

@@ -0,0 +1 @@
+export * from './CytoscapeInstance'

package/src/hooks/cytoscape/useCytoscapeElements.ts

@@ -39,7 +39,6 @@ export const useCytoscapeElements = (targetNode?: NodeWrapper) => {
           console.error('Error Getting initial description', e)
         }
       }
-      return () => console.log('unmounted')
     },
     [targetNode],
   )