@xyo-network/react-node-renderer 2.71.5 → 2.71.7

package/package.json

@@ -22,14 +22,15 @@
     "@xyo-network/module-events": "^2.94.9",
     "@xyo-network/module-model": "^2.94.9",
     "@xyo-network/node-model": "^2.94.9",
-    "@xyo-network/react-archivist": "~2.71.5",
-    "@xyo-network/react-module": "~2.71.5",
-    "@xyo-network/react-node": "~2.71.5",
-    "@xyo-network/react-shared": "~2.71.5",
+    "@xyo-network/react-archivist": "~2.71.7",
+    "@xyo-network/react-module": "~2.71.7",
+    "@xyo-network/react-node": "~2.71.7",
+    "@xyo-network/react-shared": "~2.71.7",
     "@xyo-network/sentinel-model": "^2.94.9",
     "@xyo-network/witness-model": "^2.94.9",
     "cytoscape": "^3.28.1",
     "cytoscape-cola": "^2.5.1",
+    "cytoscape-dagre": "^2.5.0",
     "cytoscape-fcose": "^2.2.0"
   },
   "peerDependencies": {
@@ -50,8 +51,8 @@
     "@xyo-network/http-bridge": "^2.94.9",
     "@xyo-network/id-plugin": "^2.91.4",
     "@xyo-network/node-memory": "^2.94.9",
-    "@xyo-network/react-storybook": "~2.71.5",
-    "@xyo-network/react-wallet": "~2.71.5",
+    "@xyo-network/react-storybook": "~2.71.7",
+    "@xyo-network/react-wallet": "~2.71.7",
     "@xyo-network/sentinel": "^2.94.9",
     "typescript": "^5.4.3"
   },
@@ -106,6 +107,6 @@
   },
   "sideEffects": false,
   "types": "dist/browser/index.d.ts",
-  "version": "2.71.5",
+  "version": "2.71.7",
   "type": "module"
 }

package/src/components/lib/RelationalGraphProps.ts

@@ -5,7 +5,8 @@ import { PropsWithChildren, ReactNode } from 'react'
 export interface NodeRelationalGraphProps extends PropsWithChildren<FlexBoxProps> {
   actions?: ReactNode
   detail?: ReactNode
+  directed?: boolean | object
   options?: CytoscapeOptions
   showDetails?: boolean
-  spread?: boolean
+  spread?: boolean | object
 }

package/src/components/module/graph/GraphFlexBox.tsx

