Apply a background color to the pipeline header rows

This commit is contained in:
Asger F
2024-11-14 10:30:32 +01:00
parent 8268d6812f
commit 58afeba1ac

View File

@@ -216,6 +216,10 @@ function PipelineStep(props: PipelineStepProps) {
); );
} }
const HeaderTR = styled.tr`
background-color: var(--vscode-sideBar-background);
`;
interface HighLevelStatsProps { interface HighLevelStatsProps {
before: PredicateInfo; before: PredicateInfo;
after: PredicateInfo; after: PredicateInfo;
@@ -229,13 +233,13 @@ function HighLevelStats(props: HighLevelStatsProps) {
before.evaluationCount > 1 || after.evaluationCount > 1; before.evaluationCount > 1 || after.evaluationCount > 1;
return ( return (
<> <>
<tr> <HeaderTR>
<ChevronCell></ChevronCell> <ChevronCell></ChevronCell>
<NumberHeader>{hasBefore ? "Before" : ""}</NumberHeader> <NumberHeader>{hasBefore ? "Before" : ""}</NumberHeader>
<NumberHeader>{hasAfter ? "After" : ""}</NumberHeader> <NumberHeader>{hasAfter ? "After" : ""}</NumberHeader>
<NumberHeader>{hasBefore && hasAfter ? "Delta" : ""}</NumberHeader> <NumberHeader>{hasBefore && hasAfter ? "Delta" : ""}</NumberHeader>
<NameHeader>Stats</NameHeader> <NameHeader>Stats</NameHeader>
</tr> </HeaderTR>
{showEvaluationCount && ( {showEvaluationCount && (
<PipelineStep <PipelineStep
before={before.evaluationCount || undefined} before={before.evaluationCount || undefined}
@@ -393,13 +397,13 @@ export function ComparePerformance(_: Record<string, never>) {
</SortOrderDropdown> </SortOrderDropdown>
<Table> <Table>
<thead> <thead>
<tr> <HeaderTR>
<ChevronCell /> <ChevronCell />
<NumberHeader>Before</NumberHeader> <NumberHeader>Before</NumberHeader>
<NumberHeader>After</NumberHeader> <NumberHeader>After</NumberHeader>
<NumberHeader>Delta</NumberHeader> <NumberHeader>Delta</NumberHeader>
<NameHeader>Predicate</NameHeader> <NameHeader>Predicate</NameHeader>
</tr> </HeaderTR>
</thead> </thead>
</Table> </Table>
{rows.map((row) => ( {rows.map((row) => (
@@ -433,7 +437,7 @@ export function ComparePerformance(_: Record<string, never>) {
row.after.pipelines, row.after.pipelines,
).map(({ name, first, second }, pipelineIndex) => ( ).map(({ name, first, second }, pipelineIndex) => (
<Fragment key={pipelineIndex}> <Fragment key={pipelineIndex}>
<tr> <HeaderTR>
<td></td> <td></td>
<NumberHeader>{first != null && "Before"}</NumberHeader> <NumberHeader>{first != null && "Before"}</NumberHeader>
<NumberHeader>{second != null && "After"}</NumberHeader> <NumberHeader>{second != null && "After"}</NumberHeader>
@@ -448,7 +452,7 @@ export function ComparePerformance(_: Record<string, never>) {
? " (before)" ? " (before)"
: ""} : ""}
</NameHeader> </NameHeader>
</tr> </HeaderTR>
{abbreviateRASteps(first?.steps ?? second!.steps).map( {abbreviateRASteps(first?.steps ?? second!.steps).map(
(step, index) => ( (step, index) => (
<PipelineStep <PipelineStep