Simplify view when not in comparison mode

Author: tausbn

extensions/ql-vscode/src/common/interface-types.ts

@@ -403,6 +403,7 @@ export interface SetPerformanceComparisonQueries {
   readonly t: "setPerformanceComparison";
   readonly from: PerformanceComparisonDataFromLog;
   readonly to: PerformanceComparisonDataFromLog;
+  readonly comparison: boolean;
 }
 
 export type FromComparePerformanceViewMessage = CommonFromViewMessages;

extensions/ql-vscode/src/compare-performance/compare-performance-view.ts

@@ -81,6 +81,7 @@ export class ComparePerformanceView extends AbstractWebview<
       t: "setPerformanceComparison",
       from: fromPerf.getData(),
       to: toPerf.getData(),
+      comparison: fromJsonLog !== "",
     });
   }
 

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

@@ -218,14 +218,15 @@ const Dropdown = styled.select``;
 interface PipelineStepProps {
   before: number | undefined;
   after: number | undefined;
+  comparison: boolean;
   step: React.ReactNode;
 }
 
 /**
  * Row with details of a pipeline step, or one of the high-level stats appearing above the pipelines (evaluation/iteration counts).
  */
 function PipelineStep(props: PipelineStepProps) {
-  let { before, after, step } = props;
+  let { before, after, comparison, step } = props;
   if (before != null && before < 0) {
     before = undefined;
   }
@@ -236,9 +237,11 @@ function PipelineStep(props: PipelineStepProps) {
   return (
     <PipelineStepTR>
       <ChevronCell />
-      <NumberCell>{before != null ? formatDecimal(before) : ""}</NumberCell>
+      {comparison && (
+        <NumberCell>{before != null ? formatDecimal(before) : ""}</NumberCell>
+      )}
       <NumberCell>{after != null ? formatDecimal(after) : ""}</NumberCell>
-      {delta != null ? renderDelta(delta) : <td></td>}
+      {comparison && (delta != null ? renderDelta(delta) : <td></td>)}
       <NameCell>{step}</NameCell>
     </PipelineStepTR>
   );
@@ -251,10 +254,11 @@ const HeaderTR = styled.tr`
 interface HighLevelStatsProps {
   before: PredicateInfo;
   after: PredicateInfo;
+  comparison: boolean;
 }
 
 function HighLevelStats(props: HighLevelStatsProps) {
-  const { before, after } = props;
+  const { before, after, comparison } = props;
   const hasBefore = before.absentReason !== AbsentReason.NotSeen;
   const hasAfter = after.absentReason !== AbsentReason.NotSeen;
   const showEvaluationCount =
@@ -263,21 +267,25 @@ function HighLevelStats(props: HighLevelStatsProps) {
     <>
       <HeaderTR>
         <ChevronCell></ChevronCell>
-        <NumberHeader>{hasBefore ? "Before" : ""}</NumberHeader>
+        {comparison && <NumberHeader>{hasBefore ? "Before" : ""}</NumberHeader>}
         <NumberHeader>{hasAfter ? "After" : ""}</NumberHeader>
-        <NumberHeader>{hasBefore && hasAfter ? "Delta" : ""}</NumberHeader>
+        {comparison && (
+          <NumberHeader>{hasBefore && hasAfter ? "Delta" : ""}</NumberHeader>
+        )}
         <NameHeader>Stats</NameHeader>
       </HeaderTR>
       {showEvaluationCount && (
         <PipelineStep
           before={before.evaluationCount || undefined}
           after={after.evaluationCount || undefined}
+          comparison={comparison}
           step="Number of evaluations"
         />
       )}
       <PipelineStep
         before={before.iterationCount / before.evaluationCount || undefined}
         after={after.iterationCount / after.evaluationCount || undefined}
+        comparison={comparison}
         step={
           showEvaluationCount
             ? "Number of iterations per evaluation"
@@ -379,6 +387,8 @@ function ComparePerformanceWithData(props: {
     [data],
   );
 
+  const comparison = data?.comparison;
+
   const [expandedPredicates, setExpandedPredicates] = useState<Set<string>>(
     () => new Set<string>(),
   );
@@ -480,9 +490,9 @@ function ComparePerformanceWithData(props: {
         <thead>
           <HeaderTR>
             <ChevronCell />
-            <NumberHeader>Before</NumberHeader>
-            <NumberHeader>After</NumberHeader>
-            <NumberHeader>Delta</NumberHeader>
+            {comparison && <NumberHeader>Before</NumberHeader>}
+            <NumberHeader>{comparison ? "After" : "Value"}</NumberHeader>
+            {comparison && <NumberHeader>Delta</NumberHeader>}
             <NameHeader>Predicate</NameHeader>
           </HeaderTR>
         </thead>
@@ -505,33 +515,44 @@ function ComparePerformanceWithData(props: {
               <ChevronCell>
                 <Chevron expanded={expandedPredicates.has(row.name)} />
               </ChevronCell>
-              {renderAbsoluteValue(row.before, metric)}
+              {comparison && renderAbsoluteValue(row.before, metric)}
               {renderAbsoluteValue(row.after, metric)}
-              {renderDelta(row.diff, metric.unit)}
+              {comparison && renderDelta(row.diff, metric.unit)}
               <NameCell>{rowNames[rowIndex]}</NameCell>
             </PredicateTR>
             {expandedPredicates.has(row.name) && (
               <>
-                <HighLevelStats before={row.before} after={row.after} />
+                <HighLevelStats
+                  before={row.before}
+                  after={row.after}
+                  comparison={comparison}
+                />
                 {collatePipelines(
                   row.before.pipelines,
                   row.after.pipelines,
                 ).map(({ name, first, second }, pipelineIndex) => (
                   <Fragment key={pipelineIndex}>
                     <HeaderTR>
                       <td></td>
-                      <NumberHeader>{first != null && "Before"}</NumberHeader>
+                      {comparison && (
+                        <NumberHeader>{first != null && "Before"}</NumberHeader>
+                      )}
                       <NumberHeader>{second != null && "After"}</NumberHeader>
-                      <NumberHeader>
-                        {first != null && second != null && "Delta"}
-                      </NumberHeader>
+                      {comparison && (
+                        <NumberHeader>
+                          {first != null &&
+                            second != null &&
+                            (comparison ? "Delta" : "Value")}
+                        </NumberHeader>
+                      )}
                       <NameHeader>
                         Tuple counts for &apos;{name}&apos; pipeline
-                        {first == null
-                          ? " (after)"
-                          : second == null
-                            ? " (before)"
-                            : ""}
+                        {comparison &&
+                          (first == null
+                            ? " (after)"
+                            : second == null
+                              ? " (before)"
+                              : "")}
                       </NameHeader>
                     </HeaderTR>
                     {abbreviateRASteps(first?.steps ?? second!.steps).map(
@@ -540,6 +561,7 @@ function ComparePerformanceWithData(props: {
                           key={index}
                           before={first?.counts[index]}
                           after={second?.counts[index]}
+                          comparison={comparison}
                           step={step}
                         />
                       ),
@@ -558,9 +580,11 @@ function ComparePerformanceWithData(props: {
           </tr>
           <tr key="total">
             <ChevronCell />
-            <NumberCell>{formatDecimal(totalBefore)}</NumberCell>
+            {comparison && (
+              <NumberCell>{formatDecimal(totalBefore)}</NumberCell>
+            )}
             <NumberCell>{formatDecimal(totalAfter)}</NumberCell>
-            {renderDelta(totalDiff)}
+            {comparison && renderDelta(totalDiff)}
             <NameCell>TOTAL</NameCell>
           </tr>
         </tfoot>