From e3c14ba494ab20f378f86c073b1cf871ed595c30 Mon Sep 17 00:00:00 2001
From: stone <stone-lyl@outlook.com>
Date: Fri, 13 Sep 2024 18:13:21 +0800
Subject: [PATCH] fix: set fixed width and height for `ReactFlow` to resolve
 warning

---
 packages/docs/components/demos/TinkerDemo.tsx             | 1 -
 packages/docs/components/demos/Tree/CustomActivityBar.tsx | 2 +-
 packages/ui/src/components/DataStory/DataStory.tsx        | 6 ++++--
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/docs/components/demos/TinkerDemo.tsx b/packages/docs/components/demos/TinkerDemo.tsx
index 1bf74516..0bdeeb4f 100644
--- a/packages/docs/components/demos/TinkerDemo.tsx
+++ b/packages/docs/components/demos/TinkerDemo.tsx
@@ -2,7 +2,6 @@ import { DataStory } from '@data-story/ui'
 import { core, str, } from '@data-story/core';
 import { MockJSClient } from '../splash/MockJSClient';
 import { useRequestApp } from '../hooks/useRequestApp';
-import { useMemo } from 'react';
 import useRequest from 'ahooks/lib/useRequest';
 
 // This component is just a place to sketch
diff --git a/packages/docs/components/demos/Tree/CustomActivityBar.tsx b/packages/docs/components/demos/Tree/CustomActivityBar.tsx
index 86f222a8..04a91d5e 100644
--- a/packages/docs/components/demos/Tree/CustomActivityBar.tsx
+++ b/packages/docs/components/demos/Tree/CustomActivityBar.tsx
@@ -24,7 +24,7 @@ export default () => {
         client={client}
         hideControls={true}
         hideSidebar={true}
-        hideActivityBar={['settings', 'explorer']}
+        hideActivityBar={['settings']}
       />
     </div>
   );
diff --git a/packages/ui/src/components/DataStory/DataStory.tsx b/packages/ui/src/components/DataStory/DataStory.tsx
index aa458b69..a896ffa0 100644
--- a/packages/ui/src/components/DataStory/DataStory.tsx
+++ b/packages/ui/src/components/DataStory/DataStory.tsx
@@ -131,7 +131,7 @@ export const DataStoryComponent = (
                   activeKey={sidebarKey}
                   onClose={setIsSidebarClose}/>
               </Allotment.Pane>
-              <Allotment.Pane visible={!isSidebarClose} snap maxSize={500}>
+              <Allotment.Pane visible={!isSidebarClose} snap maxSize={500} preferredSize={300}>
                 <Sidebar
                   tree={tree}
                   handleClickExplorerNode={handleClickExplorerNode}
@@ -142,7 +142,9 @@ export const DataStoryComponent = (
                   setSidebarKey={setSidebarKey} node={selectedNode}
                   onUpdateNodeData={setUpdateSelectedNodeData} onClose={setIsSidebarClose}/>
               </Allotment.Pane>
-              <Allotment.Pane minSize={300}>
+              {/*The Allotment.Pane will recalculate the width and height of the child components.*/}
+              {/*The className is used to address the ReactFlow warning.*/}
+              <Allotment.Pane minSize={300} className="h-full w-96">
                 <DataStoryCanvas
                   {...props}
                   onSave={saveTree}