@xyo-network/react-node-renderer 2.64.0-rc.7 → 2.64.1

package/package.json

@@ -10,20 +10,22 @@
     "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
   },
   "dependencies": {
-    "@xylabs/react-async-effect": "^3.1.0-rc.6",
-    "@xylabs/react-flexbox": "^3.1.0-rc.6",
-    "@xylabs/react-shared": "^3.1.0-rc.6",
-    "@xyo-network/account-model": "^2.74.5",
-    "@xyo-network/archivist-model": "^2.74.5",
-    "@xyo-network/diviner-model": "^2.74.5",
-    "@xyo-network/manifest-model": "^2.74.5",
-    "@xyo-network/module": "^2.74.5",
-    "@xyo-network/node-model": "^2.74.5",
-    "@xyo-network/react-archivist": "~2.64.0-rc.7",
-    "@xyo-network/react-module": "~2.64.0-rc.7",
-    "@xyo-network/react-node": "~2.64.0-rc.7",
-    "@xyo-network/react-shared": "~2.64.0-rc.7",
-    "cytoscape": "^3.26.0"
+    "@xylabs/react-async-effect": "^3.0.6",
+    "@xylabs/react-flexbox": "^3.0.6",
+    "@xylabs/react-shared": "^3.0.6",
+    "@xyo-network/account-model": "^2.75.4",
+    "@xyo-network/archivist-model": "^2.75.4",
+    "@xyo-network/diviner-model": "^2.75.4",
+    "@xyo-network/manifest-model": "^2.75.4",
+    "@xyo-network/module": "^2.75.4",
+    "@xyo-network/node-model": "^2.75.4",
+    "@xyo-network/react-archivist": "~2.64.1",
+    "@xyo-network/react-module": "~2.64.1",
+    "@xyo-network/react-node": "~2.64.1",
+    "@xyo-network/react-shared": "~2.64.1",
+    "cytoscape": "^3.26.0",
+    "cytoscape-cola": "^2.5.1",
+    "cytoscape-popper": "^2.0.0"
   },
   "peerDependencies": {
     "@mui/icons-material": "^5",
@@ -35,20 +37,21 @@
     "react-router-dom": "^6"
   },
   "devDependencies": {
-    "@storybook/react": "^7.4.4",
+    "@storybook/react": "^7.4.5",
     "@types/cytoscape": "^3.19.11",
-    "@types/react-dom": "^18.2.7",
-    "@xylabs/ts-scripts-yarn3": "^3.0.55",
-    "@xylabs/tsconfig-react": "^3.0.55",
-    "@xyo-network/archivist": "^2.74.5",
-    "@xyo-network/http-bridge": "^2.74.5",
-    "@xyo-network/id-plugin": "^2.74.5",
-    "@xyo-network/module": "^2.74.5",
-    "@xyo-network/node-memory": "^2.74.5",
-    "@xyo-network/react-node": "~2.64.0-rc.7",
-    "@xyo-network/react-storybook": "~2.64.0-rc.7",
-    "@xyo-network/react-wallet": "~2.64.0-rc.7",
-    "@xyo-network/sentinel": "^2.74.5",
+    "@types/cytoscape-popper": "2.0.1",
+    "@types/react-dom": "^18.2.8",
+    "@xylabs/ts-scripts-yarn3": "^3.0.79",
+    "@xylabs/tsconfig-react": "^3.0.79",
+    "@xyo-network/archivist": "^2.75.4",
+    "@xyo-network/http-bridge": "^2.75.4",
+    "@xyo-network/id-plugin": "^2.75.4",
+    "@xyo-network/module": "^2.75.4",
+    "@xyo-network/node-memory": "^2.75.4",
+    "@xyo-network/react-node": "~2.64.1",
+    "@xyo-network/react-storybook": "~2.64.1",
+    "@xyo-network/react-wallet": "~2.64.1",
+    "@xyo-network/sentinel": "^2.75.4",
     "typescript": "^5.2.2"
   },
   "description": "Common React library for all XYO projects that use React",
