A more efficient way of detecting the entity groups to display.

Instead of iterating over each of the entities in a grouping to find out
which groups should be displayed based on the selector's policy, the
selector can directly keep its `selectedGroups` attribute in sync with
the index.

platypush/backend/http/webapp/src/components/panels/Entities/Index.vue

@@ -127,6 +127,7 @@ export default {
       selector: {
         grouping: 'plugin',
         selectedEntities: {},
+        selectedGroups: {},
       },
     }
   },
@@ -148,14 +149,9 @@ export default {
     },
 
     displayGroups() {
-      return Object.entries(this.entityGroups[this.selector.grouping]).
+      return Object.entries(this.entityGroups[this.selector.grouping])
-        filter(
+        .filter((entry) => this.selector.selectedGroups[entry[0]])
-          (entry) => Object.values(entry[1]).filter(
+        .map(
-            (e) =>
-              !!this.selector.selectedEntities[e.id] && e.parent_id == null
-          ).length > 0
-        ).
-        map(
           ([grouping, entities]) => {
             return {
               name: grouping,
@@ -164,8 +160,9 @@ export default {
               ),
             }
           }
-        ).
+        )
-        sort((a, b) => a.name.localeCompare(b.name))
+        .filter((group) => group.entities?.length > 0)
+        .sort((a, b) => a.name.localeCompare(b.name))
     },
   },
 

platypush/backend/http/webapp/src/components/panels/Entities/Selector.vue

@@ -143,16 +143,11 @@ export default {
       return {}
     },
 
-    synchronizeSelectedEntities() {
+    sync() {
-      const value = {...this.value}
-      value.selectedEntities = this.selectedEntities
-      this.$emit('input', value)
-    },
-
-    updateSearchTerm() {
       const value = {...this.value}
       value.searchTerm = this.searchTerm
       value.selectedEntities = this.selectedEntities
+      value.selectedGroups = this.selectedGroups
       this.$emit('input', value)
     },
 
@@ -166,17 +161,17 @@ export default {
         }, {}
       )
 
-      this.synchronizeSelectedEntities()
+      this.sync()
     },
 
     toggleGroup(group) {
       this.selectedGroups[group] = !this.selectedGroups[group]
-      this.synchronizeSelectedEntities()
+      this.sync()
     },
 
     processEntityUpdate(entity) {
       const group = entity[this.value?.grouping]
-      if (group && this.selectedGroups[entity[group]] == null) {
+      if (group && this.selectedGroups[group] == null) {
         this.selectedGroups[group] = true
       }
     },
@@ -194,7 +189,7 @@ export default {
   mounted() {
     this.refreshGroupFilter()
     this.$watch(() => this.value?.grouping, () => { this.refreshGroupFilter() })
-    this.$watch(() => this.searchTerm, this.updateSearchTerm)
+    this.$watch(() => this.searchTerm, this.sync)
     bus.onEntity(this.processEntityUpdate)
   },
 }