BPMN view: remove radio buttons

src/components/Discover/Map/SidebarState.vue

@@ -201,7 +201,8 @@
                       <input type="radio" name="customRadio" :value="key2" v-model="clickedPathListIndex"
                         class="hidden peer" @click="onPathOptionClick(key2)"
                       />
-                      <span @click="onPathOptionClick(key2)"
+                      <!-- 若為BPMN檢視模式，則不允許點亮路徑 -->
+                      <span v-if="!isBPMNOn" @click="onPathOptionClick(key2)"
                       :class="[
                         'w-[18px] h-[18px] rounded-full border-2 inline-flex items-center justify-center cursor-pointer bg-[#FFFFFF]',
                         clickedPathListIndex === key2
@@ -272,19 +273,29 @@ export default {
     const activeTrace = ref(0);
     const currentMapFile = computed(() => pageAdmin.currentMapFile);
     const clickedPathListIndex = ref(undefined);
+    const isBPMNOn = computed(() => mapPathStore.isBPMNOn);
 
     const onActiveTraceClick = (clickedActiveTraceIndex) => {
+      if(isBPMNOn.value) {
+        return;
+      }
       mapPathStore.clearAllHighlight();
       activeTrace.value = clickedActiveTraceIndex;
       mapPathStore.highlightClickedPath(clickedActiveTraceIndex, clickedPathListIndex.value);
     }
 
     const onPathOptionClick = (clickedPath) => {
+      if(isBPMNOn.value) {
+        return;
+      }
       clickedPathListIndex.value = clickedPath;
       mapPathStore.highlightClickedPath(activeTrace.value, clickedPathListIndex.value);
     };
 
     const onResetTraceBtnClick = () => {
+      if(isBPMNOn.value) {
+        return;
+      }
       clickedPathListIndex.value = undefined;
     }
 
@@ -297,6 +308,7 @@ export default {
       onActiveTraceClick,
       onResetTraceBtnClick,
       activeTrace,
+      isBPMNOn,
       i18next,
     };
   },

src/components/Discover/Map/SidebarView.vue

@@ -10,10 +10,10 @@
         <ul class="space-y-3 mb-4">
           <!-- 選擇 bpmn / processmap button -->
           <li class="btn-toggle-content">
-            <span class="btn-toggle-item" :class="mapType === 'processMap'?'btn-toggle-show  ':''" @click="switchMapType('processMap')">
+            <span class="btn-toggle-item" :class="mapType === 'processMap'?'btn-toggle-show  ':''" @click="onProcessMapClick()">
               Process Map
             </span>
-            <span class="btn-toggle-item" :class="mapType === 'bpmn'?'btn-toggle-show':''" @click="switchMapType('bpmn')">
+            <span class="btn-toggle-item" :class="mapType === 'bpmn'?'btn-toggle-show':''" @click="onBPMNClick()">
               BPMN Model
             </span>
           </li>
@@ -70,6 +70,8 @@
 </template>
 
 <script>
