Skip to content

Commit

Permalink
[Chore]: Technical: Translate mapboxgl-layer (#1755)
Browse files Browse the repository at this point in the history 
* Renamed js files

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

* Fixed ts errors

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

* Added typing

Signed-off-by: Maksim Suslov <maksim.suslov@actionengine.com>
  • Loading branch information
@HeimEndyd
HeimEndyd committed Apr 4, 2022
1 parent 9b695f8 commit 1834292
Show file tree
Hide file tree
Showing 4 changed files with 73 additions and 48 deletions.
9 changes: 6 additions & 3 deletions src/layers/base-layer.ts
View file
Expand Up @@ -116,6 +116,8 @@ export type LayerWeightConfig = {
weightField: VisualChannelField;
};

export type VisualChannels = {[key: string]: VisualChannel};

export type VisualChannel = {
property: string;
field: string;
Expand Down Expand Up @@ -241,7 +243,7 @@ class Layer {
return ['label', 'opacity', 'thickness', 'isVisible', 'hidden'];
}

get visualChannels(): {[key: string]: VisualChannel} {
get visualChannels(): VisualChannels {
return {
color: {
property: 'color',
Expand Down Expand Up @@ -1007,7 +1009,8 @@ class Layer {
this.meta = {...this.meta, ...meta};
}

getDataUpdateTriggers({filteredIndex, id, allData}) {
// @ts-expect-error
getDataUpdateTriggers({filteredIndex, id, allData}: KeplerTable): any {
const {columns} = this.config;

return {
Expand Down Expand Up @@ -1310,7 +1313,7 @@ class Layer {
}, []);
}

calculateDataAttribute(keplerTable: KeplerTable, getPosition) {
calculateDataAttribute(keplerTable: KeplerTable, getPosition): any {
// implemented in subclasses
return [];
}
Expand Down
9 changes: 0 additions & 9 deletions src/layers/heatmap-layer/heatmap-layer.js
View file
Expand Up @@ -195,15 +195,6 @@ class HeatmapLayer extends MapboxGLLayer {
}
);

getGeometry(position) {
return position.every(Number.isFinite)
? {
type: 'Point',
coordinates: position
}
: null;
}

formatLayerData(datasets, oldLayerData) {
const {weightField} = this.config;
const {dataContainer} = datasets[this.config.dataId];
Expand Down
55 changes: 32 additions & 23 deletions src/layers/mapbox-utils.js → src/layers/mapbox-utils.ts
View file
Expand Up @@ -18,25 +18,23 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.

import {OVERLAY_TYPE} from './base-layer';

/** @typedef {import("geojson").FeatureCollection} FeatureCollection */
/** @typedef {import("geojson").Feature} Feature */
import Layer, {OVERLAY_TYPE} from './base-layer';
import {Feature} from 'geojson';

/**
* This function will convert layers to mapbox layers
* @param {Array<Object>} layers the layers to be converted
* @param {Array<Object>} layerData extra layer information
* @param {Array<Number>} layerOrder the order by which we should convert layers
* @param {Object} layersToRender {[id]: true | false} object whether each layer should be rendered
* @returns {Object} {[id]: layer}
* @param layers the layers to be converted
* @param layerData extra layer information
* @param layerOrder the order by which we should convert layers
* @param layersToRender {[id]: true | false} object whether each layer should be rendered
* @returns
*/
export function generateMapboxLayers(
layers = [],
layerData = [],
layerOrder = [],
layersToRender = {}
) {
layers: Layer[] = [],
layerData: any[] = [],
layerOrder: number[] = [],
layersToRender: {[key: string]: boolean} = {}
): {[key: string]: Layer} {
if (layerData.length > 0) {
return layerOrder
.slice()
Expand All @@ -63,14 +61,22 @@ export function generateMapboxLayers(
return {};
}

type newLayersType = {
[key: string]: Layer & Partial<{data: any; sourceId: any; isVisible: boolean}>;
};
type oldLayersType = {[key: string]: Layer & {data?: any}};
/**
* Update mapbox layers on the given map
* @param {Object} map
* @param {Object} newLayers Map of new mapbox layers to be displayed
* @param {Object} oldLayers Map of the old layers to be compare with the current ones to detect deleted layers
* @param map
* @param newLayers Map of new mapbox layers to be displayed
* @param oldLayers Map of the old layers to be compare with the current ones to detect deleted layers
* {layerId: sourceId}
*/
export function updateMapboxLayers(map, newLayers = {}, oldLayers = null) {
export function updateMapboxLayers(
map,
newLayers: newLayersType = {},
oldLayers: oldLayersType | null = null
) {
// delete no longer existed old layers
if (oldLayers) {
checkAndRemoveOldLayers(map, oldLayers, newLayers);
Expand All @@ -96,7 +102,7 @@ export function updateMapboxLayers(map, newLayers = {}, oldLayers = null) {
});
}

function checkAndRemoveOldLayers(map, oldLayers, newLayers) {
function checkAndRemoveOldLayers(map, oldLayers: oldLayersType, newLayers: newLayersType) {
Object.keys(oldLayers).forEach(layerId => {
if (!newLayers[layerId]) {
map.removeLayer(layerId);
Expand Down Expand Up @@ -137,10 +143,13 @@ function updateSourceData(map, sourceId, data) {
* @param getProperties {({index: number}) => any}
* @returns FeatureCollection
*/
export function geoJsonFromData(filteredIndex = [], getGeometry, getProperties = d => {}) {
const geojson = {
export function geoJsonFromData(
filteredIndex = [],
getGeometry: {({index: number}): any},
getProperties: {({index: number}): any} = d => {}
) {
const geojson: {type: string; features: Feature[]} = {
type: 'FeatureCollection',
/** @type {Feature[]} */
features: []
};

Expand Down Expand Up @@ -180,7 +189,7 @@ export function gpuFilterToMapboxFilter(gpuFilter) {
// [">=", key, value]
// ["<=", key, value]
const expressions = Object.values(filterValueUpdateTriggers).reduce(
(accu, name, i) =>
(accu: any[], name, i) =>
name
? [
...accu,
Expand Down
48 changes: 35 additions & 13 deletions src/layers/mapboxgl-layer.js → src/layers/mapboxgl-layer.ts
View file
Expand Up @@ -18,16 +18,28 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.

import Layer, {OVERLAY_TYPE} from './base-layer';
import Layer, {LayerBaseConfig, LayerColumn, OVERLAY_TYPE, VisualChannels} from './base-layer';
import {createSelector} from 'reselect';

import {geoJsonFromData, prefixGpuField, gpuFilterToMapboxFilter} from './mapbox-utils';
import KeplerTable from '../utils/table-utils/kepler-table';
import {Merge} from '../reducers';

export const mapboxRequiredColumns = ['lat', 'lng'];
type MapboxLayerGLColumns = {
lat: LayerColumn;
lng: LayerColumn;
};

export const pointColResolver = ({lat, lng}) => `${lat.fieldIdx}-${lng.fieldIdx}`;
export type MapboxLayerGLConfig = Merge<LayerBaseConfig, {columns: MapboxLayerGLColumns}>;

export const mapboxRequiredColumns: ['lat', 'lng'] = ['lat', 'lng'];

export const pointColResolver = ({lat, lng}: MapboxLayerGLColumns) =>
`${lat.fieldIdx}-${lng.fieldIdx}`;

class MapboxLayerGL extends Layer {
declare config: MapboxLayerGLConfig;

get overlayType() {
return OVERLAY_TYPE.mapboxgl;
}
Expand All @@ -36,7 +48,7 @@ class MapboxLayerGL extends Layer {
return null;
}

get isAggregated() {
get isAggregated(): true {
return true;
}

Expand All @@ -52,12 +64,13 @@ class MapboxLayerGL extends Layer {
return [];
}

get visualChannels() {
get visualChannels(): VisualChannels {
return {};
}
datasetSelector = config => config.dataId;
gpuFilterSelector = (config, datasets) => (datasets[config.dataId] || {}).gpuFilter;
columnsSelector = config => pointColResolver(config.columns);
datasetSelector = (config: MapboxLayerGLConfig) => config.dataId;
gpuFilterSelector = (config: MapboxLayerGLConfig, datasets) =>
(datasets[config.dataId] || {}).gpuFilter;
columnsSelector = (config: MapboxLayerGLConfig) => pointColResolver(config.columns);

sourceSelector = createSelector(
this.datasetSelector,
Expand All @@ -74,7 +87,7 @@ class MapboxLayerGL extends Layer {
return Array.isArray(filter) && filter.length;
}

getDataUpdateTriggers({filteredIndex, gpuFilter, id}) {
getDataUpdateTriggers({filteredIndex, gpuFilter, id}: KeplerTable): any {
const {columns} = this.config;

const visualChannelFields = Object.values(this.visualChannels).reduce(
Expand All @@ -99,7 +112,16 @@ class MapboxLayerGL extends Layer {
return updateTriggers;
}

calculateDataAttribute({dataContainer, filteredIndex, gpuFilter}, getPosition) {
getGeometry(position) {
return position.every(Number.isFinite)
? {
type: 'Point',
coordinates: position
}
: null;
}

calculateDataAttribute({dataContainer, filteredIndex, gpuFilter}: KeplerTable, getPosition) {
const getGeometry = d => this.getGeometry(getPosition(d));

const vcFields = Object.values(this.visualChannels)
Expand Down Expand Up @@ -127,14 +149,14 @@ class MapboxLayerGL extends Layer {
? d => {
const filterValue = valueAccessor(d);
return Object.values(filterValueUpdateTriggers).reduce(
(accu, name, i) => ({
(accu: any, name, i) => ({
...accu,
...(name ? {[prefixGpuField(name)]: filterValue[i]} : {})
}),
{}
);
) as any;
}
: d => ({});
: d => ({} as any);

const getProperties = d => ({
...getPropertyFromVisualChanel(d),
Expand Down

0 comments on commit 1834292

Please sign in to comment.