feat(webui): proper autofit of SurfaceColumn

webui/src/components/SurfaceColumn.svelte

@@ -19,17 +19,21 @@
   export let y: string | undefined = undefined;
   $: dispatch("updateAddress", { x, y });
 
+  let loaded = false;
+
   let viewMode = "point";
 
   let currentX = NaN;
   let currentY = NaN;
 
-  let loaded = false;
   let zoom: ZoomBehavior<Element, unknown> | undefined;
+  let autofit: () => void | undefined;
+
   let view: Selection<HTMLElement, unknown, null, undefined>;
   let viewEl: HTMLElement | undefined;
   let viewHeight = 0;
   let viewWidth = 0;
+
   let selector: Selector | undefined;
 
   $: if (selector) selector.focus();
@@ -94,6 +98,10 @@
         }
       })
       .filter(Boolean);
+
+    tick().then(() => {
+      autofit();
+    });
   }
 
   $: {
@@ -123,12 +131,12 @@
 
       const xScale = d3
         .scaleLinear()
-        .domain([0, viewWidth / 10])
+        .domain([0, viewWidth])
         .range([0, viewWidth]);
 
       const yScale = d3
         .scaleLinear()
-        .domain([0, viewHeight / 10])
+        .domain([0, viewHeight])
         .range([viewHeight, 0]);
 
       let xTicks = 10;
@@ -166,6 +174,22 @@
         updateStyles();
       }
 
+      autofit = () => {
+        zoom.translateTo(view, 0, viewHeight);
+
+        if (points.length) {
+          zoom.scaleTo(
+            view,
+            Math.min(
+              viewWidth / 2 / Math.max(...points.map((p) => Math.abs(p.x))) -
+                0.3,
+              viewHeight / 2 / Math.max(...points.map((p) => Math.abs(p.y))) -
+                0.3,
+            ),
+          );
+        }
+      };
+
       function updateStyles() {
         svg
           .selectAll(".tick line")
@@ -200,8 +224,7 @@
           selectorCoords = [currentX, currentY];
         });
 
-      zoom.translateTo(view, viewWidth / -2, viewHeight / 2, [0, 0]);
+      autofit();
-      zoom.scaleTo(view, 1);
 
       loaded = true;
     }
@@ -291,8 +314,8 @@
         <div
           class="point selector"
           style="
-            left: {selectorCoords[0] * 10}px;
+            left: {selectorCoords[0]}px;
-            top: {viewHeight - selectorCoords[1] * 10}px"
+            top: {viewHeight - selectorCoords[1]}px"
         >
           <Selector
             types={["Address", "NewAddress"]}
@@ -307,7 +330,7 @@
       {#each points as point}
         <div
           class="point"
-          style="left: {point.x * 10}px; top: {viewHeight - point.y * 10}px"
+          style="left: {point.x}px; top: {viewHeight - point.y}px"
         >
           <div class="inner">
             {#if viewMode == "link"}