[ui] search results shown in AttributeView (enable gallery, etc.)

webui/src/components/utils/Selector.svelte

@@ -1,13 +1,10 @@
 <script lang="ts">
   import { debounce } from "lodash";
   import { createEventDispatcher } from "svelte";
+  import type { UpListing } from "upend";
   import type { IValue, VALUE_TYPE } from "upend/types";
   import { fetchAllAttributes } from "../../lib/api";
-  import {
-    baseSearchOnce,
-    createLabelled,
-    getObjects,
-  } from "../../util/search";
+  import { baseSearchOnce, createLabelled } from "../../util/search";
   import UpObject from "../display/UpObject.svelte";
   import IconButton from "./IconButton.svelte";
   import Input from "./Input.svelte";
@@ -46,7 +43,7 @@
   }
 
   let options: SelectorOption[] = [];
-  let objects = [];
+  let searchResult: UpListing;
   const updateOptions = debounce(async (query: string, doSearch: boolean) => {
     if (query.length == 0) {
       options = [];
@@ -92,8 +89,7 @@
 
         if (valueTypes === undefined || valueTypes.includes("Address")) {
           if (doSearch) {
-            const result = await baseSearchOnce(query);
-            objects = await getObjects(result.entries);
+            searchResult = await baseSearchOnce(query);
           }
 
           let exactHits = Object.entries(addressToLabels)
@@ -120,14 +116,15 @@
           }
 
           options.push(
-            ...objects
-              .filter(([addr, _]) => !exactHits.includes(addr))
+            ...searchResult.entries
+              .filter((e) => e.attribute === "LBL")
+              .filter((e) => !exactHits.includes(e.entity))
               .slice(0, 25)
-              .map(([address, _]) => {
+              .map((e) => {
                 return {
                   value: {
                     t: "Address",
-                    c: address,
+                    c: e.entity,
                   },
                 } as SelectorOption;
               })

webui/src/lib/types.ts

@@ -120,4 +120,32 @@ const TYPE_WIDGETS: { [key: string]: Widget[] } = {
       ],
     },
   ],
+  SEARCH_VIEW: [
+    {
+      name: "list-table",
+      icon: "list-ul",
+      components: [
+        {
+          component: Table,
+          props: {
+            columns: "entity",
+            orderByValue: true,
+            header: false,
+          },
+        },
+      ],
+    },
+    {
+      name: "gallery-view",
+      icon: "image",
+      components: [
+        {
+          component: Gallery,
+          props: {
+            showEntities: true,
+          },
+        },
+      ],
+    },
+  ],
 };

webui/src/util/search.ts

@@ -15,16 +15,6 @@ export function baseSearchOnce(query: string) {
   );
 }
 
-export async function getObjects(
-  entries: UpEntry[],
-  limit = 50
-): Promise<[string, string][]> {
-  return entries
-    .slice(0, limit)
-    .filter((e) => e.attribute == "LBL")
-    .map((e) => [e.entity, String(e.value.c)] as [string, string]);
-}
-
 export async function createLabelled(label: string) {
   let body: InEntry;
   if (label.match("^[\\w]+://[\\w]")) {

webui/src/views/Search.svelte

@@ -4,12 +4,14 @@
   import type { UpListing } from "upend";
   import Spinner from "../components/utils/Spinner.svelte";
   import UpEntryDisplay from "../components/display/UpEntry.svelte";
-  import UpObjectDisplay from "../components/display/UpObject.svelte";
   import UpObjectCard from "../components/display/UpObjectCard.svelte";
   import { useNavigate } from "svelte-navigator";
-  import { baseSearch, createLabelled, getObjects } from "../util/search";
+  import { baseSearch, createLabelled } from "../util/search";
   import { updateTitle } from "../util/title";
   import { query as queryFn } from "../lib/entity";
+  import AttributeView from "../components/AttributeView.svelte";
+  import { UpType } from "../lib/types";
+  import { queryOnce } from "../lib/api";
   const navigate = useNavigate();
 
   export let query: string;
@@ -32,24 +34,33 @@
     exactHits = [];
   }
 
-  $: objects = getObjects($result?.entries || []);
+  $: objects = ($result?.entries || []).filter((e) => e.attribute === "LBL");
 
-  let exactHits = [];
-  function onResolved(address: string, ids: string[]) {
-    if (ids.some((id) => id.toLowerCase() === query.toLowerCase())) {
-      if (!exactHits.includes(address)) {
-        exactHits.push(address);
-        exactHits = exactHits;
+  let exactHits: string[] = [];
+  $: {
+    const addressesString = objects.map((e) => `"${e.entity}"`).join(" ");
+    queryOnce(`(matches (in ${addressesString}) "LBL" ? )`).then(
+      (labelListing) => {
+        exactHits = labelListing.entries
+          .filter(
+            (e) => String(e.value.c).toLowerCase() === query.toLowerCase()
+          )
+          .map((e) => e.entity);
       }
-    }
+    );
   }
 
+  $: console.log({ exactHits });
+
   async function create() {
     const createdAddress = await createLabelled(query);
     navigate(`/browse/${createdAddress}`);
   }
 
   $: updateTitle("Search", query);
+
+  const SearchViewType = new UpType();
+  SearchViewType.name = "SEARCH_VIEW";
 </script>
 
 <div>
@@ -80,17 +91,11 @@
         {:then objects}
           {#if objects.length}
             <h2>Objects</h2>
-            <ul>
-              {#each objects as [address, _]}
-                <li>
-                  <UpObjectDisplay
-                    {address}
-                    link
-                    on:resolved={(ids) => onResolved(address, ids.detail)}
-                  />
-                </li>
-              {/each}
-            </ul>
+            <AttributeView
+              --current-background="var(--background)"
+              entries={objects}
+              type={SearchViewType}
+            />
           {/if}
         {/await}
       </section>
@@ -165,10 +170,8 @@
   }
 
   .objects {
-    li {
-      margin: 0.5em auto;
-      max-width: 66em;
-    }
+    max-width: 66em;
+    margin: auto;
   }
 
   .raw {