@xyo-network/react-node-renderer 2.48.1 → 2.48.4

package/src/Cytoscape/CytoscapeStyles.ts

@@ -1,6 +1,6 @@
 import { Stylesheet } from 'cytoscape'
 
-import { CyNodeIcons } from './CytoscapeIcons'
+import { CyNodeModuleTypes } from './lib'
 
 export const NodeIdStyles = (color?: string): Stylesheet => ({
   selector: 'node[id]',
@@ -12,13 +12,13 @@ export const NodeIdStyles = (color?: string): Stylesheet => ({
   },
 })
 
-export const NodeStyled = (icons: Record<CyNodeIcons, string>, bgColor?: string): Stylesheet => ({
+export const NodeStyled = (icons: Record<CyNodeModuleTypes, 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': (elem) => icons[elem.data('type') as CyNodeModuleTypes],
     'background-image-smoothing': 'yes',
     'background-width': '75%',
     label: 'data(id)',

package/src/Cytoscape/index.ts

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

package/src/Cytoscape/lib/CyNodeModuleTypes.ts

@@ -0,0 +1 @@
+export type CyNodeModuleTypes = 'archivist' | 'bridge' | 'diviner' | 'module' | 'node' | 'witness' | 'sentinel'

package/src/Cytoscape/lib/encodeSvg.ts

@@ -0,0 +1,19 @@
+import { ReactElement } from 'react'
+// eslint-disable-next-line import/no-internal-modules
+import { renderToStaticMarkup } from 'react-dom/server'
+
+const dataUri = 'data:image/svg+xml,'
+
+export const encodeSvg = (reactElement: ReactElement, color?: string) => {
+  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)}`
+}

package/src/Cytoscape/lib/iconMap.ts

@@ -0,0 +1,11 @@
+import { CyNodeModuleTypes } from './CyNodeModuleTypes'
+
+export const generateIconMap: () => Record<CyNodeModuleTypes, string> = () => ({
+  archivist: '',
+  bridge: '',
+  diviner: '',
+  module: '',
+  node: '',
+  sentinel: '',
+  witness: '',
+})

package/src/Cytoscape/lib/index.ts

@@ -0,0 +1,4 @@
+export * from './CyNodeModuleTypes'
+export * from './encodeSvg'
+export * from './iconMap'
+export * from './parseModuleType'

package/src/Cytoscape/lib/parseModuleType.ts

@@ -0,0 +1,36 @@
+import { CyNodeModuleTypes } from './CyNodeModuleTypes'
+
+export const parseModuleType = (queries?: string[]): CyNodeModuleTypes => {
+  let type: CyNodeModuleTypes = 'module'
+  if (queries) {
+    for (let i = 0; i < queries.length; i++) {
+      if (queries[i].includes('archivist')) {
+        type = 'archivist'
+        break
+      }
+      if (queries[i].includes('bridge')) {
+        type = 'bridge'
+        break
+      }
+      if (queries[i].includes('diviner')) {
+        type = 'diviner'
+        break
+      }
+      if (queries[i].includes('node')) {
+        type = 'node'
+        break
+      }
+      if (queries[i].includes('sentinel')) {
+        type = 'sentinel'
+        break
+      }
+      if (queries[i].includes('witness')) {
+        type = 'witness'
+        break
+      }
+      type = 'module'
+    }
+    return type
+  }
+  return 'module'
+}

package/src/components/RelationalGraph.stories.tsx

@@ -1,6 +1,6 @@
 import { Button, ButtonGroup } from '@mui/material'
-import { ComponentStory, DecoratorFn, Meta } from '@storybook/react'
-import { useAsyncEffect } from '@xylabs/react-shared'
+import { Decorator, Meta, StoryFn } from '@storybook/react'
+import { useAsyncEffect } from '@xylabs/react-async-effect'
 import { HDWallet } from '@xyo-network/account'
 import { ArchivistConfigSchema, MemoryArchivist } from '@xyo-network/archivist'
 import { HttpBridge, HttpBridgeConfigSchema } from '@xyo-network/bridge'
@@ -19,7 +19,7 @@ import { options } from './story'
 const nodeUrl = 'http://localhost:8080/node'
 const randomWallet = HDWallet.fromMnemonic(DefaultSeedPhrase)
 
-export const MemoryNodeDecorator: DecoratorFn = (Story, args) => {
+export const MemoryNodeDecorator: Decorator = (Story, args) => {
   const [node, setNode] = useState<MemoryNode>()
 
   useAsyncEffect(
@@ -72,16 +72,16 @@ export default {
   title: 'node/renderer/NodeRelationalGraph',
 } as Meta
 
-const Template: ComponentStory<typeof NodeRelationalGraph> = (props) => <NodeRelationalGraph {...props} />
+const Template: StoryFn<typeof NodeRelationalGraph> = (props) => <NodeRelationalGraph {...props} />
 
-const TemplateDescribe: ComponentStory<typeof NodeRelationalGraph> = (props) => {
+const TemplateDescribe: StoryFn<typeof NodeRelationalGraph> = (props) => {
   const [node] = useProvidedWrappedNode()
   const elements = useCytoscapeElements(node)
   const options = useCytoscapeOptions(elements)
   return <NodeRelationalGraph options={options} {...props} />
 }
 
-const TemplateCustomAddress: ComponentStory<typeof NodeRelationalGraph> = (props) => {
+const TemplateCustomAddress: StoryFn<typeof NodeRelationalGraph> = (props) => {
   const [node] = useModule('ChildNode')
   const wrappedNode = useMemo(() => (node ? NodeWrapper.wrap(node) : undefined), [node])
   const elements = useCytoscapeElements(wrappedNode)
@@ -89,7 +89,7 @@ const TemplateCustomAddress: ComponentStory<typeof NodeRelationalGraph> = (props
   return <NodeRelationalGraph options={options} {...props} />
 }
 
-const TemplateAttachDetach: ComponentStory<typeof NodeRelationalGraph> = (props) => {
+const TemplateAttachDetach: StoryFn<typeof NodeRelationalGraph> = (props) => {
   const [node] = useModule('ChildNode')
   const wrappedNode = useMemo(() => (node ? NodeWrapper.wrap(node) : undefined), [node])
   const elements = useCytoscapeElements(wrappedNode)
@@ -116,7 +116,9 @@ const TemplateAttachDetach: ComponentStory<typeof NodeRelationalGraph> = (props)
   const handleRemoveWitness = async () => {
     if (wrappedNode && idWitness) {
       const memoryNode = wrappedNode as NodeWrapper<MemoryNode>
-      await memoryNode.module.unregister(idWitness)
+      if (await (await memoryNode.registered()).includes(idWitness.address)) {
+        await memoryNode.module.unregister(idWitness)
+      }
     }
   }
 

package/src/components/RelationalGraphEvents.stories.tsx

@@ -1,5 +1,5 @@
-import { ComponentStory, DecoratorFn, Meta } from '@storybook/react'
-import { useAsyncEffect } from '@xylabs/react-shared'
+import { Decorator, Meta, StoryFn } from '@storybook/react'
+import { useAsyncEffect } from '@xylabs/react-async-effect'
 import { HDWallet } from '@xyo-network/account'
 import { ArchivistConfigSchema, MemoryArchivist } from '@xyo-network/archivist'
 import { MemoryNode, NodeConfigSchema } from '@xyo-network/node'
@@ -15,7 +15,7 @@ import { NodeRelationalGraph } from './RelationalGraph'
 
 const randomWallet = HDWallet.fromMnemonic(DefaultSeedPhrase)
 
-const MemoryNodeDecorator: DecoratorFn = (Story, args) => {
+const MemoryNodeDecorator: Decorator = (Story, args) => {
   const [node, setNode] = useState<MemoryNode>()
 
   useAsyncEffect(
@@ -49,7 +49,7 @@ export default {
   title: 'node/renderer/NodeRelationalGraphEvents',
 } as Meta
 
-const Template: ComponentStory<typeof NodeRelationalGraph> = (props) => {
+const Template: StoryFn<typeof NodeRelationalGraph> = (props) => {
   const [node] = useProvidedWrappedNode()
   const elements = useCytoscapeElements(node)
   const options = useCytoscapeOptions(elements)

package/src/contexts/CytoscapeInstance/Provider.tsx

@@ -1,4 +1,4 @@
-import { WithChildren } from '@xylabs/react-shared'
+import type { WithChildren } from '@xylabs/react-shared'
 import { Core } from 'cytoscape'
 import { useEffect, useState } from 'react'
 

package/src/hooks/cytoscape/useCytoscapeElements.ts

@@ -1,8 +1,8 @@
-import { useAsyncEffect } from '@xylabs/react-shared'
+import { useAsyncEffect } from '@xylabs/react-async-effect'
 import { EventUnsubscribeFunction } from '@xyo-network/module'
 import { NodeWrapper } from '@xyo-network/node'
 import { ElementDefinition } from 'cytoscape'
-import { useCallback, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import { CytoscapeElements } from '../../Cytoscape'
 
@@ -13,39 +13,15 @@ import { CytoscapeElements } from '../../Cytoscape'
 export const useCytoscapeElements = (targetNode?: NodeWrapper) => {
   const [elements, setElements] = useState<ElementDefinition[]>([])
 
-  const buildElements = useCallback(async (wrapper: NodeWrapper) => {
-    try {
-      const [description, newRootNode] = await CytoscapeElements.buildRootNode(wrapper)
-      const newElements = [newRootNode]
-
-      const children = description.children
-      await Promise.allSettled(
-        (children ?? [])?.map(async (address) => {
-          try {
-            const newNode = await CytoscapeElements.buildChild(wrapper, address)
-            newElements.push(newNode)
-
-            const newEdge = CytoscapeElements.buildEdge(newRootNode, newNode)
-            newElements.push(newEdge)
-          } catch (e) {
-            console.error('Error parsing children', e)
-          }
-        }),
-      )
-      setElements(newElements)
-    } catch (e) {
-      console.error('Error Getting initial description', e)
-    }
-  }, [])
-
   useAsyncEffect(
     // eslint-disable-next-line react-hooks/exhaustive-deps
     async () => {
       if (targetNode) {
-        await buildElements(targetNode)
+        const newElements = (await CytoscapeElements.buildElements(targetNode)) ?? []
+        setElements(newElements)
       }
     },
-    [buildElements, targetNode],
+    [targetNode],
   )
 
   useEffect(() => {
@@ -54,10 +30,12 @@ export const useCytoscapeElements = (targetNode?: NodeWrapper) => {
 
     if (targetNode) {
       attachedListener = targetNode.on('moduleAttached', async () => {
-        await buildElements(targetNode)
+        const newElements = (await CytoscapeElements.buildElements(targetNode)) ?? []
+        setElements(newElements)
       })
       detachedListener = targetNode.on('moduleDetached', async () => {
-        await buildElements(targetNode)
+        const newElements = (await CytoscapeElements.buildElements(targetNode)) ?? []
+        setElements(newElements)
       })
     }
 
@@ -65,7 +43,7 @@ export const useCytoscapeElements = (targetNode?: NodeWrapper) => {
       attachedListener?.()
       detachedListener?.()
     }
-  }, [buildElements, targetNode])
+  }, [targetNode])
 
   return elements
 }

package/src/hooks/cytoscape/useIcons.tsx

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

package/src/index.ts

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

package/dist/cjs/lib/index.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./utils"), exports);
-//# sourceMappingURL=index.js.map

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/lib/utils.ts"],"names":[],"mappings":";;;AACA,sDAAsD;AACtD,6CAAuD;AAIvD,MAAM,OAAO,GAAG,qBAAqB,CAAA;AAE9B,MAAM,SAAS,GAAG,CAAC,YAA0B,EAAE,KAAc,EAAE,EAAE;IACtE,MAAM,SAAS,GAAG,IAAA,6BAAoB,EAAC,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,aAAL,KAAK,cAAL,KAAK,GAAI,OAAO,CAAA;KACzC;IAED,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC,kBAAkB,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,CAAA;AACvE,CAAC,CAAA;AAZY,QAAA,SAAS,aAYrB;AAEM,MAAM,eAAe,GAAG,CAAC,OAAkB,EAAe,EAAE;IACjE,IAAI,IAAI,GAAgB,QAAQ,CAAA;IAChC,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,OAAO,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;gBACnC,IAAI,GAAG,UAAU,CAAA;gBACjB,MAAK;aACN;YACD,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE;gBAClC,IAAI,GAAG,SAAS,CAAA;gBAChB,MAAK;aACN;YACD,IAAI,GAAG,QAAQ,CAAA;SAChB;QACD,OAAO,IAAI,CAAA;KACZ;IACD,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAA;AA7BY,QAAA,eAAe,mBA6B3B"}

package/dist/esm/lib/index.js

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

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/lib/utils.ts"],"names":[],"mappings":"AACA,sDAAsD;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAA;AAIvD,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;IACjE,IAAI,IAAI,GAAgB,QAAQ,CAAA;IAChC,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,OAAO,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;gBACnC,IAAI,GAAG,UAAU,CAAA;gBACjB,MAAK;aACN;YACD,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE;gBAClC,IAAI,GAAG,SAAS,CAAA;gBAChB,MAAK;aACN;YACD,IAAI,GAAG,QAAQ,CAAA;SAChB;QACD,OAAO,IAAI,CAAA;KACZ;IACD,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAA"}

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

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

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

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

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

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

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

package/src/lib/index.ts

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

package/src/lib/utils.ts

@@ -1,52 +0,0 @@
-import { ReactElement } from 'react'
-// eslint-disable-next-line import/no-internal-modules
-import { renderToStaticMarkup } from 'react-dom/server'
-
-import { CyNodeIcons } from '../Cytoscape'
-
-const dataUri = 'data:image/svg+xml,'
-
-export const encodeSvg = (reactElement: ReactElement, color?: string) => {
-  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?: string[]): CyNodeIcons => {
-  let type: CyNodeIcons = 'module'
-  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
-      }
-      if (queries[i].includes('sentinel')) {
-        type = 'sentinel'
-        break
-      }
-      if (queries[i].includes('witness')) {
-        type = 'witness'
-        break
-      }
-      type = 'module'
-    }
-    return type
-  }
-  return 'module'
-}