feat: fuzzy search

2025-12-15 19:27:49 +01:00 · 2024-02-01 16:45:51 +05:30
parent f8e6aa8448
commit fa5dc188c5
27 changed files with 53 additions and 0 deletions
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
    "file-saver": "^2.0.5",
    "firebase": "^9.12.1",
    "firebaseui": "^6.0.1",
+    "fuse.js": "^7.0.0",
    "jotai": "^1.8.4",
    "json-stable-stringify-without-jsonify": "^1.0.1",
    "jszip": "^3.10.0",
--- a/src/components/ColumnModals/FieldsDropdown.tsx
+++ b/src/components/ColumnModals/FieldsDropdown.tsx
@@ -1,5 +1,6 @@
 import MultiSelect from "@rowy/multiselect";
 import { Box, ListItemIcon, Typography } from "@mui/material";
+import Fuse from 'fuse.js';

 import { FIELDS } from "@src/components/fields";
 import { FieldType } from "@src/constants/fields";
@@ -23,6 +24,15 @@ export interface IFieldsDropdownProps {
  [key: string]: any;
 }

+export interface OptionsType {
+  label: string;
+  value: string;
+  disabled: boolean;
+  requireCloudFunctionSetup: boolean;
+  requireCollectionTable: boolean;
+  keywords: string[];
+}
+
 /**
 * Returns dropdown component of all available types
 */
@@ -52,9 +62,21 @@ export default function FieldsDropdown({
      disabled: requireCloudFunctionSetup || requireCollectionTable,
      requireCloudFunctionSetup,
      requireCollectionTable,
+      keywords: fieldConfig.keywords || []
    };
  });

+  const filterOptions = (options: OptionsType[], inputConfig: any) => {
+    const fuse = new Fuse(options, {
+      keys: [{name:'label', weight: 2}, 'keywords'],
+      includeScore: true,
+      threshold: 0.4, 
+    });
+  
+    const results = fuse.search(inputConfig?.inputValue);
+    return results.length > 0 ? results.map((result) => result.item) : options;
+  }
+
  return (
    <MultiSelect
      multiple={false}
@@ -80,6 +102,7 @@ export default function FieldsDropdown({
                },
            },
          },
+          filterOptions
        },
      } as any)}
      itemRenderer={(option) => (
--- a/src/components/fields/Array/index.tsx
+++ b/src/components/fields/Array/index.tsx
@@ -31,5 +31,6 @@ export const config: IFieldConfig = {
  filter: { operators, defaultValue: [] },
  requireConfiguration: false,
  contextMenuActions: BasicContextMenuActions,
+  keywords: ["list"]
 };
 export default config;
--- a/src/components/fields/Checkbox/index.tsx
+++ b/src/components/fields/Checkbox/index.tsx
@@ -45,5 +45,6 @@ export const config: IFieldConfig = {
  },
  SideDrawerField,
  contextMenuActions: BasicContextMenuActions,
+  keywords: ["boolean", "switch", "true", "false", "on", "off"]
 };
 export default config;
--- a/src/components/fields/Code/index.tsx
+++ b/src/components/fields/Code/index.tsx
@@ -34,5 +34,6 @@ export const config: IFieldConfig = {
  SideDrawerField,
  settings: Settings,
  contextMenuActions: BasicContextMenuActions,
+  keywords: ["snippet", "block"]
 };
 export default config;
--- a/src/components/fields/Color/index.tsx
+++ b/src/components/fields/Color/index.tsx
@@ -44,5 +44,6 @@ export const config: IFieldConfig = {
    }
  },
  contextMenuActions: BasicContextMenuActions,
+  keywords: ["hexcode"]
 };
 export default config;
--- a/src/components/fields/CreatedAt/index.tsx
+++ b/src/components/fields/CreatedAt/index.tsx
@@ -30,5 +30,6 @@ export const config: IFieldConfig = {
  settings: Settings,
  requireCollectionTable: true,
  contextMenuActions: BasicContextMenuActions,
+  keywords: ["date", "time"]
 };
 export default config;
--- a/src/components/fields/CreatedBy/index.tsx
+++ b/src/components/fields/CreatedBy/index.tsx
@@ -31,5 +31,6 @@ export const config: IFieldConfig = {
  settings: Settings,
  requireCollectionTable: true,
  contextMenuActions: BasicContextMenuActions,
+  keywords: ["date", "time"]
 };
 export default config;
--- a/src/components/fields/Formula/index.tsx
+++ b/src/components/fields/Formula/index.tsx
@@ -27,5 +27,6 @@ export const config: IFieldConfig = {
  settings: Settings,
  settingsValidator: settingsValidator,
  requireConfiguration: true,
+  keywords: ["equation"]
 };
 export default config;
--- a/src/components/fields/GeoPoint/index.tsx
+++ b/src/components/fields/GeoPoint/index.tsx
@@ -26,5 +26,6 @@ export const config: IFieldConfig = {
  }),
  SideDrawerField,
  contextMenuActions: BasicContextMenuActions,
+  keywords: ["location", "latitude", "longitude", "point"]
 };
 export default config;
--- a/src/components/fields/Id/index.tsx
+++ b/src/components/fields/Id/index.tsx
@@ -19,5 +19,6 @@ export const config: IFieldConfig = {
  description: "Displays the row’s ID. Read-only. Cannot be sorted.",
  TableCell: withRenderTableCell(DisplayCell, null),
  SideDrawerField,
+  keywords: ["unique"]
 };
 export default config;
