[feat] Support custom ordinal color scale on string field in layer config (#2868)

- Support custom ordinal color scale on string field in layer config
- histogram from ordinal
- pass className to StyledLegend
- fix for color palette colorWidths undefined

Signed-off-by: Ihor Dykhta <[email protected]>

Author: igorDykhta

src/components/src/common/color-legend.tsx

@@ -336,7 +336,11 @@ function ColorLegendFactory(LegendRow: ReturnType<typeof LegendRowFactory>) {
     );
 
     return (
-      <StyledLegend disableEdit={disableEdit} isExpanded={isExpanded}>
+      <StyledLegend
+        className="styled-color-legend"
+        disableEdit={disableEdit}
+        isExpanded={isExpanded}
+      >
         {legends.map((legend, i) => (
           <LegendRow
             key={`${legend.data}-${i}`}

src/components/src/side-panel/layer-panel/color-breaks-panel.tsx

@@ -37,7 +37,9 @@ const StyledColorBreaksDisplay = styled.div.attrs({
 
 const ColorBreaksPanelWrapper = styled.div``;
 
-export const EditButton = ({onClickEdit}) => (
+type EditButtonProps = {onClickEdit: () => void};
+
+export const EditButton: React.FC<EditButtonProps> = ({onClickEdit}) => (
   <Button className="editp__button" link onClick={onClickEdit}>
     <Edit height="16px" />
     Edit
@@ -51,7 +53,7 @@ export type ColorBreaksDisplayProps = {
 
 export const ColorBreaksDisplay: React.FC<ColorBreaksDisplayProps> = ({currentBreaks, onEdit}) => {
   if (!isNumericColorBreaks(currentBreaks)) {
-    // TODO: implement display for ordinal breaks
+    // don't display color breaks for ordinal breaks, user can change it in custom breaks
     return null;
   }
   return (

src/components/src/side-panel/layer-panel/color-palette.tsx

@@ -59,7 +59,7 @@ const ColorPalette: React.FC<ColorPaletteProps> = ({
   >
     <PaletteWrapper style={{height, transform: `scale(${isReversed ? -1 : 1}, 1)`}}>
       {colors.map((color: number | string, index: number) =>
-        colorWidths ? (
+        colorWidths && colorWidths[index] ? (
           <StyledColorBlock
             key={`${color}-${index}`}
             style={{backgroundColor: String(color), width: colorWidths[index]}}

src/components/src/side-panel/layer-panel/color-scale-selector.tsx

@@ -13,6 +13,7 @@ import {
   getLayerColorScale,
   getLegendOfScale,
   histogramFromValues,
+  histogramFromOrdinal,
   histogramFromThreshold,
   getHistogramDomain,
   hasColorMap
@@ -187,8 +188,10 @@ function ColorScaleSelectorFactory(
       }
       return columnStats?.bins
         ? columnStats?.bins
+        : field?.type === ALL_FIELD_TYPES.string
+        ? histogramFromOrdinal(colorScale?.domain() || [], dataset.allIndexes, fieldValueAccessor)
         : histogramFromValues(dataset.allIndexes, HISTOGRAM_BINS, fieldValueAccessor);
-    }, [aggregatedBins, columnStats, dataset, fieldValueAccessor]);
+    }, [aggregatedBins, columnStats, dataset, fieldValueAccessor, colorScale, field?.type]);
 
     const histogramDomain = useMemo(() => {
       return getHistogramDomain({aggregatedBins, columnStats, dataset, fieldValueAccessor});
@@ -218,17 +221,22 @@ function ColorScaleSelectorFactory(
       val => {
         // highlight selected option
         if (getOptionValue(val) === SCALE_TYPES.custom) {
+          const colorMap = range.colorMap
+            ? range.colorMap
+            : colorBreaks
+            ? colorBreaksToColorMap(colorBreaks)
+            : undefined;
+          const colors =
+            field?.type === ALL_FIELD_TYPES.string
+              ? range.colors.slice(0, colorMap?.length)
+              : range.colors;
           // update custom breaks
           const customPalette: NestedPartial<ColorRange> = {
             name: 'color.customPalette',
             type: 'custom',
             category: 'Custom',
-            colors: range.colors,
-            colorMap: range.colorMap
-              ? range.colorMap
-              : colorBreaks
-              ? colorBreaksToColorMap(colorBreaks)
-              : undefined
+            colors,
+            colorMap
           };
           setColorUI({
             showColorChart: true,

src/components/src/side-panel/layer-panel/custom-palette.tsx

@@ -221,7 +221,23 @@ export const DragHandle = SortableHandle<DragHandleProps>(({className, children}
   <StyledDragHandle className={className}>{children}</StyledDragHandle>
 ));
 
-export const ColorPaletteInput = ({value, onChange, id, width, textAlign, editable}) => {
+export type ColorPaletteInputProps = {
+  value: string | number;
+  onChange: (val: unknown) => void;
+  id: string;
+  width: string;
+  textAlign: string;
+  editable: boolean;
+};
+
+export const ColorPaletteInput = ({
+  value,
+  onChange,
+  id,
+  width,
+  textAlign,
+  editable
+}: ColorPaletteInputProps) => {
   const [stateValue, setValue] = useState(value);
   const inputRef = useRef(null);
   useEffect(() => {
@@ -393,7 +409,19 @@ export const CustomPaletteInput: React.FC<CustomPaletteInputProps> = ({
             editColorMap={editColorMapValue}
             editable
           />
-        ) : null}
+        ) : (
+          colorBreaks &&
+          colorBreaks[index] && (
+            <ColorPaletteInput
+              value={colorBreaks[index].label}
+              id={`color-palette-input-${index}-left`}
+              width="auto"
+              textAlign="end"
+              editable={false}
+              onChange={v => v}
+            />
+          )
+        )}
       </div>
       <div className="custom-palette-input__right">
         {!disableAppend ? (

src/constants/src/default-settings.ts

@@ -666,7 +666,7 @@ export const linearFieldAggrScaleFunctions = {
 };
 
 export const ordinalFieldScaleFunctions = {
-  [CHANNEL_SCALES.color]: [SCALE_TYPES.ordinal],
+  [CHANNEL_SCALES.color]: [SCALE_TYPES.ordinal, SCALE_TYPES.custom],
   [CHANNEL_SCALES.radius]: [SCALE_TYPES.point],
   [CHANNEL_SCALES.size]: [SCALE_TYPES.point]
 };

src/layers/src/base-layer.ts

@@ -1027,13 +1027,22 @@ class Layer implements KeplerLayer {
     colorDomain: VisualChannelDomain,
     colorRange: ColorRange
   ): GetVisChannelScaleReturnType {
-    if (hasColorMap(colorRange) && colorScale === SCALE_TYPES.custom) {
+    if (
+      hasColorMap(colorRange) &&
+      (colorScale === SCALE_TYPES.custom || colorScale === SCALE_TYPES.ordinal)
+    ) {
       const cMap = new Map();
       colorRange.colorMap?.forEach(([k, v]) => {
         cMap.set(k, typeof v === 'string' ? hexToRgb(v) : v);
       });
 
-      const scaleType = colorScale === SCALE_TYPES.custom ? colorScale : SCALE_TYPES.ordinal;
+      // in kepler, scaleThreshold function will be used for SCALE_TYPES.custom
+      // so we adjust scaleType to SCALE_TYPES.custom to ordinal if necessary
+      const isOrdinalDomain = (colorDomain as (string | number)[]).every(
+        i => typeof i === 'string'
+      );
+      const scaleType =
+        colorScale === SCALE_TYPES.custom && !isOrdinalDomain ? colorScale : SCALE_TYPES.ordinal;
 
       const scale = getScaleFunction(scaleType, cMap.values(), cMap.keys(), false);
       scale.unknown(cMap.get(UNKNOWN_COLOR_KEY) || NO_VALUE_COLOR);

src/table/src/kepler-table.ts

@@ -496,7 +496,9 @@ class KeplerTable<F extends Field = Field> {
       case SCALE_TYPES.linear:
       case SCALE_TYPES.sqrt:
       default:
-        return getLinearDomain(filteredIndexForDomain, indexValueAccessor);
+        return field.type === ALL_FIELD_TYPES.string
+          ? getOrdinalDomain(dataContainer, valueAccessor)
+          : getLinearDomain(filteredIndexForDomain, indexValueAccessor);
     }
   }
 

src/utils/src/data-scale-utils.ts

@@ -295,7 +295,7 @@ export function getLegendOfScale({
   if (!scale || scale.byZoom) {
     return [];
   }
-  if (scaleType === SCALE_TYPES.ordinal) {
+  if (scaleType === SCALE_TYPES.ordinal || fieldType === ALL_FIELD_TYPES.string) {
     return getOrdinalLegends(scale);
   }
 
@@ -396,6 +396,13 @@ export function colorMapToColorBreaks(colorMap?: ColorMap): ColorBreak[] | null
     return null;
   }
   const colorBreaks = colorMap.map(([value, color], i) => {
+    if (typeof value === 'string') {
+      // for ordinal string value
+      return {
+        data: color,
+        label: value
+      };
+    }
     const range =
       i === 0
         ? // first

src/utils/src/index.ts

@@ -39,6 +39,7 @@ export {
   histogramFromThreshold,
   histogramFromValues,
   histogramFromDomain,
+  histogramFromOrdinal,
   runGpuFilterForPlot,
   updateTimeFilterPlotType
 } from './plot';

src/utils/src/plot.ts

@@ -109,6 +109,30 @@ export function histogramFromValues(
     });
 }
 
+export function histogramFromOrdinal(
+  domain: [string],
+  values: (Millisecond | null | number)[],
+  valueAccessor?: (d: unknown) => string
+): Bin[] {
+  // @ts-expect-error to typed to expect strings
+  const getBins = d3Histogram().thresholds(domain);
+  if (valueAccessor) {
+    // @ts-expect-error to typed to expect strings
+    getBins.value(valueAccessor);
+  }
+
+  // @ts-expect-error null values aren't expected
+  const bins = getBins(values);
+
+  // @ts-ignore d3-array types doesn't match
+  return bins.map(bin => ({
+    count: bin.length,
+    indexes: bin,
+    x0: bin.x0,
+    x1: bin.x0
+  }));
+}
+
 /**
  *
  * @param domain

test/browser/components/side-panel/channel-by-value-selctor-test.js

@@ -98,8 +98,8 @@ test('Components -> ChannelByValueSelector -> ColorScaleSelector -> disabled', t
   t.equal(wrapper.find(ColorScaleSelector).length, 1, 'Should render 1 ColorScaleSelector');
   t.equal(
     wrapper.find(ColorScaleSelector).at(0).props().disabled,
-    true,
-    'Should disabled color scale select if only 1 option'
+    false,
+    'Should enable ordinal and custom color scale select'
   );
 
   t.equal(