From 62a3bee20ea22545713d9ddd7285031cec026b8c Mon Sep 17 00:00:00 2001
From: Matt Jones <885417+jonesmac@users.noreply.github.com>
Date: Fri, 29 Sep 2023 10:15:53 -0400
Subject: [PATCH] export component with cytoscape provider included

---
 .../module/graph/GraphFlexBox.stories.tsx       | 17 +++++++----------
 .../components/module/graph/GraphFlexBox.tsx    |  9 +++++++++
 2 files changed, 16 insertions(+), 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
index 8a22a92501..09e4331aad 100644
--- 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,9 +57,7 @@ const MemoryNodeDecorator: Decorator = (Story, args) => {
   return (
     <WalletProvider rootWallet={wallet}>
       <NodeProvider node={node}>
-        <CytoscapeInstanceProvider>
-          <Story {...args} />
-        </CytoscapeInstanceProvider>
+        <Story {...args} />
       </NodeProvider>
     </WalletProvider>
   )
@@ -68,15 +65,15 @@ const MemoryNodeDecorator: Decorator = (Story, args) => {
 
 // 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
index 42afcd5e40..b0134b1219 100644
--- 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>
+  )
+}