vis-state.md

Table of Contents

• visStateUpdaters
  • addFilterUpdater
  • addLayerUpdater
  • enlargeFilterUpdater
  • INITIAL_VIS_STATE
  • interactionConfigChangeUpdater
  • layerClickUpdater
  • layerHoverUpdater
  • layerTypeChangeUpdater
  • layerVisConfigChangeUpdater
  • layerVisualChannelChangeUpdater
  • loadFilesErrUpdater
  • loadFilesUpdater
  • mapClickUpdater
  • receiveMapConfigUpdater
  • removeDatasetUpdater
  • removeFilterUpdater
  • removeLayerUpdater
  • reorderLayerUpdater
  • resetMapConfigUpdater
  • setFilterPlotUpdater
  • setFilterUpdater
  • showDatasetTableUpdater
  • toggleFilterAnimationUpdater
  • toggleLayerForMapUpdater
  • toggleSplitMapUpdater
  • updateAnimationTimeUpdater
  • updateFilterAnimationSpeedUpdater
  • updateLayerAnimationSpeedUpdater
  • updateLayerBlendingUpdater
  • updateVisDataUpdater

visStateUpdaters

Updaters for visState reducer. Can be used in your root reducer to directly modify kepler.gl's state. Read more about Using updaters

Examples

import keplerGlReducer, {visStateUpdaters} from 'kepler.gl/reducers';
// Root Reducer
const reducers = combineReducers({
 keplerGl: keplerGlReducer,
 app: appReducer
});

const composedReducer = (state, action) => {
 switch (action.type) {
   case 'CLICK_BUTTON':
     return {
       ...state,
       keplerGl: {
         ...state.keplerGl,
         foo: {
            ...state.keplerGl.foo,
            visState: visStateUpdaters.enlargeFilterUpdater(
              state.keplerGl.foo.visState,
              {idx: 0}
            )
         }
       }
     };
 }
 return reducers(state, action);
};

export default composedReducer;

addFilterUpdater

Add a new filter

• Action: addFilter

Parameters

• state Object visState
• action Object action
  • action.dataId string dataset id this new filter is associated with

Returns Object nextState

addLayerUpdater

Add a new layer

• Action: addLayer

Parameters

• state Object visState
• action Object action
  • action.props Object new layer props

Returns Object nextState

enlargeFilterUpdater

Show larger time filter at bottom for time playback (apply to time filter only)

• Action: enlargeFilter

Parameters

• state Object visState
• action Object action
  • action.idx Number index of filter to enlarge

Returns Object nextState

INITIAL_VIS_STATE

Default initial visState

Type: Object

Properties

• layers Array
• layerData Array
• layerToBeMerged Array
• layerOrder Array
• filters Array
• filterToBeMerged Array
• datasets Array
• editingDataset string
• interactionConfig Object
• interactionToBeMerged Object
• layerBlending string
• hoverInfo Object
• clicked Object
• mousePos Object
• splitMaps Array a list of objects of layer availabilities and visibilities for each map
• layerClasses Object
• animationConfig Object
• editor Object

interactionConfigChangeUpdater

Update interactionConfig

• Action: interactionConfigChange

Parameters

• state Object visState
• action Object action
  • action.config Object new config as key value map: {tooltip: {enabled: true}}

Returns Object nextState

layerClickUpdater

Trigger layer click event with clicked object

• Action: onLayerClick

Parameters

• state Object visState
• action Object action
  • action.info Object Object clicked, returned by deck.gl

Returns Object nextState

layerHoverUpdater

Trigger layer hover event with hovered object

• Action: onLayerHover

Parameters

• state Object visState
• action Object action
  • action.info Object Object hovered, returned by deck.gl

Returns Object nextState

layerTypeChangeUpdater

Update layer type. Previews layer config will be copied if applicable.

• Action: layerTypeChange

Parameters

• state Object visState
• action Object action
  • action.oldLayer Object layer to be updated
  • action.newType string new type

Returns Object nextState

layerVisConfigChangeUpdater

Update layer visConfig

• Action: layerVisConfigChange

Parameters

• state Object visState
• action Object action
  • action.oldLayer Object layer to be updated
  • action.newVisConfig Object new visConfig as a key value map: e.g. {opacity: 0.8}

Returns Object nextState

layerVisualChannelChangeUpdater

Update layer visual channel

• Action: layerVisualChannelConfigChange

Parameters

• state Object visState
• action Object action
  • action.oldLayer Object layer to be updated
  • action.newConfig Object new visual channel config
  • action.channel string channel to be updated

Returns Object nextState

loadFilesErrUpdater

Trigger loading file error

• Action: loadFilesErr

Parameters

• state Object visState
• action Object action
  • action.error any

Returns Object nextState

loadFilesUpdater

Trigger file loading dispatch addDataToMap if succeed, or loadFilesErr if failed

• Action: loadFiles

Parameters

