refactor(ui): merge nodes & workflow slices

invokeai/frontend/web/src/app/store/middleware/devtools/actionSanitizer.ts

@@ -1,20 +1,7 @@
 import type { UnknownAction } from '@reduxjs/toolkit';
-import { isAnyGraphBuilt } from 'features/nodes/store/actions';
 import { appInfoApi } from 'services/api/endpoints/appInfo';
-import type { Graph } from 'services/api/types';
 
 export const actionSanitizer = <A extends UnknownAction>(action: A): A => {
-  if (isAnyGraphBuilt(action)) {
-    if (action.payload.nodes) {
-      const sanitizedNodes: Graph['nodes'] = {};
-
-      return {
-        ...action,
-        payload: { ...action.payload, nodes: sanitizedNodes },
-      };
-    }
-  }
-
   if (appInfoApi.endpoints.getOpenAPISchema.matchFulfilled(action)) {
     return {
       ...action,

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts

@@ -25,7 +25,6 @@ import { addModelsLoadedListener } from 'app/store/middleware/listenerMiddleware
 import { addDynamicPromptsListener } from 'app/store/middleware/listenerMiddleware/listeners/promptChanged';
 import { addSetDefaultSettingsListener } from 'app/store/middleware/listenerMiddleware/listeners/setDefaultSettings';
 import { addSocketConnectedEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketConnected';
-import { addUpdateAllNodesRequestedListener } from 'app/store/middleware/listenerMiddleware/listeners/updateAllNodesRequested';
 import type { AppDispatch, RootState } from 'app/store/store';
 
 import { addArchivedOrDeletedBoardListener } from './listeners/addArchivedOrDeletedBoardListener';
@@ -85,9 +84,6 @@ addArchivedOrDeletedBoardListener(startAppListening);
 // Node schemas
 addGetOpenAPISchemaListener(startAppListening);
 
-// Workflows
-addUpdateAllNodesRequestedListener(startAppListening);
-
 // Models
 addModelSelectedListener(startAppListening);
 

invokeai/frontend/web/src/app/store/store.ts

@@ -21,7 +21,6 @@ import { modelManagerV2PersistConfig, modelManagerV2Slice } from 'features/model
 import { nodesPersistConfig, nodesSlice, nodesUndoableConfig } from 'features/nodes/store/nodesSlice';
 import { workflowLibraryPersistConfig, workflowLibrarySlice } from 'features/nodes/store/workflowLibrarySlice';
 import { workflowSettingsPersistConfig, workflowSettingsSlice } from 'features/nodes/store/workflowSettingsSlice';
-import { workflowPersistConfig, workflowSlice } from 'features/nodes/store/workflowSlice';
 import { upscalePersistConfig, upscaleSlice } from 'features/parameters/store/upscaleSlice';
 import { queueSlice } from 'features/queue/store/queueSlice';
 import { stylePresetPersistConfig, stylePresetSlice } from 'features/stylePresets/store/stylePresetSlice';
@@ -59,7 +58,6 @@ const allReducers = {
   [changeBoardModalSlice.name]: changeBoardModalSlice.reducer,
   [modelManagerV2Slice.name]: modelManagerV2Slice.reducer,
   [queueSlice.name]: queueSlice.reducer,
-  [workflowSlice.name]: workflowSlice.reducer,
   [hrfSlice.name]: hrfSlice.reducer,
   [canvasSlice.name]: undoable(canvasSlice.reducer, canvasUndoableConfig),
   [workflowSettingsSlice.name]: workflowSettingsSlice.reducer,
@@ -102,7 +100,6 @@ const persistConfigs: { [key in keyof typeof allReducers]?: PersistConfig } = {
   [galleryPersistConfig.name]: galleryPersistConfig,
   [nodesPersistConfig.name]: nodesPersistConfig,
   [systemPersistConfig.name]: systemPersistConfig,
-  [workflowPersistConfig.name]: workflowPersistConfig,
   [uiPersistConfig.name]: uiPersistConfig,
   [dynamicPromptsPersistConfig.name]: dynamicPromptsPersistConfig,
   [modelManagerV2PersistConfig.name]: modelManagerV2PersistConfig,

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

@@ -1,7 +1,7 @@
 import { Flex } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { WorkflowName } from 'features/nodes/components/sidePanel/WorkflowName';
-import { selectWorkflowName } from 'features/nodes/store/workflowSlice';
+import { selectWorkflowName } from 'features/nodes/store/selectors';
 import { memo } from 'react';
 
 export const TopCenterPanel = memo(() => {

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

@@ -1,18 +1,82 @@
 import { IconButton } from '@invoke-ai/ui-library';
-import { useAppDispatch } from 'app/store/storeHooks';
+import { logger } from 'app/logging/logger';
+import { useAppStore } from 'app/store/storeHooks';
 import { useGetNodesNeedUpdate } from 'features/nodes/hooks/useGetNodesNeedUpdate';
-import { updateAllNodesRequested } from 'features/nodes/store/actions';
+import { $templates, nodesChanged } from 'features/nodes/store/nodesSlice';
+import { selectNodes } from 'features/nodes/store/selectors';
+import { NodeUpdateError } from 'features/nodes/types/error';
+import { isInvocationNode } from 'features/nodes/types/invocation';
+import { getNeedsUpdate, updateNode } from 'features/nodes/util/node/nodeUpdate';
+import { toast } from 'features/toast/toast';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiWarningBold } from 'react-icons/pi';
 
+const log = logger('workflows');
+
+const useUpdateNodes = () => {
+  const store = useAppStore();
+  const { t } = useTranslation();
+
+  const updateNodes = useCallback(() => {
+    const nodes = selectNodes(store.getState());
+    const templates = $templates.get();
+
+    let unableToUpdateCount = 0;
+
+    nodes.filter(isInvocationNode).forEach((node) => {
+      const template = templates[node.data.type];
+      if (!template) {
+        unableToUpdateCount++;
+        return;
+      }
+      if (!getNeedsUpdate(node.data, template)) {
+        // No need to increment the count here, since we're not actually updating
+        return;
+      }
+      try {
+        const updatedNode = updateNode(node, template);
+        store.dispatch(
+          nodesChanged([
+            { type: 'remove', id: updatedNode.id },
+            { type: 'add', item: updatedNode },
+          ])
+        );
+      } catch (e) {
+        if (e instanceof NodeUpdateError) {
+          unableToUpdateCount++;
+        }
+      }
+    });
+
+    if (unableToUpdateCount) {
+      log.warn(
+        t('nodes.unableToUpdateNodes', {
+          count: unableToUpdateCount,
+        })
+      );
+      toast({
+        id: 'UNABLE_TO_UPDATE_NODES',
+        title: t('nodes.unableToUpdateNodes', {
+          count: unableToUpdateCount,
+        }),
+      });
+    } else {
+      toast({
+        id: 'ALL_NODES_UPDATED',
+        title: t('nodes.allNodesUpdated'),
+        status: 'success',
+      });
+    }
+  }, [store, t]);
+
+  return updateNodes;
+};
+
 const UpdateNodesButton = () => {
-  const dispatch = useAppDispatch();
   const { t } = useTranslation();
   const nodesNeedUpdate = useGetNodesNeedUpdate();
-  const handleClickUpdateNodes = useCallback(() => {
-    dispatch(updateAllNodesRequested());
-  }, [dispatch]);
+  const updateNodes = useUpdateNodes();
 
   if (!nodesNeedUpdate) {
     return null;
@@ -23,7 +87,7 @@ const UpdateNodesButton = () => {
       tooltip={t('nodes.updateAllNodes')}
       aria-label={t('nodes.updateAllNodes')}
       icon={<PiWarningBold />}
-      onClick={handleClickUpdateNodes}
+      onClick={updateNodes}
       pointerEvents="auto"
       colorScheme="warning"
     />

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

@@ -1,6 +1,6 @@
 import { Button, Flex, Heading, Text } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
-import { selectWorkflowId } from 'features/nodes/store/workflowSlice';
+import { selectWorkflowId } from 'features/nodes/store/selectors';
 import { toast } from 'features/toast/toast';
 import { useSaveOrSaveAsWorkflow } from 'features/workflowLibrary/hooks/useSaveOrSaveAsWorkflow';
 import { memo, useCallback } from 'react';

invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowListMenu/ActiveWorkflowDescription.tsx

@@ -1,7 +1,7 @@
 import { Text, Tooltip } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { linkifyOptions, linkifySx } from 'common/components/linkify';
-import { selectWorkflowDescription } from 'features/nodes/store/workflowSlice';
+import { selectWorkflowDescription } from 'features/nodes/store/selectors';
 import Linkify from 'linkify-react';
 import { memo } from 'react';
 

invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowListMenu/ActiveWorkflowNameAndActions.tsx

@@ -3,7 +3,7 @@ import { useAppSelector } from 'app/store/storeHooks';
 import { useIsWorkflowPublished } from 'features/nodes/components/sidePanel/workflow/publish';
 import { WorkflowListMenuTrigger } from 'features/nodes/components/sidePanel/WorkflowListMenu/WorkflowListMenuTrigger';
 import { WorkflowViewEditToggleButton } from 'features/nodes/components/sidePanel/WorkflowViewEditToggleButton';
-import { selectWorkflowMode } from 'features/nodes/store/workflowSlice';
+import { selectWorkflowMode } from 'features/nodes/store/workflowLibrarySlice';
 import { WorkflowLibraryMenu } from 'features/workflowLibrary/components/WorkflowLibraryMenu/WorkflowLibraryMenu';
 import { memo } from 'react';
 

invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowListMenu/WorkflowListMenuTrigger.tsx

@@ -1,7 +1,7 @@
 import { Button, Text } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
+import { selectWorkflowName } from 'features/nodes/store/selectors';
 import { useWorkflowLibraryModal } from 'features/nodes/store/workflowLibraryModal';
-import { selectWorkflowName } from 'features/nodes/store/workflowSlice';
 import { useTranslation } from 'react-i18next';
 import { PiFolderOpenFill } from 'react-icons/pi';
 

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

@@ -1,7 +1,8 @@
 import { Flex, Icon, Text, Tooltip } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useDoesWorkflowHaveUnsavedChanges } from 'features/nodes/components/sidePanel/workflow/IsolatedWorkflowBuilderWatcher';
-import { selectWorkflowMode, selectWorkflowName } from 'features/nodes/store/workflowSlice';
+import { selectWorkflowName } from 'features/nodes/store/selectors';
+import { selectWorkflowMode } from 'features/nodes/store/workflowLibrarySlice';
 import { useTranslation } from 'react-i18next';
 import { PiDotOutlineFill } from 'react-icons/pi';
 

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

@@ -1,6 +1,6 @@
 import { IconButton } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { selectWorkflowMode, workflowModeChanged } from 'features/nodes/store/workflowSlice';
+import { selectWorkflowMode, workflowModeChanged } from 'features/nodes/store/workflowLibrarySlice';
 import type { MouseEventHandler } from 'react';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';

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

@@ -7,7 +7,7 @@ import { $isInPublishFlow, useIsWorkflowPublished } from 'features/nodes/compone
 import { PublishWorkflowPanelContent } from 'features/nodes/components/sidePanel/workflow/PublishWorkflowPanelContent';
 import { ActiveWorkflowDescription } from 'features/nodes/components/sidePanel/WorkflowListMenu/ActiveWorkflowDescription';
 import { ActiveWorkflowNameAndActions } from 'features/nodes/components/sidePanel/WorkflowListMenu/ActiveWorkflowNameAndActions';
-import { selectWorkflowMode } from 'features/nodes/store/workflowSlice';
+import { selectWorkflowMode } from 'features/nodes/store/workflowLibrarySlice';
 import { memo } from 'react';
 
 import { ViewModeLeftPanelContent } from './viewMode/ViewModeLeftPanelContent';

invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElement.tsx

@@ -16,7 +16,9 @@ import { FormElementEditModeHeader } from 'features/nodes/components/sidePanel/b
 import { HeadingElement } from 'features/nodes/components/sidePanel/builder/HeadingElement';
 import { NodeFieldElement } from 'features/nodes/components/sidePanel/builder/NodeFieldElement';
 import { TextElement } from 'features/nodes/components/sidePanel/builder/TextElement';
-import { selectFormRootElement, selectWorkflowMode, useElement } from 'features/nodes/store/workflowSlice';
+import { useElement } from 'features/nodes/components/sidePanel/builder/use-element';
+import { selectFormRootElement } from 'features/nodes/store/selectors';
+import { selectWorkflowMode } from 'features/nodes/store/workflowLibrarySlice';
 import type { ContainerElement } from 'features/nodes/types/workflow';
 import {
   CONTAINER_CLASS_NAME,

invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/ContainerElementSettings.tsx

@@ -12,7 +12,7 @@ import {
   Portal,
 } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
-import { formElementContainerDataChanged } from 'features/nodes/store/workflowSlice';
+import { formElementContainerDataChanged } from 'features/nodes/store/nodesSlice';
 import type { ContainerElement } from 'features/nodes/types/workflow';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';

invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/DividerElement.tsx

@@ -1,7 +1,8 @@
 import { useAppSelector } from 'app/store/storeHooks';
 import { DividerElementEditMode } from 'features/nodes/components/sidePanel/builder/DividerElementEditMode';
 import { DividerElementViewMode } from 'features/nodes/components/sidePanel/builder/DividerElementViewMode';
-import { selectWorkflowMode, useElement } from 'features/nodes/store/workflowSlice';
+import { useElement } from 'features/nodes/components/sidePanel/builder/use-element';
+import { selectWorkflowMode } from 'features/nodes/store/workflowLibrarySlice';
 import { isDividerElement } from 'features/nodes/types/workflow';
 import { memo } from 'react';
 

invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeHeader.tsx

@@ -7,7 +7,7 @@ import { useDepthContext } from 'features/nodes/components/sidePanel/builder/con
 import { NodeFieldElementSettings } from 'features/nodes/components/sidePanel/builder/NodeFieldElementSettings';
 import { useMouseOverFormField } from 'features/nodes/hooks/useMouseOverNode';
 import { useZoomToNode } from 'features/nodes/hooks/useZoomToNode';
-import { formElementRemoved } from 'features/nodes/store/workflowSlice';
+import { formElementRemoved } from 'features/nodes/store/nodesSlice';
 import type { FormElement, NodeFieldElement } from 'features/nodes/types/workflow';
 import { isContainerElement, isNodeFieldElement } from 'features/nodes/types/workflow';
 import { camelCase } from 'lodash-es';

invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/HeadingElement.tsx

@@ -1,7 +1,8 @@
 import { useAppSelector } from 'app/store/storeHooks';
 import { HeadingElementEditMode } from 'features/nodes/components/sidePanel/builder/HeadingElementEditMode';
 import { HeadingElementViewMode } from 'features/nodes/components/sidePanel/builder/HeadingElementViewMode';
-import { selectWorkflowMode, useElement } from 'features/nodes/store/workflowSlice';
+import { useElement } from 'features/nodes/components/sidePanel/builder/use-element';
+import { selectWorkflowMode } from 'features/nodes/store/workflowLibrarySlice';
 import { isHeadingElement } from 'features/nodes/types/workflow';
 import { memo } from 'react';
 

invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/HeadingElementContentEditable.tsx

@@ -2,7 +2,7 @@ import { useAppDispatch } from 'app/store/storeHooks';
 import { useEditable } from 'common/hooks/useEditable';
 import { AutosizeTextarea } from 'features/nodes/components/sidePanel/builder/AutosizeTextarea';
 import { HeadingElementContent } from 'features/nodes/components/sidePanel/builder/HeadingElementContent';
-import { formElementHeadingDataChanged } from 'features/nodes/store/workflowSlice';
+import { formElementHeadingDataChanged } from 'features/nodes/store/nodesSlice';
 import type { HeadingElement } from 'features/nodes/types/workflow';
 import { memo, useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';

invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElement.tsx

@@ -1,7 +1,8 @@
 import { useAppSelector } from 'app/store/storeHooks';
 import { NodeFieldElementEditMode } from 'features/nodes/components/sidePanel/builder/NodeFieldElementEditMode';
 import { NodeFieldElementViewMode } from 'features/nodes/components/sidePanel/builder/NodeFieldElementViewMode';
-import { selectWorkflowMode, useElement } from 'features/nodes/store/workflowSlice';
+import { useElement } from 'features/nodes/components/sidePanel/builder/use-element';
+import { selectWorkflowMode } from 'features/nodes/store/workflowLibrarySlice';
 import { isNodeFieldElement } from 'features/nodes/types/workflow';
 import { memo } from 'react';
 

invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementFloatSettings.tsx

@@ -3,8 +3,7 @@ import { useAppDispatch } from 'app/store/storeHooks';
 import { roundDownToMultiple, roundUpToMultiple } from 'common/util/roundDownToMultiple';
 import { useFloatField } from 'features/nodes/components/flow/nodes/Invocation/fields/FloatField/useFloatField';
 import { useInputFieldInstance } from 'features/nodes/hooks/useInputFieldInstance';
-import { fieldFloatValueChanged } from 'features/nodes/store/nodesSlice';
-import { formElementNodeFieldDataChanged } from 'features/nodes/store/workflowSlice';
+import { fieldFloatValueChanged, formElementNodeFieldDataChanged } from 'features/nodes/store/nodesSlice';
 import type { FloatFieldInputInstance, FloatFieldInputTemplate } from 'features/nodes/types/field';
 import { type NodeFieldFloatSettings, zNumberComponent } from 'features/nodes/types/workflow';
 import { constrainNumber } from 'features/nodes/util/constrainNumber';

invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementIntegerSettings.tsx

@@ -3,8 +3,7 @@ import { useAppDispatch } from 'app/store/storeHooks';
 import { roundDownToMultiple, roundUpToMultiple } from 'common/util/roundDownToMultiple';
 import { useIntegerField } from 'features/nodes/components/flow/nodes/Invocation/fields/IntegerField/useIntegerField';
 import { useInputFieldInstance } from 'features/nodes/hooks/useInputFieldInstance';
-import { fieldIntegerValueChanged } from 'features/nodes/store/nodesSlice';
-import { formElementNodeFieldDataChanged } from 'features/nodes/store/workflowSlice';
+import { fieldIntegerValueChanged, formElementNodeFieldDataChanged } from 'features/nodes/store/nodesSlice';
 import type { IntegerFieldInputInstance, IntegerFieldInputTemplate } from 'features/nodes/types/field';
 import type { NodeFieldIntegerSettings } from 'features/nodes/types/workflow';
 import { zNumberComponent } from 'features/nodes/types/workflow';

invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementSettings.tsx

@@ -16,7 +16,7 @@ import { NodeFieldElementFloatSettings } from 'features/nodes/components/sidePan
 import { NodeFieldElementIntegerSettings } from 'features/nodes/components/sidePanel/builder/NodeFieldElementIntegerSettings';
 import { NodeFieldElementStringSettings } from 'features/nodes/components/sidePanel/builder/NodeFieldElementStringSettings';
 import { useInputFieldTemplateOrThrow } from 'features/nodes/hooks/useInputFieldTemplateOrThrow';
-import { formElementNodeFieldDataChanged } from 'features/nodes/store/workflowSlice';
+import { formElementNodeFieldDataChanged } from 'features/nodes/store/nodesSlice';
 import {
   isFloatFieldInputTemplate,
   isIntegerFieldInputTemplate,