wip missing fields prototype

invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx

@@ -1,6 +1,6 @@
 import type { ChakraProps, SystemStyleObject } from '@invoke-ai/ui-library';
 import { Box, useGlobalMenuClose } from '@invoke-ai/ui-library';
-import type { NodeChange } from '@xyflow/react';
+import { useReactFlow, type NodeChange } from '@xyflow/react';
 import { useAppDispatch, useAppSelector, useAppStore } from 'app/store/storeHooks';
 import { useMouseOverNode } from 'features/nodes/hooks/useMouseOverNode';
 import { useNodeExecutionState } from 'features/nodes/hooks/useNodeExecutionState';
@@ -93,6 +93,8 @@ const NodeWrapper = (props: NodeWrapperProps) => {
   const opacity = useAppSelector(selectNodeOpacity);
   const { onCloseGlobal } = useGlobalMenuClose();
 
+  const { setCenter } = useReactFlow();
+
   const handleClick = useCallback(
     (e: MouseEvent<HTMLDivElement>) => {
       if (!e.ctrlKey && !e.altKey && !e.metaKey && !e.shiftKey) {
@@ -112,9 +114,24 @@ const NodeWrapper = (props: NodeWrapperProps) => {
     [onCloseGlobal, store, dispatch, nodeId]
   );
 
+  const handleDoubleClick = useCallback(
+    (e: MouseEvent<HTMLDivElement>) => {
+      if (!e.ctrlKey && !e.altKey && !e.metaKey && !e.shiftKey) {
+        const nodes = selectNodes(store.getState());
+        const node = nodes.find((node) => node.id === nodeId);
+        if (node) {
+          setCenter(node.position.x + NODE_WIDTH / 2, node.position.y, { zoom: 1 });
+        }
+      }
+      onCloseGlobal();
+    },
+    [onCloseGlobal, store, nodeId, setCenter]
+  );
+
   return (
     <Box
       onClick={handleClick}
+      onDoubleClick={handleDoubleClick}
       onMouseEnter={handleMouseOver}
       onMouseLeave={handleMouseOut}
       className={DRAG_HANDLE_CLASSNAME}

invokeai/frontend/web/src/features/nodes/components/flow/panels/TopPanel/UpdateNodesButton.tsx

@@ -1,4 +1,4 @@
-import { IconButton } from '@invoke-ai/ui-library';
+import { Button, ButtonGroup, Flex, IconButton } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { useGetNodesNeedUpdate } from 'features/nodes/hooks/useGetNodesNeedUpdate';
 import { updateAllNodesRequested } from 'features/nodes/store/actions';
@@ -9,24 +9,32 @@ import { PiWarningBold } from 'react-icons/pi';
 const UpdateNodesButton = () => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
-  const nodesNeedUpdate = useGetNodesNeedUpdate();
+  // const nodesNeedUpdate = useGetNodesNeedUpdate();
   const handleClickUpdateNodes = useCallback(() => {
     dispatch(updateAllNodesRequested());
   }, [dispatch]);
 
-  if (!nodesNeedUpdate) {
-    return null;
-  }
+  // if (!nodesNeedUpdate) {
+  //   return null;
+  // }
 
   return (
-    <IconButton
-      tooltip={t('nodes.updateAllNodes')}
-      aria-label={t('nodes.updateAllNodes')}
-      icon={<PiWarningBold />}
-      onClick={handleClickUpdateNodes}
-      pointerEvents="auto"
-      colorScheme="warning"
-    />
+    <Flex flexDir="column">
+      <Button
+        leftIcon={<PiWarningBold />}
+        tooltip={t('nodes.updateAllNodes')}
+        aria-label={t('nodes.updateAllNodes')}
+        onClick={handleClickUpdateNodes}
+        pointerEvents="auto"
+        colorScheme="red"
+      >
+        1 Missing Field
+      </Button>
+      <ButtonGroup>
+        <Button>{`<`}</Button>
+        <Button>{`>`}</Button>
+      </ButtonGroup>
+    </Flex>
   );
 };
 

invokeai/frontend/web/src/features/nodes/components/sidePanel/ModeToggle.tsx

@@ -1,4 +1,4 @@
-import { Flex, IconButton } from '@invoke-ai/ui-library';
+import { Badge, Flex, IconButton } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { selectWorkflowMode, workflowModeChanged } from 'features/nodes/store/workflowSlice';
 import type { MouseEventHandler } from 'react';
@@ -30,14 +30,27 @@ export const ModeToggle = () => {
   return (
     <Flex justifyContent="flex-end">
       {mode === 'view' && (
-        <IconButton
-          aria-label={t('nodes.editMode')}
-          tooltip={t('nodes.editMode')}
-          onClick={onClickEdit}
-          icon={<PiPencilBold />}
-          variant="outline"
-          size="sm"
-        />
+        <Flex pos="relative">
+          <Badge
+            pos="absolute"
+            insetInlineStart="-8px"
+            insetBlockStart="-8px"
+            colorScheme="invokeRed"
+            zIndex="docked"
+            shadow="dark-lg"
+            userSelect="none"
+          >
+            !
+          </Badge>
+          <IconButton
+            aria-label={t('nodes.editMode')}
+            tooltip={t('nodes.editMode')}
+            onClick={onClickEdit}
+            icon={<PiPencilBold />}
+            variant="outline"
+            size="sm"
+          />
+        </Flex>
       )}
       {mode === 'edit' && (
         <IconButton