fix(webui): surface allows rudimentary rescaling

webui/src/views/Surface.svelte

@@ -29,6 +29,7 @@
   let loaded = false;
   let viewHeight = 0;
   let viewWidth = 0;
+  let rootEl: HTMLElement | undefined;
 
   interface IPoint {
     address: string;
@@ -67,9 +68,10 @@
   onMount(async () => {
     const d3 = await import("d3");
 
+    function init() {
       const view = d3.select(".view");
-
-    const svg = view.append("svg");
+      const svg = view.select("svg");
+      svg.selectAll("*").remove();
 
       const xScale = d3
         .scaleLinear()
@@ -139,6 +141,12 @@
           selectorCoords = [currentX, currentY];
         });
       loaded = true;
+    }
+
+    const resizeObserver = new ResizeObserver(() => {
+      init();
+    });
+    resizeObserver.observe(rootEl);
   });
 
   async function onSelectorInput(ev: CustomEvent<IValue>) {
@@ -159,7 +167,7 @@
   }
 </script>
 
-<div class="surface">
+<div class="surface" bind:this={rootEl}>
   <div class="header">
     <div class="axis-selector">
       X: <Selector type="attribute" bind:attribute={x} />
@@ -242,6 +250,7 @@
         </div>
       {/each}
     </div>
+    <svg />
   </div>
 </div>