feat(webui): SurfaceColumn automatically finds PERPENDICULAR attributes, if set

webui/src/components/SurfaceColumn.svelte

@@ -10,6 +10,8 @@
   import SurfacePoint from "./display/SurfacePoint.svelte";
   import { i18n } from "../i18n";
   import debug from "debug";
+  import { Query } from "@upnd/upend";
+  import { Any } from "@upnd/upend/query";
   const dbg = debug("kestrel:surface");
   const dispatch = createEventDispatcher();
 
@@ -29,6 +31,42 @@
   let viewHeight = 0;
   let viewWidth = 0;
 
+  $: {
+    if ((x && !y) || (!x && y)) findPerpendicular();
+  }
+  async function findPerpendicular() {
+    const presentAxis = x || y;
+    const presentAxisAddress = await api.componentsToAddress({
+      t: "Attribute",
+      c: presentAxis,
+    });
+    const result = await api.query(
+      Query.or(
+        Query.matches(`@${presentAxisAddress}`, "PERPENDICULAR", Any),
+        Query.matches(Any, "PERPENDICULAR", `@${presentAxisAddress}`),
+      ),
+    );
+    const perpendicular = [
+      ...result.entries.map((e) => e.entity),
+      ...result.values
+        .filter((v) => v.t === "Address")
+        .map((v) => v.c as string),
+    ].find((address) => address !== presentAxisAddress);
+
+    if (perpendicular) {
+      const perpendicularComponents =
+        await api.addressToComponents(perpendicular);
+      if (perpendicularComponents.t !== "Attribute") return;
+      const perpendicularName = perpendicularComponents.c;
+
+      if (x) {
+        y = perpendicularName;
+      } else {
+        x = perpendicularName;
+      }
+    }
+  }
+
   interface IPoint {
     address: string;
     x: number;