Discover: fix fetch api on once. And switch Navbar done.

src/views/Discover/index.vue

@@ -48,8 +48,8 @@
       <li class="mb-3">Data Layer Option: {{ dataLayerOption }}</li>
     </ul>
   </div>
-  <div class="min-w-full min-h-screen">
-    <div :id="mapType" class="min-w-full min-h-screen border"></div>
+  <div class="min-w-full min-h-full">
+    <div id="cy" class="min-w-full min-h-screen border"></div>
   </div>
 </template>
 
@@ -106,12 +106,11 @@ export default {
       ],
       curveStyle:'unbundled-bezier', // unbundled-bezier | taxi
       mapType: 'processMap', // processMap | bpmn
-      mapData: {},
       dataLayerType: 'freq', // freq | duration
       dataLayerOption: 'total',
       selectedFreq: '',
       selectedDuration: '',
-      rank: 'LR' // 直向 TB | 橫向 LR
+      rank: 'LR', // 直向 TB | 橫向 LR
     }
   },
   methods: {
@@ -121,7 +120,7 @@ export default {
      */
     switchMapType(type) {
       this.mapType = type;
-      this.executeApi(type);
+      this.createCy(type);
     },
     /**
      * switch curve style
@@ -129,7 +128,7 @@ export default {
      */
     switchCurveStyles(style) {
       this.curveStyle = style;
-      this.executeApi(this.mapType);
+      this.createCy(this.mapType);
     },
     /**
      * switch rank
@@ -137,7 +136,7 @@ export default {
      */
     switchRank(rank) {
       this.rank = rank;
-      this.executeApi(this.mapType);
+      this.createCy(this.mapType);
     },
     /**
      * switch Data Layoer Type or Option.
@@ -161,7 +160,7 @@ export default {
           break;
       };
 
-      this.executeApi(this.mapType);
+      this.createCy(this.mapType);
     },
     /**
      * 將 element nodes 資料彙整
@@ -246,7 +245,7 @@ export default {
                 width:100,
                 backgroundColor:'#FFCCCC',
                 bordercolor:'#003366',
-                shape:"ellipse",
+                shape:"round-rectangle",
                 freq:node.freq,
                 duration:node.duration,
               }
@@ -287,27 +286,33 @@ export default {
       });
      },
     /**
-    * create cytoscape map
-    * @param {string} type this.mapType processMap | bpmn
-    */
-    async executeApi(type) {
+     * get api data
+     */
+    async executeApi() {
       await this.allMapDataStore.getAllMapData();
-
-      let graphId = document.getElementById(type);
+      this.createCy(this.mapType);
+    },
+    /**
+     * create cytoscape's map
+     * @param {string} type this.mapType processMap | bpmn
+     */
+    createCy(type) {
+      let graphId = document.getElementById('cy');
       let mapData = type === 'processMap'? this.processMapData: this.bpmnData;
 
-      this.setNodesData(mapData);
-      this.setEdgesData(mapData);
-
-      if(this[type].vertices.length !== 0) cytoscapeMap(mapData, this.mapType, this.dataLayerType, this.dataLayerOption, this.curveStyle, this.rank, graphId);
-    }
+      if(this[type].vertices.length !== 0){
+        this.setNodesData(mapData);
+        this.setEdgesData(mapData);
+        cytoscapeMap(mapData, this.dataLayerType, this.dataLayerOption, this.curveStyle, this.rank, graphId);
+      };
+    },
   },
   created() {
     this.allMapDataStore.logId = this.$route.params.logId;
   },
   mounted() {
-    this.isLoading = false;
-    this.executeApi(this.mapType);
+    this.isLoading = true;
+    this.executeApi();
   },
 }
 </script>