feat(webui): SurfaceColumn's axes are fully reflected in URL

webui/src/components/SurfaceColumn.svelte

@@ -2,26 +2,20 @@
   import UpObject from "./display/UpObject.svelte";
   import api from "../lib/api";
   import Selector, { type SelectorValue } from "./utils/Selector.svelte";
-  import { onMount, tick } from "svelte";
+  import { createEventDispatcher, onMount, tick } from "svelte";
   import type { ZoomBehavior, ZoomTransform } from "d3";
   import Spinner from "./utils/Spinner.svelte";
   import UpObjectCard from "./display/UpObjectCard.svelte";
   import BlobPreview from "./display/BlobPreview.svelte";
   import SurfacePoint from "./display/SurfacePoint.svelte";
   import { i18n } from "../i18n";
-  import type { IValue } from "@upnd/upend/types";
   import debug from "debug";
   const dbg = debug("kestrel:surface");
-  // import { useNavigate } from "svelte-navigator";
-  // const navigate = useNavigate();
+  const dispatch = createEventDispatcher();
 
-  // const urlParams = new URLSearchParams(
-  //   window.location.href.substring(window.location.href.indexOf("?")),
-  // );
-
-  export let x: string;
-  export let y: string | undefined = undefined; // TODO
-  // $: if (x && y) navigate(`/surface?x=${x}&y=${y}`, { replace: true });
+  export let x: string | undefined = undefined;
+  export let y: string | undefined = undefined;
+  $: dispatch("updateAddress", { x, y });
 
   let viewMode = "point";
 
@@ -197,7 +191,7 @@
       <div class="label">X</div>
       <Selector
         types={["Attribute", "NewAttribute"]}
-        initial={{ t: "Attribute", name: x }}
+        initial={x ? { t: "Attribute", name: x } : undefined}
         on:input={(ev) => {
           if (ev.detail.t === "Attribute") x = ev.detail.name;
         }}
@@ -213,6 +207,7 @@
       <div class="label">Y</div>
       <Selector
         types={["Attribute", "NewAttribute"]}
+        initial={y ? { t: "Attribute", name: y } : undefined}
         on:input={(ev) => {
           if (ev.detail.t === "Attribute") y = ev.detail.name;
         }}

webui/src/views/Browse.svelte

@@ -10,6 +10,7 @@
   import GroupColumn from "../components/GroupColumn.svelte";
   import SurfaceColumn from "../components/SurfaceColumn.svelte";
   import type { SelectorValue } from "src/components/utils/Selector.svelte";
+  import { update } from "lodash";
   const navigate = useNavigate();
   const params = useParams();
 
@@ -69,6 +70,12 @@
   }
   $: only = addresses.length === 1 && !$selected.length;
 
+  function updateAddress(index: number, address: string) {
+    let _addresses = addresses.concat();
+    _addresses[index] = address;
+    navigate(`/browse/${_addresses.join(",")}`);
+  }
+
   $: if ($selected.length && !addresses.includes("selected")) {
     let _addresses = addresses.concat();
     _addresses.push("selected");
@@ -130,7 +137,19 @@
           on:close={() => close(index)}
           on:detail={(ev) => onDetailChanged(index, ev)}
         >
-          <SurfaceColumn x={address.split(":")[1]} />
+          {@const x = address.split(":")[1].split(";")[0]}
+          {@const y = address.split(":")[1].split(";")[1]}
+          <SurfaceColumn
+            x={x !== "_" ? x : undefined}
+            y={y !== "_" ? y : undefined}
+            on:updateAddress={(ev) =>
+              updateAddress(
+                index,
+                `surface:${[ev.detail.x, ev.detail.y]
+                  .map((v) => v || "_")
+                  .join(";")}`,
+              )}
+          />
         </BrowseColumn>
       {:else}
         <BrowseColumn