autocomplete: replace Fuse.js with liblevenshtein

package.json

@@ -55,10 +55,10 @@
     "file-saver": "^1.3.3",
     "filesize": "^3.1.2",
     "flux": "^2.0.3",
-    "fuse.js": "^2.2.0",
     "glob": "^5.0.14",
     "highlight.js": "^8.9.1",
     "isomorphic-fetch": "^2.2.1",
+    "liblevenshtein": "^2.0.4",
     "linkifyjs": "^2.1.3",
     "lodash": "^4.13.1",
     "matrix-js-sdk": "matrix-org/matrix-js-sdk#develop",

src/autocomplete/AutocompleteProvider.js

@@ -2,7 +2,7 @@ import React from 'react';
 import type {Completion, SelectionRange} from './Autocompleter';
 
 export default class AutocompleteProvider {
-    constructor(commandRegex?: RegExp, fuseOpts?: any) {
+    constructor(commandRegex?: RegExp) {
         if (commandRegex) {
             if (!commandRegex.global) {
                 throw new Error('commandRegex must have global flag set');

src/autocomplete/CommandProvider.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import AutocompleteProvider from './AutocompleteProvider';
-import Fuse from 'fuse.js';
+import FuzzyMatcher from './FuzzyMatcher';
 import {TextualCompletion} from './Components';
 
 const COMMANDS = [
@@ -53,7 +53,7 @@ let instance = null;
 export default class CommandProvider extends AutocompleteProvider {
     constructor() {
         super(COMMAND_RE);
-        this.fuse = new Fuse(COMMANDS, {
+        this.matcher = new FuzzyMatcher(COMMANDS, {
            keys: ['command', 'args', 'description'],
         });
     }
@@ -62,7 +62,7 @@ export default class CommandProvider extends AutocompleteProvider {
         let completions = [];
         let {command, range} = this.getCurrentCommand(query, selection);
         if (command) {
-            completions = this.fuse.search(command[0]).map(result => {
+            completions = this.matcher.match(command[0]).map(result => {
                 return {
                     completion: result.command + ' ',
                     component: (<TextualCompletion

src/autocomplete/EmojiProvider.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import AutocompleteProvider from './AutocompleteProvider';
 import {emojioneList, shortnameToImage, shortnameToUnicode} from 'emojione';
-import Fuse from 'fuse.js';
+import FuzzyMatcher from './FuzzyMatcher';
 import sdk from '../index';
 import {PillCompletion} from './Components';
 import type {SelectionRange, Completion} from './Autocompleter';
@@ -14,7 +14,7 @@ let instance = null;
 export default class EmojiProvider extends AutocompleteProvider {
     constructor() {
         super(EMOJI_REGEX);
-        this.fuse = new Fuse(EMOJI_SHORTNAMES);
+        this.matcher = new FuzzyMatcher(EMOJI_SHORTNAMES);
     }
 
     async getCompletions(query: string, selection: SelectionRange) {
@@ -23,7 +23,7 @@ export default class EmojiProvider extends AutocompleteProvider {
         let completions = [];
         let {command, range} = this.getCurrentCommand(query, selection);
         if (command) {
-            completions = this.fuse.search(command[0]).map(result => {
+            completions = this.matcher.match(command[0]).map(result => {
                 const shortname = EMOJI_SHORTNAMES[result];
                 const unicode = shortnameToUnicode(shortname);
                 return {

src/autocomplete/FuzzyMatcher.js

@@ -0,0 +1,74 @@
+import Levenshtein from 'liblevenshtein';
+import _at from 'lodash/at';
+import _flatMap from 'lodash/flatMap';
+import _sortBy from 'lodash/sortBy';
+import _sortedUniq from 'lodash/sortedUniq';
+import _keys from 'lodash/keys';
+
+class KeyMap {
+    keys: Array<String>;
+    objectMap: {[String]: Array<Object>};
+    priorityMap: {[String]: number}
+}
+
+const DEFAULT_RESULT_COUNT = 10;
+const DEFAULT_DISTANCE = 5;
+
+export default class FuzzyMatcher {
+    /**
+     * Given an array of objects and keys, returns a KeyMap
+     * Keys can refer to object properties by name and as in JavaScript (for nested properties)
+     *
+     * To use, simply presort objects by required criteria, run through this function and create a FuzzyMatcher with the
+     * resulting KeyMap.
+     *
+     * TODO: Handle arrays and objects (Fuse did this, RoomProvider uses it)
+     */
+    static valuesToKeyMap(objects: Array<Object>, keys: Array<String>): KeyMap {
+        const keyMap = new KeyMap();
+        const map = {};
+        const priorities = {};
+
+        objects.forEach((object, i) => {
+            const keyValues = _at(object, keys);
+            console.log(object, keyValues, keys);
+            for (const keyValue of keyValues) {
+                if (!map.hasOwnProperty(keyValue)) {
+                   map[keyValue] = [];
+                }
+                map[keyValue].push(object);
+            }
+            priorities[object] = i;
+        });
+
+        keyMap.objectMap = map;
+        keyMap.priorityMap = priorities;
+        keyMap.keys = _sortBy(_keys(map), [value => priorities[value]]);
+        return keyMap;
+    }
+
+    constructor(objects: Array<Object>, options: {[Object]: Object} = {}) {
+        this.options = options;
+        this.keys = options.keys;
+        this.setObjects(objects);
+    }
+
+    setObjects(objects: Array<Object>) {
+        this.keyMap = FuzzyMatcher.valuesToKeyMap(objects, this.keys);
+        console.log(this.keyMap.keys);
+        this.matcher = new Levenshtein.Builder()
+            .dictionary(this.keyMap.keys, true)
+            .algorithm('transposition')
+            .sort_candidates(false)
+            .case_insensitive_sort(true)
+            .include_distance(false)
+            .maximum_candidates(this.options.resultCount || DEFAULT_RESULT_COUNT) // result count 0 doesn't make much sense
+            .build();
+    }
+
+    match(query: String): Array<Object> {
+        const candidates = this.matcher.transduce(query, this.options.distance || DEFAULT_DISTANCE);
+        return _sortedUniq(_sortBy(_flatMap(candidates, candidate => this.keyMap.objectMap[candidate]),
+            candidate => this.keyMap.priorityMap[candidate]));
+    }
+}

src/autocomplete/RoomProvider.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import AutocompleteProvider from './AutocompleteProvider';
 import MatrixClientPeg from '../MatrixClientPeg';
-import Fuse from 'fuse.js';
+import FuzzyMatcher from './FuzzyMatcher';
 import {PillCompletion} from './Components';
 import {getDisplayAliasForRoom} from '../Rooms';
 import sdk from '../index';
@@ -12,11 +12,9 @@ let instance = null;
 
 export default class RoomProvider extends AutocompleteProvider {
     constructor() {
-        super(ROOM_REGEX, {
+        super(ROOM_REGEX);
-            keys: ['displayName', 'userId'],
+        this.matcher = new FuzzyMatcher([], {
-        });
+            keys: ['name', 'aliases'],
-        this.fuse = new Fuse([], {
-           keys: ['name', 'roomId', 'aliases'],
         });
     }
 
@@ -28,14 +26,14 @@ export default class RoomProvider extends AutocompleteProvider {
         const {command, range} = this.getCurrentCommand(query, selection, force);
         if (command) {
             // the only reason we need to do this is because Fuse only matches on properties
-            this.fuse.set(client.getRooms().filter(room => !!room).map(room => {
+            this.matcher.setObjects(client.getRooms().filter(room => !!room).map(room => {
                 return {
                     room: room,
                     name: room.name,
                     aliases: room.getAliases(),
                 };
             }));
-            completions = this.fuse.search(command[0]).map(room => {
+            completions = this.matcher.match(command[0]).map(room => {
                 let displayAlias = getDisplayAliasForRoom(room.room) || room.roomId;
                 return {
                     completion: displayAlias + ' ',

src/autocomplete/UserProvider.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import AutocompleteProvider from './AutocompleteProvider';
 import Q from 'q';
-import Fuse from 'fuse.js';
 import {PillCompletion} from './Components';
 import sdk from '../index';
+import FuzzyMatcher from './FuzzyMatcher';
 
 const USER_REGEX = /@\S*/g;
 
@@ -15,7 +15,7 @@ export default class UserProvider extends AutocompleteProvider {
             keys: ['name', 'userId'],
         });
         this.users = [];
-        this.fuse = new Fuse([], {
+        this.matcher = new FuzzyMatcher([], {
             keys: ['name', 'userId'],
         });
     }
@@ -26,8 +26,7 @@ export default class UserProvider extends AutocompleteProvider {
         let completions = [];
         let {command, range} = this.getCurrentCommand(query, selection, force);
         if (command) {
-            this.fuse.set(this.users);
+            completions = this.matcher.match(command[0]).map(user => {
-            completions = this.fuse.search(command[0]).map(user => {
                 let displayName = (user.name || user.userId || '').replace(' (IRC)', ''); // FIXME when groups are done
                 let completion = displayName;
                 if (range.start === 0) {
@@ -56,6 +55,7 @@ export default class UserProvider extends AutocompleteProvider {
 
     setUserList(users) {
         this.users = users;
+        this.matcher.setObjects(this.users);
     }
 
     static getInstance(): UserProvider {