Adds filter when there is no native search

Author: alexjennings

src/components/configuration/properties/PropertiesCard.jsx

@@ -1,15 +1,36 @@
+import { useState } from 'react';
+
+import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
 
-import SquareCard from '../../ui/SquareCard';
+import FilterTextField from '../../ui/FilterTextField';
 
 import PropertiesTable from './PropertiesTable';
 
-export default function PropertiesCard({ ...props }) {
+export default function PropertiesCard({ configurationPropertyListDocument, ...props }) {
+  const options = configurationPropertyListDocument?.property || [];
+  const [filter, setFilter] = useState(options);
+  const filterConfigurationPropertyListDocument = {
+    ...configurationPropertyListDocument,
+    property: filter,
+  };
   return (
-    <SquareCard>
+    <Card>
       <CardContent>
-        <PropertiesTable {...props} />
+        <FilterTextField
+          variant="outlined"
+          fullWidth
+          options={options}
+          onChange={setFilter}
+          optionsKey="key"
+          minScore={0.5}
+        />
+
+        <PropertiesTable
+          configurationPropertyListDocument={filterConfigurationPropertyListDocument}
+          {...props}
+        />
       </CardContent>
-    </SquareCard>
+    </Card>
   );
 }

src/components/fieldgroup/FieldGroupListCard.jsx

@@ -1,15 +1,32 @@
+import { useState } from 'react';
+
+import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
 
-import SquareCard from '../ui/SquareCard';
+import FilterTextField from '../ui/FilterTextField';
 
 import FieldGroupListTable from './FieldGroupListTable';
 
-export default function FieldGroupListCard({ ...props }) {
+export default function FieldGroupListCard({ metadataFieldGroupListDocument, ...props }) {
+  const options = metadataFieldGroupListDocument?.group || [];
+  const [filter, setFilter] = useState(options);
+  const filterMetadataFieldGroupListDocument = { ...metadataFieldGroupListDocument, group: filter };
   return (
-    <SquareCard>
+    <Card>
       <CardContent>
-        <FieldGroupListTable {...props} />
+        <FilterTextField
+          variant="outlined"
+          fullWidth
+          options={options}
+          onChange={setFilter}
+          optionsKey="name"
+          minScore={0.5}
+        />
+        <FieldGroupListTable
+          metadataFieldGroupListDocument={filterMetadataFieldGroupListDocument}
+          {...props}
+        />
       </CardContent>
-    </SquareCard>
+    </Card>
   );
 }

src/components/metadatadataset/MetadataDatasetListCard.jsx

@@ -1,15 +1,33 @@
+import { useState } from 'react';
+
+import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
 
-import SquareCard from '../ui/SquareCard';
+import FilterTextField from '../ui/FilterTextField';
 
 import MetadataDatasetListTable from './MetadataDatasetListTable';
 
-export default function MetadataDatasetListCard({ ...props }) {
+export default function MetadataDatasetListCard({ metadataDatasetListDocument, ...props }) {
+  const options = metadataDatasetListDocument?.dataset || [];
+  const [filter, setFilter] = useState(options);
+  const filterMetadataDatasetListDocument = { ...metadataDatasetListDocument, dataset: filter };
   return (
-    <SquareCard>
+    <Card>
       <CardContent>
-        <MetadataDatasetListTable {...props} />
+        <FilterTextField
+          variant="outlined"
+          fullWidth
+          options={options}
+          onChange={setFilter}
+          optionsKey="name"
+          minScore={0.5}
+        />
+
+        <MetadataDatasetListTable
+          metadataDatasetListDocument={filterMetadataDatasetListDocument}
+          {...props}
+        />
       </CardContent>
-    </SquareCard>
+    </Card>
   );
 }

src/components/metadatafield/MetadataFieldListCard.jsx

@@ -1,15 +1,32 @@
+import { useState } from 'react';
+
+import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
 
-import SquareCard from '../ui/SquareCard';
+import FilterTextField from '../ui/FilterTextField';
 
 import MetadataFieldListTable from './MetadataFieldListTable';
 
-export default function MetadataFieldListCard({ ...props }) {
+export default function MetadataFieldListCard({ metadataFieldListDocument, ...props }) {
+  const options = metadataFieldListDocument?.field || [];
+  const [filter, setFilter] = useState(options);
+  const filterMetadataFieldListDocument = { ...metadataFieldListDocument, field: filter };
   return (
-    <SquareCard>
+    <Card>
       <CardContent>
-        <MetadataFieldListTable {...props} />
+        <FilterTextField
+          variant="outlined"
+          fullWidth
+          options={options}
+          onChange={setFilter}
+          optionsKey={['name', 'type']}
+          minScore={0.5}
+        />
+        <MetadataFieldListTable
+          metadataFieldListDocument={filterMetadataFieldListDocument}
+          {...props}
+        />
       </CardContent>
-    </SquareCard>
+    </Card>
   );
 }

src/components/shapetag/ShapeTagListCard.jsx

@@ -1,15 +1,29 @@
+import { useState } from 'react';
+
+import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
 
-import SquareCard from '../ui/SquareCard';
+import FilterTextField from '../ui/FilterTextField';
 import UriListTable from '../ui/UriListTable';
 
 export default function ShapeTagListCard({ uriListDocument }) {
   const linkTo = (uri) => `/shape-tag/${uri}/`;
+  const options = uriListDocument?.uri || [];
+  const [filter, setFilter] = useState(options);
+  const filterUriListDocument = { ...uriListDocument, uri: filter };
   return (
-    <SquareCard>
+    <Card>
       <CardContent>
-        <UriListTable uriListDocument={uriListDocument} linkTo={linkTo} />
+        <FilterTextField
+          variant="outlined"
+          fullWidth
+          options={options}
+          onChange={setFilter}
+          minScore={0.5}
+        />
+
+        <UriListTable uriListDocument={filterUriListDocument} linkTo={linkTo} />
       </CardContent>
-    </SquareCard>
+    </Card>
   );
 }

src/components/ui/FilterTextField.jsx

@@ -0,0 +1,75 @@
+import { useState } from 'react';
+
+import IconButton from '@material-ui/core/IconButton';
+import InputAdornment from '@material-ui/core/InputAdornment';
+import TextField from '@material-ui/core/TextField';
+import ClearIcon from '@material-ui/icons/Clear';
+import SearchIcon from '@material-ui/icons/Search';
+import debounce from 'lodash.debounce';
+
+import fuzzySearch from '../../utils/fuzzySearch';
+
+const DEBOUNCE_WAIT = 150;
+
+/**
+ * FilterTextField is a controlled text input component for filtering a list of options using fuzzy search.
+ *
+ * @param {Object[]} options - The array of options to filter.
+ * @param {string|string[]} optionsKey - The key in each option object to use for searching.
+ * @param {number} [minScore=0.5] - The minimum fuzzy search score required for an option to be included.
+ * @param {Function} onChange - Callback invoked with the filtered options whenever the input value changes.
+ * @param {...Object} props - Additional props passed to the underlying TextField component.
+ *
+ * @returns {JSX.Element} A Material-UI TextField with search and clear functionality.
+ */
+function FilterTextField({
+  options,
+  optionsKey,
+  minScore = 0.5,
+  onChange: onChangeOptions,
+  ...props
+}) {
+  const [value, setValue] = useState('');
+  const onFilter = debounce((newValue) => {
+    if (newValue === '' || newValue === undefined) {
+      onChangeOptions(options);
+      return;
+    }
+    const filterOptions = fuzzySearch(newValue, options, minScore, optionsKey);
+    onChangeOptions(filterOptions);
+  }, DEBOUNCE_WAIT);
+  const onChange = (event) => {
+    setValue(event.target.value);
+    const newValue = event?.target?.value;
+    onFilter(newValue);
+  };
+  const onReset = () => {
+    setValue('');
+    onFilter('');
+  };
+
+  return (
+    <TextField
+      placeholder="Search"
+      InputProps={{
+        startAdornment: (
+          <InputAdornment position="start">
+            <SearchIcon />
+          </InputAdornment>
+        ),
+        endAdornment: value ? (
+          <InputAdornment position="end">
+            <IconButton onClick={onReset} onMouseDown={onReset}>
+              <ClearIcon />
+            </IconButton>
+          </InputAdornment>
+        ) : undefined,
+      }}
+      {...props}
+      onChange={onChange}
+      value={value}
+    />
+  );
+}
+
+export default FilterTextField;

src/utils/fuzzySearch.js

@@ -0,0 +1,89 @@
+/**
+ *
+ * @param {string} pattern - Search term
+ * @param {string} str - Target string
+ * @returns {number} - Score (higher = better match, 0 = no match)
+ */
+function fuzzyMatchScore(pattern, str) {
+  if (!pattern) return 0;
+
+  const lowerPattern = pattern.toLowerCase();
+  const lowerStr = str.toLowerCase();
+
+  let score = 0;
+  let patternIndex = 0;
+  let consecutiveBonus = 0;
+
+  for (let i = 0; i < str.length; i += 1) {
+    if (patternIndex >= pattern.length) break;
+
+    if (lowerStr[i] === lowerPattern[patternIndex]) {
+      // Base points
+      score += 10;
+
+      // Bonus for consecutive characters
+      score += consecutiveBonus * 5;
+      consecutiveBonus += 1;
+
+      // Bonus for word boundary (start of string or after space/underscore/dash)
+      if (i === 0 || [' ', '_', '-'].includes(str[i - 1])) {
+        score += 15;
+      }
+
+      // Bonus for exact case match
+      if (str[i] === pattern[patternIndex]) {
+        score += 2;
+      }
+
+      patternIndex += 1;
+    } else {
+      // Reset consecutive bonus if break
+      consecutiveBonus = 0;
+
+      // Small penalty for skipping characters
+      score -= 1;
+    }
+  }
+
+  // Pattern must be fully matched
+  if (patternIndex < pattern.length) return 0;
+
+  // Slight penalty for matches later in the string
+  score -= str.length - patternIndex;
+
+  return Math.max(score, 0);
+}
+
+/**
+ * Performs a fuzzy search on a list of items and returns the items that match the pattern above a minimum score.
+ *
+ * @param {string} pattern - The search pattern to match against the items.
+ * @param {Array} items - The array of items to search.
+ * @param {number} [minScore=0.5] - The minimum score threshold for matches to be included in the results.
+ * @param {string|string[]} [key] - The property name(s) of each item to match against. If an array is provided, the highest score among the keys is used. If omitted, items themselves are matched.
+ * @returns {Array} The filtered and sorted array of items that match the pattern above the minimum score.
+ */
+function fuzzySearch(pattern, items, minScore = 0.5, key = undefined) {
+  return items
+    .map((item) => {
+      if (Array.isArray(key)) {
+        const highScore = Math.max(
+          ...key.map((thisKey) => fuzzyMatchScore(pattern, item[thisKey])),
+        );
+        return {
+          item,
+          score: highScore,
+        };
+      }
+      const str = key ? item[key] : item;
+      return {
+        item,
+        score: fuzzyMatchScore(pattern, str),
+      };
+    })
+    .filter((entry) => entry.score > minScore)
+    .sort((a, b) => b.score - a.score)
+    .map((entry) => entry.item);
+}
+
+export default fuzzySearch;