# ui-state

#### Table of Contents

* [uiStateUpdaters](#uistateupdaters)
  * [addNotificationUpdater](#addnotificationupdater)
  * [cleanupExportImage](#cleanupexportimage)
  * [DEFAULT\_EXPORT\_DATA](#default_export_data)
    * [Properties](#properties)
  * [DEFAULT\_EXPORT\_IMAGE](#default_export_image)
    * [Properties](#properties-1)
  * [DEFAULT\_MAP\_CONTROLS\_FEATURES](#default_map_controls_features)
    * [Properties](#properties-2)
  * [hideExportDropdownUpdater](#hideexportdropdownupdater)
  * [INITIAL\_UI\_STATE](#initial_ui_state)
    * [Properties](#properties-3)
  * [loadFilesErrUpdater](#loadfileserrupdater)
  * [loadFilesUpdater](#loadfilesupdater)
  * [openDeleteModalUpdater](#opendeletemodalupdater)
  * [removeNotificationUpdater](#removenotificationupdater)
  * [setExportDataTypeUpdater](#setexportdatatypeupdater)
  * [setExportDataUpdater](#setexportdataupdater)
  * [setExportFilteredUpdater](#setexportfilteredupdater)
  * [setExportImageDataUri](#setexportimagedatauri)
  * [setExportImageSetting](#setexportimagesetting)
  * [setExportSelectedDatasetUpdater](#setexportselecteddatasetupdater)
  * [showExportDropdownUpdater](#showexportdropdownupdater)
  * [startExportingImage](#startexportingimage)
  * [toggleMapControlUpdater](#togglemapcontrolupdater)
  * [toggleModalUpdater](#togglemodalupdater)
  * [toggleSidePanelUpdater](#togglesidepanelupdater)
  * [toggleSplitMapUpdater](#togglesplitmapupdater)
* [DEFAULT\_EXPORT\_HTML](#default_export_html)
  * [Properties](#properties-4)
* [setUserMapboxAccessTokenUpdater](#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](/docs/api-reference/advanced-usages/using-updaters.md)

**Examples**

```javascript
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(
              state.keplerGl.foo.uiState, {payload: null}
            )
         }
       }
     };
 }
 return reducers(state, action);
};

export default composedReducer;
```

#### addNotificationUpdater

Add a notification to be displayed. Existing notification is going to be updated in case of matching ids.

* **Action**: [`addNotification`](/docs/api-reference/actions/actions.md#addnotification)

**Parameters**

* `state` [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) `uiState`
* `action` [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)
  * `action.payload` [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)

Returns [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) nextState

#### cleanupExportImage

Delete cached export image

* **Action**: [`cleanupExportImage`](/docs/api-reference/actions/actions.md#cleanupexportimage)

**Parameters**

* `state` [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) `uiState`

Returns [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) nextState

#### DEFAULT\_EXPORT\_DATA

Default initial `exportData` settings

Type: [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)

**Properties**

* `selectedDataset` [**string**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) Default: `''`,
* `dataType` [**string**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) Default: `'csv'`,
* `filtered` [**boolean**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean) Default: `true`,
* `config` [**boolean**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean) deprecated
* `data` [**boolean**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean) used in modal config export. Default: `false`

#### DEFAULT\_EXPORT\_IMAGE

Default image export config

Type: [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)

**Properties**

* `ratio` [**string**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) Default: `'SCREEN'`,
* `resolution` [**string**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) Default: `'ONE_X'`,
* `legend` [**boolean**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean) Default: `false`,
* `imageDataUri` [**string**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) Default: `''`,
* `exporting` [**boolean**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean) Default: `false`
* `error` [**boolean**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean) Default: `false`

#### DEFAULT\_MAP\_CONTROLS\_FEATURES

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

Type: [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)

**Properties**

* `visibleLayers` [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) Default: `{show: true, active: false}`
* `mapLegend` [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) Default: `{show: true, active: false}`
* `toggle3d` [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) Default: `{show: true}`
* `splitMap` [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) Default: `{show: true}`

#### hideExportDropdownUpdater

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

* **Action**: [`hideExportDropdown`](/docs/api-reference/actions/actions.md#hideexportdropdown)

**Parameters**

* `state` [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) `uiState`

Returns [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) nextState

#### INITIAL\_UI\_STATE

Default initial `uiState`

Type: [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)

**Properties**

* `readOnly` [**boolean**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean) Default: `false`
* `activeSidePanel` [**string**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) Default: `'layer'`
* `currentModal` **(**[**string**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) **| null)** Default: `'addData'`
* `datasetKeyToRemove` **(**[**string**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) **| null)** Default: `null`
* `visibleDropdown` **(**[**string**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) **| null)** Default: `null`
* `exportImage` [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) Default: [`DEFAULT_EXPORT_IMAGE`](#default_export_image)
* `exportData` [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) Default: [`DEFAULT_EXPORT_DATA`](#default_export_data)
* `mapControls` [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) Default: [`DEFAULT_MAP_CONTROLS`](#default_map_controls)
* `activeMapIndex` [**number**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number) defines which map the user clicked on. Default: 0

#### loadFilesErrUpdater

Handles load file error and set fileLoading property to false

* **Action**: [`loadFilesErr`](/docs/api-reference/actions/actions.md#loadfileserr)

**Parameters**

* `state`
* `error` [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)
  * `error.error`

Returns [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) nextState

#### loadFilesUpdater

Fired when file loading begin

* **Action**: [`loadFiles`](/docs/api-reference/actions/actions.md#loadfiles)

**Parameters**

* `state` [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) `uiState`

Returns [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) nextState

#### openDeleteModalUpdater

Toggle active map control panel

* **Action**: [`openDeleteModal`](/docs/api-reference/actions/actions.md#opendeletemodal)

**Parameters**

* `state` [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) `uiState`
* `action` [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)
  * `action.payload` [**string**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) dataset id

Returns [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) nextState

#### removeNotificationUpdater

Remove a notification

* **Action**: [`removeNotification`](/docs/api-reference/actions/actions.md#removenotification)

**Parameters**

* `state` [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) `uiState`
* `action` [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)
  * `action.payload` [**String**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) id of the notification to be removed

Returns [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) nextState

#### setExportDataTypeUpdater

Set data format for exporting data

* **Action**: [`setExportDataType`](/docs/api-reference/actions/actions.md#setexportdatatype)

**Parameters**

* `state` [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) `uiState`
* `action` [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)
  * `action.payload` [**string**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) one of `'text/csv'`

Returns [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) nextState

#### setExportDataUpdater

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

* **Action**: [`setExportData`](/docs/api-reference/actions/actions.md#setexportdata)

**Parameters**

* `state` [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) `uiState`

Returns [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) nextState

#### setExportFilteredUpdater

Whether to export filtered data, `true` or `false`

* **Action**: [`setExportFiltered`](/docs/api-reference/actions/actions.md#setexportfiltered)

**Parameters**

* `state` [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) `uiState`
* `action` [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)
  * `action.payload` [**boolean**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)

Returns [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) nextState

#### setExportImageDataUri

Set `exportImage.setExportImageDataUri` to a image dataUri

* **Action**: [`setExportImageDataUri`](/docs/api-reference/actions/actions.md#setexportimagedatauri)

**Parameters**

* `state` [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) `uiState`
* `action` [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)
  * `action.payload` [**string**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) export image data uri

Returns [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) nextState

#### setExportImageSetting

Set `exportImage.legend` to `true` or `false`

* **Action**: [`setExportImageSetting`](/docs/api-reference/actions/actions.md#setexportimagesetting)

**Parameters**

* `state` [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) `uiState`
* `$1` [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)
  * `$1.payload`

Returns [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) nextState

#### setExportSelectedDatasetUpdater

Set selected dataset for export

* **Action**: [`setExportSelectedDataset`](/docs/api-reference/actions/actions.md#setexportselecteddataset)

**Parameters**

* `state` [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) `uiState`
* `action` [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)
  * `action.payload` [**string**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) dataset id

Returns [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) nextState

#### showExportDropdownUpdater

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

* **Action**: [`showExportDropdown`](/docs/api-reference/actions/actions.md#showexportdropdown)

**Parameters**

* `state` [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) `uiState`
* `action` [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)
  * `action.payload` [**string**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) id of the dropdown

Returns [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) nextState

#### startExportingImage

Set `exportImage.exporting` to `true`

* **Action**: [`startExportingImage`](/docs/api-reference/actions/actions.md#startexportingimage)

**Parameters**

* `state` [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) `uiState`

Returns [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) nextState

#### toggleMapControlUpdater

Toggle active map control panel

* **Action**: [`toggleMapControl`](/docs/api-reference/actions/actions.md#togglemapcontrol)

**Parameters**

* `state` [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) `uiState`
* `action` [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) action
  * `action.payload` [**string**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) map control panel id, one of the keys of: [`DEFAULT_MAP_CONTROLS`](#default_map_controls)
  * `action.payload.panelId`
  * `action.payload.index` (optional, default `0`)

Returns [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) nextState

#### toggleModalUpdater

Show and hide modal dialog

* **Action**: [`toggleModal`](/docs/api-reference/actions/actions.md#togglemodal)

**Parameters**

* `state` [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) `uiState`
* `action` [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)
  * `action.payload` **(**[**string**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) **| null)** id of modal to be shown, null to hide modals. One of:- [`DATA_TABLE_ID`](https://github.com/keplergl/kepler.gl/blob/master/docs/api-reference/constants/default-settings.md#data_table_id)
    * [`DELETE_DATA_ID`](https://github.com/keplergl/kepler.gl/blob/master/docs/api-reference/constants/default-settings.md#delete_data_id)
    * [`ADD_DATA_ID`](https://github.com/keplergl/kepler.gl/blob/master/docs/api-reference/constants/default-settings.md#add_data_id)
    * [`EXPORT_IMAGE_ID`](https://github.com/keplergl/kepler.gl/blob/master/docs/api-reference/constants/default-settings.md#export_image_id)
    * [`EXPORT_DATA_ID`](https://github.com/keplergl/kepler.gl/blob/master/docs/api-reference/constants/default-settings.md#export_data_id)
    * [`ADD_MAP_STYLE_ID`](https://github.com/keplergl/kepler.gl/blob/master/docs/api-reference/constants/default-settings.md#add_map_style_id)

Returns [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) nextState

#### toggleSidePanelUpdater

Toggle active side panel

* **Action**: [`toggleSidePanel`](/docs/api-reference/actions/actions.md#togglesidepanel)

**Parameters**

* `state` [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) `uiState`
* `action` [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)
  * `action.payload` **(**[**string**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) **| null)** id of side panel to be shown, one of `layer`, `filter`, `interaction`, `map`. close side panel if `null`

Returns [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) nextState

#### toggleSplitMapUpdater

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

* **Action**: [`toggleSplitMap`](/docs/api-reference/actions/actions.md#togglesplitmap)

**Parameters**

* `state`

Returns [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) nextState

### DEFAULT\_EXPORT\_HTML

Type: [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)

#### Properties

* `exportMapboxAccessToken` [**string**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) Default: null, this is used when we provide a default mapbox token for users to take advantage of
* `userMapboxToken` [**string**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) Default: '', mapbox token provided by user through input field

### setUserMapboxAccessTokenUpdater

whether to export a mapbox access to HTML single page

* **Action**: [`setUserMapboxAccessToken`](/docs/api-reference/actions/actions.md#setusermapboxaccesstoken)

**Parameters**

* `state` [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) `uiState`
* `action` [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)
  * `action.payload` [**string**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)

Returns [**Object**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) nextState


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.kepler.gl/docs/api-reference/reducers/ui-state.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.