feat(frontend): added a science group template filter

Author: NatLeung96

frontend/dashboard/src/routes/TemplatesListPage.tsx

@@ -1,12 +1,15 @@
-import { Suspense } from "react";
+import { Suspense, useState } from "react";
 import { Link } from "react-router-dom";
 import { Container, Box, Typography } from "@mui/material";
 import { Breadcrumbs } from "@diamondlightsource/sci-react-ui";
-import { WorkflowsNavbar } from "workflows-lib";
+import { WorkflowsNavbar, WorkflowTemplatesFilter } from "workflows-lib";
 import TemplatesListView from "relay-workflows-lib/lib/views/TemplatesListView";
 import WorkflowErrorBoundaryWithRetry from "workflows-lib/lib/components/workflow/WorkflowErrorBoundaryWithRetry";
 
 const TemplatesListPage: React.FC = () => {
+  const [workflowTemplatesFilter, setWorkflowTemplatesFilter] = useState<
+    WorkflowTemplatesFilter | undefined
+  >(undefined);
   return (
     <>
       <WorkflowsNavbar />
@@ -25,7 +28,12 @@ const TemplatesListPage: React.FC = () => {
               }
             >
               <Box mt={2} mb={2}>
-                <TemplatesListView />
+                <TemplatesListView
+                  filter={workflowTemplatesFilter}
+                  setFilter={(newFilter: WorkflowTemplatesFilter) => {
+                    setWorkflowTemplatesFilter(newFilter);
+                  }}
+                />
               </Box>
             </Suspense>
           )}

frontend/relay-workflows-lib/lib/views/TemplatesListView.tsx

@@ -1,15 +1,16 @@
 import { useState, ChangeEvent, useMemo, useEffect } from "react";
 import { graphql, useLazyLoadQuery } from "react-relay";
-import { Box, Pagination } from "@mui/material";
+import { Box, Pagination, Stack } from "@mui/material";
 import { useClientSidePagination } from "../utils/coreUtils";
 import TemplateSearchField from "workflows-lib/lib/components/template/TemplateSearchField";
 import type { TemplatesListViewQuery as TemplatesListViewQueryType } from "./__generated__/TemplatesListViewQuery.graphql";
 import TemplateCard from "../components/TemplateCard";
 import { templateMatchesSearch } from "../utils/useTemplateMatchesSearch";
+import { ScienceGroupSelector, WorkflowTemplatesFilter } from "workflows-lib";
 
 export const TemplatesListViewQuery = graphql`
-  query TemplatesListViewQuery {
-    workflowTemplates {
+  query TemplatesListViewQuery($filter: WorkflowTemplatesFilter) {
+    workflowTemplates(filter: $filter) {
       nodes {
         name
         title
@@ -20,10 +21,16 @@ export const TemplatesListViewQuery = graphql`
   }
 `;
 
-export default function TemplatesListView() {
+export default function TemplatesListView({
+  filter,
+  setFilter,
+}: {
+  filter?: WorkflowTemplatesFilter;
+  setFilter: (filter: WorkflowTemplatesFilter) => void;
+}) {
   const data = useLazyLoadQuery<TemplatesListViewQueryType>(
     TemplatesListViewQuery,
-    {},
+    { filter },
   );
   const [search, setSearch] = useState("");
 
@@ -57,7 +64,10 @@ export default function TemplatesListView() {
 
   return (
     <>
-      <TemplateSearchField handleSearch={handleSearch} />
+      <Stack direction="row" spacing={1}>
+        <TemplateSearchField handleSearch={handleSearch} />
+        <ScienceGroupSelector setFilter={setFilter} />
+      </Stack>
       <Box
         display="flex"
         flexDirection="column"

frontend/workflows-lib/lib/components/template/ScienceGroupSelector.tsx

@@ -0,0 +1,71 @@
+import { useState } from "react";
+import { ScienceGroup, WorkflowTemplatesFilter } from "../../types";
+import {
+  Button,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  OutlinedInput,
+  Select,
+  SelectChangeEvent,
+  Stack,
+} from "@mui/material";
+
+const scienceGroups = [
+  { label: "MX", value: ScienceGroup.MX },
+  { label: "Examples", value: ScienceGroup.Examples },
+  { label: "Magnetic Materials", value: ScienceGroup.MagneticMaterials },
+  { label: "Soft Condensed Matter", value: ScienceGroup.CondensedMatter },
+  { label: "Imaging and Microscopy", value: ScienceGroup.Imaging },
+  { label: "Biological Cryo-Imaging", value: ScienceGroup.BioCryoImaging },
+  { label: "Structures and Surfaces", value: ScienceGroup.Surfaces },
+  { label: "Crystallography", value: ScienceGroup.Crystallography },
+  { label: "Spectroscopy", value: ScienceGroup.Spectroscopy },
+];
+
+export default function ScienceGroupSelector({
+  setFilter,
+}: {
+  setFilter: (filter: WorkflowTemplatesFilter) => void;
+}) {
+  const [scienceGroup, setScienceGroup] = useState<ScienceGroup[]>([]);
+
+  const handleSelect = (event: SelectChangeEvent) => {
+    if (event.target.value == "") {
+      setScienceGroup([]);
+    } else {
+      setScienceGroup([event.target.value as ScienceGroup]);
+    }
+  };
+
+  const handleClick = () => {
+    setFilter({ scienceGroup } as WorkflowTemplatesFilter);
+  };
+
+  return (
+    <>
+      <Stack direction="row" spacing={1}>
+        <FormControl sx={{ width: 300 }}>
+          <InputLabel>Science Group</InputLabel>
+          <Select
+            onChange={handleSelect}
+            value={scienceGroup[0] ?? ""}
+            input={<OutlinedInput label="Science Group" />}
+          >
+            <MenuItem key="No Group" value="">
+              No Group
+            </MenuItem>
+            {scienceGroups.map((item) => (
+              <MenuItem key={item.value} value={item.value}>
+                {item.label}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+        <Button variant="contained" onClick={handleClick}>
+          Apply
+        </Button>
+      </Stack>
+    </>
+  );
+}

frontend/workflows-lib/lib/main.ts

@@ -8,4 +8,5 @@ export { default as FileUploadButton } from "./components/template/controls/File
 export { default as ScanRangeInput } from "./components/template/controls/ScanRangeInput";
 export { default as JsonFormsFileUploadRenderer } from "./components/template/jsonforms/JsonFormsFileUploadRenderer";
 export { default as JsonFormsScanRangeRenderer } from "./components/template/jsonforms/JsonFormsScanRangeRenderer";
+export { default as ScienceGroupSelector } from "./components/template/ScienceGroupSelector";
 export * from "./types";

frontend/workflows-lib/lib/types.ts

@@ -67,6 +67,22 @@ export interface WorkflowQueryFilter {
   workflowStatusFilter?: WorkflowStatusBool;
 }
 
+export enum ScienceGroup {
+  MX = "MX",
+  Examples = "EXAMPLES",
+  MagneticMaterials = "MAGNETIC_MATERIALS",
+  CondensedMatter = "CONDENSED_MATTER",
+  Imaging = "IMAGING",
+  BioCryoImaging = "BIO_CRYO_IMAGING",
+  Surfaces = "SURFACES",
+  Crystallography = "CRYSTALLOGRAPHY",
+  Spectroscopy = "SPECTROSCOPY",
+}
+
+export interface WorkflowTemplatesFilter {
+  scienceGroup?: ScienceGroup[];
+}
+
 export interface WorkflowStatusBool {
   pending?: boolean;
   running?: boolean;