tidy(ui): refactor parameters panel components to be 1:1 with tabs

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

@@ -11,7 +11,7 @@ import StatusIndicator from 'features/system/components/StatusIndicator';
 import { selectConfigSlice } from 'features/system/store/configSlice';
 import FloatingGalleryButton from 'features/ui/components/FloatingGalleryButton';
 import FloatingParametersPanelButtons from 'features/ui/components/FloatingParametersPanelButtons';
-import ParametersPanelTextToImage from 'features/ui/components/ParametersPanelTextToImage';
+import ParametersPanelTextToImage from 'features/ui/components/ParametersPanels/ParametersPanelTextToImage';
 import ModelManagerTab from 'features/ui/components/tabs/ModelManagerTab';
 import NodesTab from 'features/ui/components/tabs/NodesTab';
 import QueueTab from 'features/ui/components/tabs/QueueTab';
@@ -28,19 +28,22 @@ import type { CSSProperties, MouseEvent, ReactElement, ReactNode } from 'react';
 import { memo, useCallback, useMemo, useRef } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
+import { MdZoomOutMap } from 'react-icons/md';
 import { PiFlowArrowBold } from 'react-icons/pi';
 import { RiBox2Line, RiBrushLine, RiInputMethodLine, RiPlayList2Fill } from 'react-icons/ri';
 import type { ImperativePanelGroupHandle } from 'react-resizable-panels';
 import { Panel, PanelGroup } from 'react-resizable-panels';
 
-import ParametersPanel from './ParametersPanel';
+import ParametersPanelCanvas from './ParametersPanels/ParametersPanelCanvas';
 import ResizeHandle from './tabs/ResizeHandle';
+import UpscalingTab from './tabs/UpscalingTab';
 
 type TabData = {
   id: InvokeTabName;
   translationKey: string;
   icon: ReactElement;
   content: ReactNode;
+  parametersPanel?: ReactNode;
 };
 
 const TAB_DATA: Record<InvokeTabName, TabData> = {
@@ -49,18 +52,27 @@ const TAB_DATA: Record<InvokeTabName, TabData> = {
     translationKey: 'ui.tabs.generation',
     icon: <RiInputMethodLine />,
     content: <TextToImageTab />,
+    parametersPanel: <ParametersPanelTextToImage />,
   },
   canvas: {
     id: 'canvas',
     translationKey: 'ui.tabs.canvas',
     icon: <RiBrushLine />,
     content: <UnifiedCanvasTab />,
+    parametersPanel: <ParametersPanelCanvas />,
+  },
+  upscaling: {
+    id: 'upscaling',
+    translationKey: 'ui.tabs.upscaling',
+    icon: <MdZoomOutMap />,
+    content: <UpscalingTab />,
   },
   workflows: {
     id: 'workflows',
     translationKey: 'ui.tabs.workflows',
     icon: <PiFlowArrowBold />,
     content: <NodesTab />,
+    parametersPanel: <NodeEditorPanelGroup />,
   },
   models: {
     id: 'models',
@@ -81,7 +93,6 @@ const enabledTabsSelector = createMemoizedSelector(selectConfigSlice, (config) =
 );
 
 const NO_GALLERY_PANEL_TABS: InvokeTabName[] = ['models', 'queue'];
-const NO_OPTIONS_PANEL_TABS: InvokeTabName[] = ['models', 'queue'];
 const panelStyles: CSSProperties = { height: '100%', width: '100%' };
 const GALLERY_MIN_SIZE_PX = 310;
 const GALLERY_MIN_SIZE_PCT = 20;
@@ -103,7 +114,6 @@ const InvokeTabs = () => {
       e.target.blur();
     }
   }, []);
