[learn-example][m] - add facets to catalog component

examples/learn-example/components/Catalog.tsx

@@ -1,40 +1,119 @@
 import { Index } from 'flexsearch';
 import { useState } from 'react';
 import DebouncedInput from './DebouncedInput';
+import { useForm } from 'react-hook-form';
 
-export default function Catalog({ datasets }: { datasets: any[] }) {
+export default function Catalog({
+  datasets,
+  facets,
+}: {
+  datasets: any[];
+  facets: string[];
+}) {
   const [indexFilter, setIndexFilter] = useState('');
-  const index = new Index({ tokenize: "full"});
+  const index = new Index({ tokenize: 'full' });
   datasets.forEach((dataset) =>
     index.add(
       dataset._id,
+      //This will join every metadata value + the url_path into one big string and index that
       Object.entries(dataset.metadata).reduce(
-            (acc, curr) => acc + ' ' + curr.toString(),
+        (acc, curr) => acc + ' ' + curr[1].toString(),
         ''
-          ) + ' ' + dataset.url_path
+      ) +
+        ' ' +
+        dataset.url_path
     )
   );
-  return (
+
-    <>
+  const facetValues = facets
-      <DebouncedInput
+    ? facets.reduce((acc, facet) => {
-        value={indexFilter ?? ''}
+        const possibleValues = datasets.reduce((acc, curr) => {
-        onChange={(value) => setIndexFilter(String(value))}
+          const facetValue = curr.metadata[facet];
-        className="p-2 text-sm shadow border border-block"
+          if (facetValue) {
-        placeholder="Search all datasets..."
+            return Array.isArray(facetValue)
-      />
+              ? acc.concat(facetValue)
-      <ul>
+              : acc.concat([facetValue]);
-        {datasets
+          }
+          return acc;
+        }, []);
+        acc[facet] = {
+          possibleValues: [...new Set(possibleValues)],
+          selectedValue: null,
+        };
+        return acc;
+      }, {})
+    : [];
+
+  const { register, watch } = useForm(facetValues);
+
+  const filteredDatasets = datasets
+    // First filter by flex search
     .filter((dataset) =>
       indexFilter !== ''
         ? index.search(indexFilter).includes(dataset._id)
         : true
     )
-          .map((dataset) => (
+    //Then check if the selectedValue for the given facet is included in the dataset metadata
+    .filter((dataset) => {
+      //Avoids a server rendering breakage
+      if (!watch() || Object.keys(watch()).length === 0) return true
+      //This will filter only the key pairs of the metadata values that were selected as facets
+      const datasetFacets = Object.entries(dataset.metadata).filter((entry) =>
+        facets.includes(entry[0])
+      );
+      //Check if the value present is included in the selected value in the form
+      return datasetFacets.every((elem) =>
+        watch()[elem[0]].selectedValue
+          ? (elem[1] as string | string[]).includes(
+              watch()[elem[0]].selectedValue
+            )
+          : true
+      );
+    });
+
+  return (
+    <>
+      <DebouncedInput
+        value={indexFilter ?? ''}
+        onChange={(value) => setIndexFilter(String(value))}
+        className="p-2 text-sm shadow border border-block mr-1"
+        placeholder="Search all datasets..."
+      />
+      {Object.entries(facetValues).map((elem) => (
+        <select
+          key={elem[0]}
+          defaultValue=""
+          className="p-2 ml-1 text-sm shadow border border-block"
+          {...register(elem[0] + '.selectedValue')}
+        >
+          <option value="">
+            Filter by {elem[0]}
+          </option>
+          {(elem[1] as { possibleValues: string[] }).possibleValues.map(
+            (val) => (
+              <option
+                key={val}
+                className="dark:bg-white dark:text-black"
+                value={val}
+              >
+                {val}
+              </option>
+            )
+          )}
+        </select>
+      ))}
+      <ul>
+        {filteredDatasets.map((dataset) => (
           <li key={dataset._id}>
-              <a href={dataset.url_path}>{dataset.metadata.title ? dataset.metadata.title : dataset.url_path}</a>
+            <a href={dataset.url_path}>
+              {dataset.metadata.title
+                ? dataset.metadata.title
+                : dataset.url_path}
+            </a>
           </li>
         ))}
       </ul>
     </>
   );
 }
+

examples/learn-example/lib/markdown.js

@@ -91,7 +91,7 @@ const parse = async function (source, format, scope) {
         ],
         format,
       },
-      scope: { ...scope, ...data},
+      scope,
     }
   );
 

examples/learn-example/package-lock.json

@@ -31,6 +31,7 @@
         "papaparse": "^5.4.1",
         "react": "18.2.0",
         "react-dom": "18.2.0",
+        "react-hook-form": "^7.43.9",
         "react-vega": "^7.6.0",
         "rehype-autolink-headings": "^6.1.1",
         "rehype-katex": "^6.0.3",
@@ -9301,6 +9302,21 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.43.9",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.43.9.tgz",
+      "integrity": "sha512-AUDN3Pz2NSeoxQ7Hs6OhQhDr6gtF9YRuutGDwPQqhSUAHJSgGl2VeY3qN19MG0SucpjgDiuMJ4iC5T5uB+eaNQ==",
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

examples/learn-example/package.json

@@ -35,6 +35,7 @@
     "papaparse": "^5.4.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-hook-form": "^7.43.9",
     "react-vega": "^7.6.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-katex": "^6.0.3",
@@ -48,9 +49,9 @@
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.9",
+    "@types/flexsearch": "^0.7.3",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.23",
-    "tailwindcss": "^3.3.1",
+    "tailwindcss": "^3.3.1"
-    "@types/flexsearch": "^0.7.3"
   }
 }

examples/learn-example/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es6",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,