@xyo-network/react-node-renderer 2.72.4 → 2.72.5

package/package.json

@@ -23,10 +23,10 @@
     "@xyo-network/module-events": "^2.94.40",
     "@xyo-network/module-model": "^2.94.40",
     "@xyo-network/node-model": "^2.94.40",
-    "@xyo-network/react-archivist": "~2.72.4",
-    "@xyo-network/react-module": "~2.72.4",
-    "@xyo-network/react-node": "~2.72.4",
-    "@xyo-network/react-shared": "~2.72.4",
+    "@xyo-network/react-archivist": "~2.72.5",
+    "@xyo-network/react-module": "~2.72.5",
+    "@xyo-network/react-node": "~2.72.5",
+    "@xyo-network/react-shared": "~2.72.5",
     "@xyo-network/sentinel-model": "^2.94.40",
     "@xyo-network/witness-model": "^2.94.40",
     "cytoscape": "^3.28.1",
@@ -55,8 +55,8 @@
     "@xyo-network/http-bridge": "^2.94.40",
     "@xyo-network/id-plugin": "^2.91.11",
     "@xyo-network/node-memory": "^2.94.40",
-    "@xyo-network/react-storybook": "~2.72.4",
-    "@xyo-network/react-wallet": "~2.72.4",
+    "@xyo-network/react-storybook": "~2.72.5",
+    "@xyo-network/react-wallet": "~2.72.5",
     "@xyo-network/sentinel": "^2.94.40",
     "typescript": "^5.4.5"
   },
@@ -111,6 +111,6 @@
   },
   "sideEffects": false,
   "types": "dist/browser/index.d.ts",
-  "version": "2.72.4",
+  "version": "2.72.5",
   "type": "module"
 }

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

@@ -11,6 +11,7 @@ import { MemorySentinel, SentinelConfigSchema } from '@xyo-network/sentinel'
 import { useState } from 'react'
 
 import { ModuleGraphFlexBoxWithProvider } from './GraphFlexBox'
+import { Button, ButtonGroup } from '@mui/material'
 
 const nodeUrl = 'http://localhost:8080/node'
 
@@ -75,7 +76,15 @@ const Template: StoryFn<typeof ModuleGraphFlexBoxWithProvider> = (props) => <Mod
 
 const TemplateWithProvidedModule: StoryFn<typeof ModuleGraphFlexBoxWithProvider> = (props) => {
   const [node] = useProvidedNode()
-  return <ModuleGraphFlexBoxWithProvider rootModule={node} {...props} />
+  const [layout, setLayout] = useState<'dagre' | 'euler' | 'cose-bilkent' | 'cola'>('euler')
+  return <div>
+          <ButtonGroup>
+            <Button onClick={() => setLayout('dagre')}>Dagre</Button>
+            <Button onClick={() => setLayout('euler')}>Euler</Button>
+            <Button onClick={() => setLayout('cose-bilkent')}>CoseBilkent</Button>
+            <Button onClick={() => setLayout('cola')}>Cola</Button>
+          </ButtonGroup><ModuleGraphFlexBoxWithProvider rootModule={node} {...props} layout={layout} />
+        </div>
 }
 
 const defaultProps = {

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

@@ -92,16 +92,29 @@ const TemplateCustomAddress: StoryFn<typeof NodeRelationalGraphFlexBox> = (props
   const [node] = useNodeFromNode('ChildNode')
   const elements = useCytoscapeElements(node)
   const options = useCytoscapeOptions(elements)
+  
   return <NodeRelationalGraphFlexBox options={options} {...props} />
 }
 
-const TemplateProvidedNodeRenderer: StoryFn<typeof ProvidedNodeRenderer> = (props) => <ProvidedNodeRenderer {...props} />
+const TemplateProvidedNodeRenderer: StoryFn<typeof ProvidedNodeRenderer> = (props) => {
+  const [layout, setLayout] = useState<'dagre' | 'euler' | 'cose-bilkent' | 'cola'>('euler')
+  return <div>
+    <ButtonGroup>
+      <Button onClick={() => setLayout('dagre')}>Dagre</Button>
+      <Button onClick={() => setLayout('euler')}>Euler</Button>
+      <Button onClick={() => setLayout('cose-bilkent')}>CoseBilkent</Button>
+      <Button onClick={() => setLayout('cola')}>Cola</Button>
+    </ButtonGroup>
+    <ProvidedNodeRenderer {...props} layout={layout} />
+  </div>
+}
 
 const TemplateAttachDetach: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => {
   const [node] = useNodeFromNode('ChildNode')
   const elements = useCytoscapeElements(node)
   const options = useCytoscapeOptions(elements)
   const [idWitness, setIdWitness] = useState<IdWitness>()
+  const [layout, setLayout] = useState<'dagre' | 'euler' | 'cose-bilkent' | 'cola'>('euler')
 
   useAsyncEffect(
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -134,8 +147,12 @@ const TemplateAttachDetach: StoryFn<typeof NodeRelationalGraphFlexBox> = (props)
       <ButtonGroup>
         <Button onClick={handleAddWitness}>Add Witness</Button>
         <Button onClick={handleRemoveWitness}>Remove Witness</Button>
+        <Button onClick={() => setLayout('dagre')}>Dagre</Button>
+        <Button onClick={() => setLayout('euler')}>Euler</Button>
+        <Button onClick={() => setLayout('cose-bilkent')}>CoseBilkent</Button>
+        <Button onClick={() => setLayout('cola')}>Cola</Button>
       </ButtonGroup>
-      <NodeRelationalGraphFlexBox options={options} {...props} />
+      <NodeRelationalGraphFlexBox layout={layout} options={options} {...props} />
     </>
   )
 }

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

@@ -51,19 +51,24 @@ export const NodeRelationalGraphFlexBox = forwardRef<HTMLDivElement, NodeRelatio
       let newCy: Core | undefined
       const container = cytoscapeRef.current
       if (container) {
-        loadLayout(layout)
         newCy = cytoscape({
           container,
           ...options,
         })
-        applyLayout(newCy, layout ?? 'euler', layoutOptions)
         setCy(newCy)
       }
       return () => {
         newCy?.destroy()
         setCy(undefined)
       }
-    }, [options, cytoscapeRef, layoutOptions, layout])
+    }, [options, cytoscapeRef, layoutOptions])
+
+    useEffect(() => {
+      if (cy) {
+        loadLayout(layout)
+        applyLayout(cy, layout ?? 'euler', layoutOptions)
+      }
+    }, [cy, layoutOptions, layout])
 
     useEffect(() => {
       setCyContext?.(cy ? new WeakRef(cy) : undefined)