feat(ui): disable panels based on app props

invokeai/frontend/web/index.d.ts

@@ -68,6 +68,7 @@ declare module '@invoke-ai/invoke-ai-ui' {
 
 interface InvokeProps extends PropsWithChildren {
   apiUrl?: string;
+  disabledPanels?: string[];
 }
 
 declare function Invoke(props: InvokeProps): JSX.Element;

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

@@ -5,16 +5,28 @@ import storage from 'redux-persist/lib/storage'; // defaults to localStorage for
 
 import { getPersistConfig } from 'redux-deep-persist';
 
-import canvasReducer from 'features/canvas/store/canvasSlice';
+import canvasReducer, { canvasSlice } from 'features/canvas/store/canvasSlice';
-import galleryReducer from 'features/gallery/store/gallerySlice';
+import galleryReducer, {
-import resultsReducer from 'features/gallery/store/resultsSlice';
+  gallerySlice,
-import uploadsReducer from 'features/gallery/store/uploadsSlice';
+} from 'features/gallery/store/gallerySlice';
-import lightboxReducer from 'features/lightbox/store/lightboxSlice';
+import resultsReducer, {
-import generationReducer from 'features/parameters/store/generationSlice';
+  resultsSlice,
-import postprocessingReducer from 'features/parameters/store/postprocessingSlice';
+} from 'features/gallery/store/resultsSlice';
-import systemReducer from 'features/system/store/systemSlice';
+import uploadsReducer, {
-import uiReducer from 'features/ui/store/uiSlice';
+  uploadsSlice,
-import apiReducer from 'services/apiSlice';
+} from 'features/gallery/store/uploadsSlice';
+import lightboxReducer, {
+  lightboxSlice,
+} from 'features/lightbox/store/lightboxSlice';
+import generationReducer, {
+  generationSlice,
+} from 'features/parameters/store/generationSlice';
+import postprocessingReducer, {
+  postprocessingSlice,
+} from 'features/parameters/store/postprocessingSlice';
+import systemReducer, { systemSlice } from 'features/system/store/systemSlice';
+import uiReducer, { uiSlice } from 'features/ui/store/uiSlice';
+import apiReducer, { apiSlice } from 'services/apiSlice';
 
 import { socketioMiddleware } from './socketio/middleware';
 import { socketioMiddleware as nodesSocketioMiddleware } from './nodesSocketio/middleware';
@@ -113,14 +125,44 @@ function buildMiddleware() {
   }
 }
 
+interface InitializeStore {
+  disabledPanels?: string[];
+}
+
+const disablePanels = ({
+  disabledPanels,
+  enabledParameterPanels,
+}: {
+  disabledPanels: string[];
+  enabledParameterPanels: { [key: string]: boolean };
+}) => {
+  const updatedParameterPanels: { [key: string]: boolean } = {};
+  Object.keys(enabledParameterPanels).forEach(function (key, index) {
+    updatedParameterPanels[key] =
+      disabledPanels.indexOf(key) >= 0 ? false : true;
+  });
+  return updatedParameterPanels;
+};
+
 // Continue with store setup
