@xyo-network/react-node-renderer 2.72.1 → 2.72.3

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

@@ -1,13 +1,11 @@
 import { Button, ButtonGroup, useTheme } from '@mui/material'
 import { FlexCol, FlexGrowRow, FlexRow } from '@xylabs/react-flexbox'
-import { useShareForwardedRef } from '@xyo-network/react-shared'
 import cytoscape, { Core } from 'cytoscape'
 import cola from 'cytoscape-cola'
 import coseBilkentLayout from 'cytoscape-cose-bilkent'
 import dagre from 'cytoscape-dagre'
 import eulerLayout from 'cytoscape-euler'
-import fcose from 'cytoscape-fcose'
-import { forwardRef, useEffect, useState } from 'react'
+import { forwardRef, useEffect, useRef, useState } from 'react'
 
 import { useCytoscapeInstance } from '../../../contexts'
 import { NodeRelationalGraphProps } from '../../lib'
@@ -30,10 +28,6 @@ const loadLayout = (layout = 'cola') => {
       cytoscape.use(coseBilkentLayout)
       break
     }
-    case 'fcose': {
-      cytoscape.use(fcose)
-      break
-    }
     case 'cola': {
       cytoscape.use(cola)
       break
@@ -46,7 +40,7 @@ export const NodeRelationalGraphFlexBox = forwardRef<HTMLDivElement, NodeRelatio
     const theme = useTheme()
     const [cy, setCy] = useState<Core>()
     const { setCy: setCyContext } = useCytoscapeInstance()
-    const sharedRef = useShareForwardedRef(ref)
+    const cytoscapeRef = useRef<HTMLDivElement>()
 
     const handleReset = () => {
       cy?.reset()
@@ -55,10 +49,11 @@ export const NodeRelationalGraphFlexBox = forwardRef<HTMLDivElement, NodeRelatio
 
     useEffect(() => {
       let newCy: Core | undefined
-      if (sharedRef) {
+      const container = cytoscapeRef.current
+      if (container) {
         loadLayout(layout)
         newCy = cytoscape({
-          container: sharedRef.current,
+          container,
           ...options,
         })
         applyLayout(newCy, layout ?? 'euler', layoutOptions)
@@ -68,14 +63,14 @@ export const NodeRelationalGraphFlexBox = forwardRef<HTMLDivElement, NodeRelatio
         newCy?.destroy()
         setCy(undefined)
       }
-    }, [options, sharedRef, layoutOptions, layout])
+    }, [options, cytoscapeRef, layoutOptions, layout])
 
     useEffect(() => {
-      setCyContext?.(cy)
+      setCyContext?.(cy ? new WeakRef(cy) : undefined)
     }, [cy, setCyContext])
 
     return (
-      <FlexCol id="relational-graph-wrapper" {...props}>
+      <FlexCol id="relational-graph-wrapper" ref={ref} {...props}>
         <FlexRow justifyContent="start" width="100%">
           {actions === null ?
             null
@@ -105,7 +100,7 @@ export const NodeRelationalGraphFlexBox = forwardRef<HTMLDivElement, NodeRelatio
             border={showDetails ? `1px solid ${theme.palette.divider}` : undefined}
           >
             {/* Cytoscape Element */}
-            <FlexCol alignItems="stretch" position="absolute" width="100%" height="100%" ref={sharedRef} />
+            <FlexCol alignItems="stretch" position="absolute" width="100%" height="100%" ref={cytoscapeRef} />
             {children}
           </FlexCol>
         </FlexGrowRow>

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

@@ -61,12 +61,13 @@ const Template: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => {
       const element = event.target[0]
       console.log(element.data().address)
     }
-    if (cy) {
-      cy.on('select', listener)
+    const cyInstance = cy?.deref()
+    if (cyInstance) {
+      cyInstance.on('select', listener)
     }
 
     return () => {
-      cy?.off('select', listener)
+      cyInstance?.off('select', listener)
     }
   }, [cy])
   return <NodeRelationalGraphFlexBox options={options} {...props} />

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

@@ -8,7 +8,7 @@ import { NodeRelationalGraphFlexBox } from './Graph'
 
 export interface ProvidedNodeRendererProps extends NodeRelationalGraphProps {
   account?: AccountInstance
-  layout?: 'dagre' | 'euler' | 'fcose' | 'cose-bilkent' | 'cola'
+  layout?: 'dagre' | 'euler' | 'cose-bilkent' | 'cola'
   layoutOptions?: object
   node?: NodeInstance
 }

package/src/contexts/CytoscapeInstance/Provider.tsx

@@ -5,11 +5,11 @@ import { useEffect, useState } from 'react'
 import { CytoscapeInstanceContext } from './Context'
 
 export interface CytoscapeInstanceProviderProps extends WithChildren {
-  defaultInstance?: Core
+  defaultInstance?: WeakRef<Core>
 }
 
 export const CytoscapeInstanceProvider: React.FC<CytoscapeInstanceProviderProps> = ({ children, defaultInstance }) => {
-  const [cy, setCy] = useState<Core | undefined>(defaultInstance)
+  const [cy, setCy] = useState<WeakRef<Core> | undefined>(defaultInstance)
   useEffect(() => {
     setCy(defaultInstance)
   }, [defaultInstance])

package/src/contexts/CytoscapeInstance/State.ts

@@ -3,6 +3,6 @@ import { Core } from 'cytoscape'
 import { Dispatch, SetStateAction } from 'react'
 
 export interface CytoscapeInstanceState extends ContextExState {
-  cy?: Core
-  setCy?: Dispatch<SetStateAction<Core | undefined>>
+  cy?: WeakRef<Core>
+  setCy?: Dispatch<SetStateAction<WeakRef<Core> | undefined>>
 }

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

@@ -21,9 +21,10 @@ export const useHoveredNode = (renderedElements?: NodeCollection): [NodeSingular
   }, [nodeListener, renderedElements])
 
   useEffect(() => {
-    cy?.ready(() => {
+    const cyInstance = cy?.deref()
+    cyInstance?.ready(() => {
       // eslint-disable-next-line unicorn/no-array-for-each
-      cy.nodes().forEach(nodeListener)
+      cyInstance.nodes().forEach(nodeListener)
     })
   }, [cy, nodeListener])
 

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

@@ -9,10 +9,11 @@ export const useRenderNewElements = (newElements: ElementDefinition[] = [], hide
   const [renderedElements, setRenderedElements] = useState<CollectionReturnValue>()
 
   useEffect(() => {
+    const cyInstance = cy?.deref()
     if (newElements.length > 1) {
-      const renderedElements = cy?.add(newElements)
+      const renderedElements = cyInstance?.add(newElements)
       setRenderedElements(renderedElements)
-      cy?.layout(ColaLayout).run()
+      cyInstance?.layout(ColaLayout).run()
     }
   }, [cy, hideLabels, newElements])
 

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

@@ -8,13 +8,15 @@ export const useSelectedElement = () => {
   const { cy } = useCytoscapeInstance(true)
 
   const updateStyles = (element: NodeSingular) => {
-    const nodes = cy?.nodes()
+    const cyInstance = cy?.deref()
+    const nodes = cyInstance?.nodes()
     nodes?.toggleClass('activeNode', false)
     element.toggleClass('activeNode', true)
   }
 
   const toggleSelectedElement = (address?: string) => {
-    const selectedNode = cy?.nodes(`[id="${address}"]`)?.[0]
+    const cyInstance = cy?.deref()
+    const selectedNode = cyInstance?.nodes(`[id="${address}"]`)?.[0]
     if (selectedNode) {
       setSelectedElement(selectedNode)
       updateStyles(selectedNode)

package/src/hooks/cytoscape/useModuleDetails.tsx

@@ -18,18 +18,20 @@ export const useModuleDetails = (rootModule?: ModuleInstance | null, onFoundModu
 
   useEffect(() => {
     const resizeObserver = new ResizeObserver(() => {
+      const cyInstance = cy?.deref()
       if (moduleAddress === null) {
         // cytoscape tries to center prematurely without it :(
-        setTimeout(() => cy?.center(), 100)
+        setTimeout(() => cyInstance?.center(), 100)
       } else if (foundModule && cy) {
-        const node = cy.nodes(`[id="${moduleAddress}"]`)?.[0]
+        const node = cyInstance?.nodes(`[id="${moduleAddress}"]`)?.[0]
         // cy.pan(newPan)
         // cytoscape tries to center prematurely without it :(
-        setTimeout(() => cy.center(node), 100)
+        setTimeout(() => cyInstance?.center(node), 100)
       }
     })
 
-    const container = cy?.container()
+    const cyInstance = cy?.deref()
+    const container = cyInstance?.container()
     if (container) {
       resizeObserver.observe(container)
     }
@@ -46,10 +48,11 @@ export const useModuleDetails = (rootModule?: ModuleInstance | null, onFoundModu
   }, [cy, moduleAddress, foundModule, onFoundModule])
 
   const onModuleDetails = (address?: string | null) => {
-    const moduleNode = cy?.nodes(`[id="${address}"]`)
-    const rootModuleNode = cy?.nodes(`[id="${rootModule?.address}"]`)
-    const foundModuleNode = cy?.nodes(`[id="${foundModule?.address}"]`)
-    const notModuleNode = cy?.nodes(`[id != "${address}"]`)
+    const cyInstance = cy?.deref()
+    const moduleNode = cyInstance?.nodes(`[id="${address}"]`)
+    const rootModuleNode = cyInstance?.nodes(`[id="${rootModule?.address}"]`)
+    const foundModuleNode = cyInstance?.nodes(`[id="${foundModule?.address}"]`)
+    const notModuleNode = cyInstance?.nodes(`[id != "${address}"]`)
 
     if (address) {
       // address was passed so we set the node to active styles

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

@@ -1,173 +0,0 @@
-import { Button, ButtonGroup } from '@mui/material'
-import { Decorator, Meta, StoryFn } from '@storybook/react'
-import { useAsyncEffect } from '@xylabs/react-async-effect'
-import { MemoryArchivist, MemoryArchivistConfigSchema } from '@xyo-network/archivist'
-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 { DefaultSeedPhrase } from '@xyo-network/react-storybook'
-import { useWallet, WalletProvider } from '@xyo-network/react-wallet'
-import { MemorySentinel, SentinelConfigSchema } from '@xyo-network/sentinel'
-import { useState } from 'react'
-
-import { CytoscapeInstanceProvider } from '../../../contexts'
-import { useCytoscapeElements, useCytoscapeOptions } from '../../../hooks'
-import { NodeRelationalGraphFlexBox } from './Graph'
-import { ProvidedNodeRenderer } from './ProvidedNodeRenderer'
-import { options } from './story'
-import { WithExtensions } from '../../cytoscape-extensions'
-
-const nodeUrl = 'http://localhost:8080/node'
-
-const MemoryNodeDecorator: Decorator = (Story, args) => {
-  const [node, setNode] = useState<MemoryNode>()
-
-  useAsyncEffect(
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    async () => {
-      try {
-        const node = await MemoryNode.create({ config: { name: 'GlobalNode', schema: NodeConfigSchema } })
-        const node1 = await MemoryNode.create({ config: { name: 'ChildNode', schema: NodeConfigSchema } })
-        const bridge = await HttpBridge.create({
-          config: { name: 'Bridge', nodeUrl, schema: HttpBridgeConfigSchema, security: { allowAnonymous: true } },
-        })
-        await node.register(bridge)
-        await node.attach(bridge.address, true)
-
-        const archivist = await MemoryArchivist.create({ config: { name: 'RootStorageArchivist', schema: MemoryArchivistConfigSchema } })
-        await node.register(archivist)
-        await node.attach(archivist.address, true)
-
-        const sentinel = await MemorySentinel.create({
-          config: { name: 'MemorySentinel', schema: SentinelConfigSchema, synchronous: true, tasks: [] },
-        })
-        await node.register(sentinel)
-        await node.attach(sentinel.address, true)
-
-        const archivist1 = await MemoryArchivist.create({ config: { name: 'RootStorageArchivist1', schema: MemoryArchivistConfigSchema } })
-        await node1.register(archivist1)
-        await node1.attach(archivist1.address, true)
-
-        await node.register(node1)
-        await node.attach(node1.address, true)
-
-        setNode(node)
-      } catch (e) {
-        console.error('Error Creating MemoryNode', e)
-      }
-    },
-    [],
-  )
-
-  const [wallet] = useWallet({ mnemonic: DefaultSeedPhrase })
-
-  return (
-    <WalletProvider rootWallet={wallet}>
-      <NodeProvider node={node}>
-        <CytoscapeInstanceProvider>
-          <Story {...args} />
-        </CytoscapeInstanceProvider>
-      </NodeProvider>
-    </WalletProvider>
-  )
-}
-
-// eslint-disable-next-line import/no-default-export
-export default {
-  component: NodeRelationalGraphFlexBox,
-  title: 'node/renderer/fcose/NodeRelationalGraph',
-} as Meta
-
-const Template: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => <NodeRelationalGraphFlexBox layout="fcose" {...props} />
-
-const TemplateDescribe: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => {
-  const [node] = useProvidedNode()
-  const elements = useCytoscapeElements(node)
-  const options = useCytoscapeOptions(elements)
-  return <NodeRelationalGraphFlexBox layout="fcose" options={options} {...props} />
-}
-
-const TemplateCustomAddress: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => {
-  const [node] = useNodeFromNode('ChildNode')
-  const elements = useCytoscapeElements(node)
-  const options = useCytoscapeOptions(elements)
-  return <NodeRelationalGraphFlexBox layout="fcose" options={options} {...props} />
-}
-
-const TemplateProvidedNodeRenderer: StoryFn<typeof ProvidedNodeRenderer> = (props) => <ProvidedNodeRenderer layout="fcose" {...props} />
-
-const TemplateAttachDetach: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => {
-  const [node] = useNodeFromNode('ChildNode')
-  const elements = useCytoscapeElements(node)
-  const options = useCytoscapeOptions(elements)
-  const [idWitness, setIdWitness] = useState<IdWitness>()
-
-  useAsyncEffect(
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    async () => {
-      const witnessModule = await IdWitness.create({ config: { name: 'IdWitness', salt: 'test', schema: IdWitnessConfigSchema } })
-      setIdWitness(witnessModule)
-    },
-    [],
-  )
-
-  const handleAddWitness = async () => {
-    if (node && idWitness) {
-      const memoryNode = node as MemoryNode
-      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)) {
-        await memoryNode.unregister(idWitness)
-      }
-    }
-  }
-
-  return (
-    <>
-      <ButtonGroup>
-        <Button onClick={handleAddWitness}>Add Witness</Button>
-        <Button onClick={handleRemoveWitness}>Remove Witness</Button>
-      </ButtonGroup>
-      <WithExtensions>
-        <NodeRelationalGraphFlexBox layout="fcose" options={options} {...props} />
-      </WithExtensions>
-    </>
-  )
-}
-
-const defaultProps = {
-  height: 'calc(100vh - 20px)',
-  width: '100%',
-}
-
-const Default = Template.bind({})
-Default.args = {}
-
-const WithData = Template.bind({})
-WithData.args = { options, ...defaultProps }
-
-const WithDescribe = TemplateDescribe.bind({})
-WithDescribe.args = { ...defaultProps }
-WithDescribe.decorators = [MemoryNodeDecorator]
-
-const WithCustomAddress = TemplateCustomAddress.bind({})
-WithCustomAddress.args = { ...defaultProps }
-WithCustomAddress.decorators = [MemoryNodeDecorator]
-
-const WithAttachDetach = TemplateAttachDetach.bind({})
-WithAttachDetach.args = { ...defaultProps }
-WithAttachDetach.decorators = [MemoryNodeDecorator]
-
-const WithProvidedNodeRenderer = TemplateProvidedNodeRenderer.bind({})
-WithProvidedNodeRenderer.args = { ...defaultProps }
-WithProvidedNodeRenderer.decorators = [MemoryNodeDecorator]
-
-export { Default, WithAttachDetach, WithCustomAddress, WithData, WithDescribe, WithProvidedNodeRenderer }