Discover: fetch discover api && set element(nodes, edges) done

src/views/Discover/index.vue

@@ -0,0 +1,187 @@
+<template>
+  <h1>H1底家啦～~~，這裡是 Discovery 動物頻道耶~</h1>
+  <div class="flex min-w-full min-h-screen">
+    <div class="cyto" id="cyto"></div>
+  </div>
+</template>
+
+<script>
+import { storeToRefs } from 'pinia';
+import LoadingStore from '@/stores/loading.js';
+import AllMapDataStore from '@/stores/allMapData.js';
+
+export default {
+  setup() {
+    const loadingStore = LoadingStore();
+    const allMapDataStore = AllMapDataStore();
+    const { isLoading } = storeToRefs(loadingStore);
+    const { processMap, bpmn } = storeToRefs(allMapDataStore);
+
+    return {
+      isLoading,
+      processMap, bpmn, allMapDataStore,
+    }
+  },
+  data() {
+    return {
+      processMapData: {
+        startId: 0,
+        endId: 1,
+        nodes: [],
+        edges: [],
+      },
+      curveStyle:'unbundled-bezier', // 貝茲曲線 bezier | 直角 unbundled-bezier
+    }
+  },
+  methods: {
+    /**
+     * Switch curve-style is 'bezier' or 'unbundled-bezier'.
+     * @param {string} style 貝茲曲線 bezier | 直角 unbundled-bezier
+     */
+    switchCurveStyle(style){
+      this.curveStyle = style;
+    },
+    /**
+     * 將node資料彙整
+     * @param {string} type ProcessMap | BPMN
+     */
+     setNodesData(type){
+      const logFreq = {
+        "total": "",
+        "rel_freq": "",
+        "average": "",
+        "median": "",
+        "max": "",
+        "min": "",
+        "cases": ""
+      };
+      const logDuration = {
+        "total": "",
+        "rel_duration": "",
+        "average": "",
+        "median": "",
+        "max": "",
+        "min": "",
+      };
+      // BPMN 才有 gateway 類別
+      const gateway = {
+        parallel: "+",
+        exclusive: "x",
+        inclusive: "o",
+      };
+
+      // 將 api call 回來的資料帶進 node
+      this.processMap.vertices.forEach(node => {
+        switch (node.type) {
+          // add type of 'event' node
+          case 'event':
+            if(node.event_type === 'start') this.processMapData.startId = node.id;
+            else if(node.event_type === 'end') this.processMapData.endId = node.id;
+
+            this.processMapData.nodes.push({
+              data:{
+                id:node.id,
+                type:node.type,
+                label:node.event_type,
+                height:60,
+                width:60,
+                backgroundColor:'#FFCCCC',
+                bordercolor:'#003366',
+                shape:"ellipse",
+                freq:logFreq,
+                duration:logDuration,
+              }
+            });
+            break;
+          // add type of 'activity' node
+          default:
+            this.processMapData.nodes.push({
+              data:{
+                id:node.id,
+                type:node.type,
+                label:node.label,
+                height:80,
+                width:100,
+                backgroundColor:'#FFCCCC',
+                bordercolor:'#003366',
+                shape:"ellipse",
+                freq:node.freq,
+                duration:node.duration,
+              }
+            })
+            break;
+        }
+      });
+     },
+    /**
+     * 將edge資料彙整
+     * @param {string} type ProcessMap/BPMN
+     */
+    setEdgesData(type) {
+      //add event duration is empty
+      const event_duration = {
+        "total": "",
+        "rel_duration": "",
+        "average": "",
+        "median": "",
+        "max": "",
+        "min": "",
+        "cases": ""
+      };
+      this.processMap.edges.forEach(edge => {
+        this.processMapData.nodes.push({
+          data: {
+            source:edge.tail,
+            target:edge.head,
+            freq:edge.freq,
+            duration:edge.duration == null ? event_duration:edge.duration,
+            style:'dotted',
+            lineWidth:1,
+          },
+        });
+      });
+     },
+    /**
+     * create and setting cytoscape
+     */
+    createCytoscape() {
+      let graphId = document.getElementById('cyto');
+      // let nodes
+      // let edges
+
+      let cy = this.$cytoscape({
+        container: graphId,
+        // elements: {
+        //   nodes: nodes, // 節點的資料
+        //   edges: edges, // 關係線的資料
+        // },
+        layout: {
+          name: 'klay',
+          rankDir: 'LR' // 直向 TB | 橫向 LR
+        },
+        style: [
+          {
+            selector: 'node',
+          }
+        ],
+      })
+
+      // this.$cytoscape.warnings(false); // false
+    },
+    async executeApi() {
+      await this.allMapDataStore.getAllMapData();
+      this.setNodesData();
+      console.log(this.processMapData.nodes);
+    }
+
+  },
+  created() {
+    this.allMapDataStore.logId = this.$route.params.logId;
+  },
+  mounted() {
+    this.isLoading = false
+    // this.createCytoscape();
+    this.executeApi();
+  },
+}
+</script>

