feat(ui): add queue controls to workflow editor

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

@@ -114,7 +114,7 @@ const NodeWrapper = (props: NodeWrapperProps) => {
           borderRadius: 'md',
           pointerEvents: 'none',
           transitionProperty: 'common',
-          transitionDuration: 'normal',
+          transitionDuration: '0.1s',
           opacity: 0.7,
           shadow: isInProgress ? inProgressShadow : undefined,
           zIndex: -1,

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

@@ -11,6 +11,7 @@ import {
 import 'reactflow/dist/style.css';
 import InspectorPanel from './inspector/InspectorPanel';
 import WorkflowPanel from './workflow/WorkflowPanel';
+import ParamIterations from 'features/parameters/components/Parameters/Core/ParamIterations';
 
 const NodeEditorPanelGroup = () => {
   const [isTopPanelCollapsed, setIsTopPanelCollapsed] = useState(false);
@@ -27,6 +28,20 @@ const NodeEditorPanelGroup = () => {
   return (
     <Flex sx={{ flexDir: 'column', gap: 2, height: '100%', width: '100%' }}>
       <QueueControls />
+      <Flex
+        layerStyle="first"
+        sx={{
+          w: 'full',
+          position: 'relative',
+          borderRadius: 'base',
+          p: 2,
+          pb: 3,
+          gap: 2,
+          flexDir: 'column',
+        }}
+      >
+        <ParamIterations asSlider />
+      </Flex>
       <PanelGroup
         ref={panelGroupRef}
         id="workflow-panel-group"

invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts

@@ -25,6 +25,7 @@ import {
   appSocketInvocationComplete,
   appSocketInvocationError,
   appSocketInvocationStarted,
+  appSocketQueueItemStatusChanged,
 } from 'services/events/actions';
 import { v4 as uuidv4 } from 'uuid';
 import { DRAG_HANDLE_CLASSNAME } from '../types/constants';
@@ -854,6 +855,19 @@ const nodesSlice = createSlice({
         }
       });
     });
+    builder.addCase(appSocketQueueItemStatusChanged, (state, action) => {
+      if (
+        ['completed', 'canceled', 'failed'].includes(action.payload.data.status)
+      ) {
+        forEach(state.nodeExecutionStates, (nes) => {
+          nes.status = NodeStatus.PENDING;
+          nes.error = null;
+          nes.progress = null;
+          nes.progressImage = null;
+          // do not reset nes.outputs, this allows a user to inspect the output of a node across batches
+        });
+      }
+    });
   },
 });
 

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamIterations.tsx

@@ -31,7 +31,11 @@ const selector = createSelector(
   defaultSelectorOptions
 );
 
-const ParamIterations = () => {
+type Props = {
+  asSlider?: boolean;
+};
+
+const ParamIterations = ({ asSlider }: Props) => {
   const {
     iterations,
     initial,
@@ -55,7 +59,7 @@ const ParamIterations = () => {
     dispatch(setIterations(initial));
   }, [dispatch, initial]);
 
-  return shouldUseSliders ? (
+  return asSlider || shouldUseSliders ? (
     <IAISlider
       label={t('parameters.iterations')}
       step={step}

invokeai/frontend/web/src/features/system/store/configSlice.ts

@@ -24,8 +24,8 @@ export const initialConfigState: AppConfig = {
     iterations: {
       initial: 1,
       min: 1,
-      sliderMax: 20,
-      inputMax: 9999,
+      sliderMax: 1000,
+      inputMax: 10000,
       fineStep: 1,
       coarseStep: 1,
     },