display connected nodes / bridges in cytoscape

packages/modules/packages/archivist/src/components/Card/Card.stories.tsx

@@ -1,11 +1,11 @@
 import { Button } from '@mui/material'
 import { Meta, StoryFn } from '@storybook/react'
-import { useAsyncEffect } from '@xylabs/react-async-effect'
 import { FlexCol } from '@xylabs/react-flexbox'
+import { usePromise } from '@xylabs/react-promise'
 import { Account } from '@xyo-network/account'
 import { ArchivistInsertQuerySchema, ArchivistInstance, MemoryArchivist, MemoryArchivistConfigSchema } from '@xyo-network/archivist'
 import { QueryBoundWitnessBuilder } from '@xyo-network/boundwitness-builder'
-import { useState } from 'react'
+import { MemoryNode } from '@xyo-network/node-memory'
 
 import { ArchivistCard } from './Card'
 
@@ -23,7 +23,7 @@ const insertPayload = async (archivist?: ArchivistInstance) => {
   if (archivist) {
     const payload = { schema: 'network.xyo.payload', timestamp: Date.now() }
     const insertQuery = { schema: ArchivistInsertQuerySchema }
-    const account = await Account.randomSync()
+    const account = Account.randomSync()
     const builder = new QueryBoundWitnessBuilder({ inlinePayloads: true }).payloads([insertQuery, payload]).witness(account).query(insertQuery)
     const [insertQueryBoundWitness, payloads] = await builder.build()
     await archivist.insert([insertQueryBoundWitness, ...payloads])
@@ -35,28 +35,30 @@ const clearArchivist = async (archivist?: ArchivistInstance) => {
 }
 
 const Template: StoryFn<typeof ArchivistCard> = () => {
-  const [module, setModule] = useState<ArchivistInstance>()
+  const [node] = usePromise(async () => {
+    return await MemoryNode.create()
+  }, [])
 
-  useAsyncEffect(
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    async (mounted) => {
-      if (!module) {
-        const newParentModule = await MemoryArchivist.create()
-        const newModule = await MemoryArchivist.create({
-          config: {
-            name: 'MemoryArchivist',
-            parents: { commit: [newParentModule.address], read: [newParentModule.address], write: [newParentModule.address] },
-            schema: MemoryArchivistConfigSchema,
-          },
-        })
-        await insertPayload(newModule)
-        if (mounted()) {
-          setModule(newModule)
-        }
-      }
-    },
-    [module],
-  )
+  const [module] = usePromise(async () => {
+    if (node) {
+      const newParentModule = await MemoryArchivist.create()
+      await node?.register(newParentModule)
+      await node?.attach(newParentModule.address)
+
+      const newModule = await MemoryArchivist.create({
+        config: {
+          name: 'MemoryArchivist',
+          parents: { commit: [newParentModule.address], read: [newParentModule.address], write: [newParentModule.address] },
+          schema: MemoryArchivistConfigSchema,
+        },
+      })
+      await node?.register(newModule)
+      await node?.attach(newModule.address)
+
+      await insertPayload(newModule)
+      return newModule
+    }
+  }, [node])
 
   return (
     <FlexCol gap={2}>

packages/modules/packages/module/src/components/Card/Module/CardHeader.tsx

@@ -1,6 +1,7 @@
 import { CardHeader, CardHeaderProps } from '@mui/material'
 import { Module } from '@xyo-network/module'
 import { findNetworkComponent } from '@xyo-network/react-shared'
+import { Fragment } from 'react'
 
 import { ModuleRenderProps } from '../../../ModuleRenderProps'
 
@@ -19,7 +20,7 @@ export const ModuleCardHeader: React.FC<ModuleRenderProps & CardHeaderProps> = (
             {module
               ? ['sentinel', 'bridge', 'archivist', 'diviner', 'node', 'witness'].map((moduleType) => {
                   const Icon = getModuleIcons(moduleType, module)
-                  return Icon ? <Icon fontSize={'large'} color="primary" /> : null
+                  return <Fragment key={moduleType}>{Icon ? <Icon fontSize={'large'} color="primary" /> : null}</Fragment>
                 })
               : null}
           </>

packages/sdk/packages/node-renderer/src/hooks/cytoscape/elements/useNewElements.tsx

@@ -1,10 +1,15 @@
 import { useModuleFromNode } from '@xyo-network/react-node'
 import { NodeSingular } from 'cytoscape'
+import { useMemo } from 'react'
 
 import { useCytoscapeElements } from './useCytoscapeElements'
 
 export const useNewElements = (selectedElement?: NodeSingular) => {
-  const { address: selectedAddress } = selectedElement?.data() ?? {}
+  const selectedAddress = useMemo(() => {
+    const { address: selectedAddress } = selectedElement?.data() ?? {}
+    return selectedAddress
+  }, [selectedElement])
+
   const [module] = useModuleFromNode(selectedAddress)
   const newElements = useCytoscapeElements(module)