Kepler.gl: Controlling default modal and side panel behavior

[rdhara]

I am looking to embed a Kepler mapping interface into a React app. I've found it relatively easy to mount the component and connect it to my reducer and the UI/UX is amazing. However I wish there were an easy way to control some of the default behavior of the component (partly mentioned in #335 ):

1. I'd like to hide the side panel by default -- not remove it with readOnly, just have it be in the hidden state when the component is mounted.
2. Likewise, I'd like to prevent the data upload modal from appearing by default when the component first mounts.
3. Finally, I'd like to constrain certain modals (such as the data upload modal) to the div in which the Kepler component lives instead of what seems currently to be an absolute setting.

Hopefully I didn't miss anything, but I didn't see functionality that would support this in the style options; please let me know though if I did. Thanks in advance!

[rdhara]

I discovered that in componentDidMount I can dispatch the following:

dispatch(toggleModal(null));
dispatch(toggleSidePanel(null));

which does solve the problem in the interim.

[macrigiuseppe]

@rdhara when you initiate kepler.gl reducer you can pass initial values. to customize your interaction.
See the following code:

const customizedKeplerGlReducer = keplerGlReducer.initialState({
  uiState: {
    // hide side panel when mounted
    activeSidePanel: null,
    // hide all modals whtn mounted
    currentModal: null
  }
});

You don't need to dispatch any action

[rdhara]

Got it thank you!

[plant99]

@rdhara @macrigiuseppe Could you please throw some hints along point 3 of the issue? How to constrain popups in a 'relative' and not 'absolute' manner?