upend/webui/src/views/Surface.svelte

<script lang="ts">
  import UpObject from "../components/display/UpObject.svelte";
  import { queryOnce } from "../lib/api";
  import Selector from "../components/utils/Selector.svelte";
  import { onMount } from "svelte";
  import type { ZoomTransform } from "d3";
  import Spinner from "../components/utils/Spinner.svelte";
  import UpObjectCard from "../components/display/UpObjectCard.svelte";
  import BlobPreview from "../components/display/BlobPreview.svelte";
  import { i18n } from "../i18n";

  const urlSearch = window.location.href.substring(
    window.location.href.indexOf("?")
  );
  const urlParams = new URLSearchParams(urlSearch);

  export let x: string = urlParams.get("x");
  export let y: string = urlParams.get("y");
  let viewMode = "link";

  let currentX = NaN;
  let currentY = NaN;

  let loaded = false;
  let viewHeight = 0;
  let viewWidth = 0;

  interface IPoint {
    address: string;
    x: number;
    y: number;
  }
  let points: IPoint[] = [];

  $: {
    if (x && y) {
      points = [];
      queryOnce(`(matches ? (in "${x}" "${y}") ?)`).then((result) => {
        points = Object.entries(result.objects)
          .map(([address, obj]) => {
            let objX = parseInt(String(obj.get(x)));
            let objY = parseInt(String(obj.get(y)));

            if (objX && objY) {
              return {
                address,
                x: objX,
                y: objY,
              };
            }
          })
          .filter(Boolean);
      });
    }
  }

  onMount(async () => {
    const d3 = await import("d3");

    const view = d3.select(".view");

    const svg = view.append("svg");

    const xScale = d3
      .scaleLinear()
      .domain([0, viewWidth])
      .range([0, viewWidth]);

    const xAxis = d3
      .axisBottom(xScale)
      .ticks(15)
      .tickSize(viewHeight)
      .tickPadding(5 - viewHeight);

    const yScale = d3
      .scaleLinear()
      .domain([0, viewHeight])
      .range([viewHeight, 0]);

    const yAxis = d3
      .axisRight(yScale)
      .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);

    const zoom = d3
      .zoom()
      // .scaleExtent([1, 40])
      // .translateExtent([
      //   [-100, -100],
      //   [width + 90, height + 100],
      // ])
      .on("zoom", zoomed);

    function zoomed({ transform }: { transform: ZoomTransform }) {
      const points = d3.select(".points");
      points.style(
        "transform",
        `translate(${transform.x}px, ${transform.y}px) scale(${transform.k})`
      );
      const allPoints = d3.selectAll(".point");
      allPoints.style("transform", `scale(${1 / transform.k})`);

      gX.call(xAxis.scale(transform.rescaleX(xScale)));
      gY.call(yAxis.scale(transform.rescaleY(yScale)));
    }

    function reset() {
      svg.transition().duration(750).call(zoom.transform, d3.zoomIdentity);
    }

    view.on("mousemove", (ev: MouseEvent) => {
      // not using offsetXY because `translate` transforms on .inner mess it up
      const viewBBox = (view.node() as HTMLElement).getBoundingClientRect();
      const [x, y] = d3
        .zoomTransform(d3.select(".points").node() as HTMLElement)
        .invert([ev.clientX - viewBBox.left, ev.clientY - viewBBox.top]);
      currentX = xScale.invert(x);
      currentY = yScale.invert(y);
    });

    d3.select(".view").call(zoom);
    loaded = true;
  });
</script>

<div class="surface">
  <div class="header">
    <div class="axis-selector">
      X: <Selector type="attribute" bind:attribute={x} />
    </div>
    <div class="axis-selector">
      Y: <Selector type="attribute" bind:attribute={y} />
    </div>
    <div class="view-mode-selector">
      {$i18n.t("View as")}
      <select bind:value={viewMode}>
        <option value="link">{$i18n.t("Link")}</option>
        <option value="card">{$i18n.t("Card")}</option>
        <!-- <option value="preview">{$i18n.t("Preview")}</option> -->
      </select>
    </div>
    <div class="position">
      {$i18n.t("Current position")}:
      <div class="label">
        <em>X:</em>
        {x} = {(Math.round(currentX * 100) / 100).toLocaleString("en", {
          useGrouping: false,
          minimumFractionDigits: 2,
        })}
      </div>
      <div class="label">
        <em>Y:</em>
        {y} = {(Math.round(currentY * 100) / 100).toLocaleString("en", {
          useGrouping: false,
          minimumFractionDigits: 2,
        })}
      </div>
    </div>
  </div>
  <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: {viewHeight - point.y}px"
        >
          <div class="inner">
            {#if viewMode == "link"}
              <UpObject point link address={point.address} />
            {:else if viewMode == "card"}
              <UpObjectCard address={point.address} />
            {:else if viewMode == "preview"}
              <BlobPreview address={point.address} />
            {/if}
          </div>
        </div>
      {/each}
    </div>
  </div>
</div>

<style lang="scss">
  .surface {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .header {
    display: flex;
    gap: 2em;
    padding: 1em;
    border-bottom: 1px solid var(--foreground);
    align-items: center;

    .axis-selector {
      display: flex;
      gap: 1em;
      align-items: center;
    }

    .position {
      display: flex;
      gap: 1em;
      em {
        font-weight: bold;
        font-style: normal;
      }
    }
  }

  .view {
    flex-grow: 1;
    position: relative;

    overflow: hidden;

    :global(svg) {
      width: 100%;
      height: 100%;
    }

    :global(.tick text) {
      color: var(--foreground-lightest);
      font-size: 1rem;
    }

    .points {
      transform-origin: 0 0;
    }

    .point {
      position: absolute;
      transform-origin: 0 0;

      .inner {
        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>