svg zoom

src/views/dashboard/data.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 export const dragIgnoreFrom =
-  "svg.d3-trace-tree, .dragger, .micro-topo-chart, .schedules, .vis-item, .vis-timeline";
+  "svg.d3-trace-tree, .dragger, .micro-topo-chart, .schedules, .vis-item, .vis-timeline, .process-svg";
 
 export const PodsChartTypes = ["EndpointList", "InstanceList"];
 

src/views/dashboard/related/components/utils/zoom.ts

@@ -15,14 +15,15 @@
  * limitations under the License.
  */
 
-export default (d3: any, graph: any) =>
+export default (d3: any, graph: any, diff: number[]) =>
   d3
     .zoom()
     .scaleExtent([0.3, 10])
-    .on("zoom", (d: any) => {
-      graph
-        .attr("transform", d3.zoomTransform(graph.node()))
-        .attr(
-          `translate(${d.transform.x},${d.transform.y})scale(${d.transform.k})`
+    .on("zoom", (event: any) => {
+      graph.attr(
+        "transform",
+        `translate(${event.transform.x + diff[0]},${
+          event.transform.y + diff[1]
+        })scale(${event.transform.k})`
       );
     });

src/views/dashboard/related/network-profiling/components/ProcessTopology.vue

@@ -40,7 +40,7 @@ import d3tip from "d3-tip";
 import { linkElement, anchorElement, arrowMarker } from "./Graph/linkProcess";
 import nodeElement from "./Graph/nodeProcess";
 import { Call } from "@/types/topology";
-// import zoom from "../../components/D3Graph/zoom";
+import zoom from "../../components/utils/zoom";
 import { ProcessNode } from "@/types/ebpf";
 import { useThrottleFn } from "@vueuse/core";
 import Settings from "./Settings.vue";
@@ -108,7 +108,7 @@ function drawGraph() {
   link.value = graph.value.append("g").selectAll(".topo-call");
   anchor.value = graph.value.append("g").selectAll(".topo-line-anchor");
   arrow.value = graph.value.append("g").selectAll(".topo-line-arrow");
-  // svg.value.call(zoom(d3, graph.value));
+  svg.value.call(zoom(d3, graph.value, [220, 200]));
   svg.value.on("click", (event: any) => {
     event.stopPropagation();
     event.preventDefault();
@@ -123,11 +123,9 @@ function hexGrid(n = 1, radius = 1, origin = [0, 0]) {
   let x, y, yn, p;
   const gLayout = new Layout(radius, origin);
   const pos = [];
-  // x = -1; n = 1.5
   for (x = -n; x <= n; x++) {
     y = Math.max(-n, -x - n); // 0
     yn = Math.min(n, -x + n); // 1
-    // y = 0 yn = 1
     for (y; y <= yn; y++) {
       p = gLayout.axialToPixel(x, y);
       pos.push(p);
@@ -149,6 +147,13 @@ function createPolygon(radius: number, sides = 6, offset = 0) {
   return poly;
 }
 
+function getArcPoint(angle: number, radius: number) {
+  const origin = [0, 0];
+  const x1 = radius + origin[0] * Math.cos((angle * Math.PI) / 180);
+  const y1 = origin[1] + radius * Math.sin((angle * Math.PI) / 180);
+
+  return [x1, y1];
+}
 function createLayout() {
   if (!node.value || !link.value) {
     return;
@@ -239,22 +244,35 @@ function createLayout() {
   //     .attr("stroke-width", 1)
   //     .style("fill", "none");
   // }
-  const pos = hexGrid(p.count, 68, origin); // cube centers
   let cubes = count > 7 ? cubeCenters : centers;
-  drawTopology(cubes);
-}
-
-function drawTopology(cubes: number[][]) {
-  const nodeArr = networkProfilingStore.nodes.filter(
-    (d: ProcessNode) => d.serviceInstanceId === selectorStore.currentPod.id
-  );
-  const count = nodeArr.length;
   for (let v = 0; v < count; v++) {
     const x = cubes[v][0];
     const y = cubes[v][1];
     nodeArr[v].x = x;
     nodeArr[v].y = y;
   }
+  const outNodes = networkProfilingStore.nodes.filter(
+    (d: ProcessNode) => d.serviceInstanceId !== selectorStore.currentPod.id
+  );
+  let angle = 10;
+  let r = 230;
+  for (let v = 0; v < outNodes.length; v++) {
+    const pos = getArcPoint(angle, r); // angle is [-120, 120]
+    outNodes[v].x = pos[0];
+    outNodes[v].y = pos[1];
+    angle = angle + 10;
+    if (angle * (v + 1) > 120) {
+      angle = -10;
+    }
+    if (angle * (v + 1) < -120) {
+      r = r + 20;
+      angle = 10;
+    }
+  }
+  drawTopology([...nodeArr, ...outNodes]);
+}
+
+function drawTopology(nodeArr: any[]) {
   node.value = node.value.data(nodeArr, (d: ProcessNode) => d.id);
   node.value.exit().remove();
   node.value = nodeElement(

src/views/dashboard/related/topology/components/Graph.vue

@@ -94,7 +94,7 @@ import {
 import { useI18n } from "vue-i18n";
 import * as d3 from "d3";
 import d3tip from "d3-tip";
-import zoom from "./utils/zoom";
+import zoom from "../../components/utils/zoom";
 import { simulationInit, simulationSkip } from "./utils/simulation";
 import nodeElement from "./utils/nodeElement";
 import { linkElement, anchorElement, arrowMarker } from "./utils/linkElement";
@@ -193,7 +193,7 @@ async function init() {
   link.value = graph.value.append("g").selectAll(".topo-line");
   anchor.value = graph.value.append("g").selectAll(".topo-line-anchor");
   arrow.value = graph.value.append("g").selectAll(".topo-line-arrow");
-  svg.value.call(zoom(d3, graph.value));
+  svg.value.call(zoom(d3, graph.value, [-100, -100]));
   svg.value.on("click", (event: any) => {
     event.stopPropagation();
     event.preventDefault();

src/views/dashboard/related/topology/components/utils/zoom.ts

@@ -1,28 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export default (d3: any, graph: any) =>
-  d3
-    .zoom()
-    .scaleExtent([0.3, 10])
-    .on("zoom", (d: any) => {
-      graph
-        .attr("transform", d3.zoomTransform(graph.node()))
-        .attr(
-          `translate(${d.transform.x},${d.transform.y})scale(${d.transform.k})`
-        );
-    });