ui-state.md

Table of Contents

• uiStateUpdaters
  • addNotificationUpdater
  • cleanupExportImage
  • DEFAULT_EXPORT_DATA
  • DEFAULT_EXPORT_IMAGE
  • DEFAULT_MAP_CONTROLS_FEATURES
  • hideExportDropdownUpdater
  • INITIAL_UI_STATE
  • loadFilesErrUpdater
  • loadFilesUpdater
  • openDeleteModalUpdater
  • removeNotificationUpdater
  • setExportDataTypeUpdater
  • setExportDataUpdater
  • setExportFilteredUpdater
  • setExportImageDataUri
  • setExportSelectedDatasetUpdater
  • setRatioUpdater
  • setResolutionUpdater
  • showExportDropdownUpdater
  • startExportingImage
  • toggleLegendUpdater
  • toggleMapControlUpdater
  • toggleModalUpdater
  • toggleSidePanelUpdater
  • toggleSplitMapUpdater
• DEFAULT_EXPORT_HTML
• setUserMapboxAccessTokenUpdater

uiStateUpdaters

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

Examples

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

const composedReducer = (state, action) => {
 switch (action.type) {
   // click button to close side panel
   case 'CLICK_BUTTON':
     return {
       ...state,
       keplerGl: {
         ...state.keplerGl,
         foo: {
            ...state.keplerGl.foo,
            uiState: uiStateUpdaters.toggleSidePanelUpdater(
              uiState, {payload: null}
            )
         }
       }
     };
 }
 return reducers(state, action);
};

export default composedReducer;

addNotificationUpdater

Add a notification to be displayed

• Action: addNotification

Parameters

• state Object uiState
• action Object
  • action.payload Object

Returns Object nextState

cleanupExportImage

Delete cached export image

• Action: cleanupExportImage

Parameters

• state Object uiState

Returns Object nextState

DEFAULT_EXPORT_DATA

Default initial exportData settings

Type: Object

Properties

• selectedDataset string Default: '',
• dataType string Default: 'csv',
• filtered boolean Default: true,
• config boolean deprecated
• data boolean used in modal config export. Default: false

DEFAULT_EXPORT_IMAGE

Default image export config

Type: Object

Properties

• ratio string Default: 'SCREEN',
• resolution string Default: 'ONE_X',
• legend boolean Default: false,
• imageDataUri string Default: '',
• exporting boolean Default: false
• error boolean Default: false

DEFAULT_MAP_CONTROLS_FEATURES

A list of map control visibility and whether is it active.

Type: Object

Properties

• visibleLayers Object Default: {show: true, active: false}
• mapLegend Object Default: {show: true, active: false}
• toggle3d Object Default: {show: true}
• splitMap Object Default: {show: true}

hideExportDropdownUpdater

Hide side panel header dropdown, activated by clicking the share link on top of the side panel

• Action: hideExportDropdown

Parameters

• state Object uiState

Returns Object nextState

INITIAL_UI_STATE

Default initial uiState

Type: Object

Properties

• readOnly boolean Default: false
• activeSidePanel string Default: 'layer'
• currentModal (string | null) Default: 'addData'
• datasetKeyToRemove (string | null) Default: null
• visibleDropdown (string | null) Default: null
• exportImage Object Default: DEFAULT_EXPORT_IMAGE
• exportData Object Default: DEFAULT_EXPORT_DATA
• mapControls Object Default: DEFAULT_MAP_CONTROLS
• activeMapIndex number defines which map the user clicked on. Default: 0

loadFilesErrUpdater

Handles load file error and set fileLoading property to false

• Action: loadFilesErr

Parameters

• state
• error Object
  • error.error

Returns Object nextState

loadFilesUpdater

Fired when file loading begin

• Action: loadFiles

Parameters

• state Object uiState

Returns Object nextState

openDeleteModalUpdater

Toggle active map control panel

• Action: openDeleteModal

