Merge pull request #3823 from asgerf/h/colorize-delta-text

Colorize delta text instead of icons, and default to using absolute delta

Author: tausbn

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

@@ -98,28 +98,13 @@ function renderAbsoluteValue(x: PredicateInfo, metric: Metric) {
   }
 }
 
-const DeltaPositive = styled(Codicon)`
-  color: var(--vscode-problemsErrorIcon-foreground);
-`;
-
-const DeltaNegative = styled(Codicon)`
-  color: var(--vscode-problemsInfoIcon-foreground);
-`;
-
 function renderDelta(x: number, unit?: string) {
   const sign = x > 0 ? "+" : "";
-  const symbol =
-    x > 0 ? (
-      <DeltaPositive name="triangle-up" />
-    ) : (
-      <DeltaNegative name="triangle-down" />
-    );
   return (
-    <NumberCell>
+    <NumberCell className={x > 0 ? "bad-value" : x < 0 ? "good-value" : ""}>
       {sign}
       {formatDecimal(x)}
       {renderUnit(unit)}
-      {symbol}
     </NumberCell>
   );
 }
@@ -154,6 +139,19 @@ const NameCell = styled.td``;
 const NumberCell = styled.td`
   text-align: right;
   width: 10em !important;
+
+  &.bad-value {
+    color: var(--vscode-problemsErrorIcon-foreground);
+    tr.expanded & {
+      color: inherit;
+    }
+  }
+  &.good-value {
+    color: var(--vscode-problemsInfoIcon-foreground);
+    tr.expanded & {
+      color: inherit;
+    }
+  }
 `;
 
 const AbsentNumberCell = styled.td`
@@ -385,7 +383,7 @@ function ComparePerformanceWithData(props: {
 
   const [hideCacheHits, setHideCacheHits] = useState(false);
 
-  const [sortOrder, setSortOrder] = useState<"delta" | "absDelta">("delta");
+  const [sortOrder, setSortOrder] = useState<"delta" | "absDelta">("absDelta");
 
   const [metric, setMetric] = useState<Metric>(metrics.tuples);