Add visualization of compilation sections

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

@@ -13,7 +13,15 @@ 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_GRAPHS_RESOLVER} from "./detail-resolver";
+import {
+  COMPILE_DETAIL_GRAPHS_RESOLVER,
+  COMPILE_DETAIL_SECTIONS_RESOLVER,
+  CompileDetailGraphs,
+  CompileDetailGraphsSelector,
+  CompileDetailSections,
+  CompileDetailSectionsSelector,
+} from "./detail-resolver";
+import CompileSectionsChart from "./sections-chart.vue";
 import PerfettoLink from "../../../../components/perfetto-link.vue";
 
 const props = defineProps<{
@@ -97,10 +105,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 createGraphsSelector(): CompileDetailGraphsSelector {
+  const {start, end} = graphRange.value;
+  return {
     benchmark: props.testCase.benchmark,
     profile: props.testCase.profile,
     scenario: props.testCase.scenario,
@@ -109,8 +116,31 @@ async function renderGraphs() {
     end,
     kinds: ["percentrelative", "raw"] as GraphKind[],
   };
-  const graphsDetail = await COMPILE_DETAIL_GRAPHS_RESOLVER.load(selector);
-  if (graphsDetail.commits.length === 0) {
+}
+
+async function loadGraphs(): Promise<CompileDetailGraphs> {
+  return await COMPILE_DETAIL_GRAPHS_RESOLVER.load(createGraphsSelector());
+}
+
+function createSectionsSelector(): CompileDetailSectionsSelector {
+  return {
+    benchmark: props.testCase.benchmark,
+    profile: props.testCase.profile,
+    scenario: props.testCase.scenario,
+    start: props.baseArtifact.commit,
+    end: props.artifact.commit,
+  };
+}
+
+async function loadSections(): Promise<CompileDetailSections> {
+  return await COMPILE_DETAIL_SECTIONS_RESOLVER.load(createSectionsSelector());
+}
+
+// Render both relative and absolute graphs
+async function renderGraphs(detail: CompileDetailGraphs) {
+  const selector = createGraphsSelector();
+  const date = graphRange.value.date;
+  if (detail.commits.length === 0) {
     return;
   }
 
@@ -119,13 +149,13 @@ async function renderGraphs() {
     kind: GraphKind
   ): [GraphData, GraphsSelector] {
     const data = {
-      commits: graphsDetail.commits,
+      commits: detail.commits,
       benchmarks: {
         [selector.benchmark]: {
           // The server returns profiles capitalized, so we need to match that
           // here, so that the graph code can find the expected profile.
           [capitalize(selector.profile)]: {
-            [selector.scenario]: graphsDetail.graphs[index],
+            [selector.scenario]: detail.graphs[index],
           },
         },
       },
@@ -264,7 +294,15 @@ function changeProfileCommand(event: Event) {
   profileCommand.value = target.value as ProfileCommand;
 }
 
-onMounted(() => renderGraphs());
+const sectionsDetail: Ref<CompileDetailSections | null> = ref(null);
+onMounted(() => {
+  loadGraphs().then((d) => {
+    renderGraphs(d);
+  });
+  loadSections().then((d) => {
+    sectionsDetail.value = d;
+  });
+});
 </script>
 
 <template>
@@ -297,7 +335,7 @@ onMounted(() => renderGraphs());
             <tr v-if="(metadata?.iterations ?? null) !== null">
               <td>
                 Iterations
-                <Tooltip> How many times is the benchmark executed? </Tooltip>
+                <Tooltip> How many times is the benchmark executed?</Tooltip>
               </td>
               <td>{{ metadata.iterations }}</td>
             </tr>
@@ -391,6 +429,32 @@ onMounted(() => renderGraphs());
         <div ref="relativeChartElement"></div>
       </div>
     </div>
+    <div class="columns">
+      <div class="rows grow">
+        <div class="title bold">
+          Sections
+          <Tooltip
+            >Percentual duration of individual compilation sections. This is a
+            rough estimate that might not necessarily contain all of the
+            individual parts of the compilation. The sections are calculated
+            based on the results of self-profile queries and they are measured
+            based on wall-time.
+          </Tooltip>
+        </div>
+        <div>
+          <CompileSectionsChart
+            v-if="
+              (sectionsDetail?.before ?? null) !== null &&
+              (sectionsDetail?.after ?? null) !== null
+            "
+            :before="sectionsDetail.before"
+            :after="sectionsDetail.after"
+          />
+          <span v-else-if="sectionsDetail === null">Loading…</span>
+          <span v-else>Not available</span>
+        </div>
+      </div>
+    </div>
     <div class="command">
       <div class="title bold">
         Local profiling command<Tooltip>

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

@@ -1,6 +1,9 @@
 import {GraphKind, Series} from "../../../../graph/data";
 import {getJson} from "../../../../utils/requests";
-import {COMPARE_COMPILE_DETAIL_GRAPHS_DATA_URL} from "../../../../urls";
+import {
+  COMPARE_COMPILE_DETAIL_GRAPHS_DATA_URL,
+  COMPARE_COMPILE_DETAIL_SECTIONS_DATA_URL,
+} from "../../../../urls";
 import {CachedDataLoader} from "./utils";
 
 export interface CompileDetailGraphsSelector {
@@ -18,6 +21,30 @@ export interface CompileDetailGraphs {
   commits: Array<[number, string]>;
   // One Series for each GraphKind in the CompileDetailSelector
   graphs: Series[];
+  sections_before: CompilationSections | null;
+  sections_after: CompilationSections | null;
+}
+
+export interface CompileDetailSectionsSelector {
+  start: string;
+  end: string;
+  benchmark: string;
+  scenario: string;
+  profile: string;
+}
+
+export interface CompileDetailSections {
+  before: CompilationSections | null;
+  after: CompilationSections | null;
+}
+
+export interface CompilationSection {
+  name: string;
+  value: number;
+}
+
+export interface CompilationSections {
+  sections: CompilationSection[];
 }
 
 /**
@@ -36,10 +63,10 @@ export const COMPILE_DETAIL_GRAPHS_RESOLVER: CachedDataLoader<
 > = new CachedDataLoader(
   (key: CompileDetailGraphsSelector) =>
     `${key.benchmark};${key.profile};${key.scenario};${key.start};${key.end};${key.stat};${key.kinds}`,
-  loadDetail
+  loadGraphsDetail
 );
 
-async function loadDetail(
+async function loadGraphsDetail(
   selector: CompileDetailGraphsSelector
 ): Promise<CompileDetailGraphs> {
   const params = {
@@ -56,3 +83,29 @@ async function loadDetail(
     params
   );
 }
+
+// The same thing, but for sections
+export const COMPILE_DETAIL_SECTIONS_RESOLVER: CachedDataLoader<
+  CompileDetailSectionsSelector,
+  CompileDetailSections
+> = new CachedDataLoader(
+  (key: CompileDetailGraphsSelector) =>
+    `${key.benchmark};${key.profile};${key.scenario};${key.start};${key.end}`,
+  loadSectionsDetail
+);
+
+async function loadSectionsDetail(
+  selector: CompileDetailSectionsSelector
+): Promise<CompileDetailSections> {
+  const params = {
+    start: selector.start,
+    end: selector.end,
+    benchmark: selector.benchmark,
+    scenario: selector.scenario,
+    profile: selector.profile,
+  };
+  return await getJson<CompileDetailSections>(
+    COMPARE_COMPILE_DETAIL_SECTIONS_DATA_URL,
+    params
+  );
+}