Slightly change the style

hengxin · Mar 30, 2024 · b219a2a · b219a2a
1 parent 96db53f
commit b219a2a
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 51 deletions.
diff --git a/frontend/src/components/BugList.vue b/frontend/src/components/BugList.vue
@@ -61,9 +61,7 @@ const formatDate = (timestamp) => {
 
 const tagNameType = [
   { name: "Fixed", type: "success"},
-  { name: "Minor", type: ""},
-  { name: "Normal", type: "warning"},
-  { name: "Critical", type: "danger"}
+  { name: "Open", type: "danger"}
 ]
 
 const handleChangeTag = (row, tagName, tagType) => {

diff --git a/frontend/src/components/BugView.vue b/frontend/src/components/BugView.vue
@@ -112,7 +112,7 @@ onMounted(async () => {
         <li>Label: ${e.item.getModel().label || e.item.getModel().id}</li>
       </ul>
       <ul>
-        <li>Ops: <br> ${e.item.getModel().ops.replace(/\n/g, "<br>")}</li>
+        <li>Operations: <br> ${e.item.getModel().ops.replace(/\n/g, "<br>")}</li>
       </ul>`;
       return outDiv;
     },

diff --git a/frontend/src/components/Dashboard.vue b/frontend/src/components/Dashboard.vue
@@ -55,12 +55,12 @@ const checkerIsolationLevelOptions = [
   {label: 'Transactional Causal Consistency', value: 'TRANSACTIONAL_CAUSAL_CONSISTENCY'},
   {label: 'Snapshot Isolation', value: 'SNAPSHOT_ISOLATION'},
   {label: 'Serializable', value: 'SERIALIZABLE'},
-  {label: 'Viper SI', value: 'VIPER_SNAPSHOT_ISOLATION'},
-  {label: 'PolySI+', value: 'CUSTOM_SNAPSHOT_ISOLATION'}
+  {label: 'Snapshot Isolation(Viper)', value: 'VIPER_SNAPSHOT_ISOLATION'},
+  {label: 'Snapshot Isolation(PolySI+)', value: 'CUSTOM_SNAPSHOT_ISOLATION'}
 ];
 const historyTypeOptions = [
-  {label: 'Text', value: 'text'},
-  {label: 'Elle', value: 'elle'},
+  {label: 'Read-Write Register(text)', value: 'text'},
+  {label: 'List-Append(elle)', value: 'elle'},
 ];
 const handleSelectionChange = (value: string) => {
   console.log('Selected:', value);
@@ -142,12 +142,13 @@ const handleIndexChange = (index) => {
                        height="500px"
                        arrow="always"
                        @change="handleIndexChange">
+
             <el-carousel-item class="el-carousel-item-demo">
               <el-form label-position="left"
                        label-width="33%"
               >
                 <header class="form-header">
-                  <h2>Database Settings</h2>
+                  <h2>Database Setting</h2>
                 </header>
                 <el-form-item label="JDBC URL">
                   <el-input v-model="testingOption.db_url" placeholder="JDBC URL" clearable
@@ -164,7 +165,7 @@ const handleIndexChange = (index) => {
                     </el-icon>
                   </el-tooltip>
                 </el-form-item>
-                <el-form-item label="DB Type">
+                <el-form-item label="Database">
                   <el-select v-model="testingOption.db_type" placeholder="" @change="handleSelectionChange"
                              class="fixed-width">
                     <el-option
@@ -183,7 +184,7 @@ const handleIndexChange = (index) => {
                     </el-icon>
                   </el-tooltip>
                 </el-form-item>
-                <el-form-item label="DB Isolation Level">
+                <el-form-item label="Isolation Level">
                   <el-select v-model="testingOption.db_isolation" placeholder="" @change="handleSelectionChange"
                              class="fixed-width">
                     <el-option
@@ -211,15 +212,16 @@ const handleIndexChange = (index) => {
                 </el-form-item>
               </el-form>
             </el-carousel-item>
+
             <el-carousel-item class="el-carousel-item-demo">
               <el-form label-position="left"
                        label-width="33%"
               >
                 <header class="form-header">
-                  <h2>Workload Settings</h2>
+                  <h2>Workload Setting</h2>
                 </header>
                 <el-switch v-model="testingOption.workload_skipgeneration"
-                           inactive-text="Skip Generation"/>
+                           inactive-text="Skip Generator"/>
                 <el-form-item label="#History" v-if="!testingOption.workload_skipgeneration">
                   <el-input
                       v-model="testingOption.workload_history"
@@ -244,7 +246,7 @@ const handleIndexChange = (index) => {
                     </el-icon>
                   </el-tooltip>
                 </el-form-item>
-                <el-form-item label="#Txn/Sess" v-if="!testingOption.workload_skipgeneration">
+                <el-form-item label="#Txn/Session" v-if="!testingOption.workload_skipgeneration">
                   <el-input
                       v-model="testingOption.workload_transaction"
                       class="fixed-width"
@@ -256,7 +258,7 @@ const handleIndexChange = (index) => {
                     </el-icon>
                   </el-tooltip>
                 </el-form-item>
-                <el-form-item label="#Op/Txn" v-if="!testingOption.workload_skipgeneration">
+                <el-form-item label="#Operation/Txn" v-if="!testingOption.workload_skipgeneration">
                   <el-input
                       v-model="testingOption.workload_operation"
                       class="fixed-width"
@@ -292,7 +294,7 @@ const handleIndexChange = (index) => {
                     </el-icon>
                   </el-tooltip>
                 </el-form-item>
-                <el-form-item label="Distribution" v-if="!testingOption.workload_skipgeneration">
+                <el-form-item label="Skewness" v-if="!testingOption.workload_skipgeneration">
                   <el-select v-model="testingOption.workload_distribution" placeholder=""
                              @change="handleSelectionChange"
                              class="fixed-width">
@@ -344,12 +346,13 @@ const handleIndexChange = (index) => {
                 </el-upload>
               </el-form>
             </el-carousel-item>
+
             <el-carousel-item class="el-carousel-item-demo">
               <el-form label-position="left"
                        label-width="35%"
               >
                 <header class="form-header">
-                  <h2>Checker Settings</h2>
+                  <h2>Checker Setting</h2>
                 </header>
                 <el-form-item label="Isolation Level">
                   <el-select v-model="testingOption.checker_isolation" placeholder=""
@@ -375,6 +378,7 @@ const handleIndexChange = (index) => {
                 </el-form-item>
               </el-form>
             </el-carousel-item>
+
           </el-carousel>
         </el-col>
         <el-col :span="8">

diff --git a/frontend/src/components/RunView.vue b/frontend/src/components/RunView.vue
@@ -41,7 +41,7 @@ const createProfileCharts = () => {
     },
     legend: {
       textStyle: {
-        fontSize: 18
+        fontSize: 20
       },
       data: profileData.legend
     },
@@ -51,23 +51,23 @@ const createProfileCharts = () => {
       boundaryGap: false,
       data: profileData.x_axis,
       axisLabel: {
-        fontSize: 18,
+        fontSize: 20,
         color: '#000',
       },
       nameTextStyle: {
-        "fontSize": 18,
+        "fontSize": 20,
         color: '#000'
       }
     },
     yAxis: {
       name: 'Time(s)',
       type: 'value',
       axisLabel: {
-        fontSize: 18,
+        fontSize: 20,
         color: '#000'
       },
       nameTextStyle: {
-        "fontSize": 20,
+        "fontSize": 22,
         color: '#000'
       }
     },
@@ -91,7 +91,7 @@ const createProfileCharts = () => {
     },
     legend: {
       textStyle: {
-        fontSize: 18
+        fontSize: 20
       },
       data: profileData.legend
     },
@@ -101,23 +101,23 @@ const createProfileCharts = () => {
       boundaryGap: false,
       data: profileData.x_axis,
       axisLabel: {
-        fontSize: 18,
+        fontSize: 20,
         color: '#000',
       },
       nameTextStyle: {
-        "fontSize": 18,
+        "fontSize": 20,
         color: '#000'
       }
     },
     yAxis: {
       name: 'Memory(MB)',
       type: 'value',
       axisLabel: {
-        fontSize: 18,
+        fontSize: 20,
         color: '#000'
       },
       nameTextStyle: {
-        "fontSize": 20,
+        "fontSize": 22,
         color: '#000'
       }
     },
@@ -136,14 +136,15 @@ const createProfileCharts = () => {
       }
     },
     tooltip: {
-      // trigger: 'axis',
-      // axisPointer: {
-      //   type: 'shadow'
-      // }
+      trigger: "item",
+      formatter: function (params) {
+        console.log(params)
+        return profileData.idxToChecker[params.dataIndex][params.componentIndex] + "<br/>" + params.marker + params.seriesName + ":&nbsp;&nbsp;<b>" + params.data + "</b>"
+      }
     },
     legend: {
       textStyle: {
-        fontSize: 18
+        fontSize: 20
       },
     },
     // grid: {
@@ -158,27 +159,27 @@ const createProfileCharts = () => {
       // boundaryGap: false,
       data: profileData.x_axis,
       axisLabel: {
-        fontSize: 18,
+        fontSize: 20,
         color: '#000',
       },
       nameTextStyle: {
-        "fontSize": 18,
+        "fontSize": 20,
         color: '#000'
       }
     },
     yAxis: {
       name: 'Time(s)',
       type: 'value',
       axisLabel: {
-        fontSize: 18,
+        fontSize: 20,
         color: '#000'
       },
       nameTextStyle: {
-        "fontSize": 20,
+        "fontSize": 22,
         color: '#000'
       }
     },
-    series: profileData.stageSeries
+    series: profileData.stageSeries,
   };
 
   profileStagesOption && profileStagesChart.setOption(profileStagesOption);
@@ -203,20 +204,21 @@ const createRuntimeInfoCharts = () => {
       type: 'time',
       axisLabel: {
         formatter: '{HH}:{mm}:{ss}',
-        fontSize: 16,
+        fontSize: 20,
         color: '#000',
+        rotate: 30
       },
     },
     yAxis: {
       name: 'CPU(%)',
       type: 'value',
       max: 100,
       axisLabel: {
-        fontSize: 18,
+        fontSize: 20,
         color: '#000'
       },
       nameTextStyle: {
-        "fontSize": 20,
+        "fontSize": 22,
         color: '#000'
       }
     },
@@ -251,19 +253,20 @@ const createRuntimeInfoCharts = () => {
       type: 'time',
       axisLabel: {
         formatter: '{HH}:{mm}:{ss}',
-        fontSize: 16,
+        fontSize: 20,
         color: '#000',
+        rotate: 30
       },
     },
     yAxis: {
       name: 'Memory(MB)',
       type: 'value',
       axisLabel: {
-        fontSize: 18,
+        fontSize: 20,
         color: '#000'
       },
       nameTextStyle: {
-        "fontSize": 20,
+        "fontSize": 22,
         color: '#000'
       }
     },
@@ -328,7 +331,15 @@ const handleGetProfileRes = (res)=> {
   profileData.memorySeries = []
   profileData.stageSeries = []
   profileData.legend = []
-  for (let series of profileData.series) {
+  profileData.idxToChecker = {}
+  let maxIndex = {}
+  for (let i = 0; i < res.data.x_axis.length; i++) {
+    profileData.idxToChecker[i] = {}
+    maxIndex[i] = 0
+  }
+  for (let [seriesIdx, series] of profileData.series.entries()) {
+    console.log("series")
+    console.log(seriesIdx, series)
     profileData.timeSeries.push({
       name: series.checker,
       data: series.time,
@@ -339,17 +350,22 @@ const handleGetProfileRes = (res)=> {
       data: series.memory,
       type: 'line'
     })
-    Object.entries(series.stage_times).forEach(([stage, state_times]) => {
+    console.log(maxIndex)
+    Object.entries(series.stage_times).forEach(([stage, state_times], stageIdx) => {
       profileData.stageSeries.push({
         name: stage,
         type: 'bar',
         stack: series.checker,
-        emphasis: {
-          focus: 'series'
-        },
-        data: state_times
+        emphasis: {},
+        data: state_times,
       })
+      for (let [timeIdx, time] of state_times.entries()) {
+        profileData.idxToChecker[timeIdx][maxIndex[timeIdx]] = series.checker
+        maxIndex[timeIdx] += 1
+      }
     })
+    console.log(profileData.idxToChecker)
+
     profileData.legend.push(series.checker)
   }
   console.log(profileData)
@@ -497,7 +513,7 @@ watch(shouldRefresh, async (newVal) => {
 }
 
 .chart {
-  width: 800px;
+  width: 850px;
   height: 500px;
 }
 

diff --git a/src/main/java/Main.java b/src/main/java/Main.java
@@ -192,7 +192,7 @@ public void run(Properties config) {
                 var profileMap = profileInfo.getOrDefault(checkerIsolation, new HashMap<String, Long>());
                 var stageTimeList = new ArrayList<Long>();
                 stages.forEach(stage -> stageTimeList.add(profileMap.getOrDefault(stage, 0L)));
-                Profiler.appendToCSV(val, avgTime, maxMemory, triple.getRight(), stageTimeList);
+                Profiler.appendToCSV(val, Math.min(avgTime, stageTimeList.stream().reduce(0L, Long::sum)), maxMemory, triple.getRight(), stageTimeList);
                 profiler.removeTag(checkerIsolation);
             }
         };