merge master

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

Author: igorDykhta

bindings/kepler.gl-jupyter/js/yarn.lock

@@ -8382,8 +8382,8 @@ __metadata:
   linkType: hard
 
 "elliptic@npm:^6.5.3, elliptic@npm:^6.5.5":
-  version: 6.5.7
-  resolution: "elliptic@npm:6.5.7"
+  version: 6.6.1
+  resolution: "elliptic@npm:6.6.1"
   dependencies:
     bn.js: "npm:^4.11.9"
     brorand: "npm:^1.1.0"
@@ -8392,7 +8392,7 @@ __metadata:
     inherits: "npm:^2.0.4"
     minimalistic-assert: "npm:^1.0.1"
     minimalistic-crypto-utils: "npm:^1.0.1"
-  checksum: 10c0/799959b6c54ea3564e8961f35abdf8c77e37617f3051614b05ab1fb6a04ddb65bd1caa75ed1bae375b15dda312a0f79fed26ebe76ecf05c5a7af244152a601b8
+  checksum: 10c0/8b24ef782eec8b472053793ea1e91ae6bee41afffdfcb78a81c0a53b191e715cbe1292aa07165958a9bbe675bd0955142560b1a007ffce7d6c765bcaf951a867
   languageName: node
   linkType: hard
 

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

@@ -16,7 +16,7 @@ import {Reset} from './icons';
 import {InlineInput} from './styled-components';
 
 const ROW_H = 15;
-const GAP = 4;
+const GAP = 2;
 const RECT_W = 20;
 
 const stopClickPropagation = e => e.stopPropagation();
