feat(webui): all "combined" can now be selected

webui/src/components/CombineColumn.svelte

@@ -85,7 +85,7 @@
   $: updateResultEntities(includedGroups, excludedGroups);
 </script>
 
-<div class="view">
+<div class="view" data-address-multi={resultEntities}>
   <h2>
     <Icon plain name="intersect" />
     {$i18n.t("Combine")}

webui/src/components/EntitySelect.svelte

@@ -1,33 +1,13 @@
 <script lang="ts" context="module">
   import { writable } from "svelte/store";
-  import api from "../lib/api";
 
   export const selected = writable<string[]>([]);
-  export async function selectGroup(address: string) {
-    const result = await api.query(
-      new Query().matches(undefined, ATTR_IN, `@${address}`),
-    );
-    result.entities
-      .map((e) => e.replace(/^@/, ""))
-      .forEach((entity) => {
-        selected.update((selected) => {
-          if (!selected.includes(entity)) {
-            return [...selected, entity];
-          } else {
-            return selected;
-          }
-        });
-      });
-  }
 </script>
 
 <script lang="ts">
   import { onMount } from "svelte";
   import { i18n } from "../i18n";
 
-  import { Query } from "@upnd/upend";
-  import { ATTR_IN } from "@upnd/upend/constants";
-
   let canvas: HTMLCanvasElement;
 
   onMount(() => {
@@ -42,7 +22,7 @@
 
     let selecting = false;
     let selectAllArea: DOMRect | undefined = undefined;
-    let selectAllAddress: string | undefined = undefined;
+    let selectAllAddresses: string[] | undefined = undefined;
     let addressesToRemove = new Set();
     document.addEventListener("mousedown", (ev) => {
       if (ev.ctrlKey) {
@@ -56,17 +36,17 @@
           ev.clientY,
         ) as HTMLElement;
 
-        const groupElement = el.closest("[data-address-group]") as
+        const multiElement = el.closest("[data-address-multi]") as
           | HTMLElement
           | undefined;
 
-        if (groupElement) {
-          const banner = groupElement.querySelector("h2 .banner");
+        if (multiElement) {
+          const banner = multiElement.querySelector("h2");
 
           if (banner) {
             const rect = banner.getBoundingClientRect();
             selectAllArea = rect;
-            selectAllAddress = groupElement.dataset.addressGroup;
+            selectAllAddresses = multiElement.dataset.addressMulti.split(",");
 
             ctx.rect(rect.left, rect.top, rect.width, rect.height);
             ctx.fillStyle = "#dc322f33";
@@ -103,7 +83,14 @@
             ev.clientY > selectAllArea.top &&
             ev.clientY < selectAllArea.bottom
           ) {
-            selectGroup(selectAllAddress);
+            selected.update((selected) => {
+              return [
+                ...selected,
+                ...selectAllAddresses.filter((a) => {
+                  return !selected.includes(a);
+                }),
+              ];
+            });
             stop();
           }
         }
@@ -145,7 +132,7 @@
 
     function stop() {
       selectAllArea = undefined;
-      selectAllAddress = undefined;
+      selectAllAddresses = undefined;
       selecting = false;
       ctx.clearRect(0, 0, canvas.width, canvas.height);
       for (const address of addressesToRemove) {

webui/src/components/Inspect.svelte

@@ -364,7 +364,7 @@
   class="inspect"
   class:detail
   class:blob={blobHandled}
-  data-address-group={address}
+  data-address-multi={($entity?.attr["~IN"]?.map((e) => e.entity) || []).join(",")}
 >
   <header>
     <h2>