-export const store = configureStore({
+export const initializeStore = ({ disabledPanels = [] }: InitializeStore) =>
+  configureStore({
     reducer: persistedReducer,
     middleware: (getDefaultMiddleware) =>
       getDefaultMiddleware({
         immutableCheck: false,
         serializableCheck: false,
       }).concat(buildMiddleware()),
+    preloadedState: {
+      ui: {
+        ...uiSlice.getInitialState(),
+        enabledParameterPanels: disablePanels({
+          disabledPanels,
+          enabledParameterPanels:
+            uiSlice.getInitialState().enabledParameterPanels,
+        }),
+      },
+    },
     devTools: {
       // Uncommenting these very rapidly called actions makes the redux dev tools output much more readable
       actionsDenylist: [
@@ -136,6 +178,8 @@ export const store = configureStore({
     },
   });
 
+const store = initializeStore({});
+
 export type AppGetState = typeof store.getState;
 export type RootState = ReturnType<typeof store.getState>;
 export type AppDispatch = typeof store.dispatch;

invokeai/frontend/web/src/component.tsx

@@ -1,7 +1,7 @@
 import React, { lazy, PropsWithChildren, useEffect } from 'react';
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
-import { store } from './app/store';
+import { initializeStore } from './app/store';
 import { persistor } from './persistor';
 import { OpenAPI } from 'services/api';
 import '@fontsource/inter/100.css';
@@ -24,16 +24,17 @@ const ThemeLocaleProvider = lazy(() => import('./app/ThemeLocaleProvider'));
 
 interface Props extends PropsWithChildren {
   apiUrl?: string;
+  disabledPanels?: string[];
 }
 
-export default function Component({ apiUrl, children }: Props) {
+export default function Component({ apiUrl, disabledPanels, children }: Props) {
   useEffect(() => {
     if (apiUrl) OpenAPI.BASE = apiUrl;
   }, [apiUrl]);
 
   return (
     <React.StrictMode>
-      <Provider store={store}>
+      <Provider store={initializeStore({ disabledPanels })}>
         <PersistGate loading={<Loading />} persistor={persistor}>
           <React.Suspense fallback={<Loading showText />}>
             <ThemeLocaleProvider>

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

@@ -21,9 +21,10 @@ type ParametersAccordionsType = {
 const ParametersAccordion = (props: ParametersAccordionsType) => {
   const { accordionInfo } = props;
 
-  const openAccordions = useAppSelector(
+  const { system, ui } = useAppSelector((state: RootState) => state);
-    (state: RootState) => state.system.openAccordions
+
-  );
+  const { openAccordions } = system;
+  const { enabledParameterPanels } = ui;
 
   const dispatch = useAppDispatch();
 
@@ -39,6 +40,9 @@ const ParametersAccordion = (props: ParametersAccordionsType) => {
       Object.keys(accordionInfo).forEach((key) => {
         const { header, feature, content, additionalHeaderComponents } =
           accordionInfo[key];
+
+        // do not render if panel is disabled in global state
+        if (enabledParameterPanels[key] !== false) {
           accordionsToRender.push(
             <InvokeAccordionItem
               key={key}
@@ -48,6 +52,7 @@ const ParametersAccordion = (props: ParametersAccordionsType) => {
               additionalHeaderComponents={additionalHeaderComponents}
             />
           );
+        }
       });
     }
     return accordionsToRender;

invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageParameters.tsx

@@ -44,7 +44,7 @@ const ImageToImageParameters = () => {
       content: <VariationsSettings />,
       additionalHeaderComponents: <GenerateVariationsToggle />,
     },
-    face_restore: {
+    faceRestore: {
       header: `${t('parameters.faceRestoration')}`,
       feature: Feature.FACE_CORRECTION,
       content: <FaceRestoreSettings />,

invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageParameters.tsx

@@ -38,7 +38,7 @@ const TextToImageParameters = () => {
       content: <VariationsSettings />,
       additionalHeaderComponents: <GenerateVariationsToggle />,
     },
-    face_restore: {
+    faceRestore: {
       header: `${t('parameters.faceRestoration')}`,
       feature: Feature.FACE_CORRECTION,
       content: <FaceRestoreSettings />,

invokeai/frontend/web/src/features/ui/store/uiSlice.ts

@@ -16,6 +16,16 @@ const initialtabsState: UIState = {
   addNewModelUIOption: null,
   shouldPinGallery: true,
   shouldShowGallery: true,
+  enabledParameterPanels: {
+    general: true,
+    seed: true,
+    variations: true,
+    faceRestore: true,
+    upscale: true,
+    symmetry: true,
+    other: true,
+    imageToImage: true,
+  },
 };
 
 const initialState: UIState = initialtabsState;

invokeai/frontend/web/src/features/ui/store/uiTypes.ts

@@ -13,4 +13,5 @@ export interface UIState {
   addNewModelUIOption: AddNewModelType;
   shouldPinGallery: boolean;
   shouldShowGallery: boolean;
+  enabledParameterPanels: { [key: string]: boolean };
 }

invokeai/frontend/web/src/persistor.ts

@@ -1,4 +1,4 @@
-import { store } from 'app/store';
+import { initializeStore } from 'app/store';
 import { persistStore } from 'redux-persist';
 
-export const persistor = persistStore(store);
+export const persistor = persistStore(initializeStore({}));