Add geo layers to DeckGlJsonChart

e2e/scripts/st_pydeck_geo_layers.py

@@ -0,0 +1,34 @@
+import streamlit as st
+import pandas as pd
+import pydeck as pdk
+
+H3_HEX_DATA = [
+    {"hex": "88283082b9fffff", "count": 10},
+    {"hex": "88283082d7fffff", "count": 50},
+    {"hex": "88283082a9fffff", "count": 100},
+]
+df = pd.DataFrame(H3_HEX_DATA)
+
+st.pydeck_chart(
+    pdk.Deck(
+        map_style="mapbox://styles/mapbox/light-v9",
+        tooltip={"text": "Count: {count}"},
+        initial_view_state=pdk.ViewState(
+            latitude=37.7749295, longitude=-122.4194155, zoom=12, bearing=0, pitch=30
+        ),
+        layers=[
+            pdk.Layer(
+                "H3HexagonLayer",
+                df,
+                pickable=True,
+                stroked=True,
+                filled=True,
+                extruded=False,
+                get_hexagon="hex",
+                get_fill_color="[0, 255, 0]",
+                get_line_color=[255, 255, 255],
+                line_width_min_pixels=2,
+            ),
+        ],
+    )
+)

e2e/specs/st_pydeck_chart.spec.ts

@@ -17,7 +17,7 @@
 
 /// <reference types="cypress" />
 
