lucia-frontend/src/components/Discover/SidebarTraces.vue

<template>
  <Sidebar :visible="sidebarTraces" :closeIcon="'pi pi-chevron-left'" :modal="false" position="left" :dismissable="true" class="!w-11/12" @show="show()" @hide="hide()">
    <template #header>
      <p class="h1">Traces</p>
    </template>
    <div class="pt-4 h-full flex items-center justify-start">
      <!-- Trace List -->
      <section class="w-80 h-full pr-4 border-r border-neutral-300">
        <p class="h2 px-2 mb-2">Trace List ({{ traceTotal }})</p>
        <p class="text-primary h2 px-2 mb-2">
          <span class="material-symbols-outlined text-sm align-[-10%] mr-2">info</span>Click trace number to see more.
        </p>
        <div class="overflow-y-scroll overflow-x-hidden scrollbar mx-[-8px] max-h-[calc(100%_-_96px)]" >
          <table class="border-separate border-spacing-x-2 text-sm">
            <thead class="sticky top-0 z-10 bg-neutral-10">
              <tr>
                <th class="h2 px-2 border-b border-neutral-500">Trace</th>
                <th class="h2 px-2 border-b border-neutral-500 text-start" colspan="3">Occurrences</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(trace, key) in traceList" :key="key" class=" cursor-pointer hover:text-primary" @click="switchCaseData(trace.id)">
                <td class="p-2">#{{ trace.id }}</td>
                <td class="p-2 w-24">
                  <div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
                    <div class="h-full bg-primary" :style="progressWidth(trace.value)"></div>
                  </div>
                </td>
                <td class="py-2 text-right">{{ trace.count }}</td>
                <td class="p-2">{{ trace.ratio }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>
      <!-- Trace item Table -->
      <section class="pl-4 h-full w-[calc(100%_-_320px)]">
        <p class="h2 mb-2">Trace #{{ showTraceId }}</p>
        <div class="h-52 w-full px-2 mb-2 border border-neutral-300 rounded">
          <div class="h-full w-full">
            <div id="cyTrace" ref="cyTrace" class="h-full min-w-full relative"></div>
          </div>
        </div>
        <div class="overflow-y-auto overflow-x-auto scrollbar h-[calc(100%_-_264px)]">
          <DataTable :value="cases" showGridlines tableClass="text-sm">
            <Column field="id" header="Case ID" sortable></Column>
            <Column field="started_at" header="Start time" sortable></Column>
            <Column field="completed_at" header="End time" sortable></Column>
          </DataTable>
        </div>
      </section>
    </div>
  </Sidebar>
</template>

<script>
import cytoscapeMapTrace from '@/module/cytoscapeMapTrace.js';
import { storeToRefs } from 'pinia';
import AllMapDataStore from '@/stores/allMapData.js';

export default {
  props: {
    sidebarTraces: Boolean,
    traces: Array,
    traceTaskSeq: Array,
    cases: Array,
  },
  setup() {
    const allMapDataStore = AllMapDataStore();
    return {allMapDataStore}
  },
  data() {
    return {
      processMap:{
        nodes:[],
        edges:[],
      },
      showTraceId: 1,
    }
  },
  computed: {
    traceTotal: function() {
      return this.traces.length;
    },
    traceList: function() {
      return this.traces.map(trace => {
        return {
          id: trace.id,
          value: Number((trace.ratio * 100).toFixed(1)),
          count: trace.count,
          ratio: this.getPercentLabel(trace.ratio),
        };
      }).sort((x, y) => x.id - y.id);
    },
  },
  methods: {
    /**
     * Number to percentage
     * @param   {number} val
     * @returns {string}     轉換完成的百分比字串
     */
    getPercentLabel(val){
      return (val * 100 === 100) ? `${val * 100}%` : `${(val * 100).toFixed(1)}%`;
    },
    /**
     * set progress bar width
     * @param   {number} value
     * @returns {string}      樣式的寬度設定
     */
    progressWidth(value){
      return `width:${value}%;`
    },
    /**
     * switch case data
     * @param {number} id
     */
    async switchCaseData(id) {
      this.showTraceId = id;
      this.$emit('switch-Trace-Id', this.showTraceId);
    },
    /**
     * 將 trace element nodes 資料彙整
     */
    setNodesData(){
      // 避免每次渲染都重複累加
      this.processMap.nodes = [];
      // 將 api call 回來的資料帶進 node
      this.traceTaskSeq.forEach((node, index) => {
        this.processMap.nodes.push({
          data: {
            id: index,
            label: node,
            backgroundColor: '#CCE5FF',
            bordercolor: '#003366',
            shape: 'round-rectangle',
            height: 80,
            width: 100
          }
        });
      })
    },
    /**
     * 將 trace edge line 資料彙整
     */
    setEdgesData(){
      this.processMap.edges = [];
      this.traceTaskSeq.forEach((edge, index) => {
        this.processMap.edges.push({
          data: {
            source: `${index}`,
            target: `${index + 1}`,
            lineWidth: 1,
            style: 'solid'
          }
        });
      });
      // 關係線數量筆節點少一個
      this.processMap.edges.pop();
    },
    /**
     * create trace cytoscape's map
     */
     createCy(){
      let graphId = this.$refs.cyTrace;

      this.setNodesData();
      this.setEdgesData();
      cytoscapeMapTrace(this.processMap.nodes, this.processMap.edges, graphId);
    },
    /**
     * create map
     */
     show() {
      this.setNodesData();
      this.setEdgesData();
      this.createCy();
    },
    /**
     * hide map
     */
    hide() {
      // 因 trace api 連動，所以關閉側邊欄時讓數值歸 1
      this.showTraceId = 1;
      this.allMapDataStore.getTraceDetail();
    }
  },
}
</script>

<style scoped>
/* 進度條顏色 */
:deep(.p-progressbar .p-progressbar-value) {
  @apply bg-primary
}
/* Table set */
:deep(.p-datatable-thead th) {
  @apply sticky top-0 left-0 z-10 bg-neutral-10
}
:deep(.p-datatable .p-datatable-thead > tr > th) {
  @apply !border-y-0 border-neutral-500 bg-neutral-100 after:absolute after:left-0 after:w-full after:h-full after:block after:top-0 after:border-b after:border-t after:border-neutral-500
}
:deep(.p-datatable .p-datatable-tbody > tr > td) {
  @apply border-neutral-500 !border-t-0
}
</style>