@@ -12,8 +12,10 @@ import { ModuleGraphNodeHover } from './node'
 import { StyledModuleHoverPopper } from './Popper'
 
 export interface ModuleGraphFlexBoxProps extends FlexBoxProps {
+  directed?: boolean | object
   disableModuleDetails?: boolean
   rootModule?: ModuleInstance | null
+  spread?: boolean | object
 }
 
 export const ModuleGraphFlexBox: React.FC<ModuleGraphFlexBoxProps> = ({ rootModule, disableModuleDetails, ...props }) => {

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

@@ -2,14 +2,15 @@ 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 fcoseLayout from 'cytoscape-fcose'
+import dagre from 'cytoscape-dagre'
+import fcose from 'cytoscape-fcose'
 import { forwardRef, useEffect, useState } from 'react'
 
 import { useCytoscapeInstance } from '../../../contexts'
 import { NodeRelationalGraphProps } from '../../lib'
 
 export const NodeRelationalGraphFlexBox = forwardRef<HTMLDivElement, NodeRelationalGraphProps>(
-  ({ actions, children, showDetails, detail, spread, options, ...props }, ref) => {
+  ({ actions, children, directed, showDetails, detail, spread, options, ...props }, ref) => {
     const theme = useTheme()
     const [cy, setCy] = useState<Core>()
     const { setCy: setCyContext } = useCytoscapeInstance()
@@ -17,27 +18,36 @@ export const NodeRelationalGraphFlexBox = forwardRef<HTMLDivElement, NodeRelatio
 
     const handleReset = () => {
       cy?.reset()
+      if (directed) {
+        cy?.layout({ name: 'dagre', ...(typeof directed === 'object' ? directed : {}) }).run()
+      }
       if (spread) {
-        cy?.layout({ name: 'fcose' }).run()
+        cy?.layout({ name: 'fcose', ...(typeof spread === 'object' ? spread : {}) }).run()
       }
       cy?.fit(undefined, 20)
     }
 
     useEffect(() => {
       if (sharedRef) {
+        if (directed) {
+          cytoscape.use(dagre)
+        }
         if (spread) {
-          cytoscape.use(fcoseLayout)
+          cytoscape.use(fcose)
         }
         const newCy = cytoscape({
           container: sharedRef.current,
           ...options,
         })
+        if (directed) {
+          newCy.layout({ name: 'dagre' }).run()
+        }
         if (spread) {
           newCy.layout({ name: 'fcose' }).run()
         }
         setCy(newCy)
       }
-    }, [options, sharedRef, spread])
+    }, [options, sharedRef, spread, directed])
 
     useEffect(() => {
       setCyContext?.(cy)

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

@@ -0,0 +1,173 @@
+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/directed/NodeRelationalGraph',
+} as Meta
+
+const Template: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => <NodeRelationalGraphFlexBox directed {...props} />
+
+const TemplateDescribe: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => {
+  const [node] = useProvidedNode()
+  const elements = useCytoscapeElements(node)
+  const options = useCytoscapeOptions(elements)
+  return <NodeRelationalGraphFlexBox directed options={options} {...props} />
+}
+
+const TemplateCustomAddress: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => {
+  const [node] = useNodeFromNode('ChildNode')
+  const elements = useCytoscapeElements(node)
+  const options = useCytoscapeOptions(elements)
+  return <NodeRelationalGraphFlexBox directed options={options} {...props} />
+}
+
+const TemplateProvidedNodeRenderer: StoryFn<typeof ProvidedNodeRenderer> = (props) => <ProvidedNodeRenderer directed {...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 directed 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 }

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

@@ -0,0 +1,173 @@
+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 { WithExtensions } from '../../cytoscape-extensions'
+import { NodeRelationalGraphFlexBox } from './Graph'
+import { ProvidedNodeRenderer } from './ProvidedNodeRenderer'
+import { options } from './story'
+
+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/directed/spread/NodeRelationalGraph',
+} as Meta
+
+const Template: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => <NodeRelationalGraphFlexBox directed spread {...props} />
+
+const TemplateDescribe: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => {
+  const [node] = useProvidedNode()
+  const elements = useCytoscapeElements(node)
+  const options = useCytoscapeOptions(elements)
+  return <NodeRelationalGraphFlexBox directed spread options={options} {...props} />
+}
+
+const TemplateCustomAddress: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => {
+  const [node] = useNodeFromNode('ChildNode')
+  const elements = useCytoscapeElements(node)
+  const options = useCytoscapeOptions(elements)
+  return <NodeRelationalGraphFlexBox directed spread options={options} {...props} />
+}
+
+const TemplateProvidedNodeRenderer: StoryFn<typeof ProvidedNodeRenderer> = (props) => <ProvidedNodeRenderer directed spread {...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 directed 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 }

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

@@ -77,10 +77,10 @@ const MemoryNodeDecorator: Decorator = (Story, args) => {
 // eslint-disable-next-line import/no-default-export
 export default {
   component: NodeRelationalGraphFlexBox,
-  title: 'node/renderer/NodeSpreadRelationalGraph',
+  title: 'node/renderer/spread/NodeRelationalGraph',
 } as Meta
 
-const Template: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => <NodeRelationalGraphFlexBox {...props} />
+const Template: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => <NodeRelationalGraphFlexBox spread {...props} />
 
 const TemplateDescribe: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => {
   const [node] = useProvidedNode()

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

@@ -8,8 +8,9 @@ import { NodeRelationalGraphFlexBox } from './Graph'
 
 export interface ProvidedNodeRendererProps extends NodeRelationalGraphProps {
   account?: AccountInstance
+  directed?: boolean | object
   node?: NodeInstance
-  spread?: boolean
+  spread?: boolean | object
 }
 
 export const ProvidedNodeRenderer: React.FC<ProvidedNodeRendererProps> = ({ node, ...props }) => {

package/src/types/global.d.ts

@@ -7,3 +7,8 @@ declare module 'cytoscape-fcose' {
   const ext: cytoscape.Ext
   export = ext
 }
+
+declare module 'cytoscape-dagre' {
+  const ext: cytoscape.Ext
+  export = ext
+}