OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Attempt to improve TagPanel performance 

by only recalculating rooms to show (for a given group) when a group updates.
pull/21833/head
Luke Barnard 2017-12-05 11:25:30 +00:00
parent 4f58b92a14
commit aac5bcfe80
1 changed files with 31 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/views/rooms/RoomList.js
View File

@ -71,6 +71,8 @@ module.exports = React.createClass({
this.mounted = false; this.mounted = false;
const cli = MatrixClientPeg.get(); const cli = MatrixClientPeg.get();
const dmRoomMap = new DMRoomMap(cli);
cli.on("Room", this.onRoom); cli.on("Room", this.onRoom);
cli.on("deleteRoom", this.onDeleteRoom); cli.on("deleteRoom", this.onDeleteRoom);
cli.on("Room.timeline", this.onRoomTimeline); cli.on("Room.timeline", this.onRoomTimeline);
@ -84,8 +86,8 @@ module.exports = React.createClass({
cli.on("Group.myMembership", this._onGroupMyMembership); cli.on("Group.myMembership", this._onGroupMyMembership);
this._groupStores = {}; this._groupStores = {};
this._selectedTagsRoomIdsForGroup = {};
this._selectedTagsRoomIds = []; this._selectedTagsRoomIds = [];
this._selectedTagsUserIds = [];
// When the selected tags are changed, initialise a group store if necessary // When the selected tags are changed, initialise a group store if necessary
this._filterStoreToken = FilterStore.addListener(() => { this._filterStoreToken = FilterStore.addListener(() => {
FilterStore.getSelectedTags().forEach((tag) => { FilterStore.getSelectedTags().forEach((tag) => {
@ -94,10 +96,12 @@ module.exports = React.createClass({
} }
this._groupStores[tag] = GroupStoreCache.getGroupStore(tag); this._groupStores[tag] = GroupStoreCache.getGroupStore(tag);
this._groupStores[tag].registerListener(() => { this._groupStores[tag].registerListener(() => {
this.updateSelectedTagsEntities(); // This group's rooms or members may have updated, update rooms for its tag
this.updateSelectedTagsRooms(dmRoomMap, [tag]);
}); });
}); });
this.updateSelectedTagsEntities(); // Filters themselves have changed, refresh the selected tags
this.updateSelectedTagsRooms(dmRoomMap, FilterStore.getSelectedTags());
}); });
this.refreshRoomList(); this.refreshRoomList();
@ -260,20 +264,31 @@ module.exports = React.createClass({
}, 500), }, 500),
// Update which rooms and users should appear in RoomList as dictated by selected tags // Update which rooms and users should appear in RoomList as dictated by selected tags
updateSelectedTagsEntities: function() { updateSelectedTagsRooms: function(dmRoomMap, updatedTags) {
if (!this.mounted) return; if (!this.mounted) return;
this._selectedTagsRoomIds = []; updatedTags.forEach((tag) => {
this._selectedTagsUserIds = []; // For now, only handle group tags
FilterStore.getSelectedTags().forEach((tag) => { const store = this._groupStores[tag];
this._selectedTagsRoomIds = this._selectedTagsRoomIds.concat( if (!store) return;
this._groupStores[tag].getGroupRooms().map((room) => room.roomId),
);
// TODO: Check if room has been tagged to the group by the user
this._selectedTagsUserIds = this._selectedTagsUserIds.concat( this._selectedTagsRoomIdsForGroup[tag] = [];
this._groupStores[tag].getGroupMembers().map((member) => member.userId), store.getGroupRooms().forEach((room) => this._selectedTagsRoomIdsForGroup[tag].push(room.roomId));
store.getGroupMembers().forEach((member) => {
if (member.userId === MatrixClientPeg.get().credentials.userId) return;
dmRoomMap.getDMRoomsForUserId(member.userId).forEach(
(roomId) => this._selectedTagsRoomIdsForGroup[tag].push(roomId),
); );
}); });
// TODO: Check if room has been tagged to the group by the user
});
this._selectedTagsRoomIds = [];
FilterStore.getSelectedTags().forEach((tag) => {
(this._selectedTagsRoomIdsForGroup[tag] || []).forEach(
(roomId) => this._selectedTagsRoomIds.push(roomId),
);
});
this.setState({ this.setState({
selectedTags: FilterStore.getSelectedTags(), selectedTags: FilterStore.getSelectedTags(),
}, () => { }, () => {
@ -281,17 +296,9 @@ module.exports = React.createClass({
}); });
}, },
isRoomInSelectedTags: function(room, me, dmRoomMap) { isRoomInSelectedTags: function(room) {
// No selected tags = every room is visible in the list // No selected tags = every room is visible in the list
if (this.state.selectedTags.length === 0) { return this.state.selectedTags.length === 0 || this._selectedTagsRoomIds.includes(room.roomId);
return true;
}
if (this._selectedTagsRoomIds.includes(room.roomId)) {
return true;
}
const dmUserId = dmRoomMap.getUserIdForRoomId(room.roomId);
return dmUserId && dmUserId !== me.userId &&
this._selectedTagsUserIds.includes(dmUserId);
}, },
refreshRoomList: function() { refreshRoomList: function() {
@ -341,7 +348,7 @@ module.exports = React.createClass({
const tagNames = Object.keys(room.tags); const tagNames = Object.keys(room.tags);
// Apply TagPanel filtering, derived from FilterStore // Apply TagPanel filtering, derived from FilterStore
if (!this.isRoomInSelectedTags(room, me, dmRoomMap)) { if (!this.isRoomInSelectedTags(room)) {
return; return;
} }