@@ -58,28 +61,28 @@
       "node": {
         "import": {
           "types": "./dist/node/index.d.mts",
-          "default": "./dist/node/index.mjs"
+          "default": "./dist/node/index.js"
         },
         "require": {
-          "types": "./dist/node/index.d.ts",
-          "default": "./dist/node/index.js"
+          "types": "./dist/node/index.d.cts",
+          "default": "./dist/node/index.cjs"
         }
       },
       "browser": {
         "import": {
-          "types": "./dist/browser/index.d.ts",
+          "types": "./dist/browser/index.d.mts",
           "default": "./dist/browser/index.js"
         },
         "require": {
-          "types": "./dist/browser/index.d.ts",
-          "default": "./dist/browser/index.js"
+          "types": "./dist/browser/index.d.cts",
+          "default": "./dist/browser/index.cjs"
         }
       },
-      "default": "./dist/browser/index.mjs"
+      "default": "./dist/browser/index.js"
     },
     "./package.json": "./package.json"
   },
-  "main": "dist/browser/index.js",
+  "main": "dist/browser/index.cjs",
   "module": "dist/browser/index.js",
   "homepage": "https://xyo.network",
   "keywords": [
@@ -102,6 +105,6 @@
   },
   "sideEffects": false,
   "types": "dist/browser/index.d.ts",
-  "version": "2.64.0-rc.7",
-  "stableVersion": "2.63.1"
+  "version": "2.64.1",
+  "type": "module"
 }

package/src/Cytoscape/CytoscapeElements.ts

@@ -1,5 +1,5 @@
-import { ModuleManifest } from '@xyo-network/manifest-model'
-import { NodeInstance } from '@xyo-network/node-model'
+import { ModuleInstance } from '@xyo-network/module'
+import { isNodeInstance } from '@xyo-network/node-model'
 import { ElementDefinition } from 'cytoscape'
 
 import { parseModuleType } from './lib'
@@ -17,47 +17,43 @@ export class CytoscapeElements {
     }
   }
 
