feat: Deephaven UI table databar support (#2190) (#2340)

Changes needed for dh.ui databars

- Support for extracting data in viewport columns not listed in
`table.columns`. This allows us to hide the aggregation columns for
databars from the user but still get their data. If a column is not in
`table.columns` then it will be added to viewport data via its name
instead of model index
- Improved gradient rendering to be much more efficient
- Fixed opacity being ignored if a gradient was used
- Fixed some of the databar spacing (was 1px off center)
- Modified `colorValueStyle` to have overrides so if we pass a string we
don't get back `string | undefined` when we know we'll get a string
- Modified `resolveCssVariablesInRecord` to always resolve CSS colors
regardless of if they contain a variable

Co-authored-by: Matthew Runyon <[email protected]>

packages/components/src/theme/ThemeUtils.test.ts

@@ -558,9 +558,10 @@ describe.each([undefined, document.createElement('div')])(
         bbb: 'bbb',
       };
 
+      jest.spyOn(window.CSS, 'supports').mockReturnValue(false);
+
       const actual = resolveCssVariablesInRecord(given, targetElement);
 
-      expect(computedStyle.getPropertyValue).not.toHaveBeenCalled();
       expect(ColorUtils.normalizeCssColor).not.toHaveBeenCalled();
       expect(actual).toEqual(given);
     });

packages/components/src/theme/ThemeUtils.ts

@@ -320,21 +320,19 @@ export function resolveCssVariablesInRecord<T extends Record<string, string>>(
 
   const result = {} as T;
   recordArray.forEach(([key, value], i) => {
-    // only resolve if it contains a css var expression
-    if (!value.includes(CSS_VAR_EXPRESSION_PREFIX)) {
-      (result as Record<string, string>)[key] = value;
-      return;
-    }
     // resolves any variables in the expression
     let resolved = tempPropElComputedStyle.getPropertyValue(
       `--${TMP_CSS_PROP_PREFIX}-${i}`
     );
+
+    const containsCssVar = value.includes(CSS_VAR_EXPRESSION_PREFIX);
+    const isColor = CSS.supports('color', resolved);
+
     if (
-      // skip if resolved is already hex
-      !/^#[0-9A-F]{6}[0-9a-f]{0,2}$/i.test(resolved) &&
-      // only try to normalize things that are valid colors
+      // only try to normalize non-hex strings that are valid colors
       // otherwise non-colors will be made #00000000
-      CSS.supports('color', resolved)
+      isColor &&
+      !/^#[0-9A-F]{6}[0-9a-f]{0,2}$/i.test(resolved)
     ) {
       // getting the computed background color is necessary
       // because resolved can still contain a color-mix() function
@@ -344,7 +342,8 @@ export function resolveCssVariablesInRecord<T extends Record<string, string>>(
       // convert color to hex, which is what monaco and plotly require
       resolved = ColorUtils.normalizeCssColor(color, isAlphaOptional);
     }
-    (result as Record<string, string>)[key] = resolved;
+    (result as Record<string, string>)[key] =
+      containsCssVar || isColor ? resolved : value;
   });
 
   // Remove the temporary div

packages/components/src/theme/colorUtils.ts

@@ -246,6 +246,8 @@ export function isDHColorValue(value: string): value is DHColorValue {
  * ex. colorValueStyle('red') => 'red'
  * ex. colorValueStyle('#F00') => '#F00'
  */
+export function colorValueStyle(value: string): string;
+export function colorValueStyle(value: string | undefined): string | undefined;
 export function colorValueStyle(value: string | undefined): string | undefined {
   if (value != null && isDHColorValue(value)) {
     return `var(--dh-color-${value})`;