Skip to content

ui: workflows recommended followup #7812

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Mar 20, 2025
Merged

ui: workflows recommended followup #7812

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
60233fc
tidy(ui): remove noop useEffect
psychedelicious Mar 20, 2025
f74bd54
tidy(ui): split browse workflows button into own component
psychedelicious Mar 20, 2025
f6e02d9
fix(ui): recommended star stretches tag list layout
psychedelicious Mar 20, 2025
f3ac34d
tidy(ui): remove recommended flag from workflow (believe was for test…
psychedelicious Mar 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 47 additions & 40 deletions ...c/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowLibrarySideNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ import {
import { NewWorkflowButton } from 'features/workflowLibrary/components/NewWorkflowButton';
import { UploadWorkflowButton } from 'features/workflowLibrary/components/UploadWorkflowButton';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
import { memo, useCallback, useEffect, useMemo } from 'react';
import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { PiArrowCounterClockwiseBold, PiStarFill, PiUsersBold } from 'react-icons/pi';
import { useDispatch } from 'react-redux';
Expand All @@ -39,13 +39,6 @@ export const WorkflowLibrarySideNav = () => {
const { t } = useTranslation();
const categoryOptions = useStore($workflowLibraryCategoriesOptions);
const view = useAppSelector(selectWorkflowLibraryView);
const dispatch = useAppDispatch();
const selectedTags = useAppSelector(selectWorkflowLibrarySelectedTags);
const resetTags = useCallback(() => {
dispatch(workflowLibraryTagsReset());
}, [dispatch]);

useEffect(() => {}, [selectedTags, dispatch]);

return (
<Flex h="full" minH={0} overflow="hidden" flexDir="column" w={64} gap={0}>
Expand All @@ -69,26 +62,7 @@ export const WorkflowLibrarySideNav = () => {
)}
</Flex>
<Flex h="full" minH={0} overflow="hidden" flexDir="column">
{view === 'defaults' && selectedTags.length > 0 ? (
<ButtonGroup>
<WorkflowLibraryViewButton view="defaults" w="auto">
{t('workflows.browseWorkflows')}
</WorkflowLibraryViewButton>
<Tooltip label={t('workflows.deselectAll')}>
<IconButton
onClick={resetTags}
size="md"
aria-label={t('workflows.deselectAll')}
icon={<PiArrowCounterClockwiseBold size={12} />}
variant="ghost"
bg="base.700"
color="base.50"
/>
</Tooltip>
</ButtonGroup>
) : (
<WorkflowLibraryViewButton view="defaults">{t('workflows.browseWorkflows')}</WorkflowLibraryViewButton>
)}
<BrowseWorkflowsButton />
<DefaultsViewCheckboxesCollapsible />
</Flex>
<Spacer />
Expand All @@ -98,6 +72,40 @@ export const WorkflowLibrarySideNav = () => {
);
};

const BrowseWorkflowsButton = memo(() => {
const { t } = useTranslation();
const view = useAppSelector(selectWorkflowLibraryView);
const dispatch = useAppDispatch();
const selectedTags = useAppSelector(selectWorkflowLibrarySelectedTags);
const resetTags = useCallback(() => {
dispatch(workflowLibraryTagsReset());
}, [dispatch]);

if (view === 'defaults' && selectedTags.length > 0) {
return (
<ButtonGroup>
<WorkflowLibraryViewButton view="defaults" w="auto">
{t('workflows.browseWorkflows')}
</WorkflowLibraryViewButton>
<Tooltip label={t('workflows.deselectAll')}>
<IconButton
onClick={resetTags}
size="md"
aria-label={t('workflows.deselectAll')}
icon={<PiArrowCounterClockwiseBold size={12} />}
variant="ghost"
bg="base.700"
color="base.50"
/>
</Tooltip>
</ButtonGroup>
);
}

return <WorkflowLibraryViewButton view="defaults">{t('workflows.browseWorkflows')}</WorkflowLibraryViewButton>;
});
BrowseWorkflowsButton.displayName = 'BrowseWorkflowsButton';

const overlayscrollbarsOptions = getOverlayScrollbarsParams({ visibility: 'visible' }).options;

const DefaultsViewCheckboxesCollapsible = memo(() => {
Expand Down Expand Up @@ -237,18 +245,17 @@ const TagCheckbox = memo(({ tag, ...rest }: CheckboxProps & { tag: { label: stri
}

return (
<Checkbox isChecked={isChecked} onChange={onChange} {...rest} flexShrink={0}>
<Flex alignItems="center" gap={2}>
<Text>{`${tag.label} (${count})`}</Text>
{tag.recommended && (
<Tooltip label={t('workflows.recommended')}>
<Box>
<Icon as={PiStarFill} boxSize={4} fill="invokeYellow.500" />
</Box>
</Tooltip>
)}
</Flex>
</Checkbox>
<Flex alignItems="center" gap={2}>
<Checkbox isChecked={isChecked} onChange={onChange} {...rest} flexShrink={0} />
<Text>{`${tag.label} (${count})`}</Text>
{tag.recommended && (
<Tooltip label={t('workflows.recommended')}>
<Box as="span" lineHeight={0}>
<Icon as={PiStarFill} boxSize={4} fill="invokeYellow.500" />
</Box>
</Tooltip>
)}
</Flex>
);
});
TagCheckbox.displayName = 'TagCheckbox';
2 changes: 1 addition & 1 deletion invokeai/frontend/web/src/features/nodes/store/workflowLibrarySlice.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ export const DEFAULT_WORKFLOW_LIBRARY_TAG_CATEGORIES: WorkflowTagCategory[] = [
},
{
categoryTKey: 'Common Tasks',
tags: [{ label: 'Upscaling' }, { label: 'Text to Image' }, { label: 'Image to Image', recommended: true }],
tags: [{ label: 'Upscaling' }, { label: 'Text to Image' }, { label: 'Image to Image' }],
},
{
categoryTKey: 'Model Architecture',
Expand Down