[ui] sort table by resolved addresses, comments

ui/src/components/Address.svelte

@@ -1,19 +1,20 @@
 <script lang="ts">
+  import { createEventDispatcher } from "svelte";
   import { identify, useEntity } from "../lib/entity";
-
   import HashBadge from "./HashBadge.svelte";
-
   import Marquee from "./Marquee.svelte";
   import UpLink from "./UpLink.svelte";
+  const dispatch = createEventDispatcher();
 
   export let address: string;
   export let link = false;
   export let isFile = false;
   export let resolve = true;
+
   let resolving = resolve;
 
   // Identification
-  let inferredIds = [];
+  let inferredIds: string[] = [];
   const { attributes, backlinks } = useEntity(address, () => resolve);
   $: {
     if (resolve) {
@@ -24,6 +25,8 @@
       });
     }
   }
+
+  $: dispatch("resolved", inferredIds);
 </script>
 
 <div class="address" class:identified={Boolean(inferredIds)}>

ui/src/components/widgets/Table.svelte

@@ -13,12 +13,14 @@
   export let attributes: OrderedListing;
   export let editable = false;
 
-  let newEntryAttribute = "'";
-  let newEntryValue = "";
-
+  // Pagination
   let currentDisplay = 999;
   const MAX_DISPLAY = 50;
 
+  // Editing
+  let newEntryAttribute = "'";
+  let newEntryValue = "";
+
   async function addEntry() {
     // this.$emit("edit", {
     //   type: "create",
@@ -50,8 +52,28 @@
     // } as AttributeChange);
   }
 
-  let resolve = [];
+  // Sorting
+  let resolvedValues: { [key: string]: string } = {};
+  $: sortedAttributes = attributes
+    .concat()
+    .sort(([aHash, _], [bHash, __]) => {
+      if (
+        resolvedValues[aHash] === undefined ||
+        resolvedValues[bHash] === undefined
+      ) {
+        return 0;
+      } else {
+        return resolvedValues[aHash].localeCompare(resolvedValues[bHash]);
+      }
+    })
+    .sort(([_, aEntry], [__, bEntry]) => {
+      return aEntry.attribute.localeCompare(bEntry.attribute);
+    })
+    .sort(([_, aEntry], [__, bEntry]) => {
+      return aEntry.entity.localeCompare(bEntry.entity);
+    });
 
+  // Formatting & Display
   const ATTRIBUTE_LABELS: { [key: string]: string } = {
     FILE_MIME: "MIME type",
     FILE_MTIME: "Last modified",
@@ -73,6 +95,9 @@
       return handler(value);
     }
   }
+
+  // Optimizations
+  let resolve = [];
 </script>
 
 <table>
@@ -106,7 +131,7 @@
     {/if}
   </tr>
 
-  {#each attributes as [id, entry] (id)}
+  {#each sortedAttributes as [id, entry] (id)}
     <tr>
       {#if editable}
         <td class="attr-action">
@@ -140,7 +165,9 @@
                 link
                 address={entry.value.c}
                 resolve={Boolean(resolve[id]) || true}
-                data-id={id}
+                on:resolved={(event) => {
+                  resolvedValues[id] = event.detail[0];
+                }}
               />
             {:else}
               <div