PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

autocomplete: replace Fuse.js with liblevenshtein

Browse source
This commit is contained in:
Aviral Dasgupta 2016-12-01 12:06:57 +05:30
parent edd5903ed7
commit 78641a80dd
No known key found for this signature in database
GPG key ID: 5FD1E9F4FFD3DA80
7 changed files with 92 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -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",

2
src/autocomplete/AutocompleteProvider.js
View file

@ -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');

6
src/autocomplete/CommandProvider.js
View file

@ -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

6
src/autocomplete/EmojiProvider.js
View file

@ -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 {

74
src/autocomplete/FuzzyMatcher.js Normal file
View file

@ -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]));
}
}

14
src/autocomplete/RoomProvider.js
View file

@ -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, {
keys: ['displayName', 'userId'],
});
this.fuse = new Fuse([], {
keys: ['name', 'roomId', 'aliases'],
super(ROOM_REGEX);
this.matcher = new FuzzyMatcher([], {
keys: ['name', '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 + ' ',

8
src/autocomplete/UserProvider.js
View file

@ -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.fuse.search(command[0]).map(user => {
completions = this.matcher.match(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 {