Skip to content

Commit

Permalink
[Chore]: Technical: Translate layers final changes (#1783)
Browse files Browse the repository at this point in the history 
* Renamed js files

Signed-off-by: Maksim Suslov <maksim.suslov@actionengine.com>

* Added types

Signed-off-by: Maksim Suslov <maksim.suslov@actionengine.com>
  • Loading branch information
@HeimEndyd
HeimEndyd committed May 17, 2022
1 parent e663bb1 commit 8c5e507
Show file tree
Hide file tree
Showing 28 changed files with 285 additions and 111 deletions.
5 changes: 3 additions & 2 deletions src/constants/default-settings.ts
View file
Expand Up @@ -44,6 +44,7 @@ import {
import {getHTMLMapModeTileUrl} from 'utils/utils';
import {TOOLTIP_FORMAT_TYPES} from './tooltip';
import {LAYER_TYPES} from 'layers/types';
import {RGBAColor} from 'reducers';

export const ACTION_PREFIX = '@@kepler.gl/';
export const CLOUDFRONT = 'https://d1a3f4spazzrp4.cloudfront.net/kepler.gl';
Expand Down Expand Up @@ -435,7 +436,7 @@ export const FILED_TYPE_DISPLAY = {
export const FIELD_COLORS = {
default: RED
};
export const HIGHLIGH_COLOR_3D = [255, 255, 255, 60];
export const HIGHLIGH_COLOR_3D: RGBAColor = [255, 255, 255, 60];
export const CHANNEL_SCALES = keyMirror({
color: null,
radius: null,
Expand Down Expand Up @@ -654,7 +655,7 @@ export const DEFAULT_LAYER_COLOR = {
// let user pass in default tooltip fields
export const DEFAULT_TOOLTIP_FIELDS: any[] = [];

export const NO_VALUE_COLOR: [number, number, number, number] = [0, 0, 0, 0];
export const NO_VALUE_COLOR: RGBAColor = [0, 0, 0, 0];

export const LAYER_BLENDINGS = {
additive: {
Expand Down
2 changes: 1 addition & 1 deletion src/deckgl-layers/line-layer/line-layer.ts
View file
Expand Up @@ -110,7 +110,7 @@ export default class EnhancedLineLayer extends LineLayer<
const {attributeManager} = this.state;
attributeManager.addInstanced({
instanceTargetColors: {
size: this.props.colorFormat.length,
size: this.props.colorFormat?.length,
type: GL.UNSIGNED_BYTE,
normalized: true,
transition: true,
Expand Down
36 changes: 25 additions & 11 deletions src/layers/aggregation-layer.ts
View file
Expand Up @@ -24,6 +24,7 @@ import Layer, {
LayerColorConfig,
LayerColumn,
LayerSizeConfig,
VisualChannelDescription,
VisualChannels
} from './base-layer';
import {hexToRgb} from '../utils/color-utils';
Expand All @@ -36,12 +37,17 @@ import {
} from '../constants/default-settings';
import {Datasets, Merge} from '../reducers';
import {ColorRange} from '../constants/color-ranges';
import {KeplerTable} from '../utils';

type AggregationLayerColumns = {
lat: LayerColumn;
lng: LayerColumn;
};

export type AggregationLayerData = {
index: number;
};

export const pointPosAccessor = ({lat, lng}: AggregationLayerColumns) => dc => d => [
dc.valueAt(d.index, lng.fieldIdx),
dc.valueAt(d.index, lat.fieldIdx)
Expand Down Expand Up @@ -149,17 +155,22 @@ export default class AggregationLayer extends Layer {
/**
* Get the description of a visualChannel config
* @param key
* @returns {{label: string, measure: (string|string)}}
* @returns
*/
getVisualChannelDescription(key) {
getVisualChannelDescription(key: string): VisualChannelDescription {
const channel = this.visualChannels[key];
if (!channel) return {label: '', measure: ''};
// e.g. label: Color, measure: Average of ETA
const {range, field, defaultMeasure, aggregation} = this.visualChannels[key];
const {range, field, defaultMeasure, aggregation} = channel;
const fieldConfig = this.config[field];
const label = this.visConfigSettings[range].label;
return {
label: this.visConfigSettings[range].label,
measure: fieldConfig
? `${this.config.visConfig[aggregation]} of ${fieldConfig.displayName || fieldConfig.name}`
: defaultMeasure
label: typeof label === 'function' ? label(this.config) : label,
measure:
fieldConfig && aggregation
? `${this.config.visConfig[aggregation]} of ${fieldConfig.displayName ||
fieldConfig.name}`
: defaultMeasure
};
}

Expand All @@ -171,7 +182,7 @@ export default class AggregationLayer extends Layer {
/**
* Aggregation layer handles visual channel aggregation inside deck.gl layer
*/
updateLayerVisualChannel({data, dataContainer}, channel) {
updateLayerVisualChannel({dataContainer}, channel) {
this.validateVisualChannel(channel);
}

Expand Down Expand Up @@ -227,6 +238,7 @@ export default class AggregationLayer extends Layer {
getScaleOptions(channel: string): string[] {
const visualChannel = this.visualChannels[channel];
const {field, aggregation, channelScaleType} = visualChannel;
// @ts-expect-error
const aggregationType = this.config.visConfig[aggregation];
return this.config[field]
? // scale options based on aggregation
Expand All @@ -238,7 +250,7 @@ export default class AggregationLayer extends Layer {
/**
* Aggregation layer handles visual channel aggregation inside deck.gl layer
*/
updateLayerDomain(datasets, newFilter) {
updateLayerDomain(datasets, newFilter): AggregationLayer {
return this;
}

Expand All @@ -249,8 +261,8 @@ export default class AggregationLayer extends Layer {
this.updateMeta({bounds});
}

calculateDataAttribute({dataContainer, filteredIndex}, getPosition) {
const data = [];
calculateDataAttribute({dataContainer, filteredIndex}: KeplerTable, getPosition) {
const data: AggregationLayerData[] = [];

for (let i = 0; i < filteredIndex.length; i++) {
const index = filteredIndex[i];
Expand Down Expand Up @@ -294,7 +306,9 @@ export default class AggregationLayer extends Layer {
data,
getPosition,
_filterData: filterData,
// @ts-expect-error
...(getColorValue ? {getColorValue} : {}),
// @ts-expect-error
...(getElevationValue ? {getElevationValue} : {})
};
}
Expand Down
14 changes: 11 additions & 3 deletions src/layers/arc-layer/arc-layer.ts
View file
Expand Up @@ -41,6 +41,7 @@ import {
VisConfigRange
} from '../layer-factory';
import {ColorRange} from '../../constants/color-ranges';
import KeplerTable from '../../utils/table-utils/kepler-table';

export type ArcLayerVisConfigSettings = {
opacity: VisConfigNumber;
Expand Down Expand Up @@ -100,7 +101,13 @@ export const arcColumnLabels = {
lng1: 'arc.lng1'
};

export const arcVisConfigs = {
export const arcVisConfigs: {
opacity: 'opacity';
thickness: 'thickness';
colorRange: 'colorRange';
sizeRange: 'strokeWidthRange';
targetColor: 'targetColor';
} = {
opacity: 'opacity',
thickness: 'thickness',
colorRange: 'colorRange',
Expand All @@ -117,7 +124,8 @@ export default class ArcLayer extends Layer {
super(props);

this.registerVisConfig(arcVisConfigs);
this.getPositionAccessor = dataContainer => arcPosAccessor(this.config.columns)(dataContainer);
this.getPositionAccessor = (dataContainer: DataContainerInterface) =>
arcPosAccessor(this.config.columns)(dataContainer);
}

get type() {
Expand Down Expand Up @@ -169,7 +177,7 @@ export default class ArcLayer extends Layer {

static findDefaultLayerProps({
fieldPairs = []
}): {props: {color?: RGBColor; columns: ArcLayerColumnsConfig; label: string}[]} {
}: KeplerTable): {props: {color?: RGBColor; columns: ArcLayerColumnsConfig; label: string}[]} {
if (fieldPairs.length < 2) {
return {props: []};
}
Expand Down
20 changes: 11 additions & 9 deletions src/layers/base-layer.ts
View file
Expand Up @@ -62,6 +62,7 @@ import {LayerTextLabel, ColorUI} from './layer-factory';
import {KeplerTable} from '../utils';
import {DataContainerInterface} from 'utils/table-utils/data-container-interface';
import {Field, GpuFilter} from 'utils/table-utils/kepler-table';
import React from 'react';

export type LayerColumn = {value: string | null; fieldIdx: number; optional?: boolean};

Expand All @@ -73,7 +74,8 @@ export type VisualChannelField = Field | null;
export type VisualChannelScale = keyof typeof SCALE_TYPES;

export type LayerBaseConfig = {
dataId: string | null;
// TODO: allow to become null
dataId: string;
label: string;
color: RGBColor;

Expand Down Expand Up @@ -235,16 +237,15 @@ class Layer {
});
}

get layerIcon() {
get layerIcon(): React.ElementType {
return DefaultLayerIcon;
}

get overlayType(): keyof typeof OVERLAY_TYPE {
return OVERLAY_TYPE.deckgl;
}

get type(): string {
// @ts-expect-error
get type(): string | null {
return null;
}

Expand All @@ -256,11 +257,11 @@ class Layer {
return false;
}

get requiredLayerColumns() {
get requiredLayerColumns(): string[] {
return [];
}

get optionalColumns() {
get optionalColumns(): string[] {
return [];
}

Expand Down Expand Up @@ -340,7 +341,7 @@ class Layer {
* };
* }
*/
get layerInfoModal() {
get layerInfoModal(): any {
return null;
}
/*
Expand Down Expand Up @@ -435,6 +436,7 @@ class Layer {
props: Partial<LayerBaseConfig> = {}
): LayerBaseConfig & Partial<LayerColorConfig & LayerSizeConfig> {
return {
// @ts-expect-error
dataId: props.dataId || null,
label: props.label || DEFAULT_LAYER_LABEL,
color: props.color || colorMaker.next().value,
Expand Down Expand Up @@ -1067,13 +1069,13 @@ class Layer {
const dataUpdateTriggers = this.getDataUpdateTriggers(layerDataset);
const triggerChanged = this.getChangedTriggers(dataUpdateTriggers);

if (triggerChanged.getMeta) {
if (triggerChanged && triggerChanged.getMeta) {
this.updateLayerMeta(dataContainer, getPosition);
}

let data = [];

if (!triggerChanged.getData && oldLayerData && oldLayerData.data) {
if (!(triggerChanged && triggerChanged.getData) && oldLayerData && oldLayerData.data) {
// same data
data = oldLayerData.data;
} else {
Expand Down
11 changes: 8 additions & 3 deletions src/layers/cluster-layer/cluster-layer.ts
View file
Expand Up @@ -32,7 +32,6 @@ import {
VisConfigSelection
} from '../layer-factory';
import {ColorRange} from '../../constants/color-ranges';
import {AGGREGATION_TYPES} from '../../constants/default-settings';
import {Merge} from '../../reducers';
import {VisualChannels} from '../base-layer';

Expand All @@ -54,7 +53,13 @@ export type ClusterLayerVisConfig = {

export type ClusterLayerConfig = Merge<AggregationLayerConfig, {visConfig: ClusterLayerVisConfig}>;

export const clusterVisConfigs = {
export const clusterVisConfigs: {
opacity: 'opacity';
clusterRadius: 'clusterRadius';
colorRange: 'colorRange';
radiusRange: 'clusterRadiusRange';
colorAggregation: 'colorAggregation';
} = {
opacity: 'opacity',
clusterRadius: 'clusterRadius',
colorRange: 'colorRange',
Expand Down Expand Up @@ -141,7 +146,7 @@ export default class ClusterLayer extends AggregationLayer {
// hover layer
...(hoveredObject
? [
new ScatterplotLayer({
new ScatterplotLayer<{radius: number}>({
id: `${this.id}-hovered`,
data: [hoveredObject],
getFillColor: this.config.highlightColor,
Expand Down
0 src/layers/default-layer-icon.js → src/layers/default-layer-icon.tsx
View file
File renamed without changes.
33 changes: 26 additions & 7 deletions src/layers/geojson-layer/geojson-layer.ts
View file
Expand Up @@ -51,15 +51,33 @@ import {
import {DataContainerInterface} from '../../utils/table-utils/data-container-interface';
import {Merge, RGBColor} from '../../reducers';
import {ColorRange} from '../../constants/color-ranges';
import {Feature} from 'geojson';
import {KeplerTable} from '../../utils';

const SUPPORTED_ANALYZER_TYPES = {
[DATA_TYPES.GEOMETRY]: true,
[DATA_TYPES.GEOMETRY_FROM_STRING]: true,
[DATA_TYPES.PAIR_GEOMETRY_FROM_STRING]: true
};

export const geojsonVisConfigs = {
export const geojsonVisConfigs: {
opacity: 'opacity';
strokeOpacity: VisConfigNumber;
thickness: VisConfigNumber;
strokeColor: 'strokeColor';
colorRange: 'colorRange';
strokeColorRange: 'strokeColorRange';
radius: 'radius';

sizeRange: 'strokeWidthRange';
radiusRange: 'radiusRange';
heightRange: 'elevationRange';
elevationScale: 'elevationScale';
enableElevationZoomFactor: 'enableElevationZoomFactor';
stroked: 'stroked';
filled: 'filled';
enable3d: 'enable3d';
wireframe: 'wireframe';
} = {
opacity: 'opacity',
strokeOpacity: {
...LAYER_VIS_CONFIGS.opacity,
Expand Down Expand Up @@ -166,7 +184,8 @@ export default class GeoJsonLayer extends Layer {

this.dataToFeature = [];
this.registerVisConfig(geojsonVisConfigs);
this.getPositionAccessor = dataContainer => featureAccessor(this.config.columns)(dataContainer);
this.getPositionAccessor = (dataContainer: DataContainerInterface) =>
featureAccessor(this.config.columns)(dataContainer);
}

get type() {
Expand Down Expand Up @@ -252,7 +271,7 @@ export default class GeoJsonLayer extends Layer {
};
}

static findDefaultLayerProps({label, fields = []}) {
static findDefaultLayerProps({label, fields = []}: KeplerTable) {
const geojsonColumns = fields
.filter(f => f.type === 'geojson' && SUPPORTED_ANALYZER_TYPES[f.analyzerType])
.map(f => f.name);
Expand Down Expand Up @@ -411,9 +430,9 @@ export default class GeoJsonLayer extends Layer {
rounded: true,
updateTriggers,
_subLayerProps: {
...(featureTypes.polygon ? {'polygons-stroke': opaOverwrite} : {}),
...(featureTypes.line ? {'line-strings': opaOverwrite} : {}),
...(featureTypes.point
...(featureTypes?.polygon ? {'polygons-stroke': opaOverwrite} : {}),
...(featureTypes?.line ? {'line-strings': opaOverwrite} : {}),
...(featureTypes?.point
? {
points: {
lineOpacity: visConfig.strokeOpacity
Expand Down

0 comments on commit 8c5e507

Please sign in to comment.