Customized workflow browsing

invokeai/frontend/web/public/locales/en.json

@@ -1701,6 +1701,7 @@
         "shared": "Shared",
         "browseWorkflows": "Browse Workflows",
         "deselectAll": "Deselect All",
+        "recommended": "Recommended For You",
         "opened": "Opened",
         "openWorkflow": "Open Workflow",
         "updated": "Updated",

invokeai/frontend/web/src/app/hooks/useStudioInitAction.ts

@@ -12,6 +12,12 @@ import { sentImageToCanvas } from 'features/gallery/store/actions';
 import { parseAndRecallAllMetadata } from 'features/metadata/util/handlers';
 import { $hasTemplates } from 'features/nodes/store/nodesSlice';
 import { $isWorkflowLibraryModalOpen } from 'features/nodes/store/workflowLibraryModal';
+import {
+  $workflowLibraryTagOptions,
+  workflowLibraryTagsReset,
+  workflowLibraryTagToggled,
+  workflowLibraryViewChanged,
+} from 'features/nodes/store/workflowLibrarySlice';
 import { $isStylePresetsMenuOpen, activeStylePresetIdChanged } from 'features/stylePresets/store/stylePresetSlice';
 import { toast } from 'features/toast/toast';
 import { activeTabCanvasRightPanelChanged, setActiveTab } from 'features/ui/store/uiSlice';
