Adding resetting view when auto arranging.

Author: aasimkhan30

src/reactviews/pages/SchemaDesigner/schemaDesignerStateProvider.tsx

@@ -48,6 +48,7 @@ export interface SchemaDesignerContextProps
     }>;
     closeDesigner: () => void;
     resetUndoRedoState: () => void;
+    resetView: () => void;
     isInitialized: boolean;
 }
 
@@ -397,6 +398,14 @@ const SchemaDesignerStateProvider: React.FC<SchemaDesignerProviderProps> = ({ ch
         eventBus.emit("updateUndoRedoState", stateStack.canUndo(), stateStack.canRedo());
     };
 
+    function resetView() {
+        setTimeout(async () => {
+            await reactFlow.fitView({
+                nodes: reactFlow.getNodes().filter((node) => node.hidden !== true),
+            });
+        }, 0);
+    }
+
     return (
         <SchemaDesignerContext.Provider
             value={{
@@ -425,6 +434,7 @@ const SchemaDesignerStateProvider: React.FC<SchemaDesignerProviderProps> = ({ ch
                 isInitialized,
                 closeDesigner,
                 resetUndoRedoState,
+                resetView,
             }}>
             {children}
         </SchemaDesignerContext.Provider>

src/reactviews/pages/SchemaDesigner/toolbar/autoArrangeButton.tsx

@@ -33,6 +33,7 @@ export function AutoArrangeButton() {
         const generateComponenets = flowUtils.generatePositions(nodes, edges);
         reactFlow.setNodes(generateComponenets.nodes);
         reactFlow.setEdges(generateComponenets.edges);
+        context.resetView();
     };
     if (!context) {
         return undefined;

src/reactviews/pages/SchemaDesigner/toolbar/filterTablesButton.tsx

@@ -31,14 +31,6 @@ export function FilterTablesButton() {
     const [selectedTables, setSelectedTables] = useState<string[]>([]);
     const [isFilterMenuOpen, setIsFilterMenuOpen] = useState(false);
 
-    function resetView() {
-        setTimeout(async () => {
-            await reactFlow.fitView({
-                nodes: reactFlow.getNodes().filter((node) => node.hidden !== true),
-            });
-        }, 0);
-    }
-
     function loadTables() {
         // Update the selected tables based on the current nodes
         const nodes = reactFlow.getNodes();
@@ -62,7 +54,6 @@ export function FilterTablesButton() {
                     hidden: false,
                 });
             });
-            resetView();
         } else {
             nodes.forEach((node) => {
                 const tableName = `${node.data.schema}.${node.data.name}`;
@@ -201,7 +192,7 @@ export function FilterTablesButton() {
                     selectedItems={selectedTables}
                     onSelectionChange={(_e, data) => {
                         setSelectedTables(data.selectedItems as string[]);
-                        resetView();
+                        context.resetView();
                     }}>
                     {renderListItems()}
                 </List>
@@ -219,7 +210,7 @@ export function FilterTablesButton() {
                         style={{}}
                         onClick={async () => {
                             setSelectedTables([]);
-                            resetView();
+                            context.resetView();
                         }}
                         appearance="subtle"
                         icon={<FluentIcons.DismissRegular />}>