[feat] histogram and point layer fixes (#2852)

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>
keplergl · Dec 23, 2024 · 3a4bf66 · 3a4bf66
1 parent f9c52e5
commit 3a4bf66
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 17 deletions.
diff --git a/src/components/src/side-panel/layer-panel/color-breaks-panel.tsx b/src/components/src/side-panel/layer-panel/color-breaks-panel.tsx
@@ -143,19 +143,20 @@ function ColorBreaksPanelFactory(
           colors: newColors
         };
 
+        // update custom pallette editor
         if (!isEditingCustomBreaks) {
-          // set scale to custom and enable custom pallette editing
           setColorUI({
             colorRangeConfig: {
               customBreaks: true
             },
             customPalette: newCustomPalette
           });
-
-          onScaleChange(SCALE_TYPES.custom, newCustomPalette);
         } else {
           setColorUI({customPalette: newCustomPalette});
         }
+
+        // trigger the map to re-render using newCustomPalette
+        onScaleChange(SCALE_TYPES.custom, newCustomPalette);
       },
       [setColorUI, customPalette, isEditingCustomBreaks, onScaleChange]
     );

diff --git a/src/components/src/side-panel/layer-panel/color-scale-selector.tsx b/src/components/src/side-panel/layer-panel/color-scale-selector.tsx
@@ -7,8 +7,8 @@ import styled from 'styled-components';
 import {Accessor, DropdownList, LazyTippy, Typeahead} from '@kepler.gl/components';
 import {ColorRange, SCALE_TYPES} from '@kepler.gl/constants';
 import {Layer, VisualChannelDomain} from '@kepler.gl/layers';
-import {ColorUI, Field} from '@kepler.gl/types';
-import {getLayerColorScale, getLegendOfScale, hasColorMap} from '@kepler.gl/utils';
+import {ColorUI, Field, NestedPartial} from '@kepler.gl/types';
+import {colorBreaksToColorMap, getLayerColorScale, getLegendOfScale, hasColorMap} from '@kepler.gl/utils';
 import ColorBreaksPanelFactory, {ColorBreaksPanelProps} from './color-breaks-panel';
 import {SetColorUIFunc} from './custom-palette';
 import DropdownSelect from '../../common/item-selector/dropdown-select';
@@ -150,14 +150,34 @@ function ColorScaleSelectorFactory(
         // highlight selected option
         if (getOptionValue(val) === SCALE_TYPES.custom) {
           // 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
+          };
           setColorUI({
             showColorChart: true,
             colorRangeConfig: {
               customBreaks: true
-            }
+            },
+            customPalette
           });
-          onSelect(SCALE_TYPES.custom);
+          onSelect(SCALE_TYPES.custom, customPalette);
         } else {
+          // not custom
+          if (isEditingColorBreaks) {
+            setColorUI({
+              colorRangeConfig: {
+                customBreaks: false
+              }
+            });
+          }
           if (hasColorMap(range)) {
             // remove custom breaks
             // eslint-disable-next-line no-unused-vars
@@ -166,17 +186,9 @@ function ColorScaleSelectorFactory(
           } else {
             onSelect(getOptionValue(val));
           }
-          // if current is not custom
-          if (isEditingColorBreaks) {
-            setColorUI({
-              colorRangeConfig: {
-                customBreaks: false
-              }
-            });
-          }
         }
       },
-      [setColorUI, onSelect, range, getOptionValue, isEditingColorBreaks]
+      [setColorUI, onSelect, range, getOptionValue, isEditingColorBreaks, colorBreaks]
     );
 
     const onApply = useCallback(() => {

diff --git a/test/browser/components/side-panel/channel-by-value-selctor-test.js b/test/browser/components/side-panel/channel-by-value-selctor-test.js
@@ -307,10 +307,39 @@ test('Components -> ChannelByValueSelector -> ColorScaleSelector -> ColorBreakDi
       showColorChart: true,
       colorRangeConfig: {
         customBreaks: true
+      },
+      customPalette: {
+        name: 'color.customPalette',
+        type: 'custom',
+        category: 'Custom',
+        colors: ['#00939C', '#6BB5B9', '#AAD7D9', '#E6FAFA'],
+        colorMap: [
+          [3032, '#00939C'],
+          [6063, '#6BB5B9'],
+          [9093, '#AAD7D9'],
+          [null, '#E6FAFA']
+        ]
+      }
+    }
+  ];
+  const expectedArgs1 = [
+    {colorScale: 'custom'},
+    'color',
+    {
+      colorRange: {
+        name: 'color.customPalette',
+        type: 'custom',
+        category: 'Custom',
+        colors: ['#00939C', '#6BB5B9', '#AAD7D9', '#E6FAFA'],
+        colorMap: [
+          [3032, '#00939C'],
+          [6063, '#6BB5B9'],
+          [9093, '#AAD7D9'],
+          [null, '#E6FAFA']
+        ]
       }
     }
   ];
-  const expectedArgs1 = [{colorScale: 'custom'}, 'color', undefined];
   t.deepEqual(setColorUI.args[0], expectedArgs, 'should set customBreaks to true');
 
   t.ok(updateLayerVisualChannelConfig.calledOnce, 'should call updateLayerVisualChannelConfig');