@@ -30,9 +36,17 @@ type SendToCanvasAction = _StudioInitAction<'sendToCanvas', { imageName: string
 type UseAllParametersAction = _StudioInitAction<'useAllParameters', { imageName: string }>;
 type StudioDestinationAction = _StudioInitAction<
   'goToDestination',
-  { destination: 'generation' | 'canvas' | 'workflows' | 'upscaling' | 'viewAllWorkflows' | 'viewAllStylePresets' }
+  {
+    destination:
+      | 'generation'
+      | 'canvas'
+      | 'workflows'
+      | 'upscaling'
+      | 'viewAllWorkflows'
+      | 'viewAllWorkflowsRecommended'
+      | 'viewAllStylePresets';
+  }
 >;
-
 // Use global state to show loader until we are ready to render the studio.
 export const $didStudioInit = atom(false);
 
@@ -58,6 +72,7 @@ export const useStudioInitAction = (action?: StudioInitAction) => {
   const didParseOpenAPISchema = useStore($hasTemplates);
   const store = useAppStore();
   const loadWorkflowWithDialog = useLoadWorkflowWithDialog();
+  const workflowLibraryTagOptions = useStore($workflowLibraryTagOptions);
 
   const handleSendToCanvas = useCallback(
     async (imageName: string) => {
@@ -173,14 +188,26 @@ export const useStudioInitAction = (action?: StudioInitAction) => {
           store.dispatch(setActiveTab('workflows'));
           $isWorkflowLibraryModalOpen.set(true);
           break;
+        case 'viewAllWorkflowsRecommended':
+          // Go to the workflows tab and open the workflow library modal with the recommended workflows view
+          store.dispatch(setActiveTab('workflows'));
+          $isWorkflowLibraryModalOpen.set(true);
+          store.dispatch(workflowLibraryViewChanged('defaults'));
+          store.dispatch(workflowLibraryTagsReset());
+          for (const tag of workflowLibraryTagOptions) {
+            if (tag.recommended) {
+              store.dispatch(workflowLibraryTagToggled(tag.label));
+            }
+          }
+          break;
         case 'viewAllStylePresets':
           // Go to the canvas tab and open the style presets menu
           store.dispatch(setActiveTab('canvas'));
           $isStylePresetsMenuOpen.set(true);
           break;
       }
     },
-    [store]
+    [store, workflowLibraryTagOptions]
   );
 
   const handleStudioInitAction = useCallback(

invokeai/frontend/web/src/common/components/OverlayScrollbars/ScrollableContent.tsx

@@ -19,7 +19,7 @@ const styles: CSSProperties = { position: 'absolute', top: 0, left: 0, right: 0,
 
 const ScrollableContent = ({ children, maxHeight, overflowX = 'hidden', overflowY = 'scroll' }: Props) => {
   const overlayscrollbarsOptions = useMemo(
-    () => getOverlayScrollbarsParams(overflowX, overflowY).options,
+    () => getOverlayScrollbarsParams({ overflowX, overflowY }).options,
     [overflowX, overflowY]
   );
   const [os, osRef] = useState<OverlayScrollbarsComponentRef | null>(null);

invokeai/frontend/web/src/common/components/OverlayScrollbars/constants.ts

@@ -20,12 +20,22 @@ export const overlayScrollbarsParams: UseOverlayScrollbarsParams = {
   },
 };
 
-export const getOverlayScrollbarsParams = (
-  overflowX: 'hidden' | 'scroll' = 'hidden',
-  overflowY: 'hidden' | 'scroll' = 'scroll'
-) => {
+export const getOverlayScrollbarsParams = ({
+  overflowX = 'hidden',
+  overflowY = 'scroll',
+  visibility = 'auto',
+}: {
+  overflowX?: 'hidden' | 'scroll';
+  overflowY?: 'hidden' | 'scroll';
+  visibility?: 'auto' | 'hidden' | 'visible';
+}) => {
   const params = deepClone(overlayScrollbarsParams);
-  merge(params, { options: { overflow: { y: overflowY, x: overflowX } } });
+  merge(params, {
+    options: {
+      overflow: { y: overflowY, x: overflowX },
+      scrollbars: { visibility, autoHide: visibility === 'visible' ? 'never' : 'scroll' },
+    },
+  });
   return params;
 };
 

invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/DataViewer.tsx

@@ -21,7 +21,10 @@ type Props = {
   extraCopyActions?: { label: string; getData: (data: unknown) => unknown }[];
 } & FlexProps;
 
-const overlayscrollbarsOptions = getOverlayScrollbarsParams('scroll', 'scroll').options;
+const overlayscrollbarsOptions = getOverlayScrollbarsParams({
+  overflowX: 'scroll',
+  overflowY: 'scroll',
+}).options;
 
 const DataViewer = (props: Props) => {
   const { label, data, fileName, withDownload = true, withCopy = true, extraCopyActions, ...rest } = props;

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/FloatFieldCollectionInputComponent.tsx

@@ -24,7 +24,7 @@ import { PiXBold } from 'react-icons/pi';
 
 import type { FieldComponentProps } from './types';
 
-const overlayscrollbarsOptions = getOverlayScrollbarsParams().options;
+const overlayscrollbarsOptions = getOverlayScrollbarsParams({}).options;
 
 const sx = {
   borderWidth: 1,

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/FloatGeneratorFieldComponent.tsx

@@ -24,7 +24,7 @@ import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDebounce } from 'use-debounce';
 
-const overlayscrollbarsOptions = getOverlayScrollbarsParams().options;
+const overlayscrollbarsOptions = getOverlayScrollbarsParams({}).options;
 
 export const FloatGeneratorFieldInputComponent = memo(
   (props: FieldComponentProps<FloatGeneratorFieldInputInstance, FloatGeneratorFieldInputTemplate>) => {

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldCollectionInputComponent.tsx

@@ -24,7 +24,7 @@ import type { ImageDTO } from 'services/api/types';
 
 import type { FieldComponentProps } from './types';
 
-const overlayscrollbarsOptions = getOverlayScrollbarsParams().options;
+const overlayscrollbarsOptions = getOverlayScrollbarsParams({}).options;
 
 const sx = {
   borderWidth: 1,

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageGeneratorFieldComponent.tsx

@@ -17,7 +17,7 @@ import type { ChangeEvent } from 'react';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const overlayscrollbarsOptions = getOverlayScrollbarsParams().options;
+const overlayscrollbarsOptions = getOverlayScrollbarsParams({}).options;
 
 export const ImageGeneratorFieldInputComponent = memo(
   (props: FieldComponentProps<ImageGeneratorFieldInputInstance, ImageGeneratorFieldInputTemplate>) => {

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/IntegerFieldCollectionInputComponent.tsx

@@ -27,7 +27,7 @@ import { PiXBold } from 'react-icons/pi';
 
 import type { FieldComponentProps } from './types';
 
-const overlayscrollbarsOptions = getOverlayScrollbarsParams().options;
+const overlayscrollbarsOptions = getOverlayScrollbarsParams({}).options;
 
 const sx = {
   borderWidth: 1,

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/IntegerGeneratorFieldComponent.tsx

@@ -27,7 +27,7 @@ import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDebounce } from 'use-debounce';
 
-const overlayscrollbarsOptions = getOverlayScrollbarsParams().options;
+const overlayscrollbarsOptions = getOverlayScrollbarsParams({}).options;
 
 export const IntegerGeneratorFieldInputComponent = memo(
   (props: FieldComponentProps<IntegerGeneratorFieldInputInstance, IntegerGeneratorFieldInputTemplate>) => {

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/StringFieldCollectionInputComponent.tsx

@@ -17,7 +17,7 @@ import { PiXBold } from 'react-icons/pi';
 
 import type { FieldComponentProps } from './types';
 
-const overlayscrollbarsOptions = getOverlayScrollbarsParams().options;
+const overlayscrollbarsOptions = getOverlayScrollbarsParams({}).options;
 
 const sx = {
   borderWidth: 1,

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/StringGeneratorFieldComponent.tsx

@@ -21,7 +21,7 @@ import type { ChangeEvent } from 'react';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const overlayscrollbarsOptions = getOverlayScrollbarsParams().options;
+const overlayscrollbarsOptions = getOverlayScrollbarsParams({}).options;
 
 export const StringGeneratorFieldInputComponent = memo(
   (props: FieldComponentProps<StringGeneratorFieldInputInstance, StringGeneratorFieldInputTemplate>) => {