Allow switching relative and absolute scale of the fraction chart

Author: Kobzol

site/frontend/src/pages/compare/compile/table/benchmark-detail.vue

@@ -279,6 +279,20 @@ onMounted(() => {
   });
   loadSections().then((d) => {
     sectionsDetail.value = d;
+    sectionsDetail.value.before = {
+      sections: [
+        {name: "Frontend", value: 20},
+        {name: "Backend", value: 15},
+        {name: "Linker", value: 15},
+      ],
+    };
+    sectionsDetail.value.after = {
+      sections: [
+        {name: "Frontend", value: 20},
+        {name: "Backend", value: 30},
+        {name: "Linker", value: 50},
+      ],
+    };
   });
 });
 </script>

site/frontend/src/pages/compare/compile/table/sections-chart.vue

@@ -7,6 +7,13 @@ const props = defineProps<{
   after: CompilationSections;
 }>();
 
+enum CompareMode {
+  /// Useful for comparing the fractional parts of sections
+  Fractional,
+  /// Useful for comparing the absolute durations of sections
+  Absolute,
+}
+
 function calculateTotalSectionsDuration(sections: CompilationSections): number {
   return sections.sections.reduce((accum, section) => accum + section.value, 0);
 }
@@ -18,6 +25,10 @@ const afterTotalWidth = computed(() => {
   return calculateTotalSectionsDuration(props.after);
 });
 
+const maxTotalWidth = computed(() => {
+  return Math.max(beforeTotalWidth.value, afterTotalWidth.value);
+});
+
 const SECTIONS_PALETTE = [
   "#7768AE",
   "#FFCf96",
@@ -58,6 +69,18 @@ function formatPercent(
   return `${percent.toFixed(2)}%`;
 }
 
+function getRowWidth(row: number): number {
+  if (compareMode.value === CompareMode.Fractional) {
+    if (row === 0) {
+      return beforeTotalWidth.value;
+    } else {
+      return afterTotalWidth.value;
+    }
+  } else {
+    return maxTotalWidth.value;
+  }
+}
+
 const chartRows: ComputedRef<Array<[string, CompilationSections]>> = computed(
   () => [
     ["Before", props.before],
@@ -89,66 +112,88 @@ function activate(section: string) {
 function deactivate() {
   activeSection.value = null;
 }
+
+const compareMode = ref(CompareMode.Absolute);
 </script>
 
 <template>
-  <div class="wrapper">
-    <div class="chart-wrapper">
-      <div class="chart" v-for="([label, sections], rowIndex) in chartRows">
-        <span class="label">{{ label }}</span>
-        <div class="section-wrapper">
-          <div
-            v-for="(section, index) in sections.sections"
-            :class="{section: true, active: activeSection === section.name}"
-            @mouseenter="activate(section.name)"
-            @mouseleave="deactivate"
-            :style="{
-              width: calculate_width(
-                section.value,
-                rowIndex == 0 ? beforeTotalWidth : afterTotalWidth
-              ),
-              backgroundColor: getSectionColor(index),
-            }"
-          >
+  <div>
+    <div class="wrapper">
+      <div class="chart-wrapper">
+        <div class="chart" v-for="([label, sections], rowIndex) in chartRows">
+          <span class="label">{{ label }}</span>
+          <div class="section-wrapper">
             <div
-              class="description"
-              v-if="rowIndex == 1 && activeSection === section.name"
+              v-for="(section, index) in sections.sections"
+              :class="{section: true, active: activeSection === section.name}"
+              @mouseenter="activate(section.name)"
+              @mouseleave="deactivate"
+              :style="{
+                width: calculate_width(section.value, getRowWidth(rowIndex)),
+                backgroundColor: getSectionColor(index),
+              }"
             >
-              <div>
-                <b>{{ section.name }}</b>
-              </div>
-              <div>
+              <div
+                class="description"
+                v-if="rowIndex == 1 && activeSection === section.name"
+              >
                 <div>
-                  {{ formatPercent(props.before, section.name) }} ->
-                  {{ formatPercent(props.after, section.name) }}
+                  <b>{{ section.name }}</b>
                 </div>
                 <div>
-                  {{
-                    getSectionByName(props.before, section.name)?.value ?? "??"
-                  }}
-                  ->
-                  {{
-                    getSectionByName(props.after, section.name)?.value ?? "??"
-                  }}
+                  <div>
+                    {{ formatPercent(props.before, section.name) }} ->
+                    {{ formatPercent(props.after, section.name) }}
+                  </div>
+                  <div>
+                    {{
+                      getSectionByName(props.before, section.name)?.value ??
+                      "??"
+                    }}
+                    ->
+                    {{
+                      getSectionByName(props.after, section.name)?.value ?? "??"
+                    }}
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
+      <div class="legend">
+        <div
+          class="item"
+          v-for="item in legendItems"
+          @mouseenter="activate(item.section.name)"
+          @mouseleave="deactivate"
+        >
+          <div
+            :class="{color: true, active: activeSection === item.section.name}"
+            :style="{backgroundColor: item.color}"
+          ></div>
+          <div class="name">{{ item.label }}</div>
+        </div>
+      </div>
     </div>
-    <div class="legend">
+    <div class="controls">
       <div
-        class="item"
-        v-for="item in legendItems"
-        @mouseenter="activate(item.section.name)"
-        @mouseleave="deactivate"
+        :class="{control: true, selected: compareMode === CompareMode.Absolute}"
+        @click="compareMode = CompareMode.Absolute"
+        title="Normalize chart width to the duration of the longer collection. Useful for comparing absolute durations of sections."
       >
-        <div
-          :class="{color: true, active: activeSection === item.section.name}"
-          :style="{backgroundColor: item.color}"
-        ></div>
-        <div class="name">{{ item.label }}</div>
+        Absolute
+      </div>
+      &nbsp;/&nbsp;
+      <div
+        :class="{
+          control: true,
+          selected: compareMode === CompareMode.Fractional,
+        }"
+        @click="compareMode = CompareMode.Fractional"
+        title="Normalize chart width to the duration of its collection. Useful for comparing percentual fractions of sections."
+      >
+        Relative
       </div>
     </div>
   </div>
@@ -223,4 +268,20 @@ function deactivate() {
     }
   }
 }
+
+.controls {
+  display: flex;
+  justify-content: center;
+
+  .control {
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: underline;
+    }
+    &.selected {
+      font-weight: bold;
+    }
+  }
+}
 </style>