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

src/components/Navbar.vue

@@ -3,12 +3,9 @@
     <div class="mx-auto px-4" :class="[showNavbarBreadcrumb? 'min-h-12': 'h-12']">
       <div class="flex justify-between items-center flex-wrap" v-show="showNavbarBreadcrumb">
         <div class="flex flex-1 items-center">
-            <h2 class="mr-28 text-2xl font-black text-neutral-10">FILES</h2>
+            <h2 class="mr-28 text-2xl font-black text-neutral-10">{{ navViewName }}</h2>
             <ul class="flex justify-center items-center space-x-4 text-xl font-semibold text-neutral-300 cursor-pointer">
-              <li @click="switchNavItem($event)">ALL</li>
+              <li @click="switchNavItem($event)" v-for="(item, index) in navViewData[navViewName]" :key="index">{{ item }}</li>
-              <li @click="switchNavItem($event)">DISCOVER</li>
-              <li @click="switchNavItem($event)">COMPARE</li>
-              <li @click="switchNavItem($event)">DESIGN</li>
           </ul>
         </div>
         <div class="flex justify-end items-center">
@@ -43,18 +40,21 @@ export default {
   data() {
     return {
       showNavbarBreadcrumb: false,
-      // 之後優化要模組化
+      navViewData:
-      // navViewData:
+      {
-      // {
+        FILES: ['ALL', 'DISCOVER', 'COMPARE', 'DESIGN'],
-      //   FILES: ['ALL', 'DISCOVER', 'COMPARE', 'DESIGN'],
+        DISCOVER: ['MAP', 'CONFORMANCE', 'PERFORMANCE', 'DATA']
-      //   DISCOVER: ['MAP', 'CONFORMANCE', 'PERFORMANCE', 'DATA']
+      },
-      // },
+      navViewName: 'FILES',
-      // navViewName: '',
     };
   },
+  watch: {
+    $route(to){
+      this.navViewName = to.name.toUpperCase();
+    }
+  },
   setup() {
     const store = filesStore();
-
     return {
       store,
     }
@@ -67,9 +67,6 @@ export default {
     this.showNavbarBreadcrumb = this.$route.matched[0].name !== ('AuthContainer')? true : false;
   },
   methods: {
-    // switchNavView(name) {
-    //   this.navViewName = name;
-    // },
     switchNavItem(event) {
       this.store.filesTag = event.target.innerText;
     }

src/module/cytoscapeMap.js

@@ -5,13 +5,20 @@ import TimeLabel from '@/module/timeLabel.js'; // 時間格式轉換器
 
 cytoscape.use( dagre );
 
-export default function cytoscapeMap(mapData, mapType, dataLayerType, dataLayerOption, curveStyle, rank, graphId) {
+/**
-  // console.log(mapData);
+ * @param {object}  mapData processMapData | bpmnData
-  // console.log(mapType);
+ * mapData:{
-  // console.log(dataLayerType);
+ *  startId: 0,
-  // console.log(dataLayerOption);
+ *  endId: 1,
-  // console.log(curveStyle);
+ *  nodes: [],
-  // console.log(rank);
+ *  edges: []
+ * }
+ * @param {string} dataLayerType DataLayer's type
+ * @param {string} dataLayerOption DataLayer's options
+ * @param {string} curve Curve's type
+ * @param {string} graphId cytoscape's container
+ */
+export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, curveStyle, rank, graphId) {
   // create color Gradient
   // 設定每個 node, edges 的顏色與樣式
   let gradientArray = [];
@@ -71,8 +78,7 @@ export default function cytoscapeMap(mapData, mapType, dataLayerType, dataLayerO
     },
     layout: {
       name: 'dagre',
-      rankDir: rank, // 直向 TB | 橫向 LR, 'cytoscape-dagre' 裡的變數
+      rankDir: rank, // 直向 TB | 橫向 LR, 'cytoscape-dagre' 套件裡的變數
-
     },
     style: [
       // 點擊 node 後改變的樣式

src/stores/allMapData.js

@@ -1,12 +1,28 @@
 import { defineStore } from "pinia";
+import loadingStore from './loading.js';
+import pinia from '@/stores/main.js'
+import {useToast} from 'vue-toast-notification';
+import 'vue-toast-notification/dist/theme-sugar.css';
+
+const loading = loadingStore(pinia);
+const $toast = useToast();
+// Delay loading and toast 待模組化
+let delay = s =>  new Promise((resolve, reject) => setTimeout(resolve, s));
 
 export default defineStore('allMapDataStore', {
   state: () => ({
     logId: null,
-    processMap: {},
+    allProcessMap: {},
-    bpmn: {},
+    allBpmn: {},
+    httpStatus: 200,
   }),
   getters: {
+    processMap: state => {
+      return state.allProcessMap;
+    },
+    bpmn: state => {
+      return state.allBpmn;
+    }
   },
   actions: {
     /**
@@ -18,9 +34,21 @@ export default defineStore('allMapDataStore', {
 
       try {
         const response = await this.$axios.get(api);
-        this.processMap = response.data.process_map;
+        this.allProcessMap = response.data.process_map;
-        this.bpmn = response.data.bpmn;
+        this.allBpmn = response.data.bpmn;
+
+        if(this.httpStatus < 300) loading.isLoading = false;
       } catch(error) {
+        this.httpStatus = error.request.status;
+        delay().then(() =>{
+          loading.isLoading = true;
+          return delay(1000);
+        }).then(()=>{
+          loading.isLoading = false;
+          return delay(500);
+        }).then(() => {
+          $toast.default('Failed to load the discover.');
+        })
       };
     },
   }

src/stores/files.js

@@ -61,7 +61,6 @@ export default defineStore('filesStore', {
      */
     async fetchEventLog() {
       const api = '/api/logs';
-      // console.log(this);
 
       try {
         const response = await axios.get(api);

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 class="min-w-full min-h-full">
-    <div :id="mapType" class="min-w-full min-h-screen border"></div>
+    <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
+     * get api data
+     */
+    async executeApi() {
+      await this.allMapDataStore.getAllMapData();
+      this.createCy(this.mapType);
+    },
+    /**
+     * create cytoscape's map
      * @param {string} type this.mapType processMap | bpmn
      */
-    async executeApi(type) {
+    createCy(type) {
-      await this.allMapDataStore.getAllMapData();
+      let graphId = document.getElementById('cy');
-
-      let graphId = document.getElementById(type);
       let mapData = type === 'processMap'? this.processMapData: this.bpmnData;
 
+      if(this[type].vertices.length !== 0){
         this.setNodesData(mapData);
         this.setEdgesData(mapData);
-
+        cytoscapeMap(mapData, this.dataLayerType, this.dataLayerOption, this.curveStyle, this.rank, graphId);
-      if(this[type].vertices.length !== 0) cytoscapeMap(mapData, this.mapType, this.dataLayerType, this.dataLayerOption, this.curveStyle, this.rank, graphId);
+      };
-    }
+    },
   },
   created() {
     this.allMapDataStore.logId = this.$route.params.logId;
   },
   mounted() {
-    this.isLoading = false;
+    this.isLoading = true;
-    this.executeApi(this.mapType);
+    this.executeApi();
   },
 }
 </script>