Implement relationship grouping for table widget

Author: SanderMertens

etc/js/common.js

@@ -15,11 +15,13 @@ explorer = {
 
   parsePair: function(expr) {
     if (expr[0] !== "(") {
-      console.error("Invalid pair: " + expr);
       return undefined;
     }
 
-    return expr.slice(1, -1).split(",");
+    let pair = expr.slice(1, -1).split(",");
+    pair[0] = pair[0].trim();
+    pair[1] = pair[1].trim();
+    return pair;
   },
 
   shortenComponent: function(component) {

etc/js/components/pages/internals/tables.vue

@@ -4,7 +4,8 @@
       :headers="headers" 
       :data="filteredTables" 
       v-model:filter="filter" 
-      show_filter="true">
+      show_filter="true"
+      @selectItem="onSelectItem">
     </data-table>
   </div>
 </template>
@@ -21,34 +22,43 @@ const props = defineProps({
 });
 
 const filter = ref("");
+const group = ref(null);
 
 const headers = computed(() => {
+  let IdHeader = "ID";
+  if (group.value) {
+    IdHeader = "Count";
+  }
   return [
-    {name: "ID", schema: ["table-id"], get: (table) => table.id},
+    {name: IdHeader, schema: ["table-id"], get: (table) => table.id},
     {name: "Entities", schema: ["int"], totals: true, get: (table) => table.count},
     {name: "Capacity", schema: ["int"], totals: true, get: (table) => table.size},
     {name: "Columns", schema: ["int"], get: (table) => table.type.length},
     {name: "Memory (KB)", schema: ["float"], totals: true, get: (table) => {
       if (!table.memory) {
         return 0;
       }
+      if (typeof table.memory === "number") {
+        return table.memory / 1000;
+      }
       return ((explorer.calculateMemoryTotal(table.memory.table) +
         explorer.calculateMemoryTotal(table.memory.components)) / 1000);
     }},
-    {name: "Components", schema: ["table-type"],get: (table) => formatType(table.type)},
+    {name: "Components", list: true, get: (table) => formatType(table.type)},
   ];
 });
 
 const searchableType = computed(() => {
   return props.tables.map((table) => {
-    return formatType(table.type).toLowerCase().split(" ").join("");
+    return formatType(table.type).join("").split(" ").join("").toLowerCase();
   });
 });
 
 const filteredTables = computed(() => {
+  let tables = props.tables;
   if (filter.value && filter.value.length > 0) {
     const F = filter.value.toLowerCase().split(" ").join("").split(",");
-    return props.tables.filter((table, index) => {
+    tables = tables.filter((table, index) => {
       const v = searchableType.value[index];
       for (let f of F) {
         if (!v.includes(f)) {
@@ -58,7 +68,37 @@ const filteredTables = computed(() => {
       return true;
     });
   }
-  return props.tables;
+
+  if (group.value) {
+    // create map for group strings
+    let groups = {};
+
+    for (let table of tables) {
+      for (let i = 0; i < table.type.length; i++) {
+        const id = table.type[i];
+        if (id.includes(group.value)) {
+          let copy = table.type.slice();
+          copy[i] = "(" + group.value + "," + "*)";
+
+          const key = copy.join(", ");
+          let val = groups[key];
+          if (!val) {
+            val = groups[key] = {id: 0, count: 0, size: 0, memory: 0, type: copy};
+          }
+          val.id ++;
+          val.count += table.count;
+          val.size += table.size;
+          val.memory += explorer.calculateMemoryTotal(table.memory.table);
+          val.memory += explorer.calculateMemoryTotal(table.memory.components);
+          break;
+        }
+      }
+    }
+
+    tables = Object.values(groups);
+  }
+
+  return tables;
 });
 
 function formatType(type) {
@@ -69,7 +109,21 @@ function formatType(type) {
     result.push(str);
   }
 
-  return result.join(", ");;
+  return result;
+}
+
+function onSelectItem(evt) {
+  const pair = explorer.parsePair(evt.item);
+  if (!pair) {
+    return;
+  }
+
+  if (pair[1] === "*") {
+    group.value = undefined;
+    return;
+  }
+
+  group.value = pair[0];
 }
 
 </script>

etc/js/components/widgets/data-table.vue

@@ -58,6 +58,12 @@
                       fieldClass="table-field">
                     </entity-inspector-preview>
                   </template>
+                  <template v-else-if="col.list">
+                    <template v-for="(item, i) in col.get(row)">
+                      <span class="data-table-list-item-comma" v-if="i > 0">,</span>
+                      <span :class="itemClass(item)" @click.stop="onSelectItem({column: col, item: item})">{{ item }}</span>
+                    </template>
+                  </template>
                   <template v-else>
                     {{ col.get(row) }}
                   </template>
@@ -97,7 +103,7 @@ import { defineProps, defineEmits, defineExpose, defineModel,computed, ref, watc
 
 const orderByModes = ["none", "asc", "desc"];
 const orderBy = ref({});
-const emit = defineEmits(["select"]);
+const emit = defineEmits(["select", "selectItem"]);
 const offset = ref(0);
 const limit = ref(50);
 
@@ -110,6 +116,14 @@ const props = defineProps({
 
 const filter = defineModel("filter");
 
+function itemClass(item) {
+  let result = ["data-table-list-item"];
+  if (!item || item.includes("*")) {
+    result.push("data-table-list-item-highlight");
+  }
+  return result;
+}
+
 const orderByIndices = computed(() => {
   if (!orderBy.value.mode || orderBy.value.mode === 'none') {
     return undefined;
@@ -286,6 +300,10 @@ function onSelectEntity(e) {
   return emit("select", e);
 }
 
+function onSelectItem(evt) {
+  return emit("selectItem", evt);
+}
+
 function onPrev() {
   offset.value -= limit.value;
   if (offset.value < 0) {
@@ -437,4 +455,31 @@ tr.data-table-row-selectable:hover td {
 span.entity-link:hover {
   color: var(--green);
 }
+
+span.data-table-list-item {
+  border-radius: var(--border-radius-medium);
+  color: var(--secondary-text);
+  cursor: pointer;
+  transition: color var(--animation-duration);
+}
+
+span.data-table-list-item-comma {
+  color: var(--secondary-text);
+  padding-left: 0px;
+  padding-right: 4px;
+}
+
+span.data-table-list-item-highlight {
+  font-weight: 500;
+  background-color: var(--bg-cell-hover);
+  padding: 4px;
+  border-radius: var(--border-radius-medium);
+  cursor: pointer;
+}
+
+span.data-table-list-item:hover {
+  color: var(--primary-text);
+  background-color: var(--bg-cell-hover);
+}
+
 </style>