[ui] containers section in inspect

webui/src/components/Inspect.svelte

@@ -10,6 +10,7 @@
   import Spinner from "./utils/Spinner.svelte";
   import NotesEditor from "./utils/NotesEditor.svelte";
   import type { AttributeChange } from "../types/base";
+  import UpEntry from "./display/UpEntry.svelte";
 
   export let address: string;
   export let index: number | undefined;
@@ -87,6 +88,17 @@
     ? untypedAttributes
     : filteredUntypedAttributes;
 
+  $: currentBacklinks =
+    (editable
+      ? $entity?.backlinks
+      : $entity?.backlinks.filter(
+          (entry) => !["HAS"].includes(entry.attribute)
+        )) || [];
+
+  $: containers = ($entity?.backlinks || [])
+    .filter((e) => e.attribute === "HAS")
+    .map((e) => e.entity);
+
   async function onChange(ev: CustomEvent<AttributeChange>) {
     const change = ev.detail;
     switch (change.type) {
@@ -126,13 +138,23 @@
 </script>
 
 <div class="inspect">
-  <h2>
-    {#if $entity}
-      <UpObject banner {address} />
-    {:else}
-      <Spinner />
-    {/if}
-  </h2>
+  <header>
+    <h2>
+      {#if $entity}
+        <UpObject banner {address} />
+      {:else}
+        <Spinner />
+      {/if}
+    </h2>
+    <section class="containers labelborder">
+      <header><h3>Containers</h3></header>
+      <div class="content">
+        {#each containers as address}
+          <UpObject {address} link />
+        {/each}
+      </div>
+    </section>
+  </header>
   <BlobPreview {address} />
   <NotesEditor {address} {editable} on:change={onChange} />
   {#if !$error}
@@ -156,7 +178,7 @@
           />
         {/if}
 
-        {#if $entity?.backlinks.length > 0}
+        {#if currentBacklinks.length > 0}
           <AttributeView
             title={`Referred to (${$entity.backlinks.length})`}
             entries={$entity.backlinks}
@@ -176,17 +198,24 @@
 </div>
 
 <style scoped lang="scss">
+  @use "./util";
+
   .inspect {
     flex: auto;
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: 0.5rem;
 
     h2 {
       margin-bottom: 0;
     }
   }
 
+  .containers {
+    display: flex;
+    margin: 0.25rem 0;
+  }
+
   .attributes {
     flex: auto;
     height: 0; // https://stackoverflow.com/a/14964944