fix(layers): use selected vector channel for quantile options

src/layers/src/vector-tile/vector-tile-layer.ts

@@ -419,7 +419,7 @@ export default class VectorTileLayer extends AbstractTileLayer<VectorTile, Featu
     // Jenks needs the full value distribution, which tilesets don't provide.
     options = options.filter(scale => scale !== SCALE_TYPES.jenks);
 
-    const channel = this.visualChannels.strokeColor;
+    const channel = this.visualChannels[channelKey];
     const field = this.config[channel.field];
     if (
       !(
@@ -428,7 +428,7 @@ export default class VectorTileLayer extends AbstractTileLayer<VectorTile, Featu
         // If we've set the scale to quantile, we need to include it - there's a loading
         // period in which the visConfig isn't set yet, but if we don't return the right
         // scale type we lose it
-        this.config.colorScale === SCALE_TYPES.quantile
+        this.config[channel.scale] === SCALE_TYPES.quantile
       )
     ) {
       options = options.filter(scale => scale !== SCALE_TYPES.quantile);

test/browser/layer-tests/vector-tile-layer-specs.js

@@ -17,6 +17,63 @@ import {getFilterProps} from '@kepler.gl/utils';
 
 const {VectorTileLayer} = KeplerGlLayers;
 
+test('#VectorTileLayer -> quantile options follow the selected channel', t => {
+  const layer = new VectorTileLayer({id: 'quantile-options', dataId: 'tiles'});
+  const field = {name: 'value', type: 'real', filterProps: {domain: [0, 10]}};
+  const quantileField = {
+    ...field,
+    filterProps: {...field.filterProps, domainQuantiles: {quantiles: [[0, 2, 5, 8, 10]], z: [0]}}
+  };
+  layer.config.colorScale = 'quantize';
+  layer.config.strokeColorScale = 'quantize';
+  layer.config.visConfig.dynamicColor = false;
+
+  for (const fill of [null, field, quantileField]) {
+    for (const stroke of [null, field, quantileField]) {
+      layer.config.colorField = fill;
+      layer.config.strokeColorField = stroke;
+      t.equal(
+        layer.getScaleOptions('color').includes('quantile'),
+        fill === quantileField,
+        'fill quantiles depend only on fill metadata'
+      );
+      t.equal(
+        layer.getScaleOptions('strokeColor').includes('quantile'),
+        stroke === quantileField,
+        'stroke quantiles depend only on stroke metadata'
+      );
+    }
+  }
+
+  layer.config.colorField = field;
+  layer.config.strokeColorField = field;
+  for (const channel of ['color', 'strokeColor']) {
+    const other = channel === 'color' ? 'strokeColor' : 'color';
+    layer.config[`${channel}Scale`] = 'quantile';
+    t.ok(
+      layer.getScaleOptions(channel).includes('quantile'),
+      'retains the active scale while loading'
+    );
+    t.notOk(
+      layer.getScaleOptions(other).includes('quantile'),
+      'active scale does not affect the other channel'
+    );
+    layer.config[`${channel}Scale`] = 'quantize';
+  }
+  layer.config.visConfig.dynamicColor = true;
+  for (const channel of ['color', 'strokeColor']) {
+    t.ok(
+      layer.getScaleOptions(channel).includes('quantile'),
+      'dynamic color can calculate quantiles'
+    );
+    t.notOk(
+      layer.getScaleOptions(channel).includes('jenks'),
+      'Jenks remains unavailable for tiles'
+    );
+  }
+  t.end();
+});
+
 function categoricalFilterFixture() {
   const id = 'vector-categories';
   const table = new KeplerTable({info: {id, type: 'vector-tile'}, color: [0, 0, 0]});