@xyo-network/react-node-renderer 2.47.39 → 2.47.41

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

@@ -1,63 +1,39 @@
 import { useAsyncEffect } from '@xylabs/react-shared';
-import { NodeWrapper } from '@xyo-network/node';
-import { useModule, useProvidedWrappedNode } from '@xyo-network/react-node';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 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
  */
-export const useCytoscapeElements = (nodeAddressOrName, onModuleError) => {
-    const [node] = useProvidedWrappedNode();
-    const [module, moduleError] = useModule(nodeAddressOrName);
+export const useCytoscapeElements = (targetNode) => {
     const [elements, setElements] = useState([]);
-    const [refresh, setRefresh] = useState(1);
-    useEffect(() => {
-        if (moduleError)
-            onModuleError?.(moduleError);
-    }, [moduleError, onModuleError]);
     useAsyncEffect(
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    async (mounted) => {
-        if ((node || module) && refresh) {
-            const wrappedNode = nodeAddressOrName ? NodeWrapper.wrap(module) : node;
-            if (!wrappedNode) {
-                return;
-            }
+    async () => {
+        if (targetNode) {
             try {
-                const [description, newRootNode] = await CytoscapeElements.buildRootNode(wrappedNode);
-                if (mounted())
-                    setElements(() => [newRootNode]);
+                const [description, newRootNode] = await CytoscapeElements.buildRootNode(targetNode);
+                const newElements = [newRootNode];
                 const children = description.children;
                 await Promise.allSettled((children ?? [])?.map(async (address) => {
                     try {
-                        const newNode = await CytoscapeElements.buildChild(wrappedNode, address);
-                        if (mounted())
-                            setElements((previous) => [...previous, newNode]);
+                        const newNode = await CytoscapeElements.buildChild(targetNode, address);
+                        newElements.push(newNode);
                         const newEdge = CytoscapeElements.buildEdge(newRootNode, newNode);
-                        if (mounted())
-                            setElements((previous) => [...previous, newEdge]);
+                        newElements.push(newEdge);
                     }
                     catch (e) {
                         console.error('Error parsing children', e);
                     }
                 }));
+                setElements(newElements);
             }
             catch (e) {
                 console.error('Error Getting initial description', e);
             }
         }
-    }, [module, node, nodeAddressOrName, refresh]);
-    useEffect(() => {
-        let listener;
-        if (node) {
-            listener = node.onAny((eventName) => {
-                if (eventName === 'moduleAttached')
-                    setRefresh((previous) => previous + 1);
-            });
-        }
-        return () => listener?.();
-    }, [node]);
+        return () => console.log('unmounted');
+    }, [targetNode]);
     return elements;
 };
 //# sourceMappingURL=useCytoscapeElements.js.map

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

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

package/dist/esm/index.js

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

package/dist/esm/index.js.map

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

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

@@ -1,7 +1,8 @@
+import { NodeWrapper } from '@xyo-network/node';
 import { ElementDefinition } from 'cytoscape';
 /**
  * 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: (nodeAddressOrName?: string, onModuleError?: ((error: Error) => void) | undefined) => ElementDefinition[];
+export declare const useCytoscapeElements: (targetNode?: NodeWrapper) => ElementDefinition[];
 //# sourceMappingURL=useCytoscapeElements.d.ts.map

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":"AAIA,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAK7C;;;GAGG;AACH,eAAO,MAAM,oBAAoB,uBAAwB,MAAM,2BAA0B,KAAK,KAAK,IAAI,qCAuDtG,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,wBAoC5D,CAAA"}

package/dist/types/index.d.ts

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

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

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

package/package.json

@@ -14,8 +14,7 @@
     "@xylabs/react-shared": "^2.16.14",
     "@xyo-network/module": "^2.53.36",
     "@xyo-network/node": "^2.53.36",
-    "@xyo-network/react-node": "^2.47.39",
-    "@xyo-network/react-shared": "^2.47.39",
+    "@xyo-network/react-shared": "^2.47.41",
     "cytoscape": "^3.23.0"
   },
   "peerDependencies": {
@@ -39,9 +38,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.39",
-    "@xyo-network/react-storybook": "^2.47.39",
-    "@xyo-network/react-wallet": "^2.47.39",
+    "@xyo-network/react-node": "^2.47.41",
+    "@xyo-network/react-storybook": "^2.47.41",
+    "@xyo-network/react-wallet": "^2.47.41",
     "require-from-string": "^2.0.2",
     "typescript": "^4.9.5"
   },
@@ -88,5 +87,5 @@
   },
   "sideEffects": false,
   "types": "dist/types/index.d.ts",
-  "version": "2.47.39"
+  "version": "2.47.41"
 }

package/src/components/RelationalGraph.stories.tsx

@@ -4,11 +4,11 @@ import { HDWallet } from '@xyo-network/account'
 import { ArchivistConfigSchema, MemoryArchivist } from '@xyo-network/archivist'
 import { HttpBridge, HttpBridgeConfigSchema } from '@xyo-network/bridge'
 import { IdWitness, IdWitnessConfigSchema } from '@xyo-network/id-plugin'
-import { MemoryNode, NodeConfigSchema } from '@xyo-network/node'
-import { NodeProvider } from '@xyo-network/react-node'
+import { MemoryNode, NodeConfigSchema, NodeWrapper } from '@xyo-network/node'
+import { NodeProvider, useModule, useProvidedWrappedNode } from '@xyo-network/react-node'
 import { DefaultSeedPhrase } from '@xyo-network/react-storybook'
 import { WalletProvider } from '@xyo-network/react-wallet'
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 
 import { useCytoscapeElements, useCytoscapeOptions } from '../hooks'
 import { NodeRelationalGraph } from './RelationalGraph'
@@ -69,13 +69,16 @@ export default {
 const Template: ComponentStory<typeof NodeRelationalGraph> = (props) => <NodeRelationalGraph {...props} />
 
 const TemplateDescribe: ComponentStory<typeof NodeRelationalGraph> = (props) => {
-  const elements = useCytoscapeElements()
+  const [node] = useProvidedWrappedNode()
+  const elements = useCytoscapeElements(node)
   const options = useCytoscapeOptions(elements)
   return <NodeRelationalGraph options={options} {...props} />
 }
 
 const TemplateCustomAddress: ComponentStory<typeof NodeRelationalGraph> = (props) => {
-  const elements = useCytoscapeElements('ChildNode')
+  const [node] = useModule('ChildNode')
+  const wrappedNode = useMemo(() => (node ? NodeWrapper.wrap(node) : undefined), [node])
+  const elements = useCytoscapeElements(wrappedNode)
   const options = useCytoscapeOptions(elements)
   return <NodeRelationalGraph options={options} {...props} />
 }

package/src/hooks/cytoscape/useCytoscapeElements.ts

@@ -1,9 +1,7 @@
 import { useAsyncEffect } from '@xylabs/react-shared'
-import { EventUnsubscribeFunction } from '@xyo-network/module'
 import { NodeWrapper } from '@xyo-network/node'
-import { useModule, useProvidedWrappedNode } from '@xyo-network/react-node'
 import { ElementDefinition } from 'cytoscape'
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 
 import { CytoscapeElements } from '../../Cytoscape'
 
@@ -11,59 +9,40 @@ 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
  */
-export const useCytoscapeElements = (nodeAddressOrName?: string, onModuleError?: (error: Error) => void) => {
-  const [node] = useProvidedWrappedNode()
-  const [module, moduleError] = useModule(nodeAddressOrName)
+export const useCytoscapeElements = (targetNode?: NodeWrapper) => {
   const [elements, setElements] = useState<ElementDefinition[]>([])
-  const [refresh, setRefresh] = useState(1)
-
-  useEffect(() => {
-    if (moduleError) onModuleError?.(moduleError)
-  }, [moduleError, onModuleError])
 
   useAsyncEffect(
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    async (mounted) => {
-      if ((node || module) && refresh) {
-        const wrappedNode = nodeAddressOrName ? NodeWrapper.wrap(module) : node
-        if (!wrappedNode) {
-          return
-        }
+    async () => {
+      if (targetNode) {
         try {
-          const [description, newRootNode] = await CytoscapeElements.buildRootNode(wrappedNode)
-          if (mounted()) setElements(() => [newRootNode])
+          const [description, newRootNode] = await CytoscapeElements.buildRootNode(targetNode)
+          const newElements = [newRootNode]
 
           const children = description.children
           await Promise.allSettled(
             (children ?? [])?.map(async (address) => {
               try {
-                const newNode = await CytoscapeElements.buildChild(wrappedNode, address)
-                if (mounted()) setElements((previous) => [...previous, newNode])
+                const newNode = await CytoscapeElements.buildChild(targetNode, address)
+                newElements.push(newNode)
 
                 const newEdge = CytoscapeElements.buildEdge(newRootNode, newNode)
-                if (mounted()) setElements((previous) => [...previous, newEdge])
+                newElements.push(newEdge)
               } catch (e) {
                 console.error('Error parsing children', e)
               }
             }),
           )
+          setElements(newElements)
         } catch (e) {
           console.error('Error Getting initial description', e)
         }
       }
+      return () => console.log('unmounted')
     },
-    [module, node, nodeAddressOrName, refresh],
+    [targetNode],
   )
 
-  useEffect(() => {
-    let listener: EventUnsubscribeFunction
-    if (node) {
-      listener = node.onAny((eventName) => {
-        if (eventName === 'moduleAttached') setRefresh((previous) => previous + 1)
-      })
-    }
-    return () => listener?.()
-  }, [node])
-
   return elements
 }

package/src/index.ts

@@ -1,2 +1,4 @@
 export * from './components'
+export * from './Cytoscape'
 export * from './hooks'
+export * from './lib'