Improve visualization of component namespaces

Author: SanderMertens

etc/js/common.js

@@ -1,20 +1,34 @@
 explorer = {
   shortenEntity: function(entity) {
     if (entity) {
+      if (entity[0] === "(") {
+        let pair = this.parsePair(entity);
+        return "(" + this.shortenEntity(pair[0]) + ", " + pair[1] + ")";
+      }
+
       let escaped = entity.replaceAll("\\.", "@@");
       escaped = escaped.split(".").pop();
       escaped = escaped.replaceAll("@@", ".");
       return escaped;
     }
   },
 
+  parsePair: function(expr) {
+    if (expr[0] !== "(") {
+      console.error("Invalid pair: " + expr);
+      return undefined;
+    }
+
+    return expr.slice(1, -1).split(",");
+  },
+
   shortenComponent: function(component) {
     let result;
     if (component[0] !== "(") {
       // Not a pair
       result = this.shortenEntity(component);
     } else {
-      let pair = component.slice(1, -1).split(",");
+      let pair = this.parsePair(component);
       let rel = this.shortenEntity(pair[0]);
       result = "(" + this.shortenEntity(pair[0]) + ", " + pair[1] + ")";
     }
@@ -23,6 +37,9 @@ explorer = {
 
   entityParent: function(path) {
     path = path.replaceAll("\\\.", "@@");
+    if (path[0] === "(") {
+      path = this.parsePair(path)[0];
+    }
     const names = path.split(".");
     names.pop();
     return names.join(".").replaceAll("@@", ".");

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

@@ -19,7 +19,7 @@ const filter = ref("");
 
 const headers = computed(() => {
   return [
-    {name: "Name", schema: ["name"], get: (component) => component.name},
+    {name: "Name", schema: ["entity"], get: (component) => component.name},
     {name: "Size", schema: ["int"], get: (component) => component.type ? component.type.size : 0},
     {name: "Alignment", schema: ["int"], get: (component) => component.type ? component.type.alignment : 0},
     {name: "Hooks", schema: ["hooks"], get: (component) => formatHooks(component)},