feat(editor): Tan example highlights using sequential color (#1149)

Author: dvdkouril

editor/example/json-spec/spatial-layout.ts

@@ -246,7 +246,10 @@ export const EX_SPEC_SPATIAL_TAN_COMP: GoslingSpec = {
                 },
                 {
                     color: {
-                        value: 'darkslateblue'
+                        field: 'coord',
+                        type: 'quantitative',
+                        domain: [900000, 249200000],
+                        range: "spectral",
                     },
                     size: {
                         value: 0.02,
@@ -287,7 +290,10 @@ export const EX_SPEC_SPATIAL_TAN_COMP: GoslingSpec = {
                 },
                 {
                     color: {
-                        value: 'darkslateblue'
+                        field: 'coord',
+                        type: 'quantitative',
+                        domain: [900000, 249300000],
+                        range: "spectral",
                     },
                     size: {
                         value: 0.02,

editor/example/thumbnails/SPATIAL_TAN.png

@@ -191,15 +191,15 @@ function handleColorField(color?: ChannelValue | Color | string, arrowIpc: Uint8
         } else if (color.type === 'quantitative') {
             const values = fetchValuesFromColumn(color.field, arrowIpc);
             console.log('values', values);
-            const [minVal, maxVal] = findMinAndMaxOfColumn(values);
+            const [minVal, maxVal] = color.domain ? [color.domain[0], color.domain[1]] : findMinAndMaxOfColumn(values);
             console.log(`minVal = ${minVal}, maxVal = ${maxVal}`);
+            const colScale = color.range ?? 'viridis';
             const colorConfig = {
                 //values: values,
                 values: [...values],
                 min: minVal,
                 max: maxVal,
-                colorScale: 'viridis'
-                //colorScale: "greens",
+                colorScale: colScale
             };
             return colorConfig;
         } else {