wip: also pass `group` to all widgets, basic unused attr display

webui/src/components/EntryView.svelte

@@ -7,7 +7,10 @@
   export interface Widget {
     name: string;
     icon?: string;
-    components: (entries: UpEntry[]) => Array<WidgetComponent>;
+    components: (input: {
+      entries: UpEntry[];
+      group?: string;
+    }) => Array<WidgetComponent>;
   }
 </script>
 
@@ -66,7 +69,7 @@
   $: {
     components = availableWidgets
       .find((w) => w.name === currentWidget)
-      .components(entries);
+      .components({ entries, group });
   }
 </script>
 

webui/src/components/Inspect.svelte

@@ -234,7 +234,7 @@
     {
       name: "List",
       icon: "list-check",
-      components: (entries) => [
+      components: ({ entries }) => [
         {
           component: EntryList,
           props: {
@@ -250,12 +250,13 @@
     {
       name: "List",
       icon: "list-check",
-      components: (entries) => [
+      components: ({ entries, group }) => [
         {
           component: EntryList,
           props: {
             entries,
             columns: "attribute, value",
+            attributes: $allTypes[group]?.attributes || [],
           },
         },
       ],
@@ -263,7 +264,7 @@
     {
       name: "Gallery",
       icon: "image",
-      components: (entries) => [
+      components: ({ entries }) => [
         {
           component: Gallery,
           props: {
@@ -281,7 +282,7 @@
     {
       name: "List",
       icon: "list-check",
-      components: (entries) => [
+      components: ({ entries }) => [
         {
           component: Gallery,
           props: {
@@ -294,7 +295,7 @@
     {
       name: "Gallery",
       icon: "image",
-      components: (entries) => [
+      components: ({ entries }) => [
         {
           component: Gallery,
           props: {

webui/src/components/widgets/EntryList.svelte

@@ -18,6 +18,9 @@
   import { i18n } from "../../i18n";
   import UpLink from "../display/UpLink.svelte";
   import { ATTR_ADDED, ATTR_LABEL } from "upend/constants";
+  import api from "../../lib/api";
+  import { AddressComponents } from "upend/api";
+  import Icon from "../utils/Icon.svelte";
   const dispatch = createEventDispatcher();
 
   export let columns: string | undefined = undefined;
@@ -27,6 +30,7 @@
   export let columnWidths: string[] | undefined = undefined;
 
   export let entries: UpEntry[];
+  export let attributes: string[] = [];
   export let editable = false;
   export let attributeOptions: string[] | undefined = undefined;
 
@@ -209,6 +213,20 @@
         return String(value);
     }
   }
+
+  // Unused attributes
+  let unusedAttributes = [];
+
+  $: (async () => {
+    unusedAttributes = await Promise.all(
+      attributes
+        .filter((attr) => !entries.some((entry) => entry.attribute === attr))
+        .map(async (attribute) => {
+          const components = new AddressComponents("Attribute", attribute);
+          return await api.componentsToAddress(components);
+        }),
+    );
+  })();
 </script>
 
 <div class="container">
@@ -337,7 +355,30 @@
       </tr>
     {/each}
 
-    {#if editable}
+    {#each unusedAttributes as attributeAddress}
+      <tr>
+        {#if editable}
+          <td class="attr-action"><Icon name="right-arrow" /> </td>
+        {/if}
+        {#each displayColumns as column}
+          {#if column == ATTR_COL}
+            <td>
+              <UpObject link address={attributeAddress} />
+            </td>
+          {:else if column == VALUE_COL}
+            {#if editable}
+              <!-- <Selector type="value" bind:value={newEntryValue} /> -->
+            {:else}
+              <td class="unset">{$i18n.t("(unset)")}</td>
+            {/if}
+          {:else}
+            <td></td>
+          {/if}
+        {/each}
+      </tr>
+    {/each}
+
+    {#if editable && !attributes.length}
       <tr class="add-row">
         <td class="attr-action">
           <IconButton name="plus-circle" on:click={addEntry} />
@@ -402,5 +443,10 @@
     .attribute-col {
       width: 33%;
     }
+
+    .unset {
+      opacity: 0.66;
+      pointer-events: none;
+    }
   }
 </style>

webui/src/views/Home.svelte

@@ -92,7 +92,7 @@
     {
       name: "List",
       icon: "list-ul",
-      components: (entries) => [
+      components: ({ entries }) => [
         {
           component: EntryList,
           props: {
@@ -108,7 +108,7 @@
     {
       name: "Gallery",
       icon: "image",
-      components: (entries) => [
+      components: ({ entries }) => [
         {
           component: Gallery,
           props: {
@@ -124,7 +124,7 @@
     {
       name: "List",
       icon: "list-ul",
-      components: (entries) => [
+      components: ({ entries }) => [
         {
           component: EntryList,
           props: {
@@ -140,7 +140,7 @@
     {
       name: "Gallery",
       icon: "image",
-      components: (entries) => [
+      components: ({ entries }) => [
         {
           component: Gallery,
           props: {

webui/src/views/Search.svelte

@@ -37,7 +37,7 @@
   }
 
   $: objects = ($result?.entries || []).filter(
-    (e) => e.attribute === ATTR_LABEL
+    (e) => e.attribute === ATTR_LABEL,
   );
   $: sortedObjects = matchSorter(objects, debouncedQuery, {
     keys: ["value.c"],
@@ -51,7 +51,7 @@
       .then((labelListing) => {
         exactHits = labelListing.entries
           .filter(
-            (e) => String(e.value.c).toLowerCase() === query.toLowerCase()
+            (e) => String(e.value.c).toLowerCase() === query.toLowerCase(),
           )
           .map((e) => e.entity);
       });
@@ -68,7 +68,7 @@
     {
       name: "List",
       icon: "list-ul",
-      components: (entries) => [
+      components: ({ entries }) => [
         {
           component: Gallery,
           props: {
@@ -82,7 +82,7 @@
     {
       name: "Gallery",
       icon: "image",
-      components: (entries) => [
+      components: ({ entries }) => [
         {
           component: Gallery,
           props: {