export component with cytoscape provider included

XYOracleNetwork · Sep 29, 2023 · 62a3bee · 62a3bee
1 parent c9ed2e1
commit 62a3bee
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git a/packages/sdk/packages/node-renderer/src/components/module/graph/GraphFlexBox.stories.tsx b/packages/sdk/packages/node-renderer/src/components/module/graph/GraphFlexBox.stories.tsx
@@ -10,8 +10,7 @@ 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 './GraphFlexBox'
+import { ModuleGraphFlexBoxWithProvider } from './GraphFlexBox'
 
 const nodeUrl = 'http://localhost:8080/node'
 
@@ -58,25 +57,23 @@ const MemoryNodeDecorator: Decorator = (Story, args) => {
   return (
     <WalletProvider rootWallet={wallet}>
       <NodeProvider node={node}>
-        <CytoscapeInstanceProvider>
-          <Story {...args} />
-        </CytoscapeInstanceProvider>
+        <Story {...args} />
       </NodeProvider>
     </WalletProvider>
   )
 }
 
 // eslint-disable-next-line import/no-default-export
 export default {
-  component: ModuleGraphFlexBox,
-  title: 'node/renderer/ModuleGraphFlexBox',
+  component: ModuleGraphFlexBoxWithProvider,
+  title: 'node/renderer/ModuleGraphFlexBoxWithProvider',
 } as Meta
 
-const Template: StoryFn<typeof ModuleGraphFlexBox> = (props) => <ModuleGraphFlexBox {...props} />
+const Template: StoryFn<typeof ModuleGraphFlexBoxWithProvider> = (props) => <ModuleGraphFlexBoxWithProvider {...props} />
 
-const TemplateWithProvidedModule: StoryFn<typeof ModuleGraphFlexBox> = (props) => {
+const TemplateWithProvidedModule: StoryFn<typeof ModuleGraphFlexBoxWithProvider> = (props) => {
   const [node] = useProvidedNode()
-  return <ModuleGraphFlexBox rootModule={node} {...props} />
+  return <ModuleGraphFlexBoxWithProvider rootModule={node} {...props} />
 }
 
 const defaultProps = {

diff --git a/packages/sdk/packages/node-renderer/src/components/module/graph/GraphFlexBox.tsx b/packages/sdk/packages/node-renderer/src/components/module/graph/GraphFlexBox.tsx
@@ -2,6 +2,7 @@ import { Button } from '@mui/material'
 import { FlexBoxProps } from '@xylabs/react-flexbox'
 import { ModuleInstance } from '@xyo-network/module'
 
+import { CytoscapeInstanceProvider } from '../../../contexts'
 import { useHoveredNode, useNewElements, useRelationalGraphOptions, useRenderNewElements, useSelectedElement } from '../../../hooks'
 import { WithExtensions } from '../../cytoscape-extensions'
 import { NodeRelationalGraphFlexBox } from '../../RelationalGraph'
@@ -34,3 +35,11 @@ export const ModuleGraphFlexBox: React.FC<ModuleGraphFlexBoxProps> = ({ rootModu
     </WithExtensions>
   )
 }
+
+export const ModuleGraphFlexBoxWithProvider: React.FC<ModuleGraphFlexBoxProps> = (props) => {
+  return (
+    <CytoscapeInstanceProvider>
+      <ModuleGraphFlexBox {...props} />
+    </CytoscapeInstanceProvider>
+  )
+}