add flexsearch for bzdb editor

Author: allejo

package-lock.json

@@ -15,6 +15,7 @@
     "dayjs": "^1.10.6",
     "dedent": "^0.7.0",
     "file-saver": "^2.0.5",
+    "flexsearch": "^0.8.205",
     "immer": "^9.0.6",
     "js-yaml": "^4.1.0",
     "markdown-it": "^13.0.0",

package.json

@@ -1,5 +1,7 @@
 .modalBody {
   display: flex;
+  flex-direction: column;
+  gap: var(--spacing-normal);
 }
 
 .tabList {

src/Components/Modals/BZDBSettingsModal.module.scss

@@ -1,34 +1,29 @@
+import { Document } from 'flexsearch';
 import produce from 'immer';
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useReducer,
-  useState,
-} from 'react';
+import React, { useCallback, useEffect, useReducer, useState } from 'react';
 import { useDialogState } from 'reakit';
 import { useRecoilState } from 'recoil';
 
 import { IOptions } from '../../Document/Obstacles/Option';
 import { BZDBSettingsModalOpenEventName } from '../../Events/IBZDBSettingsModalOpenEvent';
+import bzdbDocumentation, { BZDBDocType } from '../../Utilities/BZDBDocumentor';
 import { documentState } from '../../atoms';
 import { BZDBType } from '../../data/bzdb-types';
+import { useDocumentSearch } from '../../hooks/useFlexSearch';
 import Button from '../Button';
 import BZDBEquationField from '../Form/BZDBEquationField';
 import CheckboxField from '../Form/CheckboxField';
+import TextField from '../Form/TextField';
 import ListenerModal from '../ListenerModal';
 import Markdown from '../Markdown';
 import { Tab, TabList } from '../TabList';
 
-import BZDBDocs from '../../data/bzdb-documention.json';
 import generalStyles from '../../sass/general.module.scss';
 import styles from './BZDBSettingsModal.module.scss';
 
-type BZDBVariableType = typeof BZDBDocs.variables[number];
-
 interface SettingEditorProps {
   onChange: (setting: string, value: any) => void;
-  variable: BZDBVariableType;
+  variable: BZDBDocType;
 }
 
 // https://github.com/BZFlag-Dev/bzflag/blob/a249151/src/common/StateDatabase.cxx#L252-L256
@@ -87,7 +82,7 @@ const SettingEditor = ({ onChange, variable }: SettingEditorProps) => {
         <div>{renderEditor(variable.type ?? 'string')}</div>
       </div>
       <div className={generalStyles.descriptionLike}>
-        <Markdown content={variable.desc} inline />
+        <Markdown content={variable.description} inline />
       </div>
     </div>
   );
@@ -123,37 +118,28 @@ function bzdbReducer(state: BZDBStore, action: ReducerAction) {
   });
 }
 
