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

package/package.json

@@ -10,6 +10,7 @@
     "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
   },
   "dependencies": {
+    "@xylabs/exists": "^3.0.25",
     "@xylabs/react-async-effect": "^3.1.6",
     "@xylabs/react-flexbox": "^3.1.6",
     "@xylabs/react-identicon": "^3.1.6",
@@ -22,10 +23,10 @@
     "@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.7",
-    "@xyo-network/react-module": "~2.71.7",
-    "@xyo-network/react-node": "~2.71.7",
-    "@xyo-network/react-shared": "~2.71.7",
+    "@xyo-network/react-archivist": "~2.71.9",
+    "@xyo-network/react-module": "~2.71.9",
+    "@xyo-network/react-node": "~2.71.9",
+    "@xyo-network/react-shared": "~2.71.9",
     "@xyo-network/sentinel-model": "^2.94.9",
     "@xyo-network/witness-model": "^2.94.9",
     "cytoscape": "^3.28.1",
@@ -51,8 +52,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.7",
-    "@xyo-network/react-wallet": "~2.71.7",
+    "@xyo-network/react-storybook": "~2.71.9",
+    "@xyo-network/react-wallet": "~2.71.9",
     "@xyo-network/sentinel": "^2.94.9",
     "typescript": "^5.4.3"
   },
@@ -107,6 +108,6 @@
   },
   "sideEffects": false,
   "types": "dist/browser/index.d.ts",
-  "version": "2.71.7",
+  "version": "2.71.9",
   "type": "module"
 }

package/src/Cytoscape/CytoscapeElements.ts

@@ -6,6 +6,7 @@ import { parseModuleType } from './lib'
 
 interface ModuleInfo {
   children: ModuleInfo[]
+  depth: number
   module: ModuleInstance
 }
 
@@ -24,18 +25,13 @@ export const CytoscapeElements = {
 
   async buildElements(module: ModuleInstance): Promise<ElementDefinition[]> {
     const info = await CytoscapeElements.recurseNodes(module)
-    const newElements: ElementDefinition[] = await this.buildElementsFromInfo(info, undefined, undefined, ['activeNode'])
+    const newElements: ElementDefinition[] = await this.buildElementsFromInfo(info, undefined, ['activeNode'])
 
     return newElements
   },
 
-  async buildElementsFromInfo(
-    info: ModuleInfo,
-    root?: ElementDefinition,
-    properties: { [key: string]: unknown } = {},
-    classes: string[] = [],
-  ): Promise<ElementDefinition[]> {
-    const newNode = CytoscapeElements.buildNode(info.module, properties, classes)
+  async buildElementsFromInfo(info: ModuleInfo, root?: ElementDefinition, classes: string[] = []): Promise<ElementDefinition[]> {
+    const newNode = CytoscapeElements.buildNode(info.module, { childCount: info.children.length, depth: info.depth }, classes)
     const newEdge = root ? CytoscapeElements.buildEdge(root, newNode) : undefined
     const newElements: ElementDefinition[] = [newNode]
     if (newEdge) {
@@ -73,8 +69,8 @@ export const CytoscapeElements = {
     return name
   },
 
-  async recurseNodes(root: ModuleInstance, maxDepth = 10): Promise<ModuleInfo> {
-    const info: ModuleInfo = { children: [], module: root }
+  async recurseNodes(root: ModuleInstance, maxDepth = 10, depth = 1): Promise<ModuleInfo> {
+    const info: ModuleInfo = { children: [], depth, module: root }
 
     if (maxDepth > 0) {
       const children = await root.resolve('*', { direction: 'down', maxDepth: 1 })
@@ -82,7 +78,7 @@ export const CytoscapeElements = {
         await Promise.all(
           children.map(async (child) => {
             if (child.address !== root.address) {
-              return await this.recurseNodes(child, maxDepth - 1)
+              return await this.recurseNodes(child, maxDepth - 1, depth + 1)
               // don't re add the root module that was passed in
             }
           }),

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

@@ -40,11 +40,12 @@ export const NodeRelationalGraphFlexBox = forwardRef<HTMLDivElement, NodeRelatio
           ...options,
         })
         if (directed) {
-          newCy.layout({ name: 'dagre' }).run()
+          newCy.layout({ name: 'dagre', ...(typeof directed === 'object' ? directed : {}) }).run()
         }
         if (spread) {
-          newCy.layout({ name: 'fcose' }).run()
+          newCy.layout({ name: 'fcose', ...(typeof spread === 'object' ? spread : {}) }).run()
         }
+        newCy.fit(undefined, 20)
         setCy(newCy)
       }
     }, [options, sharedRef, spread, directed])