add base prop for selectedWorkflow to allow loading a workflow on launch

This commit is contained in:
chainchompa 2024-08-14 08:47:02 -04:00
parent f6b8970bd1
commit 471719bbbe
2 changed files with 21 additions and 3 deletions

View File

@ -18,10 +18,11 @@ import { languageSelector } from 'features/system/store/systemSelectors';
import InvokeTabs from 'features/ui/components/InvokeTabs'; import InvokeTabs from 'features/ui/components/InvokeTabs';
import type { InvokeTabName } from 'features/ui/store/tabMap'; import type { InvokeTabName } from 'features/ui/store/tabMap';
import { setActiveTab } from 'features/ui/store/uiSlice'; import { setActiveTab } from 'features/ui/store/uiSlice';
import { useGetAndLoadLibraryWorkflow } from 'features/workflowLibrary/hooks/useGetAndLoadLibraryWorkflow';
import { AnimatePresence } from 'framer-motion'; import { AnimatePresence } from 'framer-motion';
import i18n from 'i18n'; import i18n from 'i18n';
import { size } from 'lodash-es'; import { size } from 'lodash-es';
import { memo, useCallback, useEffect } from 'react'; import { memo, useCallback, useEffect, useRef } from 'react';
import { ErrorBoundary } from 'react-error-boundary'; import { ErrorBoundary } from 'react-error-boundary';
import { useGetOpenAPISchemaQuery } from 'services/api/endpoints/appInfo'; import { useGetOpenAPISchemaQuery } from 'services/api/endpoints/appInfo';
@ -36,14 +37,16 @@ interface Props {
imageName: string; imageName: string;
action: 'sendToImg2Img' | 'sendToCanvas' | 'useAllParameters'; action: 'sendToImg2Img' | 'sendToCanvas' | 'useAllParameters';
}; };
selectedWorkflow?: string;
destination?: InvokeTabName | undefined; destination?: InvokeTabName | undefined;
} }
const App = ({ config = DEFAULT_CONFIG, selectedImage, destination }: Props) => { const App = ({ config = DEFAULT_CONFIG, selectedImage, selectedWorkflow, destination }: Props) => {
const language = useAppSelector(languageSelector); const language = useAppSelector(languageSelector);
const logger = useLogger('system'); const logger = useLogger('system');
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const clearStorage = useClearStorage(); const clearStorage = useClearStorage();
const hasLoadedRef = useRef<boolean>(false);
// singleton! // singleton!
useSocketIO(); useSocketIO();
@ -70,6 +73,19 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage, destination }: Props) =>
} }
}, [dispatch, config, logger]); }, [dispatch, config, logger]);
const { getAndLoadWorkflow } = useGetAndLoadLibraryWorkflow({
onSuccess: () => {
setActiveTab('workflows');
},
});
useEffect(() => {
if (selectedWorkflow && !hasLoadedRef.current) {
getAndLoadWorkflow(selectedWorkflow);
hasLoadedRef.current = true;
}
}, [selectedWorkflow, getAndLoadWorkflow]);
useEffect(() => { useEffect(() => {
if (destination) { if (destination) {
dispatch(setActiveTab(destination)); dispatch(setActiveTab(destination));

View File

@ -44,6 +44,7 @@ interface Props extends PropsWithChildren {
imageName: string; imageName: string;
action: 'sendToImg2Img' | 'sendToCanvas' | 'useAllParameters'; action: 'sendToImg2Img' | 'sendToCanvas' | 'useAllParameters';
}; };
selectedWorkflow?: string;
destination?: InvokeTabName; destination?: InvokeTabName;
customStarUi?: CustomStarUi; customStarUi?: CustomStarUi;
socketOptions?: Partial<ManagerOptions & SocketOptions>; socketOptions?: Partial<ManagerOptions & SocketOptions>;
@ -64,6 +65,7 @@ const InvokeAIUI = ({
projectUrl, projectUrl,
queueId, queueId,
selectedImage, selectedImage,
selectedWorkflow,
destination, destination,
customStarUi, customStarUi,
socketOptions, socketOptions,
@ -221,7 +223,7 @@ const InvokeAIUI = ({
<React.Suspense fallback={<Loading />}> <React.Suspense fallback={<Loading />}>
<ThemeLocaleProvider> <ThemeLocaleProvider>
<AppDndContext> <AppDndContext>
<App config={config} selectedImage={selectedImage} destination={destination} /> <App config={config} selectedImage={selectedImage} selectedWorkflow={selectedWorkflow} destination={destination} />
</AppDndContext> </AppDndContext>
</ThemeLocaleProvider> </ThemeLocaleProvider>
</React.Suspense> </React.Suspense>