[graph-search] allow to override minisearch option in constructor and search function

Author: sim51

packages/graph-search/src/GraphSearch.tsx

@@ -1,16 +1,19 @@
 import React, { FC } from 'react';
 
 import { GraphSearchInput, GraphSearchInputProps } from './GraphSearchInput';
-import { GraphSearchContextProvider } from './context';
+import { GraphSearchContextProvider, GraphSearchContextProviderProps } from './context';
 
 /**
  * Component that display the search.
  * It is the main component of this package, you can only use this one.
  *
  * @category Component
  */
-export const GraphSearch: FC<GraphSearchInputProps> = (props) => (
-  <GraphSearchContextProvider>
+export const GraphSearch: FC<GraphSearchInputProps & GraphSearchContextProviderProps> = ({
+  minisearchOptions,
+  ...props
+}) => (
+  <GraphSearchContextProvider minisearchOptions={minisearchOptions}>
     <GraphSearchInput {...props} />
   </GraphSearchContextProvider>
 );

packages/graph-search/src/assets/index.css

@@ -1,3 +1,7 @@
+:root {
+  --sigma-grey-color: #ccc;
+}
+
 .react-sigma .option.hoverable {
   cursor: pointer !important;
 }
@@ -13,7 +17,7 @@
 }
 
 .react-sigma .text-muted {
-  color: #CCC;
+  color: var(--sigma-grey-color)
 }
 
 .react-sigma .text-italic {
@@ -38,7 +42,7 @@
 }
 
 .react-sigma .graph-search .option.selected {
-  background-color: #ccc;
+  background-color: var(--sigma-grey-color)
 }
 
 .react-sigma .node .render {
@@ -47,7 +51,7 @@
   width: 1em;
   height: 1em;
   border-radius: 1em;
-  background-color: #ccc;
+  background-color: var(--sigma-grey-color);
   margin-right: 8px;
 }
 

packages/graph-search/src/context.tsx

@@ -1,9 +1,10 @@
 import { useSigma } from '@react-sigma/core';
 import { Attributes } from 'graphology-types';
-import MiniSearch from 'minisearch';
+import MiniSearch, { Options } from 'minisearch';
 import React from 'react';
 import { FC, PropsWithChildren, createContext, useEffect, useState } from 'react';
 
+import { Document } from './types';
 import { edgeToDocument, nodeToDocument } from './utils';
 
 export interface GraphSearchContextType {
@@ -18,27 +19,58 @@ const initialContext: GraphSearchContextType = {
  */
 export const GraphSearchContext = createContext(initialContext);
 
+export interface GraphSearchContextProviderProps {
+  /**
+   * The minisearch options for its construtor.
+   */
+  minisearchOptions?: Partial<Options<Document>>;
+}
 /**
  * Search context provider.
  * It exposes the minisearch instance to search in the graph and
  * is also responsible to keep the index up to date with the graph.
  *
+ * You can override the minisearch options by passing them in the `minisearchOptions` prop.
+ *
+ * Documents in the index have the type {@link Document} :
+ * - `id` is node or edge key in the graph
+ * - `type` is "nodes" or "edges"
+ * - `itemId` is the unique id in the index (concatenation of type and id)
+ * - `label` is the label of the node or edge in the graph
+ * - every attributes of the node or edge are also in the index, prefixed by `prop_`
+ *
+ *
  * @category Component
  */
-export const GraphSearchContextProvider: FC<PropsWithChildren> = ({ children }) => {
+export const GraphSearchContextProvider: FC<PropsWithChildren<GraphSearchContextProviderProps>> = ({
+  children,
+  minisearchOptions,
+}) => {
   const [context, setContext] = useState(initialContext);
   const sigma = useSigma();
 
   useEffect(() => {
-    const index = new MiniSearch({
+    const index = new MiniSearch<Document>({
+      ...minisearchOptions,
       idField: 'itemId',
-      fields: ['label'],
-      storeFields: ['itemId', 'id', 'type'],
-      processTerm: (term, _fieldName) =>
-        term
-          .normalize('NFD')
-          .replace(/[\u0300-\u036f]/g, '')
-          .toLowerCase(),
+      fields: minisearchOptions?.fields
+        ? ['label', ...minisearchOptions.fields.filter((e) => e !== 'label')]
+        : ['label'],
+      storeFields: minisearchOptions?.storeFields
+        ? [
+            'itemId',
+            'id',
+            'type',
+            ...minisearchOptions.storeFields.filter((e) => !['itemId', 'id', 'type'].includes(e)),
+          ]
+        : ['itemId', 'id', 'type'],
+      processTerm: minisearchOptions?.processTerm
+        ? minisearchOptions?.processTerm
+        : (term, _fieldName) =>
+            term
+              .normalize('NFD')
+              .replace(/[\u0300-\u036f]/g, '')
+              .toLowerCase(),
     });
 
     // index all
@@ -88,7 +120,7 @@ export const GraphSearchContextProvider: FC<PropsWithChildren> = ({ children })
       graph.off('edgeAttributesUpdated', indexEdge);
       graph.off('edgeDropped', deleteEdge);
     };
-  }, [sigma]);
+  }, [sigma, minisearchOptions]);
 
   return <GraphSearchContext.Provider value={context}>{children}</GraphSearchContext.Provider>;
 };

packages/graph-search/src/useGraphSearch.tsx

@@ -1,3 +1,4 @@
+import { SearchOptions } from 'minisearch';
 import { useCallback, useContext } from 'react';
 
 import { GraphSearchContext } from './context';
@@ -7,9 +8,11 @@ import { GraphSearchOption, ItemType } from './types';
  * Hooks that returns a function to search in the graph index.
  * This hook must be used in a component that is a descendant of `GraphSearchContextProvider`.
  *
+ * @param searchOption - Options passed to the minisearch search function. Per default we use `{ prefix: true, fuzzy: 0.2, boost: { label: 2 } }`
+ *
  * @category Hook
  */
-export function useGraphSearch() {
+export function useGraphSearch(searchOption?: SearchOptions) {
   const { index } = useContext(GraphSearchContext);
 
   const search = useCallback(
@@ -18,15 +21,16 @@ export function useGraphSearch() {
         .search(query, {
           prefix: true,
           fuzzy: 0.2,
-          filter: type ? (result) => result.type === type : undefined,
           boost: {
             label: 2,
           },
+          ...(searchOption || {}),
+          filter: type ? (result) => result.type === type : undefined,
         })
         .map((item) => ({ id: item.id, type: item.type }));
       return result;
     },
-    [index],
+    [index, searchOption],
   );
 
   return { search };