diff --git a/webui/src/views/Surface.svelte b/webui/src/views/Surface.svelte
index d967ce4..3c09890 100644
--- a/webui/src/views/Surface.svelte
+++ b/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)
- .tickPadding(5 - height);
+ .tickSize(viewHeight)
+ .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))
- .tickSize(width)
- .tickPadding(5 - width);
+ .ticks(viewHeight / (viewWidth / 15))
+ .tickSize(viewWidth)
+ .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;
});
@@ -109,10 +118,23 @@
Y: