feat: Setup types for search data facets (#3576)

editor.planx.uk/src/hooks/useSearch.ts

@@ -1,9 +1,9 @@
-import Fuse, { IFuseOptions } from "fuse.js";
+import Fuse, { FuseOptionKey, IFuseOptions } from "fuse.js";
 import { useEffect, useMemo, useState } from "react";
 
 interface UseSearchProps<T extends object> {
   list: T[];
-  keys: string[];
+  keys: Array<FuseOptionKey<T>>;
 }
 
 export interface SearchResult<T extends object> {
@@ -47,7 +47,7 @@ export const useSearch = <T extends object>({
           (result.matches?.[0].indices as [number, number][]) || undefined,
       })),
     );
-  }, [pattern]);
+  }, [pattern, fuse]);
 
   return { results, search: setPattern };
 };

editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/NodeSearchResults.tsx

@@ -2,7 +2,7 @@ import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
 import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
-import { IndexedNode } from "@opensystemslab/planx-core/types";
+import { ComponentType, IndexedNode } from "@opensystemslab/planx-core/types";
 import type { SearchResults } from "hooks/useSearch";
 import React from "react";
 
@@ -18,6 +18,16 @@ export const Root = styled(List)(({ theme }) => ({
 export const NodeSearchResults: React.FC<{
   results: SearchResults<IndexedNode>;
 }> = ({ results }) => {
+  /** Temporary guard function to filter out component types not yet supported by SearchResultCard */
+  const isSupportedNodeType = (
+    result: SearchResults<IndexedNode>[number],
+  ): boolean =>
+    ![
+      ComponentType.FileUploadAndLabel,
+      ComponentType.Calculate,
+      ComponentType.List,
+    ].includes(result.item.type);
+
   return (
     <>
       <Typography variant="h3" mb={1}>
@@ -27,7 +37,7 @@ export const NodeSearchResults: React.FC<{
       </Typography>
 
       <Root>
-        {results.map((result) => (
+        {results.filter(isSupportedNodeType).map((result) => (
           <ListItem key={result.item.id} disablePadding>
             <SearchResultCard result={result} />
           </ListItem>

editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/facets.ts

@@ -0,0 +1,35 @@
+import { IndexedNode } from "@opensystemslab/planx-core/types";
+import { FuseOptionKey } from "fuse.js";
+
+type SearchFacets = Array<FuseOptionKey<IndexedNode>>;
+
+const generalData: SearchFacets = ["data.fn", "data.val"];
+
+const fileUploadAndLabelData: SearchFacets = ["data.fileTypes.fn"];
+
+const calculateData: SearchFacets = [
+  "data.output",
+  {
+    name: "formula",
+    getFn: (node: IndexedNode) => Object.keys(node.data?.defaults || {}),
+  },
+];
+
+const listData: SearchFacets = [
+  "data.schema.fields.data.fn",
+  "data.schema.fields.data.options.data.val",
+];
+
+const drawBoundaryData: SearchFacets = [
+  "data.dataFieldBoundary",
+  "data.dataFieldArea",
+];
+
+/** Data fields used across PlanX components */
+export const DATA_FACETS = [
+  ...generalData,
+  ...fileUploadAndLabelData,
+  ...calculateData,
+  ...listData,
+  ...drawBoundaryData,
+];

editor.planx.uk/src/pages/FlowEditor/components/Sidebar/Search/index.tsx

@@ -9,11 +9,12 @@ import ChecklistItem from "ui/shared/ChecklistItem";
 import Input from "ui/shared/Input";
 
 import { ExternalPortalList } from "./ExternalPortalList";
+import { DATA_FACETS } from "./facets";
 import { NodeSearchResults } from "./NodeSearchResults";
 
 interface SearchNodes {
   input: string;
-  facets: ["data.fn", "data.val"];
+  facets: typeof DATA_FACETS;
 }
 
 const Search: React.FC = () => {
@@ -27,7 +28,7 @@ const Search: React.FC = () => {
   }, [orderedFlow, setOrderedFlow]);
 
   const formik = useFormik<SearchNodes>({
-    initialValues: { input: "", facets: ["data.fn", "data.val"] },
+    initialValues: { input: "", facets: DATA_FACETS },
     onSubmit: ({ input }) => {
       search(input);
     },