Discover: sideBar trace done.

src/module/cytoscapeMap.js

@@ -1,5 +1,7 @@
 import cytoscape from 'cytoscape';
 import dagre from 'cytoscape-dagre';
+// import tippy from 'tippy.js';
+// import 'tippy.js/dist/tippy.css';
 import Gradient from 'javascript-color-gradient'; // 多個色階產生器
 import TimeLabel from '@/module/timeLabel.js'; // 時間格式轉換器
 
@@ -116,7 +118,7 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
                   text = Math.trunc(optionValue) === optionValue ? textInt : textFloat;
                   break;
 
-                  case 'duration': // Duration 除了 Relative 為百分比 % ，其他要轉變時間單位。
+                case 'duration': // Duration 除了 Relative 為百分比 % ，其他要轉變時間單位。
                   // Relative %
                   let textDurRel = text + (optionValue * 100).toFixed(2) + "%";
                   // Timelabel

src/module/cytoscapeMapTrace.js

@@ -0,0 +1,105 @@
+import cytoscape from 'cytoscape';
+import dagre from 'cytoscape-dagre';
+import tippy from 'tippy.js';
+import 'tippy.js/dist/tippy.css';
+
+cytoscape.use( dagre );
+
+/**
+ * draw processmap for trace
+ * @param {array}  nodes array of an object, it contains
+ * data:{
+ *  backgroundColor: string
+ *  bordercolor: string
+ *  height: number
+ *  id: number
+ *  label: string
+ *  shape: string
+ *  width: number
+ * }
+ * @param {array}  edges it's similar to nodes
+ * @param {string} graphId
+ */
+export default function cytoscapeMapTrace(nodes, edges, graphId) {
+  // create Cytoscape
+  let cy = cytoscape({
+    container: graphId,
+    elements: {
+      nodes: nodes, // 節點的資料
+      edges: edges, // 關係線的資料
+    },
+    layout: {
+      name: 'dagre',
+      rankDir: 'LR' // 直向 TB | 橫向 LR, 'cytoscape-dagre' 套件裡的變數
+    },
+    style: [
+      // node 節點的樣式
+      {
+        selector: 'node',
+        style: {
+          'label':
+          function(node) { // 節點要顯示的文字
+            let text = '';
+
+            // node.data('label') 為原先陣列 node.data.label
+            text = node.data('label').length > 18 ? `${node.data('label').substr(0,15)}...` : `${node.data('label')}`;
+
+            return text
+          },
+          'text-opacity': 0.7,
+          'background-color': 'data(backgroundColor)',
+          'border-color': 'data(bordercolor)',
+          'border-width': '1',
+          'shape': 'data(shape)',
+          'text-wrap': 'wrap',
+          'text-max-width': 75,
+          'text-halign': 'center',
+          'text-valign': 'center',
+          'height': 'data(height)',
+          'width': 'data(width)',
+          'color': '#001933',
+          'font-size': 14,
+        }
+      },
+      // edge 關係線的樣式
+      {
+        selector: 'edge',
+        style: {
+          'curve-style': 'taxi', // unbundled-bezier | taxi
+          'target-arrow-shape': 'triangle', // 指向目標的箭頭形狀: 三角形
+          'color': 'gray', //#0066cc
+          'width': 'data(lineWidth)',
+          'line-style': 'data(style)',
+        }
+      },
+      // 點擊 node 後改變的樣式
+      {
+        selector: 'node:selected',
+        style:{
+         'border-color': 'red',
+         'border-width': '3',
+        }
+      },
+    ],
+  });
+
+  // creat tippy.js
+  let tip;
+  cy.on('mouseover', 'node', function(event) {
+    var node = event.target
+    let ref = node.popperRef()
+    let dummyDomEle = document.createElement('div');
+    let content = document.createElement('div');
+    content.innerHTML = node.data("label")
+    tip = new tippy(dummyDomEle, { // tippy props:
+        getReferenceClientRect: ref.getBoundingClientRect,
+        trigger: 'manual',
+        content:content
+        });
+    tip.show();
+    // if(node.data("label").length > 18) tip.show();
+  })
+  cy.on('mouseout', 'node', function(event) {
+    tip.hide();
+  });
+}