labels

Author: kellerza

src/components/template_dialog.vue

@@ -150,9 +150,9 @@ const tempN = ref("");
 
 const tempV = computed({
   get: () =>
-    tempN.value in store.templates ? store.templates[tempN.value] : "",
+    tempN.value in store.optTemplates ? store.optTemplates[tempN.value] : "",
   set: (v) => {
-    store.templates[tempN.value] = v;
+    store.optTemplates[tempN.value] = v;
   },
 });
 
@@ -196,7 +196,7 @@ watch(visible, (value) => {
 });
 
 const tempOptions = computed(() =>
-  Object.keys(store.templates).map((v) => {
+  Object.keys(store.optTemplates).map((v) => {
     return {
       label: v,
       value: v,

src/stores/mainStore.ts

@@ -12,6 +12,7 @@ import {
   WsMessage,
   Options,
   WsMsgCodes,
+  TemplateFiles,
 } from "@/utils/types";
 import { fFarEndNode } from "@/utils/helpers";
 import { wsSend } from "@/utils/eventbus";
@@ -26,19 +27,23 @@ export function message(): MessageApi {
 export const useMainStore = defineStore("main", {
   // a function that returns a fresh state
   state: () => ({
+    /** topo file */
     topo: {
       name: "",
       nodes: {} as Nodes,
       links: {} as Links,
       /** compiled vars per NE */
       vars: {} as NodeVars,
     },
-    layout: "grid",
-    zoom: 1.5,
-    templates: {} as Record<string, string>,
-    layouts: {
+    /** *.tmpl files from the template path */
+    templateFiles: {} as TemplateFiles,
+    // option file
+    optLayouts: {
       nodes: {},
     } as vngLayout,
+    optTemplates: {} as Record<string, string>,
+    optLayout: "grid",
+    optZoom: 1.5,
     /** used while loading (?) */
     loading: 0,
     /** split vars or show the merge value! */
@@ -52,9 +57,9 @@ export const useMainStore = defineStore("main", {
       return {
         code: WsMsgCodes.save,
         data: {
-          options: { layout: state.layout, zoom: state.zoom } as Options,
-          layouts: state.layouts,
-          templates: state.templates,
+          options: { layout: state.optLayout, zoom: state.optZoom } as Options,
+          layouts: state.optLayouts,
+          templates: state.optTemplates,
         } as UiData,
       } as WsMessage;
     },
@@ -118,6 +123,9 @@ export const useMainStore = defineStore("main", {
         json_fetch("/labctl/vars").then((resp) => {
           Object.assign(this.topo.vars, resp.data);
         });
+        json_fetch("/labctl/templates").then((resp) => {
+          Object.assign(this.templateFiles, resp.data);
+        });
       }
     },
 
@@ -128,8 +136,8 @@ export const useMainStore = defineStore("main", {
       }
       console.log("load layouts+", data.options);
       Object.assign(this, data.options);
-      this.layouts = data.layouts;
-      this.templates = data.templates;
+      this.optLayouts = data.layouts;
+      this.optTemplates = data.templates;
     },
 
     save() {

src/utils/eventbus.ts

@@ -1,9 +1,7 @@
 import { useEventBus } from "@vueuse/core";
-import { WebSocketTemplate, WsMessage } from "@/utils/types";
+import { WsTemplate, WsMessage } from "@/utils/types";
 
-// export const templateKey: EventBusKey<WebSocketTemplate> =
-//   Symbol("ws-template-key");
-export const wsTemplateBus = useEventBus<WebSocketTemplate>("ws-template-bus");
+export const wsTemplateBus = useEventBus<WsTemplate>("ws-template-bus");
 export const wsRxBus = useEventBus<WsMessage>("ws-bus");
 export const wsTxBus = useEventBus<WsMessage>("ws-tx-bus");
 

src/utils/helpers.ts

@@ -17,42 +17,57 @@ export function fFarEndNode(far: string) {
   };
 }
 
-interface rr {
-  points: Point[];
-  n: number;
-  s: number;
-  pos: string;
-}
-
 function diff(p1: Point, p2: Point): Point {
   return { x: p1.x - p2.x, y: p1.y - p2.y } as Point;
 }
 
-export function labelPosition(nodes: Record<string, Point>, links: Links) {
-  // filter all links with no endpoint
-  const res: Record<string, rr> = {};
+export function labelDirection(
+  nodes: Record<string, Point>,
+  links: Links,
+  debug?: boolean
+) {
+  const res: Record<string, string> = {};
   Object.keys(nodes).forEach((n) => {
-    res[n] = Object.values(links).reduce(
-      (acc: rr, l1: Link) => {
-        if (l1.source === n && l1.source in nodes && l1.target in nodes) {
-          acc.points.push(diff(nodes[l1.target], nodes[n]));
-        }
-        if (l1.target === n && l1.source in nodes && l1.target in nodes) {
-          acc.points.push(diff(nodes[l1.target], nodes[n]));
-        }
-        return acc;
-      },
-      { points: [] as Point[], n: 0, s: 0 } as rr
-    );
-
-    res[n].points.forEach((p) => {
-      const ratio = Math.abs(p.y / p.x);
-      if (p.y < 0) {
-        res[n].n += ratio;
-      } else {
-        res[n].s += ratio;
+    const node = {
+      d: "south",
+      n: 0,
+      s: 0,
+      e: 0,
+      w: 0,
+      pts: [] as Point[],
+    };
+
+    // collect all far end points
+    Object.values(links).forEach((l1: Link) => {
+      if (l1.source === n && l1.source in nodes && l1.target in nodes) {
+        node.pts.push(diff(nodes[l1.target], nodes[n]));
       }
+      if (l1.target === n && l1.source in nodes && l1.target in nodes) {
+        node.pts.push(diff(nodes[l1.source], nodes[n]));
+      }
+    });
+
+    node.pts.forEach((p) => {
+      node[p.y < 0 ? "n" : "s"] += Math.atan(Math.abs(p.y / p.x));
+      node[p.x < 0 ? "w" : "e"] += Math.atan(Math.abs(p.x / p.y));
     });
+
+    // Pick the best direction (lowest, preference: s,n,e,w)
+    let low = node.s;
+    if (node.n < low) {
+      low = node.n;
+      node.d = "north";
+    }
+    if (node.e < low) {
+      low = node.e;
+      node.d = "east";
+    }
+    if (node.w < low) {
+      node.d = "west";
+    }
+
+    if (debug) console.debug(node);
+    res[n] = node.d;
   });
 
   return res;

src/utils/types.ts

@@ -49,7 +49,7 @@ export interface UiData {
   templates: Record<string, string>;
 }
 
-export interface WebSocketTemplate {
+export interface WsTemplate {
   id: string;
   /** the template name */
   name: string;
@@ -70,7 +70,7 @@ export interface WsMessage {
   code: WsMsgCodes;
   data?: UiData;
   msg?: string;
-  template?: WebSocketTemplate;
+  template?: WsTemplate;
 }
 
 interface pLinkVar {
@@ -129,3 +129,11 @@ export interface JsonResponse {
   msg?: string;
   data: Dictionary;
 }
+
+/** labctl Template struct from the server */
+export interface TemplateFiles {
+  name: string;
+  p: string;
+  shadow: string[];
+  value: string;
+}

src/views/graphView.vue

@@ -14,11 +14,11 @@
         style="width: 160px"
       /> -->
       <n-switch
-        :value="layout === 'force'"
-        @update:value="(v) => (layout = v ? 'force' : 'grid')"
+        :value="optLayout === 'force'"
+        @update:value="(v) => (optLayout = v ? 'force' : 'grid')"
       >
         <template #checked> force </template>
-        <template #unchecked> {{ layout }} </template>
+        <template #unchecked> {{ optLayout }} </template>
       </n-switch>
       <n-switch v-model:value="show_logs">
         <template #checked> logs </template>
@@ -30,13 +30,13 @@
   <div :style="{ height: `${ttheight}px` }">
     <v-network-graph
       ref="graph"
-      v-model:zoom-level="zoom"
+      v-model:zoom-level="optZoom"
       v-model:selected-nodes="selectedNodes"
       v-model:selected-edges="selectedLinks"
       :nodes="store.topo.nodes"
       :edges="store.topo.links"
       :configs="configs"
-      :layouts="layouts"
+      :layouts="optLayouts"
       :event-handlers="eventHandlers"
     >
       <template
@@ -121,7 +121,7 @@
       </template>
       <!-- <template #badge="{ scale }">
         <circle
-          v-for="(pos, node) in layouts.nodes"
+          v-for="(pos, node) in optLayouts.nodes"
           :key="node"
           :cx="pos.x + 9 * scale + pan.x"
           :cy="pos.y - 9 * scale + pan.y"
@@ -200,26 +200,12 @@ import VarsView from "@/components/vars_view.vue";
 import { wsTemplateBus, wsTxBus, wsRxBus, wsSend } from "@/utils/eventbus";
 import { WsMsgCodes } from "@/utils/types";
 import { useLocalStorage } from "@vueuse/core";
+import { labelDirection } from "@/utils/helpers";
 
 const store = useMainStore();
 const selectedNodes = ref<string[]>([]);
 const selectedLinks = ref<string[]>([]);
-const { layout, zoom, layouts } = storeToRefs(store);
-
-// const layoutOptions = [
-//   {
-//     label: "Force layout",
-//     value: "force",
-//   },
-//   {
-//     label: "Grid layout",
-//     value: "grid",
-//   },
-//   {
-//     label: "Free layout",
-//     value: "free",
-//   },
-// ];
+const { optLayout, optZoom, optLayouts } = storeToRefs(store);
 
 interface lblLinkT {
   source_above?: string;
@@ -278,15 +264,15 @@ const eventHandlers: vNG.EventHandlers = {
 // watch(layout, store.save);
 
 function getLayoutHandler() {
-  if (layout.value === "force") {
+  if (optLayout.value === "force") {
     return new ForceLayout();
-  } else if (layout.value === "grid") {
+  } else if (optLayout.value === "grid") {
     return new vNG.GridLayout({ grid: 15 });
   }
   return new vNG.SimpleLayout();
 }
 
-watch(layout, () => {
+watch(optLayout, () => {
   store.save();
   if (configs.view) {
     configs.view.layoutHandler = getLayoutHandler();
@@ -295,6 +281,10 @@ watch(layout, () => {
 
 const nodeSize = 30;
 
+const directions = computed(() => {
+  return labelDirection(optLayouts.value.nodes, store.topo.links);
+});
+
 const configs = reactive(
   vNG.defineConfigs({
     view: {
@@ -313,7 +303,10 @@ const configs = reactive(
         lineHeight: 1.1,
         color: "#000000",
         margin: 4,
-        direction: "south",
+        direction: (n) =>
+          n.name && n.name in directions.value
+            ? directions.value[n.name]
+            : "south",
         text: "name",
       },
       selectable: true,
@@ -332,7 +325,7 @@ const tooltipPos = computed(() => {
   if (!graph.value || !tooltip.value) return { x: 0, y: 0 };
   if (!tooltipTNode.value) return { x: 0, y: 0 };
 
-  const nodePos = store.layouts.nodes[tooltipTNode.value];
+  const nodePos = store.optLayouts.nodes[tooltipTNode.value];
   // translate coordinates: SVG -> DOM
   const domPoint = graph.value.translateFromSvgToDomCoordinates(nodePos);
   // calculates top-left position of the tooltip.
@@ -381,7 +374,7 @@ wsTemplateBus.on((t) => {
   }
 });
 
-watch(store.templates, () => {
+watch(store.optTemplates, () => {
   // If the templates changes, update the labels
   updatelabels();
 });
@@ -393,7 +386,7 @@ function updatelabels() {
       template: {
         id: lid,
         name: "link",
-        template: store.templates["link"],
+        template: store.optTemplates["link"],
         vars: store.linkVars(lid),
         result: "",
       },
@@ -405,7 +398,7 @@ function updatelabels() {
       template: {
         id: nid,
         name: "node",
-        template: store.templates["node"],
+        template: store.optTemplates["node"],
         vars: store.topo.vars[nid],
         result: "",
       },