+import MapPathStore from '@/stores/mapPathStore';
+import { mapState, mapActions, } from 'pinia';
 export default {
   props: {
     sidebarView: {
@@ -105,6 +107,9 @@ export default {
       rank: 'LR', // 直向 TB | 橫向 LR
     }
   },
+  computed: {
+    ...mapState(MapPathStore, ['isBPMNOn']),
+  },
   methods: {
     /**
      * switch map type
@@ -155,6 +160,15 @@ export default {
       }
       this.$emit('switch-data-layer-type', this.dataLayerType, this.dataLayerOption);
     },
+    onProcessMapClick() {
+      this.setIsBPMNOn(false);
+      this.switchMapType('processMap');
+    },
+    onBPMNClick() {
+      this.setIsBPMNOn(true);
+      this.switchMapType('bpmn');
+    },
+    ...mapActions(MapPathStore, ['setIsBPMNOn',]),
   },
   mounted() {
     this.dataLayerType = 'freq';

src/module/cytoscapeMap.js

@@ -265,62 +265,6 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
     minDist: 60, // 設置最小節點間距
   }).run();
 
-  cy.layout({
-    name: 'fcose',
-    randomize: false,
-    padding: 60,
-    // nodeRepulsion: 100000,
-    idealEdgeLength: 300,
-    // edgeElasticity: 0.7,
-    // gravity: 5,
-    nestingFactor: 5,
-    gravityCompound: 20,
-    // gravityRangeCompound: 30,
-    // nodeDimensionsIncludeLabels: true,
-    fit: true,
-  }).run();
-
-  cy.layout({
-    name: 'cola',
-    refresh: 1,
-    ungrabifyWhileSimulating: false, // so you can't drag nodes during layout
-    fit: true, // on every layout reposition of nodes, fit the viewport
-    padding: 30, // padding around the simulation
-    boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
-  nodeDimensionsIncludeLabels: false, // whether labels should be included in determining the space used by a node
-
-  // layout event callbacks
-  ready: function(){}, // on layoutready
-  stop: function(){}, // on layoutstop
-
-  // positioning options
-  randomize: false, // use random node positions at beginning of layout
-  avoidOverlap: true, // if true, prevents overlap of node bounding boxes
-  handleDisconnected: true, // if true, avoids disconnected components from overlapping
-  convergenceThreshold: 0.01, // when the alpha value (system energy) falls below this value, the layout stops
-  nodeSpacing: function( node ){ return 10; }, // extra spacing around nodes
-  flow: undefined, // use DAG/tree flow layout if specified, e.g. { axis: 'y', minSeparation: 30 }
-  alignment: function(node) {
-    return {
-      x: 1, // 將所有節點對齊在相同的 X 座標上
-      y: 0 // Y 座標保持不變
-    };
-  }, // relative alignment constraints on nodes, e.g. {vertical: [[{node: node1, offset: 0}, {node: node2, offset: 5}]], horizontal: [[{node: node3}, {node: node4}], [{node: node5}, {node: node6}]]}
-  gapInequalities: undefined, // list of inequality constraints for the gap between the nodes, e.g. [{"axis":"y", "left":node1, "right":node2, "gap":25}]
-  centerGraph: 10000, // adjusts the node positions initially to center the graph (pass false if you want to start the layout from the current position)
-
-  // different methods of specifying edge length
-  // each can be a constant numerical value or a function like `function( edge ){ return 2; }`
-  edgeLength: 10, // sets edge length directly in simulation
-  edgeSymDiffLength: undefined, // symmetric diff edge length in simulation
-  edgeJaccardLength: undefined, // jaccard edge length in simulation
-
-  // iterations of cola algorithm; uses default values on undefined
-  unconstrIter: undefined, // unconstrained initial layout iterations
-  userConstIter: undefined, // initial layout iterations with user-specified constraints
-  allConstIter: undefined, // initial layout iterations with all constraints including non-overlap
-  }).run();
-
   // 按下線條，線條及線條上數字有光暈效果
   cy.on('tap', 'edge', function(event) {
     cy.edges().removeClass('highlight-edge');

src/stores/mapPathStore.ts

@@ -1,7 +1,6 @@
 import { defineStore } from 'pinia';
 import AllMapData from '@/stores/allMapData.js';
 import { INSIGHTS_FIELDS_AND_LABELS } from '@/constants/constants';
-import cytoscape, { EdgeSingular, NodeSingular } from 'cytoscape';
 import ImgCapsuleGlow1 from '@/assets/capsule1-glow.svg';
 import ImgCapsuleGlow2 from '@/assets/capsule2-glow.svg';
 import ImgCapsuleGlow3 from '@/assets/capsule3-glow.svg';
@@ -26,6 +25,7 @@ export default defineStore('useMapPathStore', {
         activeTrace: 0,
         activeListIndex: 0,
         lastClickedNode: null,
+        isBPMNOn: false,
       }),
     actions: {
       setCytoscape(cytoscape) {
@@ -182,5 +182,8 @@ export default defineStore('useMapPathStore', {
       
           clickedEdge.addClass('highlight-edge');      
       },
+      setIsBPMNOn(isOn: boolean) {
+        this.isBPMNOn = isOn;
+      }
     },
 });