-  static async buildElements(node: NodeInstance) {
+  static async buildElements(module: ModuleInstance): Promise<ElementDefinition[]> {
+    const newRootNode = CytoscapeElements.buildRootNode(module)
+    const newElements: ElementDefinition[] = [newRootNode]
+
     try {
-      const [, newRootNode] = await CytoscapeElements.buildRootNode(node)
-      const newElements: ElementDefinition[] = [newRootNode]
+      const childElements = await CytoscapeElements.recurseNodes(module)
+      childElements?.forEach((module) => {
+        const newNode = CytoscapeElements.buildNode(module, newRootNode.data.id)
+        newElements.push(newNode)
 
-      const children = await Promise.all(
-        (await node.resolve()).map<Promise<[ModuleManifest, string]>>(async (child) => [await child.manifest(), child.address]),
-      )
-      await Promise.allSettled(
-        (children ?? [])?.map(async ([child, address]) => {
-          try {
-            const newNode = await CytoscapeElements.buildNode(child, address)
-            newElements.push(newNode)
+        const newEdge = CytoscapeElements.buildEdge(newRootNode, newNode)
+        newElements.push(newEdge)
+      })
 
-            const newEdge = CytoscapeElements.buildEdge(newRootNode, newNode)
-            newElements.push(newEdge)
-          } catch (e) {
-            console.error('Error parsing children', e)
-          }
-        }),
-      )
       return newElements
     } catch (e) {
-      console.error('Error Getting initial description', e)
+      console.error('error resolving modules', e)
+      return []
     }
   }
 
-  static buildNode(manifest: ModuleManifest, address: string): ElementDefinition {
-    const newNodeId = CytoscapeElements.normalizeName(manifest.config.name) ?? address.substring(0, 8)
+  static buildNode(module: ModuleInstance, rootNodeId?: string): ElementDefinition {
+    const { address, config } = module
+    const normalizedName = config.name ?? address.substring(0, 8)
     return {
       data: {
         address,
-        id: newNodeId,
-        type: parseModuleType(manifest.config.schema),
+        id: address,
+        name: normalizedName,
+        rootNodeId,
+        type: parseModuleType(module),
       },
     }
   }
 
-  static buildRootNode = async (node: NodeInstance): Promise<[ModuleManifest, ElementDefinition]> => {
-    const manifest = await node?.manifest()
-    return [manifest, CytoscapeElements.buildNode(manifest, node.address)]
+  static buildRootNode = (module: ModuleInstance): ElementDefinition => {
+    return CytoscapeElements.buildNode(module)
   }
 
   static normalizeName(name?: string) {
@@ -65,4 +61,30 @@ export class CytoscapeElements {
     if (name.length > this.MaxNameLength) return `${name.substring(0, 20)}...`
     return name
   }
+
+  static async recurseNodes(module: ModuleInstance, maxTraversals = 1): Promise<ModuleInstance[]> {
+    let localDepth = 0
+    const childModules: ModuleInstance[] = []
+
+    const traverse = async (nestedNode: ModuleInstance) => {
+      if (localDepth < maxTraversals) {
+        const modules = await nestedNode.resolve(undefined, { direction: 'down', maxDepth: 2 })
+        await Promise.all(
+          modules.map(async (child) => {
+            if (child !== nestedNode && isNodeInstance(child)) {
+              localDepth++
+              await traverse(child)
+              // don't re add the root module that was passed in
+            } else if (child !== module) {
+              childModules.push(child)
+            }
+          }),
+        )
+      }
+    }
+
+    await traverse(module)
+
+    return childModules
+  }
 }

package/src/Cytoscape/CytoscapeStyles.ts

@@ -2,26 +2,29 @@ import { Stylesheet } from 'cytoscape'
 
 import { CyNodeModuleTypes } from './lib'
 
-export const NodeIdStyles = (color?: string): Stylesheet => ({
-  selector: 'node[id]',
+export const NodeIdStyles = (color?: string, outlineColor?: string): Stylesheet => ({
+  selector: 'node[name]',
   style: {
     color,
     'font-family': 'Lexend Deca, Helvetica, sans-serif',
-    'font-size': 14,
-    'text-margin-y': -5,
+    'font-size': 12,
+    'overlay-padding': '6px',
+    'text-halign': 'center',
+    'text-outline-color': outlineColor,
+    'text-outline-width': '1px',
+    'text-valign': 'top',
   },
 })
 
-export const NodeStyled = (icons: Record<CyNodeModuleTypes, string>, bgColor?: string): Stylesheet => ({
+export const NodeStyled = (icons: Record<CyNodeModuleTypes, string>, bgColor?: string, hideLabels = false): Stylesheet => ({
   selector: 'node',
   style: {
     'background-color': bgColor,
     'background-height': '75%',
-    // TODO - make dynamic
     'background-image': (elem) => icons[elem.data('type') as CyNodeModuleTypes],
-    'background-image-smoothing': 'yes',
-    'background-width': '75%',
-    label: 'data(id)',
+    'background-width': '24',
+    label: hideLabels ? undefined : 'data(name)',
+    shape: 'round-rectangle',
   },
 })
 

package/src/Cytoscape/lib/index.ts

@@ -1,4 +1,5 @@
 export * from './CyNodeModuleTypes'
 export * from './encodeSvg'
 export * from './iconMap'
+export * from './layout'
 export * from './parseModuleType'

package/src/Cytoscape/lib/layout/ColaLayout.ts

@@ -0,0 +1,5 @@
+export const ColaLayout = {
+  centerGraph: false,
+  convergenceThreshold: 0.01,
+  name: 'cola',
+}

package/src/Cytoscape/lib/layout/ConcentricLayout.ts

@@ -0,0 +1,12 @@
+import { CytoscapeOptions } from 'cytoscape'
+
+export const ConcentricLayout: CytoscapeOptions['layout'] = {
+  concentric: function (node) {
+    return node.degree()
+  },
+  levelWidth: function () {
+    return 2
+  },
+  minNodeSpacing: 75,
+  name: 'concentric',
+}

package/src/Cytoscape/lib/layout/index.ts

@@ -0,0 +1,2 @@
+export * from './ColaLayout'
+export * from './ConcentricLayout'

package/src/Cytoscape/lib/parseModuleType.ts

@@ -1,19 +1,27 @@
+import { isArchivistInstance } from '@xyo-network/archivist-model'
+import { isBridgeInstance } from '@xyo-network/bridge-model'
+import { isDivinerInstance } from '@xyo-network/diviner-model'
+import { ModuleInstance } from '@xyo-network/module'
+import { isNodeInstance } from '@xyo-network/node-model'
+import { isSentinelInstance } from '@xyo-network/sentinel'
+import { isWitnessModule } from '@xyo-network/witness'
+
 import { CyNodeModuleTypes } from './CyNodeModuleTypes'
 
-export const parseModuleType = (schema?: string): CyNodeModuleTypes => {
+export const parseModuleType = (module?: ModuleInstance): CyNodeModuleTypes => {
   let type: CyNodeModuleTypes = 'module'
-  if (schema) {
-    if (schema.includes('archivist')) {
+  if (module) {
+    if (isArchivistInstance(module)) {
       type = 'archivist'
-    } else if (schema.includes('bridge')) {
+    } else if (isBridgeInstance(module)) {
       type = 'bridge'
-    } else if (schema.includes('diviner')) {
+    } else if (isDivinerInstance(module)) {
       type = 'diviner'
-    } else if (schema.includes('node')) {
+    } else if (isNodeInstance(module)) {
       type = 'node'
-    } else if (schema.includes('sentinel')) {
+    } else if (isSentinelInstance(module)) {
       type = 'sentinel'
-    } else if (schema.includes('witness')) {
+    } else if (isWitnessModule(module)) {
       type = 'witness'
     } else {
       type = 'module'

package/src/components/ModuleGraphFlexBox.stories.tsx

@@ -0,0 +1,95 @@
+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 { MemoryNode } from '@xyo-network/node-memory'
+import { NodeConfigSchema } from '@xyo-network/node-model'
+import { NodeProvider, 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 { ModuleGraphFlexBox } from './ModuleGraphFlexBox'
+
+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 } })
+        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: ModuleGraphFlexBox,
+  title: 'node/renderer/ModuleGraphFlexBox',
+} as Meta
+
+const Template: StoryFn<typeof ModuleGraphFlexBox> = (props) => <ModuleGraphFlexBox {...props} />
+
+const TemplateWithProvidedModule: StoryFn<typeof ModuleGraphFlexBox> = (props) => {
+  const [node] = useProvidedNode()
+  return <ModuleGraphFlexBox rootModule={node} {...props} />
+}
+
+const defaultProps = {
+  height: 'calc(100vh - 20px)',
+  width: '100%',
+}
+
+const Default = Template.bind({})
+Default.args = {}
+Default.decorators = [MemoryNodeDecorator]
+
+const WithProvidedNode = TemplateWithProvidedModule.bind({})
+WithProvidedNode.args = { ...defaultProps }
+WithProvidedNode.decorators = [MemoryNodeDecorator]
+
+export { Default, WithProvidedNode }

package/src/components/ModuleGraphFlexBox.tsx

@@ -0,0 +1,56 @@
+import { Button } from '@mui/material'
+import { FlexBoxProps } from '@xylabs/react-flexbox'
+import { ModuleInstance } from '@xyo-network/module'
+import { EventObject } from 'cytoscape'
+import { useEffect } from 'react'
+
+import { useCytoscapeInstance } from '../contexts'
+import { useAddNewElements, useNewElements, usePopperListener, useRelationalGraphOptions } from '../hooks'
+import { WithExtensions } from './cytoscape-extensions'
+import { NodeRelationalGraphFlexBox } from './RelationalGraph'
+
+export interface ModuleGraphFlexBoxProps extends FlexBoxProps {
+  rootModule?: ModuleInstance | null
+}
+
+export const ModuleGraphFlexBox: React.FC<ModuleGraphFlexBoxProps> = ({ rootModule, ...props }) => {
+  const { cy } = useCytoscapeInstance(true)
+  const popperListener = usePopperListener()
+  const { handleToggleLabels, hideLabels, options } = useRelationalGraphOptions(rootModule ?? undefined)
+
+  const { newElements, setSelectedElement } = useNewElements()
+
+  useAddNewElements(newElements, hideLabels)
+
+  useEffect(() => {
+    const listener = (event: EventObject) => {
+      const element = event.target[0]
+      if (element.isNode()) setSelectedElement(element)
+    }
+    cy?.on('select', listener)
+
+    return () => {
+      cy?.off('select', listener)
+    }
+  }, [cy, setSelectedElement])
+
+  useEffect(() => {
+    cy?.ready(() => {
+      cy.nodes().forEach((node) => popperListener(node, hideLabels, cy))
+    })
+  }, [cy, hideLabels, popperListener, setSelectedElement])
+
+  return (
+    <WithExtensions>
+      <NodeRelationalGraphFlexBox
+        actions={
+          <Button size={'small'} onClick={handleToggleLabels} variant="contained">
+            Toggle Labels
+          </Button>
+        }
+        options={options}
+        {...props}
+      />
+    </WithExtensions>
+  )
+}

package/src/components/ProvidedNodeRenderer.tsx

@@ -4,7 +4,7 @@ import { useProvidedNode } from '@xyo-network/react-node'
 
 import { useCytoscapeElements, useCytoscapeOptions } from '../hooks'
 import { NodeRelationalGraphProps } from './lib'
-import { NodeRelationalGraph } from './RelationalGraph'
+import { NodeRelationalGraphFlexBox } from './RelationalGraph'
 
 export interface ProvidedNodeRendererProps extends NodeRelationalGraphProps {
   account?: AccountInstance
@@ -16,5 +16,5 @@ export const ProvidedNodeRenderer: React.FC<ProvidedNodeRendererProps> = ({ node
   const elements = useCytoscapeElements(node ?? providedNode)
   const options = useCytoscapeOptions(elements)
 
-  return <NodeRelationalGraph alignItems="stretch" flexGrow={1} height="100%" options={options} {...props} />
+  return <NodeRelationalGraphFlexBox alignItems="stretch" flexGrow={1} height="100%" options={options} {...props} />
 }

package/src/components/RelationalGraph.stories.tsx

@@ -14,12 +14,12 @@ import { useState } from 'react'
 
 import { useCytoscapeElements, useCytoscapeOptions } from '../hooks'
 import { ProvidedNodeRenderer } from './ProvidedNodeRenderer'
-import { NodeRelationalGraph } from './RelationalGraph'
+import { NodeRelationalGraphFlexBox } from './RelationalGraph'
 import { options } from './story'
 
 const nodeUrl = 'http://localhost:8080/node'
 
-export const MemoryNodeDecorator: Decorator = (Story, args) => {
+const MemoryNodeDecorator: Decorator = (Story, args) => {
   const [node, setNode] = useState<MemoryNode>()
 
   useAsyncEffect(
@@ -70,29 +70,29 @@ export const MemoryNodeDecorator: Decorator = (Story, args) => {
 
 // eslint-disable-next-line import/no-default-export
 export default {
-  component: NodeRelationalGraph,
+  component: NodeRelationalGraphFlexBox,
   title: 'node/renderer/NodeRelationalGraph',
 } as Meta
 
-const Template: StoryFn<typeof NodeRelationalGraph> = (props) => <NodeRelationalGraph {...props} />
+const Template: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => <NodeRelationalGraphFlexBox {...props} />
 
-const TemplateDescribe: StoryFn<typeof NodeRelationalGraph> = (props) => {
+const TemplateDescribe: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => {
   const [node] = useProvidedNode()
   const elements = useCytoscapeElements(node)
   const options = useCytoscapeOptions(elements)
-  return <NodeRelationalGraph options={options} {...props} />
+  return <NodeRelationalGraphFlexBox options={options} {...props} />
 }
 
-const TemplateCustomAddress: StoryFn<typeof NodeRelationalGraph> = (props) => {
+const TemplateCustomAddress: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => {
   const [node] = useNodeFromNode('ChildNode')
   const elements = useCytoscapeElements(node)
   const options = useCytoscapeOptions(elements)
-  return <NodeRelationalGraph options={options} {...props} />
+  return <NodeRelationalGraphFlexBox options={options} {...props} />
 }
 
 const TemplateProvidedNodeRenderer: StoryFn<typeof ProvidedNodeRenderer> = (props) => <ProvidedNodeRenderer {...props} />
 
-const TemplateAttachDetach: StoryFn<typeof NodeRelationalGraph> = (props) => {
+const TemplateAttachDetach: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => {
   const [node] = useNodeFromNode('ChildNode')
   const elements = useCytoscapeElements(node)
   const options = useCytoscapeOptions(elements)
@@ -130,7 +130,7 @@ const TemplateAttachDetach: StoryFn<typeof NodeRelationalGraph> = (props) => {
         <Button onClick={handleAddWitness}>Add Witness</Button>
         <Button onClick={handleRemoveWitness}>Remove Witness</Button>
       </ButtonGroup>
-      <NodeRelationalGraph options={options} {...props} />
+      <NodeRelationalGraphFlexBox options={options} {...props} />
     </>
   )
 }

package/src/components/RelationalGraph.tsx

@@ -1,4 +1,4 @@
-import { Button, styled } from '@mui/material'
+import { Button, ButtonGroup, styled } from '@mui/material'
 import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
 import { useShareForwardedRef } from '@xyo-network/react-shared'
 import cytoscape, { Core } from 'cytoscape'
@@ -7,7 +7,7 @@ import { forwardRef, useEffect, useState } from 'react'
 import { useCytoscapeInstance } from '../contexts'
 import { NodeRelationalGraphProps } from './lib'
 
-export const NodeRelationalGraph = forwardRef<HTMLDivElement, NodeRelationalGraphProps>(({ actions, options, ...props }, ref) => {
+export const NodeRelationalGraphFlexBox = forwardRef<HTMLDivElement, NodeRelationalGraphProps>(({ actions, options, ...props }, ref) => {
   const [cy, setCy] = useState<Core>()
   const { setCy: setCyContext } = useCytoscapeInstance()
   const sharedRef = useShareForwardedRef(ref)
@@ -34,22 +34,29 @@ export const NodeRelationalGraph = forwardRef<HTMLDivElement, NodeRelationalGrap
   return (
     <FlexCol {...props}>
       <ActionsContainer>
-        {actions}
-        <Button size={'small'} variant={'contained'} onClick={handleReset}>
-          Reset
-        </Button>
+        <ButtonGroup>
+          {actions}
+          <Button size={'small'} variant={'contained'} onClick={handleReset}>
+            Reset
+          </Button>
+        </ButtonGroup>
       </ActionsContainer>
+      {/* Cytoscape Element */}
       <FlexCol alignItems="stretch" height="100%" position="absolute" ref={sharedRef} width="100%"></FlexCol>
     </FlexCol>
   )
 })
 
-NodeRelationalGraph.displayName = 'NodeRelationalGraph'
+NodeRelationalGraphFlexBox.displayName = 'NodeRelationalGraph'
 
-const ActionsContainer = styled(FlexRow, { name: 'ActionsContainer' })(() => ({
+const ActionsContainer = styled(FlexRow, { name: 'ActionsContainer' })(({ theme }) => ({
   flexWrap: 'wrap',
+  gap: theme.spacing(1),
   position: 'absolute',
   right: '10px',
   top: '10px',
   zIndex: 2,
 }))
+
+/** @deprecated */
+export const NodeRelationalGraph = NodeRelationalGraphFlexBox

package/src/components/RelationalGraphEvents.stories.tsx

@@ -11,7 +11,7 @@ import { useEffect, useState } from 'react'
 
 import { CytoscapeInstanceProvider, useCytoscapeInstance } from '../contexts'
 import { useCytoscapeElements, useCytoscapeOptions } from '../hooks'
-import { NodeRelationalGraph } from './RelationalGraph'
+import { NodeRelationalGraphFlexBox } from './RelationalGraph'
 
 const MemoryNodeDecorator: Decorator = (Story, args) => {
   const [node, setNode] = useState<MemoryNode>()
@@ -45,11 +45,11 @@ const MemoryNodeDecorator: Decorator = (Story, args) => {
 
 // eslint-disable-next-line import/no-default-export
 export default {
-  component: NodeRelationalGraph,
+  component: NodeRelationalGraphFlexBox,
   title: 'node/renderer/NodeRelationalGraphEvents',
 } as Meta
 
-const Template: StoryFn<typeof NodeRelationalGraph> = (props) => {
+const Template: StoryFn<typeof NodeRelationalGraphFlexBox> = (props) => {
   const [node] = useProvidedNode()
   const elements = useCytoscapeElements(node)
   const options = useCytoscapeOptions(elements)
@@ -69,7 +69,7 @@ const Template: StoryFn<typeof NodeRelationalGraph> = (props) => {
       cy?.off('select', listener)
     }
   }, [cy])
-  return <NodeRelationalGraph options={options} {...props} />
+  return <NodeRelationalGraphFlexBox options={options} {...props} />
 }
 
 const defaultProps = {