!504 UI add graph plug-in compatible code

Merge pull request !504 from 黄伟锋/myMaster

mindinsight/ui/src/views/train-manage/data-map.vue

@@ -146,6 +146,7 @@ limitations under the License.
 import RequestService from '../../services/request-service';
 import CommonProperty from '@/common/common-property.js';
 import {select, selectAll, zoom} from 'd3';
+import {event as currentEvent} from 'd3-selection';
 import 'd3-graphviz';
 const d3 = {select, selectAll, zoom};
 export default {
@@ -385,10 +386,12 @@ export default {
       const zoom = d3
           .zoom()
           .on('start', () => {
+            const event = currentEvent.sourceEvent;
             pointer.start.x = event.x;
             pointer.start.y = event.y;
           })
           .on('zoom', () => {
+            const event = currentEvent.sourceEvent;
             const transformData = this.getTransformData(graphDom);
             if (!Object.keys(graphTransform).length) {
               graphTransform = {
@@ -444,8 +447,8 @@ export default {
               pointer.start.x = pointer.end.x;
               pointer.start.y = pointer.end.y;
             } else if (event.type === 'wheel') {
-              const wheelDelta = event.wheelDelta;
-              const rate = Math.abs(wheelDelta / 100);
+              const wheelDelta = -event.deltaY;
+              const rate = 1.2;
               scale =
               wheelDelta > 0
                 ? transformData.scale[0] * rate

mindinsight/ui/src/views/train-manage/graph.vue

@@ -415,6 +415,7 @@ import Autocomplete from '@/components/autocomplete';
 import CommonProperty from '@/common/common-property.js';
 import RequestService from '@/services/request-service';
 import {select, selectAll, zoom} from 'd3';
+import {event as currentEvent} from 'd3-selection';
 import 'd3-graphviz';
 const d3 = {select, selectAll, zoom};
 export default {
@@ -679,8 +680,14 @@ export default {
      */
     startApp() {
       const nodes = d3.selectAll('g.node, g.cluster');
-      nodes.on('click', (target, index, nodesList) => {
+      nodes.on(
+          'click',
+          (target, index, nodesList) => {
           // The target value of the element converted from the HTML attribute of the variable is null.
+            const event = currentEvent;
+            event.stopPropagation();
+            event.preventDefault();
+
             const clickNode = nodesList[index];
             const nodeId = clickNode.id;
             const nodeClass = clickNode.classList.value;
@@ -695,16 +702,19 @@ export default {
             }, 1000);
             this.selectedNode.name = nodeId;
             this.selectNode(false);
-        if (!event || !event.type || event.type !== 'click') {
-          return;
-        }
-        event.stopPropagation();
-        event.preventDefault();
-      });
+          },
+          false,
+      );
       // namespaces Expansion or Reduction
-      nodes.on('dblclick', (target, index, nodesList) => {
+      nodes.on(
+          'dblclick',
+          (target, index, nodesList) => {
           // The target of the element converted from the HTML attribute of the variable is empty and
           // needs to be manually encapsulated.
+            const event = currentEvent;
+            event.stopPropagation();
+            event.preventDefault();
+
             const clickNode = nodesList[index];
             const nodeId = clickNode.id;
             const nodeClass = clickNode.classList.value;
@@ -728,6 +738,13 @@ export default {
                   .parentNode.id;
               name = parentId.replace('_unfold', '');
               this.allGraphData[name].index += changePage;
+              this.allGraphData[name].index = Math.max(
+                  0,
+                  Math.min(
+                      this.allGraphData[name].index,
+                      this.allGraphData[name].childIdsList.length - 1,
+                  ),
+              );
               this.selectedNode.name = name;
             }
             if (unfoldFlag) {
@@ -736,12 +753,9 @@ export default {
               this.selectedNode.name = this.clickScope.id;
               this.selectNode(false);
             }
-        if (!event || !event.type || event.type !== 'dblclick') {
-          return;
-        }
-        event.stopPropagation();
-        event.preventDefault();
-      });
+          },
+          false,
+      );
       this.initZooming();
       if (this.selectedNode.name) {
         this.selectNode(true);
@@ -758,10 +772,15 @@ export default {
       const zoom = d3
           .zoom()
           .on('start', () => {
+            const event = currentEvent.sourceEvent;
             pointer.start.x = event.x;
             pointer.start.y = event.y;
           })
           .on('zoom', () => {
+            const event = currentEvent.sourceEvent;
+            event.stopPropagation();
+            event.preventDefault();
+
             const transformData = this.getTransformData(this.graph.dom);
             let tempStr = '';
             let change = {};
@@ -809,8 +828,8 @@ export default {
               pointer.start.x = pointer.end.x;
               pointer.start.y = pointer.end.y;
             } else if (event.type === 'wheel') {
-              const wheelDelta = event.wheelDelta;
-              const rate = Math.abs(wheelDelta / 100);
+              const wheelDelta = -event.deltaY;
+              const rate = 1.2;
               scale =
               wheelDelta > 0
                 ? transformData.scale[0] * rate
@@ -838,11 +857,11 @@ export default {
             this.graph.transRate =
             graphRect.width / graphBox.width / this.graph.transform.k;
 
-            tempStr = `translate(${this.graph.transform.x},${this.graph.transform.y}) scale(${this.graph.transform.k})`;
+            tempStr =
+            `translate(${this.graph.transform.x},${this.graph.transform.y}) ` +
+            `scale(${this.graph.transform.k})`;
             this.graph.dom.setAttribute('transform', tempStr);
             this.setInsideBoxData();
-            event.stopPropagation();
-            event.preventDefault();
           });
 
       const svg = d3.select('#graph svg');
@@ -930,8 +949,8 @@ export default {
      */
     layoutNamescope(name, toUnfold) {
       this.$nextTick(() => {
-        const dotStr = this.packageNamescope(name);
         try {
+          const dotStr = this.packageNamescope(name);
           this.graphvizTemp = d3
               .select('#graphTemp')
               .graphviz({useWorker: false, totalMemory: this.totalMemory})
@@ -2678,12 +2697,11 @@ export default {
         };
 
         // Mouse wheel event
-        smallContainer.onmousewheel = (e) => {
+        smallContainer.onwheel = (e) => {
           e = e || window.event;
-          const wheelDelta = e.wheelDelta ? e.wheelDelta : e.detail;
+          const wheelDelta = e.wheelDelta ? e.wheelDelta : -e.deltaY;
           if (!isNaN(this.graph.transform.k) && this.graph.transform.k !== 0) {
-            let rate =
-              wheelDelta > 0 ? wheelDelta / 100 : -1 / (wheelDelta / 100);
+            let rate = wheelDelta > 0 ? 1.2 : 1 / 1.2;
 
             let scaleTemp = this.graph.transform.k / rate;
             if (scaleTemp <= this.graph.minScale) {