[ui] fix UpEntry overflow & display attribute labels

webui/src/components/display/UpEntry.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { UpEntry } from "upend";
+  import { attributeLabels } from "../../util/labels";
   import UpObject from "./UpObject.svelte";
 
   export let entry: UpEntry;
@@ -9,8 +10,8 @@
   <div class="entity">
     <UpObject link address={entry.entity} />
   </div>
-  <div class="attribute">
-    {entry.attribute}
+  <div class="attribute" title={entry.attribute}>
+    {$attributeLabels[entry.attribute] || entry.attribute}
   </div>
   <div class="value value-{entry.value.t.toLowerCase()}">
     {#if entry.value.t === "Address"}
@@ -34,6 +35,7 @@
     & > * {
       flex: 33%;
       min-width: 0;
+      word-break: break-all;
     }
   }
 

webui/src/components/widgets/Table.svelte

@@ -14,6 +14,7 @@
   import { Readable, readable } from "svelte/store";
   import { defaultEntitySort, entityValueSort } from "../../util/sort";
   import { fetchAllAttributes } from "../../lib/api";
+  import { attributeLabels } from "../../util/labels";
   const dispatch = createEventDispatcher();
 
   export let columns: string | undefined = undefined;
@@ -142,25 +143,6 @@
   });
 
   // Formatting & Display
-  let ATTRIBUTE_LABELS: { [key: string]: string } = {
-    FILE_MIME: "MIME type",
-    FILE_MTIME: "Last modified",
-    FILE_SIZE: "File size",
-    ADDED: "Added at",
-    LAST_VISITED: "Last visited at",
-    LBL: "Label",
-    IS: "Type",
-  };
-
-  fetchAllAttributes().then((attributes) => {
-    attributes.forEach((attribute) => {
-      if (attribute.labels.length) {
-        ATTRIBUTE_LABELS[attribute.name] = attribute.labels[0];
-      }
-    });
-    ATTRIBUTE_LABELS = ATTRIBUTE_LABELS;
-  });
-
   const COLUMN_LABELS: { [key: string]: string } = {
     entity: "Entity",
     attribute: "Attribute",
@@ -208,7 +190,7 @@
         <th />
       {/if}
       {#each displayColumns as column}
-        <th>{COLUMN_LABELS[column] || ATTRIBUTE_LABELS[column] || column}</th>
+        <th>{COLUMN_LABELS[column] || $attributeLabels[column] || column}</th>
       {/each}
     </tr>
   {/if}
@@ -240,11 +222,11 @@
         {:else if column == ATTR_COL}
           <td
             class:formatted={Boolean(
-              Object.keys(ATTRIBUTE_LABELS).includes(entry.attribute)
+              Object.keys($attributeLabels).includes(entry.attribute)
             )}
           >
             <Ellipsis
-              value={ATTRIBUTE_LABELS[entry.attribute] || entry.attribute}
+              value={$attributeLabels[entry.attribute] || entry.attribute}
               title={entry.attribute}
             />
           </td>

webui/src/util/labels.ts

@@ -0,0 +1,27 @@
+import { readable, Readable } from "svelte/store";
+import { fetchAllAttributes } from "../lib/api";
+
+const DEFAULT_ATTRIBUTE_LABELS = {
+  FILE_MIME: "MIME type",
+  FILE_MTIME: "Last modified",
+  FILE_SIZE: "File size",
+  ADDED: "Added at",
+  LAST_VISITED: "Last visited at",
+  LBL: "Label",
+  IS: "Type",
+};
+
+export const attributeLabels: Readable<{ [key: string]: string }> = readable(
+  DEFAULT_ATTRIBUTE_LABELS,
+  (set) => {
+    const result = Object.assign(DEFAULT_ATTRIBUTE_LABELS);
+    fetchAllAttributes().then((attributes) => {
+      attributes.forEach((attribute) => {
+        if (attribute.labels.length) {
+          result[attribute.name] = attribute.labels.sort()[0];
+        }
+      });
+      set(result);
+    });
+  }
+);