@@ -224,15 +224,15 @@ function overrideByCustomLegend({colorLegends, currentLegends}: OverrideByCustom
 }
 
 export function useLayerColorLegends(
-  layer,
-  scaleType,
-  domain,
-  range,
-  isFixed,
-  fieldType,
-  labelFormat,
-  mapState
-) {
+  layer: ColorLegendProps['layer'],
+  scaleType: ColorLegendProps['scaleType'],
+  domain: ColorLegendProps['domain'],
+  range: ColorLegendProps['range'],
+  isFixed: ColorLegendProps['isFixed'],
+  fieldType: ColorLegendProps['fieldType'],
+  labelFormat: ColorLegendProps['labelFormat'],
+  mapState: ColorLegendProps['mapState']
+): Legend[] {
   const scale = useMemo(
     () => getLayerColorScale({range, domain, scaleType, isFixed, layer}),
     [range, domain, scaleType, isFixed, layer]
@@ -260,7 +260,7 @@ export function useLayerColorLegends(
   return LegendsWithCustomLegends;
 }
 
-type ColorLegendProps = {
+export type ColorLegendProps = {
   layer: Layer;
   scaleType: string;
   domain: number[] | string[];
@@ -274,6 +274,12 @@ type ColorLegendProps = {
   onUpdateColorLegend?: (colorLegends: {[key: HexColor]: string}) => void;
 };
 
+export type Legend = {
+  data: string;
+  label: string;
+  override?: boolean;
+};
+
 ColorLegendFactory.deps = [LegendRowFactory];
 function ColorLegendFactory(LegendRow: ReturnType<typeof LegendRowFactory>) {
   const ColorLegend: React.FC<ColorLegendProps> = ({

src/components/src/index.ts

@@ -369,6 +369,7 @@ export type {
   LayerTypeListItemType
 } from './side-panel/layer-panel/layer-type-list-item';
 export type {SingleColorPaletteProps} from './side-panel/layer-panel/single-color-palette';
+export type {SupportedColumnModeConfig} from './side-panel/layer-panel/layer-column-mode-config';
 export type {MapManagerProps} from './side-panel/map-manager';
 export type {LayerGroupColorPickerProps} from './side-panel/map-style-panel/map-layer-group-color-picker';
 export type {LayerGroupSelectorProps} from './side-panel/map-style-panel/map-layer-selector';

src/components/src/map/layer-hover-info.tsx

@@ -3,18 +3,22 @@
 
 import React, {useMemo} from 'react';
 import styled from 'styled-components';
-import {TooltipField} from '@kepler.gl/types';
+import {CompareType, Field, Merge, TooltipField} from '@kepler.gl/types';
 import {CenterFlexbox} from '../common/styled-components';
 import {Layers} from '../common/icons';
 import PropTypes from 'prop-types';
 import {notNullorUndefined} from '@kepler.gl/common-utils';
+import {DataRow} from '@kepler.gl/utils';
 import {Layer} from '@kepler.gl/layers';
 import {
   AggregationLayerHoverData,
+  LayerHoverProp,
   getTooltipDisplayDeltaValue,
   getTooltipDisplayValue
 } from '@kepler.gl/reducers';
 import {useIntl} from 'react-intl';
+import {VisState} from '@kepler.gl/schemas';
+import {capitalizeFirstLetter} from '@kepler.gl/utils';
 
 export const StyledLayerName = styled(CenterFlexbox)`
   color: ${props => props.theme.textColorHl};
@@ -98,36 +102,55 @@ const Row: React.FC<RowProps> = ({name, value, deltaValue, url}) => {
   );
 };
 
-const EntryInfo = ({fieldsToShow, fields, data, primaryData, compareType}) => (
+export type EntryInfoProps = Merge<LayerHoverProp, {fieldsToShow: TooltipField[]}>;
+
+const EntryInfo: React.FC<EntryInfoProps> = ({fieldsToShow, ...props}) => (
   <tbody>
     {fieldsToShow.map(item => (
-      <EntryInfoRow
-        key={item.name}
-        item={item}
-        fields={fields}
-        data={data}
-        primaryData={primaryData}
-        compareType={compareType}
-      />
+      <EntryInfoRow key={item.name} item={item} {...props} />
     ))}
   </tbody>
 );
 
-const EntryInfoRow = ({item, fields, data, primaryData, compareType}) => {
+export type EntryInfoRowProps = {
+  data: LayerHoverProp['data'];
+  fields: Field[];
+  layer: Layer;
+  primaryData?: LayerHoverProp['primaryData'];
+  compareType?: CompareType;
+  currentTime?: VisState['animationConfig']['currentTime'];
+  item: TooltipField;
+};
+
+const EntryInfoRow: React.FC<EntryInfoRowProps> = ({
+  layer,
+  item,
+  fields,
+  data,
+  primaryData,
+  compareType,
+  currentTime
+}) => {
   const fieldIdx = fields.findIndex(f => f.name === item.name);
   if (fieldIdx < 0) {
     return null;
   }
   const field = fields[fieldIdx];
-  const value = data.valueAt(fieldIdx);
+  const fieldValueAccessor = layer.accessVSFieldValue(field, currentTime);
+  const value = fieldValueAccessor(field, data instanceof DataRow ? {index: data._rowIndex} : data);
+  const primaryValue = primaryData
+    ? fieldValueAccessor(
+        field,
+        primaryData instanceof DataRow ? {index: primaryData._rowIndex} : primaryData
+      )
+    : null;
   const displayValue = getTooltipDisplayValue({item, field, value});
 
   const displayDeltaValue = primaryData
     ? getTooltipDisplayDeltaValue({
         field,
-        data,
-        fieldIdx,
-        primaryData,
+        value,
+        primaryValue,
         compareType
       })
     : null;
@@ -169,6 +192,22 @@ const CellInfo = ({
     return null;
   }, [fieldsToShow, sizeField, layer, data.elevationValue]);
 
+  const aggregatedData = useMemo(() => {
+    if (data.aggregatedData && fieldsToShow) {
+      return fieldsToShow.reduce((acc, field) => {
+        const dataForField = data.aggregatedData?.[field.name];
+        if (dataForField?.measure && field.name !== colorField?.name) {
+          acc.push({
+            name: `${capitalizeFirstLetter(dataForField.measure)} of ${field.name}`,
+            value: dataForField.value
+          });
+        }
+        return acc;
+      }, [] as {name: string; value?: string}[]);
+    }
+    return [];
+  }, [data.aggregatedData, fieldsToShow, colorField?.name]);
+
   const colorMeasure = layer.getVisualChannelDescription('color').measure;
   const sizeMeasure = layer.getVisualChannelDescription('size').measure;
   return (
@@ -180,6 +219,9 @@ const CellInfo = ({
       {sizeField && layer.visualChannels.size && sizeMeasure ? (
         <Row name={sizeMeasure} key="size" value={elevationValue || 'N/A'} />
       ) : null}
+      {aggregatedData.map((dataForField, idx) => (
+        <Row name={dataForField.name} key={`data_${idx}`} value={dataForField.value || 'N/A'} />
+      ))}
     </tbody>
   );
 };

src/components/src/map/map-legend.tsx

@@ -118,6 +118,7 @@ export type LayerColorLegendProps = {
   onLayerVisConfigChange?: (oldLayer: Layer, newVisConfig: Partial<LayerVisConfig>) => void;
   layer: Layer;
   disableEdit?: boolean;
+  mapState?: MapState;
 };
 
 LayerColorLegendFactory.deps = [ColorLegendFactory, SingleColorLegendFactory];
@@ -131,11 +132,14 @@ export function LayerColorLegendFactory(
     layer,
     colorChannel,
     disableEdit,
-    onLayerVisConfigChange
+    onLayerVisConfigChange,
+    mapState
   }) => {
     const enableColorBy = description.measure;
-    const {scale, field, domain, range, property} = colorChannel;
+    const {scale, field, domain, range, property, fixed} = colorChannel;
     const [colorScale, colorField, colorDomain] = [scale, field, domain].map(k => config[k]);
+    const isFixed = fixed && config.visConfig[fixed];
+
     const colorRange = config.visConfig[range];
     const onUpdateColorLegend = useCallback(
       colorLegends => {
@@ -166,6 +170,8 @@ export function LayerColorLegendFactory(
                   range={colorRange}
                   onUpdateColorLegend={onUpdateColorLegend}
                   disableEdit={disableEdit}
+                  isFixed={isFixed}
+                  mapState={mapState}
                 />
               ) : (
                 <SingleColorLegend
@@ -304,6 +310,7 @@ export function LayerLegendContentFactory(
             description={layer.getVisualChannelDescription(colorChannel.key)}
             layer={layer}
             disableEdit={disableEdit}
+            mapState={mapState}
             onLayerVisConfigChange={onLayerVisConfigChange}
           />
         ))}

src/components/src/side-panel/layer-panel/layer-column-mode-config.tsx

@@ -79,7 +79,7 @@ const ConfigPanesContainer = styled.div`
 interface FieldOption extends MinimalField {
   fieldIdx: number;
 }
-type ColumnModeConfig = {
+export type SupportedColumnModeConfig = {
   key: string;
   label: string;
   columns: LayerColumns;
@@ -93,8 +93,8 @@ export type ColumnModeConfigProps = {
     mode: {key: string; label: string; columns: any},
     selected: boolean
   ) => JSX.Element;
-  selectColumnMode: (mode: ColumnModeConfig) => void;
-  getHelpHandler?: (mode: ColumnModeConfig) => (() => void) | null;
+  selectColumnMode: (mode: SupportedColumnModeConfig) => void;
+  getHelpHandler?: (mode: SupportedColumnModeConfig) => (() => void) | null;
 };
 
 ColumnModeConfigFactory.deps = [PanelHeaderActionFactory];

src/layers/src/aggregation-layer.ts

@@ -10,15 +10,15 @@ import Layer, {
   VisualChannelDescription,
   VisualChannels
 } from './base-layer';
-import {hexToRgb, aggregate} from '@kepler.gl/utils';
+import {hexToRgb, aggregate, DataContainerInterface} from '@kepler.gl/utils';
 import {
   HIGHLIGH_COLOR_3D,
   CHANNEL_SCALES,
   FIELD_OPTS,
   DEFAULT_AGGREGATION,
   ColorRange
 } from '@kepler.gl/constants';
-import {Merge, LayerColumn} from '@kepler.gl/types';
+import {Field, LayerColumn, Merge} from '@kepler.gl/types';
 import {KeplerTable, Datasets} from '@kepler.gl/table';
 
 type AggregationLayerColumns = {
@@ -171,9 +171,22 @@ export default class AggregationLayer extends Layer {
     };
   }
 
-  getHoverData(object) {
+  getHoverData(object: any, dataContainer: DataContainerInterface, fields: Field[]): any {
+    if (!object) return object;
+    const measure = this.config.visConfig.colorAggregation;
+    // aggregate all fields for the hovered group
+    const aggregatedData = fields.reduce((accu, field) => {
+      accu[field.name] = {
+        measure,
+        value: aggregate(object.points, measure, (d: {index: number}) => {
+          return dataContainer.valueAt(d.index, field.fieldIdx);
+        })
+      };
+      return accu;
+    }, {});
+
     // return aggregated object
-    return object;
+    return {aggregatedData, ...object};
   }
 
   getFilteredItemCount() {

src/layers/src/arc-layer/arc-layer.ts

@@ -2,6 +2,7 @@
 // Copyright contributors to the kepler.gl project
 
 import * as arrow from 'apache-arrow';
+import {h3ToGeo} from 'h3-js';
 
 import Layer, {
   LayerBaseConfig,
@@ -14,7 +15,6 @@ import {BrushingExtension} from '@deck.gl/extensions';
 import {GeoArrowArcLayer} from '@kepler.gl/deckgl-arrow-layers';
 import {FilterArrowExtension} from '@kepler.gl/deckgl-layers';
 import {ArcLayer as DeckArcLayer} from '@deck.gl/layers';
-import {h3ToGeo} from 'h3-js';
 
 import {hexToRgb, DataContainerInterface, ArrowDataContainer} from '@kepler.gl/utils';
 import ArcLayerIcon from './arc-layer-icon';