@xyo-network/react-node-renderer 2.75.1 → 2.75.3

package/src/components/relational/graph/GraphEuler.stories.tsx

@@ -6,7 +6,7 @@ import { HttpBridge, HttpBridgeConfigSchema } from '@xyo-network/http-bridge'
 import { IdWitness, IdWitnessConfigSchema } from '@xyo-network/id-plugin'
 import { MemoryNode } from '@xyo-network/node-memory'
 import { NodeConfigSchema } from '@xyo-network/node-model'
-import { NodeProvider, useNodeFromNode, useProvidedNode } from '@xyo-network/react-node'
+import { NodeProvider, useNodeFromNode, useProvidedNode, useWeakNodeFromNode, useWeakProvidedNode } from '@xyo-network/react-node'
 import { DefaultSeedPhrase } from '@xyo-network/react-storybook'
 import { useWallet, WalletProvider } from '@xyo-network/react-wallet'
 import { MemorySentinel, SentinelConfigSchema } from '@xyo-network/sentinel'
@@ -83,14 +83,14 @@ export default {
 const Template: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => <NodeRelationalGraphFlexBox layout="euler" {...props} />
 
 const TemplateDescribe: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => {
-  const [node] = useProvidedNode()
+  const [node] = useWeakProvidedNode()
   const elements = useCytoscapeElements(node)
   const options = useCytoscapeOptions(elements)
   return <NodeRelationalGraphFlexBox layout="euler" options={options} {...props} />
 }
 
 const TemplateCustomAddress: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => {
-  const [node] = useNodeFromNode('ChildNode')
+  const [node] = useWeakNodeFromNode('ChildNode')
   const elements = useCytoscapeElements(node)
   const options = useCytoscapeOptions(elements)
   return <NodeRelationalGraphFlexBox layout="euler" options={options} {...props} />
@@ -99,7 +99,7 @@ const TemplateCustomAddress: StoryFn<typeof NodeRelationalGraphFlexBox> = (props
 const TemplateProvidedNodeRenderer: StoryFn<typeof ProvidedNodeRenderer> = (props) => <ProvidedNodeRenderer layout="euler" {...props} />
 
 const TemplateAttachDetach: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => {
-  const [node] = useNodeFromNode('ChildNode')
+  const [node] = useWeakNodeFromNode('ChildNode')
   const elements = useCytoscapeElements(node)
   const options = useCytoscapeOptions(elements)
   const [idWitness, setIdWitness] = useState<IdWitness>()
@@ -115,16 +115,16 @@ const TemplateAttachDetach: StoryFn<typeof NodeRelationalGraphFlexBox> = (props)
 
   const handleAddWitness = async () => {
     if (node && idWitness) {
-      const memoryNode = node as MemoryNode
-      await memoryNode.register(idWitness)
-      await memoryNode.attach(idWitness.address, true)
+      const memoryNode = node.deref() as MemoryNode | undefined
+      await memoryNode?.register(idWitness)
+      await memoryNode?.attach(idWitness.address, true)
     }
   }
 
   const handleRemoveWitness = async () => {
     if (node && idWitness) {
-      const memoryNode = node as MemoryNode
-      if (memoryNode.registered().includes(idWitness.address)) {
+      const memoryNode = node.deref() as MemoryNode | undefined
+      if (memoryNode?.registered().includes(idWitness.address)) {
         await memoryNode.unregister(idWitness)
       }
     }

package/src/components/relational/graph/GraphEvents.stories.tsx

@@ -3,7 +3,7 @@ import { useAsyncEffect } from '@xylabs/react-async-effect'
 import { ArchivistConfigSchema, MemoryArchivist } from '@xyo-network/archivist'
 import { MemoryNode } from '@xyo-network/node-memory'
 import { NodeConfigSchema } from '@xyo-network/node-model'
-import { NodeProvider, useProvidedNode } from '@xyo-network/react-node'
+import { NodeProvider, useProvidedNode, useWeakProvidedNode } from '@xyo-network/react-node'
 import { DefaultSeedPhrase } from '@xyo-network/react-storybook'
 import { useWallet, WalletProvider } from '@xyo-network/react-wallet'
 import { EventObject } from 'cytoscape'
@@ -50,7 +50,7 @@ export default {
 } as Meta
 
 const Template: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => {
-  const [node] = useProvidedNode()
+  const [node] = useWeakProvidedNode()
   const elements = useCytoscapeElements(node)
   const options = useCytoscapeOptions(elements)
 

package/src/components/relational/graph/ProvidedNodeRenderer.tsx

@@ -1,6 +1,6 @@
 import { AccountInstance } from '@xyo-network/account-model'
 import { NodeInstance } from '@xyo-network/node-model'
-import { useProvidedNode } from '@xyo-network/react-node'
+import { useWeakProvidedNode } from '@xyo-network/react-node'
 
 import { useCytoscapeElements, useCytoscapeOptions } from '../../../hooks'
 import { NodeRelationalGraphProps } from '../../lib'
@@ -10,11 +10,11 @@ export interface ProvidedNodeRendererProps extends NodeRelationalGraphProps {
   account?: AccountInstance
   layout?: 'dagre' | 'euler' | 'cose-bilkent' | 'cola'
   layoutOptions?: object
-  node?: NodeInstance
+  node?: WeakRef<NodeInstance>
 }
 
 export const ProvidedNodeRenderer: React.FC<ProvidedNodeRendererProps> = ({ node, ...props }) => {
-  const [providedNode] = useProvidedNode()
+  const [providedNode] = useWeakProvidedNode()
   const elements = useCytoscapeElements(node ?? providedNode)
   const options = useCytoscapeOptions(elements)
 

package/src/hooks/cytoscape/elements/useCytoscapeElements.ts

@@ -7,14 +7,15 @@ import { useEffect, useState } from 'react'
 
 import { CytoscapeElements } from '../../../Cytoscape'
 
-export const useCytoscapeElements = (module?: ModuleInstance | null) => {
+export const useCytoscapeElements = (module?: WeakRef<ModuleInstance> | null) => {
   const [elements, setElements] = useState<ElementDefinition[]>([])
 
   useAsyncEffect(
     // eslint-disable-next-line react-hooks/exhaustive-deps
     async () => {
-      if (module) {
-        const newElements = (await CytoscapeElements.buildElements(module)) ?? []
+      const moduleInstance = module?.deref()
+      if (moduleInstance) {
+        const newElements = (await CytoscapeElements.buildElements(moduleInstance)) ?? []
         setElements(newElements)
       }
     },

package/src/hooks/cytoscape/elements/useNewElements.tsx

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

package/src/hooks/cytoscape/useModuleDetails.tsx

@@ -4,14 +4,15 @@ import { useEffect, useState } from 'react'
 
 import { useCytoscapeInstance } from '../../contexts'
 
-export const useModuleDetails = (rootModule?: ModuleInstance | null, onFoundModule?: () => void) => {
+export const useModuleDetails = (rootModule?: WeakRef<ModuleInstance> | null, onFoundModule?: () => void) => {
   const { cy } = useCytoscapeInstance()
   const [moduleAddress, setModuleAddress] = useState<string | null>()
 
   const [foundModule] = usePromise(async () => {
     if (moduleAddress === null) return null
-    if (moduleAddress && rootModule) {
-      const foundModule = await rootModule.resolve(moduleAddress)
+    const rootModuleInstance = rootModule?.deref()
+    if (moduleAddress && rootModuleInstance) {
+      const foundModule = await rootModuleInstance.resolve(moduleAddress)
       return foundModule ?? null
     }
   }, [moduleAddress, rootModule])
@@ -41,7 +42,7 @@ export const useModuleDetails = (rootModule?: ModuleInstance | null, onFoundModu
     return () => {
       if (container) resizeObserver.unobserve(container)
     }
-  }, [cy, moduleAddress, foundModule, rootModule?.address])
+  }, [cy, moduleAddress, foundModule, rootModule])
 
   useEffect(() => {
     if (foundModule) {
@@ -51,7 +52,7 @@ export const useModuleDetails = (rootModule?: ModuleInstance | null, onFoundModu
 
   const onModuleDetails = (address?: string | null) => {
     const moduleNode = cy?.deref()?.nodes(`[id="${address}"]`)
-    const rootModuleNode = cy?.deref()?.nodes(`[id="${rootModule?.address}"]`)
+    const rootModuleNode = cy?.deref()?.nodes(`[id="${rootModule?.deref()?.address}"]`)
     const foundModuleNode = cy?.deref()?.nodes(`[id="${foundModule?.address}"]`)
     const notModuleNode = cy?.deref()?.nodes(`[id != "${address}"]`)
 

package/src/hooks/cytoscape/useRelationalGraphOptions.tsx

@@ -6,7 +6,7 @@ import { useCytoscapeElements } from './elements'
 import { useCytoscapeOptions } from './useCytoscapeOptions'
 import { useCytoscapeStyle } from './useCytoscapeStyle'
 
-export const useRelationalGraphOptions = (module?: ModuleInstance) => {
+export const useRelationalGraphOptions = (module?: WeakRef<ModuleInstance>) => {
   const [hideLabels, setHideLabels] = useState(true)
 
   const handleToggleLabels = () => {