From 4b56130278dd8bb7d185ba05aca25333e8da96c0 Mon Sep 17 00:00:00 2001
From: Cindy Chang <cindy.chang@dsp.im>
Date: Wed, 28 Aug 2024 14:09:32 +0800
Subject: [PATCH] 1. highlight last edge. 2. padEnd() to left align capsule
 label

---
 src/module/cytoscapeMap.js | 62 ++++++--------------------------------
 src/stores/mapPathStore.ts | 12 +++++---
 2 files changed, 18 insertions(+), 56 deletions(-)

diff --git a/src/module/cytoscapeMap.js b/src/module/cytoscapeMap.js
index b65bbcd..b8bbdf9 100644
--- a/src/module/cytoscapeMap.js
+++ b/src/module/cytoscapeMap.js
@@ -42,56 +42,10 @@ cytoscape.use(cola);
  * @return {cytoscape.Core} cy
  */
 export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, curveStyle, rank, graphId) {
-  // create color Gradient
   // 設定每個 node, edges 的顏色與樣式
-  let gradientArray = [];
-  let activityArray = [];
-  let edgeArray = [];
-  let nodeOption = [];
-  let edgeOption = [];
   let nodes = mapData.nodes;
   let edges = mapData.edges;
 
-  // 設定除了 start, end 的 node 顏色
-  // 找出 type activity's node
-  activityArray = nodes.filter(i => i.data.type === 'activity');
-
-  // 找出除了 start, end 以外所有的 node 的 option value
-  activityArray.map(node => nodeOption.push(node.data[dataLayerType][dataLayerOption]));
-
-  // 刪掉重複的元素，小到大排序(映對色階淺到深)
-  nodeOption = [...new Set(nodeOption)].sort((a, b) => a - b);
-
-  // 產生 node 色階
-  gradientArray = new Gradient()
-    .setColorGradient("#FFFFFF", "#FFFFFF")
-    .setMidpoint(nodeOption.length)
-    .getColors();
-
-  // 設定每個 node 的背景色
-  activityArray.forEach(node => {
-    // 透過 index 找對應位置
-    let gradientIndex = nodeOption.indexOf(node.data[dataLayerType][dataLayerOption]);
-    node.data.backgroundColor = gradientArray[gradientIndex];
-  })
-
-  // 設定除了 start, end 的 edges 粗細
-  // 找出除了 start, end 以外所有的 edge
-  edgeArray = edges.filter(i => i.data.source !== mapData.startId && i.data.target !== mapData.endId);
-
-  // 找出所有 edge 的 option value
-  edgeArray.map(edge => edgeOption.push(edge.data[dataLayerType][dataLayerOption]));
-
-  // 刪掉重複的元素，小到大排序(映對色階淺到深)
-  edgeOption = [...new Set(edgeOption)].sort((a, b) => a - b);
-
-  // 設定每個 edge 的粗細
-  edgeArray.forEach(edge => {
-    let edgeIndex = edgeOption.indexOf(edge.data[dataLayerType][dataLayerOption])
-    edge.data.lineWidth = (parseInt(edgeIndex) + 1) * 0.15
-    edge.data.style = 'solid'
-  })
-
   // create Cytoscape
   let cy = cytoscape({
     container: graphId,
@@ -121,10 +75,14 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
             // node.data(this.dataLayerType+"."+this.dataLayerOption) 為原先陣列 node.data.key.value
             let optionValue = node.data(`${dataLayerType}.${dataLayerOption}`);
             let text = '';
-
-            // 文字超過 10 字尾巴要加「...」，style 要換兩行(\n 換行符號)
-            // 使用 data() 是因為在 cytoscape 中從陣列轉為 function
-            text = node.data('label').length > 10 ? `${node.data('label').substr(0, 10)}...\n\n` : `${node.data('label')}\n\n`;
+            const STRING_LIMIT = 8;
+            if (node.data('label').length > STRING_LIMIT) {
+              // 文字超過 10 字尾巴要加「...」，style 要換兩行(\n 換行符號)
+             // 使用 data() 是因為在 cytoscape 中從陣列轉為 function
+              text = `${node.data('label').substr(0, STRING_LIMIT)}...\n\n`;
+            } else { // 補空白直到撐寬label的寬度，這是為了統一所有label的寬度
+              text = `${node.data('label').padEnd(STRING_LIMIT, '　')}\n\n`
+            }            
 
             // 在 element 中 activity 歸類在 default，所以要先判斷 node 是否為 activity 才裝入文字。
             // 可使用 parseInt(整數) parseFloat(浮點數) 將字串轉為數字
@@ -179,7 +137,7 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
           'padding':  function(node) {
             return node.data('type') === 'activity' ? 0 : 0;
           },          
-          // 'text-justification': 'left',
+          'text-justification': 'left',
           'text-halign': 'center',
           'text-valign': 'center',
           'height': 'data(height)',
@@ -255,7 +213,7 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
           'overlay-opacity': 0.01,
           'overlay-padding': '5px',
         },
-      }
+      },
     ],
   });
 
diff --git a/src/stores/mapPathStore.ts b/src/stores/mapPathStore.ts
index 1298f0e..ffabc8d 100644
--- a/src/stores/mapPathStore.ts
+++ b/src/stores/mapPathStore.ts
@@ -60,15 +60,19 @@ export default defineStore('useMapPathStore', {
                   curGraphNode = prevGraphNode.outgoers('node').filter(neighbor => 
                     neighbor.data('label') === curButton[listIndex][nodeIndex]
                   );
-                  if(!curGraphNode) {
-                    // curGraphNode = prevGraphNode.outgoers('node').filter(node =>
-                    //   node.data('label').toLocaleLowerCase() === 'end');
-                  }
                   curEdge = prevGraphNode.edgesWith(curGraphNode);
                 }                
               }
               this.insightWithPath[INSIGHTS_FIELDS_AND_LABELS[i][0]][listIndex].nodes.push(curGraphNode);
               this.insightWithPath[INSIGHTS_FIELDS_AND_LABELS[i][0]][listIndex].edges.push(curEdge);
+              // 特殊狀況，在for迴圈之外額外插入最後一條線段
+              if(nodeIndex === curButton[listIndex].length - 1){
+                  const endNode = curGraphNode.outgoers('node').filter(neighbor => 
+                    neighbor.data('label').toLocaleLowerCase() === 'end'
+                  );
+                  const lastEdge = curGraphNode.edgesWith(endNode);
+                  this.insightWithPath[INSIGHTS_FIELDS_AND_LABELS[i][0]][listIndex].edges.push(lastEdge);
+              }
               prevGraphNode = curGraphNode;
             }
           }