-describe("st.deck_gl_chart", () => {
+describe("st.pydeck_chart", () => {
   before(() => {
     cy.visit("http://localhost:3000/");
   });

e2e/specs/st_pydeck_geo_layers.spec.ts

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright 2018-2020 Streamlit Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/// <reference types="cypress" />
+
+describe("st.pydeck_chart geo layers", () => {
+  before(() => {
+    cy.visit("http://localhost:3000/");
+  });
+
+  it("displays H3 hexagon layer", () => {
+    // NB: #view-default-view needs to be invisible
+    // to be able to capture the layer.
+    cy.get("#view-default-view").invoke("css", "display", "none");
+
+    cy.get(".element-container .stDeckGlJsonChart")
+      .find("#deckgl-overlay")
+      .matchImageSnapshot("h3-hexagon-layer");
+  });
+
+  it("checks if layers have tooltip", () => {
+    cy.get(".element-container .stDeckGlJsonChart")
+      .find(".deck-tooltip")
+      .should("exist");
+  });
+});

frontend/src/assets/css/custom_components_theme.scss

@@ -18,7 +18,6 @@
 @import "fonts";
 @import "scrollbars";
 
-
 // Basics.
 
 body {
@@ -44,7 +43,6 @@ a:active {
   text-decoration: underline;
 }
 
-
 // Some utility classes, so components can use our theme.
 
 .primary {

frontend/src/assets/css/scrollbars.scss

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-
 // Make scrollbars awesome on Chrome.
 
 ::-webkit-scrollbar {

frontend/src/components/elements/DeckGlJsonChart/DeckGlJsonChart.tsx

@@ -22,6 +22,7 @@ import { StaticMap } from "react-map-gl"
 import * as layers from "@deck.gl/layers"
 import { JSONConverter } from "@deck.gl/json"
 import * as aggregationLayers from "@deck.gl/aggregation-layers"
+import * as geoLayers from "@deck.gl/geo-layers"
 
 import { CSVLoader } from "@loaders.gl/csv"
 import { registerLoaders } from "@loaders.gl/core"
@@ -48,7 +49,7 @@ interface DeckObject {
 }
 
 const configuration = {
-  classes: { ...layers, ...aggregationLayers },
+  classes: { ...layers, ...aggregationLayers, ...geoLayers },
 }
 
 registerLoaders([CSVLoader])
@@ -120,19 +121,28 @@ export class DeckGlJsonChart extends PureComponent<PropsWithHeight, State> {
 
     tooltip = JSON.parse(tooltip)
 
-    const matchedVariables = tooltip.html.match(/{(.*?)}/g)
+    // NB: https://deckgl.readthedocs.io/en/latest/tooltip.html
+    if (tooltip.html) {
+      tooltip.html = this.interpolate(info, tooltip.html)
+    } else {
+      tooltip.text = this.interpolate(info, tooltip.text)
+    }
 
+    return tooltip
+  }
+
+  interpolate = (info: PickingInfo, body: string): string => {
+    const matchedVariables = body.match(/{(.*?)}/g)
     if (matchedVariables) {
-      matchedVariables.forEach((el: string) => {
-        const variable = el.substring(1, el.length - 1)
+      matchedVariables.forEach((match: string) => {
+        const variable = match.substring(1, match.length - 1)
 
-        if (info.object[variable]) {
-          tooltip.html = tooltip.html.replace(el, info.object[variable])
+        if (info.object.hasOwnProperty(variable)) {
+          body = body.replace(match, info.object[variable])
         }
       })
     }
-
-    return tooltip
+    return body
   }
 
   render(): ReactNode {

frontend/src/declarations.d.ts

@@ -24,6 +24,8 @@ declare module "@deck.gl/layers"
 
 declare module "@deck.gl/aggregation-layers"
 
+declare module "@deck.gl/geo-layers"
+
 declare module "@loaders.gl/core"
 
 declare module "@loaders.gl/csv"

frontend/yarn.lock

@@ -2419,6 +2419,13 @@ affine-hull@^1.0.0:
   dependencies:
     robust-orientation "^1.1.3"
 
+agent-base@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.3.0.tgz#8165f01c436009bccad0b1d122f05ed770efc6ee"
+  integrity sha512-salcGninV0nPrwpGNn4VTXBb1SOuXQBiqbrNXoeizJsHrsL6ERFM2Ne3JUSBWRE6aeNJI2ROP/WEEIDUiDe3cg==
+  dependencies:
+    es6-promisify "^5.0.0"
+
 airbnb-prop-types@^2.15.0:
   version "2.15.0"
   resolved "https://registry.yarnpkg.com/airbnb-prop-types/-/airbnb-prop-types-2.15.0.tgz#5287820043af1eb469f5b0af0d6f70da6c52aaef"
@@ -4519,9 +4526,9 @@ cyclist@^1.0.1:
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
 
 cypress-file-upload@^3.5.1:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/cypress-file-upload/-/cypress-file-upload-3.5.1.tgz#6dcd7a87c93242b8fe917abe39bdda1ff82e23a3"
-  integrity sha512-HUhnoLlhLTHmgRGsoflcGyv3n9WA/Kh96mmBLmTGlg9Fs/CP2fVVc4NdbKeT9fNYk6Qy3upjfUxYaavNnfQb/Q==
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/cypress-file-upload/-/cypress-file-upload-3.5.3.tgz#cd706485de3fb2cbd4a8c2dd90fe96d537bb4311"
+  integrity sha512-S/czzqAj1BYz6Xxnfpx2aSc6hXsj76fd8/iuycJ2RxoxCcQMliw8eQV0ugzVlkzr1GD5dKGviNFGYqv3nRJ+Tg==
 
 cypress-image-snapshot@^3.1.1:
   version "3.1.1"
@@ -5616,14 +5623,22 @@ es6-map@^0.1.5:
     es6-symbol "~3.1.1"
     event-emitter "~0.3.5"
 
-es6-promise@4.2.8:
+es6-promise@4.2.8, es6-promise@^4.0.3:
   version "4.2.8"
   resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.8.tgz#4eb21594c972bc40553d276e510539143db53e0a"
+  integrity sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==
 
 es6-promise@^3.0.2:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-3.3.1.tgz#a08cdde84ccdbf34d027a1451bc91d4bcd28a613"
 
+es6-promisify@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/es6-promisify/-/es6-promisify-5.0.0.tgz#5109d62f3e56ea967c4b63505aef08291c8a5203"
+  integrity sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM=
+  dependencies:
+    es6-promise "^4.0.3"
+
 es6-set@^0.1.5, es6-set@~0.1.5:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/es6-set/-/es6-set-0.1.5.tgz#d2b3ec5d4d800ced818db538d28974db0a73ccb1"
@@ -6151,6 +6166,7 @@ extract-frustum-planes@^1.0.0:
 extract-zip@1.6.7:
   version "1.6.7"
   resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-1.6.7.tgz#a840b4b8af6403264c8db57f4f1a74333ef81fe9"
+  integrity sha1-qEC0uK9kAyZMjbV/Txp0Mz74H+k=
   dependencies:
     concat-stream "1.6.2"
     debug "2.6.9"
@@ -6261,6 +6277,7 @@ fbjs@^0.8.0, fbjs@^0.8.4:
 fd-slicer@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.0.1.tgz#8b5bcbd9ec327c5041bf9ab023fd6750f1177e65"
+  integrity sha1-i1vL2ewyfFBBv5qwI/1nUPEXfmU=
   dependencies:
     pend "~1.2.0"
 
@@ -7736,6 +7753,14 @@ https-browserify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
 
+https-proxy-agent@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-2.2.4.tgz#4ee7a737abd92678a293d9b34a1af4d0d08c787b"
+  integrity sha512-OmvfoQ53WLjtA9HeYP9RNrWMJzzAz1JGaSFr1nijg0PVR1JaD/xbJq1mdEIIlxGpXp9eSe/O2LgU9DJmTPd0Eg==
+  dependencies:
+    agent-base "^4.3.0"
+    debug "^3.1.0"
+
 husky@^3.0.5:
   version "3.0.5"
   resolved "https://registry.yarnpkg.com/husky/-/husky-3.0.5.tgz#d7db27c346645a8dc52df02aa534a377ad7925e0"
@@ -16334,6 +16359,7 @@ yauzl@2.10.0:
 yauzl@2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.4.1.tgz#9528f442dab1b2284e58b4379bb194e22e0c4005"
+  integrity sha1-lSj0QtqxsihOWLQ3m7GU4i4MQAU=
   dependencies:
     fd-slicer "~1.0.1"