src/views/Files/index.vue

@@ -6,23 +6,22 @@
       <!-- card group 最多六個-->
       <ul class="flex justify-start items-center gap-4 overflow-x-auto w-full h-[192px] scrollbar whitespace-nowrap pb-4">
         <!-- card item v-for -->
-        <li class="min-w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:text-primary hover:bg-primary/50 hover:border-primary duration-300" v-for="(file, index) in recentlyUsedFiles.slice(0, 6)" :key="file.id">
-          <a href="" class="h-full flex flex-col justify-between">
-            <div>
-              <figure class="mb-2">
-                <IconDataFormat class="w-8 h-8 hover:fill-primary"></IconDataFormat>
-              </figure>
-              <h3 class="text-sm font-medium mb-2">
-                {{ file.name }}
-              </h3>
-              <p class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden">
-                {{ file.parentLog }}
-              </p>
-            </div>
-            <p class="text-sm text-neutral-500">
-              {{ file.accessed_at }}
+        <li class="min-w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:text-primary hover:bg-primary/50 hover:border-primary duration-300
+        flex flex-col justify-between cursor-pointer" v-for="(file, index) in recentlyUsedFiles.slice(0, 6)" :key="file.id" @dblclick="enterDiscover(file)">
+          <div>
+            <figure class="mb-2">
+              <IconDataFormat class="w-8 h-8 hover:fill-primary"></IconDataFormat>
+            </figure>
+            <h3 class="text-sm font-medium mb-2">
+              {{ file.name }}
+            </h3>
+            <p class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden">
+              {{ file.parentLog }}
             </p>
-          </a>
+          </div>
+          <p class="text-sm text-neutral-500">
+            {{ file.accessed_at }}
+          </p>
         </li>
       </ul>
     </section>
@@ -52,7 +51,7 @@
             </tr>
           </thead>
           <tbody>
-            <tr v-for="(file, index) in allFiles" :key="file.id">
+            <tr v-for="(file, index) in allFiles" :key="file.id" @dblclick="enterDiscover(file)">
               <td>{{ file.name }}</td>
               <td class="text-neutral-500">{{ file.parentLog }}</td>
               <td class="text-neutral-500">{{ file.fileType }}</td>
@@ -64,24 +63,22 @@
       </div>
     <!-- All Files type of grid -->
     <ul class="flex justify-start items-start gap-4 flex-wrap overflow-y-scroll overflow-x-hidden max-h-[calc(100vh_-_480px)] scrollbar" v-else>
-    <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:text-primary hover:bg-primary/50 hover:border-primary duration-300"
-      v-for="(file, index) in allFiles" :key="file.id">
-        <a href="" class="h-full flex flex-col justify-between">
-          <div>
-            <figure class="mb-2">
-              <IconDataFormat class="w-8 h-8 hover:fill-primary"></IconDataFormat>
-            </figure>
-            <h3 class="text-sm font-medium mb-2">
-              {{ file.name }}
-            </h3>
-            <p class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden">
-              {{ file.parentLog }}
-            </p>
-          </div>
-          <p class="text-sm text-neutral-500">
-            {{ file.updated_at }}
+    <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:text-primary hover:bg-primary/50 hover:border-primary duration-300 flex flex-col justify-between cursor-pointer"
+      v-for="(file, index) in allFiles" :key="file.id" @dblclick="enterDiscover(file)">
+        <div>
+          <figure class="mb-2">
+            <IconDataFormat class="w-8 h-8 hover:fill-primary"></IconDataFormat>
+          </figure>
+          <h3 class="text-sm font-medium mb-2">
+            {{ file.name }}
+          </h3>
+          <p class="text-sm text-neutral-500 whitespace-nowrap break-keep text-ellipsis overflow-hidden">
+            {{ file.parentLog }}
           </p>
-        </a>
+        </div>
+        <p class="text-sm text-neutral-500">
+          {{ file.updated_at }}
+        </p>
       </li>
     </ul>
     </section>
@@ -181,12 +178,20 @@
     },
     methods: {
       /**
-       * switch sort
+       * sort's switch
+       * @param {string} value
        */
       switchSort(value) {
         this.sortReverseOrder = (this.sortKey === value)? !this.sortReverseOrder: false;
         this.sortKey = value;
       },
+      /**
+       * 選擇該 files 進入 Discover/Compare/Design 頁面
+       * @param {object} file
+       */
+      enterDiscover(file){
+        this.$router.push({ name: 'Discover', params: { logId: file.id }});
+      },
     },
     mounted() {
       this.store.fetchEventLog();