[Examples] fix panel toggle exmaple, add layer hove info demo (#1549)

Signed-off-by: Shan He <heshan0131@gmail.com>

examples/replace-component/src/app.js

@@ -25,7 +25,7 @@ import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
 import styled from 'styled-components';
 import {theme} from 'kepler.gl/styles';
 
-import sampleData from './data/sample-data';
+import sampleData, {config} from './data/sample-data';
 
 const MAPBOX_TOKEN = process.env.MapboxAccessToken; // eslint-disable-line
 
@@ -34,13 +34,15 @@ import {
   PanelHeaderFactory,
   PanelToggleFactory,
   CustomPanelsFactory,
+  LayerHoverInfoFactory,
   injectComponents
 } from 'kepler.gl/components';
 
 import CustomPanelHeaderFactory from './components/panel-header';
 import CustomSidebarFactory from './components/side-bar';
 import CustomPanelToggleFactory from './components/panel-toggle';
 import CustomSidePanelFactory from './components/custom-panel';
+import CustomLayerHoverInfoFactory from './components/custom-layer-hover';
 
 const StyledMapConfigDisplay = styled.div`
   position: absolute;
@@ -61,12 +63,13 @@ const KeplerGl = injectComponents([
   [SidebarFactory, CustomSidebarFactory],
   [PanelHeaderFactory, CustomPanelHeaderFactory],
   [PanelToggleFactory, CustomPanelToggleFactory],
-  [CustomPanelsFactory, CustomSidePanelFactory]
+  [CustomPanelsFactory, CustomSidePanelFactory],
+  [LayerHoverInfoFactory, CustomLayerHoverInfoFactory]
 ]);
 
 class App extends Component {
   componentDidMount() {
-    this.props.dispatch(wrapTo('map1', addDataToMap({datasets: sampleData})));
+    this.props.dispatch(wrapTo('map1', addDataToMap({datasets: sampleData, config})));
   }
 
   render() {

examples/replace-component/src/components/custom-layer-hover.js

@@ -0,0 +1,38 @@
+// Copyright (c) 2021 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React from 'react';
+import {LayerHoverInfoFactory} from 'kepler.gl/components';
+
+const CustomLayerHoverInfoFactory = (...deps) => {
+  const LayerHoverInfo = LayerHoverInfoFactory(...deps);
+  const LayerHoverInfoWrapper = props => {
+    // Disable tooltip for point layer
+    if (props.layer?.id === 'point_layer') {
+      return null;
+    }
+
+    return <LayerHoverInfo {...props} />;
+  };
+
+  return LayerHoverInfoWrapper;
+};
+CustomLayerHoverInfoFactory.deps = LayerHoverInfoFactory.deps;
+export default CustomLayerHoverInfoFactory;

examples/replace-component/src/components/panel-toggle.js

@@ -37,22 +37,21 @@ const ButtonWrapper = styled.div`
   margin-bottom: 4px;
 `;
 
-const PanelToggle = PanelToggleFactory();
+const CustomPanelToggleFactory = (...deps) => {
+  const PanelToggle = PanelToggleFactory(...deps);
+  const PanelToggleWrapper = props => (
+    <StyledPanelToggleWrapper>
+      <PanelToggle {...props} />
+      <ButtonWrapper>
+        <Button onClick={() => props.onClickSaveConfig(props.mapState)} width="120px">
+          <Icons.Files height="12px" />
+          Save Config
+        </Button>
+      </ButtonWrapper>
+    </StyledPanelToggleWrapper>
+  );
 
-const PanelToggleWrapper = props => (
-  <StyledPanelToggleWrapper>
-    <PanelToggle {...props} />
-    <ButtonWrapper>
-      <Button onClick={() => props.onClickSaveConfig(props.mapState)} width="120px">
-        <Icons.Files height="12px" />
-        Save Config
-      </Button>
-    </ButtonWrapper>
-  </StyledPanelToggleWrapper>
-);
-
-const CustomPanelToggleFactory = () =>
-  withState(
+  return withState(
     // lenses
     [visStateLens],
     // mapStateToProps
@@ -61,5 +60,6 @@ const CustomPanelToggleFactory = () =>
       onClickSaveConfig: setMapConfig
     }
   )(PanelToggleWrapper);
-
+};
+CustomPanelToggleFactory.deps = PanelToggleFactory.deps;
 export default CustomPanelToggleFactory;

examples/replace-component/src/data/sample-data.js

@@ -18,6 +18,68 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
+export const config = {
+  version: 'v1',
+  config: {
+    visState: {
+      layers: [
+        {
+          type: 'point',
+          id: 'point_layer',
+          config: {
+            dataId: 'tree_data',
+            label: 'Trees',
+            color: [69, 138, 70],
+            columns: {lat: 'Location_latitude', lng: 'Location_longitude', altitude: null},
+            isVisible: true
+          },
+          visualChannels: {
+            sizeField: {name: 'Plan', type: 'integer'}
+          }
+        },
+        {
+          id: 'heatmap_layer',
+          type: 'heatmap',
+          config: {
+            dataId: 'tree_data',
+            label: 'Heatmap',
+            columns: {lat: 'Location_latitude', lng: 'Location_longitude'},
+            isVisible: true,
+            visConfig: {
+              opacity: 0.8,
+              colorRange: {
+                name: 'Global Warming',
+                type: 'sequential',
+                category: 'Uber',
+                colors: ['#5A1846', '#900C3F', '#C70039', '#E3611C', '#F1920E', '#FFC300']
+              },
+              radius: 46.4
+            }
+          },
+          visualChannels: {weightField: null, weightScale: 'linear'}
+        }
+      ],
+      interactionConfig: {
+        tooltip: {
+          fieldsToShow: {tree_data: []},
+          compareMode: false,
+          compareType: 'absolute',
+          enabled: true
+        }
+      }
+    },
+    mapState: {
+      bearing: 0,
+      dragRotate: false,
+      latitude: 37.759775559999994,
+      longitude: -122.4423862,
+      pitch: 0,
+      zoom: 12,
+      isSplit: false
+    }
+  }
+};
+
 export default {
   info: {
     label: 'San Francisco Trees',