[feat] banner with extra release info (#2955)

- banner with extra info for 3.1 release
- once minified, the user won't see the banner again during next sessions
- can be disabled via application config

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>

Author: igorDykhta

examples/demo-app/package.json

@@ -55,7 +55,8 @@
     "redux-actions": "^2.2.1",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^1.0.0",
-    "styled-components": "6.1.8"
+    "styled-components": "6.1.8",
+    "usehooks-ts": "^3.1.0"
   },
   "resolutions": {
     "@luma.gl/core": "8.5.21",

examples/demo-app/src/components/map-control/map-control.js

@@ -1,21 +1,23 @@
 // SPDX-License-Identifier: MIT
 // Copyright contributors to the kepler.gl project
 
-import React, {useState} from 'react';
 import classnames from 'classnames';
+import React, {useState} from 'react';
+import ReactMarkdown from 'react-markdown';
 import styled from 'styled-components';
-import {Icons, IconRoundSmall, MapControlButton} from '@kepler.gl/components';
+import {useLocalStorage} from 'usehooks-ts';
 
-import ReactMarkdown from 'react-markdown';
+import {Icons, IconRoundSmall, MapControlButton} from '@kepler.gl/components';
+import {getApplicationConfig} from '@kepler.gl/utils';
 
 const StyledFloatingPanel = styled.div`
   margin-right: 12px;
-  margin-top: 20px;
+  margin-top: 12px;
 `;
 
 const StyledProjectPanel = styled.div`
   background: ${props => props.theme.panelBackground};
-  padding: 16px 20px;
+  padding: 16px 16px 16px 20px;
   width: 280px;
   box-shadow: ${props => props.theme.panelBoxShadow};
 
@@ -25,6 +27,13 @@ const StyledProjectPanel = styled.div`
     font-weight: 500;
     display: flex;
     justify-content: space-between;
+
+    div {
+      .release-icon {
+        font-size: 20px;
+        padding-left: 10px;
+      }
+    }
   }
 
   .project-description {
@@ -39,7 +48,7 @@ const StyledProjectPanel = styled.div`
   }
 
   .project-links {
-    margin-top: 20px;
+    margin-top: 16px;
     width: 100%;
     display: flex;
     align-items: center;
@@ -153,3 +162,56 @@ export function SampleMapPanel(props) {
     </StyledFloatingPanel>
   );
 }
+
+export function BannerMapPanel() {
+  const [isActive, setActive] = useState(true);
+  // Once the banner is closed, the user won't see the banner during next sessions.
+  const [showBanner, setShowBanner] = useLocalStorage(
+    'show-duckdb-preview-banner',
+    getApplicationConfig().showReleaseBanner
+  );
+  const [wasVisible] = useState(showBanner);
+
+  if (!showBanner && !wasVisible) {
+    return null;
+  }
+
+  return (
+    <StyledFloatingPanel>
+      {isActive ? (
+        <StyledProjectPanel>
+          <div className="project-title">
+            <div>
+              {'Kepler.gl 3.1 is here!'}
+              <span className="release-icon">{'🚀'}</span>
+            </div>
+
+            <CloseButton
+              onClick={() => {
+                setShowBanner(false);
+                setActive(false);
+              }}
+            />
+          </div>
+          <div className="project-description">
+            <ReactMarkdown components={{a: LinkRenderer}}>
+              {
+                'Check out our new [DuckDB plugin preview](https://kepler-preview.foursquare.com) for data analysis, exploration and in-browser data processing in Kepler.gl.'
+              }
+            </ReactMarkdown>
+          </div>
+        </StyledProjectPanel>
+      ) : (
+        <MapControlButton
+          className={classnames('map-control-button', 'info-panel', {isActive})}
+          onClick={e => {
+            e.preventDefault();
+            setActive(true);
+          }}
+        >
+          <Icons.Docs height="18px" />
+        </MapControlButton>
+      )}
+    </StyledFloatingPanel>
+  );
+}

examples/demo-app/src/factories/map-control.js

@@ -3,14 +3,16 @@
 
 import React from 'react';
 import styled from 'styled-components';
+
+import {AiAssistantControlFactory, AiAssistantManagerFactory} from '@kepler.gl/ai-assistant';
 import {
   withState,
   MapControlFactory,
   EffectControlFactory,
   EffectManagerFactory
 } from '@kepler.gl/components';
-import {AiAssistantControlFactory, AiAssistantManagerFactory} from '@kepler.gl/ai-assistant';
-import {SampleMapPanel} from '../components/map-control/map-control';
+
+import {BannerMapPanel, SampleMapPanel} from '../components/map-control/map-control';
 import SqlPanelControlFactory from '../components/map-control/sql-panel-control';
 
 const StyledMapControlPanel = styled.div`
@@ -87,6 +89,7 @@ function CustomMapControlFactory(
         fullHeight={showAiAssistant}
       >
         <StyledMapControlPanel>
+          {<BannerMapPanel {...props} />}
           {!props.isExport && props.currentSample ? <SampleMapPanel {...props} /> : null}
           <MapControl {...props} top={0} actionComponents={actionComponents} />
         </StyledMapControlPanel>

examples/demo-app/yarn.lock

@@ -13045,6 +13045,7 @@ __metadata:
     redux-logger: "npm:^3.0.6"
     redux-thunk: "npm:^1.0.0"
     styled-components: "npm:6.1.8"
+    usehooks-ts: "npm:^3.1.0"
   languageName: unknown
   linkType: soft
 
@@ -14225,6 +14226,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"usehooks-ts@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "usehooks-ts@npm:3.1.0"
+  dependencies:
+    lodash.debounce: "npm:^4.0.8"
+  peerDependencies:
+    react: ^16.8.0  || ^17 || ^18
+  checksum: 10c0/2204d8c95109302bdaaa51a66bf216f3dba750f1d2795c20ecba75ba1c44a070a253935d537ef536514ab6e363bcc02ccc78b5ad63576ff8d880d577cf3fc48f
+  languageName: node
+  linkType: hard
+
 "util-deprecate@npm:^1.0.2":
   version: 1.0.2
   resolution: "util-deprecate@npm:1.0.2"

package.json

@@ -212,6 +212,7 @@
     "typedoc-plugin-markdown": "^3.0.11",
     "typescript": "4.7.2",
     "url-loader": "^4.1.1",
+    "usehooks-ts": "^3.1.0",
     "watchify": "^3.6.1",
     "webpack": "^4.29.0",
     "webpack-bundle-analyzer": "^3.3.2",

src/utils/src/application-config.ts

@@ -35,8 +35,10 @@ export type KeplerApplicationConfig<Map> = {
   // TODO improve typing by exporting KeplerTable interface to @kepler.gl/types
   table?: any;
 
-  // disable progressive loading for arrow files
+  // Disable progressive loading for arrow files
   useArrowProgressiveLoading?: boolean;
+  // Show built-in banner associated with the current version of Kepler.gl
+  showReleaseBanner?: boolean;
 };
 
 const DEFAULT_APPLICATION_CONFIG: Required<KeplerApplicationConfig<mapboxgl.Map>> = {
@@ -70,7 +72,8 @@ const DEFAULT_APPLICATION_CONFIG: Required<KeplerApplicationConfig<mapboxgl.Map>
   // TODO include KeplerTable here when the circular dependency with @kepler.gl/table and @kepler.gl/utils are resolved.
   table: null,
 
-  useArrowProgressiveLoading: true
+  useArrowProgressiveLoading: true,
+  showReleaseBanner: false
 };
 
 const applicationConfig: Required<KeplerApplicationConfig<mapboxgl.Map>> =

yarn.lock

@@ -20543,6 +20543,7 @@ __metadata:
     typedoc-plugin-markdown: "npm:^3.0.11"
     typescript: "npm:4.7.2"
     url-loader: "npm:^4.1.1"
+    usehooks-ts: "npm:^3.1.0"
     watchify: "npm:^3.6.1"
     webpack: "npm:^4.29.0"
     webpack-bundle-analyzer: "npm:^3.3.2"