update workflow tag/categories so that we can pass in 1+ selected tags to start with

This commit is contained in:
Mary Hipp
2025-03-19 11:27:56 -04:00
committed by psychedelicious
parent 05de3b7a84
commit c78eac624e
2 changed files with 30 additions and 10 deletions

View File

@@ -27,7 +27,7 @@ import {
import { NewWorkflowButton } from 'features/workflowLibrary/components/NewWorkflowButton';
import { UploadWorkflowButton } from 'features/workflowLibrary/components/UploadWorkflowButton';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
import { memo, useCallback, useMemo } from 'react';
import { memo, useCallback, useEffect, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { PiArrowCounterClockwiseBold, PiUsersBold } from 'react-icons/pi';
import { useDispatch } from 'react-redux';
@@ -43,6 +43,8 @@ export const WorkflowLibrarySideNav = () => {
dispatch(workflowLibraryTagsReset());
}, [dispatch]);
useEffect(() => {}, [selectedTags, dispatch]);
return (
<Flex h="full" minH={0} overflow="hidden" flexDir="column" w={64} gap={0}>
<Flex flexDir="column" w="full" pb={2}>
@@ -121,7 +123,7 @@ const useCountForIndividualTag = (tag: string) => {
const queryArg = useMemo(
() =>
({
tags: allTags,
tags: allTags.map((tag) => tag.label),
categories: ['default'],
}) satisfies Parameters<typeof useGetCountsByTagQuery>[0],
[allTags]
@@ -146,7 +148,7 @@ const useCountForTagCategory = (tagCategory: WorkflowTagCategory) => {
const queryArg = useMemo(
() =>
({
tags: allTags,
tags: allTags.map((tag) => tag.label),
categories: ['default'], // We only allow filtering by tag for default workflows
}) satisfies Parameters<typeof useGetCountsByTagQuery>[0],
[allTags]
@@ -159,7 +161,7 @@ const useCountForTagCategory = (tagCategory: WorkflowTagCategory) => {
return { count: 0 };
}
return {
count: tagCategory.tags.reduce((acc, tag) => acc + (data[tag] ?? 0), 0),
count: tagCategory.tags.reduce((acc, tag) => acc + (data[tag.label] ?? 0), 0),
};
},
}) satisfies Parameters<typeof useGetCountsByTagQuery>[1],
@@ -197,6 +199,15 @@ WorkflowLibraryViewButton.displayName = 'NavButton';
const TagCategory = memo(({ tagCategory }: { tagCategory: WorkflowTagCategory }) => {
const { t } = useTranslation();
const count = useCountForTagCategory(tagCategory);
const dispatch = useAppDispatch();
useEffect(() => {
for (const tag of tagCategory.tags) {
if (tag.selected) {
dispatch(workflowLibraryTagToggled(tag.label));
}
}
}, [count, tagCategory.tags, dispatch]);
if (count === 0) {
return null;
@@ -209,7 +220,7 @@ const TagCategory = memo(({ tagCategory }: { tagCategory: WorkflowTagCategory })
</Text>
<Flex flexDir="column" gap={2} pl={4}>
{tagCategory.tags.map((tag) => (
<TagCheckbox key={tag} tag={tag} />
<TagCheckbox key={tag.label} tag={tag.label} />
))}
</Flex>
</Flex>

View File

@@ -92,12 +92,21 @@ export const selectWorkflowLibraryView = createWorkflowLibrarySelector(({ view }
export const DEFAULT_WORKFLOW_LIBRARY_CATEGORIES = ['user', 'default'] satisfies WorkflowCategory[];
export const $workflowLibraryCategoriesOptions = atom<WorkflowCategory[]>(DEFAULT_WORKFLOW_LIBRARY_CATEGORIES);
export type WorkflowTagCategory = { categoryTKey: string; tags: string[] };
export type WorkflowTagCategory = { categoryTKey: string; tags: Array<{ label: string; selected?: boolean }> };
export const DEFAULT_WORKFLOW_LIBRARY_TAG_CATEGORIES: WorkflowTagCategory[] = [
{ categoryTKey: 'Industry', tags: ['Architecture', 'Fashion', 'Game Dev', 'Food'] },
{ categoryTKey: 'Common Tasks', tags: ['Upscaling', 'Text to Image', 'Image to Image'] },
{ categoryTKey: 'Model Architecture', tags: ['SD1.5', 'SDXL', 'SD3.5', 'FLUX'] },
{ categoryTKey: 'Tech Showcase', tags: ['Control', 'Reference Image'] },
{
categoryTKey: 'Industry',
tags: [{ label: 'Architecture' }, { label: 'Fashion' }, { label: 'Game Dev' }, { label: 'Food' }],
},
{
categoryTKey: 'Common Tasks',
tags: [{ label: 'Upscaling' }, { label: 'Text to Image' }, { label: 'Image to Image' }],
},
{
categoryTKey: 'Model Architecture',
tags: [{ label: 'SD1.5' }, { label: 'SDXL' }, { label: 'SD3.5' }, { label: 'FLUX' }],
},
{ categoryTKey: 'Tech Showcase', tags: [{ label: 'Control' }, { label: 'Reference Image' }] },
];
export const $workflowLibraryTagCategoriesOptions = atom<WorkflowTagCategory[]>(
DEFAULT_WORKFLOW_LIBRARY_TAG_CATEGORIES