[chore] update readme, fix examples, show effects button

README.md

@@ -48,12 +48,12 @@ Kepler.gl is also a React component that uses [Redux](https://redux.js.org/) to
 
 ## Env
 
-Use Node 10.15.0 or above, older node versions have not been supported/ tested.
+Use Node 18.18.2 or above, older node versions have not been supported/ tested.
 For best results, use [nvm](https://github.com/creationix/nvm) `nvm install`.
 
 ## Install kepler.gl
 
-Install node (`> 10.15.0`), yarn, and project dependencies
+Install node (`> 18.18.2`), yarn, and project dependencies
 
 ```sh
 npm install --save kepler.gl
@@ -73,7 +73,7 @@ You can add the script tag to your html file as it follows:
 or if you would like, you can load a specific version
 
 ```html
-<script src="https://unpkg.com/kepler.gl@0.2.2/umd/keplergl.min.js" />
+<script src="https://unpkg.com/kepler.gl@2.5.5/umd/keplergl.min.js" />
 ```
 
 ## Develop kepler.gl
@@ -93,8 +93,8 @@ You need to add `taskMiddleware` of `react-palm` to your store too. We are activ
 
 ```js
 import {createStore, combineReducers, applyMiddleware, compose} from 'redux';
-import keplerGlReducer from 'kepler.gl/reducers';
-import {enhanceReduxMiddleware} from 'kepler.gl/middleware';
+import keplerGlReducer from '@kepler.gl/reducers';
+import {enhanceReduxMiddleware} from '@kepler.gl/middleware';
 
 const initialState = {};
 const reducers = combineReducers({
@@ -139,15 +139,10 @@ Read more about [Reducers][reducers].
 ### 2. Mount Component
 
 ```js
-import KeplerGl from 'kepler.gl';
+import KeplerGl from '@kepler.gl/components';
 
 const Map = props => (
-  <KeplerGl
-    id="foo"
-    width={width}
-    mapboxApiAccessToken={token}
-    height={height}
-  />
+  <KeplerGl id="foo" width={width} mapboxApiAccessToken={token} height={height} />
 );
 ```
 
@@ -165,14 +160,13 @@ stored in `state.keplerGl.foo`.
 In case you create multiple kepler.gl instances using the same id, the kepler.gl state defined by the entry will be
 overridden by the latest instance and reset to a blank state.
 
-##### `mapboxApiAccessToken` (String, required*)
+##### `mapboxApiAccessToken` (String, required\*)
 
 - Default: `undefined`
 
-
 By default, kepler.gl uses mapbox-gl.js to render its base maps. You can create a free account at [mapbox][mapbox] and create a token at [www.mapbox.com/account/access-tokens][mapbox-token].
 
-If you replaced kepler.gl default map styles with your own, and they are not Mapbox styles. `mapboxApiAccessToken` will not be reuiqred.
+If you replaced kepler.gl default map styles with your own, and they are not Mapbox styles. `mapboxApiAccessToken` will not be required.
 
 Read more about [Custom Map Styles][custom-map-styles].
 
@@ -350,10 +344,9 @@ const composedReducer = (state, action) => {
           // 'map' is the id of the keplerGl instance
           map: {
             ...state.keplerGl.map,
-            visState: visStateUpdaters.updateVisDataUpdater(
-              state.keplerGl.map.visState,
-              {datasets: action.payload}
-            )
+            visState: visStateUpdaters.updateVisDataUpdater(state.keplerGl.map.visState, {
+              datasets: action.payload
+            })
           }
         }
       };
@@ -373,10 +366,10 @@ using connect.
 
 ```js
 // component
-import KeplerGl from 'kepler.gl';
+import KeplerGl from '@kepler.gl/components';
 
 // action and forward dispatcher
-import {toggleFullScreen, forwardTo} from 'kepler.gl/actions';
+import {toggleFullScreen, forwardTo} from '@kepler.gl/actions';
 import {connect} from 'react-redux';
 
 const MapContainer = props => (
@@ -406,10 +399,10 @@ You can also simply wrap an action into a forward action with the `wrapTo` helpe
 
 ```js
 // component
-import KeplerGl from 'kepler.gl';
+import KeplerGl from '@kepler.gl/components';
 
 // action and forward dispatcher
-import {toggleFullScreen, wrapTo} from 'kepler.gl/actions';
+import {toggleFullScreen, wrapTo} from '@kepler.gl/actions';
 
 // create a function to wrapper action payload to 'foo'
 const wrapToMap = wrapTo('foo');
@@ -480,12 +473,7 @@ const customTheme = {
 
 return (
   <ThemeProvider theme={customTheme}>
-    <KeplerGl
-      mapboxApiAccessToken={MAPBOX_TOKEN}
-      id="map"
-      width={800}
-      height={800}
-    />
+    <KeplerGl mapboxApiAccessToken={MAPBOX_TOKEN} id="map" width={800} height={800} />
   </ThemeProvider>
 );
 ```
@@ -498,16 +486,14 @@ and call `injectComponents` at the root component of your app where `KeplerGl` i
 Take a look at `examples/demo-app/src/app.js` and see how it renders a custom side panel header in kepler.gl
 
 ```javascript
-import {injectComponents, PanelHeaderFactory} from 'kepler.gl/components';
+import {injectComponents, PanelHeaderFactory} from '@kepler.gl/components';
 
 // define custom header
 const CustomHeader = () => <div>My kepler.gl app</div>;
 const myCustomHeaderFactory = () => CustomHeader;
 
 // Inject custom header into Kepler.gl, replacing default
-const KeplerGl = injectComponents([
-  [PanelHeaderFactory, myCustomHeaderFactory]
-]);
+const KeplerGl = injectComponents([[PanelHeaderFactory, myCustomHeaderFactory]]);
 
 // render KeplerGl, it will render your custom header instead of the default
 const MapContainer = () => (
@@ -520,12 +506,8 @@ const MapContainer = () => (
 Using `withState` helper to add reducer state and actions to customized component as additional props.
 
 ```js
-import {
-  withState,
-  injectComponents,
-  PanelHeaderFactory
-} from 'kepler.gl/components';
-import {visStateLens} from 'kepler.gl/reducers';
+import {withState, injectComponents, PanelHeaderFactory} from '@kepler.gl/components';
+import {visStateLens} from '@kepler.gl/reducers';
 
 // custom action wrap to mounted instance
 const addTodo = text =>
@@ -562,6 +544,7 @@ To interact with a kepler.gl instance and add new data to it, you can dispatch t
 #### Parameters
 
 - `data` **[Object][40]** **\*required**
+
   - `datasets` **([Array][41]&lt;[Object][40]> | [Object][40])** **\*required** datasets can be a dataset or an array of datasets
     Each dataset object needs to have `info` and `data` property.
     - `datasets.info` **[Object][40]** \-info of a dataset
@@ -586,7 +569,7 @@ Kepler.gl provides an easy API `KeplerGlSchema.getConfigToSave` to generate a js
 
 ```javascript
 // app.js
-import {addDataToMap} from 'kepler.gl/actions';
+import {addDataToMap} from '@kepler.gl/actions';
 
 const sampleTripData = {
   fields: [

UPGRADE-GUIDE.md

@@ -1,6 +1,7 @@
 # Upgrade Guide
 
 ## Table of Content
+
 - [v2.3 to v2.4](#upgrade-from-v23-to-v24)
 
 - [v2.2 to v2.3](#upgrade-from-v22-to-v23)
@@ -9,91 +10,116 @@
 - [v1.1.12 to v2.0](#upgrade-from-v1112-to-v20)
 - [v1.1.11 to v1.1.12](#upgrade-from-v1111-to-v1112)
 
+## Upgrade from v2.4 to v3.0
+
+- TBD
+
 ## Upgrade from v2.3 to v2.4
 
 ### Breaking Changes
+
 - Supports React 17
 - Dependency Upgrades, major ones: `d3-xxx@^2`, `redux@4.0.5`, `type-analyzer@0.3.0`, `react-palm@~3.3.7`
 
 ### New Features
-- Support incremental timeline animation 
+
+- Support incremental timeline animation
 - Allow changing dataset in layer config
 - Enable polygon filter for h3 layer
 - Show last added filter at the top
 
 ### Bug Fixes
+
 - Avoid duplicated h3 layer detection
 - Fixed bug when reversing color palette not update
+
 ## Upgrade from v2.2 to v2.3
+
 - Upgrade dependencies to `deck.gl@8.2.0`, `loaders.gl@2.2.5` and `luma.gl@8.2.0`. This should only affects projects with the above libraries in its dependencies.
 
 ## Upgrade from v2.1 to v2.2
+
 ### New Features
-- __Interaction__  - Added Geocoder in the interactin panel
+
+- **Interaction** - Added Geocoder in the interactin panel
 
 ### Improvements
-- __Localization__ - Added Spanish, Catalan, and Portuguese translations
+
+- **Localization** - Added Spanish, Catalan, and Portuguese translations
 
 ### Bug Fixes
-- __Layer__ - Aggregation layer fix out-of-domain coloring for valid strings
-- __Export__ - Fixed download file for microsoft edge
+
+- **Layer** - Aggregation layer fix out-of-domain coloring for valid strings
+- **Export** - Fixed download file for microsoft edge
 
 ### API Update
-- __Components__ - Exported map drawing editor factories
+
+- **Components** - Exported map drawing editor factories
 
 ## Upgrade from v2.0 to v2.1
+
 ### Breaking Changes
+
 - Upgrade Node v10 for dev development, node requirement is now at `>=10.15.0`
 
 ### New Features
-- __Provider__  - Add cloud provider API 
-- __Layer__ - Added S2 Layer
-- __Basemap__ - Added satellite to base map styles options
-- __Theme__ - Added base UI theme to theme option as `base`
+
+- **Provider** - Add cloud provider API
+- **Layer** - Added S2 Layer
+- **Basemap** - Added satellite to base map styles options
+- **Theme** - Added base UI theme to theme option as `base`
 
 ### Improvements
-- __UI__ - Improved data table and layer panel header
-- __Filter__ - Better handle filter steps for small domains
+
+- **UI** - Improved data table and layer panel header
+- **Filter** - Better handle filter steps for small domains
 
 ### Bug Fixes
-- __Layer__ - Remove incorrect outlier for better map center detection
-- __Layer__ - Fix point layer stroke width
-- __Basemap__ - Fix bug custom map style not saved correctly 
-- __Export__ - Fix bug exported html blank
 
------
+- **Layer** - Remove incorrect outlier for better map center detection
+- **Layer** - Fix point layer stroke width
+- **Basemap** - Fix bug custom map style not saved correctly
+- **Export** - Fix bug exported html blank
+
+---
+
 ## Upgrade from v1.1.12 to v2.0
 
 ### Breaking Changes
+
 - Upgrade deck.gl to `8.0.15`, this only affects projects with deck.gl in its dependencies. Because only one version of deck.gl can be loaded.
 
 ### New Features
-- __GPU Filter__  - Improved time and numeric filter performance by moving calculation to GPU
-- __Geo Fitler__ - Added drawing polygon function, allow filter layer based on polygon
+
+- **GPU Filter** - Improved time and numeric filter performance by moving calculation to GPU
+- **Geo Fitler** - Added drawing polygon function, allow filter layer based on polygon
 
 ### Improvements
-- __Layer__ - Improved GeoJson and H3 layer geometry rendering
-- __UI__ - Support custom side panel tabs. [example](https://github.com/keplergl/kepler.gl/tree/master/examples/replace-component)
+
+- **Layer** - Improved GeoJson and H3 layer geometry rendering
+- **UI** - Support custom side panel tabs. [example](https://github.com/keplergl/kepler.gl/tree/master/examples/replace-component)
 
 ### Bug Fixes
 
+---
 
------
 ## Upgrade from v1.1.11 to v1.1.12
 
 ### Breaking Changes
 
 #### Dependency Upgrade
-- __react__ and __react-dom__: minimum required version is now `^16.3`
-- __react-redux__ is upgraded to `^7.1.3`. If you have older version of `react-redux` in your app. You will have error loading kepler.gl, likely due to multiple version of `react-redux` installed.
-- __react-palm__: required version is now `^3.1.2`.
-- __react-route__: if you are using `react-router`, we suggest using `^3.2.5` to avoid `React 16.8` lifecycle deprecation warning in the console.
 
+- **react** and **react-dom**: minimum required version is now `^16.3`
+- **react-redux** is upgraded to `^7.1.3`. If you have older version of `react-redux` in your app. You will have error loading kepler.gl, likely due to multiple version of `react-redux` installed.
+- **react-palm**: required version is now `^3.1.2`.
+- **react-route**: if you are using `react-router`, we suggest using `^3.2.5` to avoid `React 16.8` lifecycle deprecation warning in the console.
 
 ### Bug Fixes
-- __Cluster Layer__: Fix incorrect cluster point count. Fix cluster layer missing in exported image.
+
+- **Cluster Layer**: Fix incorrect cluster point count. Fix cluster layer missing in exported image.
 
 ### Moved from `kepler.gl/utils` to `@kepler.gl/table`
+
 - `maybeToDate`
 - `getNewDatasetColor`
 - `createNewDataEntry`
@@ -105,6 +131,7 @@
 - `getDatasetFieldIndexForFilter`
 
 ### Moved from `kepler.gl/utils` to `@kepler.gl/reducers`
+
 - `findMapBounds`
 - `exportData`
 - `TOOLTIP_MINUS_SIGN`
@@ -129,6 +156,7 @@
 - `computeDeckLayers`
 
 ### Moved from `kepler.gl/processors` to `@kepler.gl/utils`
+
 - `ACCEPTED_ANALYZER_TYPES`
 - `validateInputData`
 - `getSampleForTypeAnalyze`
@@ -137,9 +165,11 @@
 - `analyzerTypeToFieldType`
 
 ### Moved from `kepler.gl/templates` to `@kepler.gl/utils`
+
 - `exportMapToHTML`
 
 ### Moved from `kepler.gl/layers` to `@kepler.gl/utils`
+
 - `getCentroid`
 - `idToPolygonGeo`
 - `h3IsValid`

examples/custom-map-style/package.json

@@ -4,9 +4,9 @@
     "start-local": "webpack-dev-server --env.es6 --progress --hot --open"
   },
   "dependencies": {
-    "global": "^4.3.0",
     "@kepler.gl/components": "^3.0.0-alpha.1",
     "@kepler.gl/reducers": "^3.0.0-alpha.1",
+    "global": "^4.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-palm": "^3.3.6",

examples/custom-map-style/webpack.config.js

@@ -29,6 +29,12 @@ const CONFIG = {
         loader: 'babel-loader',
         include: join(__dirname, 'src'),
         exclude: [/node_modules/]
+      },
+      // fix for arrow-related errors
+      {
+        test: /\.mjs$/,
+        include: /node_modules/,
+        type: 'javascript/auto'
       }
     ]
   },

examples/custom-reducer/package.json

@@ -4,10 +4,10 @@
     "start-local": "webpack-dev-server --env.es6 --progress --hot --open"
   },
   "dependencies": {
-    "global": "^4.3.0",
     "@kepler.gl/actions": "^3.0.0-alpha.1",
     "@kepler.gl/components": "^3.0.0-alpha.1",
     "@kepler.gl/reducers": "^3.0.0-alpha.1",
+    "global": "^4.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-palm": "^3.3.6",