--- a/src/components/fields/Image/index.tsx
+++ b/src/components/fields/Image/index.tsx
@@ -28,6 +28,7 @@ export const config: IFieldConfig = {
  }),
  SideDrawerField,
  contextMenuActions: ContextMenuActions,
+  keywords: ["picture"]
 };
 export default config;

--- a/src/components/fields/LongText/index.tsx
+++ b/src/components/fields/LongText/index.tsx
@@ -35,5 +35,6 @@ export const config: IFieldConfig = {
  filter: {
    operators: filterOperators,
  },
+  keywords: ["string"]
 };
 export default config;
--- a/src/components/fields/Markdown/index.tsx
+++ b/src/components/fields/Markdown/index.tsx
@@ -25,5 +25,6 @@ export const config: IFieldConfig = {
  TableCell: withRenderTableCell(DisplayCell, SideDrawerField, "popover"),
  SideDrawerField,
  contextMenuActions: BasicContextMenuActions,
+  keywords: ["md"]
 };
 export default config;
--- a/src/components/fields/MultiSelect/index.tsx
+++ b/src/components/fields/MultiSelect/index.tsx
@@ -50,5 +50,6 @@ export const config: IFieldConfig = {
    operators: filterOperators,
  },
  contextMenuActions: BasicContextMenuActions,
+  keywords: ["options"]
 };
 export default config;
--- a/src/components/fields/Number/index.tsx
+++ b/src/components/fields/Number/index.tsx
@@ -35,5 +35,6 @@ export const config: IFieldConfig = {
      return null;
    }
  },
+  keywords: ["digit"]
 };
 export default config;
--- a/src/components/fields/Phone/index.tsx
+++ b/src/components/fields/Phone/index.tsx
@@ -28,5 +28,6 @@ export const config: IFieldConfig = {
  filter: {
    operators: filterOperators,
  },
+  keywords: ["number", "contact"]
 };
 export default config;
--- a/src/components/fields/Rating/index.tsx
+++ b/src/components/fields/Rating/index.tsx
@@ -46,5 +46,6 @@ export const config: IFieldConfig = {
    }
  },
  contextMenuActions: BasicContextMenuActions,
+  keywords: ["star"]
 };
 export default config;
--- a/src/components/fields/RichText/index.tsx
+++ b/src/components/fields/RichText/index.tsx
@@ -25,5 +25,6 @@ export const config: IFieldConfig = {
  contextMenuActions: BasicContextMenuActions,
  TableCell: withRenderTableCell(DisplayCell, SideDrawerField, "popover"),
  SideDrawerField,
+  keywords: ["string"]
 };
 export default config;
--- a/src/components/fields/ShortText/index.tsx
+++ b/src/components/fields/ShortText/index.tsx
@@ -36,5 +36,6 @@ export const config: IFieldConfig = {
  filter: {
    operators: filterOperators,
  },
+  keywords: ["string"]
 };
 export default config;
--- a/src/components/fields/SingleSelect/index.tsx
+++ b/src/components/fields/SingleSelect/index.tsx
@@ -37,5 +37,6 @@ export const config: IFieldConfig = {
  filter: { operators: filterOperators },
  requireConfiguration: true,
  contextMenuActions: BasicContextMenuActions,
+  keywords: ["options"]
 };
 export default config;
--- a/src/components/fields/UpdatedAt/index.tsx
+++ b/src/components/fields/UpdatedAt/index.tsx
@@ -31,5 +31,6 @@ export const config: IFieldConfig = {
  settings: Settings,
  requireCollectionTable: true,
  contextMenuActions: BasicContextMenuActions,
+  keywords: ["date", "time"]
 };
 export default config;
--- a/src/components/fields/UpdatedBy/index.tsx
+++ b/src/components/fields/UpdatedBy/index.tsx
@@ -33,5 +33,6 @@ export const config: IFieldConfig = {
  settings: Settings,
  requireCollectionTable: true,
  contextMenuActions: BasicContextMenuActions,
+  keywords: ["date", "time"]
 };
 export default config;
--- a/src/components/fields/Url/index.tsx
+++ b/src/components/fields/Url/index.tsx
@@ -30,5 +30,6 @@ export const config: IFieldConfig = {
  filter: {
    operators: filterOperators,
  },
+  keywords: ["link", "path"]
 };
 export default config;
--- a/src/components/fields/User/index.tsx
+++ b/src/components/fields/User/index.tsx
@@ -29,5 +29,6 @@ export const config: IFieldConfig = {
  }),
  SideDrawerField,
  settings: Settings,
+  keywords: ["entity"]
 };
 export default config;
--- a/src/components/fields/types.ts
+++ b/src/components/fields/types.ts
@@ -42,6 +42,7 @@ export interface IFieldConfig {
  sortKey?: string;
  csvExportFormatter?: (value: any, config?: any) => string;
  csvImportParser?: (value: string, config?: any) => any;
+  keywords?: string[];
 }

 /** See {@link IRenderedTableCellProps | `withRenderTableCell` } for guidance */
--- a/yarn.lock
+++ b/yarn.lock
@@ -5208,6 +5208,11 @@ functions-have-names@^1.2.2:
  resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
  integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==

+fuse.js@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-7.0.0.tgz#6573c9fcd4c8268e403b4fc7d7131ffcf99a9eb2"
+  integrity sha512-14F4hBIxqKvD4Zz/XjDc3y94mNZN6pRv3U13Udo0lNLCWRBUsrMv2xwcF/y/Z5sV6+FQW+/ow68cHpm4sunt8Q==
+
 gensync@^1.0.0-beta.2:
  version "1.0.0-beta.2"
  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"