• state Object visState
• action Object action
  • action.files Array<Object> array of fileblob

Returns Object nextState

mapClickUpdater

Trigger map click event, unselect clicked object

• Action: onMapClick

Parameters

• state Object visState

Returns Object nextState

receiveMapConfigUpdater

Propagate visState reducer with a new configuration. Current config will be override.

• Action: receiveMapConfig

Parameters

• state Object visState
• action Object action
  • action.payload Object map config to be propagated
    • action.payload.config Object map config to be propagated
    • action.payload.option Object {keepExistingConfig: true | false}
  • action.payload.config (optional, default {})
  • action.payload.options (optional, default {})

Returns Object nextState

removeDatasetUpdater

Remove a dataset and all layers, filters, tooltip configs that based on it

• Action: removeDataset

Parameters

• state Object visState
• action Object action
  • action.key string dataset id

Returns Object nextState

removeFilterUpdater

Remove a filter

• Action: removeFilter

Parameters

• state Object visState
• action Object action
  • action.idx Number index of filter to b e removed

Returns Object nextState

removeLayerUpdater

remove layer

• Action: removeLayer

Parameters

• state Object visState
• action Object action
  • action.idx Number index of layer to b e removed

Returns Object nextState

reorderLayerUpdater

Reorder layer

• Action: reorderLayer

Parameters

• state Object visState
• action Object action
  • action.order Array<Number> an array of layer indexes

Returns Object nextState

resetMapConfigUpdater

reset visState to initial State

• Action: resetMapConfig

Parameters

• state Object visState

Returns Object nextState

setFilterPlotUpdater

Set the property of a filter plot

• Action: setFilterPlot

Parameters

• state Object visState
• action Object action
  • action.idx Number
  • action.newProp Object key value mapping of new prop {yAxis: 'histogram'}

Returns Object nextState

setFilterUpdater

Update filter property

• Action: setFilter

Parameters

• state Object visState
• action Object action
  • action.idx Number idx of filter to be updated
  • action.prop string prop of filter, e,g, dataId, name, value
  • action.value any new value
• datasetId string used when updating a prop (dataId, name) that can be linked to multiple datasets

Returns Object nextState

showDatasetTableUpdater

Display dataset table in a modal

• Action: showDatasetTable

Parameters

• state Object visState
• action Object action
  • action.dataId string dataset id to show in table

Returns Object nextState

toggleFilterAnimationUpdater

Start and end filter animation

• Action: toggleFilterAnimation

Parameters

• state Object visState
• action Object action
  • action.idx Number idx of filter

Returns Object nextState

toggleLayerForMapUpdater

Toggle visibility of a layer in a split map

• Action: toggleLayerForMap

Parameters

• state Object
• action Object
  • action.mapIndex Number index of the split map
  • action.layerId string id of the layer

Returns Object nextState

toggleSplitMapUpdater

Toggle visibility of a layer for a split map

• Action: toggleSplitMap

Parameters

• state Object visState
• action Object action
  • action.payload (Number | undefined) index of the split map

Returns Object nextState

updateAnimationTimeUpdater

Reset animation config current time to a specified value

• Action: updateAnimationTime

Parameters

• state Object visState
• action Object action
  • action.value Number the value current time will be set to

Returns Object nextState

updateFilterAnimationSpeedUpdater

Change filter animation speed

• Action: updateFilterAnimationSpeed

Parameters

• state Object visState
• action Object action
  • action.idx Number idx of filter
  • action.speed Number speed to change it to. speed is a multiplier

Returns Object nextState

updateLayerAnimationSpeedUpdater

Update animation speed with the vertical speed slider

• Action: updateLayerAnimationSpeed

Parameters

• state Object visState
• action Object action
  • action.speed Number the updated speed of the animation

Returns Object nextState

updateLayerBlendingUpdater

update layer blending mode

• Action: updateLayerBlending

Parameters

• state Object visState
• action Object action
  • action.mode string one of additive, normal and subtractive

Returns Object nextState

updateVisDataUpdater

Add new dataset to visState, with option to load a map config along with the datasets

• Action: updateVisData

Parameters

• state Object visState
• action Object action
  • action.datasets (Array<Object> | Object) *required datasets can be a dataset or an array of datasets Each dataset object needs to have info and data property.
    • action.datasets.info Object -info of a dataset
      • action.datasets.info.id string id of this dataset. If config is defined, id should matches the dataId in config.
      • action.datasets.info.label string A display name of this dataset
    • action.datasets.data Object *required The data object, in a tabular format with 2 properties fields and rows
      • action.datasets.data.fields Array<Object> *required Array of fields,
        • action.datasets.data.fields.name string *required Name of the field,
      • action.datasets.data.rows Array<Array> *required Array of rows, in a tabular format with fields and rows
  • action.options Object option object {centerMap: true, keepExistingConfig: false}
  • action.config Object map config

Returns Object nextState