[webui] search finds object

webui/src/lib/entity.ts

@@ -1,7 +1,7 @@
 // import { useSWR } from "sswr";
 import LRU from "lru-cache";
 import { derived, Readable } from "svelte/store";
-import { UpListing, UpObject } from "upend";
+import { UpEntry, UpListing, UpObject } from "upend";
 import type { ListingResult } from "upend/types";
 import { useSWR } from "../util/fetch";
 
@@ -27,6 +27,13 @@ export function useEntity(address: string) {
   };
 }
 
+export async function fetchEntry(address: string) {
+  const response = await fetch(`/api/raw/${address}`);
+  const data = await response.json();
+  const listing = new UpListing({ address: data });
+  return listing.entries[0];
+}
+
 export function query(query: () => string) {
   let queryString = typeof query === "string" ? query : query();
   console.debug(`Querying: ${queryString}`);

webui/src/views/Search.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
-  import { query as queryFn } from "../lib/entity";
+  import { fetchEntry, query as queryFn } from "../lib/entity";
   import debounce from "lodash/debounce";
   import { Readable, readable } from "svelte/store";
-  import type { UpListing } from "upend";
-  import UpEntry from "../components/display/UpEntry.svelte";
+  import type { UpEntry, UpListing, UpObject } from "upend";
+  import Spinner from "../components/utils/Spinner.svelte";
+  import UpEntryDisplay from "../components/display/UpEntry.svelte";
+  import UpObjectDisplay from "../components/display/UpObject.svelte";
+  import { useResolve } from "svelte-navigator";
+  import UpObjectCard from "../components/display/UpObjectCard.svelte";
   export let query: string;
 
   let debouncedQuery = "";
@@ -19,23 +23,75 @@
       () => `(matches ? ? (contains "${debouncedQuery}"))`
     ));
   }
+
+  $: entries = ($result?.entries || []).sort((a, b) =>
+    a.address.localeCompare(b.address)
+  );
+
+  async function getObjects(entries: UpEntry[]): Promise<string[]> {
+    const labelled = entries
+      .filter((e) => e.attribute == "LBL")
+      .map((e) => e.entity);
+    const aliased = entries
+      .filter((e) => e.attribute === "ALIAS")
+      .map(async (e) => {
+        const entry = await fetchEntry(e.entity);
+        return String(entry.value.c);
+      });
+    return labelled.concat(await Promise.all(aliased));
+  }
+  $: objects = getObjects($result?.entries || []);
+
+  $: exact = [];
 </script>
 
 <div>
-  {#if $result}
-    <section>
-      <h2>Objects</h2>
-    </section>
-    <section>
-      <h2>Raw results</h2>
-      <ul>
-        {#each $result.entries as entry}
-          <li><UpEntry {entry} /></li>
+  {#if !$error}
+    {#if $result}
+      <section>
+        <h2>Exact</h2>
+        {#if exact.length}
+          exakt
         {:else}
-          <li>No results.</li>
-        {/each}
-      </ul>
-    </section>
+          Create?
+        {/if}
+      </section>
+      {#await objects}
+        <section>
+          <h2>Objects</h2>
+          <Spinner />
+        </section>
+      {:then objects}
+        <section>
+          <h2>Objects</h2>
+          <ul>
+            {#each objects as address}
+              <li><UpObjectCard {address} /></li>
+            {/each}
+          </ul>
+        </section>
+      {/await}
+      {#if entries.length}
+        <section>
+          <h2>Raw results</h2>
+          <ul>
+            {#each entries as entry}
+              <li><UpEntryDisplay {entry} /></li>
+            {/each}
+          </ul>
+        </section>
+      {:else}
+        <div class="global">No results found.</div>
+      {/if}
+    {:else}
+      <div class="global">
+        <Spinner />
+      </div>
+    {/if}
+  {:else}
+    <div class="error">
+      {$error}
+    </div>
   {/if}
 </div>
 
@@ -47,10 +103,19 @@
   ul {
     list-style: none;
     margin: 0;
+    padding: 0;
   }
-  
+
   li {
     margin: 1em auto;
-    width: 66em;
+    max-width: 66em;
+  }
+
+  .global {
+    font-size: 48px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
   }
 </style>