-  const shouldShowOptionsPanel = useMemo(() => !NO_OPTIONS_PANEL_TABS.includes(activeTabName), [activeTabName]);
   const shouldShowGalleryPanel = useMemo(() => !NO_GALLERY_PANEL_TABS.includes(activeTabName), [activeTabName]);
 
   const tabs = useMemo(
@@ -232,7 +242,7 @@ const InvokeTabs = () => {
         style={panelStyles}
         storage={panelStorage}
       >
-        {shouldShowOptionsPanel && (
+        {!!TAB_DATA[activeTabName].parametersPanel && (
           <>
             <Panel
               id="options-panel"
@@ -244,7 +254,7 @@ const InvokeTabs = () => {
               onExpand={optionsPanel.onExpand}
               collapsible
             >
-              <ParametersPanelComponent />
+              {TAB_DATA[activeTabName].parametersPanel}
             </Panel>
             <ResizeHandle
               id="options-main-handle"
@@ -280,23 +290,10 @@ const InvokeTabs = () => {
           </>
         )}
       </PanelGroup>
-      {shouldShowOptionsPanel && <FloatingParametersPanelButtons panelApi={optionsPanel} />}
+      {!!TAB_DATA[activeTabName].parametersPanel && <FloatingParametersPanelButtons panelApi={optionsPanel} />}
       {shouldShowGalleryPanel && <FloatingGalleryButton panelApi={galleryPanel} />}
     </Tabs>
   );
 };
 
 export default memo(InvokeTabs);
-
-const ParametersPanelComponent = memo(() => {
-  const activeTabName = useAppSelector(activeTabNameSelector);
-
-  if (activeTabName === 'workflows') {
-    return <NodeEditorPanelGroup />;
-  }
-  if (activeTabName === 'generation') {
-    return <ParametersPanelTextToImage />;
-  }
-  return <ParametersPanel />;
-});
-ParametersPanelComponent.displayName = 'ParametersPanelComponent';

invokeai/frontend/web/src/features/ui/components/ParametersPanels/ParametersPanelCanvas.tsx

@@ -10,7 +10,6 @@ import { ControlSettingsAccordion } from 'features/settingsAccordions/components
 import { GenerationSettingsAccordion } from 'features/settingsAccordions/components/GenerationSettingsAccordion/GenerationSettingsAccordion';
 import { ImageSettingsAccordion } from 'features/settingsAccordions/components/ImageSettingsAccordion/ImageSettingsAccordion';
 import { RefinerSettingsAccordion } from 'features/settingsAccordions/components/RefinerSettingsAccordion/RefinerSettingsAccordion';
-import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 import type { CSSProperties } from 'react';
 import { memo } from 'react';
@@ -20,8 +19,7 @@ const overlayScrollbarsStyles: CSSProperties = {
   width: '100%',
 };
 
-const ParametersPanel = () => {
+const ParametersPanelCanvas = () => {
-  const activeTabName = useAppSelector(activeTabNameSelector);
   const isSDXL = useAppSelector((s) => s.generation.model?.base === 'sdxl');
 
   return (
@@ -34,8 +32,8 @@ const ParametersPanel = () => {
               {isSDXL ? <SDXLPrompts /> : <Prompts />}
               <ImageSettingsAccordion />
               <GenerationSettingsAccordion />
-              {activeTabName !== 'generation' && <ControlSettingsAccordion />}
+              <ControlSettingsAccordion />
-              {activeTabName === 'canvas' && <CompositingSettingsAccordion />}
+              <CompositingSettingsAccordion />
               {isSDXL && <RefinerSettingsAccordion />}
               <AdvancedSettingsAccordion />
             </Flex>
@@ -46,4 +44,4 @@ const ParametersPanel = () => {
   );
 };
 
-export default memo(ParametersPanel);
+export default memo(ParametersPanelCanvas);

invokeai/frontend/web/src/features/ui/components/tabs/UpscalingTab.tsx

@@ -0,0 +1,15 @@
+import { Box } from '@invoke-ai/ui-library';
+import { ImageViewer } from 'features/gallery/components/ImageViewer/ImageViewer';
+import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
+import { memo } from 'react';
+
+const UpscalingTab = () => {
+  const imageViewer = useImageViewer();
+  return (
+    <Box layerStyle="first" position="relative" w="full" h="full" p={2} borderRadius="base">
+      {imageViewer.isOpen && <ImageViewer />}
+    </Box>
+  );
+};
+
+export default memo(UpscalingTab);

invokeai/frontend/web/src/features/ui/store/tabMap.tsx

@@ -1,3 +1,3 @@
-export const TAB_NUMBER_MAP = ['generation', 'canvas', 'workflows', 'models', 'queue'] as const;
+export const TAB_NUMBER_MAP = ['generation', 'canvas', 'upscaling', 'workflows', 'models', 'queue'] as const;
 
 export type InvokeTabName = (typeof TAB_NUMBER_MAP)[number];