cleanup(ui): Remove unused vars + minor bug fixes

invokeai/frontend/web/src/app/selectors/readinessSelector.ts

@@ -13,7 +13,7 @@ export const readinessSelector = createSelector(
     initialCanvasImageSelector,
     activeTabNameSelector,
   ],
-  (generation, system, initialCanvasImage, activeTabName) => {
+  (generation, system) => {
     const {
       prompt,
       shouldGenerateVariations,

invokeai/frontend/web/src/app/store/enhancers/reduxRemember/unserialize.ts

@@ -1,28 +1,17 @@
-import { canvasPersistDenylist } from 'features/canvas/store/canvasPersistDenylist';
 import { initialCanvasState } from 'features/canvas/store/canvasSlice';
-import { galleryPersistDenylist } from 'features/gallery/store/galleryPersistDenylist';
 import { initialGalleryState } from 'features/gallery/store/gallerySlice';
-import { resultsPersistDenylist } from 'features/gallery/store/resultsPersistDenylist';
 import { initialResultsState } from 'features/gallery/store/resultsSlice';
-import { uploadsPersistDenylist } from 'features/gallery/store/uploadsPersistDenylist';
 import { initialUploadsState } from 'features/gallery/store/uploadsSlice';
-import { lightboxPersistDenylist } from 'features/lightbox/store/lightboxPersistDenylist';
 import { initialLightboxState } from 'features/lightbox/store/lightboxSlice';
-import { nodesPersistDenylist } from 'features/nodes/store/nodesPersistDenylist';
 import { initialNodesState } from 'features/nodes/store/nodesSlice';
-import { generationPersistDenylist } from 'features/parameters/store/generationPersistDenylist';
 import { initialGenerationState } from 'features/parameters/store/generationSlice';
-import { postprocessingPersistDenylist } from 'features/parameters/store/postprocessingPersistDenylist';
 import { initialPostprocessingState } from 'features/parameters/store/postprocessingSlice';
 import { initialConfigState } from 'features/system/store/configSlice';
 import { initialModelsState } from 'features/system/store/modelSlice';
-import { modelsPersistDenylist } from 'features/system/store/modelsPersistDenylist';
-import { systemPersistDenylist } from 'features/system/store/systemPersistDenylist';
 import { initialSystemState } from 'features/system/store/systemSlice';
 import { initialHotkeysState } from 'features/ui/store/hotkeysSlice';
-import { uiPersistDenylist } from 'features/ui/store/uiPersistDenylist';
 import { initialUIState } from 'features/ui/store/uiSlice';
-import { defaultsDeep, merge, omit } from 'lodash-es';
+import { defaultsDeep } from 'lodash-es';
 import { UnserializeFunction } from 'redux-remember';
 
 const initialStates: {

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

@@ -1,6 +1,5 @@
 import {
   AnyAction,
-  Store,
   ThunkDispatch,
   combineReducers,
   configureStore,

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

@@ -1,5 +1,5 @@
 import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
-import { AppDispatch, AppThunkDispatch, RootState } from 'app/store/store';
+import { AppThunkDispatch, RootState } from 'app/store/store';
 
 // Use throughout your app instead of plain `useDispatch` and `useSelector`
 export const useAppDispatch = () => useDispatch<AppThunkDispatch>();

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

@@ -12,13 +12,10 @@
  * 'gfpgan'.
  */
 
-import { GalleryCategory } from 'features/gallery/store/gallerySlice';
 import { SelectedImage } from 'features/parameters/store/actions';
-import { FacetoolType } from 'features/parameters/store/postprocessingSlice';
 import { InvokeTabName } from 'features/ui/store/tabMap';
 import { IRect } from 'konva/lib/types';
 import { ImageResponseMetadata, ImageType } from 'services/api';
-import { AnyInvocation } from 'services/events/types';
 import { O } from 'ts-toolbelt';
 
 /**
@@ -279,7 +276,7 @@ export type FoundModelResponse = {
 
 // export type SystemConfigResponse = SystemConfig;
 
-export type ImageResultResponse = Omit<_Image, 'uuid'> & {
+export type ImageResultResponse = Omit<Image, 'uuid'> & {
   boundingBox?: IRect;
   generationMode: InvokeTabName;
 };

invokeai/frontend/web/src/common/components/IAICollapse.tsx

@@ -1,4 +1,4 @@
-import { ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons';
+import { ChevronUpIcon } from '@chakra-ui/icons';
 import { Box, Collapse, Flex, Spacer, Switch } from '@chakra-ui/react';
 import { PropsWithChildren, memo } from 'react';
 

invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts

@@ -22,7 +22,6 @@ import {
   CanvasLayer,
   CanvasLayerState,
   CanvasMaskLine,
-  CanvasSession,
   CanvasState,
   CanvasTool,
   Dimensions,
@@ -30,7 +29,6 @@ import {
   isCanvasBaseImage,
   isCanvasMaskLine,
 } from './canvasTypes';
-import { stringToArray } from 'konva/lib/shapes/Text';
 
 export const initialLayerState: CanvasLayerState = {
   objects: [],

invokeai/frontend/web/src/features/gallery/components/CurrentImageButtons.tsx

@@ -1,11 +1,10 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { get, isEqual, isNumber, isString } from 'lodash-es';
+import { isEqual, isString } from 'lodash-es';
 
 import {
   ButtonGroup,
   Flex,
   FlexProps,
-  FormControl,
   Link,
   useDisclosure,
   useToast,
@@ -15,19 +14,12 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIButton from 'common/components/IAIButton';
 import IAIIconButton from 'common/components/IAIIconButton';
 import IAIPopover from 'common/components/IAIPopover';
-import { setInitialCanvasImage } from 'features/canvas/store/canvasSlice';
+
-import { GalleryState } from 'features/gallery/store/gallerySlice';
 import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors';
 import { setIsLightboxOpen } from 'features/lightbox/store/lightboxSlice';
-import {
-  initialImageChanged,
-  setAllParameters,
-  // setInitialImage,
-  setSeed,
-} from 'features/parameters/store/generationSlice';
 import { postprocessingSelector } from 'features/parameters/store/postprocessingSelectors';
 import { systemSelector } from 'features/system/store/systemSelectors';
-import { SystemState } from 'features/system/store/systemSlice';
+
 import {
   activeTabNameSelector,
   uiSelector,
@@ -165,31 +157,31 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
   const toast = useToast();
   const { t } = useTranslation();
 
-  const { recallPrompt, recallSeed, sendToImageToImage } = useParameters();
+  const { recallPrompt, recallSeed } = useParameters();
 
-  const handleCopyImage = useCallback(async () => {
+  // const handleCopyImage = useCallback(async () => {
-    if (!image?.url) {
+  //   if (!image?.url) {
-      return;
+  //     return;
-    }
+  //   }
 
-    const url = getUrl(image.url);
+  //   const url = getUrl(image.url);
 
-    if (!url) {
+  //   if (!url) {
-      return;
+  //     return;
-    }
+  //   }
 
-    const blob = await fetch(url).then((res) => res.blob());
+  //   const blob = await fetch(url).then((res) => res.blob());
-    const data = [new ClipboardItem({ [blob.type]: blob })];
+  //   const data = [new ClipboardItem({ [blob.type]: blob })];
 
-    await navigator.clipboard.write(data);
+  //   await navigator.clipboard.write(data);
 
-    toast({
+  //   toast({
-      title: t('toast.imageCopied'),
+  //     title: t('toast.imageCopied'),
-      status: 'success',
+  //     status: 'success',
-      duration: 2500,
+  //     duration: 2500,
-      isClosable: true,
+  //     isClosable: true,
-    });
+  //   });
-  }, [getUrl, t, image?.url, toast]);
+  // }, [getUrl, t, image?.url, toast]);
 
   const handleCopyImageLink = useCallback(() => {
     const url = image

invokeai/frontend/web/src/features/gallery/components/HoverableImage.tsx

@@ -5,9 +5,7 @@ import {
   Image,
   MenuItem,
   MenuList,
-  Skeleton,
   useDisclosure,
-  useTheme,
   useToast,
 } from '@chakra-ui/react';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
@@ -98,17 +96,16 @@ const HoverableImage = memo((props: HoverableImageProps) => {
   } = useDisclosure();
 
   const { image, isSelected } = props;
-  const { url, thumbnail, name, metadata } = image;
+  const { url, thumbnail, name } = image;
   const { getUrl } = useGetUrl();
 
   const [isHovered, setIsHovered] = useState<boolean>(false);
 
   const toast = useToast();
-  const { direction } = useTheme();
+
   const { t } = useTranslation();
   const { isFeatureEnabled: isLightboxEnabled } = useFeatureStatus('lightbox');
-  const { recallSeed, recallPrompt, sendToImageToImage, recallInitialImage } =
+  const { recallSeed, recallPrompt, recallInitialImage } = useParameters();
-    useParameters();
 
   const handleMouseOver = () => setIsHovered(true);
   const handleMouseOut = () => setIsHovered(false);

invokeai/frontend/web/src/features/gallery/components/ImageGalleryPanel.tsx

@@ -5,7 +5,6 @@ import {
   // selectPrevImage,
   setGalleryImageMinimumWidth,
 } from 'features/gallery/store/gallerySlice';
-import { InvokeTabName } from 'features/ui/store/tabMap';
 
 import { clamp, isEqual } from 'lodash-es';
 import { useHotkeys } from 'react-hotkeys-hook';
@@ -13,11 +12,7 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import './ImageGallery.css';
 import ImageGalleryContent from './ImageGalleryContent';
 import ResizableDrawer from 'features/ui/components/common/ResizableDrawer/ResizableDrawer';
-import {
+import { setShouldShowGallery } from 'features/ui/store/uiSlice';
-  setShouldShowGallery,
-  toggleGalleryPanel,
-  togglePinGalleryPanel,
-} from 'features/ui/store/uiSlice';
 import { createSelector } from '@reduxjs/toolkit';
 import {
   activeTabNameSelector,
@@ -26,8 +21,6 @@ import {
 import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
 import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
 import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors';
-import useResolution from 'common/hooks/useResolution';
-import { Flex } from '@chakra-ui/react';
 import { memo } from 'react';
 
 // const GALLERY_TAB_WIDTHS: Record<

invokeai/frontend/web/src/features/gallery/components/ImageMetaDataViewer/ImageMetadataViewer.tsx

@@ -3,7 +3,6 @@ import {
   Box,
   Center,
   Flex,
-  Heading,
   IconButton,
   Link,
   Text,
@@ -19,8 +18,6 @@ import {
   setCfgScale,
   setHeight,
   setImg2imgStrength,
-  // setInitialImage,
-  setMaskPath,
   setPerlin,
   setSampler,
   setSeamless,
@@ -31,15 +28,7 @@ import {
   setThreshold,
   setWidth,
 } from 'features/parameters/store/generationSlice';
-import {
+import { setHiresFix } from 'features/parameters/store/postprocessingSlice';
-  setCodeformerFidelity,
-  setFacetoolStrength,
-  setFacetoolType,
-  setHiresFix,
-  setUpscalingDenoising,
-  setUpscalingLevel,
-  setUpscalingStrength,
-} from 'features/parameters/store/postprocessingSlice';
 import { setShouldShowImageDetails } from 'features/ui/store/uiSlice';
 import { memo } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';

invokeai/frontend/web/src/features/gallery/store/gallerySelectors.ts

@@ -1,23 +1,14 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { RootState } from 'app/store/store';
 import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors';
-import { configSelector } from 'features/system/store/configSelectors';
+
-import { systemSelector } from 'features/system/store/systemSelectors';
 import {
   activeTabNameSelector,
   uiSelector,
 } from 'features/ui/store/uiSelectors';
 import { isEqual } from 'lodash-es';
-import {
+import { selectResultsById, selectResultsEntities } from './resultsSlice';
-  selectResultsAll,
+import { selectUploadsAll, selectUploadsById } from './uploadsSlice';
-  selectResultsById,
-  selectResultsEntities,
-} from './resultsSlice';
-import {
-  selectUploadsAll,
-  selectUploadsById,
-  selectUploadsEntities,
-} from './uploadsSlice';
 
 export const gallerySelector = (state: RootState) => state.gallery;
 

invokeai/frontend/web/src/features/gallery/store/uploadsSlice.ts

@@ -6,7 +6,7 @@ import {
   receivedUploadImagesPage,
   IMAGES_PER_PAGE,
 } from 'services/thunks/gallery';
-import { imageDeleted, imageUploaded } from 'services/thunks/image';
+import { imageDeleted } from 'services/thunks/image';
 import { deserializeImageResponse } from 'services/util/deserializeImageResponse';
 
 export const uploadsAdapter = createEntityAdapter<Image>({

invokeai/frontend/web/src/features/lightbox/components/ReactPanZoomImage.tsx

@@ -4,7 +4,7 @@ import * as InvokeAI from 'app/types/invokeai';
 import { useGetUrl } from 'common/util/getUrl';
 
 type ReactPanZoomProps = {
-  image: InvokeAI._Image;
+  image: InvokeAI.Image;
   styleClass?: string;
   alt?: string;
   ref?: React.Ref<HTMLImageElement>;

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

@@ -1,5 +1,3 @@
-import { v4 as uuidv4 } from 'uuid';
-
 import 'reactflow/dist/style.css';
 import { memo, useCallback } from 'react';
 import {
@@ -8,12 +6,11 @@ import {
   MenuButton,
   MenuList,
   MenuItem,
-  IconButton,
 } from '@chakra-ui/react';
-import { FaEllipsisV, FaPlus } from 'react-icons/fa';
+import { FaEllipsisV } from 'react-icons/fa';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { nodeAdded } from '../store/nodesSlice';
-import { cloneDeep, map } from 'lodash-es';
+import { map } from 'lodash-es';
 import { RootState } from 'app/store/store';
 import { useBuildInvocation } from '../hooks/useBuildInvocation';
 import { addToast } from 'features/system/store/systemSlice';

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

@@ -1,12 +1,6 @@
 import { Tooltip } from '@chakra-ui/react';
-import { CSSProperties, memo, useMemo } from 'react';
+import { CSSProperties, memo } from 'react';
-import {
+import { Handle, Position, Connection, HandleType } from 'reactflow';
-  Handle,
-  Position,
-  Connection,
-  HandleType,
-  useReactFlow,
-} from 'reactflow';
 import { FIELDS, HANDLE_TOOLTIP_OPEN_DELAY } from '../types/constants';
 // import { useConnectionEventStyles } from '../hooks/useConnectionEventStyles';
 import { InputFieldTemplate, OutputFieldTemplate } from '../types/types';
@@ -26,9 +20,9 @@ const outputHandleStyles: CSSProperties = {
   right: '-0.5rem',
 };
 
-const requiredConnectionStyles: CSSProperties = {
+// const requiredConnectionStyles: CSSProperties = {
-  boxShadow: '0 0 0.5rem 0.5rem var(--invokeai-colors-error-400)',
+//   boxShadow: '0 0 0.5rem 0.5rem var(--invokeai-colors-error-400)',
-};
+// };
 
 type FieldHandleProps = {
   nodeId: string;
@@ -39,8 +33,8 @@ type FieldHandleProps = {
 };
 
 const FieldHandle = (props: FieldHandleProps) => {
-  const { nodeId, field, isValidConnection, handleType, styles } = props;
+  const { field, isValidConnection, handleType, styles } = props;
-  const { name, title, type, description } = field;
+  const { name, type } = field;
 
   return (
     <Tooltip

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

@@ -23,7 +23,6 @@ import TopRightPanel from './panels/TopRightPanel';
 import TopCenterPanel from './panels/TopCenterPanel';
 import BottomLeftPanel from './panels/BottomLeftPanel.tsx';
 import MinimapPanel from './panels/MinimapPanel';
-import NodeSearch from './search/NodeSearch';
 
 const nodeTypes = { invocation: InvocationComponent };
 
@@ -78,8 +77,7 @@ export const Flow = () => {
         style: { strokeWidth: 2 },
       }}
     >
-      <NodeSearch />
+      <TopLeftPanel />
-      {/* <TopLeftPanel /> */}
       <TopCenterPanel />
       <TopRightPanel />
       <BottomLeftPanel />

invokeai/frontend/web/src/features/nodes/components/IAINode/IAINodeHeader.tsx

@@ -1,6 +1,6 @@
 import { Flex, Heading, Tooltip, Icon } from '@chakra-ui/react';
 import { InvocationTemplate } from 'features/nodes/types/types';
-import { memo, MutableRefObject } from 'react';
+import { memo } from 'react';
 import { FaInfoCircle } from 'react-icons/fa';
 
 interface IAINodeHeaderProps {

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

@@ -22,7 +22,7 @@ type InputFieldComponentProps = {
 // build an individual input element based on the schema
 const InputFieldComponent = (props: InputFieldComponentProps) => {
   const { nodeId, field, template } = props;
-  const { type, value } = field;
+  const { type } = field;
 
   if (type === 'string' && template.type === 'string') {
     return (

invokeai/frontend/web/src/features/nodes/components/fields/ImageInputFieldComponent.tsx

@@ -1,16 +1,16 @@
-import { Box, Image, Icon, Flex } from '@chakra-ui/react';
+import { Box, Image } from '@chakra-ui/react';
 import { useAppDispatch } from 'app/store/storeHooks';
 import SelectImagePlaceholder from 'common/components/SelectImagePlaceholder';
 import { useGetUrl } from 'common/util/getUrl';
 import useGetImageByNameAndType from 'features/gallery/hooks/useGetImageByName';
-import useGetImageByUuid from 'features/gallery/hooks/useGetImageByUuid';
+
 import { fieldValueChanged } from 'features/nodes/store/nodesSlice';
 import {
   ImageInputFieldTemplate,
   ImageInputFieldValue,
 } from 'features/nodes/types/types';
 import { DragEvent, memo, useCallback, useState } from 'react';
-import { FaImage } from 'react-icons/fa';
+
 import { ImageType } from 'services/api';
 import { FieldComponentProps } from './types';
 
@@ -18,7 +18,6 @@ const ImageInputFieldComponent = (
   props: FieldComponentProps<ImageInputFieldValue, ImageInputFieldTemplate>
 ) => {
   const { nodeId, field } = props;
-  const { value } = field;
 
   const getImageByNameAndType = useGetImageByNameAndType();
   const dispatch = useAppDispatch();

invokeai/frontend/web/src/features/nodes/components/fields/ItemInputFieldComponent.tsx

@@ -3,7 +3,7 @@ import {
   ItemInputFieldValue,
 } from 'features/nodes/types/types';
 import { memo } from 'react';
-import { FaAddressCard, FaList } from 'react-icons/fa';
+import { FaAddressCard } from 'react-icons/fa';
 import { FieldComponentProps } from './types';
 
 const ItemInputFieldComponent = (

invokeai/frontend/web/src/features/nodes/components/fields/ModelInputFieldComponent.tsx

@@ -1,17 +1,13 @@
 import { Select } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
-import { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { fieldValueChanged } from 'features/nodes/store/nodesSlice';
 import {
   ModelInputFieldTemplate,
   ModelInputFieldValue,
 } from 'features/nodes/types/types';
-import {
+import { selectModelsIds } from 'features/system/store/modelSlice';
-  selectModelsById,
+import { isEqual } from 'lodash-es';
-  selectModelsIds,
-} from 'features/system/store/modelSlice';
-import { isEqual, map } from 'lodash-es';
 import { ChangeEvent, memo } from 'react';
 import { FieldComponentProps } from './types';
 

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

@@ -1,10 +1,10 @@
 import { memo } from 'react';
 import { Panel } from 'reactflow';
-import AddNodeMenu from '../AddNodeMenu';
+import NodeSearch from '../search/NodeSearch';
 
 const TopLeftPanel = () => (
   <Panel position="top-left">
-    <AddNodeMenu />
+    <NodeSearch />
   </Panel>
 );
 

invokeai/frontend/web/src/features/nodes/components/search/NodeSearch.tsx

@@ -2,7 +2,6 @@ import { Box, Flex } from '@chakra-ui/layout';
 import { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIInput from 'common/components/IAIInput';
-import { Panel } from 'reactflow';
 import { map } from 'lodash-es';
 import {
   ChangeEvent,
@@ -192,19 +191,17 @@ const NodeSearch = () => {
   };
 
   return (
-    <Panel position="top-left">
+    <Flex
-      <Flex
+      flexDirection="column"
-        flexDirection="column"
+      tabIndex={1}
-        tabIndex={1}
+      onKeyDown={searchKeyHandler}
-        onKeyDown={searchKeyHandler}
+      onFocus={() => setShowNodeList(true)}
-        onFocus={() => setShowNodeList(true)}
+      onBlur={searchInputBlurHandler}
-        onBlur={searchInputBlurHandler}
+      ref={nodeSearchRef}
-        ref={nodeSearchRef}
+    >
-      >
+      <IAIInput value={searchText} onChange={findNode} />
-        <IAIInput value={searchText} onChange={findNode} />
+      {showNodeList && renderNodeList()}
-        {showNodeList && renderNodeList()}
+    </Flex>
-      </Flex>
-    </Panel>
   );
 };
 

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

@@ -11,7 +11,7 @@ import {
   NodeChange,
   OnConnectStartParams,
 } from 'reactflow';
-import { ColorField, Graph, ImageField } from 'services/api';
+import { ImageField } from 'services/api';
 import { receivedOpenAPISchema } from 'services/thunks/schema';
 import { InvocationTemplate, InvocationValue } from '../types/types';
 import { parseSchema } from '../util/parseSchema';

invokeai/frontend/web/src/features/nodes/types/constants.ts

@@ -1,4 +1,3 @@
-import { getCSSVar } from '@chakra-ui/utils';
 import { FieldType, FieldUIConfig } from './types';
 
 export const HANDLE_TOOLTIP_OPEN_DELAY = 500;

invokeai/frontend/web/src/features/nodes/types/types.ts

@@ -1,9 +1,7 @@
-import { Image } from 'app/types/invokeai';
 import { OpenAPIV3 } from 'openapi-types';
 import { RgbaColor } from 'react-colorful';
 import { ImageField } from 'services/api';
 import { AnyInvocationType } from 'services/events/types';
-import { O } from 'ts-toolbelt';
 
 export type InvocationValue = {
   id: string;

invokeai/frontend/web/src/features/nodes/util/fieldTemplateBuilders.ts

@@ -234,7 +234,6 @@ const buildEnumInputFieldTemplate = ({
 };
 
 const buildArrayInputFieldTemplate = ({
-  schemaObject,
   baseField,
 }: BuildInputFieldArg): ArrayInputFieldTemplate => {
   const template: ArrayInputFieldTemplate = {
@@ -249,7 +248,6 @@ const buildArrayInputFieldTemplate = ({
 };
 
 const buildItemInputFieldTemplate = ({
-  schemaObject,
   baseField,
 }: BuildInputFieldArg): ItemInputFieldTemplate => {
   const template: ItemInputFieldTemplate = {

invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasGraph.ts

@@ -1,8 +1,6 @@
 import { RootState } from 'app/store/store';
 import {
-  DataURLToImageInvocation,
   Edge,
-  Graph,
   ImageToImageInvocation,
   InpaintInvocation,
   IterateInvocation,
@@ -15,10 +13,8 @@ import { buildTxt2ImgNode } from '../nodeBuilders/buildTextToImageNode';
 import { buildRangeNode } from '../nodeBuilders/buildRangeNode';
 import { buildIterateNode } from '../nodeBuilders/buildIterateNode';
 import { buildEdges } from '../edgeBuilders/buildEdges';
-import { getCanvasBaseLayer } from 'features/canvas/util/konvaInstanceProvider';
 import { getCanvasData } from 'features/canvas/util/getCanvasData';
 import { getGenerationMode } from '../getGenerationMode';
-import { v4 as uuidv4 } from 'uuid';
 import { log } from 'app/logging/useLogger';
 import { buildInpaintNode } from '../nodeBuilders/buildInpaintNode';
 
@@ -73,9 +69,7 @@ export const buildCanvasGraphAndBlobs = async (
   }
 
   const {
-    baseDataURL,
     baseBlob,
-    maskDataURL,
     maskBlob,
     baseIsPartiallyTransparent,
     baseIsFullyTransparent,
@@ -112,14 +106,8 @@ export const buildCanvasGraphAndBlobs = async (
   }
 
   if (baseNode.type === 'inpaint') {
-    const {
+    const { seamSize, seamBlur, seamSteps, seamStrength, tileSize } =
-      seamSize,
+      state.generation;
-      seamBlur,
-      seamSteps,
-      seamStrength,
-      tileSize,
-      infillMethod,
-    } = state.generation;
 
     // generationParameters.invert_mask = shouldPreserveMaskedArea;
     // if (boundingBoxScale !== 'none') {

invokeai/frontend/web/src/features/nodes/util/nodeBuilders/buildImageToImageNode.ts

@@ -13,7 +13,7 @@ export const buildImg2ImgNode = (
   overrides: O.Partial<ImageToImageInvocation, 'deep'> = {}
 ): ImageToImageInvocation => {
   const nodeId = uuidv4();
-  const { generation, system, models } = state;
+  const { generation } = state;
 
   const {
     prompt,
@@ -28,9 +28,6 @@ export const buildImg2ImgNode = (
     img2imgStrength: strength,
     shouldFitToWidthHeight: fit,
     shouldRandomizeSeed,
-    shouldUseSeamless,
-    seamlessXAxis,
-    seamlessYAxis,
   } = generation;
 
   const initialImage = initialImageSelector(state);

invokeai/frontend/web/src/features/nodes/util/nodeBuilders/buildInpaintNode.ts

@@ -1,11 +1,6 @@
 import { v4 as uuidv4 } from 'uuid';
 import { RootState } from 'app/store/store';
-import {
+import { InpaintInvocation } from 'services/api';
-  Edge,
-  ImageToImageInvocation,
-  InpaintInvocation,
-  TextToImageInvocation,
-} from 'services/api';
 import { initialImageSelector } from 'features/parameters/store/generationSelectors';
 import { O } from 'ts-toolbelt';
 
@@ -14,7 +9,7 @@ export const buildInpaintNode = (
   overrides: O.Partial<InpaintInvocation, 'deep'> = {}
 ): InpaintInvocation => {
   const nodeId = uuidv4();
-  const { generation, system, models } = state;
+  const { generation, models } = state;
 
   const { selectedModelName } = models;
 

invokeai/frontend/web/src/features/nodes/util/nodeBuilders/buildTextToImageNode.ts

@@ -8,7 +8,7 @@ export const buildTxt2ImgNode = (
   overrides: O.Partial<TextToImageInvocation, 'deep'> = {}
 ): TextToImageInvocation => {
   const nodeId = uuidv4();
-  const { generation, models } = state;
+  const { generation } = state;
 
   const {
     prompt,

invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/ImageToImageSettings.tsx

@@ -1,27 +1,11 @@
-import {
+import { VStack } from '@chakra-ui/react';
-  Box,
-  ButtonGroup,
-  Collapse,
-  Flex,
-  Heading,
-  HStack,
-  Image,
-  Spacer,
-  useDisclosure,
-  VStack,
-} from '@chakra-ui/react';
-import { motion } from 'framer-motion';
 
-import IAIButton from 'common/components/IAIButton';
 import ImageToImageFit from 'features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageFit';
 import ImageToImageStrength from 'features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageStrength';
-import IAIIconButton from 'common/components/IAIIconButton';
 
 import { useTranslation } from 'react-i18next';
 import InitialImagePreview from './InitialImagePreview';
-import { useState } from 'react';
+import InitialImageButtons from 'common/components/ImageToImageButtons';
-import { FaUndo, FaUpload } from 'react-icons/fa';
-import InitialImageButtons from 'common/components/ImageToImageSettingsHeader';
 
 export default function ImageToImageSettings() {
   const { t } = useTranslation();

invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/ImageToImageToggle.tsx

@@ -1,11 +1,9 @@
 import { Flex } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
-import { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAISwitch from 'common/components/IAISwitch';
 import { generationSelector } from 'features/parameters/store/generationSelectors';
-import { isImageToImageEnabledChanged } from 'features/parameters/store/generationSlice';
 import { uiSelector } from 'features/ui/store/uiSelectors';
 import { shouldShowImageParametersChanged } from 'features/ui/store/uiSlice';
 import { ChangeEvent } from 'react';
@@ -25,8 +23,7 @@ const selector = createSelector(
 );
 
 export default function ImageToImageToggle() {
-  const { isImageToImageEnabled, shouldShowImageParameters } =
+  const { shouldShowImageParameters } = useAppSelector(selector);
-    useAppSelector(selector);
 
   const { t } = useTranslation();
 

invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImagePreview.tsx

@@ -1,24 +1,16 @@
-import { Box, Flex, Image, Spinner, Text } from '@chakra-ui/react';
+import { Flex, Image, Spinner } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
-import { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import SelectImagePlaceholder from 'common/components/SelectImagePlaceholder';
 import { useGetUrl } from 'common/util/getUrl';
-import useGetImageByNameAndType from 'features/gallery/hooks/useGetImageByName';
+import { clearInitialImage } from 'features/parameters/store/generationSlice';
-import generationSlice, {
-  clearInitialImage,
-  initialImageChanged,
-} from 'features/parameters/store/generationSlice';
 import { addToast } from 'features/system/store/systemSlice';
 import { isEqual } from 'lodash-es';
 import { DragEvent, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ImageType } from 'services/api';
 import ImageToImageOverlay from 'common/components/ImageToImageOverlay';
-import {
+import { generationSelector } from 'features/parameters/store/generationSelectors';
-  generationSelector,
-  initialImageSelector,
-} from 'features/parameters/store/generationSelectors';
 import { initialImageSelected } from 'features/parameters/store/actions';
 
 const selector = createSelector(
@@ -40,7 +32,6 @@ const InitialImagePreview = () => {
   const { t } = useTranslation();
 
   const [isLoaded, setIsLoaded] = useState(false);
-  const getImageByNameAndType = useGetImageByNameAndType();
 
   const onError = () => {
     dispatch(

invokeai/frontend/web/src/features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse.tsx

@@ -22,8 +22,7 @@ const selector = createSelector(
 
 const ParamSeamlessCollapse = () => {
   const { t } = useTranslation();
-  const { shouldUseSeamless, seamlessXAxis, seamlessYAxis } =
+  const { shouldUseSeamless } = useAppSelector(selector);
-    useAppSelector(selector);
 
   const dispatch = useAppDispatch();
 

invokeai/frontend/web/src/features/parameters/components/Parameters/Seed/ParamSeed.tsx

@@ -1,12 +1,9 @@
-import { Flex, HStack } from '@chakra-ui/react';
 import { NUMPY_RAND_MAX, NUMPY_RAND_MIN } from 'app/constants';
 import { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAINumberInput from 'common/components/IAINumberInput';
 import { setSeed } from 'features/parameters/store/generationSlice';
 import { useTranslation } from 'react-i18next';
-import ParamSeedShuffle from './ParamSeedShuffle';
-import ParamSeedRandomize from './ParamSeedRandomize';
 
 export default function ParamSeed() {
   const seed = useAppSelector((state: RootState) => state.generation.seed);

invokeai/frontend/web/src/features/parameters/components/Parameters/Seed/ParamSeedShuffle.tsx

@@ -3,11 +3,9 @@ import { NUMPY_RAND_MAX, NUMPY_RAND_MIN } from 'app/constants';
 import { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIButton from 'common/components/IAIButton';
-import IAIIconButton from 'common/components/IAIIconButton';
 import randomInt from 'common/util/randomInt';
 import { setSeed } from 'features/parameters/store/generationSlice';
 import { useTranslation } from 'react-i18next';
-import { FaRandom } from 'react-icons/fa';
 
 export default function ParamSeedShuffle() {
   const dispatch = useAppDispatch();

invokeai/frontend/web/src/features/parameters/components/ProcessButtons/CancelButton.tsx

@@ -20,7 +20,6 @@ import {
   MenuList,
   MenuOptionGroup,
   MenuItemOption,
-  IconButton,
 } from '@chakra-ui/react';
 
 import { useHotkeys } from 'react-hotkeys-hook';
@@ -28,8 +27,6 @@ import { useTranslation } from 'react-i18next';
 import { MdCancel, MdCancelScheduleSend } from 'react-icons/md';
 
 import { sessionCanceled } from 'services/thunks/session';
-import { BiChevronDown } from 'react-icons/bi';
-import { FaChevronDown } from 'react-icons/fa';
 import { ChevronDownIcon } from '@chakra-ui/icons';
 
 const cancelButtonSelector = createSelector(

invokeai/frontend/web/src/features/parameters/components/ProcessButtons/ProcessButtons.tsx

@@ -1,18 +1,11 @@
 import { Flex } from '@chakra-ui/react';
-import { useAppSelector } from 'app/store/storeHooks';
-import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import CancelButton from './CancelButton';
 import InvokeButton from './InvokeButton';
-import LoopbackButton from './Loopback';
-import IAICheckbox from 'common/components/IAICheckbox';
-import IAISwitch from 'common/components/IAISwitch';
 
 /**
  * Buttons to start and cancel image generation.
  */
 const ProcessButtons = () => {
-  const activeTabName = useAppSelector(activeTabNameSelector);
-
   return (
     <Flex gap={2}>
       <InvokeButton />

invokeai/frontend/web/src/features/parameters/hooks/useParameters.ts

@@ -1,11 +1,11 @@
-import { UseToastOptions, useToast } from '@chakra-ui/react';
+import { useToast } from '@chakra-ui/react';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { isFinite, isString } from 'lodash-es';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import useSetBothPrompts from './usePrompt';
-import { initialImageChanged, setSeed } from '../store/generationSlice';
+import { setSeed } from '../store/generationSlice';
-import { isImage, isImageField } from 'services/types/guards';
+import { isImageField } from 'services/types/guards';
 import { NUMPY_RAND_MAX } from 'app/constants';
 import { initialImageSelected } from '../store/actions';
 import { Image } from 'app/types/invokeai';

invokeai/frontend/web/src/features/parameters/store/generationSlice.ts

@@ -1,11 +1,8 @@
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
 import * as InvokeAI from 'app/types/invokeai';
-import { getPromptAndNegative } from 'common/util/getPromptAndNegative';
 import promptToString from 'common/util/promptToString';
-import { seedWeightsToString } from 'common/util/seedWeightPairs';
 import { clamp } from 'lodash-es';
-import { ImageField, ImageType } from 'services/api';
 
 export interface GenerationState {
   cfgScale: number;

invokeai/frontend/web/src/features/parameters/store/hiresSlice.ts

@@ -1,6 +1,5 @@
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
-import { FACETOOL_TYPES } from 'app/constants';
 
 export interface HiresState {
   codeformerFidelity: number;

invokeai/frontend/web/src/features/system/components/ModelSelect.tsx

@@ -5,16 +5,9 @@ import { useTranslation } from 'react-i18next';
 
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAISelect from 'common/components/IAISelect';
-import {
+import { selectModelsById, selectModelsIds } from '../store/modelSlice';
-  // modelSelected,
-  selectedModelSelector,
-  selectModelsById,
-  selectModelsIds,
-} from '../store/modelSlice';
 import { RootState } from 'app/store/store';
-import generationSlice, {
+import { modelSelected } from 'features/parameters/store/generationSlice';
-  modelSelected,
-} from 'features/parameters/store/generationSlice';
 import { generationSelector } from 'features/parameters/store/generationSelectors';
 
 const selector = createSelector(

invokeai/frontend/web/src/features/system/components/SiteHeader.tsx

@@ -1,6 +1,5 @@
 import { Flex, Grid } from '@chakra-ui/react';
 import { memo, useState } from 'react';
-import ModelSelect from './ModelSelect';
 import StatusIndicator from './StatusIndicator';
 
 import InvokeAILogoComponent from './InvokeAILogoComponent';

invokeai/frontend/web/src/features/system/components/StatusIndicator.tsx

@@ -43,7 +43,6 @@ const StatusIndicator = () => {
     currentIteration,
     totalIterations,
     statusTranslationKey,
-    currentStatusHasSteps,
   } = useAppSelector(statusIndicatorSelector);
   const { t } = useTranslation();
   const ref = useRef(null);

invokeai/frontend/web/src/features/system/hooks/useIsApplicationReady.ts

@@ -1,5 +1,4 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { RootState } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useMemo } from 'react';
 import { configSelector } from '../store/configSelectors';

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

@@ -1,5 +1,3 @@
-import { createSelector } from '@reduxjs/toolkit';
 import { RootState } from 'app/store/store';
-import { reduce } from 'lodash-es';
 
 export const modelSelector = (state: RootState) => state.models;

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

@@ -1,7 +1,6 @@
-import { createEntityAdapter, PayloadAction } from '@reduxjs/toolkit';
+import { createEntityAdapter } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
 import { RootState } from 'app/store/store';
-import { keys, sample } from 'lodash-es';
 import { CkptModelInfo, DiffusersModelInfo } from 'services/api';
 import { receivedModels } from 'services/thunks/model';
 

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

@@ -15,7 +15,6 @@ import {
 } from 'services/events/actions';
 
 import { ProgressImage } from 'services/events/types';
-import { initialImageChanged } from 'features/parameters/store/generationSlice';
 import { makeToast } from '../hooks/useToastWatcher';
 import { sessionCanceled, sessionInvoked } from 'services/thunks/session';
 import { receivedModels } from 'services/thunks/model';
@@ -284,8 +283,7 @@ export const systemSlice = createSlice({
     /**
      * Socket Connected
      */
-    builder.addCase(socketConnected, (state, action) => {
+    builder.addCase(socketConnected, (state) => {
-      const { timestamp } = action.payload;
       state.isConnected = true;
       state.isCancelable = true;
       state.isProcessing = false;
@@ -300,9 +298,7 @@ export const systemSlice = createSlice({
     /**
      * Socket Disconnected
      */
-    builder.addCase(socketDisconnected, (state, action) => {
+    builder.addCase(socketDisconnected, (state) => {
-      const { timestamp } = action.payload;
-
       state.isConnected = false;
       state.isProcessing = false;
       state.isCancelable = true;
@@ -317,7 +313,7 @@ export const systemSlice = createSlice({
     /**
      * Invocation Started
      */
-    builder.addCase(invocationStarted, (state, action) => {
+    builder.addCase(invocationStarted, (state) => {
       state.isCancelable = true;
       state.isProcessing = true;
       state.currentStatusHasSteps = false;
@@ -332,14 +328,7 @@ export const systemSlice = createSlice({
      * Generator Progress
      */
     builder.addCase(generatorProgress, (state, action) => {
-      const {
+      const { step, total_steps, progress_image } = action.payload.data;
-        step,
-        total_steps,
-        progress_image,
-        node,
-        source_node_id,
-        graph_execution_state_id,
-      } = action.payload.data;
 
       state.isProcessing = true;
       state.isCancelable = true;
@@ -356,7 +345,7 @@ export const systemSlice = createSlice({
      * Invocation Complete
      */
     builder.addCase(invocationComplete, (state, action) => {
-      const { data, timestamp } = action.payload;
+      const { data } = action.payload;
 
       // state.currentIteration = 0;
       // state.totalIterations = 0;
@@ -374,9 +363,7 @@ export const systemSlice = createSlice({
     /**
      * Invocation Error
      */
-    builder.addCase(invocationError, (state, action) => {
+    builder.addCase(invocationError, (state) => {
-      const { data, timestamp } = action.payload;
-
       state.isProcessing = false;
       state.isCancelable = true;
       // state.currentIteration = 0;
@@ -410,8 +397,6 @@ export const systemSlice = createSlice({
      * Session Canceled
      */
     builder.addCase(sessionCanceled.fulfilled, (state, action) => {
-      const { timestamp } = action.payload;
-
       state.canceledSession = action.meta.arg.sessionId;
       state.isProcessing = false;
       state.isCancelable = false;
@@ -428,9 +413,7 @@ export const systemSlice = createSlice({
     /**
      * Session Canceled
      */
-    builder.addCase(graphExecutionStateComplete, (state, action) => {
+    builder.addCase(graphExecutionStateComplete, (state) => {
-      const { timestamp } = action.payload;
-
       state.isProcessing = false;
       state.isCancelable = false;
       state.isCancelScheduled = false;

invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx

@@ -81,12 +81,8 @@ const InvokeTabs = () => {
     (state: RootState) => state.lightbox.isLightboxOpen
   );
 
-  const {
+  const { shouldPinGallery, shouldPinParametersPanel, shouldShowGallery } =
-    shouldPinGallery,
+    useAppSelector((state: RootState) => state.ui);
-    shouldPinParametersPanel,
-    shouldShowGallery,
-    shouldShowParametersPanel,
-  } = useAppSelector((state: RootState) => state.ui);
 
   const { t } = useTranslation();
 

invokeai/frontend/web/src/features/ui/components/ParametersDrawer.tsx

@@ -1,8 +1,7 @@
-import { isEqual } from 'lodash-es';
 import { createSelector } from '@reduxjs/toolkit';
 import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { PropsWithChildren, memo, useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { Box, Flex } from '@chakra-ui/react';
 import InvokeAILogoComponent from 'features/system/components/InvokeAILogoComponent';
 import OverlayScrollable from './common/OverlayScrollable';

invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasWorkarea.tsx

@@ -1,19 +1,10 @@
-import { Box, Flex } from '@chakra-ui/react';
 import { useAppSelector } from 'app/store/storeHooks';
 import { memo } from 'react';
-import PinParametersPanelButton from '../../PinParametersPanelButton';
 import { RootState } from 'app/store/store';
-import Scrollable from '../../common/Scrollable';
-import ParametersSlide from '../../ParametersDrawer';
-import UnifiedCanvasParameters from './UnifiedCanvasParameters';
 import UnifiedCanvasContentBeta from './UnifiedCanvasBeta/UnifiedCanvasContentBeta';
 import UnifiedCanvasContent from './UnifiedCanvasContent';
 
 const CanvasWorkspace = () => {
-  const shouldPinParametersPanel = useAppSelector(
-    (state: RootState) => state.ui.shouldPinParametersPanel
-  );
-
   const shouldUseCanvasBetaLayout = useAppSelector(
     (state: RootState) => state.ui.shouldUseCanvasBetaLayout
   );
@@ -23,35 +14,6 @@ const CanvasWorkspace = () => {
   ) : (
     <UnifiedCanvasContent />
   );
-
-  return (
-    <Flex
-      flexDirection={{ base: 'column-reverse', xl: 'row' }}
-      w="full"
-      h="full"
-      gap={4}
-    >
-      {/* {shouldPinParametersPanel ? (
-        <Box width="28rem" flexShrink={0} position="relative">
-          <Scrollable>
-            <UnifiedCanvasParameters />
-          </Scrollable>
-          <PinParametersPanelButton
-            sx={{ position: 'absolute', top: 0, insetInlineEnd: 0 }}
-          />
-        </Box>
-      ) : (
-        <ParametersSlide>
-          <UnifiedCanvasParameters />
-        </ParametersSlide>
-      )} */}
-      {shouldUseCanvasBetaLayout ? (
-        <UnifiedCanvasContentBeta />
-      ) : (
-        <UnifiedCanvasContent />
-      )}
-    </Flex>
-  );
 };
 
 export default memo(CanvasWorkspace);

invokeai/frontend/web/src/services/events/actions.ts

@@ -1,4 +1,4 @@
-import { AnyAction, createAction } from '@reduxjs/toolkit';
+import { createAction } from '@reduxjs/toolkit';
 import {
   GeneratorProgressEvent,
   GraphExecutionStateCompleteEvent,

invokeai/frontend/web/src/services/util/deserializeImageField.ts

@@ -1,6 +1,4 @@
-import { Image } from 'app/types/invokeai';
+import { ImageType } from 'services/api';
-import { ImageField, ImageType } from 'services/api';
-import { AnyInvocation } from 'services/events/types';
 
 export const buildImageUrls = (
   imageType: ImageType,

invokeai/frontend/web/src/services/util/makeGraphOfXImages.ts

@@ -12,12 +12,12 @@ export const makeGraphOfXImages = (numberOfImages: string) =>
         prompt: 'pizza',
         steps: 50,
         seed: 123,
-        sampler_name: 'ddim',
+        scheduler: 'ddim',
       })
     )
     .reduce(
       (acc, val: TextToImageInvocation) => {
-        acc.nodes![val.id] = val;
+        if (acc.nodes) acc.nodes[val.id] = val;
         return acc;
       },
       { nodes: {} } as Graph

invokeai/frontend/web/src/theme/util/constants.ts

@@ -20,4 +20,4 @@ export const APP_TEXT_TO_IMAGE_HEIGHT =
 // option bar
 export const OPTIONS_BAR_MAX_WIDTH = '22.5rem';
 
-export const PARAMETERS_PANEL_WIDTH = '30rem';
+export const PARAMETERS_PANEL_WIDTH = '28rem';