Improve ChatInviteDialog perf by ditching fuse, using indexOf and lastActiveTs()

pull/21833/head
Luke Barnard 2017-05-30 12:34:19 +01:00
parent de1cacf983
commit 4e4c670458
1 changed files with 17 additions and 30 deletions

View File

@ -27,7 +27,6 @@ import dis from '../../../dispatcher';
import Modal from '../../../Modal'; import Modal from '../../../Modal';
import AccessibleButton from '../elements/AccessibleButton'; import AccessibleButton from '../elements/AccessibleButton';
import q from 'q'; import q from 'q';
import Fuse from 'fuse.js';
const TRUNCATE_QUERY_LIST = 40; const TRUNCATE_QUERY_LIST = 40;
@ -74,19 +73,6 @@ module.exports = React.createClass({
// Set the cursor at the end of the text input // Set the cursor at the end of the text input
this.refs.textinput.value = this.props.value; this.refs.textinput.value = this.props.value;
} }
// Create a Fuse instance for fuzzy searching this._userList
this._fuse = new Fuse(
// Use an empty list at first that will later be populated
// (see this._updateUserList)
[],
{
shouldSort: true,
location: 0, // The index of the query in the test string
distance: 5, // The distance away from location the query can be
// 0.0 = exact match, 1.0 = match anything
threshold: 0.3,
}
);
this._updateUserList(); this._updateUserList();
}, },
@ -175,7 +161,7 @@ module.exports = React.createClass({
}, },
onQueryChanged: function(ev) { onQueryChanged: function(ev) {
const query = ev.target.value; const query = ev.target.value.toLowerCase();
let queryList = []; let queryList = [];
if (query.length < 2) { if (query.length < 2) {
@ -188,24 +174,27 @@ module.exports = React.createClass({
this.queryChangedDebouncer = setTimeout(() => { this.queryChangedDebouncer = setTimeout(() => {
// Only do search if there is something to search // Only do search if there is something to search
if (query.length > 0 && query != '@') { if (query.length > 0 && query != '@') {
// Weighted keys prefer to match userIds when first char is @ this._userList.forEach((user) => {
this._fuse.options.keys = [{ if (user.userId.toLowerCase().indexOf(query) === -1 &&
name: 'displayName', user.displayName.toLowerCase().indexOf(query) === -1
weight: query[0] === '@' ? 0.1 : 0.9, ) {
},{ return;
name: 'userId', }
weight: query[0] === '@' ? 0.9 : 0.1,
}];
queryList = this._fuse.search(query).map((user) => {
// Return objects, structure of which is defined // Return objects, structure of which is defined
// by InviteAddressType // by InviteAddressType
return { queryList.push({
addressType: 'mx', addressType: 'mx',
address: user.userId, address: user.userId,
displayName: user.displayName, displayName: user.displayName,
avatarMxc: user.avatarUrl, avatarMxc: user.avatarUrl,
isKnown: true, isKnown: true,
} order: user.getLastActiveTs(),
});
});
queryList = queryList.sort((a,b) => {
return a.order < b.order;
}); });
// If the query is a valid address, add an entry for that // If the query is a valid address, add an entry for that
@ -351,7 +340,7 @@ module.exports = React.createClass({
this.props.onFinished(true, addrTexts); this.props.onFinished(true, addrTexts);
}, },
_updateUserList: new rate_limited_func(function() { _updateUserList: function() {
// Get all the users // Get all the users
this._userList = MatrixClientPeg.get().getUsers(); this._userList = MatrixClientPeg.get().getUsers();
// Remove current user // Remove current user
@ -359,9 +348,7 @@ module.exports = React.createClass({
return u.userId === MatrixClientPeg.get().credentials.userId; return u.userId === MatrixClientPeg.get().credentials.userId;
}); });
this._userList.splice(meIx, 1); this._userList.splice(meIx, 1);
},
this._fuse.set(this._userList);
}, 500),
_isOnInviteList: function(uid) { _isOnInviteList: function(uid) {
for (let i = 0; i < this.state.inviteList.length; i++) { for (let i = 0; i < this.state.inviteList.length; i++) {