More work on RA pretty printing and overall presentation

extensions/ql-vscode/src/view/compare-performance/ComparePerformance.tsx

@@ -12,7 +12,7 @@ import type {
 import { formatDecimal } from "../../common/number";
 import { styled } from "styled-components";
 import { Codicon, ViewTitle, WarningBox } from "../common";
-import { abbreviateRASteps } from "./RAPrettyPrinter";
+import { abbreviateRANames, abbreviateRASteps } from "./RAPrettyPrinter";
 
 const enum AbsentReason {
   NotSeen = "NotSeen",
@@ -190,7 +190,7 @@ const SortOrderDropdown = styled.select``;
 interface PipelineStepProps {
   before: number | undefined;
   after: number | undefined;
-  step: string;
+  step: React.ReactNode;
 }
 
 /**
@@ -216,6 +216,10 @@ function PipelineStep(props: PipelineStepProps) {
   );
 }
 
+const HeaderTR = styled.tr`
+  background-color: var(--vscode-sideBar-background);
+`;
+
 interface HighLevelStatsProps {
   before: PredicateInfo;
   after: PredicateInfo;
@@ -229,13 +233,13 @@ function HighLevelStats(props: HighLevelStatsProps) {
     before.evaluationCount > 1 || after.evaluationCount > 1;
   return (
     <>
-      <tr>
+      <HeaderTR>
         <ChevronCell></ChevronCell>
         <NumberHeader>{hasBefore ? "Before" : ""}</NumberHeader>
         <NumberHeader>{hasAfter ? "After" : ""}</NumberHeader>
         <NumberHeader>{hasBefore && hasAfter ? "Delta" : ""}</NumberHeader>
         <NameHeader>Stats</NameHeader>
-      </tr>
+      </HeaderTR>
       {showEvaluationCount && (
         <PipelineStep
           before={before.evaluationCount || undefined}
@@ -360,6 +364,8 @@ export function ComparePerformance(_: Record<string, never>) {
     totalDiff += row.diff;
   }
 
+  const rowNames = abbreviateRANames(rows.map((row) => row.name));
+
   return (
     <>
       <ViewTitle>Performance comparison</ViewTitle>
@@ -393,16 +399,16 @@ export function ComparePerformance(_: Record<string, never>) {
       </SortOrderDropdown>
       <Table>
         <thead>
-          <tr>
+          <HeaderTR>
             <ChevronCell />
             <NumberHeader>Before</NumberHeader>
             <NumberHeader>After</NumberHeader>
             <NumberHeader>Delta</NumberHeader>
             <NameHeader>Predicate</NameHeader>
-          </tr>
+          </HeaderTR>
         </thead>
       </Table>
-      {rows.map((row) => (
+      {rows.map((row, rowIndex) => (
         <Table
           key={row.name}
           className={expandedPredicates.has(row.name) ? "expanded" : ""}
@@ -423,7 +429,7 @@ export function ComparePerformance(_: Record<string, never>) {
               {renderAbsoluteValue(row.before)}
               {renderAbsoluteValue(row.after)}
               {renderDelta(row.diff)}
-              <NameCell>{row.name}</NameCell>
+              <NameCell>{rowNames[rowIndex]}</NameCell>
             </PredicateTR>
             {expandedPredicates.has(row.name) && (
               <>
@@ -433,7 +439,7 @@ export function ComparePerformance(_: Record<string, never>) {
                   row.after.pipelines,
                 ).map(({ name, first, second }, pipelineIndex) => (
                   <Fragment key={pipelineIndex}>
-                    <tr>
+                    <HeaderTR>
                       <td></td>
                       <NumberHeader>{first != null && "Before"}</NumberHeader>
                       <NumberHeader>{second != null && "After"}</NumberHeader>
@@ -448,7 +454,7 @@ export function ComparePerformance(_: Record<string, never>) {
                             ? " (before)"
                             : ""}
                       </NameHeader>
-                    </tr>
+                    </HeaderTR>
                     {abbreviateRASteps(first?.steps ?? second!.steps).map(
                       (step, index) => (
                         <PipelineStep