Add compile section visualization

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

@@ -13,7 +13,14 @@ import {GraphRenderOpts, renderPlots} from "../../../../graph/render";
 import {GraphData, GraphKind, GraphsSelector} from "../../../../graph/data";
 import uPlot from "uplot";
 import CachegrindCmd from "../../../../components/cachegrind-cmd.vue";
-import {COMPILE_DETAIL_RESOLVER} from "./detail-resolver";
+import {
+  CompilationSections,
+  COMPILE_DETAIL_RESOLVER,
+  CompileDetail,
+  CompileDetailSelector,
+} from "./detail-resolver";
+import CompileSectionsChart from "./compile-sections-chart.vue";
+import {af} from "date-fns/locale";
 
 const props = defineProps<{
   testCase: CompileTestCase;
@@ -96,10 +103,9 @@ function drawCurrentDate(opts: GraphRenderOpts, date: Date) {
   };
 }
 
-// Render both relative and absolute graphs
-async function renderGraphs() {
-  const {start, end, date} = graphRange.value;
-  const selector = {
+function createSelector(): CompileDetailSelector {
+  const {start, end} = graphRange.value;
+  return {
     benchmark: props.testCase.benchmark,
     profile: props.testCase.profile,
     scenario: props.testCase.scenario,
@@ -108,7 +114,16 @@ async function renderGraphs() {
     end,
     kinds: ["percentrelative", "raw"] as GraphKind[],
   };
-  const detail = await COMPILE_DETAIL_RESOLVER.loadDetail(selector);
+}
+
+async function loadDetail(): Promise<CompileDetail> {
+  return await COMPILE_DETAIL_RESOLVER.loadDetail(createSelector());
+}
+
+// Render both relative and absolute graphs
+async function renderGraphs(detail: CompileDetail) {
+  const selector = createSelector();
+  const date = graphRange.value.date;
   if (detail.commits.length === 0) {
     return;
   }
@@ -261,7 +276,32 @@ function changeProfileCommand(event: Event) {
   profileCommand.value = target.value as ProfileCommand;
 }
 
-onMounted(() => renderGraphs());
+/*
+ * Calculates the longer titak duration out of the two passed compilation
+ * section.
+ */
+function calculateTotalDuration(
+  before: CompilationSections | null,
+  after: CompilationSections | null
+): number {
+  let beforeTotal = 0;
+  if (before != null) {
+    beforeTotal = before.frontend + before.backend + before.linker;
+  }
+  let afterTotal = 0;
+  if (after != null) {
+    afterTotal = after.frontend + after.backend + after.linker;
+  }
+  return Math.max(beforeTotal, afterTotal);
+}
+
+const detail: Ref<CompileDetail | null> = ref(null);
+onMounted(() => {
+  loadDetail().then((d) => {
+    detail.value = d;
+    renderGraphs(d);
+  });
+});
 </script>
 
 <template>
@@ -349,6 +389,39 @@ onMounted(() => renderGraphs());
           </li>
         </ul>
       </div>
+      <div class="rows grow">
+        <div class="title bold">
+          Sections
+          <Tooltip
+            >Percentual duration of individual compilation sections (frontend,
+            backend, linker)</Tooltip
+          >
+        </div>
+        <div>
+          <CompileSectionsChart
+            v-if="(detail?.sections_before ?? null) !== null"
+            label="Before"
+            :sections="detail.sections_before"
+            :total_duration="
+              calculateTotalDuration(
+                detail.sections_before,
+                detail.sections_after
+              )
+            "
+          />
+          <CompileSectionsChart
+            v-if="(detail?.sections_after ?? null) !== null"
+            label="After"
+            :sections="detail.sections_after"
+            :total_duration="
+              calculateTotalDuration(
+                detail.sections_before,
+                detail.sections_after
+              )
+            "
+          />
+        </div>
+      </div>
     </div>
     <div class="columns graphs">
       <div class="rows center-items grow">

site/frontend/src/pages/compare/compile/table/comparisons-table.vue

@@ -7,7 +7,7 @@ import {CompileBenchmarkMap, CompileTestCase} from "../common";
 import {computed} from "vue";
 import {useExpandedStore} from "./expansion";
 import BenchmarkDetail from "./benchmark-detail.vue";
-import {getPastDate} from "./utils";
+import {prettifyRawNumber} from "./utils";
 
 const props = defineProps<{
   id: string;
@@ -20,10 +20,6 @@ const props = defineProps<{
   stat: string;
 }>();
 
-function prettifyRawNumber(number: number): string {
-  return number.toLocaleString();
-}
-
 const columnCount = computed(() => {
   const base = 7;
   if (props.showRawData) {

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

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import {CompilationSections} from "./detail-resolver";
+import {computed} from "vue";
+import {prettifyRawNumber} from "./utils";
+
+const props = defineProps<{
+  sections: CompilationSections;
+  label: string;
+  total_duration: number;
+}>();
+
+const total = computed(
+  () => props.sections.frontend + props.sections.backend + props.sections.linker
+);
+
+function width(value: number): string {
+  const fraction = value / props.total_duration;
+  return `${(fraction * 100).toFixed(2)}%`;
+}
+function title(name: string, value: number): string {
+  const percent = (value / total.value) * 100;
+  return `${name}: ${percent.toFixed(2)}% (${prettifyRawNumber(value)})`;
+}
+</script>
+
+<template>
+  <div class="wrapper">
+    <span class="label">{{ props.label }}</span>
+    <div class="part-wrapper">
+      <div
+        class="part frontend"
+        :title="title('Frontend', props.sections.frontend)"
+        :style="{width: width(props.sections.frontend)}"
+      ></div>
+      <div
+        class="part backend"
+        :title="title('Backend', props.sections.backend)"
+        :style="{width: width(props.sections.backend)}"
+      ></div>
+      <div
+        class="part linker"
+        :title="title('Linker', props.sections.linker)"
+        :style="{width: width(props.sections.linker)}"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.wrapper {
+  display: flex;
+  justify-content: flex-end;
+  width: 300px;
+  margin-bottom: 10px;
+}
+.label {
+  margin-right: 5px;
+  align-self: center;
+}
+.part-wrapper {
+  width: 220px;
+  display: flex;
+  flex-direction: row;
+  border-right: 1px dashed #333333;
+}
+.part {
+  height: 30px;
+
+  &:hover {
+    box-shadow: inset 0 0 1px 2px #000;
+  }
+}
+.frontend {
+  border-radius: 5px 0 0 5px;
+  background-color: #ffcf96;
+}
+.backend {
+  background-color: #ff8080;
+}
+.linker {
+  border-radius: 0 5px 5px 0;
+  background-color: #29adb2;
+}
+</style>

site/frontend/src/pages/compare/compile/table/detail-resolver.ts

@@ -12,11 +12,19 @@ export interface CompileDetailSelector {
   kinds: GraphKind[];
 }
 
+export interface CompilationSections {
+  frontend: number;
+  backend: number;
+  linker: number;
+}
+
 // Compile benchmark detail received from the server
 export interface CompileDetail {
   commits: Array<[number, string]>;
   // One Series for each GraphKind in the CompileDetailSelector
   graphs: Series[];
+  sections_before: CompilationSections | null;
+  sections_after: CompilationSections | null;
 }
 
 /**

site/frontend/src/pages/compare/compile/table/utils.ts

@@ -29,3 +29,7 @@ function format_ymd(date: Date): string {
 export function daysBetweenDates(a: Date, b: Date): number {
   return Math.floor((b.getTime() - a.getTime()) / (1000 * 60 * 60 * 24));
 }
+
+export function prettifyRawNumber(number: number): string {
+  return number.toLocaleString();
+}