Node Editor: QoL Fixes (#3734)

- Make the viewport fit to view on Init
- Update Reload Schema to an icon.

Author: blessedcoolant

invokeai/frontend/web/public/locales/en.json

@@ -674,5 +674,8 @@
         "showProgressImages": "Show Progress Images",
         "hideProgressImages": "Hide Progress Images",
         "swapSizes": "Swap Sizes"
+    },
+    "nodes": {
+        "reloadSchema": "Reload Schema"
     }
 }

invokeai/frontend/web/src/features/nodes/components/Flow.tsx

@@ -7,8 +7,10 @@ import {
   OnConnectEnd,
   OnConnectStart,
   OnEdgesChange,
+  OnInit,
   OnNodesChange,
   ReactFlow,
+  ReactFlowInstance,
 } from 'reactflow';
 import {
   connectionEnded,
@@ -67,6 +69,12 @@ export const Flow = () => {
     dispatch(connectionEnded());
   }, [dispatch]);
 
+  const onInit: OnInit = useCallback((v: ReactFlowInstance) => {
+    if (v) {
+      v.fitView();
+    }
+  }, []);
+
   return (
     <ReactFlow
       nodeTypes={nodeTypes}
@@ -77,6 +85,7 @@ export const Flow = () => {
       onConnectStart={onConnectStart}
       onConnect={onConnect}
       onConnectEnd={onConnectEnd}
+      onInit={onInit}
       defaultEdgeOptions={{
         style: { strokeWidth: 2 },
       }}

invokeai/frontend/web/src/features/nodes/components/panels/TopCenterPanel.tsx

@@ -1,25 +1,18 @@
 import { HStack } from '@chakra-ui/react';
-import { useAppDispatch } from 'app/store/storeHooks';
-import IAIButton from 'common/components/IAIButton';
-import { memo, useCallback } from 'react';
+import { memo } from 'react';
 import { Panel } from 'reactflow';
-import { receivedOpenAPISchema } from 'services/api/thunks/schema';
-import NodeInvokeButton from '../ui/NodeInvokeButton';
+
 import CancelButton from 'features/parameters/components/ProcessButtons/CancelButton';
+import NodeInvokeButton from '../ui/NodeInvokeButton';
+import ReloadSchemaButton from '../ui/ReloadSchemaButton';
 
 const TopCenterPanel = () => {
-  const dispatch = useAppDispatch();
-
-  const handleReloadSchema = useCallback(() => {
-    dispatch(receivedOpenAPISchema());
-  }, [dispatch]);
-
   return (
     <Panel position="top-center">
       <HStack>
         <NodeInvokeButton />
         <CancelButton />
-        <IAIButton onClick={handleReloadSchema}>Reload Schema</IAIButton>
+        <ReloadSchemaButton />
       </HStack>
     </Panel>
   );

invokeai/frontend/web/src/features/nodes/components/ui/ReloadSchemaButton.tsx

@@ -0,0 +1,24 @@
+import { useAppDispatch } from 'app/store/storeHooks';
+import IAIIconButton from 'common/components/IAIIconButton';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaSyncAlt } from 'react-icons/fa';
+import { receivedOpenAPISchema } from 'services/api/thunks/schema';
+
+export default function ReloadSchemaButton() {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+
+  const handleReloadSchema = useCallback(() => {
+    dispatch(receivedOpenAPISchema());
+  }, [dispatch]);
+
+  return (
+    <IAIIconButton
+      icon={<FaSyncAlt />}
+      tooltip={t('nodes.reloadSchema')}
+      aria-label={t('nodes.reloadSchema')}
+      onClick={handleReloadSchema}
+    />
+  );
+}