From 418cdbabb7276e922cf7e3b25dbed42ff308649e Mon Sep 17 00:00:00 2001 From: Mary Hipp Date: Fri, 26 Jan 2024 11:23:54 -0500 Subject: [PATCH 1/2] add option for workflowCategories --- .../web/src/app/components/InvokeAIUI.tsx | 14 ++++ .../store/nanostores/workflowCategories.ts | 4 + .../components/WorkflowLibraryList.tsx | 79 +++++++++++-------- 3 files changed, 63 insertions(+), 34 deletions(-) create mode 100644 invokeai/frontend/web/src/app/store/nanostores/workflowCategories.ts diff --git a/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx b/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx index 68cce1fd8f..0ae8f04d9d 100644 --- a/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx +++ b/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx @@ -23,6 +23,8 @@ import React, { lazy, memo, useEffect, useMemo } from 'react'; import { Provider } from 'react-redux'; import { addMiddleware, resetMiddlewares } from 'redux-dynamic-middlewares'; import type { ManagerOptions, SocketOptions } from 'socket.io-client'; +import { WorkflowCategory } from '../../features/nodes/types/workflow'; +import { $workflowCategories } from '../store/nanostores/workflowCategories'; const App = lazy(() => import('./App')); const ThemeLocaleProvider = lazy(() => import('./ThemeLocaleProvider')); @@ -45,6 +47,7 @@ interface Props extends PropsWithChildren { socketOptions?: Partial; isDebugging?: boolean; logo?: ReactNode; + workflowCategories?: WorkflowCategory[]; } const InvokeAIUI = ({ @@ -62,6 +65,7 @@ const InvokeAIUI = ({ socketOptions, isDebugging = false, logo, + workflowCategories, }: Props) => { useEffect(() => { // configure API client token @@ -156,6 +160,16 @@ const InvokeAIUI = ({ }; }, [logo]); + useEffect(() => { + if (workflowCategories) { + $workflowCategories.set(workflowCategories); + } + + return () => { + $workflowCategories.set([]); + }; + }, [workflowCategories]); + useEffect(() => { if (socketOptions) { $socketOptions.set(socketOptions); diff --git a/invokeai/frontend/web/src/app/store/nanostores/workflowCategories.ts b/invokeai/frontend/web/src/app/store/nanostores/workflowCategories.ts new file mode 100644 index 0000000000..6ffc4cf77f --- /dev/null +++ b/invokeai/frontend/web/src/app/store/nanostores/workflowCategories.ts @@ -0,0 +1,4 @@ +import { atom } from 'nanostores'; +import { WorkflowCategory } from '../../../features/nodes/types/workflow'; + +export const $workflowCategories = atom(["user", "default"]); diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx index 9e8adb6503..a3f4b154c2 100644 --- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx +++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx @@ -34,6 +34,7 @@ import type { } from 'services/api/types'; import { useDebounce } from 'use-debounce'; import { z } from 'zod'; +import { $workflowCategories } from '../../../app/store/nanostores/workflowCategories'; const PER_PAGE = 10; @@ -58,10 +59,13 @@ const DIRECTION_OPTIONS: ComboboxOption[] = [ const WorkflowLibraryList = () => { const { t } = useTranslation(); - const [category, setCategory] = useState('user'); + const workflowCategories = useStore($workflowCategories); + const [selectedCategory, setSelectedCategory] = + useState('user'); const [page, setPage] = useState(0); const [query, setQuery] = useState(''); const projectId = useStore($projectId); + const orderByOptions = useMemo(() => { return projectId ? ORDER_BY_OPTIONS.filter((option) => option.value !== 'opened_at') @@ -75,13 +79,13 @@ const WorkflowLibraryList = () => { const [debouncedQuery] = useDebounce(query, 500); const queryArg = useMemo[0]>(() => { - if (category !== 'default') { + if (selectedCategory !== 'default') { return { page, per_page: PER_PAGE, order_by, direction, - category, + category: selectedCategory, query: debouncedQuery, }; } @@ -90,10 +94,10 @@ const WorkflowLibraryList = () => { per_page: PER_PAGE, order_by: 'name' as const, direction: 'ASC' as const, - category, + category: selectedCategory, query: debouncedQuery, }; - }, [category, debouncedQuery, direction, order_by, page]); + }, [selectedCategory, debouncedQuery, direction, order_by, page]); const { data, isLoading, isError, isFetching } = useListWorkflowsQuery(queryArg); @@ -154,43 +158,42 @@ const WorkflowLibraryList = () => { ); const handleSetCategory = useCallback((category: WorkflowCategory) => { - setCategory(category); + setSelectedCategory(category); setPage(0); }, []); return ( <> - - - - {projectId ? ( + + + {workflowCategories.map((category) => ( - ) : ( - - )} + ))} - - {category !== 'default' && ( + {selectedCategory !== 'default' && ( <> - + {t('common.orderBy')} { onChange={onChangeOrderBy} /> - + {t('common.direction')} { )} - + Date: Fri, 26 Jan 2024 16:46:26 -0500 Subject: [PATCH 2/2] lint --- invokeai/frontend/web/src/app/components/InvokeAIUI.tsx | 4 ++-- .../web/src/app/store/nanostores/workflowCategories.ts | 7 +++++-- .../workflowLibrary/components/WorkflowLibraryList.tsx | 6 +++--- 3 files changed, 10 insertions(+), 7 deletions(-) diff --git a/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx b/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx index 0ae8f04d9d..12611943bc 100644 --- a/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx +++ b/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx @@ -14,17 +14,17 @@ import { $openAPISchemaUrl } from 'app/store/nanostores/openAPISchemaUrl'; import { $projectId } from 'app/store/nanostores/projectId'; import { $queueId, DEFAULT_QUEUE_ID } from 'app/store/nanostores/queueId'; import { $store } from 'app/store/nanostores/store'; +import { $workflowCategories } from 'app/store/nanostores/workflowCategories'; import { createStore } from 'app/store/store'; import type { PartialAppConfig } from 'app/types/invokeai'; import Loading from 'common/components/Loading/Loading'; import AppDndContext from 'features/dnd/components/AppDndContext'; +import type { WorkflowCategory } from 'features/nodes/types/workflow'; import type { PropsWithChildren, ReactNode } from 'react'; import React, { lazy, memo, useEffect, useMemo } from 'react'; import { Provider } from 'react-redux'; import { addMiddleware, resetMiddlewares } from 'redux-dynamic-middlewares'; import type { ManagerOptions, SocketOptions } from 'socket.io-client'; -import { WorkflowCategory } from '../../features/nodes/types/workflow'; -import { $workflowCategories } from '../store/nanostores/workflowCategories'; const App = lazy(() => import('./App')); const ThemeLocaleProvider = lazy(() => import('./ThemeLocaleProvider')); diff --git a/invokeai/frontend/web/src/app/store/nanostores/workflowCategories.ts b/invokeai/frontend/web/src/app/store/nanostores/workflowCategories.ts index 6ffc4cf77f..a643219c66 100644 --- a/invokeai/frontend/web/src/app/store/nanostores/workflowCategories.ts +++ b/invokeai/frontend/web/src/app/store/nanostores/workflowCategories.ts @@ -1,4 +1,7 @@ +import type { WorkflowCategory } from 'features/nodes/types/workflow'; import { atom } from 'nanostores'; -import { WorkflowCategory } from '../../../features/nodes/types/workflow'; -export const $workflowCategories = atom(["user", "default"]); +export const $workflowCategories = atom([ + 'user', + 'default', +]); diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx index a3f4b154c2..0aeab01680 100644 --- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx +++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx @@ -11,10 +11,10 @@ import { Input, InputGroup, InputRightElement, - Spacer, } from '@invoke-ai/ui'; import { useStore } from '@nanostores/react'; import { $projectId } from 'app/store/nanostores/projectId'; +import { $workflowCategories } from 'app/store/nanostores/workflowCategories'; import { IAINoContentFallback, IAINoContentFallbackWithSpinner, @@ -34,7 +34,6 @@ import type { } from 'services/api/types'; import { useDebounce } from 'use-debounce'; import { z } from 'zod'; -import { $workflowCategories } from '../../../app/store/nanostores/workflowCategories'; const PER_PAGE = 10; @@ -170,11 +169,12 @@ const WorkflowLibraryList = () => { h={16} flexShrink={0} flexGrow={0} - justifyContent={'space-between'} + justifyContent="space-between" > {workflowCategories.map((category) => (