Category UI state

frontend/src/context/plugin.tsx

@@ -2,7 +2,12 @@ import { isArray } from 'lodash';
 import { createContext, ReactNode, useContext } from 'react';
 import { DeepPartial } from 'utility-types';
 
-import { PluginData, PluginRepoData, PluginRepoFetchError } from '@/types';
+import {
+  HubDimension,
+  PluginData,
+  PluginRepoData,
+  PluginRepoFetchError,
+} from '@/types';
 import { formatDate } from '@/utils';
 
 /**
@@ -62,6 +67,10 @@ export function usePluginState(): PluginState {
 export function usePluginMetadata() {
   const { plugin } = usePluginState();
 
+  function getCategoryValue(dimension: HubDimension) {
+    return plugin?.category ? plugin.category[dimension] ?? [] : [];
+  }
+
   return {
     name: {
       name: 'Plugin name',
@@ -184,9 +193,27 @@ export function usePluginMetadata() {
       name: 'Citation information',
       value: plugin?.citations,
     },
+
+    workflowSteps: {
+      name: 'Workflow step',
+      value: getCategoryValue('Workflow step'),
+    },
+
+    imageModality: {
+      name: 'Image modality',
+      value: getCategoryValue('Image modality'),
+    },
+
+    supportedData: {
+      name: 'Supported data',
+      value: getCategoryValue('Supported data'),
+    },
   };
 }
 
 export type Metadata = ReturnType<typeof usePluginMetadata>;
 
-export type MetadataKeys = keyof Metadata;
+export type MetadataKeys = keyof Omit<
+  Metadata,
+  'workflowSteps' | 'imageModality' | 'supportedData'
+>;

frontend/src/pages/index.tsx

@@ -8,6 +8,7 @@ import { ErrorMessage } from '@/components/common/ErrorMessage';
 import { PluginSearch } from '@/components/PluginSearch';
 import { useLoadingState } from '@/context/loading';
 import {
+  initCategoryFilters,
   initOsiApprovedLicenseSet,
   initPageResetListener,
   initSearchEngine,
@@ -51,6 +52,7 @@ export default function Home({ error, index, licenses }: Props) {
 
     if (index) {
       initSearchEngine(index);
+      initCategoryFilters(index);
     }
 
     if (licenses) {

frontend/src/store/search/filters.test.ts

@@ -2,7 +2,12 @@ import { defaultsDeep } from 'lodash';
 import { DeepPartial } from 'utility-types';
 
 import pluginIndex from '@/fixtures/index.json';
-import { DeriveGet, PluginIndexData } from '@/types';
+import {
+  DeriveGet,
+  PluginCategory,
+  PluginCategoryHierarchy,
+  PluginIndexData,
+} from '@/types';
 
 import { filterResults } from './filters';
 import { DEFAULT_STATE, SearchFormStore } from './form.store';
@@ -54,6 +59,23 @@ function getLicenseResults(...licenses: string[]): SearchResult[] {
   return getResults(...plugins);
 }
 
+interface CategoryResultData {
+  category?: PluginCategory;
+  category_hierarchy?: PluginCategoryHierarchy;
+}
+
+function getCategoryResults(
+  ...categoryData: CategoryResultData[]
+): SearchResult[] {
+  const plugins = categoryData.map(({ category, category_hierarchy }) => ({
+    ...pluginIndex[0],
+    category,
+    category_hierarchy,
+  }));
+
+  return getResults(...plugins);
+}
+
 function createMockFilterGet(
   filters: DeepPartial<SearchFormStore['filters']> = {},
 ) {
@@ -239,4 +261,81 @@ describe('filterResults()', () => {
       expect(filtered).toEqual(getLicenseResults('valid'));
     });
   });
+
+  const categoryResults = getCategoryResults(
+    {
+      category: {
+        'Supported data': ['2d', '3d'],
+        'Workflow step': ['foo', 'bar'],
+      },
+    },
+    {
+      category: {
+        'Workflow step': ['bar'],
+      },
+    },
+    {
+      category: {
+        'Image modality': ['foo', 'bar'],
+        'Supported data': ['3d'],
+      },
+    },
+  );
+
+  describe('filter by workflow step', () => {
+    it('should allow all plugins when no filters are enabled', () => {
+      const filtered = filterResults(createMockFilterGet(), categoryResults);
+      expect(filtered).toEqual(categoryResults);
+    });
+
+    it('should filter plugins with matching workflow steps', () => {
+      const filtered = filterResults(
+        createMockFilterGet({
+          workflowStep: {
+            bar: true,
+          },
+        }),
+        categoryResults,
+      );
+      expect(filtered).toEqual(categoryResults.slice(0, 2));
+    });
+  });
+
+  describe('filter by image modality', () => {
+    it('should allow all plugins when no filters are enabled', () => {
+      const filtered = filterResults(createMockFilterGet(), categoryResults);
+      expect(filtered).toEqual(categoryResults);
+    });
+
+    it('should filter plugins with matching workflow steps', () => {
+      const filtered = filterResults(
+        createMockFilterGet({
+          imageModality: {
+            bar: true,
+          },
+        }),
+        categoryResults,
+      );
+      expect(filtered).toEqual([categoryResults[2]]);
+    });
+  });
+
+  describe('filter by supported data', () => {
+    it('should allow all plugins when no filters are enabled', () => {
+      const filtered = filterResults(createMockFilterGet(), categoryResults);
+      expect(filtered).toEqual(categoryResults);
+    });
+
+    it('should filter plugins with matching workflow steps', () => {
+      const filtered = filterResults(
+        createMockFilterGet({
+          supportedData: {
+            '3d': true,
+          },
+        }),
+        categoryResults,
+      );
+      expect(filtered).toEqual([categoryResults[0], categoryResults[2]]);
+    });
+  });
 });

frontend/src/store/search/filters.ts

@@ -5,23 +5,26 @@
 import { satisfies } from '@renovate/pep440';
 import { flow, intersection, isArray, isEmpty, some } from 'lodash';
 
-import { DeriveGet } from '@/types';
+import { DeriveGet, HubDimension } from '@/types';
 
 import { searchFormStore } from './form.store';
 import { SearchResult } from './search.types';
 import { SearchResultTransformFunction } from './types';
 
+function getSelectedKeys(state: Record<string, boolean>): string[] {
+  return Object.entries(state)
+    .filter(([, enabled]) => enabled)
+    .map(([version]) => version);
+}
+
 function filterByPythonVersion(
   get: DeriveGet,
   results: SearchResult[],
 ): SearchResult[] {
   const state = get(searchFormStore).filters.pythonVersions;
 
   // Collect all versions selected on the filter form
-  const selectedVersions = Object.entries(state)
-    .filter(([, enabled]) => enabled)
-    .map(([version]) => version);
-
+  const selectedVersions = getSelectedKeys(state);
   if (isEmpty(selectedVersions)) {
     return results;
   }
@@ -117,11 +120,65 @@ function filterByLicense(
   return results;
 }
 
+interface CreateCategoryFilterOptions {
+  dimension: HubDimension;
+  getState: (get: DeriveGet) => Record<string, boolean>;
+}
+
+/**
+ * Helper for creating category filter functions. Generally this allows us to
+ * create functions that check if the selected category terms match whatever is
+ * in the plugin for a particular category dimension.
+ */
+function createCategoryFilter({
+  dimension,
+  getState,
+}: CreateCategoryFilterOptions) {
+  return (get: DeriveGet, results: SearchResult[]) => {
+    const state = getState(get);
+
+    // Check if the user enabled any of the filters. Return early otherwise.
+    const selectedKeys = getSelectedKeys(state);
+    if (isEmpty(selectedKeys)) {
+      return results;
+    }
+
+    // Return plugins that include at least one selected category.
+    return results.filter(
+      ({ plugin }) =>
+        !isEmpty(
+          intersection(
+            plugin.category ? plugin.category[dimension] : [],
+            selectedKeys,
+          ),
+        ),
+    );
+  };
+}
+
+const filterByWorkflowStep = createCategoryFilter({
+  getState: (get) => get(searchFormStore).filters.workflowStep,
+  dimension: 'Workflow step',
+});
+
+const filterByImageModality = createCategoryFilter({
+  getState: (get) => get(searchFormStore).filters.imageModality,
+  dimension: 'Image modality',
+});
+
+const filterBySupportedData = createCategoryFilter({
+  getState: (get) => get(searchFormStore).filters.supportedData,
+  dimension: 'Supported data',
+});
+
 const FILTERS = [
   filterByPythonVersion,
   filterByOperatingSystem,
   filterByDevelopmentStatus,
   filterByLicense,
+  filterByWorkflowStep,
+  filterByImageModality,
+  filterBySupportedData,
 ];
 
 /**

frontend/src/store/search/form.store.ts

@@ -3,7 +3,7 @@ import { proxy, ref } from 'valtio';
 import { derive, subscribeKey } from 'valtio/utils';
 
 import { BEGINNING_PAGE } from '@/constants/search';
-import { PluginIndexData } from '@/types';
+import { HubDimension, PluginIndexData } from '@/types';
 
 import { DEFAULT_SORT_TYPE } from './constants';
 import { FuseSearchEngine } from './engines';
@@ -45,6 +45,10 @@ export const DEFAULT_STATE = {
       3.8: false,
       3.9: false,
     },
+
+    supportedData: {} as Record<string, boolean>,
+    workflowStep: {} as Record<string, boolean>,
+    imageModality: {} as Record<string, boolean>,
   },
 };
 
@@ -115,6 +119,38 @@ export function initOsiApprovedLicenseSet(licenses: SpdxLicenseData[]): void {
     getOsiApprovedLicenseSet(licenses);
 }
 
+/**
+ * Map of hub dimensions to their corresponding UI state.
+ */
+const CATEGORY_FILTER_STATES: Record<HubDimension, Record<string, boolean>> = {
+  'Image modality': searchFormStore.filters.imageModality,
+  'Supported data': searchFormStore.filters.supportedData,
+  'Workflow step': searchFormStore.filters.workflowStep,
+};
+
+/**
+ * Initialization function that sets up the category filters using the provided
+ * data. This is necessary so that the filters only include a subset of terms
+ * that are included in the current plugin ecosystem.
+ *
+ * @param index The plugin index.
+ */
+export function initCategoryFilters(index: PluginIndexData[]): void {
+  for (const plugin of index) {
+    if (plugin?.category) {
+      for (const [dimension, keys] of Object.entries(plugin.category)) {
+        const state = CATEGORY_FILTER_STATES[dimension as HubDimension];
+
+        for (const key of keys) {
+          if (key) {
+            state[key] = false;
+          }
+        }
+      }
+    }
+  }
+}
+
 export function resetFilters(): void {
   for (const store of Object.values(searchFormStore.filters)) {
     for (const [filterKey, value] of Object.entries(store)) {

frontend/src/types.ts

@@ -8,19 +8,32 @@ export interface PluginAuthor {
 /**
  * Citation formats.
  * */
-
 export interface CitationData {
   citation: string;
   RIS: string;
   BibTex: string;
   APA: string;
 }
 
+export type HubDimension =
+  | 'Workflow step'
+  | 'Supported data'
+  | 'Image modality';
+
+export type PluginCategory = Partial<{
+  [key in HubDimension]: string[];
+}>;
+
+export type PluginCategoryHierarchy = Partial<{
+  [key in HubDimension]: string[][];
+}>;
+
 /**
  * Plugin data used for indexing. This is a subset of the full plugin data.
  */
 export interface PluginIndexData {
   authors: PluginAuthor[] | '';
+  category?: PluginCategory | '';
   description_content_type: string;
   description: string;
   description_text: string;
@@ -39,6 +52,7 @@ export interface PluginIndexData {
  * Interface for plugin data response from backend.
  */
 export interface PluginData extends PluginIndexData {
+  category_hierarchy?: PluginCategoryHierarchy;
   citations?: CitationData | null;
   code_repository: string;
   documentation: string;