ui, db: rand fixes (#3715)

[feat(ui): memoize ImageContextMenu
selector](265996d230)

Without the selector itself being memoized, the gallery was rerendering
on every progress image.

[feat(ui): memoize NextPrevImageButtons
component](a7b8109ac2)

This was rerendering on every progress image, now it doesn't

[fix(ui): correctly set disabled on invoke button during
generation](1c45d18e6d)

It wasn't disabled when it should have been, looked clickable during
generation.

[fix(nodes): remove board_id column from images
table](00e26ffa9a)

This is extraneous; the `board_images` table holds image-board
relationships. @maryhipp

invokeai/app/services/image_record_storage.py

@@ -1,22 +1,16 @@
+import sqlite3
+import threading
 from abc import ABC, abstractmethod
 from datetime import datetime
 from typing import Generic, Optional, TypeVar, cast
-import sqlite3
-import threading
 
 from pydantic import BaseModel, Field
 from pydantic.generics import GenericModel
 
+from invokeai.app.models.image import ImageCategory, ResourceOrigin
 from invokeai.app.models.metadata import ImageMetadata
-from invokeai.app.models.image import (
-    ImageCategory,
-    ResourceOrigin,
-)
 from invokeai.app.services.models.image_record import (
-    ImageRecord,
-    ImageRecordChanges,
-    deserialize_image_record,
-)
+    ImageRecord, ImageRecordChanges, deserialize_image_record)
 
 T = TypeVar("T", bound=BaseModel)
 
@@ -162,7 +156,6 @@ class SqliteImageRecordStorage(ImageRecordStorageBase):
                 node_id TEXT,
                 metadata TEXT,
                 is_intermediate BOOLEAN DEFAULT FALSE,
-                board_id TEXT,
                 created_at DATETIME NOT NULL DEFAULT(STRFTIME('%Y-%m-%d %H:%M:%f', 'NOW')),
                 -- Updated via trigger
                 updated_at DATETIME NOT NULL DEFAULT(STRFTIME('%Y-%m-%d %H:%M:%f', 'NOW')),

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

@@ -1,49 +1,32 @@
-import { MenuItem, MenuList } from '@chakra-ui/react';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { memo, useCallback, useContext } from 'react';
-import {
-  FaExpand,
-  FaFolder,
-  FaFolderPlus,
-  FaShare,
-  FaTrash,
-} from 'react-icons/fa';
-import { ContextMenu, ContextMenuProps } from 'chakra-ui-contextmenu';
-import {
-  resizeAndScaleCanvas,
-  setInitialCanvasImage,
-} from 'features/canvas/store/canvasSlice';
-import { setActiveTab } from 'features/ui/store/uiSlice';
-import { useTranslation } from 'react-i18next';
 import { ExternalLinkIcon } from '@chakra-ui/icons';
-import { IoArrowUndoCircleOutline } from 'react-icons/io5';
+import { MenuItem, MenuList } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
-import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
-import { useRecallParameters } from 'features/parameters/hooks/useRecallParameters';
-import { initialImageSelected } from 'features/parameters/store/actions';
-import { sentImageToCanvas, sentImageToImg2Img } from '../store/actions';
 import { useAppToaster } from 'app/components/Toaster';
-import { AddImageToBoardContext } from '../../../app/contexts/AddImageToBoardContext';
-import { useRemoveImageFromBoardMutation } from 'services/api/endpoints/boardImages';
-import { ImageDTO } from 'services/api/types';
-import { RootState, stateSelector } from 'app/store/store';
+import { stateSelector } from 'app/store/store';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import { ContextMenu, ContextMenuProps } from 'chakra-ui-contextmenu';
 import {
   imagesAddedToBatch,
   selectionAddedToBatch,
 } from 'features/batch/store/batchSlice';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import {
+  resizeAndScaleCanvas,
+  setInitialCanvasImage,
+} from 'features/canvas/store/canvasSlice';
 import { imageToDeleteSelected } from 'features/imageDeletion/store/imageDeletionSlice';
-
-const selector = createSelector(
-  [stateSelector, (state: RootState, imageDTO: ImageDTO) => imageDTO],
-  ({ gallery, batch }, imageDTO) => {
-    const selectionCount = gallery.selection.length;
-    const isInBatch = batch.imageNames.includes(imageDTO.image_name);
-
-    return { selectionCount, isInBatch };
-  },
-  defaultSelectorOptions
-);
+import { useRecallParameters } from 'features/parameters/hooks/useRecallParameters';
+import { initialImageSelected } from 'features/parameters/store/actions';
+import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
+import { setActiveTab } from 'features/ui/store/uiSlice';
+import { memo, useCallback, useContext, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaExpand, FaFolder, FaShare, FaTrash } from 'react-icons/fa';
+import { IoArrowUndoCircleOutline } from 'react-icons/io5';
+import { useRemoveImageFromBoardMutation } from 'services/api/endpoints/boardImages';
+import { ImageDTO } from 'services/api/types';
+import { AddImageToBoardContext } from '../../../app/contexts/AddImageToBoardContext';
+import { sentImageToCanvas, sentImageToImg2Img } from '../store/actions';
 
 type Props = {
   image: ImageDTO;
@@ -51,9 +34,21 @@ type Props = {
 };
 
 const ImageContextMenu = ({ image, children }: Props) => {
-  const { selectionCount, isInBatch } = useAppSelector((state) =>
-    selector(state, image)
+  const selector = useMemo(
+    () =>
+      createSelector(
+        [stateSelector],
+        ({ gallery, batch }) => {
+          const selectionCount = gallery.selection.length;
+          const isInBatch = batch.imageNames.includes(image.image_name);
+
+          return { selectionCount, isInBatch };
+        },
+        defaultSelectorOptions
+      ),
+    [image.image_name]
   );
+  const { selectionCount, isInBatch } = useAppSelector(selector);
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
 

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

@@ -8,7 +8,7 @@ import {
   selectImagesById,
 } from 'features/gallery/store/gallerySlice';
 import { clamp, isEqual } from 'lodash-es';
-import { useCallback, useState } from 'react';
+import { memo, useCallback, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { FaAngleDoubleRight, FaAngleLeft, FaAngleRight } from 'react-icons/fa';
@@ -227,4 +227,4 @@ const NextPrevImageButtons = () => {
   );
 };
 
-export default NextPrevImageButtons;
+export default memo(NextPrevImageButtons);

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

@@ -78,7 +78,7 @@ export default function InvokeButton(props: InvokeButton) {
             aria-label={t('parameters.invoke')}
             type="submit"
             icon={<FaPlay />}
-            isDisabled={!isReady}
+            isDisabled={!isReady || isProcessing}
             onClick={handleInvoke}
             tooltip={t('parameters.invoke')}
             tooltipProps={{ placement: 'top' }}
@@ -95,7 +95,7 @@ export default function InvokeButton(props: InvokeButton) {
           <IAIButton
             aria-label={t('parameters.invoke')}
             type="submit"
-            isDisabled={!isReady}
+            isDisabled={!isReady || isProcessing}
             onClick={handleInvoke}
             colorScheme="accent"
             id="invoke-button"