feat(ui): reverse surface Y scale, add loading state

webui/src/views/Surface.svelte

@@ -4,7 +4,8 @@
   import Selector from "../components/utils/Selector.svelte";
   import * as d3 from "d3";
   import { onMount } from "svelte";
-  import type { D3ZoomEvent, ZoomTransform } from "d3";
+  import type { ZoomTransform } from "d3";
+  import Spinner from "../components/utils/Spinner.svelte";
 
   const urlSearch = window.location.href.substring(
     window.location.href.indexOf("?")
@@ -14,6 +15,10 @@
   let x: string = urlParams.get("x");
   let y: string = urlParams.get("y");
 
+  let loaded = false;
+  let viewHeight = 0;
+  let viewWidth = 0;
+
   interface IPoint {
     address: string;
     x: number;
@@ -45,27 +50,30 @@
 
   onMount(() => {
     const view = d3.select(".view");
-    const { width, height } = (
-      view.node() as HTMLElement
-    ).getBoundingClientRect();
 
     const svg = view.append("svg");
 
-    const xScale = d3.scaleLinear().domain([0, width]).range([0, width]);
+    const xScale = d3
+      .scaleLinear()
+      .domain([0, viewWidth])
+      .range([0, viewWidth]);
 
     const xAxis = d3
       .axisBottom(xScale)
       .ticks(15)
-      .tickSize(height)
+      .tickSize(viewHeight)
-      .tickPadding(5 - height);
+      .tickPadding(5 - viewHeight);
 
-    const yScale = d3.scaleLinear().domain([0, height]).range([0, height]);
+    const yScale = d3
+      .scaleLinear()
+      .domain([0, viewHeight])
+      .range([viewHeight, 0]);
 
     const yAxis = d3
       .axisRight(yScale)
-      .ticks(height / (width / 15))
+      .ticks(viewHeight / (viewWidth / 15))
-      .tickSize(width)
+      .tickSize(viewWidth)
-      .tickPadding(5 - width);
+      .tickPadding(5 - viewWidth);
 
     const gX = svg.append("g").attr("class", "axis axis--x").call(xAxis);
     const gY = svg.append("g").attr("class", "axis axis--y").call(yAxis);
@@ -97,6 +105,7 @@
     }
 
     d3.select(".view").call(zoom);
+    loaded = true;
   });
 </script>
 
@@ -109,10 +118,23 @@
       Y: <Selector type="attribute" bind:attribute={y} />
     </div>
   </div>
-  <div class="view">
+  <div
+    class="view"
+    class:loaded
+    bind:clientWidth={viewWidth}
+    bind:clientHeight={viewHeight}
+  >
+    {#if !loaded}
+      <div class="loading">
+        <Spinner centered="absolute" />
+      </div>
+    {/if}
     <div class="points">
       {#each points as point}
-        <div class="point" style="left: {point.x}px; top: {point.y}px">
+        <div
+          class="point"
+          style="left: {point.x}px; top: {viewHeight - point.y}px"
+        >
           <div class="inner">
             <UpObject point link address={point.address} />
           </div>
@@ -170,5 +192,20 @@
         transform: translate(-50%, -50%);
       }
     }
+
+    &:not(.loaded) {
+      pointer-events: none;
+    }
+  }
+
+  .loading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    z-index: 99;
+    transform: scale(3);
   }
 </style>