disable panels when app mounts

invokeai/frontend/web/src/app/App.tsx

@@ -13,16 +13,28 @@ import { Box, Flex, Grid, Portal, useColorMode } from '@chakra-ui/react';
 import { APP_HEIGHT, APP_WIDTH } from 'theme/util/constants';
 import ImageGalleryPanel from 'features/gallery/components/ImageGalleryPanel';
 import Lightbox from 'features/lightbox/components/Lightbox';
-import { useAppSelector } from './storeHooks';
+import { useAppDispatch, useAppSelector } from './storeHooks';
 import { PropsWithChildren, useEffect } from 'react';
+import { setDisabledPanels } from 'features/ui/store/uiSlice';
 
 keepGUIAlive();
 
-const App = (props: PropsWithChildren) => {
+interface Props extends PropsWithChildren {
+  options: {
+    disabledPanels: string[];
+  };
+}
+
+const App = (props: Props) => {
   useToastWatcher();
 
   const currentTheme = useAppSelector((state) => state.ui.currentTheme);
   const { setColorMode } = useColorMode();
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    dispatch(setDisabledPanels(props.options.disabledPanels));
+  }, [dispatch, props.options.disabledPanels]);
 
   useEffect(() => {
     setColorMode(['light'].includes(currentTheme) ? 'light' : 'dark');

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

@@ -13,7 +13,7 @@ import lightboxReducer from 'features/lightbox/store/lightboxSlice';
 import generationReducer from 'features/parameters/store/generationSlice';
 import postprocessingReducer from 'features/parameters/store/postprocessingSlice';
 import systemReducer from 'features/system/store/systemSlice';
-import uiReducer, { uiSlice } from 'features/ui/store/uiSlice';
+import uiReducer from 'features/ui/store/uiSlice';
 import apiReducer from 'services/apiSlice';
 
 import { socketioMiddleware } from './socketio/middleware';
@@ -113,25 +113,14 @@ function buildMiddleware() {
   }
 }
 
-interface InitializeStore {
-  disabledPanels?: string[];
-}
-
 // Continue with store setup
-export const initializeStore = ({ disabledPanels = [] }: InitializeStore) =>
-  configureStore({
+export const store = configureStore({
   reducer: persistedReducer,
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware({
       immutableCheck: false,
       serializableCheck: false,
     }).concat(buildMiddleware()),
-    preloadedState: {
-      ui: {
-        ...uiSlice.getInitialState(),
-        disabledParameterPanels: disabledPanels,
-      },
-    },
   devTools: {
     // Uncommenting these very rapidly called actions makes the redux dev tools output much more readable
     actionsDenylist: [
@@ -145,9 +134,7 @@ export const initializeStore = ({ disabledPanels = [] }: InitializeStore) =>
       'canvas/addPointToCurrentLine',
     ],
   },
-  });
-
-const store = initializeStore({});
+});
 
 export type AppGetState = typeof store.getState;
 export type RootState = ReturnType<typeof store.getState>;

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 { initializeStore } from './app/store';
+import { store } from './app/store';
 import { persistor } from './persistor';
 import { OpenAPI } from 'services/api';
 import '@fontsource/inter/100.css';
@@ -27,18 +27,22 @@ interface Props extends PropsWithChildren {
   disabledPanels?: string[];
 }
 
-export default function Component({ apiUrl, disabledPanels, children }: Props) {
+export default function Component({
+  apiUrl,
+  disabledPanels = [],
+  children,
+}: Props) {
   useEffect(() => {
     if (apiUrl) OpenAPI.BASE = apiUrl;
   }, [apiUrl]);
 
   return (
     <React.StrictMode>
-      <Provider store={initializeStore({ disabledPanels })}>
+      <Provider store={store}>
         <PersistGate loading={<Loading />} persistor={persistor}>
           <React.Suspense fallback={<Loading showText />}>
             <ThemeLocaleProvider>
-              <App>{children}</App>
+              <App options={{ disabledPanels }}>{children}</App>
             </ThemeLocaleProvider>
           </React.Suspense>
         </PersistGate>

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

@@ -42,7 +42,7 @@ const ParametersAccordion = (props: ParametersAccordionsType) => {
           accordionInfo[key];
 
         // do not render if panel is disabled in global state
-        if (disabledParameterPanels.indexOf(key) > -1) {
+        if (disabledParameterPanels.indexOf(key) === -1) {
           accordionsToRender.push(
             <InvokeAccordionItem
               key={key}

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

@@ -93,6 +93,9 @@ export const uiSlice = createSlice({
         state.shouldShowParametersPanel = true;
       }
     },
+    setDisabledPanels: (state, action: PayloadAction<string[]>) => {
+      state.disabledParameterPanels = action.payload;
+    },
   },
 });
 
@@ -114,6 +117,7 @@ export const {
   togglePinParametersPanel,
   toggleParametersPanel,
   toggleGalleryPanel,
+  setDisabledPanels,
 } = uiSlice.actions;
 
 export default uiSlice.reducer;

invokeai/frontend/web/src/persistor.ts

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