Parameters

• state Object uiState
• action Object
  • action.payload string dataset id

Returns Object nextState

removeNotificationUpdater

Remove a notification

• Action: removeNotification

Parameters

• state Object uiState
• action Object
  • action.payload String id of the notification to be removed

Returns Object nextState

setExportDataTypeUpdater

Set data format for exporting data

• Action: setExportDataType

Parameters

• state Object uiState
• action Object
  • action.payload string one of 'text/csv'

Returns Object nextState

setExportDataUpdater

Whether to including data in map config, toggle between true or false

• Action: setExportData

Parameters

• state Object uiState

Returns Object nextState

setExportFilteredUpdater

Whether to export filtered data, true or false

• Action: setExportFiltered

Parameters

• state Object uiState
• action Object
  • action.payload boolean

Returns Object nextState

setExportImageDataUri

Set exportImage.setExportImageDataUri to a image dataUri

• Action: setExportImageDataUri

Parameters

• state Object uiState
• action Object
  • action.payload string export image data uri

Returns Object nextState

setExportSelectedDatasetUpdater

Set selected dataset for export

• Action: setExportSelectedDataset

Parameters

• state Object uiState
• action Object
  • action.payload string dataset id

Returns Object nextState

setRatioUpdater

Set exportImage.ratio

• Action: setRatio

Parameters

• state Object uiState
• action Object
  • action.payload string one of 'SCREEN', 'FOUR_BY_THREE' and 'SIXTEEN_BY_NINE'

Returns Object nextState

setResolutionUpdater

Set exportImage.resolution

• Action: setResolution

Parameters

• state Object uiState
• action Object
  • action.payload string one of 'ONE_X', 'TWO_X'

Returns Object nextState

showExportDropdownUpdater

Hide and show side panel header dropdown, activated by clicking the share link on top of the side panel

• Action: showExportDropdown

Parameters

• state Object uiState
• action Object
  • action.payload string id of the dropdown

Returns Object nextState

startExportingImage

Set exportImage.exporting to true

• Action: startExportingImage

Parameters

• state Object uiState

Returns Object nextState

toggleLegendUpdater

Set exportImage.legend to true or false

• Action: toggleLegend

Parameters

• state Object uiState

Returns Object nextState

toggleMapControlUpdater

Toggle active map control panel

• Action: toggleMapControl

Parameters

• state Object uiState
• action Object action
  • action.payload string map control panel id, one of the keys of: DEFAULT_MAP_CONTROLS
  • action.payload.panelId
  • action.payload.index (optional, default 0)

Returns Object nextState

toggleModalUpdater

Show and hide modal dialog

• Action: toggleModal

Parameters

• state Object uiState
• action Object
  • action.payload (string | null) id of modal to be shown, null to hide modals. One of:- DATA_TABLE_ID
    • DELETE_DATA_ID
    • ADD_DATA_ID
    • EXPORT_IMAGE_ID
    • EXPORT_DATA_ID
    • ADD_MAP_STYLE_ID

Returns Object nextState

toggleSidePanelUpdater

Toggle active side panel

• Action: toggleSidePanel

Parameters

• state Object uiState
• action Object
  • action.payload (string | null) id of side panel to be shown, one of layer, filter, interaction, map. close side panel if null

Returns Object nextState

toggleSplitMapUpdater

Handles toggle map split and reset all map control index to 0

• Action: toggleSplitMap

Parameters

• state

Returns Object nextState

DEFAULT_EXPORT_HTML

Type: Object

Properties

• exportMapboxAccessToken string Default: null, this is used when we provide a default mapbox token for users to take advantage of
• userMapboxToken string Default: '', mapbox token provided by user through input field

setUserMapboxAccessTokenUpdater

whether to export a mapbox access to HTML single page

• Action: setUserMapboxAccessToken

Parameters

• state Object uiState
• action Object
  • action.payload string

Returns Object nextState