+const bzdbSearchIndex = new Document({
+  id: 'name',
+  index: [
+    {
+      field: 'name',
+      tokenize: 'reverse',
+    },
+    'description',
+  ],
+  store: ['name', 'description', 'default', 'category'],
+});
+
+bzdbDocumentation.forEach((variable) => {
+  bzdbSearchIndex.add({ ...variable });
+});
+
 const BZDBSettingsModal = () => {
   const [world, setBZWDocument] = useRecoilState(documentState);
   const [bzdbStore, bzdbStoreDispatch] = useReducer(bzdbReducer, {});
   const dialog = useDialogState();
-
-  const {
-    bzdbCategories,
-    bzdbDefinitionsByCategory,
-    bzdbDefinitionsByVariable,
-  } = useMemo(() => {
-    const groupedByCat: Record<string, BZDBVariableType[]> = {};
-    const mappedByVariable: Partial<Record<BZDBType, BZDBVariableType>> = {};
-
-    BZDBDocs.variables.forEach((variable) => {
-      const cat = variable.category ?? 'Miscellaneous';
-
-      if (!groupedByCat.hasOwnProperty(cat)) {
-        groupedByCat[cat] = [];
-      }
-
-      groupedByCat[cat].push(variable);
-      mappedByVariable[variable.name as BZDBType] = variable;
-    });
-
-    return {
-      bzdbDefinitionsByCategory: groupedByCat,
-      bzdbCategories: Object.keys(groupedByCat).sort(),
-      bzdbDefinitionsByVariable: mappedByVariable,
-      bzdbVariables: Object.keys(mappedByVariable).sort(),
-    };
-  }, []);
+  const [searchQuery, setSearchQuery] = useState<string>('');
+  const results = useDocumentSearch(searchQuery, bzdbSearchIndex);
 
   const syncStateToWorld = useCallback(() => {
     bzdbStoreDispatch({
@@ -163,7 +149,7 @@ const BZDBSettingsModal = () => {
   }, [world?._options]);
 
   const handleOnChange = (variable: string, value: string) => {
-    const definition = bzdbDefinitionsByVariable[variable as BZDBType];
+    const definition = bzdbDocumentation.store[variable as BZDBType];
 
     if (value === definition?.default) {
       bzdbStoreDispatch({ type: 'delete', variable });
@@ -184,6 +170,8 @@ const BZDBSettingsModal = () => {
     dialog.hide();
   };
 
+  console.log({ results });
+
   return (
     <ListenerModal
       event={BZDBSettingsModalOpenEventName}
@@ -200,10 +188,17 @@ const BZDBSettingsModal = () => {
       hideOnEsc={false}
       hideOnClickOutside={false}
     >
+      <div>
+        <TextField
+          label="Search"
+          onChange={setSearchQuery}
+          value={searchQuery}
+        />
+      </div>
       <TabList aria-label="BZDB Settings" className={styles.tabList} vertical>
-        {bzdbCategories.map((category) => (
+        {bzdbDocumentation.categories.map((category) => (
           <Tab title={category} key={category}>
-            {bzdbDefinitionsByCategory[category].map((variable) => (
+            {bzdbDocumentation.mapByCategory(category, (variable) => (
               <SettingEditor
                 key={variable.name}
                 onChange={handleOnChange}

src/Components/Modals/BZDBSettingsModal.tsx

@@ -64,7 +64,7 @@ const FlagSettingsModal = () => {
         <div className="col-md-6">
           <NumberField
             label="Flag Altitude"
-            description={bzdbDocumentation.getDescription('_flagAltitude')}
+            description={bzdbDocumentation.store['_flagAltitude'].description}
             allowChange={positiveOnly}
             onChange={setFlagAltitude}
             value={flagAltitude}
@@ -73,7 +73,7 @@ const FlagSettingsModal = () => {
         <div className="col-md-6">
           <NumberField
             label="Flag Height"
-            description={bzdbDocumentation.getDescription('_flagHeight')}
+            description={bzdbDocumentation.store['_flagHeight'].description}
             allowChange={positiveOnly}
             onChange={setFlagHeight}
             value={flagHeight}

src/Components/Modals/FlagSettingsModal.tsx

@@ -4,37 +4,67 @@ import data from '../data/bzdb-documention.json';
 
 type DocsType = typeof data;
 
-interface BZDBDocType {
+export interface BZDBDocType {
   name: string;
   description: string;
-  defaultValue: string;
+  default: string;
+  type: typeof data['variables'][number]['type'];
 }
 
 export class BZDBDocumentor {
+  private readonly grpByCat: Record<string, Record<string, BZDBDocType>> = {};
   private readonly storage: Record<string, BZDBDocType> = {};
-  private readonly fields: BZDBType[] = [];
+  private readonly _fields: BZDBType[] = [];
 
   constructor(data: DocsType) {
     for (const variable of data.variables) {
-      this.fields.push(variable.name as BZDBType);
+      this._fields.push(variable.name as BZDBType);
       this.storage[variable.name] = {
         name: variable.name,
         description: variable.desc ?? '',
-        defaultValue: variable.default,
+        default: variable.default,
+        type: variable.type,
       };
+
+      const cat = variable.category ?? 'Miscellaneous';
+
+      this.grpByCat = this.grpByCat ?? {};
+      this.grpByCat[cat] = this.grpByCat[cat] ?? {};
+      this.grpByCat[cat][variable.name] = this.storage[variable.name];
     }
   }
 
-  getDescription(bzdb: BZDBType): string {
-    return this.storage[bzdb].description;
+  forEach(
+    callback: (doc: BZDBDocType, index: number, array: BZDBDocType[]) => void,
+  ): void {
+    const array = this._fields.map((f) => this.storage[f]);
+
+    this._fields.forEach((field, index) => {
+      callback(this.storage[field], index, array);
+    });
+  }
+
+  mapByCategory<T>(
+    category: string,
+    callback: (doc: BZDBDocType, index: number, array: BZDBDocType[]) => T,
+  ): T[] {
+    if (!this.grpByCat.hasOwnProperty(category)) {
+      return [];
+    }
+
+    return Object.values(this.grpByCat[category]).map(callback);
+  }
+
+  get categories(): string[] {
+    return Object.keys(this.grpByCat).sort();
   }
 
-  getDefaultValue(bzdb: BZDBType): string {
-    return this.storage[bzdb].defaultValue;
+  get fields(): BZDBType[] {
+    return [...this._fields];
   }
 
-  getSettings(): Iterable<BZDBType> {
-    return this.fields;
+  get store(): Readonly<Record<string, BZDBDocType>> {
+    return { ...this.storage };
   }
 }
 

src/Utilities/BZDBDocumentor.ts

@@ -0,0 +1,8 @@
+import { Document } from 'flexsearch';
+import { useMemo } from 'react';
+
+export function useDocumentSearch(query: string, index: Document) {
+  return useMemo(() => {
+    return index.search(query, { enrich: true });
+  }, [query, index]);
+}