feat(webui): quick & dirty reverse path resolution for duplicate group distinction

webui/src/components/display/UpObject.svelte

@@ -10,11 +10,12 @@
   import IconButton from "../utils/IconButton.svelte";
   import { vaultInfo } from "../../util/info";
   import type { BrowseContext } from "../../util/browse";
-  import type { UpObject } from "@upnd/upend";
+  import { Query, type UpObject } from "@upnd/upend";
   import type { ADDRESS_TYPE, EntityInfo } from "@upnd/upend/types";
   import { useEntity } from "../../lib/entity";
   import { i18n } from "../../i18n";
   import api from "../../lib/api";
+  import { ATTR_IN, ATTR_LABEL, HIER_ROOT_ADDR } from "@upnd/upend/constants";
 
   const dispatch = createEventDispatcher();
 
@@ -23,6 +24,7 @@
   export let link = false;
   export let banner = false;
   export let resolve = !(labels || []).length || banner;
+  export let backpath = 0;
 
   let entity: Readable<UpObject> = readable(undefined);
   let entityInfo: Readable<EntityInfo> = writable(undefined);
@@ -74,6 +76,33 @@
 
   $: dispatch("resolved", inferredIds);
 
+  // Resolved backpath
+  let resolvedBackpath: string[] = [];
+  $: if (backpath) resolveBackpath();
+  async function resolveBackpath() {
+    resolvedBackpath = [];
+    let levels = 0;
+    let current = address;
+    while (levels < backpath && current !== HIER_ROOT_ADDR) {
+      const parent = await api.query(
+        new Query().matches(`@${current}`, ATTR_IN, undefined),
+      );
+      if (parent.entries.length) {
+        current = parent.entries[0].value.c as string;
+        const label = await api.query(
+          new Query().matches(`@${current}`, ATTR_LABEL, undefined),
+        );
+        if (label.entries.length) {
+          resolvedBackpath = [
+            label.entries[0].value.c as string,
+            ...resolvedBackpath,
+          ];
+        }
+      }
+      levels++;
+    }
+  }
+
   // Navigation highlights
   const context = getContext("browse") as BrowseContext | undefined;
   const index = context?.index || undefined;
@@ -134,13 +163,34 @@
     <div class="separator" />
     <div class="label" class:resolving title={displayLabel}>
       {#if banner && isFile}
-        <Ellipsis value={displayLabel} />
+        <Ellipsis value={displayLabel}>
+          {#if resolvedBackpath}
+            <span class="backpath">
+              {resolvedBackpath.join("/")}
+            </span>
+          {/if}
+          {displayLabel}
+        </Ellipsis>
       {:else if link}
         <UpLink to={{ entity: address }}>
-          <Ellipsis value={displayLabel} />
+          <Ellipsis value={displayLabel}>
+            {#if resolvedBackpath}
+              <span class="backpath">
+                {resolvedBackpath.join("/")}
+              </span>
+            {/if}
+            {displayLabel}
+          </Ellipsis>
         </UpLink>
       {:else}
-        <Ellipsis value={displayLabel} />
+        <Ellipsis value={displayLabel}>
+          {#if resolvedBackpath}
+            <span class="backpath">
+              {resolvedBackpath.join("/")}
+            </span>
+          {/if}
+          {displayLabel}
+        </Ellipsis>
       {/if}
       <div class="type">
         {$entityInfo?.t}
@@ -254,6 +304,11 @@
     margin: 0 0.1em;
   }
 
+  .backpath {
+    opacity: 0.66;
+    margin-right: 0.25em;
+  }
+
   .resolving {
     opacity: 0.7;
   }

webui/src/components/utils/Ellipsis.svelte

@@ -3,7 +3,7 @@
   export let title: string | undefined = undefined;
 </script>
 
-<div class="ellipsis" title={title || value}>{value}</div>
+<div class="ellipsis" title={title || value}><slot>{value}</slot></div>
 
 <style lang="scss">
   .ellipsis {

webui/src/views/Groups.svelte

@@ -86,7 +86,7 @@
             <ul>
               {#each groups as group}
                 <li>
-                  <UpObject link address={group} />
+                  <UpObject link address={group} backpath={2} />
                 </li>
               {/each}
             </ul>
@@ -132,5 +132,9 @@
     border-radius: 4px;
     border: 1px solid var(--foreground);
     padding: 1em;
+    
+    ul {
+      flex-direction: column;
+    }
   }
 </style>