How to apply filter , time visualization in kepler.gl Through code?

I am working on kepler.gl .. i want to apply filters and time visualization through code instead of kepler.gl panel that appears on the top right corner.... can we control that from code ? and also how can i remove kepler.gl menu box that appears on the top right corner through code i don't want my customer to see that panel this is my code for displaying my data on kepler map

import React, { useState } from "react";
import keplerGlReducer, {mapStateUpdaters}  from "kepler.gl/reducers";
import { createStore, combineReducers, applyMiddleware } from "redux";
import { taskMiddleware } from "react-palm/tasks";
import { Provider, useDispatch } from "react-redux";
import KeplerGl from "kepler.gl";
import { addDataToMap } from "kepler.gl/actions";
import useSwr from "swr";
import {csv} from 'd3';
import datajson from './Data/data.json'
const reducers = combineReducers({
  keplerGl: keplerGlReducer,

});

const store = createStore(reducers, {}, applyMiddleware(taskMiddleware));

export default function App() {
  return (
    <Provider store={store}>
      <Map />
    </Provider>
  );
}

function Map() {
  const dispatch = useDispatch();

  const data=datajson;

  React.useEffect(() => {
    if (data) {
      dispatch(
        addDataToMap({
          datasets: {
            info: {
              label: "COVID-19",
              id: "covid19"
            },
            data
          },
          option: {
            centerMap: true,
            readOnly: false
          },
          config: {}
        })
      );
    }
  }, [dispatch, data]);

  return (


    // <button onClick ={this.handledata} >changedata</button>
    <KeplerGl
      id="covid"
      mapboxApiAccessToken="pk.eyJ1IjoiYWxpcmF6YTcwNSIsImEiOiJjazh5d2hjb3AwOHBqM2VsY21wOHo5eXprIn0.9G5CE4KqfbvU9HQ6WBuo3w"
      width={window.innerWidth}
      height={window.innerHeight}

    />

  );
  }}```
can anyone pls help me how t do this?

Solution

yes all the setting through kepler.gl panel we can also control that from code only just we need to enable readonly option option: { centerMap: true, readOnly: false }, turn readonly to true and as a result side panel of kepler.gl will disappear and user can only read the map like this option: { centerMap: true, readOnly: true }, and the answer of the other question is ... do whatsever you want to do through kepler.gl pannel set all the stting through pannael and then export map(that is the option in top right corner of kepler.gl pannel )by doinng that automaticall html file is downloaded in you pc and in that html file cope config and paste it there function Map() { const dispatch = useDispatch();

const data=datajson;

React.useEffect(() => { if (data) { dispatch( addDataToMap({ datasets: { info: { label: "COVID-19", id: "covid19" }, data }, option: { centerMap: true, readOnly: false }, config: {//here paste the config that you just get from html file } }) ); } }, [dispatch, data]);

return (

// <button onClick ={this.handledata} >changedata</button>
<KeplerGl
  id="covid"
  mapboxApiAccessToken="pk.eyJ1IjoiYWxpcmF6YTcwNSIsImEiOiJjazh5d2hjb3AwOHBqM2VsY21wOHo5eXprIn0.9G5CE4KqfbvU9HQ6WBuo3w"
  width={window.innerWidth}
  height={window.innerHeight}

/>

); }}`` that's how you can control kepler.gl through code without showing kepler.gl panel to user