refactor graph

src/views/dashboard/related/components/D3Graph/nodeElement.ts

@@ -18,7 +18,7 @@ import icons from "@/assets/img/icons";
 import { Node } from "@/types/topology";
 
 icons["KAFKA-CONSUMER"] = icons.KAFKA;
-export default (d3: any, graph: any, funcs: any, tip: any, legend: any) => {
+export default (d3: any, graph: any, funcs: any, tip: any, legend?: any) => {
   const nodeEnter = graph
     .append("g")
     .call(

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

@@ -23,11 +23,18 @@ import { useI18n } from "vue-i18n";
 import { useEbpfStore } from "@/store/modules/ebpf";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import d3tip from "d3-tip";
-import { simulationInit, simulationSkip } from "./utils/simulation";
+import {
-import { linkElement, anchorElement, arrowMarker } from "./utils/linkElement";
+  simulationInit,
-import nodeElement from "./utils/nodeElement";
+  simulationSkip,
+} from "../../components/D3Graph/simulation";
+import {
+  linkElement,
+  anchorElement,
+  arrowMarker,
+} from "../../components/D3Graph/linkElement";
+import nodeElement from "../../components/D3Graph/nodeElement";
 import { Call } from "@/types/topology";
-import zoom from "./utils/zoom";
+import zoom from "../../components/D3Graph/zoom";
 import { ProcessNode } from "@/types/ebpf";
 
 /*global Nullable, defineProps */

src/views/dashboard/related/network-profiling/components/utils/nodeElement.ts

@@ -1,81 +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.
- */
-import icons from "@/assets/img/icons";
-import { Node } from "@/types/topology";
-
-icons["KAFKA-CONSUMER"] = icons.KAFKA;
-export default (d3: any, graph: any, funcs: any, tip: any) => {
-  const nodeEnter = graph
-    .append("g")
-    .call(
-      d3
-        .drag()
-        .on("start", funcs.dragstart)
-        .on("drag", funcs.dragged)
-        .on("end", funcs.dragended)
-    )
-    .on("mouseover", function (event: any, d: Node) {
-      tip.html(funcs.tipHtml).show(d, this);
-    })
-    .on("mouseout", function () {
-      tip.hide(this);
-    })
-    .on("click", (event: any, d: Node | any) => {
-      event.stopPropagation();
-      event.preventDefault();
-      funcs.handleNodeClick(d);
-    });
-  nodeEnter
-    .append("image")
-    .attr("width", 49)
-    .attr("height", 49)
-    .attr("x", 2)
-    .attr("y", 10)
-    .attr("style", "cursor: move;")
-    .attr("xlink:href", (d: { [key: string]: number }) => {
-      return d.isReal ? icons.CUBEERROR : icons.CUBE;
-    });
-  nodeEnter
-    .append("image")
-    .attr("width", 32)
-    .attr("height", 32)
-    .attr("x", 6)
-    .attr("y", -10)
-    .attr("style", "opacity: 0.5;")
-    .attr("xlink:href", icons.LOCAL);
-  nodeEnter
-    .append("image")
-    .attr("width", 18)
-    .attr("height", 18)
-    .attr("x", 13)
-    .attr("y", -7)
-    .attr("xlink:href", (d: { type: string }) =>
-      !d.type || d.type === "N/A"
-        ? icons.UNDEFINED
-        : icons[d.type.toUpperCase().replace("-", "")]
-    );
-  nodeEnter
-    .append("text")
-    .attr("class", "topo-text")
-    .attr("text-anchor", "middle")
-    .attr("x", 22)
-    .attr("y", 70)
-    .text((d: { name: string }) =>
-      d.name.length > 20 ? `${d.name.substring(0, 20)}...` : d.name
-    );
-  return nodeEnter;
-};

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

@@ -95,9 +95,16 @@ import { useI18n } from "vue-i18n";
 import * as d3 from "d3";
 import d3tip from "d3-tip";
 import zoom from "../utils/zoom";
-import { simulationInit, simulationSkip } from "../utils/simulation";
+import {
-import nodeElement from "../utils/nodeElement";
+  simulationInit,
-import { linkElement, anchorElement, arrowMarker } from "../utils/linkElement";
+  simulationSkip,
+} from "../../components/D3Graph/simulation";
+import nodeElement from "../../components/D3Graph/nodeElement";
+import {
+  linkElement,
+  anchorElement,
+  arrowMarker,
+} from "../../components/D3Graph/linkElement";
 import { Node, Call } from "@/types/topology";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { useTopologyStore } from "@/store/modules/topology";

src/views/dashboard/related/topology/utils/linkElement.ts

@@ -1,60 +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 const linkElement = (graph: any) => {
-  const linkEnter = graph
-    .append("path")
-    .attr("class", "topo-line")
-    .attr("marker-end", "url(#arrow)")
-    .attr("stroke", "#217EF25f");
-  return linkEnter;
-};
-export const anchorElement = (graph: any, funcs: any, tip: any) => {
-  const linkEnter = graph
-    .append("circle")
-    .attr("class", "topo-line-anchor")
-    .attr("r", 5)
-    .attr("fill", "#217EF25f")
-    .on("mouseover", function (event: unknown, d: unknown) {
-      tip.html(funcs.tipHtml).show(d, this);
-    })
-    .on("mouseout", function () {
-      tip.hide(this);
-    })
-    .on("click", (event: unknown, d: unknown) => {
-      funcs.handleLinkClick(event, d);
-    });
-  return linkEnter;
-};
-export const arrowMarker = (graph: any) => {
-  const defs = graph.append("defs");
-  const arrow = defs
-    .append("marker")
-    .attr("id", "arrow")
-    .attr("class", "topo-line-arrow")
-    .attr("markerUnits", "strokeWidth")
-    .attr("markerWidth", "6")
-    .attr("markerHeight", "6")
-    .attr("viewBox", "0 0 12 12")
-    .attr("refX", "5")
-    .attr("refY", "6")
-    .attr("orient", "auto");
-  const arrowPath = "M2,2 L10,6 L2,10 L6,6 L2,2";
-
-  arrow.append("path").attr("d", arrowPath).attr("fill", "#217EF25f");
-  return arrow;
-};

src/views/dashboard/related/topology/utils/simulation.ts

@@ -1,56 +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 const simulationInit = (
-  d3: any,
-  dataNodes: any,
-  dataLinks: any,
-  ticked: any
-) => {
-  const simulation = d3
-    .forceSimulation(dataNodes)
-    .force(
-      "collide",
-      d3.forceCollide().radius(() => 60)
-    )
-    .force("yPos", d3.forceY().strength(1))
-    .force("xPos", d3.forceX().strength(1))
-    .force("charge", d3.forceManyBody().strength(-520))
-    .force(
-      "link",
-      d3.forceLink(dataLinks).id((d: { id: string }) => d.id)
-    )
-    .force(
-      "center",
-      d3.forceCenter(window.innerWidth / 2, window.innerHeight / 2 - 20)
-    )
-    .on("tick", ticked)
-    .stop();
-  simulationSkip(d3, simulation, ticked);
-  return simulation;
-};
-
-export const simulationSkip = (d3: any, simulation: any, ticked: any) => {
-  d3.timeout(() => {
-    const n = Math.ceil(
-      Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay())
-    );
-    for (let i = 0; i < n; i += 1) {
-      simulation.tick();
-      ticked();
-    }
-  });
-};

src/views/dashboard/related/topology/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})`
-        );
-    });