From 023354dbb9eef77f7b739039f73398371f4a2b82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Mon, 16 Nov 2020 13:53:35 +0100
Subject: [PATCH 01/56] Add CatalogDatasetMap component

---
 lib/assets/javascripts/do-catalog/router.js   |   9 +
 .../pages/Data/CatalogDataset.vue             |   1 +
 .../pages/Data/CatalogDatasetMap.vue          | 126 ++++
 .../new-dashboard/router/routes/data.js       |   9 +
 package-lock.json                             | 579 ++++++++++++++++++
 package.json                                  |   6 +
 6 files changed, 730 insertions(+)
 create mode 100644 lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue

diff --git a/lib/assets/javascripts/do-catalog/router.js b/lib/assets/javascripts/do-catalog/router.js
index 5f75a581210d..478906985f32 100644
--- a/lib/assets/javascripts/do-catalog/router.js
+++ b/lib/assets/javascripts/do-catalog/router.js
@@ -3,6 +3,7 @@ import Router from 'vue-router';
 
 import Catalog from 'new-dashboard/pages/Data/Catalog.vue';
 import CatalogDataset from 'new-dashboard/pages/Data/CatalogDataset.vue';
+import CatalogDatasetMap from 'new-dashboard/pages/Data/CatalogDatasetMap.vue';
 import CatalogDatasetData from 'new-dashboard/pages/Data/CatalogDatasetData.vue';
 import CatalogDatasetSummary from 'new-dashboard/pages/Data/CatalogDatasetSummary.vue';
 
@@ -29,6 +30,14 @@ const router = new Router({
         title: () => 'Spatial Data Catalog | CARTO'
       },
       children: [
+        {
+          path: 'map',
+          name: 'catalog-dataset-map',
+          component: CatalogDatasetMap,
+          meta: {
+            title: () => 'Spatial Data Catalog | CARTO'
+          }
+        },
         {
           path: 'data',
           name: 'catalog-dataset-data',
diff --git a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDataset.vue b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDataset.vue
index dd1307864dfb..edf0a53b3d17 100644
--- a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDataset.vue
+++ b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDataset.vue
@@ -62,6 +62,7 @@
               <NavigationTabs class="grid-cell--col12">
                 <router-link :to="{ name: 'catalog-dataset-summary' }" replace>Summary</router-link>
                 <router-link :to="{ name: 'catalog-dataset-data' }" replace>Data</router-link>
+                <router-link :to="{ name: 'catalog-dataset-map' }" replace>Map</router-link>
               </NavigationTabs>
             </div>
             <router-view></router-view>
diff --git a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue
new file mode 100644
index 000000000000..d813d275ddde
--- /dev/null
+++ b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue
@@ -0,0 +1,126 @@
+<template>
+  <div class="viewer-container">
+    <h1>{{ name }}</h1>
+    <div class="map-container">
+      <div id="map"></div>
+      <canvas id="deck-canvas"></canvas>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import mapboxgl from 'mapbox-gl';
+import { Deck } from '@deck.gl/core';
+import { CartoBQTilerLayer, setDefaultCredentials, BASEMAP } from '@deck.gl/carto';
+
+export default {
+  name: 'CatalogDatasetMap',
+  computed: {
+    ...mapState({
+      dataset: state => state.catalog.dataset
+    }),
+    name () {
+      return this.dataset.name;
+    }
+  },
+  created () {
+    this.importMapboxStyles();
+  },
+  mounted () {
+    // Testing ID: acs_sociodemogr_b758e778
+
+    setDefaultCredentials({
+      username: 'public',
+      apiKey: 'default_public',
+      mapsUrl: 'https://maps-api-v2.carto-staging.com/user/{user}'
+    });
+
+    const INITIAL_VIEW_STATE = {
+      latitude: 40.750736,
+      longitude: -73.973674,
+      zoom: 11 + 1
+    };
+
+    const map = new mapboxgl.Map({
+      container: 'map',
+      style: BASEMAP.POSITRON,
+      interactive: false,
+      center: [INITIAL_VIEW_STATE.longitude, INITIAL_VIEW_STATE.latitude],
+      zoom: INITIAL_VIEW_STATE.zoom
+    });
+
+    const deck = new Deck({
+      canvas: 'deck-canvas',
+      initialViewState: INITIAL_VIEW_STATE,
+      controller: true,
+      onViewStateChange: ({ viewState }) => {
+        // Synchronize Deck.gl view with Mapbox
+        map.jumpTo({
+          center: [viewState.longitude, viewState.latitude],
+          zoom: viewState.zoom,
+          bearing: viewState.bearing,
+          pitch: viewState.pitch
+        });
+      },
+      layers: [
+        new CartoBQTilerLayer({
+          data: this.tilesetSampleId(this.dataset.id),
+          getFillColor: [130, 109, 186],
+          getLineColor: [0, 0, 0, 100],
+          lineWidthMinPixels: 0.5
+        })
+      ]
+    });
+  },
+  methods: {
+    importMapboxStyles () {
+      let style = document.createElement('link');
+      style.type = 'text/css';
+      style.rel = 'stylesheet';
+      style.href = 'https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css';
+      document.head.appendChild(style);
+    },
+    tilesetSampleId (id) {
+      const TILESET_SAMPLE_PROJECT_MAP = {
+        'carto-do': 'do-tileset-sample-stag',
+        'carto-do-public-data': 'do-public-tileset-sample-stag'
+      };
+      const [project, dataset, table] = id.split('.');
+      return [TILESET_SAMPLE_PROJECT_MAP[project], dataset, table].join('.');
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'new-dashboard/styles/variables';
+
+.viewer-container {
+  margin: 12px auto;
+  padding: 16px;
+  max-width: 800px;
+  border-radius: 4px;
+  background: $color-primary--soft;
+
+  h1 {
+    font-size: 14px;
+    font-weight: 600;
+    padding-bottom: 16px;
+    color: $text__color;
+  }
+
+  .map-container {
+    position: relative;
+    height: 460px;
+
+    & > * {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>
diff --git a/lib/assets/javascripts/new-dashboard/router/routes/data.js b/lib/assets/javascripts/new-dashboard/router/routes/data.js
index a8706b1ef1f0..ae589e1bde2a 100644
--- a/lib/assets/javascripts/new-dashboard/router/routes/data.js
+++ b/lib/assets/javascripts/new-dashboard/router/routes/data.js
@@ -8,6 +8,7 @@ const Datasets = () => import('new-dashboard/pages/Data/Datasets');
 const Subscriptions = () => import('new-dashboard/pages/Data/Subscriptions');
 const Catalog = () => import('new-dashboard/pages/Data/Catalog');
 const CatalogDataset = () => import('new-dashboard/pages/Data/CatalogDataset');
+const CatalogDatasetMap = () => import('new-dashboard/pages/Data/CatalogDatasetMap');
 const CatalogDatasetData = () => import('new-dashboard/pages/Data/CatalogDatasetData');
 const CatalogDatasetSummary = () => import('new-dashboard/pages/Data/CatalogDatasetSummary');
 
@@ -46,6 +47,14 @@ const routes = [
       title: () => 'Spatial Data Catalog | CARTO'
     },
     children: [
+      {
+        path: 'map',
+        name: 'catalog-dataset-data',
+        component: CatalogDatasetMap,
+        meta: {
+          title: () => 'Spatial Data Catalog | CARTO'
+        }
+      },
       {
         path: 'data',
         name: 'catalog-dataset-data',
diff --git a/package-lock.json b/package-lock.json
index 8af7bd18de8b..86f384dbb39a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1601,6 +1601,69 @@
         "minimist": "^1.2.0"
       }
     },
+    "@deck.gl/carto": {
+      "version": "8.3.7",
+      "resolved": "https://registry.npmjs.org/@deck.gl/carto/-/carto-8.3.7.tgz",
+      "integrity": "sha512-prNT61z7ToYU9wvnHEpxbzBv1oxdCZrijogpnimulhD7fL7Mp01f9pFfoo2fhHwfFpdPCZrPTWncOM/dZNC/pA==",
+      "requires": {
+        "@loaders.gl/loader-utils": "^2.3.0",
+        "@loaders.gl/mvt": "^2.3.0",
+        "@loaders.gl/tiles": "^2.3.0",
+        "@math.gl/web-mercator": "^3.3.0"
+      }
+    },
+    "@deck.gl/core": {
+      "version": "8.3.7",
+      "resolved": "https://registry.npmjs.org/@deck.gl/core/-/core-8.3.7.tgz",
+      "integrity": "sha512-SfQVk4z9aHxsj/+KZFj838xRgrKmh3x08euRavnaSW25CLEYWLHf5crmxfzEYcyErDz8x9ydkr/T4POloH3eqA==",
+      "requires": {
+        "@loaders.gl/core": "^2.3.0",
+        "@loaders.gl/images": "^2.3.0",
+        "@luma.gl/core": "^8.3.1",
+        "@math.gl/web-mercator": "^3.3.0",
+        "gl-matrix": "^3.0.0",
+        "math.gl": "^3.3.0",
+        "mjolnir.js": "^2.3.0",
+        "probe.gl": "^3.2.1"
+      }
+    },
+    "@deck.gl/geo-layers": {
+      "version": "8.3.7",
+      "resolved": "https://registry.npmjs.org/@deck.gl/geo-layers/-/geo-layers-8.3.7.tgz",
+      "integrity": "sha512-DLp4/U6EDmUugamTGDipB9OYk0hZvCdFoKdqe65UujmnRxVWOmzUQJdWdGUPnWfhHFk7oDWekSH1oOerq8MFGQ==",
+      "requires": {
+        "@loaders.gl/3d-tiles": "^2.3.0",
+        "@loaders.gl/loader-utils": "^2.3.0",
+        "@loaders.gl/mvt": "^2.3.0",
+        "@loaders.gl/terrain": "^2.3.0",
+        "@loaders.gl/tiles": "^2.3.0",
+        "@math.gl/culling": "^3.3.0",
+        "@math.gl/web-mercator": "^3.3.0",
+        "h3-js": "^3.6.0",
+        "long": "^3.2.0",
+        "math.gl": "^3.3.0"
+      }
+    },
+    "@deck.gl/layers": {
+      "version": "8.3.7",
+      "resolved": "https://registry.npmjs.org/@deck.gl/layers/-/layers-8.3.7.tgz",
+      "integrity": "sha512-cwt6PPrGTwy1RgxIh/BF/HDtmWiQwH8cJSPPzGN6UZpoqHNlRp/g05hJpr8FQCjkvUr11GyH2+vA5ndD5KfW2A==",
+      "requires": {
+        "@loaders.gl/images": "^2.3.0",
+        "@mapbox/tiny-sdf": "^1.1.0",
+        "@math.gl/polygon": "^3.3.0",
+        "earcut": "^2.0.6"
+      }
+    },
+    "@deck.gl/mesh-layers": {
+      "version": "8.3.7",
+      "resolved": "https://registry.npmjs.org/@deck.gl/mesh-layers/-/mesh-layers-8.3.7.tgz",
+      "integrity": "sha512-mJ2dMzHhlwD7LtAFNUG8skFnY8lRUnkZpiG4hAXCWG1x5T4pTGOKeVuWZkoZJGjYlqnNuyuHk6Mk71/A834yvg==",
+      "requires": {
+        "@luma.gl/experimental": "^8.3.1",
+        "@luma.gl/shadertools": "^8.3.1"
+      }
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -2880,6 +2943,341 @@
         }
       }
     },
+    "@loaders.gl/3d-tiles": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/3d-tiles/-/3d-tiles-2.3.3.tgz",
+      "integrity": "sha512-eZSNh2eHyqp4zV1jW16OsYRT8r+0oq2/koSGfVuu3IdRBJGc1U2DfF+PoNz/FwXZwdjlSFXEvlxDEiVHoQhrLw==",
+      "requires": {
+        "@loaders.gl/core": "2.3.3",
+        "@loaders.gl/draco": "2.3.3",
+        "@loaders.gl/gltf": "2.3.3",
+        "@loaders.gl/loader-utils": "2.3.3",
+        "@loaders.gl/math": "2.3.3",
+        "@loaders.gl/tiles": "2.3.3",
+        "@math.gl/core": "^3.3.0",
+        "@math.gl/geospatial": "^3.3.0",
+        "@probe.gl/stats": "^3.3.0"
+      }
+    },
+    "@loaders.gl/core": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/core/-/core-2.3.3.tgz",
+      "integrity": "sha512-5e3NHEY9RaNLvlbJ0B9AViMGLotVhVZXT+prkG4oqzGRHhz6Wk6hCCB1T43iVEl2XY+WF96aadHTuBQ14Nummg==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "@loaders.gl/loader-utils": "2.3.3"
+      }
+    },
+    "@loaders.gl/draco": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/draco/-/draco-2.3.3.tgz",
+      "integrity": "sha512-PcWt1AJwUhOuaEfhjLM9U1gQAcujKbWtR4v5cKcCBRpjRaQk/fVdpM+uT+pmRpgjSZmpIRr++di+V1lCsF6T+A==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "@loaders.gl/loader-utils": "2.3.3",
+        "draco3d": "^1.3.6"
+      }
+    },
+    "@loaders.gl/gis": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/gis/-/gis-2.3.3.tgz",
+      "integrity": "sha512-CvPF41EfYPIbv3vHx6vaX7b6pvp1CfvIugFamq96KRK/ZadNhnYEjPvJsekGDMSsuhCrMXz+Hadf0peW0Rqdow==",
+      "requires": {
+        "@loaders.gl/loader-utils": "2.3.3",
+        "@mapbox/vector-tile": "^1.3.1",
+        "pbf": "^3.2.1"
+      }
+    },
+    "@loaders.gl/gltf": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/gltf/-/gltf-2.3.3.tgz",
+      "integrity": "sha512-HZY3xdPug3svTLmyi94sJj1DvOrdOoSYC/LkIS796oGP5wlca7v74jaz2NHR/Aq242heCXjH3w0qbS0C3gfcYQ==",
+      "requires": {
+        "@loaders.gl/core": "2.3.3",
+        "@loaders.gl/draco": "2.3.3",
+        "@loaders.gl/images": "2.3.3",
+        "@loaders.gl/loader-utils": "2.3.3"
+      }
+    },
+    "@loaders.gl/images": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/images/-/images-2.3.3.tgz",
+      "integrity": "sha512-BTuy4SiCFXdvKMPw0C/Kl/oN9763QhDx/PUCfIMkuAYkQPfAsai5mNnFBs+4WeHg28INXcQlEG8Ad5/OwGNaCQ==",
+      "requires": {
+        "@loaders.gl/loader-utils": "2.3.3"
+      }
+    },
+    "@loaders.gl/loader-utils": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/loader-utils/-/loader-utils-2.3.3.tgz",
+      "integrity": "sha512-QUBBy5ZC8cyHYTAoK9Z84i/bAI/jCh/J4fOfh52ra8F373uXZpSNfPMoW7OMMutzZGPneD5Coe6TRL7kkbtJVw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "@probe.gl/stats": "^3.3.0"
+      }
+    },
+    "@loaders.gl/math": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/math/-/math-2.3.3.tgz",
+      "integrity": "sha512-DQp5d184kNNYkZC1josNH45HHsK4RXrBMAkmrzSQ4HqR/kirG4ODo0b6N7OAtYfQgmQSC+XiFbXILw1Hi4GWwg==",
+      "requires": {
+        "@loaders.gl/images": "2.3.3",
+        "@loaders.gl/loader-utils": "2.3.3",
+        "@math.gl/core": "^3.3.0"
+      }
+    },
+    "@loaders.gl/mvt": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/mvt/-/mvt-2.3.3.tgz",
+      "integrity": "sha512-1Dba/SigK70WhsUQxOV+hnaDBwIVyRLMvEv88UocLCS5ez+A4kMCQVqtgM/Q7LcYIniMZTbQI9j0Eqb7x7ifHA==",
+      "requires": {
+        "@loaders.gl/gis": "2.3.3",
+        "@loaders.gl/loader-utils": "2.3.3",
+        "@mapbox/point-geometry": "~0.1.0",
+        "@mapbox/vector-tile": "^1.3.1",
+        "pbf": "^3.2.1"
+      }
+    },
+    "@loaders.gl/terrain": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/terrain/-/terrain-2.3.3.tgz",
+      "integrity": "sha512-clmiaz8lb40YodbBo9gSnQ7c/+5nWrK7ejEUJ8lGJ2ukVIgzyTm0MMwjeroj64fudXunmvMZGpaK51GaYT93kQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "@loaders.gl/loader-utils": "2.3.3",
+        "@mapbox/martini": "^0.2.0"
+      }
+    },
+    "@loaders.gl/tiles": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/tiles/-/tiles-2.3.3.tgz",
+      "integrity": "sha512-a5+DlDg+WtBUjXlRkBCoqQQe/9abLhtbbYRGy87L0XWlkoqlehrrwk2qbPFJHCBadQno4402WZ343LoLFG5QEA==",
+      "requires": {
+        "@loaders.gl/core": "2.3.3",
+        "@loaders.gl/loader-utils": "2.3.3",
+        "@loaders.gl/math": "2.3.3",
+        "@math.gl/core": "^3.3.0",
+        "@math.gl/culling": "^3.3.0",
+        "@math.gl/geospatial": "^3.3.0",
+        "@math.gl/web-mercator": "^3.3.0",
+        "@probe.gl/stats": "^3.3.0"
+      }
+    },
+    "@luma.gl/constants": {
+      "version": "8.3.1",
+      "resolved": "https://registry.npmjs.org/@luma.gl/constants/-/constants-8.3.1.tgz",
+      "integrity": "sha512-3b2RScz7TSwsrHjRx1iYvyn46fKXtR/mOSyFOPiRx+15FOLBdkYL2DPpaJAZ5fU9Rx7ToazJiWW1Mzgn6z2d0A=="
+    },
+    "@luma.gl/core": {
+      "version": "8.3.1",
+      "resolved": "https://registry.npmjs.org/@luma.gl/core/-/core-8.3.1.tgz",
+      "integrity": "sha512-QMVxS83HQpVQ8D/74/A20fl1Wz7qLuV5bQuVZhvQ6bkHb8A6gAZMWr4Y2gpWNJTStWJuDkzAL8pB3us1jWCg2Q==",
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "@luma.gl/constants": "8.3.1",
+        "@luma.gl/engine": "8.3.1",
+        "@luma.gl/shadertools": "8.3.1",
+        "@luma.gl/webgl": "8.3.1"
+      }
+    },
+    "@luma.gl/engine": {
+      "version": "8.3.1",
+      "resolved": "https://registry.npmjs.org/@luma.gl/engine/-/engine-8.3.1.tgz",
+      "integrity": "sha512-oE7sNmSihLeMCCrGYx6hv3g1GZAcNUbL8XKAQQNxs7Bo4abGIURuHFEc9mpT90YtEtkQcg2OewykeZT9jD9mIg==",
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "@luma.gl/constants": "8.3.1",
+        "@luma.gl/gltools": "8.3.1",
+        "@luma.gl/shadertools": "8.3.1",
+        "@luma.gl/webgl": "8.3.1",
+        "math.gl": "^3.3.0",
+        "probe.gl": "^3.2.1"
+      }
+    },
+    "@luma.gl/experimental": {
+      "version": "8.3.1",
+      "resolved": "https://registry.npmjs.org/@luma.gl/experimental/-/experimental-8.3.1.tgz",
+      "integrity": "sha512-yN6UYqQ8bi6dCxjsoDIkDP3v7ul6W8K9vseq6wT73Qjn/+4vUDxe/yHgMmRXxik/CJDEWxb3RJhU6ZNf7uSLmA==",
+      "requires": {
+        "@luma.gl/constants": "8.3.1",
+        "earcut": "^2.0.6",
+        "math.gl": "^3.3.0"
+      }
+    },
+    "@luma.gl/gltools": {
+      "version": "8.3.1",
+      "resolved": "https://registry.npmjs.org/@luma.gl/gltools/-/gltools-8.3.1.tgz",
+      "integrity": "sha512-l/mnVSG5ioW19eZHMJlOD6crR58fwmdLoEKooXhnHiHofZ37h9HNlRlDf0XZIJPe4H4KLUM+Vv9VK0hqRrZHqA==",
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "@luma.gl/constants": "8.3.1",
+        "probe.gl": "^3.2.1"
+      }
+    },
+    "@luma.gl/shadertools": {
+      "version": "8.3.1",
+      "resolved": "https://registry.npmjs.org/@luma.gl/shadertools/-/shadertools-8.3.1.tgz",
+      "integrity": "sha512-y9s1R0Uv64QooGKROkNCvPKJd5CJDQ21wxJt5FH/E98F0z4IcJXzKWu1num/XG23eSJyQpIf7qsSqvXDBfm/fA==",
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "math.gl": "^3.3.0"
+      }
+    },
+    "@luma.gl/webgl": {
+      "version": "8.3.1",
+      "resolved": "https://registry.npmjs.org/@luma.gl/webgl/-/webgl-8.3.1.tgz",
+      "integrity": "sha512-lsGo5Pp/hPlKj1emErRAUvOBxztU/goltBh3hfhg7BoKdlEa6EJcfjqX+YkCmfc8bbp7QePM7mj+1ZsrzKhlgg==",
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "@luma.gl/constants": "8.3.1",
+        "@luma.gl/gltools": "8.3.1",
+        "probe.gl": "^3.2.1"
+      }
+    },
+    "@mapbox/geojson-rewind": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.0.tgz",
+      "integrity": "sha512-73l/qJQgj/T/zO1JXVfuVvvKDgikD/7D/rHAD28S9BG1OTstgmftrmqfCx4U+zQAmtsB6HcDA3a7ymdnJZAQgg==",
+      "requires": {
+        "concat-stream": "~2.0.0",
+        "minimist": "^1.2.5"
+      },
+      "dependencies": {
+        "concat-stream": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-2.0.0.tgz",
+          "integrity": "sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==",
+          "requires": {
+            "buffer-from": "^1.0.0",
+            "inherits": "^2.0.3",
+            "readable-stream": "^3.0.2",
+            "typedarray": "^0.0.6"
+          }
+        },
+        "minimist": {
+          "version": "1.2.5",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
+        },
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+          "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
+        },
+        "string_decoder": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+          "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+          "requires": {
+            "safe-buffer": "~5.2.0"
+          }
+        }
+      }
+    },
+    "@mapbox/geojson-types": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/geojson-types/-/geojson-types-1.0.2.tgz",
+      "integrity": "sha512-e9EBqHHv3EORHrSfbR9DqecPNn+AmuAoQxV6aL8Xu30bJMJR1o8PZLZzpk1Wq7/NfCbuhmakHTPYRhoqLsXRnw=="
+    },
+    "@mapbox/jsonlint-lines-primitives": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
+      "integrity": "sha1-zlblOfg1UrWNENZy6k1vya3HsjQ="
+    },
+    "@mapbox/mapbox-gl-supported": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-1.5.0.tgz",
+      "integrity": "sha512-/PT1P6DNf7vjEEiPkVIRJkvibbqWtqnyGaBz3nfRdcxclNSnSdaLU5tfAgcD7I8Yt5i+L19s406YLl1koLnLbg=="
+    },
+    "@mapbox/martini": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/martini/-/martini-0.2.0.tgz",
+      "integrity": "sha512-7hFhtkb0KTLEls+TRw/rWayq5EeHtTaErgm/NskVoXmtgAQu/9D299aeyj6mzAR/6XUnYRp2lU+4IcrYRFjVsQ=="
+    },
+    "@mapbox/point-geometry": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
+      "integrity": "sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI="
+    },
+    "@mapbox/tiny-sdf": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-1.1.1.tgz",
+      "integrity": "sha512-Ihn1nZcGIswJ5XGbgFAvVumOgWpvIjBX9jiRlIl46uQG9vJOF51ViBYHF95rEZupuyQbEmhLaDPLQlU7fUTsBg=="
+    },
+    "@mapbox/unitbezier": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
+      "integrity": "sha1-FWUb1VOme4WB+zmIEMmK2Go0Uk4="
+    },
+    "@mapbox/vector-tile": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz",
+      "integrity": "sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==",
+      "requires": {
+        "@mapbox/point-geometry": "~0.1.0"
+      }
+    },
+    "@mapbox/whoots-js": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz",
+      "integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q=="
+    },
+    "@math.gl/core": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@math.gl/core/-/core-3.3.1.tgz",
+      "integrity": "sha512-rO4Smhqe3NrDUjZ3HyRv/3igPodw3qY5UtK7Zdr966ixysalE/9PRNwJFi7e4U+I5xa7pJHcEUekzO+GyNuF1Q==",
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "gl-matrix": "^3.0.0"
+      }
+    },
+    "@math.gl/culling": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@math.gl/culling/-/culling-3.3.1.tgz",
+      "integrity": "sha512-x2oHEt5cn9TBLQOcVmVRgYut/JCWxejJAO1vuWwNUOxtERzMzRCEgIpltEyePEEqPny3rF+k4Uc/NwtC2/2/CQ==",
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "@math.gl/core": "3.3.1",
+        "gl-matrix": "^3.0.0"
+      }
+    },
+    "@math.gl/geospatial": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@math.gl/geospatial/-/geospatial-3.3.1.tgz",
+      "integrity": "sha512-tqdc3aXtF3yK4Dy09Ccp/qdPcqIVWLvxkLDpibyNQOuHEqBrpprx008D5Rq6wICdx1bRrlwr/vT8x65FLykw7Q==",
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "@math.gl/core": "3.3.1",
+        "gl-matrix": "^3.0.0"
+      }
+    },
+    "@math.gl/polygon": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@math.gl/polygon/-/polygon-3.3.1.tgz",
+      "integrity": "sha512-Qef9bIz7P+XPjNum2OwC0W6JRyU22sWPhq9qTsUYH4IcqVljzV7k2vcySHGCSq5muded5xQceG73W/YCMCK2Kg==",
+      "requires": {
+        "@math.gl/core": "3.3.1"
+      }
+    },
+    "@math.gl/web-mercator": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@math.gl/web-mercator/-/web-mercator-3.3.1.tgz",
+      "integrity": "sha512-gUOs7jJgTQi4DGLeX4NwiWn8R3Awg3HJxQyJeLpJ065xVREQAaXWnPbk7BcZlm+XLK0CzNLl3zHOQ4gLWGfW7g==",
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "gl-matrix": "^3.0.0"
+      }
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -2896,6 +3294,14 @@
       "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
       "dev": true
     },
+    "@probe.gl/stats": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@probe.gl/stats/-/stats-3.3.0.tgz",
+      "integrity": "sha512-CV4c3EgallqZTO88u34/u9L5asL0nCVP1BEkb4qcXlh8Qz2Vmygbyjz1ViQsct6rSi2lJ52lo6W0PnlpZJJvcA==",
+      "requires": {
+        "@babel/runtime": "^7.0.0"
+      }
+    },
     "@sinonjs/commons": {
       "version": "1.7.1",
       "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.7.1.tgz",
@@ -9326,6 +9732,11 @@
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",
       "integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg=="
     },
+    "csscolorparser": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
+      "integrity": "sha1-s085HupNqPPpgjHizNjfnAQfFxs="
+    },
     "cssesc": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-0.1.0.tgz",
@@ -10855,6 +11266,11 @@
       "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
       "dev": true
     },
+    "draco3d": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/draco3d/-/draco3d-1.3.6.tgz",
+      "integrity": "sha512-zZoH5JNcdWDrUb2ks2mbzGDUUPvDaDf1ysTJS2St+3/F/8XcKAX4VKgzPjTP7MfHegHQ7Udv8ovS+R3AgXlH7g=="
+    },
     "duplexer": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",
@@ -10906,6 +11322,11 @@
         }
       }
     },
+    "earcut": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.2.tgz",
+      "integrity": "sha512-eZoZPPJcUHnfRZ0PjLvx2qBordSiO8ofC3vt+qACLM95u+4DovnbYNpQtJh0DNsWj8RnxrQytD4WA8gj5cRIaQ=="
+    },
     "easy-stack": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/easy-stack/-/easy-stack-1.0.0.tgz",
@@ -12897,6 +13318,11 @@
       "integrity": "sha512-r8EC6NO1sngH/zdD9fiRDLdcgnbayXah+mLgManTaIZJqEC1MZstmnox8KpnI2/fxQwrp5OpCOYWLp4rBl4Jcg==",
       "dev": true
     },
+    "geojson-vt": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-3.2.1.tgz",
+      "integrity": "sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg=="
+    },
     "get-assigned-identifiers": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/get-assigned-identifiers/-/get-assigned-identifiers-1.2.0.tgz",
@@ -12965,6 +13391,11 @@
       "dev": true,
       "optional": true
     },
+    "gl-matrix": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.3.0.tgz",
+      "integrity": "sha512-COb7LDz+SXaHtl/h4LeaFcNdJdAQSDeVqjiIihSXNrkWObZLhDI4hIkZC11Aeqp7bcE72clzB0BnDXr2SmslRA=="
+    },
     "glob": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.1.tgz",
@@ -13161,6 +13592,11 @@
       "integrity": "sha1-TK+tdrxi8C+gObL5Tpo906ORpyU=",
       "dev": true
     },
+    "grid-index": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
+      "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
+    },
     "growly": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
@@ -13852,6 +14288,16 @@
         "concat-stream": "^1.4.1"
       }
     },
+    "h3-js": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/h3-js/-/h3-js-3.7.0.tgz",
+      "integrity": "sha512-EcH/qGU4khZsAEG39Uu8MvaCing0JFcuoe3K4Xmg5MofDIu1cNJl7z2AQS8ggvXGxboiLJqsGirhEqFKdd2gAA=="
+    },
+    "hammerjs": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
+      "integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE="
+    },
     "handle-thing": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
@@ -17631,6 +18077,11 @@
         }
       }
     },
+    "kdbush": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-3.0.0.tgz",
+      "integrity": "sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew=="
+    },
     "kew": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/kew/-/kew-0.7.0.tgz",
@@ -18204,6 +18655,43 @@
         "object-visit": "^1.0.0"
       }
     },
+    "mapbox-gl": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-1.12.0.tgz",
+      "integrity": "sha512-B3URR4qY9R/Bx+DKqP8qmGCai8IOZYMSZF7ZSvcCZaYTaOYhQQi8ErTEDZtFMOR0ZPj7HFWOkkhl5SqvDfpJpA==",
+      "requires": {
+        "@mapbox/geojson-rewind": "^0.5.0",
+        "@mapbox/geojson-types": "^1.0.2",
+        "@mapbox/jsonlint-lines-primitives": "^2.0.2",
+        "@mapbox/mapbox-gl-supported": "^1.5.0",
+        "@mapbox/point-geometry": "^0.1.0",
+        "@mapbox/tiny-sdf": "^1.1.1",
+        "@mapbox/unitbezier": "^0.0.0",
+        "@mapbox/vector-tile": "^1.3.1",
+        "@mapbox/whoots-js": "^3.1.0",
+        "csscolorparser": "~1.0.3",
+        "earcut": "^2.2.2",
+        "geojson-vt": "^3.2.1",
+        "gl-matrix": "^3.2.1",
+        "grid-index": "^1.1.0",
+        "minimist": "^1.2.5",
+        "murmurhash-js": "^1.0.0",
+        "pbf": "^3.2.1",
+        "potpack": "^1.0.1",
+        "quickselect": "^2.0.0",
+        "rw": "^1.3.3",
+        "supercluster": "^7.1.0",
+        "tinyqueue": "^2.0.3",
+        "vt-pbf": "^3.1.1"
+      },
+      "dependencies": {
+        "minimist": {
+          "version": "1.2.5",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
+        }
+      }
+    },
     "mapnik-reference": {
       "version": "6.0.5",
       "resolved": "https://registry.npmjs.org/mapnik-reference/-/mapnik-reference-6.0.5.tgz",
@@ -18239,6 +18727,14 @@
       "integrity": "sha512-rUxjysqif/BZQH2yhd5Aaq7vXMSx9NdEsQcyA07uEzIvxgI7zIr33gGsh+RU0/XjmQpCW7RsVof1vlkvQVCK5A==",
       "dev": true
     },
+    "math.gl": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/math.gl/-/math.gl-3.3.1.tgz",
+      "integrity": "sha512-jsiR24h2rScT+y9pU9CxeJ3cNydXMcXz6739FIbLNvopLdHJYhs72KXZvslOnQOcL7T7Zaa02UFJZm1ywaAlQQ==",
+      "requires": {
+        "@math.gl/core": "3.3.1"
+      }
+    },
     "mathml-tag-names": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.0.tgz",
@@ -18615,6 +19111,15 @@
         }
       }
     },
+    "mjolnir.js": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/mjolnir.js/-/mjolnir.js-2.4.1.tgz",
+      "integrity": "sha512-bpqKc70aNlijeQCapJ8529EmjVj8VSfYdzh1WsbhWp0XEQSm9hAB6X350OyRVDpH5oTdAyX/NeYFqtwyuO4ZKA==",
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "hammerjs": "^2.0.8"
+      }
+    },
     "mkdirp": {
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
@@ -18774,6 +19279,11 @@
         "minimatch": "^3.0.0"
       }
     },
+    "murmurhash-js": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/murmurhash-js/-/murmurhash-js-1.0.0.tgz",
+      "integrity": "sha1-sGJ44h/Gw3+lMTcysEEry2rhX1E="
+    },
     "mustache": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/mustache/-/mustache-1.1.0.tgz",
@@ -20158,6 +20668,15 @@
         }
       }
     },
+    "pbf": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
+      "integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
+      "requires": {
+        "ieee754": "^1.1.12",
+        "resolve-protobuf-schema": "^2.1.0"
+      }
+    },
     "pbkdf2": {
       "version": "3.0.17",
       "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.0.17.tgz",
@@ -22016,6 +22535,11 @@
         "uniqs": "^2.0.0"
       }
     },
+    "potpack": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.1.tgz",
+      "integrity": "sha512-15vItUAbViaYrmaB/Pbw7z6qX2xENbFSTA7Ii4tgbPtasxm5v6ryKhKtL91tpWovDJzTiZqdwzhcFBCwiMVdVw=="
+    },
     "prebuild-install": {
       "version": "5.3.4",
       "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-5.3.4.tgz",
@@ -22184,6 +22708,15 @@
       "integrity": "sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==",
       "dev": true
     },
+    "probe.gl": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/probe.gl/-/probe.gl-3.3.0.tgz",
+      "integrity": "sha512-59E6AEw4N8sU4PKfAl7S2UBYJCOa064WpEFcXfeFOB/36FJtplYY+261DqLjLAvOqRRHiKVEQUBo63PQ3jKeWA==",
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "@probe.gl/stats": "3.3.0"
+      }
+    },
     "process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
@@ -22225,6 +22758,11 @@
       "integrity": "sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk=",
       "dev": true
     },
+    "protocol-buffers-schema": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.4.0.tgz",
+      "integrity": "sha512-G/2kcamPF2S49W5yaMGdIpkG6+5wZF0fzBteLKgEHjbNzqjZQ85aAs1iJGto31EJaSTkNvHs5IXuHSaTLWBAiA=="
+    },
     "proxy-addr": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.4.tgz",
@@ -22334,6 +22872,11 @@
       "integrity": "sha1-Q2CxfGETatOAeDl/8RQW4Ybc+7g=",
       "dev": true
     },
+    "quickselect": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
+      "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
+    },
     "quote-stream": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/quote-stream/-/quote-stream-1.0.2.tgz",
@@ -23139,6 +23682,14 @@
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
       "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
     },
+    "resolve-protobuf-schema": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
+      "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
+      "requires": {
+        "protocol-buffers-schema": "^3.3.1"
+      }
+    },
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -23282,6 +23833,11 @@
         "aproba": "^1.1.1"
       }
     },
+    "rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q="
+    },
     "rx-lite": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz",
@@ -25856,6 +26412,14 @@
         }
       }
     },
+    "supercluster": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-7.1.0.tgz",
+      "integrity": "sha512-LDasImUAFMhTqhK+cUXfy9C2KTUqJ3gucLjmNLNFmKWOnDUBxLFLH9oKuXOTCLveecmxh8fbk8kgh6Q0gsfe2w==",
+      "requires": {
+        "kdbush": "^3.0.0"
+      }
+    },
     "supports-color": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
@@ -26783,6 +27347,11 @@
       "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",
       "integrity": "sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g="
     },
+    "tinyqueue": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz",
+      "integrity": "sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA=="
+    },
     "title-case": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/title-case/-/title-case-1.1.2.tgz",
@@ -27965,6 +28534,16 @@
         "indexof": "0.0.1"
       }
     },
+    "vt-pbf": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/vt-pbf/-/vt-pbf-3.1.1.tgz",
+      "integrity": "sha512-pHjWdrIoxurpmTcbfBWXaPwSmtPAHS105253P1qyEfSTV2HJddqjM+kIHquaT/L6lVJIk9ltTGc0IxR/G47hYA==",
+      "requires": {
+        "@mapbox/point-geometry": "0.1.0",
+        "@mapbox/vector-tile": "^1.3.1",
+        "pbf": "^3.0.5"
+      }
+    },
     "vue": {
       "version": "2.6.7",
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.7.tgz",
diff --git a/package.json b/package.json
index ad950a0477ae..c61b5144c87b 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,11 @@
     "@carto/toolkit-core": "0.0.1-rc.18",
     "@carto/toolkit-custom-storage": "0.0.1-rc.18",
     "@carto/zera": "1.0.7",
+    "@deck.gl/carto": "^8.3.7",
+    "@deck.gl/core": "^8.3.7",
+    "@deck.gl/geo-layers": "^8.3.7",
+    "@deck.gl/layers": "^8.3.7",
+    "@deck.gl/mesh-layers": "^8.3.7",
     "backbone": "1.2.3",
     "backbone-forms": "0.14.0",
     "backbone-model-file-upload": "CartoDB/backbone-model-file-upload#1.0.2",
@@ -48,6 +53,7 @@
     "jquery": "2.1.4",
     "leaflet": "CartoDB/Leaflet#v1.3.1-carto1",
     "loader-utils": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.17.tgz",
+    "mapbox-gl": "^1.12.0",
     "moment": "2.18.1",
     "moment-timezone": "^0.5.13",
     "node-polyglot": "1.0.0",

From 3359605dfefa6d4f073d7532bd97072e6620213b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Mon, 16 Nov 2020 14:32:22 +0100
Subject: [PATCH 02/56] Add MapPreview component

---
 .../components/Catalog/MapPreview.vue         | 122 ++++++++++++++++++
 .../pages/Data/CatalogDatasetMap.vue          |   1 -
 .../pages/Data/CatalogDatasetSummary.vue      |   5 +
 3 files changed, 127 insertions(+), 1 deletion(-)
 create mode 100644 lib/assets/javascripts/new-dashboard/components/Catalog/MapPreview.vue

diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/MapPreview.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/MapPreview.vue
new file mode 100644
index 000000000000..2cf7b3b80f78
--- /dev/null
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/MapPreview.vue
@@ -0,0 +1,122 @@
+<template>
+  <div class="map-preview">
+    <div id="map"></div>
+    <canvas id="deck-canvas"></canvas>
+    <div class="overlay">
+      <router-link :to="{ name: 'catalog-dataset-map' }" replace>
+        Explore
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import mapboxgl from 'mapbox-gl';
+import { Deck } from '@deck.gl/core';
+import { CartoBQTilerLayer, setDefaultCredentials, BASEMAP } from '@deck.gl/carto';
+
+export default {
+  name: 'PreviewMap',
+  computed: {
+    ...mapState({
+      dataset: state => state.catalog.dataset
+    }),
+    name () {
+      return this.dataset.name;
+    }
+  },
+  created () {
+    this.importMapboxStyles();
+  },
+  mounted () {
+    // Testing ID: acs_sociodemogr_b758e778
+
+    setDefaultCredentials({
+      username: 'public',
+      apiKey: 'default_public',
+      mapsUrl: 'https://maps-api-v2.carto-staging.com/user/{user}'
+    });
+
+    const INITIAL_VIEW_STATE = {
+      latitude: 40.750736,
+      longitude: -73.973674,
+      zoom: 11 + 1.5
+    };
+
+    const map = new mapboxgl.Map({
+      container: 'map',
+      style: BASEMAP.POSITRON,
+      interactive: false,
+      center: [INITIAL_VIEW_STATE.longitude, INITIAL_VIEW_STATE.latitude],
+      zoom: INITIAL_VIEW_STATE.zoom,
+      attributionControl: false
+    });
+
+    const deck = new Deck({
+      canvas: 'deck-canvas',
+      initialViewState: INITIAL_VIEW_STATE,
+      layers: [
+        new CartoBQTilerLayer({
+          data: this.tilesetSampleId(this.dataset.id),
+          getFillColor: [130, 109, 186],
+          getLineColor: [0, 0, 0, 100],
+          lineWidthMinPixels: 0.5
+        })
+      ]
+    });
+  },
+  methods: {
+    importMapboxStyles () {
+      let style = document.createElement('link');
+      style.type = 'text/css';
+      style.rel = 'stylesheet';
+      style.href = 'https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css';
+      document.head.appendChild(style);
+    },
+    tilesetSampleId (id) {
+      const TILESET_SAMPLE_PROJECT_MAP = {
+        'carto-do': 'do-tileset-sample-stag',
+        'carto-do-public-data': 'do-public-tileset-sample-stag'
+      };
+      const [project, dataset, table] = id.split('.');
+      return [TILESET_SAMPLE_PROJECT_MAP[project], dataset, table].join('.');
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'new-dashboard/styles/variables';
+
+.map-preview {
+  position: relative;
+  height: 200px;
+  width: 100%;
+  margin: 12px 0;
+
+  & > * {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .overlay {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    a {
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 20px;
+      padding: 10px 16px;
+      border-radius: 4px;
+      color: white;
+      background:rgba(52,68,76, 0.6);
+    }
+  }
+}
+</style>
diff --git a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue
index d813d275ddde..86fafa462b20 100644
--- a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue
+++ b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue
@@ -99,7 +99,6 @@ export default {
 .viewer-container {
   margin: 12px auto;
   padding: 16px;
-  max-width: 800px;
   border-radius: 4px;
   background: $color-primary--soft;
 
diff --git a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetSummary.vue b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetSummary.vue
index c8c75b9219ca..5c7bee4896f4 100644
--- a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetSummary.vue
+++ b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetSummary.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="grid grid-cell u-flex__justify--center wrap-reverse--tablet">
     <div class="grid-cell grid-cell--col9 grid-cell--col12--tablet main-column">
+      <MapPreview />
       <p
         class="text is-caption is-txtMainTextColor u-mt--32 u-mt--12--tablet"
         v-html="dataset.description || 'No description available.'"
@@ -103,9 +104,13 @@ import { temporalAggregationName } from 'new-dashboard/utils/catalog/temporal-ag
 import { geometryTypeName } from 'new-dashboard/utils/catalog/geometry-type-name';
 import { updateFrequencyName } from 'new-dashboard/utils/catalog/update-frequency-name';
 import { sendCustomDimensions } from 'new-dashboard/utils/catalog/custom-dimensions-ga';
+import MapPreview from 'new-dashboard/components/Catalog/MapPreview';
 
 export default {
   name: 'CatalogDatasetSummary',
+  components: {
+    MapPreview
+  },
   watch: {
     dataset: {
       handler (value) {

From 8eb5a324f3fdaa7ab21cc4c6b3226b6a92ec714d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Mon, 16 Nov 2020 14:49:47 +0100
Subject: [PATCH 03/56] Add basic tooltip

---
 .../pages/Data/CatalogDatasetMap.vue              | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue
index 86fafa462b20..02560b38dd6c 100644
--- a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue
+++ b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue
@@ -68,9 +68,20 @@ export default {
           data: this.tilesetSampleId(this.dataset.id),
           getFillColor: [130, 109, 186],
           getLineColor: [0, 0, 0, 100],
-          lineWidthMinPixels: 0.5
+          lineWidthMinPixels: 0.5,
+          pickable: true
         })
-      ]
+      ],
+      getTooltip: ({ object }) => {
+        if (!object) return false;
+        let html = '';
+        for (let p in object.properties) {
+          if (p === 'total_pop') {
+            html += `${p}: ${object.properties[p]}<br/>`;
+          }
+        }
+        return { html };
+      }
     });
   },
   methods: {

From 62041bf58b9471e791ab66c7f9286b6b1d8a8239 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Mon, 16 Nov 2020 14:58:25 +0100
Subject: [PATCH 04/56] Fix dataset map route

---
 lib/assets/javascripts/new-dashboard/router/routes/data.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/assets/javascripts/new-dashboard/router/routes/data.js b/lib/assets/javascripts/new-dashboard/router/routes/data.js
index ae589e1bde2a..d208c55484e1 100644
--- a/lib/assets/javascripts/new-dashboard/router/routes/data.js
+++ b/lib/assets/javascripts/new-dashboard/router/routes/data.js
@@ -49,7 +49,7 @@ const routes = [
     children: [
       {
         path: 'map',
-        name: 'catalog-dataset-data',
+        name: 'catalog-dataset-map',
         component: CatalogDatasetMap,
         meta: {
           title: () => 'Spatial Data Catalog | CARTO'

From bb18565b89dcc50f92c22dc4a55b3872fcfbeb12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Tue, 17 Nov 2020 11:43:48 +0100
Subject: [PATCH 05/56] Review UI design. Add map info and default message

---
 .../assets/icons/catalog/button-question.svg  |  1 +
 .../components/Catalog/MapPreview.vue         |  6 +-
 .../pages/Data/CatalogDatasetMap.vue          | 90 +++++++++++++++----
 package.json                                  |  2 +-
 4 files changed, 80 insertions(+), 19 deletions(-)
 create mode 100644 lib/assets/javascripts/new-dashboard/assets/icons/catalog/button-question.svg

diff --git a/lib/assets/javascripts/new-dashboard/assets/icons/catalog/button-question.svg b/lib/assets/javascripts/new-dashboard/assets/icons/catalog/button-question.svg
new file mode 100644
index 000000000000..32452d7a7d5c
--- /dev/null
+++ b/lib/assets/javascripts/new-dashboard/assets/icons/catalog/button-question.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><g fill="none" fill-rule="evenodd"><rect width="32" height="32" fill="#162945" rx="4"/><path d="M16 7c4.97 0 9 4.03 9 9s-4.03 9-9 9-9-4.03-9-9 4.03-9 9-9zm0 13h-2v2h2v-2zm.556-10h-1.334l-.183.005C13.345 10.1 12 11.504 12 13.222V14h2v-.778l.006-.125c.064-.616.584-1.097 1.216-1.097h1.334l.139.007c.732.07 1.305.687 1.305 1.437v.337l-.006.154c-.061.764-.573 1.426-1.31 1.672l-.314.104-.182.067C14.874 16.298 14 17.573 14 19h2l.007-.144c.056-.571.443-1.063.996-1.247l.313-.105.19-.068C19.004 16.85 20 15.403 20 13.78v-.337l-.005-.189c-.098-1.813-1.6-3.254-3.44-3.254z" fill="#FFF"/></g></svg>
\ No newline at end of file
diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/MapPreview.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/MapPreview.vue
index 2cf7b3b80f78..3a45c6cedffa 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/MapPreview.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/MapPreview.vue
@@ -91,7 +91,7 @@ export default {
 
 .map-preview {
   position: relative;
-  height: 200px;
+  height: 180px;
   width: 100%;
   margin: 12px 0;
 
@@ -111,11 +111,11 @@ export default {
     a {
       font-size: 12px;
       font-weight: 600;
-      line-height: 20px;
+      line-height: 16px;
       padding: 10px 16px;
       border-radius: 4px;
       color: white;
-      background:rgba(52,68,76, 0.6);
+      background:rgba(46, 60, 67, 0.8);
     }
   }
 }
diff --git a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue
index 02560b38dd6c..73598d613a39 100644
--- a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue
+++ b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue
@@ -1,9 +1,23 @@
 <template>
-  <div class="viewer-container">
-    <h1>{{ name }}</h1>
-    <div class="map-container">
-      <div id="map"></div>
-      <canvas id="deck-canvas"></canvas>
+  <div>
+    <div class="viewer-container">
+      <div class="header-container">
+        <h1 class="title is-caption is-txtMainTextColor">{{ title }}</h1>
+        <img src="../../assets/icons/catalog/button-question.svg" alt="question" @click="infoVisible = !infoVisible">
+      </div>
+      <div class="map-container">
+        <div id="map"></div>
+        <canvas id="deck-canvas"></canvas>
+        <div class="map-info" v-show="infoVisible">
+          <p class="is-small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo.</p>
+        </div>
+      </div>
+    </div>
+    <div class="footer-container" v-if="defaultSource">
+      <span class="is-small">
+        (*) Sample not available: this preview is for&nbsp;
+        <i class="is-semibold is-italic">{{ defaultSource }}</i>
+      </span>
     </div>
   </div>
 </template>
@@ -16,12 +30,20 @@ import { CartoBQTilerLayer, setDefaultCredentials, BASEMAP } from '@deck.gl/cart
 
 export default {
   name: 'CatalogDatasetMap',
+  data () {
+    return {
+      infoVisible: false
+    };
+  },
   computed: {
     ...mapState({
       dataset: state => state.catalog.dataset
     }),
-    name () {
+    title () {
       return this.dataset.name;
+    },
+    defaultSource () {
+      return this.dataset.sample_info && this.dataset.sample_info.default_source || 'Test';
     }
   },
   created () {
@@ -47,7 +69,8 @@ export default {
       style: BASEMAP.POSITRON,
       interactive: false,
       center: [INITIAL_VIEW_STATE.longitude, INITIAL_VIEW_STATE.latitude],
-      zoom: INITIAL_VIEW_STATE.zoom
+      zoom: INITIAL_VIEW_STATE.zoom,
+      attributionControl: false
     });
 
     const deck = new Deck({
@@ -108,21 +131,26 @@ export default {
 @import 'new-dashboard/styles/variables';
 
 .viewer-container {
-  margin: 12px auto;
-  padding: 16px;
+  margin: 12px;
+  padding: 12px;
   border-radius: 4px;
   background: $color-primary--soft;
 
-  h1 {
-    font-size: 14px;
-    font-weight: 600;
-    padding-bottom: 16px;
-    color: $text__color;
+  .header-container {
+    display: flex;
+    justify-content: space-between;
+
+    img {
+      width: 30px;
+      height: 30px;
+      cursor: pointer;
+    }
   }
 
   .map-container {
     position: relative;
-    height: 460px;
+    height: 500px;
+    margin-top: 6px;
 
     & > * {
       position: absolute;
@@ -131,6 +159,38 @@ export default {
       width: 100%;
       height: 100%;
     }
+
+    .map-info {
+      left: auto;
+      right: 0;
+      width: 240px;
+      height: auto;
+      padding: 20px;
+      border-radius: 4px;
+      background-color: white;
+      box-shadow: 0 2px 8px 0 rgba(44, 44, 44, 0.16);
+
+      p {
+        color: $neutral--700;
+      }
+    }
+  }
+}
+
+.footer-container {
+  display: flex;
+  justify-content: flex-end;
+  margin: 24px 12px;
+
+  span {
+    display: flex;
+    align-items: center;
+    white-space: pre-wrap;
+
+    &:after {
+      content: url('../../assets/icons/catalog/interface-alert-triangle.svg');
+      margin-left: 12px;
+    }
   }
 }
 </style>
diff --git a/package.json b/package.json
index c61b5144c87b..54893b6e3950 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "@carto/toolkit-core": "0.0.1-rc.18",
     "@carto/toolkit-custom-storage": "0.0.1-rc.18",
     "@carto/zera": "1.0.7",
-    "@deck.gl/carto": "^8.3.7",
+    "@deck.gl/carto": "8.4.0-alpha.2",
     "@deck.gl/core": "^8.3.7",
     "@deck.gl/geo-layers": "^8.3.7",
     "@deck.gl/layers": "^8.3.7",

From ff14f518c194a733006e1d80f2ad574adb06ef79 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Tue, 17 Nov 2020 23:58:50 +0100
Subject: [PATCH 06/56] Add map recenter

---
 .../assets/icons/catalog/recenter.svg         |   1 +
 .../pages/Data/CatalogDatasetMap.vue          | 106 +++++++++++++-----
 package-lock.json                             |  30 ++---
 package.json                                  |  10 +-
 4 files changed, 98 insertions(+), 49 deletions(-)
 create mode 100644 lib/assets/javascripts/new-dashboard/assets/icons/catalog/recenter.svg

diff --git a/lib/assets/javascripts/new-dashboard/assets/icons/catalog/recenter.svg b/lib/assets/javascripts/new-dashboard/assets/icons/catalog/recenter.svg
new file mode 100644
index 000000000000..687746deafbf
--- /dev/null
+++ b/lib/assets/javascripts/new-dashboard/assets/icons/catalog/recenter.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><g fill="none" fill-rule="evenodd"><path d="M0 .001h20v20H0z"/><path d="M6.666 14.511v2.155h1.667v-5h-5v1.667h2.155l-4.411 4.411 1.179 1.178zm10-7.845h-2.155l4.411-4.41-1.178-1.179-4.411 4.411V3.333h-1.667v5h5zm-3.333 7.845l4.411 4.411 1.178-1.178-4.411-4.411h2.155v-1.667h-5v5h1.667zm-10-7.845v1.667h5v-5H6.666v2.155l-4.41-4.411-1.179 1.179 4.411 4.41z" fill="#2A2727" fill-rule="nonzero"/></g></svg>
\ No newline at end of file
diff --git a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue
index 73598d613a39..77347254bac3 100644
--- a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue
+++ b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue
@@ -11,6 +11,10 @@
         <div class="map-info" v-show="infoVisible">
           <p class="is-small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo.</p>
         </div>
+        <div class="recenter" @click="recenter">
+          <img src="../../assets/icons/catalog/recenter.svg" alt="recenter">
+          <p class="is-small is-semibold">Recenter</p>
+        </div>
       </div>
     </div>
     <div class="footer-container" v-if="defaultSource">
@@ -26,13 +30,23 @@
 import { mapState } from 'vuex';
 import mapboxgl from 'mapbox-gl';
 import { Deck } from '@deck.gl/core';
-import { CartoBQTilerLayer, setDefaultCredentials, BASEMAP } from '@deck.gl/carto';
+import { CartoBQTilerLayer, BASEMAP } from '@deck.gl/carto';
+
+let deck;
 
 export default {
   name: 'CatalogDatasetMap',
   data () {
     return {
-      infoVisible: false
+      map: null,
+      infoVisible: false,
+      initialViewState: {
+        latitude: 0,
+        longitude: 0,
+        zoom: 0,
+        bearing: 0,
+        pitch: 0
+      }
     };
   },
   computed: {
@@ -52,47 +66,45 @@ export default {
   mounted () {
     // Testing ID: acs_sociodemogr_b758e778
 
-    setDefaultCredentials({
-      username: 'public',
-      apiKey: 'default_public',
-      mapsUrl: 'https://maps-api-v2.carto-staging.com/user/{user}'
-    });
-
-    const INITIAL_VIEW_STATE = {
-      latitude: 40.750736,
-      longitude: -73.973674,
-      zoom: 11 + 1
-    };
-
-    const map = new mapboxgl.Map({
+    this.map = new mapboxgl.Map({
       container: 'map',
       style: BASEMAP.POSITRON,
       interactive: false,
-      center: [INITIAL_VIEW_STATE.longitude, INITIAL_VIEW_STATE.latitude],
-      zoom: INITIAL_VIEW_STATE.zoom,
-      attributionControl: false
+      attributionControl: false,
+      center: [this.initialViewState.longitude, this.initialViewState.latitude],
+      zoom: this.initialViewState.zoom
     });
 
-    const deck = new Deck({
+    deck = new Deck({
       canvas: 'deck-canvas',
-      initialViewState: INITIAL_VIEW_STATE,
-      controller: true,
+      initialViewState: this.initialViewState,
       onViewStateChange: ({ viewState }) => {
-        // Synchronize Deck.gl view with Mapbox
-        map.jumpTo({
-          center: [viewState.longitude, viewState.latitude],
-          zoom: viewState.zoom,
-          bearing: viewState.bearing,
-          pitch: viewState.pitch
-        });
+        this.syncMapboxViewState(viewState);
       },
+      controller: true,
       layers: [
         new CartoBQTilerLayer({
           data: this.tilesetSampleId(this.dataset.id),
+          credentials: {
+            username: 'public',
+            apiKey: 'default_public',
+            mapsUrl: 'https://maps-api-v2.carto-staging.com/user/{user}'
+          },
           getFillColor: [130, 109, 186],
           getLineColor: [0, 0, 0, 100],
           lineWidthMinPixels: 0.5,
-          pickable: true
+          pickable: true,
+          onDataLoad: (tileJSON) => {
+            const { center } = tileJSON;
+            this.initialViewState = {
+              zoom: parseFloat(center[2]) - 1,
+              latitude: parseFloat(center[1]),
+              longitude: parseFloat(center[0]),
+              bearing: 0,
+              pitch: 0
+            };
+            this.recenter();
+          }
         })
       ],
       getTooltip: ({ object }) => {
@@ -122,6 +134,22 @@ export default {
       };
       const [project, dataset, table] = id.split('.');
       return [TILESET_SAMPLE_PROJECT_MAP[project], dataset, table].join('.');
+    },
+    syncMapboxViewState (viewState) {
+      this.map.jumpTo({
+        center: [viewState.longitude, viewState.latitude],
+        zoom: viewState.zoom,
+        bearing: viewState.bearing,
+        pitch: viewState.pitch
+      });
+    },
+    recenter () {
+      // Hack to force initialViewState to change
+      this.initialViewState.zoom += 0.000001;
+      deck.setProps({ initialViewState: { ...this.initialViewState } });
+      this.initialViewState.zoom -= 0.000001;
+      deck.setProps({ initialViewState: { ...this.initialViewState } });
+      this.syncMapboxViewState(this.initialViewState);
     }
   }
 };
@@ -175,6 +203,26 @@ export default {
       }
     }
   }
+
+  .recenter {
+    display: flex;
+    align-items: center;
+    top: auto;
+    left: 0;
+    bottom: 0;
+    width: auto;
+    height: auto;
+    margin: 20px;
+    padding: 8px 12px;
+    border-radius: 4px;
+    background-color: white;
+    box-shadow: 0 2px 8px 0 rgba(44, 44, 44, 0.16);
+    cursor: pointer;
+
+    p {
+      margin-left: 8px;
+    }
+  }
 }
 
 .footer-container {
diff --git a/package-lock.json b/package-lock.json
index 86f384dbb39a..cb376ef4c3e9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1602,9 +1602,9 @@
       }
     },
     "@deck.gl/carto": {
-      "version": "8.3.7",
-      "resolved": "https://registry.npmjs.org/@deck.gl/carto/-/carto-8.3.7.tgz",
-      "integrity": "sha512-prNT61z7ToYU9wvnHEpxbzBv1oxdCZrijogpnimulhD7fL7Mp01f9pFfoo2fhHwfFpdPCZrPTWncOM/dZNC/pA==",
+      "version": "8.4.0-alpha.2",
+      "resolved": "https://registry.npmjs.org/@deck.gl/carto/-/carto-8.4.0-alpha.2.tgz",
+      "integrity": "sha512-54ldcxI+72cnIb7RUp6I/oW2kTamKtY3HBKA+v9gNgamUmTNT9ROWipXccl6xpe42+nhbALBk8X48w84mNvWcA==",
       "requires": {
         "@loaders.gl/loader-utils": "^2.3.0",
         "@loaders.gl/mvt": "^2.3.0",
@@ -1613,9 +1613,9 @@
       }
     },
     "@deck.gl/core": {
-      "version": "8.3.7",
-      "resolved": "https://registry.npmjs.org/@deck.gl/core/-/core-8.3.7.tgz",
-      "integrity": "sha512-SfQVk4z9aHxsj/+KZFj838xRgrKmh3x08euRavnaSW25CLEYWLHf5crmxfzEYcyErDz8x9ydkr/T4POloH3eqA==",
+      "version": "8.4.0-alpha.2",
+      "resolved": "https://registry.npmjs.org/@deck.gl/core/-/core-8.4.0-alpha.2.tgz",
+      "integrity": "sha512-WoIPL+Q/mWVym/AeB8EUiV/khdofo/KVB5vD0gqbuQJeiqRxG/gm26hq+jEXKpUqJ90jy4du7vXiEOdMc/jZXQ==",
       "requires": {
         "@loaders.gl/core": "^2.3.0",
         "@loaders.gl/images": "^2.3.0",
@@ -1628,9 +1628,9 @@
       }
     },
     "@deck.gl/geo-layers": {
-      "version": "8.3.7",
-      "resolved": "https://registry.npmjs.org/@deck.gl/geo-layers/-/geo-layers-8.3.7.tgz",
-      "integrity": "sha512-DLp4/U6EDmUugamTGDipB9OYk0hZvCdFoKdqe65UujmnRxVWOmzUQJdWdGUPnWfhHFk7oDWekSH1oOerq8MFGQ==",
+      "version": "8.4.0-alpha.2",
+      "resolved": "https://registry.npmjs.org/@deck.gl/geo-layers/-/geo-layers-8.4.0-alpha.2.tgz",
+      "integrity": "sha512-qNvcQ8s6fmJmp65gYiqu/TcMDMw2ZZVIXxbEFlMapuk86J2LA09XB7yBy192ryj1oXxKkgsrf8NtA2i1C0Z/JA==",
       "requires": {
         "@loaders.gl/3d-tiles": "^2.3.0",
         "@loaders.gl/loader-utils": "^2.3.0",
@@ -1645,9 +1645,9 @@
       }
     },
     "@deck.gl/layers": {
-      "version": "8.3.7",
-      "resolved": "https://registry.npmjs.org/@deck.gl/layers/-/layers-8.3.7.tgz",
-      "integrity": "sha512-cwt6PPrGTwy1RgxIh/BF/HDtmWiQwH8cJSPPzGN6UZpoqHNlRp/g05hJpr8FQCjkvUr11GyH2+vA5ndD5KfW2A==",
+      "version": "8.4.0-alpha.2",
+      "resolved": "https://registry.npmjs.org/@deck.gl/layers/-/layers-8.4.0-alpha.2.tgz",
+      "integrity": "sha512-llCOxOWqVZOgDJVZbdxh8BOr9ZA6lMUsiAEhsGrh6thunFYs9HcYLqlPRvgwVDHcexWc6ewthZXbO3aI7sHOJw==",
       "requires": {
         "@loaders.gl/images": "^2.3.0",
         "@mapbox/tiny-sdf": "^1.1.0",
@@ -1656,9 +1656,9 @@
       }
     },
     "@deck.gl/mesh-layers": {
-      "version": "8.3.7",
-      "resolved": "https://registry.npmjs.org/@deck.gl/mesh-layers/-/mesh-layers-8.3.7.tgz",
-      "integrity": "sha512-mJ2dMzHhlwD7LtAFNUG8skFnY8lRUnkZpiG4hAXCWG1x5T4pTGOKeVuWZkoZJGjYlqnNuyuHk6Mk71/A834yvg==",
+      "version": "8.4.0-alpha.2",
+      "resolved": "https://registry.npmjs.org/@deck.gl/mesh-layers/-/mesh-layers-8.4.0-alpha.2.tgz",
+      "integrity": "sha512-8dNJfAOxTwZxgATmv/8g5ETkm/Mx2BnbYXiINmYr8znQeQYgW/meg7ab2hFD6smzXa8mLXBfCW9DHnDrxd+oRw==",
       "requires": {
         "@luma.gl/experimental": "^8.3.1",
         "@luma.gl/shadertools": "^8.3.1"
diff --git a/package.json b/package.json
index 54893b6e3950..fe09fddb755f 100644
--- a/package.json
+++ b/package.json
@@ -23,11 +23,11 @@
     "@carto/toolkit-core": "0.0.1-rc.18",
     "@carto/toolkit-custom-storage": "0.0.1-rc.18",
     "@carto/zera": "1.0.7",
-    "@deck.gl/carto": "8.4.0-alpha.2",
-    "@deck.gl/core": "^8.3.7",
-    "@deck.gl/geo-layers": "^8.3.7",
-    "@deck.gl/layers": "^8.3.7",
-    "@deck.gl/mesh-layers": "^8.3.7",
+    "@deck.gl/carto": "^8.4.0-alpha.2",
+    "@deck.gl/core": "^8.4.0-alpha.2",
+    "@deck.gl/geo-layers": "^8.4.0-alpha.2",
+    "@deck.gl/layers": "^8.4.0-alpha.2",
+    "@deck.gl/mesh-layers": "^8.4.0-alpha.2",
     "backbone": "1.2.3",
     "backbone-forms": "0.14.0",
     "backbone-model-file-upload": "CartoDB/backbone-model-file-upload#1.0.2",

From 3bcbb5980f26397c5c50164cbc21d4b1b1ac047b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Wed, 18 Nov 2020 00:58:52 +0100
Subject: [PATCH 07/56] Add popup from default variable

---
 .../pages/Data/CatalogDatasetMap.vue          | 55 +++++++++++++++----
 1 file changed, 43 insertions(+), 12 deletions(-)

diff --git a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue
index 77347254bac3..27263d613742 100644
--- a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue
+++ b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue
@@ -9,7 +9,7 @@
         <div id="map"></div>
         <canvas id="deck-canvas"></canvas>
         <div class="map-info" v-show="infoVisible">
-          <p class="is-small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas varius tortor nibh, sit amet tempor nibh finibus et. Aenean eu enim justo.</p>
+          <p class="is-small">{{ description }}</p>
         </div>
         <div class="recenter" @click="recenter">
           <img src="../../assets/icons/catalog/recenter.svg" alt="recenter">
@@ -39,6 +39,7 @@ export default {
   data () {
     return {
       map: null,
+      variable: null,
       infoVisible: false,
       initialViewState: {
         latitude: 0,
@@ -51,11 +52,15 @@ export default {
   },
   computed: {
     ...mapState({
-      dataset: state => state.catalog.dataset
+      dataset: state => state.catalog.dataset,
+      keyVariables: state => state.catalog.keyVariables
     }),
     title () {
       return this.dataset.name;
     },
+    description () {
+      return this.variable && this.variable.description;
+    },
     defaultSource () {
       return this.dataset.sample_info && this.dataset.sample_info.default_source || 'Test';
     }
@@ -64,8 +69,6 @@ export default {
     this.importMapboxStyles();
   },
   mounted () {
-    // Testing ID: acs_sociodemogr_b758e778
-
     this.map = new mapboxgl.Map({
       container: 'map',
       style: BASEMAP.POSITRON,
@@ -93,9 +96,12 @@ export default {
           getFillColor: [130, 109, 186],
           getLineColor: [0, 0, 0, 100],
           lineWidthMinPixels: 0.5,
+          getLineWidth: 4,
+          getRadius: 16,
           pickable: true,
           onDataLoad: (tileJSON) => {
-            const { center } = tileJSON;
+            console.log('TILEJSON', tileJSON);
+            const { center, tilestats } = tileJSON;
             this.initialViewState = {
               zoom: parseFloat(center[2]) - 1,
               latitude: parseFloat(center[1]),
@@ -104,18 +110,29 @@ export default {
               pitch: 0
             };
             this.recenter();
+            this.variable = tilestats.layers[0].attributes[1];
+            this.fetchVariable();
           }
         })
       ],
       getTooltip: ({ object }) => {
         if (!object) return false;
-        let html = '';
-        for (let p in object.properties) {
-          if (p === 'total_pop') {
-            html += `${p}: ${object.properties[p]}<br/>`;
-          }
+        const title = this.variable.name || this.variable.attribute;
+        const value = object.properties[this.variable.attribute];
+        if (value === undefined) return false;
+        const html = `
+          <p style="margin: 0 0 0 4px; color: #6f777c;">${title}</p>
+          <p style="margin: 4px 0 0 4px;"><b>${value}</b></p>
+        `;
+        const style = {
+          'padding': '8px 12px',
+          'border-radius': '2px',
+          'font-size': '12px',
+          'color': '#162945',
+          'background-color': 'white',
+          'border': 'solid 1px #e6e8eb'
         }
-        return { html };
+        return { html, style };
       }
     });
   },
@@ -150,6 +167,20 @@ export default {
       this.initialViewState.zoom -= 0.000001;
       deck.setProps({ initialViewState: { ...this.initialViewState } });
       this.syncMapboxViewState(this.initialViewState);
+    },
+    async fetchVariable () {
+      await this.$store.dispatch('catalog/fetchKeyVariables', {
+        id: this.$route.params.datasetId,
+        type: this.$route.params.type
+      });
+      const keyVariable = this.keyVariables.find((v) => {
+        return v.id.split('.').slice(-1)[0] === this.variable.attribute;
+      });
+      this.variable = {
+        ...this.variable,
+        ...keyVariable
+      };
+      console.log('VARIABLE', { ...this.variable });
     }
   }
 };
@@ -177,7 +208,7 @@ export default {
 
   .map-container {
     position: relative;
-    height: 500px;
+    height: 600px;
     margin-top: 6px;
 
     & > * {

From 9510434b16b5853ca56e0155858fe51ec8761a48 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Wed, 18 Nov 2020 01:50:33 +0100
Subject: [PATCH 08/56] Refactor and extract BaseMap component

---
 .../components/Catalog/BaseMap.vue            | 229 ++++++++++++++++++
 .../components/Catalog/MapPreview.vue         |  75 +-----
 .../pages/Data/CatalogDatasetMap.vue          | 213 ++--------------
 3 files changed, 247 insertions(+), 270 deletions(-)
 create mode 100644 lib/assets/javascripts/new-dashboard/components/Catalog/BaseMap.vue

diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/BaseMap.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/BaseMap.vue
new file mode 100644
index 000000000000..1e907b4dc26d
--- /dev/null
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/BaseMap.vue
@@ -0,0 +1,229 @@
+<template>
+  <div class="base-map">
+    <div id="map"></div>
+    <canvas id="deck-canvas"></canvas>
+    <div v-show="showInfo" class="map-info">
+      <p class="is-small">{{ description }}</p>
+    </div>
+    <div v-if="recenter" class="recenter" @click="recenterMap">
+      <img src="../../assets/icons/catalog/recenter.svg" alt="recenter">
+      <p class="is-small is-semibold">Recenter</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import mapboxgl from 'mapbox-gl';
+import { Deck } from '@deck.gl/core';
+import { CartoBQTilerLayer, BASEMAP } from '@deck.gl/carto';
+
+let deck;
+
+export default {
+  name: 'BaseMap',
+  props: {
+    recenter: Boolean,
+    showInfo: Boolean
+  },
+  data () {
+    return {
+      map: null,
+      variable: null,
+      initialViewState: {
+        latitude: 0,
+        longitude: 0,
+        zoom: 0,
+        bearing: 0,
+        pitch: 0
+      }
+    };
+  },
+  computed: {
+    ...mapState({
+      dataset: state => state.catalog.dataset,
+      keyVariables: state => state.catalog.keyVariables
+    }),
+    title () {
+      return this.dataset.name;
+    },
+    description () {
+      return this.variable && this.variable.description;
+    },
+    defaultSource () {
+      return this.dataset.sample_info && this.dataset.sample_info.default_source || 'Test';
+    }
+  },
+  created () {
+    this.importMapboxStyles();
+  },
+  mounted () {
+    this.map = new mapboxgl.Map({
+      container: 'map',
+      style: BASEMAP.POSITRON,
+      interactive: false,
+      attributionControl: false,
+      center: [this.initialViewState.longitude, this.initialViewState.latitude],
+      zoom: this.initialViewState.zoom
+    });
+
+    deck = new Deck({
+      canvas: 'deck-canvas',
+      initialViewState: this.initialViewState,
+      onViewStateChange: ({ viewState }) => {
+        this.syncMapboxViewState(viewState);
+      },
+      controller: true,
+      layers: [
+        new CartoBQTilerLayer({
+          data: this.tilesetSampleId(this.dataset.id),
+          credentials: {
+            username: 'public',
+            apiKey: 'default_public',
+            mapsUrl: 'https://maps-api-v2.carto-staging.com/user/{user}'
+          },
+          getFillColor: [130, 109, 186],
+          getLineColor: [0, 0, 0, 100],
+          lineWidthMinPixels: 0.5,
+          getLineWidth: 4,
+          getRadius: 16,
+          pickable: true,
+          onDataLoad: (tileJSON) => {
+            console.log('TILEJSON', tileJSON);
+            const { center, tilestats } = tileJSON;
+            this.initialViewState = {
+              zoom: parseFloat(center[2]) - 1,
+              latitude: parseFloat(center[1]),
+              longitude: parseFloat(center[0]),
+              bearing: 0,
+              pitch: 0
+            };
+            this.recenterMap();
+            this.variable = tilestats.layers[0].attributes[1];
+            this.fetchVariable();
+          }
+        })
+      ],
+      getTooltip: ({ object }) => {
+        if (!object) return false;
+        const title = this.variable.name || this.variable.attribute;
+        const value = object.properties[this.variable.attribute];
+        if (value === undefined) return false;
+        const html = `
+          <p style="margin: 0 0 0 4px; color: #6f777c;">${title}</p>
+          <p style="margin: 4px 0 0 4px;"><b>${value}</b></p>
+        `;
+        const style = {
+          'padding': '8px 12px',
+          'border-radius': '2px',
+          'font-size': '12px',
+          'color': '#162945',
+          'background-color': 'white',
+          'border': 'solid 1px #e6e8eb'
+        };
+        return { html, style };
+      }
+    });
+  },
+  methods: {
+    importMapboxStyles () {
+      let style = document.createElement('link');
+      style.type = 'text/css';
+      style.rel = 'stylesheet';
+      style.href = 'https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css';
+      document.head.appendChild(style);
+    },
+    tilesetSampleId (id) {
+      const TILESET_SAMPLE_PROJECT_MAP = {
+        'carto-do': 'do-tileset-sample-stag',
+        'carto-do-public-data': 'do-public-tileset-sample-stag'
+      };
+      const [project, dataset, table] = id.split('.');
+      return [TILESET_SAMPLE_PROJECT_MAP[project], dataset, table].join('.');
+    },
+    syncMapboxViewState (viewState) {
+      this.map.jumpTo({
+        center: [viewState.longitude, viewState.latitude],
+        zoom: viewState.zoom,
+        bearing: viewState.bearing,
+        pitch: viewState.pitch
+      });
+    },
+    recenterMap () {
+      // Hack to force initialViewState to change
+      this.initialViewState.zoom += 0.000001;
+      deck.setProps({ initialViewState: { ...this.initialViewState } });
+      this.initialViewState.zoom -= 0.000001;
+      deck.setProps({ initialViewState: { ...this.initialViewState } });
+      this.syncMapboxViewState(this.initialViewState);
+    },
+    async fetchVariable () {
+      await this.$store.dispatch('catalog/fetchKeyVariables', {
+        id: this.$route.params.datasetId,
+        type: this.$route.params.type
+      });
+      const keyVariable = this.keyVariables.find((v) => {
+        return v.id.split('.').slice(-1)[0] === this.variable.attribute;
+      });
+      this.variable = {
+        ...this.variable,
+        ...keyVariable
+      };
+      console.log('VARIABLE', { ...this.variable });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'new-dashboard/styles/variables';
+
+.base-map {
+  position: relative;
+  height: 600px;
+
+  & > * {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .map-info {
+    left: auto;
+    right: 0;
+    width: 240px;
+    height: auto;
+    padding: 20px;
+    border-radius: 4px;
+    background-color: white;
+    box-shadow: 0 2px 8px 0 rgba(44, 44, 44, 0.16);
+
+    p {
+      color: $neutral--700;
+    }
+  }
+
+  .recenter {
+    display: flex;
+    align-items: center;
+    top: auto;
+    left: 0;
+    bottom: 0;
+    width: auto;
+    height: auto;
+    margin: 20px;
+    padding: 8px 12px;
+    border-radius: 4px;
+    background-color: white;
+    box-shadow: 0 2px 8px 0 rgba(44, 44, 44, 0.16);
+    cursor: pointer;
+
+    p {
+      margin-left: 8px;
+    }
+  }
+}
+
+</style>
diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/MapPreview.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/MapPreview.vue
index 3a45c6cedffa..75adb5a0db49 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/MapPreview.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/MapPreview.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="map-preview">
-    <div id="map"></div>
-    <canvas id="deck-canvas"></canvas>
+    <BaseMap />
     <div class="overlay">
       <router-link :to="{ name: 'catalog-dataset-map' }" replace>
         Explore
@@ -11,77 +10,12 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
-import mapboxgl from 'mapbox-gl';
-import { Deck } from '@deck.gl/core';
-import { CartoBQTilerLayer, setDefaultCredentials, BASEMAP } from '@deck.gl/carto';
+import BaseMap from 'new-dashboard/components/Catalog/BaseMap';
 
 export default {
   name: 'PreviewMap',
-  computed: {
-    ...mapState({
-      dataset: state => state.catalog.dataset
-    }),
-    name () {
-      return this.dataset.name;
-    }
-  },
-  created () {
-    this.importMapboxStyles();
-  },
-  mounted () {
-    // Testing ID: acs_sociodemogr_b758e778
-
-    setDefaultCredentials({
-      username: 'public',
-      apiKey: 'default_public',
-      mapsUrl: 'https://maps-api-v2.carto-staging.com/user/{user}'
-    });
-
-    const INITIAL_VIEW_STATE = {
-      latitude: 40.750736,
-      longitude: -73.973674,
-      zoom: 11 + 1.5
-    };
-
-    const map = new mapboxgl.Map({
-      container: 'map',
-      style: BASEMAP.POSITRON,
-      interactive: false,
-      center: [INITIAL_VIEW_STATE.longitude, INITIAL_VIEW_STATE.latitude],
-      zoom: INITIAL_VIEW_STATE.zoom,
-      attributionControl: false
-    });
-
-    const deck = new Deck({
-      canvas: 'deck-canvas',
-      initialViewState: INITIAL_VIEW_STATE,
-      layers: [
-        new CartoBQTilerLayer({
-          data: this.tilesetSampleId(this.dataset.id),
-          getFillColor: [130, 109, 186],
-          getLineColor: [0, 0, 0, 100],
-          lineWidthMinPixels: 0.5
-        })
-      ]
-    });
-  },
-  methods: {
-    importMapboxStyles () {
-      let style = document.createElement('link');
-      style.type = 'text/css';
-      style.rel = 'stylesheet';
-      style.href = 'https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css';
-      document.head.appendChild(style);
-    },
-    tilesetSampleId (id) {
-      const TILESET_SAMPLE_PROJECT_MAP = {
-        'carto-do': 'do-tileset-sample-stag',
-        'carto-do-public-data': 'do-public-tileset-sample-stag'
-      };
-      const [project, dataset, table] = id.split('.');
-      return [TILESET_SAMPLE_PROJECT_MAP[project], dataset, table].join('.');
-    }
+  components: {
+    BaseMap
   }
 };
 </script>
@@ -92,7 +26,6 @@ export default {
 .map-preview {
   position: relative;
   height: 180px;
-  width: 100%;
   margin: 12px 0;
 
   & > * {
diff --git a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue
index 27263d613742..a86f537faf60 100644
--- a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue
+++ b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue
@@ -1,23 +1,13 @@
 <template>
   <div>
-    <div class="viewer-container">
-      <div class="header-container">
+    <div class="catalog-dataset-map">
+      <div class="header">
         <h1 class="title is-caption is-txtMainTextColor">{{ title }}</h1>
         <img src="../../assets/icons/catalog/button-question.svg" alt="question" @click="infoVisible = !infoVisible">
       </div>
-      <div class="map-container">
-        <div id="map"></div>
-        <canvas id="deck-canvas"></canvas>
-        <div class="map-info" v-show="infoVisible">
-          <p class="is-small">{{ description }}</p>
-        </div>
-        <div class="recenter" @click="recenter">
-          <img src="../../assets/icons/catalog/recenter.svg" alt="recenter">
-          <p class="is-small is-semibold">Recenter</p>
-        </div>
-      </div>
+      <BaseMap class="base-map" :showInfo="infoVisible" :recenter="true" />
     </div>
-    <div class="footer-container" v-if="defaultSource">
+    <div class="footer" v-if="defaultSource">
       <span class="is-small">
         (*) Sample not available: this preview is for&nbsp;
         <i class="is-semibold is-italic">{{ defaultSource }}</i>
@@ -28,160 +18,30 @@
 
 <script>
 import { mapState } from 'vuex';
-import mapboxgl from 'mapbox-gl';
-import { Deck } from '@deck.gl/core';
-import { CartoBQTilerLayer, BASEMAP } from '@deck.gl/carto';
-
-let deck;
+import BaseMap from 'new-dashboard/components/Catalog/BaseMap';
 
 export default {
   name: 'CatalogDatasetMap',
+  components: {
+    BaseMap
+  },
   data () {
     return {
-      map: null,
-      variable: null,
-      infoVisible: false,
-      initialViewState: {
-        latitude: 0,
-        longitude: 0,
-        zoom: 0,
-        bearing: 0,
-        pitch: 0
-      }
+      infoVisible: false
     };
   },
   computed: {
     ...mapState({
-      dataset: state => state.catalog.dataset,
-      keyVariables: state => state.catalog.keyVariables
+      dataset: state => state.catalog.dataset
     }),
     title () {
       return this.dataset.name;
     },
-    description () {
-      return this.variable && this.variable.description;
-    },
     defaultSource () {
       return this.dataset.sample_info && this.dataset.sample_info.default_source || 'Test';
     }
   },
-  created () {
-    this.importMapboxStyles();
-  },
-  mounted () {
-    this.map = new mapboxgl.Map({
-      container: 'map',
-      style: BASEMAP.POSITRON,
-      interactive: false,
-      attributionControl: false,
-      center: [this.initialViewState.longitude, this.initialViewState.latitude],
-      zoom: this.initialViewState.zoom
-    });
-
-    deck = new Deck({
-      canvas: 'deck-canvas',
-      initialViewState: this.initialViewState,
-      onViewStateChange: ({ viewState }) => {
-        this.syncMapboxViewState(viewState);
-      },
-      controller: true,
-      layers: [
-        new CartoBQTilerLayer({
-          data: this.tilesetSampleId(this.dataset.id),
-          credentials: {
-            username: 'public',
-            apiKey: 'default_public',
-            mapsUrl: 'https://maps-api-v2.carto-staging.com/user/{user}'
-          },
-          getFillColor: [130, 109, 186],
-          getLineColor: [0, 0, 0, 100],
-          lineWidthMinPixels: 0.5,
-          getLineWidth: 4,
-          getRadius: 16,
-          pickable: true,
-          onDataLoad: (tileJSON) => {
-            console.log('TILEJSON', tileJSON);
-            const { center, tilestats } = tileJSON;
-            this.initialViewState = {
-              zoom: parseFloat(center[2]) - 1,
-              latitude: parseFloat(center[1]),
-              longitude: parseFloat(center[0]),
-              bearing: 0,
-              pitch: 0
-            };
-            this.recenter();
-            this.variable = tilestats.layers[0].attributes[1];
-            this.fetchVariable();
-          }
-        })
-      ],
-      getTooltip: ({ object }) => {
-        if (!object) return false;
-        const title = this.variable.name || this.variable.attribute;
-        const value = object.properties[this.variable.attribute];
-        if (value === undefined) return false;
-        const html = `
-          <p style="margin: 0 0 0 4px; color: #6f777c;">${title}</p>
-          <p style="margin: 4px 0 0 4px;"><b>${value}</b></p>
-        `;
-        const style = {
-          'padding': '8px 12px',
-          'border-radius': '2px',
-          'font-size': '12px',
-          'color': '#162945',
-          'background-color': 'white',
-          'border': 'solid 1px #e6e8eb'
-        }
-        return { html, style };
-      }
-    });
-  },
   methods: {
-    importMapboxStyles () {
-      let style = document.createElement('link');
-      style.type = 'text/css';
-      style.rel = 'stylesheet';
-      style.href = 'https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css';
-      document.head.appendChild(style);
-    },
-    tilesetSampleId (id) {
-      const TILESET_SAMPLE_PROJECT_MAP = {
-        'carto-do': 'do-tileset-sample-stag',
-        'carto-do-public-data': 'do-public-tileset-sample-stag'
-      };
-      const [project, dataset, table] = id.split('.');
-      return [TILESET_SAMPLE_PROJECT_MAP[project], dataset, table].join('.');
-    },
-    syncMapboxViewState (viewState) {
-      this.map.jumpTo({
-        center: [viewState.longitude, viewState.latitude],
-        zoom: viewState.zoom,
-        bearing: viewState.bearing,
-        pitch: viewState.pitch
-      });
-    },
-    recenter () {
-      // Hack to force initialViewState to change
-      this.initialViewState.zoom += 0.000001;
-      deck.setProps({ initialViewState: { ...this.initialViewState } });
-      this.initialViewState.zoom -= 0.000001;
-      deck.setProps({ initialViewState: { ...this.initialViewState } });
-      this.syncMapboxViewState(this.initialViewState);
-    },
-    async fetchVariable () {
-      await this.$store.dispatch('catalog/fetchKeyVariables', {
-        id: this.$route.params.datasetId,
-        type: this.$route.params.type
-      });
-      const keyVariable = this.keyVariables.find((v) => {
-        return v.id.split('.').slice(-1)[0] === this.variable.attribute;
-      });
-      this.variable = {
-        ...this.variable,
-        ...keyVariable
-      };
-      console.log('VARIABLE', { ...this.variable });
-    }
   }
 };
 </script>
@@ -189,13 +49,13 @@ export default {
 <style lang="scss" scoped>
 @import 'new-dashboard/styles/variables';
 
-.viewer-container {
+.catalog-dataset-map {
   margin: 12px;
   padding: 12px;
   border-radius: 4px;
   background: $color-primary--soft;
 
-  .header-container {
+  .header {
     display: flex;
     justify-content: space-between;
 
@@ -206,57 +66,12 @@ export default {
     }
   }
 
-  .map-container {
-    position: relative;
-    height: 600px;
+  .base-map {
     margin-top: 6px;
-
-    & > * {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-    }
-
-    .map-info {
-      left: auto;
-      right: 0;
-      width: 240px;
-      height: auto;
-      padding: 20px;
-      border-radius: 4px;
-      background-color: white;
-      box-shadow: 0 2px 8px 0 rgba(44, 44, 44, 0.16);
-
-      p {
-        color: $neutral--700;
-      }
-    }
-  }
-
-  .recenter {
-    display: flex;
-    align-items: center;
-    top: auto;
-    left: 0;
-    bottom: 0;
-    width: auto;
-    height: auto;
-    margin: 20px;
-    padding: 8px 12px;
-    border-radius: 4px;
-    background-color: white;
-    box-shadow: 0 2px 8px 0 rgba(44, 44, 44, 0.16);
-    cursor: pointer;
-
-    p {
-      margin-left: 8px;
-    }
   }
 }
 
-.footer-container {
+.footer {
   display: flex;
   justify-content: flex-end;
   margin: 24px 12px;

From 263cf2cdec765ef64c81f0fc2238b6cf87cd94c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Wed, 18 Nov 2020 07:33:36 +0100
Subject: [PATCH 09/56] Add default format in popup for numbers

---
 .../new-dashboard/components/Catalog/BaseMap.vue   | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/BaseMap.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/BaseMap.vue
index 5c2c11b91311..67b8ebb34cfe 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/BaseMap.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/BaseMap.vue
@@ -107,8 +107,11 @@ export default {
       getTooltip: ({ object }) => {
         if (!object) return false;
         const title = this.variable.name || this.variable.attribute;
-        const value = object.properties[this.variable.attribute];
+        let value = object.properties[this.variable.attribute];
         if (value === undefined) return false;
+        if (typeof value === 'number') {
+          value = this.formatNumber(value);
+        }
         const html = `
           <p style="margin: 0 0 0 4px; color: #6f777c;">${title}</p>
           <p style="margin: 4px 0 0 4px;"><b>${value}</b></p>
@@ -170,6 +173,15 @@ export default {
         ...keyVariable
       };
       console.log('VARIABLE', { ...this.variable });
+    },
+    formatNumber (value) {
+      if (!Number.isInteger(value)) {
+        return value.toLocaleString(undefined, {
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 3
+        });
+      }
+      return value.toLocaleString();
     }
   }
 };

From faf05311c2ac1190dea971a49b6f7c68ca2d4649 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Wed, 18 Nov 2020 07:43:54 +0100
Subject: [PATCH 10/56] Update tests

---
 .../test/spec/builder/dataset/create-context-menu.spec.js     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/assets/test/spec/builder/dataset/create-context-menu.spec.js b/lib/assets/test/spec/builder/dataset/create-context-menu.spec.js
index 76a59a29607c..4291453b71df 100644
--- a/lib/assets/test/spec/builder/dataset/create-context-menu.spec.js
+++ b/lib/assets/test/spec/builder/dataset/create-context-menu.spec.js
@@ -129,12 +129,12 @@ describe('dataset/create-context-menu', function () {
     });
     view.render();
 
-    expect(view.$('.js-listItem').length).toBe(2);
+    expect(view.$('.js-listItem').length).toBe(1);
     expect(view.$('.js-listItem[data-val="delete"]').length).toBe(1);
     expect(view.$('.js-listItem[data-val="rename"]').length).toBe(0);
     expect(view.$('.js-listItem[data-val="metadata"]').length).toBe(0);
     expect(view.$('.js-listItem[data-val="lock"]').length).toBe(0);
-    expect(view.$('.js-listItem[data-val="duplicate"]').length).toBe(1);
+    expect(view.$('.js-listItem[data-val="duplicate"]').length).toBe(0);
 
     view.clean();
   });

From c14bf228360f1137a9acda8f2044c7841d3b45e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Wed, 18 Nov 2020 10:59:32 +0100
Subject: [PATCH 11/56] Use variable instead of keyVariable information in the
 map

---
 .../components/Catalog/BaseMap.vue            | 19 +++++++------------
 .../pages/Data/CatalogDataset.vue             |  4 ++++
 .../pages/Data/CatalogDatasetData.vue         |  9 ---------
 3 files changed, 11 insertions(+), 21 deletions(-)

diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/BaseMap.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/BaseMap.vue
index 67b8ebb34cfe..5ddc7e93787c 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/BaseMap.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/BaseMap.vue
@@ -42,7 +42,7 @@ export default {
   computed: {
     ...mapState({
       dataset: state => state.catalog.dataset,
-      keyVariables: state => state.catalog.keyVariables
+      variables: state => state.catalog.variables
     }),
     title () {
       return this.dataset.name;
@@ -99,8 +99,7 @@ export default {
               pitch: 0
             };
             this.recenterMap();
-            this.variable = tilestats.layers[0].attributes[1];
-            this.fetchVariable();
+            this.setVariable(tilestats.layers[0].attributes[1]);
           }
         })
       ],
@@ -160,17 +159,13 @@ export default {
       deck.setProps({ initialViewState: { ...this.initialViewState } });
       this.syncMapboxViewState(this.initialViewState);
     },
-    async fetchVariable () {
-      await this.$store.dispatch('catalog/fetchKeyVariables', {
-        id: this.$route.params.entity_id,
-        type: this.$route.params.entity_type
-      });
-      const keyVariable = this.keyVariables.find((v) => {
-        return v.id.split('.').slice(-1)[0] === this.variable.attribute;
+    setVariable (variable) {
+      const variableExtra = this.variables.find((v) => {
+        return v.id.split('.').slice(-1)[0] === variable.attribute;
       });
       this.variable = {
-        ...this.variable,
-        ...keyVariable
+        ...variable,
+        ...variableExtra
       };
       console.log('VARIABLE', { ...this.variable });
     },
diff --git a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDataset.vue b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDataset.vue
index 186e4a0adf17..5669bdf1fe47 100644
--- a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDataset.vue
+++ b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDataset.vue
@@ -139,6 +139,10 @@ export default {
             if (this.$route.params.entity_id !== this.dataset.slug) {
               this.$router.replace({ params: { entity_id: this.dataset.slug } });
             }
+            this.$store.dispatch('catalog/fetchVariables', {
+              id: this.dataset.slug,
+              type: this.$route.params.entity_type
+            });
           } else {
             this.$router.replace({ name: 'spatial-data-catalog' });
           }
diff --git a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetData.vue b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetData.vue
index dd7abef62e3f..a9b321fd43ec 100644
--- a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetData.vue
+++ b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetData.vue
@@ -215,12 +215,6 @@ export default {
     }
   },
   methods: {
-    fetchVariables () {
-      this.$store.dispatch('catalog/fetchVariables', {
-        id: this.$route.params.entity_id,
-        type: this.$route.params.entity_type
-      });
-    },
     findVariableInfo (variableName) {
       return this.variables.find(e => e.column_name === variableName);
     },
@@ -265,9 +259,6 @@ export default {
         behavior: 'smooth'
       });
     }
-  },
-  mounted () {
-    this.fetchVariables();
   }
 };
 </script>

From 4e877205159209a8d6f8ca5492e1b0c6eb06558e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Thu, 19 Nov 2020 07:24:16 +0100
Subject: [PATCH 12/56] Add styles cartography for catalgo maps

---
 .../components/Catalog/BaseMap.vue            | 177 ++++++++++++++----
 .../Catalog/map-styles/color-bins-style.js    |  40 ++++
 .../map-styles/color-categories-style.js      |  31 +++
 .../components/Catalog/map-styles/utils.js    |  80 ++++++++
 .../pages/Data/CatalogDataset.vue             |   8 +-
 .../pages/Data/CatalogDatasetMap.vue          |   6 +-
 package-lock.json                             |  46 ++++-
 package.json                                  |   4 +-
 8 files changed, 342 insertions(+), 50 deletions(-)
 create mode 100644 lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/color-bins-style.js
 create mode 100644 lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/color-categories-style.js
 create mode 100644 lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/utils.js

diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/BaseMap.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/BaseMap.vue
index 5ddc7e93787c..69ec7df92827 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/BaseMap.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/BaseMap.vue
@@ -2,7 +2,7 @@
   <div class="base-map">
     <div id="map"></div>
     <canvas id="deck-canvas"></canvas>
-    <div v-show="showInfo" class="map-info">
+    <div v-show="showInfo && description" class="map-info">
       <p class="is-small">{{ description }}</p>
     </div>
     <div v-if="recenter" class="recenter" @click="recenterMap">
@@ -18,7 +18,16 @@ import mapboxgl from 'mapbox-gl';
 import { Deck } from '@deck.gl/core';
 import { CartoBQTilerLayer, BASEMAP } from '@deck.gl/carto';
 
+import colorBinsStyle from './map-styles/color-bins-style';
+import colorCategoriesStyle from './map-styles/color-categories-style';
+
 let deck;
+let propId;
+let colorStyle;
+let getFillColor;
+let getLineColor;
+let pointRadiusMinPixels;
+let lineWidthMinPixels;
 
 export default {
   name: 'BaseMap',
@@ -30,6 +39,7 @@ export default {
     return {
       map: null,
       variable: null,
+      geomType: null,
       initialViewState: {
         latitude: 0,
         longitude: 0,
@@ -49,9 +59,6 @@ export default {
     },
     description () {
       return this.variable && this.variable.description;
-    },
-    defaultSource () {
-      return this.dataset.sample_info && this.dataset.sample_info.default_source || 'Test';
     }
   },
   created () {
@@ -74,38 +81,9 @@ export default {
         this.syncMapboxViewState(viewState);
       },
       controller: true,
-      layers: [
-        new CartoBQTilerLayer({
-          data: this.tilesetSampleId(this.dataset.id),
-          credentials: {
-            username: 'public',
-            apiKey: 'default_public',
-            mapsUrl: 'https://maps-api-v2.carto-staging.com/user/{user}'
-          },
-          getFillColor: [130, 109, 186],
-          getLineColor: [0, 0, 0, 100],
-          lineWidthMinPixels: 0.5,
-          getLineWidth: 4,
-          getRadius: 16,
-          pickable: true,
-          onDataLoad: (tileJSON) => {
-            console.log('TILEJSON', tileJSON);
-            const { center, tilestats } = tileJSON;
-            this.initialViewState = {
-              zoom: parseFloat(center[2]) - 1,
-              latitude: parseFloat(center[1]),
-              longitude: parseFloat(center[0]),
-              bearing: 0,
-              pitch: 0
-            };
-            this.recenterMap();
-            this.setVariable(tilestats.layers[0].attributes[1]);
-          }
-        })
-      ],
       getTooltip: ({ object }) => {
-        if (!object) return false;
-        const title = this.variable.name || this.variable.attribute;
+        if (!object || !this.variable) return false;
+        const title = this.variable.attribute;
         let value = object.properties[this.variable.attribute];
         if (value === undefined) return false;
         if (typeof value === 'number') {
@@ -126,6 +104,8 @@ export default {
         return { html, style };
       }
     });
+
+    this.renderLayer();
   },
   methods: {
     importMapboxStyles () {
@@ -159,7 +139,47 @@ export default {
       deck.setProps({ initialViewState: { ...this.initialViewState } });
       this.syncMapboxViewState(this.initialViewState);
     },
-    setVariable (variable) {
+    renderLayer () {
+      const layers = [
+        new CartoBQTilerLayer({
+          data: this.tilesetSampleId(this.dataset.id),
+          credentials: {
+            username: 'public',
+            apiKey: 'default_public',
+            mapsUrl: 'https://maps-api-v2.carto-staging.com/user/{user}'
+          },
+          getFillColor,
+          getLineColor,
+          pointRadiusMinPixels,
+          lineWidthMinPixels,
+          pickable: true,
+          onDataLoad: (tileJSON) => {
+            console.log('TILEJSON', tileJSON);
+            const { center, tilestats } = tileJSON;
+            this.initialViewState = {
+              zoom: parseFloat(center[2]) - 1,
+              latitude: parseFloat(center[1]),
+              longitude: parseFloat(center[0]),
+              bearing: 0,
+              pitch: 0
+            };
+            this.recenterMap();
+            this.setGeomType(tilestats);
+            this.setVariable(tilestats);
+            this.resetColorStyle();
+            this.generateColorStyle();
+            this.renderLayer();
+          }
+        })
+      ];
+      deck.setProps({ layers });
+    },
+    setGeomType (tilestats) {
+      this.geomType = tilestats.layers[0].geometry;
+    },
+    setVariable (tilestats) {
+      const variable = tilestats.layers[0].attributes[1];
+      if (!this.variables || !variable) return;
       const variableExtra = this.variables.find((v) => {
         return v.id.split('.').slice(-1)[0] === variable.attribute;
       });
@@ -177,6 +197,91 @@ export default {
         });
       }
       return value.toLocaleString();
+    },
+    generateColorStyle () {
+      const g = this.geomType;
+      const v = this.variable && this.variable.type;
+      const stats = this.variable;
+
+      propId = this.variable && this.variable.attribute;
+
+      if (g === 'Polygon' && v === null) {
+        getFillColor = [130, 109, 186];
+        getLineColor = [0, 0, 0, 100];
+        lineWidthMinPixels = 0.5;
+      }
+      if (g === 'Polygon' && v === 'Number') {
+        colorStyle = colorBinsStyle({
+          breaks: { stats, method: 'quantiles', bins: 5 },
+          colors: 'OrYel'
+        });
+        getFillColor = (d) => colorStyle(d.properties[propId]);
+        getLineColor = [0, 0, 0, 100];
+        lineWidthMinPixels = 0.5;
+      }
+      if (g === 'Polygon' && v === 'String') {
+        colorStyle = colorCategoriesStyle({
+          categories: { stats, top: 10 },
+          colors: 'Bold'
+        });
+        getFillColor = (d) => colorStyle(d.properties[propId]);
+        getLineColor = [0, 0, 0, 100];
+        lineWidthMinPixels = 0.5;
+      }
+      if (g === 'LineString' && v === null) {
+        getLineColor = [76, 200, 163];
+        lineWidthMinPixels = 2;
+      }
+      if (g === 'LineString' && v === 'Number') {
+        colorStyle = colorBinsStyle({
+          breaks: { stats, method: 'quantiles', bins: 5 },
+          colors: 'SunsetDark'
+        });
+        getLineColor = (d) => colorStyle(d.properties[propId]);
+        lineWidthMinPixels = 2;
+      }
+      if (g === 'LineString' && v === 'String') {
+        colorStyle = colorCategoriesStyle({
+          categories: { stats, top: 10 },
+          colors: 'Bold'
+        });
+        getLineColor = (d) => colorStyle(d.properties[propId]);
+        lineWidthMinPixels = 2;
+      }
+      if (g === 'Point' && v === null) {
+        getFillColor = [238, 77, 90];
+        getLineColor = [0, 0, 0, 100];
+        pointRadiusMinPixels = 3;
+        lineWidthMinPixels = 0.5;
+      }
+      if (g === 'Point' && v === 'Number') {
+        colorStyle = colorBinsStyle({
+          breaks: { stats, method: 'quantiles', bins: 5 },
+          colors: 'SunsetDark'
+        });
+        getFillColor = (d) => colorStyle(d.properties[propId]);
+        getLineColor = [0, 0, 0, 100];
+        pointRadiusMinPixels = 3;
+        lineWidthMinPixels = 0.5;
+      }
+      if (g === 'Point' && v === 'String') {
+        colorStyle = colorCategoriesStyle({
+          categories: { stats, top: 10 },
+          colors: 'Safe'
+        });
+        getFillColor = (d) => colorStyle(d.properties[propId]);
+        getLineColor = [0, 0, 0, 100];
+        pointRadiusMinPixels = 3;
+        lineWidthMinPixels = 0.5;
+      }
+    },
+    resetColorStyle () {
+      propId = undefined;
+      colorStyle = undefined;
+      getFillColor = undefined;
+      getLineColor = undefined;
+      pointRadiusMinPixels = undefined;
+      lineWidthMinPixels = undefined;
     }
   }
 };
diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/color-bins-style.js b/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/color-bins-style.js
new file mode 100644
index 000000000000..0925d688fc08
--- /dev/null
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/color-bins-style.js
@@ -0,0 +1,40 @@
+import {range} from 'd3-array';
+import {scaleThreshold} from 'd3-scale';
+import {gePalette, NULL_COLOR} from './utils';
+
+const N_BINS = 5;
+
+export default function colorBinsStyle ({ breaks, colors, nulltColor = NULL_COLOR }) {
+  let domain;
+  if (Array.isArray(breaks)) {
+    domain = breaks;
+  } else {
+    const {stats, method, bins = N_BINS} = breaks;
+
+    if (method === 'quantiles') {
+      const minQuantile = parseInt(Object.keys(stats.quantiles[0]), 10);
+      const maxQuantile = parseInt(Object.keys(stats.quantiles[stats.quantiles.length - 1]), 10);
+      if (bins < minQuantile || bins > maxQuantile) {
+        throw new Error(
+          `Invalid bins value. It shoud be between ${minQuantile} and ${maxQuantile}`
+        );
+      }
+      const quantiles = stats.quantiles.find(d => d.hasOwnProperty(bins));
+      domain = quantiles[bins];
+    } else {
+      const {min, max} = stats;
+      const step = (max - min) / bins;
+      domain = range(min + step, max, step);
+    }
+  }
+
+  const palette = typeof colors === 'string' ? gePalette(colors, domain.length + 1) : colors;
+
+  const color = scaleThreshold()
+    .domain(domain)
+    .range(palette);
+
+  return d => {
+    return d === (undefined || null) ? nulltColor : color(d);
+  };
+}
diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/color-categories-style.js b/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/color-categories-style.js
new file mode 100644
index 000000000000..407dbbe447a5
--- /dev/null
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/color-categories-style.js
@@ -0,0 +1,31 @@
+import {gePalette, NULL_COLOR} from './utils';
+
+const OTHERS_COLOR = [119, 119, 119];
+const TOP = 10;
+
+export default function colorCategoriesStyle ({
+  categories,
+  colors,
+  nulltColor = NULL_COLOR,
+  othersColor = OTHERS_COLOR
+}) {
+  let categoryList;
+  const colorsByCategory = {};
+
+  if (Array.isArray(categories)) {
+    categoryList = categories;
+  } else {
+    const {stats, top = TOP} = categories;
+    categoryList = stats.categories.map(c => c.category).slice(0, top);
+  }
+
+  const palette = typeof colors === 'string' ? gePalette(colors, categoryList.length) : colors;
+
+  for (const [i, c] of categoryList.entries()) {
+    colorsByCategory[c] = palette[i];
+  }
+
+  return d => {
+    return d === (undefined || null) ? nulltColor : colorsByCategory[d] || othersColor;
+  };
+}
diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/utils.js b/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/utils.js
new file mode 100644
index 000000000000..8630f1214977
--- /dev/null
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/utils.js
@@ -0,0 +1,80 @@
+import * as cartoColors from 'cartocolor';
+
+export const NULL_COLOR = [204, 204, 204];
+
+export function gePalette (name, numCategories) {
+  const palette = cartoColors[name];
+  let paletteIndex = numCategories;
+
+  if (!palette) {
+    throw new Error(`Palette ${name} is not found.`);
+  }
+
+  const palettesColorVariants = Object.keys(palette)
+    .filter(p => p !== 'tags')
+    .map(Number);
+
+  const longestPaletteIndex = Math.max(...palettesColorVariants);
+  const smallestPaletteIndex = Math.min(...palettesColorVariants);
+
+  if (!Number.isInteger(numCategories) || numCategories > longestPaletteIndex) {
+    paletteIndex = longestPaletteIndex;
+  } else if (numCategories < smallestPaletteIndex) {
+    paletteIndex = smallestPaletteIndex;
+  }
+
+  const colors = palette[paletteIndex];
+
+  if (palette.tags && palette.tags.includes('qualitative')) {
+    colors.pop();
+  }
+
+  return colors.map(c => hexToRgb(c));
+}
+
+function hexToRgb (hex) {
+  // Evaluate #ABC
+  let result = /^#?([a-f\d]{1})([a-f\d]{1})([a-f\d]{1})$/i.exec(hex);
+
+  if (result) {
+    return [
+      parseInt(result[1] + result[1], 16),
+      parseInt(result[2] + result[2], 16),
+      parseInt(result[3] + result[3], 16),
+      255
+    ];
+  }
+
+  // Evaluate #ABCD
+  result = /^#?([a-f\d]{1})([a-f\d]{1})([a-f\d]{1})([a-f\d]{1})$/i.exec(hex);
+
+  if (result) {
+    return [
+      parseInt(result[1] + result[1], 16),
+      parseInt(result[2] + result[2], 16),
+      parseInt(result[3] + result[3], 16),
+      parseInt(result[4] + result[4], 16)
+    ];
+  }
+
+  // Evaluate #ABCDEF
+  result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+
+  if (result) {
+    return [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16), 255];
+  }
+
+  // Evaluate #ABCDEFAF
+  result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+
+  if (result) {
+    return [
+      parseInt(result[1], 16),
+      parseInt(result[2], 16),
+      parseInt(result[3], 16),
+      parseInt(result[4], 16)
+    ];
+  }
+
+  throw new Error(`Error parsing hexadecimal color: ${hex}`);
+}
diff --git a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDataset.vue b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDataset.vue
index 5669bdf1fe47..63f858ec5fd5 100644
--- a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDataset.vue
+++ b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDataset.vue
@@ -132,6 +132,10 @@ export default {
           this.$store.dispatch('catalog/fetchDataset', {
             id: this.$route.params.entity_id,
             type: this.$route.params.entity_type
+          }),
+          this.$store.dispatch('catalog/fetchVariables', {
+            id: this.$route.params.entity_id,
+            type: this.$route.params.entity_type
           })
         ]).then(() => {
           this.loading = false;
@@ -139,10 +143,6 @@ export default {
             if (this.$route.params.entity_id !== this.dataset.slug) {
               this.$router.replace({ params: { entity_id: this.dataset.slug } });
             }
-            this.$store.dispatch('catalog/fetchVariables', {
-              id: this.dataset.slug,
-              type: this.$route.params.entity_type
-            });
           } else {
             this.$router.replace({ name: 'spatial-data-catalog' });
           }
diff --git a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue
index a86f537faf60..81cf30a695c6 100644
--- a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue
+++ b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue
@@ -38,7 +38,7 @@ export default {
       return this.dataset.name;
     },
     defaultSource () {
-      return this.dataset.sample_info && this.dataset.sample_info.default_source || 'Test';
+      return this.dataset.sample_info && this.dataset.sample_info.default_source;
     }
   },
   methods: {
@@ -50,7 +50,7 @@ export default {
 @import 'new-dashboard/styles/variables';
 
 .catalog-dataset-map {
-  margin: 12px;
+  margin: 12px 12px 24px;
   padding: 12px;
   border-radius: 4px;
   background: $color-primary--soft;
@@ -74,7 +74,7 @@ export default {
 .footer {
   display: flex;
   justify-content: flex-end;
-  margin: 24px 12px;
+  margin: 0 12px 24px 12px;
 
   span {
     display: flex;
diff --git a/package-lock.json b/package-lock.json
index 2228951bea39..9b066c742049 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1548,6 +1548,11 @@
             "underscore": "1.8.3"
           }
         },
+        "d3-array": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.1.tgz",
+          "integrity": "sha512-CyINJQ0SOUHojDdFDH4JEM0552vCR1utGyLHegJHyYH0JyCpSeTPxi4OBqHMA2jJZq4NH782LtaJWBImqI/HBw=="
+        },
         "perfect-scrollbar": {
           "version": "git://github.com/CartoDB/perfect-scrollbar.git#f2b66c76ad3718d3c704bd7e1693ea382e44e64d",
           "from": "git://github.com/CartoDB/perfect-scrollbar.git#master"
@@ -8128,9 +8133,9 @@
       "dev": true
     },
     "cartocolor": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/cartocolor/-/cartocolor-4.0.0.tgz",
-      "integrity": "sha1-hBoyIti1sicY2dVFseW5cssm6zY=",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/cartocolor/-/cartocolor-4.0.2.tgz",
+      "integrity": "sha512-+Gh9mb6lFxsDOLQlBLPxAHCnWXlg2W8q3AcVwqRcy95TdBbcOU89Wrb6h2Hd/6Ww1Kc1pzXmUdpnWD+xeCG0dg==",
       "requires": {
         "colorbrewer": "1.0.0"
       }
@@ -10567,9 +10572,9 @@
       "integrity": "sha1-vEZ0gAQ3iyGjYMn8fPUjF5B2L7g="
     },
     "d3-array": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.1.tgz",
-      "integrity": "sha512-CyINJQ0SOUHojDdFDH4JEM0552vCR1utGyLHegJHyYH0JyCpSeTPxi4OBqHMA2jJZq4NH782LtaJWBImqI/HBw=="
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.8.0.tgz",
+      "integrity": "sha512-6V272gsOeg7+9pTW1jSYOR1QE37g95I3my1hBmY+vOUNHRrk9yt4OTz/gK7PMkVAVDrYYq4mq3grTiZ8iJdNIw=="
     },
     "d3-color": {
       "version": "1.2.3",
@@ -10594,6 +10599,18 @@
       "resolved": "https://registry.npmjs.org/d3-queue/-/d3-queue-3.0.7.tgz",
       "integrity": "sha1-yTouVLQXwJWRKdfXP2z31Ckudhg="
     },
+    "d3-scale": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.2.3.tgz",
+      "integrity": "sha512-8E37oWEmEzj57bHcnjPVOBS3n4jqakOeuv1EDdQSiSrYnMCBdMd3nc4HtKk7uia8DUHcY/CGuJ42xxgtEYrX0g==",
+      "requires": {
+        "d3-array": "^2.3.0",
+        "d3-format": "1 - 2",
+        "d3-interpolate": "1.2.0 - 2",
+        "d3-time": "1 - 2",
+        "d3-time-format": "2 - 3"
+      }
+    },
     "d3-time": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.1.0.tgz",
@@ -15119,6 +15136,13 @@
         "torque.js": "github:CartoDB/torque#master",
         "underscore": "1.8.3",
         "whatwg-fetch": "^2.0.3"
+      },
+      "dependencies": {
+        "d3-array": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.1.tgz",
+          "integrity": "sha512-CyINJQ0SOUHojDdFDH4JEM0552vCR1utGyLHegJHyYH0JyCpSeTPxi4OBqHMA2jJZq4NH782LtaJWBImqI/HBw=="
+        }
       }
     },
     "internal-ip": {
@@ -27668,6 +27692,16 @@
         "es6-promise": "3.1.2",
         "postcss": "5.0.19",
         "postcss-value-parser": "3.3.0"
+      },
+      "dependencies": {
+        "cartocolor": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/cartocolor/-/cartocolor-4.0.0.tgz",
+          "integrity": "sha1-hBoyIti1sicY2dVFseW5cssm6zY=",
+          "requires": {
+            "colorbrewer": "1.0.0"
+          }
+        }
       }
     },
     "turf-jenks": {
diff --git a/package.json b/package.json
index ae7ff58c9f15..9fc3458af7e3 100644
--- a/package.json
+++ b/package.json
@@ -38,14 +38,16 @@
     "browserify-shim": "3.8.12",
     "camshaft-reference": "0.34.0",
     "carto": "cartodb/carto#master",
-    "cartocolor": "4.0.0",
+    "cartocolor": "^4.0.2",
     "cartodb-pecan": "0.2.x",
     "clipboard": "1.6.1",
     "codemirror": "5.14.2",
     "confetti-js": "0.0.14",
     "core-js": "^3.6.5",
+    "d3-array": "^2.8.0",
     "d3-interpolate": "^1.1.6",
     "d3-queue": "^3.0.7",
+    "d3-scale": "^3.2.3",
     "date-fns": "^1.29.0",
     "fastclick": "^1.0.6",
     "html-webpack-plugin": "^3.2.0",

From bc9ff348f610a81d1335f9c54f997070d0343d35 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Thu, 19 Nov 2020 07:40:05 +0100
Subject: [PATCH 13/56] Bump dev version

---
 package-lock.json | 2 +-
 package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9b066c742049..77e0e8d9d733 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "cartodb-ui",
-  "version": "1.0.0-assets.207-0",
+  "version": "1.0.0-assets.207-do0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 9fc3458af7e3..7991386bc98e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cartodb-ui",
-  "version": "1.0.0-assets.207-0",
+  "version": "1.0.0-assets.207-do0",
   "description": "CARTO UI frontend",
   "repository": {
     "type": "git",

From cdd13c49fcae157e74848d297b15cc00b2887b7c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Thu, 19 Nov 2020 09:43:22 +0100
Subject: [PATCH 14/56] Use original center zoom

---
 .../javascripts/new-dashboard/components/Catalog/BaseMap.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/BaseMap.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/BaseMap.vue
index 69ec7df92827..b3cd9e160c27 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/BaseMap.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/BaseMap.vue
@@ -157,7 +157,7 @@ export default {
             console.log('TILEJSON', tileJSON);
             const { center, tilestats } = tileJSON;
             this.initialViewState = {
-              zoom: parseFloat(center[2]) - 1,
+              zoom: parseFloat(center[2]),
               latitude: parseFloat(center[1]),
               longitude: parseFloat(center[0]),
               bearing: 0,

From a6db2056a3c93ab68d2acae7f05a8a66ac13ed2c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Thu, 19 Nov 2020 09:57:57 +0100
Subject: [PATCH 15/56] Minor code style refactor

---
 .../components/Catalog/map-styles/color-bins-style.js  | 10 +++++-----
 .../Catalog/map-styles/color-categories-style.js       |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/color-bins-style.js b/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/color-bins-style.js
index 0925d688fc08..ecc644f15457 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/color-bins-style.js
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/color-bins-style.js
@@ -1,6 +1,6 @@
-import {range} from 'd3-array';
-import {scaleThreshold} from 'd3-scale';
-import {gePalette, NULL_COLOR} from './utils';
+import { range } from 'd3-array';
+import { scaleThreshold } from 'd3-scale';
+import { gePalette, NULL_COLOR } from './utils';
 
 const N_BINS = 5;
 
@@ -9,7 +9,7 @@ export default function colorBinsStyle ({ breaks, colors, nulltColor = NULL_COLO
   if (Array.isArray(breaks)) {
     domain = breaks;
   } else {
-    const {stats, method, bins = N_BINS} = breaks;
+    const { stats, method, bins = N_BINS } = breaks;
 
     if (method === 'quantiles') {
       const minQuantile = parseInt(Object.keys(stats.quantiles[0]), 10);
@@ -22,7 +22,7 @@ export default function colorBinsStyle ({ breaks, colors, nulltColor = NULL_COLO
       const quantiles = stats.quantiles.find(d => d.hasOwnProperty(bins));
       domain = quantiles[bins];
     } else {
-      const {min, max} = stats;
+      const { min, max } = stats;
       const step = (max - min) / bins;
       domain = range(min + step, max, step);
     }
diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/color-categories-style.js b/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/color-categories-style.js
index 407dbbe447a5..7b3865dcf0dd 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/color-categories-style.js
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/color-categories-style.js
@@ -1,4 +1,4 @@
-import {gePalette, NULL_COLOR} from './utils';
+import { gePalette, NULL_COLOR } from './utils';
 
 const OTHERS_COLOR = [119, 119, 119];
 const TOP = 10;
@@ -15,7 +15,7 @@ export default function colorCategoriesStyle ({
   if (Array.isArray(categories)) {
     categoryList = categories;
   } else {
-    const {stats, top = TOP} = categories;
+    const { stats, top = TOP } = categories;
     categoryList = stats.categories.map(c => c.category).slice(0, top);
   }
 

From 2c7490b06bc8eb63981aa3688f8c7adef6a215dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Thu, 19 Nov 2020 18:29:46 +0100
Subject: [PATCH 16/56] Improve map initialization

---
 .../components/Catalog/BaseMap.vue            | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/BaseMap.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/BaseMap.vue
index b3cd9e160c27..6a4bd9d8e563 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/BaseMap.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/BaseMap.vue
@@ -2,6 +2,7 @@
   <div class="base-map">
     <div id="map"></div>
     <canvas id="deck-canvas"></canvas>
+    <div class="cover" v-if="!showMap"></div>
     <div v-show="showInfo && description" class="map-info">
       <p class="is-small">{{ description }}</p>
     </div>
@@ -38,15 +39,10 @@ export default {
   data () {
     return {
       map: null,
+      showMap: false,
       variable: null,
       geomType: null,
-      initialViewState: {
-        latitude: 0,
-        longitude: 0,
-        zoom: 0,
-        bearing: 0,
-        pitch: 0
-      }
+      initialViewState: null
     };
   },
   computed: {
@@ -69,14 +65,11 @@ export default {
       container: 'map',
       style: BASEMAP.POSITRON,
       interactive: false,
-      attributionControl: false,
-      center: [this.initialViewState.longitude, this.initialViewState.latitude],
-      zoom: this.initialViewState.zoom
+      attributionControl: false
     });
 
     deck = new Deck({
       canvas: 'deck-canvas',
-      initialViewState: this.initialViewState,
       onViewStateChange: ({ viewState }) => {
         this.syncMapboxViewState(viewState);
       },
@@ -169,6 +162,7 @@ export default {
             this.resetColorStyle();
             this.generateColorStyle();
             this.renderLayer();
+            this.showMap = true;
           }
         })
       ];
@@ -302,6 +296,10 @@ export default {
     height: 100%;
   }
 
+  .cover {
+    background: $color-primary--soft;
+  }
+
   .map-info {
     left: auto;
     right: 0;

From ee4fcfa0d7f70b7c602f1a526bb95b07bfe0529f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Fri, 20 Nov 2020 15:01:23 +0100
Subject: [PATCH 17/56] Add categpry legend

---
 .../components/Catalog/BaseMap.vue            | 71 +++++++++++++++----
 .../Catalog/legends/ColorCategoriesLegend.vue | 49 +++++++++++++
 ...{color-bins-style.js => colorBinsStyle.js} |  0
 ...ories-style.js => colorCategoriesStyle.js} |  4 +-
 .../components/Catalog/map-styles/utils.js    |  2 +-
 .../pages/Data/CatalogDatasetMap.vue          |  2 +-
 6 files changed, 111 insertions(+), 17 deletions(-)
 create mode 100644 lib/assets/javascripts/new-dashboard/components/Catalog/legends/ColorCategoriesLegend.vue
 rename lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/{color-bins-style.js => colorBinsStyle.js} (100%)
 rename lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/{color-categories-style.js => colorCategoriesStyle.js} (85%)

diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/BaseMap.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/BaseMap.vue
index 6a4bd9d8e563..ea00f0af032c 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/BaseMap.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/BaseMap.vue
@@ -2,14 +2,21 @@
   <div class="base-map">
     <div id="map"></div>
     <canvas id="deck-canvas"></canvas>
-    <div class="cover" v-if="!showMap"></div>
-    <div v-show="showInfo && description" class="map-info">
-      <p class="is-small">{{ description }}</p>
+    <div v-if="legend" class="legend">
+      <ColorCategoriesLegend
+        v-if="variableCategories"
+        :title="variableName"
+        :categories="variableCategories"
+      />
+    </div>
+    <div v-show="showInfo && variableDescription" class="map-info">
+      <p class="is-small">{{ variableDescription }}</p>
     </div>
     <div v-if="recenter" class="recenter" @click="recenterMap">
       <img src="../../assets/icons/catalog/recenter.svg" alt="recenter">
       <p class="is-small is-semibold">Recenter</p>
     </div>
+    <div class="cover" v-if="!showMap"></div>
   </div>
 </template>
 
@@ -19,8 +26,10 @@ import mapboxgl from 'mapbox-gl';
 import { Deck } from '@deck.gl/core';
 import { CartoBQTilerLayer, BASEMAP } from '@deck.gl/carto';
 
-import colorBinsStyle from './map-styles/color-bins-style';
-import colorCategoriesStyle from './map-styles/color-categories-style';
+import colorBinsStyle from './map-styles/colorBinsStyle';
+import colorCategoriesStyle from './map-styles/colorCategoriesStyle';
+
+import ColorCategoriesLegend from './legends/ColorCategoriesLegend';
 
 let deck;
 let propId;
@@ -33,9 +42,13 @@ let lineWidthMinPixels;
 export default {
   name: 'BaseMap',
   props: {
+    legend: Boolean,
     recenter: Boolean,
     showInfo: Boolean
   },
+  components: {
+    ColorCategoriesLegend
+  },
   data () {
     return {
       map: null,
@@ -53,8 +66,29 @@ export default {
     title () {
       return this.dataset.name;
     },
-    description () {
+    variableName () {
+      return this.variable && this.variable.attribute;
+    },
+    variableDescription () {
       return this.variable && this.variable.description;
+    },
+    variableCategories () {
+      if (this.variable && this.variable.categories) {
+        const top = 10;
+        const colorStyle = colorCategoriesStyle({
+          categories: { stats: this.variable, top },
+          colors: 'Bold'
+        });
+        const categories = this.variable.categories.slice(0, top).map(c => ({
+          color: `rgb(${colorStyle(c.category)})`,
+          name: c.category
+        }));
+        categories.push({
+          name: 'Others',
+          color: 'rgb(119, 119, 119)'
+        });
+        return categories;
+      }
     }
   },
   created () {
@@ -245,8 +279,8 @@ export default {
       if (g === 'Point' && v === null) {
         getFillColor = [238, 77, 90];
         getLineColor = [0, 0, 0, 100];
-        pointRadiusMinPixels = 3;
-        lineWidthMinPixels = 0.5;
+        pointRadiusMinPixels = 4;
+        lineWidthMinPixels = 0.1;
       }
       if (g === 'Point' && v === 'Number') {
         colorStyle = colorBinsStyle({
@@ -255,18 +289,18 @@ export default {
         });
         getFillColor = (d) => colorStyle(d.properties[propId]);
         getLineColor = [0, 0, 0, 100];
-        pointRadiusMinPixels = 3;
-        lineWidthMinPixels = 0.5;
+        pointRadiusMinPixels = 4;
+        lineWidthMinPixels = 0.1;
       }
       if (g === 'Point' && v === 'String') {
         colorStyle = colorCategoriesStyle({
           categories: { stats, top: 10 },
-          colors: 'Safe'
+          colors: 'Bold'
         });
         getFillColor = (d) => colorStyle(d.properties[propId]);
         getLineColor = [0, 0, 0, 100];
-        pointRadiusMinPixels = 3;
-        lineWidthMinPixels = 0.5;
+        pointRadiusMinPixels = 4;
+        lineWidthMinPixels = 0.1;
       }
     },
     resetColorStyle () {
@@ -300,6 +334,17 @@ export default {
     background: $color-primary--soft;
   }
 
+  .legend {
+    width: 240px;
+    height: auto;
+    margin: 20px;
+    padding: 20px;
+    border-radius: 4px;
+    color: $neutral--700;
+    background-color: white;
+    box-shadow: 0 2px 8px 0 rgba(44, 44, 44, 0.16);
+  }
+
   .map-info {
     left: auto;
     right: 0;
diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/legends/ColorCategoriesLegend.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/legends/ColorCategoriesLegend.vue
new file mode 100644
index 000000000000..49ee46bb2de4
--- /dev/null
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/legends/ColorCategoriesLegend.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="color-categories-legend is-small">
+    <p class="legend-title is-semibold">{{ title }}</p>
+    <div class="legend-item" v-for="category in categories" :key="category.name">
+      <div class="legend-item-bullet" :style="{ background: category.color }"></div>
+      <p class="legend-item-text">{{ category.name }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ColorCategoriesLegend',
+  props: {
+    title: String,
+    categories: Array
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.color-categories-legend {
+
+  .legend-title {
+    margin-bottom: 12px;
+  }
+
+  .legend-item {
+    display: flex;
+    align-items: center;
+    margin-top: 8px;
+
+    .legend-item-bullet {
+      width: 12px;
+      height: 12px;
+      min-width: 12px;
+      min-height: 12px;
+      border-radius: 12px;
+      margin: 4px 12px 4px 4px;
+    }
+
+    .legend-item-text {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+</style>
diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/color-bins-style.js b/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorBinsStyle.js
similarity index 100%
rename from lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/color-bins-style.js
rename to lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorBinsStyle.js
diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/color-categories-style.js b/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorCategoriesStyle.js
similarity index 85%
rename from lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/color-categories-style.js
rename to lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorCategoriesStyle.js
index 7b3865dcf0dd..49856cd052e1 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/color-categories-style.js
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorCategoriesStyle.js
@@ -6,7 +6,7 @@ const TOP = 10;
 export default function colorCategoriesStyle ({
   categories,
   colors,
-  nulltColor = NULL_COLOR,
+  nullColor = NULL_COLOR,
   othersColor = OTHERS_COLOR
 }) {
   let categoryList;
@@ -26,6 +26,6 @@ export default function colorCategoriesStyle ({
   }
 
   return d => {
-    return d === (undefined || null) ? nulltColor : colorsByCategory[d] || othersColor;
+    return d === (undefined || null) ? nullColor : colorsByCategory[d] || othersColor;
   };
 }
diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/utils.js b/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/utils.js
index 8630f1214977..249f237a56cc 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/utils.js
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/utils.js
@@ -23,7 +23,7 @@ export function gePalette (name, numCategories) {
     paletteIndex = smallestPaletteIndex;
   }
 
-  const colors = palette[paletteIndex];
+  const colors = [ ...palette[paletteIndex] ];
 
   if (palette.tags && palette.tags.includes('qualitative')) {
     colors.pop();
diff --git a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue
index 81cf30a695c6..b81b46925689 100644
--- a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue
+++ b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue
@@ -5,7 +5,7 @@
         <h1 class="title is-caption is-txtMainTextColor">{{ title }}</h1>
         <img src="../../assets/icons/catalog/button-question.svg" alt="question" @click="infoVisible = !infoVisible">
       </div>
-      <BaseMap class="base-map" :showInfo="infoVisible" :recenter="true" />
+      <BaseMap class="base-map" :showInfo="infoVisible" :legend="true" :recenter="true" />
     </div>
     <div class="footer" v-if="defaultSource">
       <span class="is-small">

From 15df99657e934740544923738e427b65f42cf17b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Fri, 20 Nov 2020 15:19:17 +0100
Subject: [PATCH 18/56] Rename CatalogMap

---
 .../components/Catalog/{BaseMap.vue => CatalogMap.vue}    | 2 +-
 .../Catalog/{MapPreview.vue => CatalogMapPreview.vue}     | 8 ++++----
 .../new-dashboard/pages/Data/CatalogDatasetMap.vue        | 6 +++---
 .../new-dashboard/pages/Data/CatalogDatasetSummary.vue    | 6 +++---
 4 files changed, 11 insertions(+), 11 deletions(-)
 rename lib/assets/javascripts/new-dashboard/components/Catalog/{BaseMap.vue => CatalogMap.vue} (99%)
 rename lib/assets/javascripts/new-dashboard/components/Catalog/{MapPreview.vue => CatalogMapPreview.vue} (85%)

diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/BaseMap.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
similarity index 99%
rename from lib/assets/javascripts/new-dashboard/components/Catalog/BaseMap.vue
rename to lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
index ea00f0af032c..070927018602 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/BaseMap.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
@@ -40,7 +40,7 @@ let pointRadiusMinPixels;
 let lineWidthMinPixels;
 
 export default {
-  name: 'BaseMap',
+  name: 'CatalogMap',
   props: {
     legend: Boolean,
     recenter: Boolean,
diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/MapPreview.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMapPreview.vue
similarity index 85%
rename from lib/assets/javascripts/new-dashboard/components/Catalog/MapPreview.vue
rename to lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMapPreview.vue
index 75adb5a0db49..7143feb3c852 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/MapPreview.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMapPreview.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="map-preview">
-    <BaseMap />
+    <CatalogMap />
     <div class="overlay">
       <router-link :to="{ name: 'catalog-dataset-map' }" replace>
         Explore
@@ -10,12 +10,12 @@
 </template>
 
 <script>
-import BaseMap from 'new-dashboard/components/Catalog/BaseMap';
+import CatalogMap from 'new-dashboard/components/Catalog/CatalogMap';
 
 export default {
-  name: 'PreviewMap',
+  name: 'CatalogMapPreview',
   components: {
-    BaseMap
+    CatalogMap
   }
 };
 </script>
diff --git a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue
index b81b46925689..a6040cf25ea4 100644
--- a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue
+++ b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue
@@ -5,7 +5,7 @@
         <h1 class="title is-caption is-txtMainTextColor">{{ title }}</h1>
         <img src="../../assets/icons/catalog/button-question.svg" alt="question" @click="infoVisible = !infoVisible">
       </div>
-      <BaseMap class="base-map" :showInfo="infoVisible" :legend="true" :recenter="true" />
+      <CatalogMap class="base-map" :showInfo="infoVisible" :legend="true" :recenter="true" />
     </div>
     <div class="footer" v-if="defaultSource">
       <span class="is-small">
@@ -18,12 +18,12 @@
 
 <script>
 import { mapState } from 'vuex';
-import BaseMap from 'new-dashboard/components/Catalog/BaseMap';
+import CatalogMap from 'new-dashboard/components/Catalog/CatalogMap';
 
 export default {
   name: 'CatalogDatasetMap',
   components: {
-    BaseMap
+    CatalogMap
   },
   data () {
     return {
diff --git a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetSummary.vue b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetSummary.vue
index 7e2dea04eb7d..7dff59dda8c7 100644
--- a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetSummary.vue
+++ b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetSummary.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="grid grid-cell u-flex__justify--center u-mb--16 wrap-reverse--tablet">
     <div class="grid-cell grid-cell--col9 grid-cell--col12--tablet main-column">
-      <MapPreview />
+      <CatalogMapPreview />
       <p
         class="text is-caption is-txtMainTextColor u-mt--32 u-mt--12--tablet"
         v-html="dataset.description || 'No description available.'"
@@ -104,12 +104,12 @@ import { temporalAggregationName } from 'new-dashboard/utils/catalog/temporal-ag
 import { geometryTypeName } from 'new-dashboard/utils/catalog/geometry-type-name';
 import { updateFrequencyName } from 'new-dashboard/utils/catalog/update-frequency-name';
 import { sendCustomDimensions } from 'new-dashboard/utils/catalog/custom-dimensions-ga';
-import MapPreview from 'new-dashboard/components/Catalog/MapPreview';
+import CatalogMapPreview from 'new-dashboard/components/Catalog/CatalogMapPreview';
 
 export default {
   name: 'CatalogDatasetSummary',
   components: {
-    MapPreview
+    CatalogMapPreview
   },
   watch: {
     dataset: {

From f522841adfb3d70282d7a33f00716d07db7d892c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Fri, 20 Nov 2020 16:03:37 +0100
Subject: [PATCH 19/56] Add bins legend

---
 .../components/Catalog/CatalogMap.vue         | 50 +++++++++++----
 .../Catalog/legends/ColorBinsLegend.vue       | 62 +++++++++++++++++++
 2 files changed, 99 insertions(+), 13 deletions(-)
 create mode 100644 lib/assets/javascripts/new-dashboard/components/Catalog/legends/ColorBinsLegend.vue

diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
index 070927018602..ed7f98e44721 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
@@ -3,6 +3,14 @@
     <div id="map"></div>
     <canvas id="deck-canvas"></canvas>
     <div v-if="legend" class="legend">
+      <ColorBinsLegend
+        v-if="variableMax"
+        :title="variableName"
+        :min="variableMin"
+        :max="variableMax"
+        :avg="variableAvg"
+        :bins="variableBins"
+      />
       <ColorCategoriesLegend
         v-if="variableCategories"
         :title="variableName"
@@ -29,6 +37,7 @@ import { CartoBQTilerLayer, BASEMAP } from '@deck.gl/carto';
 import colorBinsStyle from './map-styles/colorBinsStyle';
 import colorCategoriesStyle from './map-styles/colorCategoriesStyle';
 
+import ColorBinsLegend from './legends/ColorBinsLegend';
 import ColorCategoriesLegend from './legends/ColorCategoriesLegend';
 
 let deck;
@@ -47,6 +56,7 @@ export default {
     showInfo: Boolean
   },
   components: {
+    ColorBinsLegend,
     ColorCategoriesLegend
   },
   data () {
@@ -72,14 +82,26 @@ export default {
     variableDescription () {
       return this.variable && this.variable.description;
     },
+    variableMin () {
+      return this.formatNumber(this.variable && this.variable.min);
+    },
+    variableMax () {
+      return this.formatNumber(this.variable && this.variable.max);
+    },
+    variableAvg () {
+      return this.formatNumber(this.variable && this.variable.avg);
+    },
+    variableBins () {
+      if (this.variable && this.variable.quantiles && colorStyle) {
+        const bins = this.variable.quantiles[2]['5'].map(q => ({
+          color: `rgb(${colorStyle(q)})`
+        }));
+        return bins;
+      }
+    },
     variableCategories () {
-      if (this.variable && this.variable.categories) {
-        const top = 10;
-        const colorStyle = colorCategoriesStyle({
-          categories: { stats: this.variable, top },
-          colors: 'Bold'
-        });
-        const categories = this.variable.categories.slice(0, top).map(c => ({
+      if (this.variable && this.variable.categories && colorStyle) {
+        const categories = this.variable.categories.slice(0, 10).map(c => ({
           color: `rgb(${colorStyle(c.category)})`,
           name: c.category
         }));
@@ -218,13 +240,15 @@ export default {
       console.log('VARIABLE', { ...this.variable });
     },
     formatNumber (value) {
-      if (!Number.isInteger(value)) {
-        return value.toLocaleString(undefined, {
-          minimumFractionDigits: 2,
-          maximumFractionDigits: 3
-        });
+      if (value !== undefined && value !== null) {
+        if (!Number.isInteger(value)) {
+          return value.toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 3
+          });
+        }
+        return value.toLocaleString();
       }
-      return value.toLocaleString();
     },
     generateColorStyle () {
       const g = this.geomType;
diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/legends/ColorBinsLegend.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/legends/ColorBinsLegend.vue
new file mode 100644
index 000000000000..de591987ae73
--- /dev/null
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/legends/ColorBinsLegend.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="color-bins-legend is-small">
+    <p class="legend-title is-semibold">{{ title }}</p>
+    <div class="legend-range">
+      <p>{{ min }}</p>
+      <p>{{ max }}</p>
+    </div>
+    <div class="legend-colors">
+      <div v-for="bin in bins" :key="bin.color" :style="{
+        background: bin.color,
+        width: `${100 / bins.length}%`
+      }">
+      </div>
+    </div>
+    <p class="legend-avg">
+      {{ avg }} AVG
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ColorCategoriesLegend',
+  props: {
+    title: String,
+    min: String,
+    max: String,
+    avg: String,
+    bins: Array
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.color-bins-legend {
+  color: $neutral--700;
+
+  .legend-title {
+    margin-bottom: 12px;
+  }
+
+  .legend-range {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 4px;
+  }
+
+  .legend-colors {
+    display: flex;
+    height: 8px;
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  .legend-avg {
+    display: flex;
+    justify-content: center;
+    margin-top: 6px;
+    color: #6f777c;
+  }
+}
+</style>

From 9f0caad58e8235cc6c9f2da9813568fc6d8765d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Fri, 20 Nov 2020 16:14:11 +0100
Subject: [PATCH 20/56] Add default color to all the geographies

---
 .../components/Catalog/CatalogMap.vue           | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
index ed7f98e44721..f50e638d829a 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
@@ -2,7 +2,7 @@
   <div class="base-map">
     <div id="map"></div>
     <canvas id="deck-canvas"></canvas>
-    <div v-if="legend" class="legend">
+    <div v-if="legend && !isGeography" class="legend">
       <ColorBinsLegend
         v-if="variableMax"
         :title="variableName"
@@ -76,6 +76,9 @@ export default {
     title () {
       return this.dataset.name;
     },
+    isGeography () {
+      return this.$route.params.entity_type === 'geography';
+    },
     variableName () {
       return this.variable && this.variable.attribute;
     },
@@ -257,8 +260,8 @@ export default {
 
       propId = this.variable && this.variable.attribute;
 
-      if (g === 'Polygon' && v === null) {
-        getFillColor = [130, 109, 186];
+      if (g === 'Polygon' && v === null || this.isGeography) {
+        getFillColor = [234, 200, 100, 168];
         getLineColor = [0, 0, 0, 100];
         lineWidthMinPixels = 0.5;
       }
@@ -280,8 +283,8 @@ export default {
         getLineColor = [0, 0, 0, 100];
         lineWidthMinPixels = 0.5;
       }
-      if (g === 'LineString' && v === null) {
-        getLineColor = [76, 200, 163];
+      if (g === 'LineString' && v === null || this.isGeography) {
+        getLineColor = [234, 200, 100, 168];
         lineWidthMinPixels = 2;
       }
       if (g === 'LineString' && v === 'Number') {
@@ -300,8 +303,8 @@ export default {
         getLineColor = (d) => colorStyle(d.properties[propId]);
         lineWidthMinPixels = 2;
       }
-      if (g === 'Point' && v === null) {
-        getFillColor = [238, 77, 90];
+      if (g === 'Point' && v === null || this.isGeography) {
+        getFillColor = [234, 200, 100, 168];
         getLineColor = [0, 0, 0, 100];
         pointRadiusMinPixels = 4;
         lineWidthMinPixels = 0.1;

From fa6381b135849b8016380fa2a87ac3571f56a4cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Mon, 23 Nov 2020 13:48:58 +0100
Subject: [PATCH 21/56] Fix deps collision

---
 package-lock.json | 12 ++++++------
 package.json      |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 77e0e8d9d733..2a38390f0672 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4674,9 +4674,9 @@
           }
         },
         "vue-loader-v16": {
-          "version": "npm:vue-loader@16.0.0-beta.9",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.9.tgz",
-          "integrity": "sha512-mu9pg6554GbXDSO8LlxkQM6qUJzUkb/A0FJc9LgRqnU9MCnhzEXwCt1Zx5NObvFpzs2mH2dH/uUCDwL8Qaz9sA==",
+          "version": "npm:vue-loader@16.0.0-rc.2",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-rc.2.tgz",
+          "integrity": "sha512-cz8GK4dgIf1UTC+do80pGvh8BHcCRHLIQVHV9ONVQ8wtoqS9t/+H02rKcQP+TVNg7khgLyQV2+8eHUq7/AFq3g==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -8133,9 +8133,9 @@
       "dev": true
     },
     "cartocolor": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/cartocolor/-/cartocolor-4.0.2.tgz",
-      "integrity": "sha512-+Gh9mb6lFxsDOLQlBLPxAHCnWXlg2W8q3AcVwqRcy95TdBbcOU89Wrb6h2Hd/6Ww1Kc1pzXmUdpnWD+xeCG0dg==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/cartocolor/-/cartocolor-4.0.0.tgz",
+      "integrity": "sha1-hBoyIti1sicY2dVFseW5cssm6zY=",
       "requires": {
         "colorbrewer": "1.0.0"
       }
diff --git a/package.json b/package.json
index 7991386bc98e..0a44cc68dfc7 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
     "browserify-shim": "3.8.12",
     "camshaft-reference": "0.34.0",
     "carto": "cartodb/carto#master",
-    "cartocolor": "^4.0.2",
+    "cartocolor": "4.0.0",
     "cartodb-pecan": "0.2.x",
     "clipboard": "1.6.1",
     "codemirror": "5.14.2",

From 0ab4d88a48ed92f38ae79cb2e12f8acabfd5626f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Sat, 28 Nov 2020 22:53:37 +0100
Subject: [PATCH 22/56] Load catalog map from sample metadata

---
 .../components/Catalog/CatalogMap.vue         | 21 ++++++++++---------
 .../pages/Data/CatalogDataset.vue             |  5 ++++-
 .../pages/Data/CatalogDatasetMap.vue          | 10 ++++++++-
 .../pages/Data/CatalogDatasetSummary.vue      |  5 ++++-
 4 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
index f50e638d829a..4842408fe459 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
@@ -96,7 +96,8 @@ export default {
     },
     variableBins () {
       if (this.variable && this.variable.quantiles && colorStyle) {
-        const bins = this.variable.quantiles[2]['5'].map(q => ({
+        const breaks = [this.variable.min, ...this.variable.quantiles[2]['5']];
+        const bins = breaks.map(q => ({
           color: `rgb(${colorStyle(q)})`
         }));
         return bins;
@@ -114,6 +115,14 @@ export default {
         });
         return categories;
       }
+    },
+    tilesetSampleId () {
+      const TILESET_SAMPLE_PROJECT_MAP = {
+        'do-sample-prod': 'do-tileset-sample-stag',
+        'do-public-sample': 'do-public-tileset-sample-stag'
+      };
+      const [project, dataset, table] = this.dataset.sample_info.id.split('.');
+      return [TILESET_SAMPLE_PROJECT_MAP[project], dataset, table].join('.');
     }
   },
   created () {
@@ -167,14 +176,6 @@ export default {
       style.href = 'https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css';
       document.head.appendChild(style);
     },
-    tilesetSampleId (id) {
-      const TILESET_SAMPLE_PROJECT_MAP = {
-        'carto-do': 'do-tileset-sample-stag',
-        'carto-do-public-data': 'do-public-tileset-sample-stag'
-      };
-      const [project, dataset, table] = id.split('.');
-      return [TILESET_SAMPLE_PROJECT_MAP[project], dataset, table].join('.');
-    },
     syncMapboxViewState (viewState) {
       this.map.jumpTo({
         center: [viewState.longitude, viewState.latitude],
@@ -194,7 +195,7 @@ export default {
     renderLayer () {
       const layers = [
         new CartoBQTilerLayer({
-          data: this.tilesetSampleId(this.dataset.id),
+          data: this.tilesetSampleId,
           credentials: {
             username: 'public',
             apiKey: 'default_public',
diff --git a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDataset.vue b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDataset.vue
index 63f858ec5fd5..c57c38a9f276 100644
--- a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDataset.vue
+++ b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDataset.vue
@@ -64,7 +64,7 @@
               <NavigationTabs class="grid-cell--col12">
                 <router-link :to="{ name: 'catalog-dataset-summary' }" replace>Summary</router-link>
                 <router-link :to="{ name: 'catalog-dataset-data' }" replace>Data</router-link>
-                <router-link :to="{ name: 'catalog-dataset-map' }" replace>Map</router-link>
+                <router-link :to="{ name: 'catalog-dataset-map' }" replace v-if="hasSample">Map</router-link>
               </NavigationTabs>
             </div>
             <router-view></router-view>
@@ -121,6 +121,9 @@ export default {
     },
     isSubscriptionSyncing () {
       return this.subscription && this.subscription.sync_status === 'syncing';
+    },
+    hasSample () {
+      return this.dataset.sample_info && !!this.dataset.sample_info.id;
     }
   },
   methods: {
diff --git a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue
index a6040cf25ea4..bd9501381a1e 100644
--- a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue
+++ b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-if="hasSample">
     <div class="catalog-dataset-map">
       <div class="header">
         <h1 class="title is-caption is-txtMainTextColor">{{ title }}</h1>
@@ -30,6 +30,11 @@ export default {
       infoVisible: false
     };
   },
+  created () {
+    if (!this.hasSample) {
+      this.$router.replace({ name: 'catalog-dataset-summary' });
+    }
+  },
   computed: {
     ...mapState({
       dataset: state => state.catalog.dataset
@@ -39,6 +44,9 @@ export default {
     },
     defaultSource () {
       return this.dataset.sample_info && this.dataset.sample_info.default_source;
+    },
+    hasSample () {
+      return this.dataset.sample_info && !!this.dataset.sample_info.id;
     }
   },
   methods: {
diff --git a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetSummary.vue b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetSummary.vue
index 7dff59dda8c7..3c74fa7afac2 100644
--- a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetSummary.vue
+++ b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetSummary.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="grid grid-cell u-flex__justify--center u-mb--16 wrap-reverse--tablet">
     <div class="grid-cell grid-cell--col9 grid-cell--col12--tablet main-column">
-      <CatalogMapPreview />
+      <CatalogMapPreview v-if="hasSample" />
       <p
         class="text is-caption is-txtMainTextColor u-mt--32 u-mt--12--tablet"
         v-html="dataset.description || 'No description available.'"
@@ -142,6 +142,9 @@ export default {
     },
     geometryType () {
       return geometryTypeName(this.dataset.geom_type);
+    },
+    hasSample () {
+      return this.dataset.sample_info && !!this.dataset.sample_info.id;
     }
   },
   methods: {

From 23501d66dda5a1442252f7e6e68eef8b633147b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Sat, 28 Nov 2020 23:52:30 +0100
Subject: [PATCH 23/56] Remove duplicated bins

---
 .../new-dashboard/components/Catalog/CatalogMap.vue          | 5 +++--
 .../components/Catalog/map-styles/colorBinsStyle.js          | 4 ++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
index 4842408fe459..e21e6b69be64 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
@@ -97,7 +97,7 @@ export default {
     variableBins () {
       if (this.variable && this.variable.quantiles && colorStyle) {
         const breaks = [this.variable.min, ...this.variable.quantiles[2]['5']];
-        const bins = breaks.map(q => ({
+        const bins = [...new Set(breaks)].map(q => ({
           color: `rgb(${colorStyle(q)})`
         }));
         return bins;
@@ -363,7 +363,8 @@ export default {
   }
 
   .legend {
-    width: 240px;
+    min-width: 240px;
+    width: auto;
     height: auto;
     margin: 20px;
     padding: 20px;
diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorBinsStyle.js b/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorBinsStyle.js
index ecc644f15457..3bf291b7ecdc 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorBinsStyle.js
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorBinsStyle.js
@@ -20,11 +20,11 @@ export default function colorBinsStyle ({ breaks, colors, nulltColor = NULL_COLO
         );
       }
       const quantiles = stats.quantiles.find(d => d.hasOwnProperty(bins));
-      domain = quantiles[bins];
+      domain = [...new Set(quantiles[bins])];
     } else {
       const { min, max } = stats;
       const step = (max - min) / bins;
-      domain = range(min + step, max, step);
+      domain = [...new Set(range(min + step, max, step))];
     }
   }
 

From 627d5110cd8e8fce13103803e65ea4b6ecd1c81a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Wed, 2 Dec 2020 08:35:04 +0100
Subject: [PATCH 24/56] Bump dev version

---
 .../components/Catalog/legends/ColorBinsLegend.vue        | 2 ++
 package-lock.json                                         | 8 ++++----
 package.json                                              | 2 +-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/legends/ColorBinsLegend.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/legends/ColorBinsLegend.vue
index de591987ae73..50c4a672ed27 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/legends/ColorBinsLegend.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/legends/ColorBinsLegend.vue
@@ -32,6 +32,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import 'new-dashboard/styles/variables';
+
 .color-bins-legend {
   color: $neutral--700;
 
diff --git a/package-lock.json b/package-lock.json
index 71a63d7882e0..637667342057 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "cartodb-ui",
-  "version": "1.0.0-assets.210-do0",
+  "version": "1.0.0-assets.210-do1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -4674,9 +4674,9 @@
           }
         },
         "vue-loader-v16": {
-          "version": "npm:vue-loader@16.0.0-rc.2",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-rc.2.tgz",
-          "integrity": "sha512-cz8GK4dgIf1UTC+do80pGvh8BHcCRHLIQVHV9ONVQ8wtoqS9t/+H02rKcQP+TVNg7khgLyQV2+8eHUq7/AFq3g==",
+          "version": "npm:vue-loader@16.1.0",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.0.tgz",
+          "integrity": "sha512-fTtCdI7VeyNK0HP4q4y9Z9ts8TUeaF+2/FjKx8CJ/7/Oem1rCX7zIJe+d+jLrVnVNQjENd3gqmANraLcdRWwnQ==",
           "dev": true,
           "optional": true,
           "requires": {
diff --git a/package.json b/package.json
index 6bad0e403fe6..b749a72c0ce1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cartodb-ui",
-  "version": "1.0.0-assets.210-do0",
+  "version": "1.0.0-assets.210-do1",
   "description": "CARTO UI frontend",
   "repository": {
     "type": "git",

From f66f86250ac826c093f7a8bc59ab9b9a5e73430a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Wed, 2 Dec 2020 13:30:50 +0100
Subject: [PATCH 25/56] Update NEWS

---
 NEWS.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/NEWS.md b/NEWS.md
index 2bb20b3d5149..39abc6a92675 100644
--- a/NEWS.md
+++ b/NEWS.md
@@ -11,6 +11,7 @@ sudo make install
 
 ### Features
 - Add access to DO samples. Refactor samples/subscriptions UI [#15910](https://github.com/CartoDB/cartodb/pull/15910)
+- Add preview/visualization of maps in DO catalog [#15973](https://github.com/CartoDB/cartodb/pull/15973)
 
 ### Bug fixes / enhancements
 - Fix update notifications when using password-validated operation [#15960](https://github.com/CartoDB/cartodb/pull/15960)

From f1859caca19278f188f125bdb54c77456ac5d66f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Fri, 11 Dec 2020 17:36:53 +0100
Subject: [PATCH 26/56] Review catalog map styles. Fix quantiles compat

---
 .../components/Catalog/CatalogMap.vue         | 56 ++++++++++---------
 .../Catalog/map-styles/colorBinsStyle.js      |  4 +-
 .../map-styles/colorCategoriesStyle.js        |  2 +-
 3 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
index e21e6b69be64..2bace9ebcd9d 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
@@ -45,8 +45,8 @@ let propId;
 let colorStyle;
 let getFillColor;
 let getLineColor;
-let pointRadiusMinPixels;
-let lineWidthMinPixels;
+let getLineWidth;
+let getRadius;
 
 export default {
   name: 'CatalogMap',
@@ -111,7 +111,7 @@ export default {
         }));
         categories.push({
           name: 'Others',
-          color: 'rgb(119, 119, 119)'
+          color: 'rgb(165, 170, 153)'
         });
         return categories;
       }
@@ -203,8 +203,10 @@ export default {
           },
           getFillColor,
           getLineColor,
-          pointRadiusMinPixels,
-          lineWidthMinPixels,
+          getLineWidth,
+          getRadius,
+          lineWidthUnits: 'pixels',
+          pointRadiusUnits: 'pixels',
           pickable: true,
           onDataLoad: (tileJSON) => {
             console.log('TILEJSON', tileJSON);
@@ -237,6 +239,10 @@ export default {
       const variableExtra = this.variables.find((v) => {
         return v.id.split('.').slice(-1)[0] === variable.attribute;
       });
+      if (variable.quantiles && variable.quantiles.length === undefined) {
+        // Compatibility change: convert JSON into array
+        variable.quantiles = Object.keys(variable.quantiles).map(k => ({ [k]: variable.quantiles[k] }));
+      }
       this.variable = {
         ...variable,
         ...variableExtra
@@ -263,8 +269,8 @@ export default {
 
       if (g === 'Polygon' && v === null || this.isGeography) {
         getFillColor = [234, 200, 100, 168];
-        getLineColor = [0, 0, 0, 100];
-        lineWidthMinPixels = 0.5;
+        getLineColor = [44, 44, 44, 60];
+        getLineWidth = 1;
       }
       if (g === 'Polygon' && v === 'Number') {
         colorStyle = colorBinsStyle({
@@ -272,8 +278,8 @@ export default {
           colors: 'OrYel'
         });
         getFillColor = (d) => colorStyle(d.properties[propId]);
-        getLineColor = [0, 0, 0, 100];
-        lineWidthMinPixels = 0.5;
+        getLineColor = [44, 44, 44, 60];
+        getLineWidth = 1;
       }
       if (g === 'Polygon' && v === 'String') {
         colorStyle = colorCategoriesStyle({
@@ -281,12 +287,12 @@ export default {
           colors: 'Bold'
         });
         getFillColor = (d) => colorStyle(d.properties[propId]);
-        getLineColor = [0, 0, 0, 100];
-        lineWidthMinPixels = 0.5;
+        getLineColor = [44, 44, 44, 60];
+        getLineWidth = 1;
       }
       if (g === 'LineString' && v === null || this.isGeography) {
         getLineColor = [234, 200, 100, 168];
-        lineWidthMinPixels = 2;
+        getLineWidth = 2;
       }
       if (g === 'LineString' && v === 'Number') {
         colorStyle = colorBinsStyle({
@@ -294,7 +300,7 @@ export default {
           colors: 'SunsetDark'
         });
         getLineColor = (d) => colorStyle(d.properties[propId]);
-        lineWidthMinPixels = 2;
+        getLineWidth = 2;
       }
       if (g === 'LineString' && v === 'String') {
         colorStyle = colorCategoriesStyle({
@@ -302,13 +308,13 @@ export default {
           colors: 'Bold'
         });
         getLineColor = (d) => colorStyle(d.properties[propId]);
-        lineWidthMinPixels = 2;
+        getLineWidth = 2;
       }
       if (g === 'Point' && v === null || this.isGeography) {
         getFillColor = [234, 200, 100, 168];
-        getLineColor = [0, 0, 0, 100];
-        pointRadiusMinPixels = 4;
-        lineWidthMinPixels = 0.1;
+        getLineColor = [44, 44, 44, 60];
+        getLineWidth = 1;
+        getRadius = 4;
       }
       if (g === 'Point' && v === 'Number') {
         colorStyle = colorBinsStyle({
@@ -316,9 +322,9 @@ export default {
           colors: 'SunsetDark'
         });
         getFillColor = (d) => colorStyle(d.properties[propId]);
-        getLineColor = [0, 0, 0, 100];
-        pointRadiusMinPixels = 4;
-        lineWidthMinPixels = 0.1;
+        getLineColor = [44, 44, 44, 60];
+        getLineWidth = 1;
+        getRadius = 4;
       }
       if (g === 'Point' && v === 'String') {
         colorStyle = colorCategoriesStyle({
@@ -326,9 +332,9 @@ export default {
           colors: 'Bold'
         });
         getFillColor = (d) => colorStyle(d.properties[propId]);
-        getLineColor = [0, 0, 0, 100];
-        pointRadiusMinPixels = 4;
-        lineWidthMinPixels = 0.1;
+        getLineColor = [44, 44, 44, 60];
+        getLineWidth = 1;
+        getRadius = 4;
       }
     },
     resetColorStyle () {
@@ -336,8 +342,8 @@ export default {
       colorStyle = undefined;
       getFillColor = undefined;
       getLineColor = undefined;
-      pointRadiusMinPixels = undefined;
-      lineWidthMinPixels = undefined;
+      getLineWidth = undefined;
+      getRadius = undefined;
     }
   }
 };
diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorBinsStyle.js b/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorBinsStyle.js
index 3bf291b7ecdc..28d40733ed49 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorBinsStyle.js
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorBinsStyle.js
@@ -4,7 +4,7 @@ import { gePalette, NULL_COLOR } from './utils';
 
 const N_BINS = 5;
 
-export default function colorBinsStyle ({ breaks, colors, nulltColor = NULL_COLOR }) {
+export default function colorBinsStyle ({ breaks, colors, nullColor = NULL_COLOR }) {
   let domain;
   if (Array.isArray(breaks)) {
     domain = breaks;
@@ -35,6 +35,6 @@ export default function colorBinsStyle ({ breaks, colors, nulltColor = NULL_COLO
     .range(palette);
 
   return d => {
-    return d === (undefined || null) ? nulltColor : color(d);
+    return d === (undefined || null) ? nullColor : color(d);
   };
 }
diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorCategoriesStyle.js b/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorCategoriesStyle.js
index 49856cd052e1..72ac60de3767 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorCategoriesStyle.js
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorCategoriesStyle.js
@@ -1,6 +1,6 @@
 import { gePalette, NULL_COLOR } from './utils';
 
-const OTHERS_COLOR = [119, 119, 119];
+const OTHERS_COLOR = [165, 170, 153];
 const TOP = 10;
 
 export default function colorCategoriesStyle ({

From 70f08393d595f36ab739cafa4c877cf0e0cc080c Mon Sep 17 00:00:00 2001
From: Margara <margara@geographica.gs>
Date: Sun, 13 Dec 2020 17:44:11 +0100
Subject: [PATCH 27/56] add map styles per dataset category

---
 .../components/Catalog/CatalogMap.vue         | 68 +++++++++++++++++--
 package-lock.json                             |  6 +-
 2 files changed, 64 insertions(+), 10 deletions(-)

diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
index 2bace9ebcd9d..defb07be2103 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
@@ -48,6 +48,20 @@ let getLineColor;
 let getLineWidth;
 let getRadius;
 
+const CATEGORY_IDS = {
+   DEMOGRAPHICS: 'demographics',
+   ENVIRONMENTAL: 'environmental',
+   DERIVED: 'derived',
+   POIS: 'points_of_interest',
+   GEOGRAPHY: 'geography',
+   HOUSING: 'housing',
+   HUMAN_MOBILITY: 'human_mobility',
+   ROAD_TRAFFIC: 'road_traffic',
+   FINANCIAL: 'financial',
+   COVID19: 'covid19',
+   BEHAVIORAL: 'behavioral'
+} 
+
 export default {
   name: 'CatalogMap',
   props: {
@@ -76,6 +90,10 @@ export default {
     title () {
       return this.dataset.name;
     },
+    categoryId () {
+      console.log('CATEGORY ID:', this.dataset.category_id)
+      return this.dataset.category_id;
+    },
     isGeography () {
       return this.$route.params.entity_type === 'geography';
     },
@@ -94,6 +112,41 @@ export default {
     variableAvg () {
       return this.formatNumber(this.variable && this.variable.avg);
     },
+    categoryIdColor () {
+      let cartoColor;
+      switch (this.categoryId) {
+        case CATEGORY_IDS.DEMOGRAPHICS: 
+          cartoColor = 'SunsetDark'
+        break;
+        case CATEGORY_IDS.ENVIRONMENTAL:
+          cartoColor = 'BluGrn'
+          break;
+        case CATEGORY_IDS.DERIVED:
+          cartoColor = 'Teal'
+          break;
+        case CATEGORY_IDS.HOUSING:
+          cartoColor = 'Magenta'
+          break;
+        case CATEGORY_IDS.HUMAN_MOBILITY:
+          cartoColor = 'BurgYl'
+          break;
+        case CATEGORY_IDS.ROAD_TRAFFIC:
+          cartoColor = 'Sunset'
+          break;
+        case CATEGORY_IDS.FINANCIAL: 
+          cartoColor = 'PurpOr'
+          break; 
+        case CATEGORY_IDS.COVID19:
+          cartoColor = 'Peach'
+          break;
+        case CATEGORY_IDS.BEHAVIORAL:
+          cartoColor = 'TealGrn'
+          break;
+        default:
+          cartoColor = 'OrYel'
+      } 
+      return cartoColor;
+    },
     variableBins () {
       if (this.variable && this.variable.quantiles && colorStyle) {
         const breaks = [this.variable.min, ...this.variable.quantiles[2]['5']];
@@ -275,8 +328,9 @@ export default {
       if (g === 'Polygon' && v === 'Number') {
         colorStyle = colorBinsStyle({
           breaks: { stats, method: 'quantiles', bins: 5 },
-          colors: 'OrYel'
+          colors: this.categoryIdColor
         });
+        console.log('CARTOCOLOR:', this.categoryIdColor);
         getFillColor = (d) => colorStyle(d.properties[propId]);
         getLineColor = [44, 44, 44, 60];
         getLineWidth = 1;
@@ -284,7 +338,7 @@ export default {
       if (g === 'Polygon' && v === 'String') {
         colorStyle = colorCategoriesStyle({
           categories: { stats, top: 10 },
-          colors: 'Bold'
+          colors: 'Prism'
         });
         getFillColor = (d) => colorStyle(d.properties[propId]);
         getLineColor = [44, 44, 44, 60];
@@ -297,7 +351,7 @@ export default {
       if (g === 'LineString' && v === 'Number') {
         colorStyle = colorBinsStyle({
           breaks: { stats, method: 'quantiles', bins: 5 },
-          colors: 'SunsetDark'
+          colors: this.categoryIdColor
         });
         getLineColor = (d) => colorStyle(d.properties[propId]);
         getLineWidth = 2;
@@ -305,7 +359,7 @@ export default {
       if (g === 'LineString' && v === 'String') {
         colorStyle = colorCategoriesStyle({
           categories: { stats, top: 10 },
-          colors: 'Bold'
+          colors: 'Prism'
         });
         getLineColor = (d) => colorStyle(d.properties[propId]);
         getLineWidth = 2;
@@ -319,10 +373,10 @@ export default {
       if (g === 'Point' && v === 'Number') {
         colorStyle = colorBinsStyle({
           breaks: { stats, method: 'quantiles', bins: 5 },
-          colors: 'SunsetDark'
+          colors: this.categoryIdColor
         });
         getFillColor = (d) => colorStyle(d.properties[propId]);
-        getLineColor = [44, 44, 44, 60];
+        getLineColor = [100, 100, 100, 255];
         getLineWidth = 1;
         getRadius = 4;
       }
@@ -332,7 +386,7 @@ export default {
           colors: 'Bold'
         });
         getFillColor = (d) => colorStyle(d.properties[propId]);
-        getLineColor = [44, 44, 44, 60];
+        getLineColor = [100, 100, 100, 255];
         getLineWidth = 1;
         getRadius = 4;
       }
diff --git a/package-lock.json b/package-lock.json
index 637667342057..a85bc0eaf82d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4674,9 +4674,9 @@
           }
         },
         "vue-loader-v16": {
-          "version": "npm:vue-loader@16.1.0",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.0.tgz",
-          "integrity": "sha512-fTtCdI7VeyNK0HP4q4y9Z9ts8TUeaF+2/FjKx8CJ/7/Oem1rCX7zIJe+d+jLrVnVNQjENd3gqmANraLcdRWwnQ==",
+          "version": "npm:vue-loader@16.1.1",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.1.tgz",
+          "integrity": "sha512-wz/+HFg/3SBayHWAlZXARcnDTl3VOChrfW9YnxvAweiuyKX/7IGx1ad/4yJHmwhgWlOVYMAbTiI7GV8G33PfGQ==",
           "dev": true,
           "optional": true,
           "requires": {

From e845b22699df91d8bd9d577bd1c3fb2180a98f19 Mon Sep 17 00:00:00 2001
From: Margara <margara@geographica.gs>
Date: Tue, 15 Dec 2020 22:25:47 +0100
Subject: [PATCH 28/56] change ramp for sociodemographics

---
 .../new-dashboard/components/Catalog/CatalogMap.vue         | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
index defb07be2103..b144710aac1b 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
@@ -116,7 +116,7 @@ export default {
       let cartoColor;
       switch (this.categoryId) {
         case CATEGORY_IDS.DEMOGRAPHICS: 
-          cartoColor = 'SunsetDark'
+          cartoColor = 'BrwnYl'
         break;
         case CATEGORY_IDS.ENVIRONMENTAL:
           cartoColor = 'BluGrn'
@@ -125,10 +125,10 @@ export default {
           cartoColor = 'Teal'
           break;
         case CATEGORY_IDS.HOUSING:
-          cartoColor = 'Magenta'
+          cartoColor = 'Burg'
           break;
         case CATEGORY_IDS.HUMAN_MOBILITY:
-          cartoColor = 'BurgYl'
+          cartoColor = 'RedOr'
           break;
         case CATEGORY_IDS.ROAD_TRAFFIC:
           cartoColor = 'Sunset'

From 8880809f5908e4dd2111160440e45811b7e60bbf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Wed, 16 Dec 2020 14:50:23 +0100
Subject: [PATCH 29/56] Fix minor code style issues

---
 .../components/Catalog/CatalogMap.vue         | 56 +++++++++----------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
index b144710aac1b..b5fc4d623308 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
@@ -49,18 +49,18 @@ let getLineWidth;
 let getRadius;
 
 const CATEGORY_IDS = {
-   DEMOGRAPHICS: 'demographics',
-   ENVIRONMENTAL: 'environmental',
-   DERIVED: 'derived',
-   POIS: 'points_of_interest',
-   GEOGRAPHY: 'geography',
-   HOUSING: 'housing',
-   HUMAN_MOBILITY: 'human_mobility',
-   ROAD_TRAFFIC: 'road_traffic',
-   FINANCIAL: 'financial',
-   COVID19: 'covid19',
-   BEHAVIORAL: 'behavioral'
-} 
+  DEMOGRAPHICS: 'demographics',
+  ENVIRONMENTAL: 'environmental',
+  DERIVED: 'derived',
+  POIS: 'points_of_interest',
+  GEOGRAPHY: 'geography',
+  HOUSING: 'housing',
+  HUMAN_MOBILITY: 'human_mobility',
+  ROAD_TRAFFIC: 'road_traffic',
+  FINANCIAL: 'financial',
+  COVID19: 'covid19',
+  BEHAVIORAL: 'behavioral'
+};
 
 export default {
   name: 'CatalogMap',
@@ -91,7 +91,7 @@ export default {
       return this.dataset.name;
     },
     categoryId () {
-      console.log('CATEGORY ID:', this.dataset.category_id)
+      console.log('CATEGORY ID:', this.dataset.category_id);
       return this.dataset.category_id;
     },
     isGeography () {
@@ -115,36 +115,36 @@ export default {
     categoryIdColor () {
       let cartoColor;
       switch (this.categoryId) {
-        case CATEGORY_IDS.DEMOGRAPHICS: 
-          cartoColor = 'BrwnYl'
-        break;
+        case CATEGORY_IDS.DEMOGRAPHICS:
+          cartoColor = 'BrwnYl';
+          break;
         case CATEGORY_IDS.ENVIRONMENTAL:
-          cartoColor = 'BluGrn'
+          cartoColor = 'BluGrn';
           break;
         case CATEGORY_IDS.DERIVED:
-          cartoColor = 'Teal'
+          cartoColor = 'Teal';
           break;
         case CATEGORY_IDS.HOUSING:
-          cartoColor = 'Burg'
+          cartoColor = 'Burg';
           break;
         case CATEGORY_IDS.HUMAN_MOBILITY:
-          cartoColor = 'RedOr'
+          cartoColor = 'RedOr';
           break;
         case CATEGORY_IDS.ROAD_TRAFFIC:
-          cartoColor = 'Sunset'
+          cartoColor = 'Sunset';
+          break;
+        case CATEGORY_IDS.FINANCIAL:
+          cartoColor = 'PurpOr';
           break;
-        case CATEGORY_IDS.FINANCIAL: 
-          cartoColor = 'PurpOr'
-          break; 
         case CATEGORY_IDS.COVID19:
-          cartoColor = 'Peach'
+          cartoColor = 'Peach';
           break;
         case CATEGORY_IDS.BEHAVIORAL:
-          cartoColor = 'TealGrn'
+          cartoColor = 'TealGrn';
           break;
         default:
-          cartoColor = 'OrYel'
-      } 
+          cartoColor = 'OrYel';
+      }
       return cartoColor;
     },
     variableBins () {

From cbc26731b926fa70ee39bf59952be63ed884260c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Wed, 16 Dec 2020 14:59:16 +0100
Subject: [PATCH 30/56] Minor refactor

---
 .../components/Catalog/CatalogMap.vue         | 67 +++++--------------
 1 file changed, 16 insertions(+), 51 deletions(-)

diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
index b5fc4d623308..51efa97ef679 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
@@ -48,18 +48,16 @@ let getLineColor;
 let getLineWidth;
 let getRadius;
 
-const CATEGORY_IDS = {
-  DEMOGRAPHICS: 'demographics',
-  ENVIRONMENTAL: 'environmental',
-  DERIVED: 'derived',
-  POIS: 'points_of_interest',
-  GEOGRAPHY: 'geography',
-  HOUSING: 'housing',
-  HUMAN_MOBILITY: 'human_mobility',
-  ROAD_TRAFFIC: 'road_traffic',
-  FINANCIAL: 'financial',
-  COVID19: 'covid19',
-  BEHAVIORAL: 'behavioral'
+const CATEGORY_PALETTES = {
+  demographics: 'BrwnYl',
+  environmental: 'BluGrn',
+  derived: 'Teal',
+  housing: 'Burg',
+  human_mobility: 'RedOr',
+  road_traffic: 'Sunset',
+  financial: 'PurpOr',
+  covid19: 'Peach',
+  behavioral: 'TealGrn'
 };
 
 export default {
@@ -94,6 +92,9 @@ export default {
       console.log('CATEGORY ID:', this.dataset.category_id);
       return this.dataset.category_id;
     },
+    categoryIdPalette () {
+      return CATEGORY_PALETTES[this.categoryId] || 'OrYel';
+    },
     isGeography () {
       return this.$route.params.entity_type === 'geography';
     },
@@ -112,41 +113,6 @@ export default {
     variableAvg () {
       return this.formatNumber(this.variable && this.variable.avg);
     },
-    categoryIdColor () {
-      let cartoColor;
-      switch (this.categoryId) {
-        case CATEGORY_IDS.DEMOGRAPHICS:
-          cartoColor = 'BrwnYl';
-          break;
-        case CATEGORY_IDS.ENVIRONMENTAL:
-          cartoColor = 'BluGrn';
-          break;
-        case CATEGORY_IDS.DERIVED:
-          cartoColor = 'Teal';
-          break;
-        case CATEGORY_IDS.HOUSING:
-          cartoColor = 'Burg';
-          break;
-        case CATEGORY_IDS.HUMAN_MOBILITY:
-          cartoColor = 'RedOr';
-          break;
-        case CATEGORY_IDS.ROAD_TRAFFIC:
-          cartoColor = 'Sunset';
-          break;
-        case CATEGORY_IDS.FINANCIAL:
-          cartoColor = 'PurpOr';
-          break;
-        case CATEGORY_IDS.COVID19:
-          cartoColor = 'Peach';
-          break;
-        case CATEGORY_IDS.BEHAVIORAL:
-          cartoColor = 'TealGrn';
-          break;
-        default:
-          cartoColor = 'OrYel';
-      }
-      return cartoColor;
-    },
     variableBins () {
       if (this.variable && this.variable.quantiles && colorStyle) {
         const breaks = [this.variable.min, ...this.variable.quantiles[2]['5']];
@@ -328,9 +294,8 @@ export default {
       if (g === 'Polygon' && v === 'Number') {
         colorStyle = colorBinsStyle({
           breaks: { stats, method: 'quantiles', bins: 5 },
-          colors: this.categoryIdColor
+          colors: this.categoryIdPalette
         });
-        console.log('CARTOCOLOR:', this.categoryIdColor);
         getFillColor = (d) => colorStyle(d.properties[propId]);
         getLineColor = [44, 44, 44, 60];
         getLineWidth = 1;
@@ -351,7 +316,7 @@ export default {
       if (g === 'LineString' && v === 'Number') {
         colorStyle = colorBinsStyle({
           breaks: { stats, method: 'quantiles', bins: 5 },
-          colors: this.categoryIdColor
+          colors: this.categoryIdPalette
         });
         getLineColor = (d) => colorStyle(d.properties[propId]);
         getLineWidth = 2;
@@ -373,7 +338,7 @@ export default {
       if (g === 'Point' && v === 'Number') {
         colorStyle = colorBinsStyle({
           breaks: { stats, method: 'quantiles', bins: 5 },
-          colors: this.categoryIdColor
+          colors: this.categoryIdPalette
         });
         getFillColor = (d) => colorStyle(d.properties[propId]);
         getLineColor = [100, 100, 100, 255];

From 434d28bac487b22316323152281963cb54d646b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Wed, 16 Dec 2020 15:15:02 +0100
Subject: [PATCH 31/56] Fix null values in catalog viz

---
 .../new-dashboard/components/Catalog/CatalogMap.vue           | 4 +++-
 .../components/Catalog/map-styles/colorBinsStyle.js           | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
index 51efa97ef679..3f0a70fac03f 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
@@ -165,7 +165,9 @@ export default {
         if (!object || !this.variable) return false;
         const title = this.variable.attribute;
         let value = object.properties[this.variable.attribute];
-        if (value === undefined) return false;
+        if (value === undefined || value === null) {
+          value = 'No data';
+        }
         if (typeof value === 'number') {
           value = this.formatNumber(value);
         }
diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorBinsStyle.js b/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorBinsStyle.js
index 28d40733ed49..213377498281 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorBinsStyle.js
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorBinsStyle.js
@@ -35,6 +35,6 @@ export default function colorBinsStyle ({ breaks, colors, nullColor = NULL_COLOR
     .range(palette);
 
   return d => {
-    return d === (undefined || null) ? nullColor : color(d);
+    return (d === undefined || d === null) ? nullColor : color(d);
   };
 }

From 16152d7edf11cf7c37135a6bb6c4eca6987b5729 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Wed, 16 Dec 2020 15:16:29 +0100
Subject: [PATCH 32/56] Use 2 decimal places for float values

---
 .../javascripts/new-dashboard/components/Catalog/CatalogMap.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
index 3f0a70fac03f..d15848f218d1 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
@@ -275,7 +275,7 @@ export default {
         if (!Number.isInteger(value)) {
           return value.toLocaleString(undefined, {
             minimumFractionDigits: 2,
-            maximumFractionDigits: 3
+            maximumFractionDigits: 2
           });
         }
         return value.toLocaleString();

From bd0bc277ffbe4dddfcdda8d6aa06c37635b21820 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Wed, 16 Dec 2020 15:37:58 +0100
Subject: [PATCH 33/56] Use geoid by default in Geographies

---
 .../components/Catalog/CatalogMap.vue          | 15 +++++++++++----
 .../components/Catalog/legends/BasicLegend.vue | 18 ++++++++++++++++++
 2 files changed, 29 insertions(+), 4 deletions(-)
 create mode 100644 lib/assets/javascripts/new-dashboard/components/Catalog/legends/BasicLegend.vue

diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
index d15848f218d1..5347141e0316 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
@@ -2,9 +2,13 @@
   <div class="base-map">
     <div id="map"></div>
     <canvas id="deck-canvas"></canvas>
-    <div v-if="legend && !isGeography" class="legend">
+    <div v-if="legend" class="legend">
+      <BasicLegend
+        v-if="isGeography"
+        :title="variableName"
+      />
       <ColorBinsLegend
-        v-if="variableMax"
+        v-else-if="variableMax"
         :title="variableName"
         :min="variableMin"
         :max="variableMax"
@@ -12,7 +16,7 @@
         :bins="variableBins"
       />
       <ColorCategoriesLegend
-        v-if="variableCategories"
+        v-else-if="variableCategories"
         :title="variableName"
         :categories="variableCategories"
       />
@@ -37,6 +41,7 @@ import { CartoBQTilerLayer, BASEMAP } from '@deck.gl/carto';
 import colorBinsStyle from './map-styles/colorBinsStyle';
 import colorCategoriesStyle from './map-styles/colorCategoriesStyle';
 
+import BasicLegend from './legends/BasicLegend';
 import ColorBinsLegend from './legends/ColorBinsLegend';
 import ColorCategoriesLegend from './legends/ColorCategoriesLegend';
 
@@ -68,6 +73,7 @@ export default {
     showInfo: Boolean
   },
   components: {
+    BasicLegend,
     ColorBinsLegend,
     ColorCategoriesLegend
   },
@@ -255,7 +261,8 @@ export default {
       this.geomType = tilestats.layers[0].geometry;
     },
     setVariable (tilestats) {
-      const variable = tilestats.layers[0].attributes[1];
+      const attributes = tilestats.layers[0].attributes;
+      const variable = attributes[1] || attributes[0]; // Default geoid
       if (!this.variables || !variable) return;
       const variableExtra = this.variables.find((v) => {
         return v.id.split('.').slice(-1)[0] === variable.attribute;
diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/legends/BasicLegend.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/legends/BasicLegend.vue
new file mode 100644
index 000000000000..d5761c813267
--- /dev/null
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/legends/BasicLegend.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="basic-legend is-small">
+    <p class="legend-title is-semibold">{{ title }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BasicLegend',
+  props: {
+    title: String
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+// .basic-legend {}
+</style>

From 8788eb97782ada34f452adda7035395f857b23dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Wed, 16 Dec 2020 15:41:24 +0100
Subject: [PATCH 34/56] Adjust initial zoom level

---
 .../javascripts/new-dashboard/components/Catalog/CatalogMap.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
index 5347141e0316..e39ce39a9f65 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
@@ -239,7 +239,7 @@ export default {
             console.log('TILEJSON', tileJSON);
             const { center, tilestats } = tileJSON;
             this.initialViewState = {
-              zoom: parseFloat(center[2]),
+              zoom: parseFloat(center[2]) - 1,
               latitude: parseFloat(center[1]),
               longitude: parseFloat(center[0]),
               bearing: 0,

From a9c8ce84985112482851892c1a9980bf96a916b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Wed, 16 Dec 2020 16:30:25 +0100
Subject: [PATCH 35/56] Fix value/color mapping

---
 .../new-dashboard/components/Catalog/CatalogMap.vue        | 2 +-
 .../components/Catalog/legends/ColorBinsLegend.vue         | 2 +-
 .../components/Catalog/map-styles/colorBinsStyle.js        | 7 +++++--
 .../components/Catalog/map-styles/colorCategoriesStyle.js  | 6 ++++--
 4 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
index e39ce39a9f65..7d3d2a302bb3 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
@@ -121,7 +121,7 @@ export default {
     },
     variableBins () {
       if (this.variable && this.variable.quantiles && colorStyle) {
-        const breaks = [this.variable.min, ...this.variable.quantiles[2]['5']];
+        const breaks = [...this.variable.quantiles[2]['5'], this.variable.max];
         const bins = [...new Set(breaks)].map(q => ({
           color: `rgb(${colorStyle(q)})`
         }));
diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/legends/ColorBinsLegend.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/legends/ColorBinsLegend.vue
index 50c4a672ed27..6c9ed5689dfa 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/legends/ColorBinsLegend.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/legends/ColorBinsLegend.vue
@@ -20,7 +20,7 @@
 
 <script>
 export default {
-  name: 'ColorCategoriesLegend',
+  name: 'ColorBinsLegend',
   props: {
     title: String,
     min: String,
diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorBinsStyle.js b/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorBinsStyle.js
index 213377498281..04b3d0f50ed6 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorBinsStyle.js
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorBinsStyle.js
@@ -34,7 +34,10 @@ export default function colorBinsStyle ({ breaks, colors, nullColor = NULL_COLOR
     .domain(domain)
     .range(palette);
 
-  return d => {
-    return (d === undefined || d === null) ? nullColor : color(d);
+  return value => {
+    // Remove epsilon to make sure we are below the breaks
+    // for domains with less than 3 elements.
+    const EPSILON = 0.0000000001;
+    return Number.isFinite(value) ? color(value - EPSILON) : nullColor;
   };
 }
diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorCategoriesStyle.js b/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorCategoriesStyle.js
index 72ac60de3767..f1947d127826 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorCategoriesStyle.js
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorCategoriesStyle.js
@@ -25,7 +25,9 @@ export default function colorCategoriesStyle ({
     colorsByCategory[c] = palette[i];
   }
 
-  return d => {
-    return d === (undefined || null) ? nullColor : colorsByCategory[d] || othersColor;
+  return value => {
+    return Number.isFinite(value) || typeof value === 'string'
+      ? colorsByCategory[value] || othersColor
+      : nullColor;
   };
 }

From 79cf7ade65c0f49ed8d28ed24205eb90cb41448f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Wed, 16 Dec 2020 16:46:58 +0100
Subject: [PATCH 36/56] Show recenter button only if not centered

---
 .../new-dashboard/components/Catalog/CatalogMap.vue       | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
index 7d3d2a302bb3..de73f74c2bf8 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
@@ -24,7 +24,7 @@
     <div v-show="showInfo && variableDescription" class="map-info">
       <p class="is-small">{{ variableDescription }}</p>
     </div>
-    <div v-if="recenter" class="recenter" @click="recenterMap">
+    <div v-show="recenter && !centered" class="recenter" @click="recenterMap">
       <img src="../../assets/icons/catalog/recenter.svg" alt="recenter">
       <p class="is-small is-semibold">Recenter</p>
     </div>
@@ -83,7 +83,8 @@ export default {
       showMap: false,
       variable: null,
       geomType: null,
-      initialViewState: null
+      initialViewState: null,
+      centered: false
     };
   },
   computed: {
@@ -210,6 +211,9 @@ export default {
         bearing: viewState.bearing,
         pitch: viewState.pitch
       });
+      this.centered = this.initialViewState.zoom === viewState.zoom &&
+        this.initialViewState.latitude === viewState.latitude &&
+        this.initialViewState.longitude === viewState.longitude;
     },
     recenterMap () {
       // Hack to force initialViewState to change

From 9c9b69f04bb7a6517a2af3355110eb1223818c73 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Fri, 18 Dec 2020 09:50:31 +0100
Subject: [PATCH 37/56] Hide legend when variable is geoid

---
 .../new-dashboard/components/Catalog/CatalogMap.vue | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
index de73f74c2bf8..4d35927429a7 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
@@ -2,13 +2,9 @@
   <div class="base-map">
     <div id="map"></div>
     <canvas id="deck-canvas"></canvas>
-    <div v-if="legend" class="legend">
-      <BasicLegend
-        v-if="isGeography"
-        :title="variableName"
-      />
+    <div v-if="legend && !variableGeoid" class="legend">
       <ColorBinsLegend
-        v-else-if="variableMax"
+        v-if="variableMax"
         :title="variableName"
         :min="variableMin"
         :max="variableMax"
@@ -41,7 +37,6 @@ import { CartoBQTilerLayer, BASEMAP } from '@deck.gl/carto';
 import colorBinsStyle from './map-styles/colorBinsStyle';
 import colorCategoriesStyle from './map-styles/colorCategoriesStyle';
 
-import BasicLegend from './legends/BasicLegend';
 import ColorBinsLegend from './legends/ColorBinsLegend';
 import ColorCategoriesLegend from './legends/ColorCategoriesLegend';
 
@@ -73,7 +68,6 @@ export default {
     showInfo: Boolean
   },
   components: {
-    BasicLegend,
     ColorBinsLegend,
     ColorCategoriesLegend
   },
@@ -111,6 +105,9 @@ export default {
     variableDescription () {
       return this.variable && this.variable.description;
     },
+    variableGeoid () {
+      return this.variableName === 'geoid';
+    },
     variableMin () {
       return this.formatNumber(this.variable && this.variable.min);
     },

From 42a30b5e51595aab0330591c891e2baeca9395df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Fri, 18 Dec 2020 10:07:44 +0100
Subject: [PATCH 38/56] Fix font-family in catalog map

---
 .../new-dashboard/components/Catalog/CatalogMap.vue      | 4 +++-
 .../new-dashboard/pages/Data/CatalogDatasetMap.vue       | 9 +++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
index 4d35927429a7..98a8681f5906 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
@@ -183,6 +183,7 @@ export default {
           'padding': '8px 12px',
           'border-radius': '2px',
           'font-size': '12px',
+          'font-family': "'Open Sans', 'Helvetica Neue', Helvetica, sans-serif",
           'color': '#162945',
           'background-color': 'white',
           'border': 'solid 1px #e6e8eb'
@@ -384,6 +385,7 @@ export default {
 .base-map {
   position: relative;
   height: 600px;
+  font-family: $base__font-family;
 
   & > * {
     position: absolute;
@@ -420,7 +422,7 @@ export default {
     box-shadow: 0 2px 8px 0 rgba(44, 44, 44, 0.16);
 
     p {
-      color: $neutral--700;
+      color: $text__color--secondary;
     }
   }
 
diff --git a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue
index bd9501381a1e..0c88c8e21c2a 100644
--- a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue
+++ b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue
@@ -2,13 +2,13 @@
   <div v-if="hasSample">
     <div class="catalog-dataset-map">
       <div class="header">
-        <h1 class="title is-caption is-txtMainTextColor">{{ title }}</h1>
+        <h1 class="is-txtMainTextColor">{{ title }}</h1>
         <img src="../../assets/icons/catalog/button-question.svg" alt="question" @click="infoVisible = !infoVisible">
       </div>
       <CatalogMap class="base-map" :showInfo="infoVisible" :legend="true" :recenter="true" />
     </div>
     <div class="footer" v-if="defaultSource">
-      <span class="is-small">
+      <span class="is-small is-txtMainTextColor">
         (*) Sample not available: this preview is for&nbsp;
         <i class="is-semibold is-italic">{{ defaultSource }}</i>
       </span>
@@ -62,11 +62,16 @@ export default {
   padding: 12px;
   border-radius: 4px;
   background: $color-primary--soft;
+  font-family: $base__font-family;
 
   .header {
     display: flex;
     justify-content: space-between;
 
+    h1 {
+      font-weight: 600;
+    }
+
     img {
       width: 30px;
       height: 30px;

From 28ee14c621917876c8fb208ea305c08c133fe656 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Fri, 18 Dec 2020 11:00:57 +0100
Subject: [PATCH 39/56] Display multiple features in the same location

---
 .../components/Catalog/CatalogMap.vue         | 36 +++++++++++++------
 1 file changed, 26 insertions(+), 10 deletions(-)

diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
index 98a8681f5906..24640f320fc6 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
@@ -165,20 +165,33 @@ export default {
         this.syncMapboxViewState(viewState);
       },
       controller: true,
-      getTooltip: ({ object }) => {
+      getTooltip: ({ x, y, object }) => {
         if (!object || !this.variable) return false;
         const title = this.variable.attribute;
-        let value = object.properties[this.variable.attribute];
-        if (value === undefined || value === null) {
-          value = 'No data';
+        let html = `<p style="margin: 0 0 0 4px; color: #6f777c;">${title}</p>`;
+        const objects = deck.pickMultipleObjects({ x, y });
+        let countNoData = 0;
+        for (let o of objects) {
+          if (this.compare(o.object.geometry.coordinates, object.geometry.coordinates)) {
+            // Display the points that are fully overlapped (same coordinates)
+            let value = o.object.properties[this.variable.attribute];
+            if (value !== undefined && value !== null) {
+              if (typeof value === 'number') {
+                value = this.formatNumber(value);
+              }
+              html += `<p style="margin: 4px 0 0 4px;"><b>${value}</b></p>`;
+            } else {
+              countNoData += 1;
+            }
+          }
         }
-        if (typeof value === 'number') {
-          value = this.formatNumber(value);
+        if (countNoData > 0) {
+          let value = 'No data';
+          if (countNoData > 1) {
+            value += ` (${countNoData})`;
+          }
+          html += `<p style="margin: 4px 0 0 4px;"><b>${value}</b></p>`;
         }
-        const html = `
-          <p style="margin: 0 0 0 4px; color: #6f777c;">${title}</p>
-          <p style="margin: 4px 0 0 4px;"><b>${value}</b></p>
-        `;
         const style = {
           'padding': '8px 12px',
           'border-radius': '2px',
@@ -374,6 +387,9 @@ export default {
       getLineColor = undefined;
       getLineWidth = undefined;
       getRadius = undefined;
+    },
+    compare (a, b) {
+      return JSON.stringify(a) === JSON.stringify(b);
     }
   }
 };

From 67ff45440a5f4fab7f164e0d584d154575edcc68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Fri, 18 Dec 2020 15:22:01 +0100
Subject: [PATCH 40/56] Filter duplicated object from pickMultipleObjects

---
 .../new-dashboard/components/Catalog/CatalogMap.vue      | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
index 24640f320fc6..b3c2441f439a 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
@@ -2,7 +2,7 @@
   <div class="base-map">
     <div id="map"></div>
     <canvas id="deck-canvas"></canvas>
-    <div v-if="legend && !variableGeoid" class="legend">
+    <div v-if="legend && !isGeography" class="legend">
       <ColorBinsLegend
         v-if="variableMax"
         :title="variableName"
@@ -105,9 +105,6 @@ export default {
     variableDescription () {
       return this.variable && this.variable.description;
     },
-    variableGeoid () {
-      return this.variableName === 'geoid';
-    },
     variableMin () {
       return this.formatNumber(this.variable && this.variable.min);
     },
@@ -169,7 +166,9 @@ export default {
         if (!object || !this.variable) return false;
         const title = this.variable.attribute;
         let html = `<p style="margin: 0 0 0 4px; color: #6f777c;">${title}</p>`;
-        const objects = deck.pickMultipleObjects({ x, y });
+        const objects = deck.pickMultipleObjects({ x, y })
+          // Remove duplicated objects
+          .filter((v, i, a) => a.findIndex(t => (t.index === v.index)) === i);
         let countNoData = 0;
         for (let o of objects) {
           if (this.compare(o.object.geometry.coordinates, object.geometry.coordinates)) {

From b583a0f2bd5133154b27105e4f7c11429e9e8e40 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Fri, 18 Dec 2020 16:20:43 +0100
Subject: [PATCH 41/56] Point to production tileset samples

---
 .../components/Catalog/CatalogMap.vue         |  12 +-
 package-lock.json                             | 284 +++++++++---------
 package.json                                  |  10 +-
 3 files changed, 155 insertions(+), 151 deletions(-)

diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
index b3c2441f439a..947eb1c55677 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
@@ -138,8 +138,11 @@ export default {
     },
     tilesetSampleId () {
       const TILESET_SAMPLE_PROJECT_MAP = {
-        'do-sample-prod': 'do-tileset-sample-stag',
-        'do-public-sample': 'do-public-tileset-sample-stag'
+        'do-sample-prod': 'do-tileset-sample',
+        'do-public-sample': 'do-public-tileset-sample'
+        // To test in staging
+        // 'do-sample-prod': 'do-tileset-sample-stag',
+        // 'do-public-sample': 'do-public-tileset-sample-stag'
       };
       const [project, dataset, table] = this.dataset.sample_info.id.split('.');
       return [TILESET_SAMPLE_PROJECT_MAP[project], dataset, table].join('.');
@@ -239,8 +242,9 @@ export default {
           data: this.tilesetSampleId,
           credentials: {
             username: 'public',
-            apiKey: 'default_public',
-            mapsUrl: 'https://maps-api-v2.carto-staging.com/user/{user}'
+            apiKey: 'default_public'
+            // To test in staging:
+            // mapsUrl: 'https://maps-api-v2.carto-staging.com/user/{user}'
           },
           getFillColor,
           getLineColor,
diff --git a/package-lock.json b/package-lock.json
index a85bc0eaf82d..837487643b50 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1607,63 +1607,63 @@
       }
     },
     "@deck.gl/carto": {
-      "version": "8.4.0-alpha.2",
-      "resolved": "https://registry.npmjs.org/@deck.gl/carto/-/carto-8.4.0-alpha.2.tgz",
-      "integrity": "sha512-54ldcxI+72cnIb7RUp6I/oW2kTamKtY3HBKA+v9gNgamUmTNT9ROWipXccl6xpe42+nhbALBk8X48w84mNvWcA==",
+      "version": "8.4.0-alpha.4",
+      "resolved": "https://registry.npmjs.org/@deck.gl/carto/-/carto-8.4.0-alpha.4.tgz",
+      "integrity": "sha512-rK4tw1fLV4K292KNArx9AkDfagzr0+L0VJSCnylFru/3MPS7vJCSBSrd/0t/EaQOTku8gmG9tJROIoyp9P0GNQ==",
       "requires": {
         "@loaders.gl/loader-utils": "^2.3.0",
         "@loaders.gl/mvt": "^2.3.0",
         "@loaders.gl/tiles": "^2.3.0",
-        "@math.gl/web-mercator": "^3.3.0"
+        "@math.gl/web-mercator": "^3.3.2"
       }
     },
     "@deck.gl/core": {
-      "version": "8.4.0-alpha.2",
-      "resolved": "https://registry.npmjs.org/@deck.gl/core/-/core-8.4.0-alpha.2.tgz",
-      "integrity": "sha512-WoIPL+Q/mWVym/AeB8EUiV/khdofo/KVB5vD0gqbuQJeiqRxG/gm26hq+jEXKpUqJ90jy4du7vXiEOdMc/jZXQ==",
+      "version": "8.4.0-alpha.4",
+      "resolved": "https://registry.npmjs.org/@deck.gl/core/-/core-8.4.0-alpha.4.tgz",
+      "integrity": "sha512-BVKP+oS2VshdRwcWL4UEKHzRxXePDS9uSw5c5z2yaQpe5fRWcDiGkiVwUUWZCe1W/igXZ6zgGJMZ5YfWv9hHdw==",
       "requires": {
         "@loaders.gl/core": "^2.3.0",
         "@loaders.gl/images": "^2.3.0",
         "@luma.gl/core": "^8.3.1",
-        "@math.gl/web-mercator": "^3.3.0",
+        "@math.gl/web-mercator": "^3.3.2",
         "gl-matrix": "^3.0.0",
-        "math.gl": "^3.3.0",
+        "math.gl": "^3.3.2",
         "mjolnir.js": "^2.3.0",
         "probe.gl": "^3.2.1"
       }
     },
     "@deck.gl/geo-layers": {
-      "version": "8.4.0-alpha.2",
-      "resolved": "https://registry.npmjs.org/@deck.gl/geo-layers/-/geo-layers-8.4.0-alpha.2.tgz",
-      "integrity": "sha512-qNvcQ8s6fmJmp65gYiqu/TcMDMw2ZZVIXxbEFlMapuk86J2LA09XB7yBy192ryj1oXxKkgsrf8NtA2i1C0Z/JA==",
+      "version": "8.4.0-alpha.4",
+      "resolved": "https://registry.npmjs.org/@deck.gl/geo-layers/-/geo-layers-8.4.0-alpha.4.tgz",
+      "integrity": "sha512-CE0SdpibxjaQcVljxT1iZOJKY66acJro3pfDhVGIg4o7A8enGHIIkK9Pk1FnmNbATvFkWHGzet5T3yKFleuwMw==",
       "requires": {
         "@loaders.gl/3d-tiles": "^2.3.0",
         "@loaders.gl/loader-utils": "^2.3.0",
         "@loaders.gl/mvt": "^2.3.0",
         "@loaders.gl/terrain": "^2.3.0",
         "@loaders.gl/tiles": "^2.3.0",
-        "@math.gl/culling": "^3.3.0",
-        "@math.gl/web-mercator": "^3.3.0",
+        "@math.gl/culling": "^3.3.2",
+        "@math.gl/web-mercator": "^3.3.2",
         "h3-js": "^3.6.0",
         "long": "^3.2.0",
-        "math.gl": "^3.3.0"
+        "math.gl": "^3.3.2"
       }
     },
     "@deck.gl/layers": {
-      "version": "8.4.0-alpha.2",
-      "resolved": "https://registry.npmjs.org/@deck.gl/layers/-/layers-8.4.0-alpha.2.tgz",
-      "integrity": "sha512-llCOxOWqVZOgDJVZbdxh8BOr9ZA6lMUsiAEhsGrh6thunFYs9HcYLqlPRvgwVDHcexWc6ewthZXbO3aI7sHOJw==",
+      "version": "8.4.0-alpha.4",
+      "resolved": "https://registry.npmjs.org/@deck.gl/layers/-/layers-8.4.0-alpha.4.tgz",
+      "integrity": "sha512-k29vMmAS5XnJbPSt7KnBhN2EZ2hFgOxeo0CQE0LD9G3NEgEdB9B9OS9jI0APZO4ePig8TkkVFBtkPWRGGxAlIA==",
       "requires": {
         "@loaders.gl/images": "^2.3.0",
         "@mapbox/tiny-sdf": "^1.1.0",
-        "@math.gl/polygon": "^3.3.0",
+        "@math.gl/polygon": "^3.3.2",
         "earcut": "^2.0.6"
       }
     },
     "@deck.gl/mesh-layers": {
-      "version": "8.4.0-alpha.2",
-      "resolved": "https://registry.npmjs.org/@deck.gl/mesh-layers/-/mesh-layers-8.4.0-alpha.2.tgz",
-      "integrity": "sha512-8dNJfAOxTwZxgATmv/8g5ETkm/Mx2BnbYXiINmYr8znQeQYgW/meg7ab2hFD6smzXa8mLXBfCW9DHnDrxd+oRw==",
+      "version": "8.4.0-alpha.4",
+      "resolved": "https://registry.npmjs.org/@deck.gl/mesh-layers/-/mesh-layers-8.4.0-alpha.4.tgz",
+      "integrity": "sha512-QX0fN/VtjARuvsLmwgw+ANYAX2RKUXGIKIpwaRSv89YSgvZWnQqlrisUEw65K6yxB2Ms4SUnvk5f39co0ZD2Qg==",
       "requires": {
         "@luma.gl/experimental": "^8.3.1",
         "@luma.gl/shadertools": "^8.3.1"
@@ -2949,118 +2949,118 @@
       }
     },
     "@loaders.gl/3d-tiles": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/@loaders.gl/3d-tiles/-/3d-tiles-2.3.3.tgz",
-      "integrity": "sha512-eZSNh2eHyqp4zV1jW16OsYRT8r+0oq2/koSGfVuu3IdRBJGc1U2DfF+PoNz/FwXZwdjlSFXEvlxDEiVHoQhrLw==",
-      "requires": {
-        "@loaders.gl/core": "2.3.3",
-        "@loaders.gl/draco": "2.3.3",
-        "@loaders.gl/gltf": "2.3.3",
-        "@loaders.gl/loader-utils": "2.3.3",
-        "@loaders.gl/math": "2.3.3",
-        "@loaders.gl/tiles": "2.3.3",
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/3d-tiles/-/3d-tiles-2.3.7.tgz",
+      "integrity": "sha512-Dw+bjkO4BUEcJUXB7iAlh2RzaDWjDFTvqiUW+WPT+2WSUjD8EAVZ1WIo/cQFK5DgulLRO09dYlRTPlo6WuNpfQ==",
+      "requires": {
+        "@loaders.gl/core": "2.3.7",
+        "@loaders.gl/draco": "2.3.7",
+        "@loaders.gl/gltf": "2.3.7",
+        "@loaders.gl/loader-utils": "2.3.7",
+        "@loaders.gl/math": "2.3.7",
+        "@loaders.gl/tiles": "2.3.7",
         "@math.gl/core": "^3.3.0",
         "@math.gl/geospatial": "^3.3.0",
         "@probe.gl/stats": "^3.3.0"
       }
     },
     "@loaders.gl/core": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/@loaders.gl/core/-/core-2.3.3.tgz",
-      "integrity": "sha512-5e3NHEY9RaNLvlbJ0B9AViMGLotVhVZXT+prkG4oqzGRHhz6Wk6hCCB1T43iVEl2XY+WF96aadHTuBQ14Nummg==",
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/core/-/core-2.3.7.tgz",
+      "integrity": "sha512-jFKhN2+7JwyoIRzJ0YtWHqjhFtVRum7HVqFqVcz8I8NosB5LEdswnnpGVxTtM5XLIaixdGzfH8i8jq37Kpg0Ag==",
       "requires": {
         "@babel/runtime": "^7.3.1",
-        "@loaders.gl/loader-utils": "2.3.3"
+        "@loaders.gl/loader-utils": "2.3.7"
       }
     },
     "@loaders.gl/draco": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/@loaders.gl/draco/-/draco-2.3.3.tgz",
-      "integrity": "sha512-PcWt1AJwUhOuaEfhjLM9U1gQAcujKbWtR4v5cKcCBRpjRaQk/fVdpM+uT+pmRpgjSZmpIRr++di+V1lCsF6T+A==",
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/draco/-/draco-2.3.7.tgz",
+      "integrity": "sha512-sY0Kbfm6k6BuzMeMJZLYh/c/FKqZ7T3OU/gDsK5s+OPoKYgu64qnBWhRs1Yx3acOfRNVR7iGE2x5q2MBpu1F/g==",
       "requires": {
         "@babel/runtime": "^7.3.1",
-        "@loaders.gl/loader-utils": "2.3.3",
+        "@loaders.gl/loader-utils": "2.3.7",
         "draco3d": "^1.3.6"
       }
     },
     "@loaders.gl/gis": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/@loaders.gl/gis/-/gis-2.3.3.tgz",
-      "integrity": "sha512-CvPF41EfYPIbv3vHx6vaX7b6pvp1CfvIugFamq96KRK/ZadNhnYEjPvJsekGDMSsuhCrMXz+Hadf0peW0Rqdow==",
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/gis/-/gis-2.3.7.tgz",
+      "integrity": "sha512-zQAWKedBBJECK2+TokMfu7rV//Kv9nGNCYwulu+221bP1XmJz9SgdsWMj3RuSALVPet/ia/RV3Mdg4p324SKUA==",
       "requires": {
-        "@loaders.gl/loader-utils": "2.3.3",
+        "@loaders.gl/loader-utils": "2.3.7",
         "@mapbox/vector-tile": "^1.3.1",
         "pbf": "^3.2.1"
       }
     },
     "@loaders.gl/gltf": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/@loaders.gl/gltf/-/gltf-2.3.3.tgz",
-      "integrity": "sha512-HZY3xdPug3svTLmyi94sJj1DvOrdOoSYC/LkIS796oGP5wlca7v74jaz2NHR/Aq242heCXjH3w0qbS0C3gfcYQ==",
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/gltf/-/gltf-2.3.7.tgz",
+      "integrity": "sha512-M/4Fwht+/GWKG8YM74YFo7e+6MJdmHKGbl7kqerjSKHBOGAU16VUTTIgtPNzTyFFNwmJz/umZ5gfvz7fTC/+2g==",
       "requires": {
-        "@loaders.gl/core": "2.3.3",
-        "@loaders.gl/draco": "2.3.3",
-        "@loaders.gl/images": "2.3.3",
-        "@loaders.gl/loader-utils": "2.3.3"
+        "@loaders.gl/core": "2.3.7",
+        "@loaders.gl/draco": "2.3.7",
+        "@loaders.gl/images": "2.3.7",
+        "@loaders.gl/loader-utils": "2.3.7"
       }
     },
     "@loaders.gl/images": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/@loaders.gl/images/-/images-2.3.3.tgz",
-      "integrity": "sha512-BTuy4SiCFXdvKMPw0C/Kl/oN9763QhDx/PUCfIMkuAYkQPfAsai5mNnFBs+4WeHg28INXcQlEG8Ad5/OwGNaCQ==",
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/images/-/images-2.3.7.tgz",
+      "integrity": "sha512-JMLXyjUEZz6MuCmeQtXYfiH6+SOkvUZ2uS36HaYl7aPshq3pIRJd8EBu9FuB3ObK8V7E3zqZKbtoQW9lAASWPg==",
       "requires": {
-        "@loaders.gl/loader-utils": "2.3.3"
+        "@loaders.gl/loader-utils": "2.3.7"
       }
     },
     "@loaders.gl/loader-utils": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/@loaders.gl/loader-utils/-/loader-utils-2.3.3.tgz",
-      "integrity": "sha512-QUBBy5ZC8cyHYTAoK9Z84i/bAI/jCh/J4fOfh52ra8F373uXZpSNfPMoW7OMMutzZGPneD5Coe6TRL7kkbtJVw==",
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/loader-utils/-/loader-utils-2.3.7.tgz",
+      "integrity": "sha512-PYjlt7UmUNqAb/F/52Om/hJt6yEZdIH6ucH+145kEKBTqVR45z5K1/3DrNjQg0Ofo9yUMbVGdtACT4mVlbBrzg==",
       "requires": {
         "@babel/runtime": "^7.3.1",
         "@probe.gl/stats": "^3.3.0"
       }
     },
     "@loaders.gl/math": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/@loaders.gl/math/-/math-2.3.3.tgz",
-      "integrity": "sha512-DQp5d184kNNYkZC1josNH45HHsK4RXrBMAkmrzSQ4HqR/kirG4ODo0b6N7OAtYfQgmQSC+XiFbXILw1Hi4GWwg==",
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/math/-/math-2.3.7.tgz",
+      "integrity": "sha512-R1DoMgiDqzkGJb9QYA9vr9N2WksWC5TOGbIWeo8YZ6xhOrkoGEdAflEXPQkKIxoG8UBOdLmchRYbsLOblx8Rog==",
       "requires": {
-        "@loaders.gl/images": "2.3.3",
-        "@loaders.gl/loader-utils": "2.3.3",
+        "@loaders.gl/images": "2.3.7",
+        "@loaders.gl/loader-utils": "2.3.7",
         "@math.gl/core": "^3.3.0"
       }
     },
     "@loaders.gl/mvt": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/@loaders.gl/mvt/-/mvt-2.3.3.tgz",
-      "integrity": "sha512-1Dba/SigK70WhsUQxOV+hnaDBwIVyRLMvEv88UocLCS5ez+A4kMCQVqtgM/Q7LcYIniMZTbQI9j0Eqb7x7ifHA==",
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/mvt/-/mvt-2.3.7.tgz",
+      "integrity": "sha512-LiaRODNHHhx9OeVRHzFp7rayQJx3y6MhLwuGUhj1VJA8wzlC5c/s/SuHTHL331zUj6QiBMtHXOYXYYn/hx1ShA==",
       "requires": {
-        "@loaders.gl/gis": "2.3.3",
-        "@loaders.gl/loader-utils": "2.3.3",
+        "@loaders.gl/gis": "2.3.7",
+        "@loaders.gl/loader-utils": "2.3.7",
         "@mapbox/point-geometry": "~0.1.0",
         "@mapbox/vector-tile": "^1.3.1",
         "pbf": "^3.2.1"
       }
     },
     "@loaders.gl/terrain": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/@loaders.gl/terrain/-/terrain-2.3.3.tgz",
-      "integrity": "sha512-clmiaz8lb40YodbBo9gSnQ7c/+5nWrK7ejEUJ8lGJ2ukVIgzyTm0MMwjeroj64fudXunmvMZGpaK51GaYT93kQ==",
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/terrain/-/terrain-2.3.7.tgz",
+      "integrity": "sha512-CNHVeJjMeADPXhyImXIZ0Wmn07ZvqIB+CfPQI419fvZj7gQQ8G/Nmv8B85rU4vYO5xaFtosBhaiHQMqBO34klQ==",
       "requires": {
         "@babel/runtime": "^7.3.1",
-        "@loaders.gl/loader-utils": "2.3.3",
+        "@loaders.gl/loader-utils": "2.3.7",
         "@mapbox/martini": "^0.2.0"
       }
     },
     "@loaders.gl/tiles": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/@loaders.gl/tiles/-/tiles-2.3.3.tgz",
-      "integrity": "sha512-a5+DlDg+WtBUjXlRkBCoqQQe/9abLhtbbYRGy87L0XWlkoqlehrrwk2qbPFJHCBadQno4402WZ343LoLFG5QEA==",
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/tiles/-/tiles-2.3.7.tgz",
+      "integrity": "sha512-k+lXRIa2FerwE4cJmYFqKqtSNQtlr0Q/p7qOoyAGdhYk5sWy33ZYrpbvVn+aVZOCTaBNLnm7sivq0sMZpjB9ig==",
       "requires": {
-        "@loaders.gl/core": "2.3.3",
-        "@loaders.gl/loader-utils": "2.3.3",
-        "@loaders.gl/math": "2.3.3",
+        "@loaders.gl/core": "2.3.7",
+        "@loaders.gl/loader-utils": "2.3.7",
+        "@loaders.gl/math": "2.3.7",
         "@math.gl/core": "^3.3.0",
         "@math.gl/culling": "^3.3.0",
         "@math.gl/geospatial": "^3.3.0",
@@ -3069,73 +3069,73 @@
       }
     },
     "@luma.gl/constants": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@luma.gl/constants/-/constants-8.3.1.tgz",
-      "integrity": "sha512-3b2RScz7TSwsrHjRx1iYvyn46fKXtR/mOSyFOPiRx+15FOLBdkYL2DPpaJAZ5fU9Rx7ToazJiWW1Mzgn6z2d0A=="
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@luma.gl/constants/-/constants-8.3.2.tgz",
+      "integrity": "sha512-KSNNXv5eE9bkMH2AcZpLysqNEU0SDDZ8JthjHtkdVyOSr4yMeAaRXyWeSuLJITiemXkm4Um8jX6Ub12OW9JPug=="
     },
     "@luma.gl/core": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@luma.gl/core/-/core-8.3.1.tgz",
-      "integrity": "sha512-QMVxS83HQpVQ8D/74/A20fl1Wz7qLuV5bQuVZhvQ6bkHb8A6gAZMWr4Y2gpWNJTStWJuDkzAL8pB3us1jWCg2Q==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@luma.gl/core/-/core-8.3.2.tgz",
+      "integrity": "sha512-VNFAI0o54+e5biugtz19p2Mapv2xFTZ3qqtWE4xwqst4K/HqvWhoBcWsS5NYlzD6ipsUWTlaidA4ROkbFJINMw==",
       "requires": {
         "@babel/runtime": "^7.0.0",
-        "@luma.gl/constants": "8.3.1",
-        "@luma.gl/engine": "8.3.1",
-        "@luma.gl/shadertools": "8.3.1",
-        "@luma.gl/webgl": "8.3.1"
+        "@luma.gl/constants": "8.3.2",
+        "@luma.gl/engine": "8.3.2",
+        "@luma.gl/shadertools": "8.3.2",
+        "@luma.gl/webgl": "8.3.2"
       }
     },
     "@luma.gl/engine": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@luma.gl/engine/-/engine-8.3.1.tgz",
-      "integrity": "sha512-oE7sNmSihLeMCCrGYx6hv3g1GZAcNUbL8XKAQQNxs7Bo4abGIURuHFEc9mpT90YtEtkQcg2OewykeZT9jD9mIg==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@luma.gl/engine/-/engine-8.3.2.tgz",
+      "integrity": "sha512-9msfc/7HemWrCyIbBH9FA3LgOeaPhuit9e+YcEw3UCAo+6AY/+V1EAawne1Lvd4lXgNQb3L8L5yAP60Qr8rGxA==",
       "requires": {
         "@babel/runtime": "^7.0.0",
-        "@luma.gl/constants": "8.3.1",
-        "@luma.gl/gltools": "8.3.1",
-        "@luma.gl/shadertools": "8.3.1",
-        "@luma.gl/webgl": "8.3.1",
+        "@luma.gl/constants": "8.3.2",
+        "@luma.gl/gltools": "8.3.2",
+        "@luma.gl/shadertools": "8.3.2",
+        "@luma.gl/webgl": "8.3.2",
         "math.gl": "^3.3.0",
         "probe.gl": "^3.2.1"
       }
     },
     "@luma.gl/experimental": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@luma.gl/experimental/-/experimental-8.3.1.tgz",
-      "integrity": "sha512-yN6UYqQ8bi6dCxjsoDIkDP3v7ul6W8K9vseq6wT73Qjn/+4vUDxe/yHgMmRXxik/CJDEWxb3RJhU6ZNf7uSLmA==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@luma.gl/experimental/-/experimental-8.3.2.tgz",
+      "integrity": "sha512-X0Qv7KUNT311ec6/TQzv4LXvcLpsF62+CurjBQ/vXmpHAhWU7Ufx2Vhab43rrkHvoUXnSmQL62I8HBDtaTL/fw==",
       "requires": {
-        "@luma.gl/constants": "8.3.1",
+        "@luma.gl/constants": "8.3.2",
         "earcut": "^2.0.6",
         "math.gl": "^3.3.0"
       }
     },
     "@luma.gl/gltools": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@luma.gl/gltools/-/gltools-8.3.1.tgz",
-      "integrity": "sha512-l/mnVSG5ioW19eZHMJlOD6crR58fwmdLoEKooXhnHiHofZ37h9HNlRlDf0XZIJPe4H4KLUM+Vv9VK0hqRrZHqA==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@luma.gl/gltools/-/gltools-8.3.2.tgz",
+      "integrity": "sha512-JGsVdFkr9o74nn1D8vf9huW1hcZiGNAhOtA2jAv9GG4oHPIKLRN8p95QroYMFYl/DcfAxXNR+Mq7hPiTtDiw9w==",
       "requires": {
         "@babel/runtime": "^7.0.0",
-        "@luma.gl/constants": "8.3.1",
+        "@luma.gl/constants": "8.3.2",
         "probe.gl": "^3.2.1"
       }
     },
     "@luma.gl/shadertools": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@luma.gl/shadertools/-/shadertools-8.3.1.tgz",
-      "integrity": "sha512-y9s1R0Uv64QooGKROkNCvPKJd5CJDQ21wxJt5FH/E98F0z4IcJXzKWu1num/XG23eSJyQpIf7qsSqvXDBfm/fA==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@luma.gl/shadertools/-/shadertools-8.3.2.tgz",
+      "integrity": "sha512-XEAPtEyfcrL9qNdv/xUxxFRmxYwx+LEJMyJ0rUGEZL17a1JMUsyW1B+5EnoNPQEMY4mL1vpa83qHPHX5gYw1FA==",
       "requires": {
         "@babel/runtime": "^7.0.0",
         "math.gl": "^3.3.0"
       }
     },
     "@luma.gl/webgl": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@luma.gl/webgl/-/webgl-8.3.1.tgz",
-      "integrity": "sha512-lsGo5Pp/hPlKj1emErRAUvOBxztU/goltBh3hfhg7BoKdlEa6EJcfjqX+YkCmfc8bbp7QePM7mj+1ZsrzKhlgg==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@luma.gl/webgl/-/webgl-8.3.2.tgz",
+      "integrity": "sha512-mO3/DCCs/VlQbjFbqGE6FlGX/qU6pdMtS26JBCAV30dR40LO41uWWEz9HniDv92QPDPb+ZNCa5/yYbtLpZnADw==",
       "requires": {
         "@babel/runtime": "^7.0.0",
-        "@luma.gl/constants": "8.3.1",
-        "@luma.gl/gltools": "8.3.1",
+        "@luma.gl/constants": "8.3.2",
+        "@luma.gl/gltools": "8.3.2",
         "probe.gl": "^3.2.1"
       }
     },
@@ -3238,46 +3238,46 @@
       "integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q=="
     },
     "@math.gl/core": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/@math.gl/core/-/core-3.3.1.tgz",
-      "integrity": "sha512-rO4Smhqe3NrDUjZ3HyRv/3igPodw3qY5UtK7Zdr966ixysalE/9PRNwJFi7e4U+I5xa7pJHcEUekzO+GyNuF1Q==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/@math.gl/core/-/core-3.3.2.tgz",
+      "integrity": "sha512-W0QoVrdjiLs52ivtozrHbCitqWGNsWi4TwdfBckhOaeB5cE/R/pyOXfvLmdwGj2b1TLSg8SwgZLlmkWG776GKw==",
       "requires": {
         "@babel/runtime": "^7.0.0",
         "gl-matrix": "^3.0.0"
       }
     },
     "@math.gl/culling": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/@math.gl/culling/-/culling-3.3.1.tgz",
-      "integrity": "sha512-x2oHEt5cn9TBLQOcVmVRgYut/JCWxejJAO1vuWwNUOxtERzMzRCEgIpltEyePEEqPny3rF+k4Uc/NwtC2/2/CQ==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/@math.gl/culling/-/culling-3.3.2.tgz",
+      "integrity": "sha512-tzfEMoFOc9Ee0gf3AyflMS4YxJGcKMqZAv17GRwCqb2q752v1NLIeC8JiCnlS31kLWsN9X/1xQQiDmhrnq451g==",
       "requires": {
         "@babel/runtime": "^7.0.0",
-        "@math.gl/core": "3.3.1",
+        "@math.gl/core": "3.3.2",
         "gl-matrix": "^3.0.0"
       }
     },
     "@math.gl/geospatial": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/@math.gl/geospatial/-/geospatial-3.3.1.tgz",
-      "integrity": "sha512-tqdc3aXtF3yK4Dy09Ccp/qdPcqIVWLvxkLDpibyNQOuHEqBrpprx008D5Rq6wICdx1bRrlwr/vT8x65FLykw7Q==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/@math.gl/geospatial/-/geospatial-3.3.2.tgz",
+      "integrity": "sha512-Drz8XK/VYiG9nj05daUHYSOrMSav2qSEROQNgt5egqouFDTWAIPooraJln+FB2F4wwA9oypFaH7jUH11X/CjEg==",
       "requires": {
         "@babel/runtime": "^7.0.0",
-        "@math.gl/core": "3.3.1",
+        "@math.gl/core": "3.3.2",
         "gl-matrix": "^3.0.0"
       }
     },
     "@math.gl/polygon": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/@math.gl/polygon/-/polygon-3.3.1.tgz",
-      "integrity": "sha512-Qef9bIz7P+XPjNum2OwC0W6JRyU22sWPhq9qTsUYH4IcqVljzV7k2vcySHGCSq5muded5xQceG73W/YCMCK2Kg==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/@math.gl/polygon/-/polygon-3.3.2.tgz",
+      "integrity": "sha512-pxiXv9FRwrwvpwvlLOtL2OhAGoac6u+1BPsd3W9YolNRN1CaxflaSZbEGU2CSaanb2GtUH15XWeDYi9hTjIgow==",
       "requires": {
-        "@math.gl/core": "3.3.1"
+        "@math.gl/core": "3.3.2"
       }
     },
     "@math.gl/web-mercator": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/@math.gl/web-mercator/-/web-mercator-3.3.1.tgz",
-      "integrity": "sha512-gUOs7jJgTQi4DGLeX4NwiWn8R3Awg3HJxQyJeLpJ065xVREQAaXWnPbk7BcZlm+XLK0CzNLl3zHOQ4gLWGfW7g==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/@math.gl/web-mercator/-/web-mercator-3.3.2.tgz",
+      "integrity": "sha512-84NNnwP97Xwm1ynZzat1BuEU2uLyIw0gzG5uvGMrAzezny2P38+E2cUK8t9eptKa8gjk2MaC7hhcO0saFCZTHw==",
       "requires": {
         "@babel/runtime": "^7.0.0",
         "gl-matrix": "^3.0.0"
@@ -4674,9 +4674,9 @@
           }
         },
         "vue-loader-v16": {
-          "version": "npm:vue-loader@16.1.1",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.1.tgz",
-          "integrity": "sha512-wz/+HFg/3SBayHWAlZXARcnDTl3VOChrfW9YnxvAweiuyKX/7IGx1ad/4yJHmwhgWlOVYMAbTiI7GV8G33PfGQ==",
+          "version": "npm:vue-loader@16.1.2",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.2.tgz",
+          "integrity": "sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q==",
           "dev": true,
           "optional": true,
           "requires": {
@@ -11284,9 +11284,9 @@
       "dev": true
     },
     "draco3d": {
-      "version": "1.3.6",
-      "resolved": "https://registry.npmjs.org/draco3d/-/draco3d-1.3.6.tgz",
-      "integrity": "sha512-zZoH5JNcdWDrUb2ks2mbzGDUUPvDaDf1ysTJS2St+3/F/8XcKAX4VKgzPjTP7MfHegHQ7Udv8ovS+R3AgXlH7g=="
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/draco3d/-/draco3d-1.4.1.tgz",
+      "integrity": "sha512-9Rxonc70xiovBC+Bq1h57SNZIHzWTibU1VfIGp5z3Xx8dPtv4yT5uGhiH7P5uvJRR2jkrvHafRxR7bTANkvfpg=="
     },
     "duplexer": {
       "version": "0.1.1",
@@ -18752,11 +18752,11 @@
       "dev": true
     },
     "math.gl": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/math.gl/-/math.gl-3.3.1.tgz",
-      "integrity": "sha512-jsiR24h2rScT+y9pU9CxeJ3cNydXMcXz6739FIbLNvopLdHJYhs72KXZvslOnQOcL7T7Zaa02UFJZm1ywaAlQQ==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/math.gl/-/math.gl-3.3.2.tgz",
+      "integrity": "sha512-33CWhbeiQxl+lzpnKdKijH9mPdZRQUP9TlBILNh6xhnJdMD9D+Kle6Xhfb8dMllE1UUQcPZlQ8/Sd1qSVtNsKQ==",
       "requires": {
-        "@math.gl/core": "3.3.1"
+        "@math.gl/core": "3.3.2"
       }
     },
     "mathml-tag-names": {
@@ -19136,9 +19136,9 @@
       }
     },
     "mjolnir.js": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/mjolnir.js/-/mjolnir.js-2.4.1.tgz",
-      "integrity": "sha512-bpqKc70aNlijeQCapJ8529EmjVj8VSfYdzh1WsbhWp0XEQSm9hAB6X350OyRVDpH5oTdAyX/NeYFqtwyuO4ZKA==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/mjolnir.js/-/mjolnir.js-2.5.0.tgz",
+      "integrity": "sha512-YkVoyKs7qm9xvAgRgjx3Md/7eYqmq7VXOgTKQNnmuzcBJzMebjdIWa7FdTd0RZBrw3UL6V6TTktsxJwBMLXUNA==",
       "requires": {
         "@babel/runtime": "^7.0.0",
         "hammerjs": "^2.0.8"
diff --git a/package.json b/package.json
index b749a72c0ce1..68da9f3ba913 100644
--- a/package.json
+++ b/package.json
@@ -23,11 +23,11 @@
     "@carto/toolkit-core": "0.0.1-rc.18",
     "@carto/toolkit-custom-storage": "0.0.1-rc.18",
     "@carto/zera": "1.0.7",
-    "@deck.gl/carto": "^8.4.0-alpha.2",
-    "@deck.gl/core": "^8.4.0-alpha.2",
-    "@deck.gl/geo-layers": "^8.4.0-alpha.2",
-    "@deck.gl/layers": "^8.4.0-alpha.2",
-    "@deck.gl/mesh-layers": "^8.4.0-alpha.2",
+    "@deck.gl/carto": "^8.4.0-alpha.4",
+    "@deck.gl/core": "^8.4.0-alpha.4",
+    "@deck.gl/geo-layers": "^8.4.0-alpha.4",
+    "@deck.gl/layers": "^8.4.0-alpha.4",
+    "@deck.gl/mesh-layers": "^8.4.0-alpha.4",
     "backbone": "1.2.3",
     "backbone-forms": "0.14.0",
     "backbone-model-file-upload": "CartoDB/backbone-model-file-upload#1.0.2",

From ce4cbf671f36d551bda667ecbf2a7126b89b758c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Fri, 18 Dec 2020 16:42:30 +0100
Subject: [PATCH 42/56] Fix domain issue in colorBinsStyle

---
 .../components/Catalog/CatalogMap.vue              |  2 +-
 .../Catalog/map-styles/colorBinsStyle.js           | 14 ++++++++------
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
index 947eb1c55677..28d51e7e8c41 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
@@ -130,7 +130,7 @@ export default {
           name: c.category
         }));
         categories.push({
-          name: 'Others',
+          name: 'OTHERS',
           color: 'rgb(165, 170, 153)'
         });
         return categories;
diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorBinsStyle.js b/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorBinsStyle.js
index 04b3d0f50ed6..0e597516afea 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorBinsStyle.js
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorBinsStyle.js
@@ -20,7 +20,9 @@ export default function colorBinsStyle ({ breaks, colors, nullColor = NULL_COLOR
         );
       }
       const quantiles = stats.quantiles.find(d => d.hasOwnProperty(bins));
-      domain = [...new Set(quantiles[bins])];
+      const range = [...quantiles[bins]];
+      range.push(stats.max);
+      domain = [...new Set(range)];
     } else {
       const { min, max } = stats;
       const step = (max - min) / bins;
@@ -28,16 +30,16 @@ export default function colorBinsStyle ({ breaks, colors, nullColor = NULL_COLOR
     }
   }
 
-  const palette = typeof colors === 'string' ? gePalette(colors, domain.length + 1) : colors;
+  const palette = typeof colors === 'string' ? gePalette(colors, domain.length) : colors;
 
   const color = scaleThreshold()
     .domain(domain)
     .range(palette);
 
   return value => {
-    // Remove epsilon to make sure we are below the breaks
-    // for domains with less than 3 elements.
-    const EPSILON = 0.0000000001;
-    return Number.isFinite(value) ? color(value - EPSILON) : nullColor;
+    // Remove some epsilon to make sure we are below the breaks
+    // Fixes the case for domains with less than 3 elements.
+    const FACTOR = 0.99999;
+    return Number.isFinite(value) ? color(value * FACTOR) : nullColor;
   };
 }

From 18400a4a0c0681b3add7862f5391bfe4d5a422c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Mon, 21 Dec 2020 23:59:49 +0100
Subject: [PATCH 43/56] Fix geography style

---
 .../components/Catalog/CatalogMap.vue         | 26 +++++++------------
 1 file changed, 9 insertions(+), 17 deletions(-)

diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
index 28d51e7e8c41..757f18e15063 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
@@ -313,12 +313,11 @@ export default {
 
       propId = this.variable && this.variable.attribute;
 
-      if (g === 'Polygon' && v === null || this.isGeography) {
+      if (g === 'Polygon' && this.isGeography) {
         getFillColor = [234, 200, 100, 168];
         getLineColor = [44, 44, 44, 60];
         getLineWidth = 1;
-      }
-      if (g === 'Polygon' && v === 'Number') {
+      } else if (g === 'Polygon' && v === 'Number') {
         colorStyle = colorBinsStyle({
           breaks: { stats, method: 'quantiles', bins: 5 },
           colors: this.categoryIdPalette
@@ -326,8 +325,7 @@ export default {
         getFillColor = (d) => colorStyle(d.properties[propId]);
         getLineColor = [44, 44, 44, 60];
         getLineWidth = 1;
-      }
-      if (g === 'Polygon' && v === 'String') {
+      } else if (g === 'Polygon' && v === 'String') {
         colorStyle = colorCategoriesStyle({
           categories: { stats, top: 10 },
           colors: 'Prism'
@@ -335,34 +333,29 @@ export default {
         getFillColor = (d) => colorStyle(d.properties[propId]);
         getLineColor = [44, 44, 44, 60];
         getLineWidth = 1;
-      }
-      if (g === 'LineString' && v === null || this.isGeography) {
+      } else if (g === 'LineString' && this.isGeography) {
         getLineColor = [234, 200, 100, 168];
         getLineWidth = 2;
-      }
-      if (g === 'LineString' && v === 'Number') {
+      } else if (g === 'LineString' && v === 'Number') {
         colorStyle = colorBinsStyle({
           breaks: { stats, method: 'quantiles', bins: 5 },
           colors: this.categoryIdPalette
         });
         getLineColor = (d) => colorStyle(d.properties[propId]);
         getLineWidth = 2;
-      }
-      if (g === 'LineString' && v === 'String') {
+      } else if (g === 'LineString' && v === 'String') {
         colorStyle = colorCategoriesStyle({
           categories: { stats, top: 10 },
           colors: 'Prism'
         });
         getLineColor = (d) => colorStyle(d.properties[propId]);
         getLineWidth = 2;
-      }
-      if (g === 'Point' && v === null || this.isGeography) {
+      } else if (g === 'Point' && this.isGeography) {
         getFillColor = [234, 200, 100, 168];
         getLineColor = [44, 44, 44, 60];
         getLineWidth = 1;
         getRadius = 4;
-      }
-      if (g === 'Point' && v === 'Number') {
+      } else if (g === 'Point' && v === 'Number') {
         colorStyle = colorBinsStyle({
           breaks: { stats, method: 'quantiles', bins: 5 },
           colors: this.categoryIdPalette
@@ -371,8 +364,7 @@ export default {
         getLineColor = [100, 100, 100, 255];
         getLineWidth = 1;
         getRadius = 4;
-      }
-      if (g === 'Point' && v === 'String') {
+      } else if (g === 'Point' && v === 'String') {
         colorStyle = colorCategoriesStyle({
           categories: { stats, top: 10 },
           colors: 'Bold'

From be19b99a2aae1f2fcc4fa3e603117b109fb1b9e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Tue, 22 Dec 2020 00:09:59 +0100
Subject: [PATCH 44/56] Capitalize categories in catalog map

---
 .../new-dashboard/components/Catalog/CatalogMap.vue      | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
index 757f18e15063..a3b46ff6b58c 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
@@ -127,10 +127,10 @@ export default {
       if (this.variable && this.variable.categories && colorStyle) {
         const categories = this.variable.categories.slice(0, 10).map(c => ({
           color: `rgb(${colorStyle(c.category)})`,
-          name: c.category
+          name: this.capitalize(c.category)
         }));
         categories.push({
-          name: 'OTHERS',
+          name: 'Others',
           color: 'rgb(165, 170, 153)'
         });
         return categories;
@@ -180,6 +180,8 @@ export default {
             if (value !== undefined && value !== null) {
               if (typeof value === 'number') {
                 value = this.formatNumber(value);
+              } else if (typeof value === 'string') {
+                value = this.capitalize(value);
               }
               html += `<p style="margin: 4px 0 0 4px;"><b>${value}</b></p>`;
             } else {
@@ -306,6 +308,9 @@ export default {
         return value.toLocaleString();
       }
     },
+    capitalize (string) {
+      return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
+    },
     generateColorStyle () {
       const g = this.geomType;
       const v = this.variable && this.variable.type;

From 06d7f20277e423741ebfb83727df821bba1bddf7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Tue, 22 Dec 2020 00:30:57 +0100
Subject: [PATCH 45/56] Aggregate categories in popup

---
 .../components/Catalog/CatalogMap.vue         | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
index a3b46ff6b58c..cabdb6fc311d 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
@@ -172,8 +172,9 @@ export default {
         const objects = deck.pickMultipleObjects({ x, y })
           // Remove duplicated objects
           .filter((v, i, a) => a.findIndex(t => (t.index === v.index)) === i);
-        let countNoData = 0;
-        for (let o of objects) {
+        let index = 0;
+        const items = {};
+        for (const o of objects) {
           if (this.compare(o.object.geometry.coordinates, object.geometry.coordinates)) {
             // Display the points that are fully overlapped (same coordinates)
             let value = o.object.properties[this.variable.attribute];
@@ -183,16 +184,19 @@ export default {
               } else if (typeof value === 'string') {
                 value = this.capitalize(value);
               }
-              html += `<p style="margin: 4px 0 0 4px;"><b>${value}</b></p>`;
             } else {
-              countNoData += 1;
+              value = 'No data';
             }
+            items[value] ? items[value].count += 1 : items[value] = { index: index++, count: 1 };
           }
         }
-        if (countNoData > 0) {
-          let value = 'No data';
-          if (countNoData > 1) {
-            value += ` (${countNoData})`;
+        const orderedItems = Object.keys(items).map(key => ({
+          value: key, index: items[key].index, count: items[key].count
+        })).sort((a, b) => (a.index > b.index) ? 1 : -1);
+        for (const item of orderedItems) {
+          let value = item.value;
+          if (item.count > 1) {
+            value += ` (${item.count})`;
           }
           html += `<p style="margin: 4px 0 0 4px;"><b>${value}</b></p>`;
         }

From c36f4a1c8a10a658cc25d868b12c3c9407411e28 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Tue, 22 Dec 2020 00:38:32 +0100
Subject: [PATCH 46/56] Data Observatory samples popup in Dashboard

---
 .../components/NavigationBar/NavigationBar.vue            | 8 ++++++++
 lib/assets/javascripts/new-dashboard/i18n/locales/en.json | 4 ++++
 2 files changed, 12 insertions(+)

diff --git a/lib/assets/javascripts/new-dashboard/components/NavigationBar/NavigationBar.vue b/lib/assets/javascripts/new-dashboard/components/NavigationBar/NavigationBar.vue
index 83ee435a8ba3..3b7e27b1dc68 100644
--- a/lib/assets/javascripts/new-dashboard/components/NavigationBar/NavigationBar.vue
+++ b/lib/assets/javascripts/new-dashboard/components/NavigationBar/NavigationBar.vue
@@ -53,6 +53,14 @@
           :messageHasHTML="true"
           @click.native="markPopupAsRead('dataObservatory.popupWasShown')"/>
 
+        <NotificationPopup
+          v-if="!popupWasShown('popups.DataObservatorySamples')"
+          class="notification-popup"
+          :title="$t('DataObservatorySamples.title')"
+          :message="$t('DataObservatorySamples.message', { path: this.$router.resolve({ name: 'spatial-data-catalog' }).href })"
+          :messageHasHTML="true"
+          @click.native="markPopupAsRead('popups.DataObservatorySamples')"/>
+
         <!-- <NotificationPopup
           v-if="!popupWasShown('popups.directDBConnection') && hasDBFFActive"
           class="notification-popup"
diff --git a/lib/assets/javascripts/new-dashboard/i18n/locales/en.json b/lib/assets/javascripts/new-dashboard/i18n/locales/en.json
index 4b37a80fb47e..20ae707cc166 100644
--- a/lib/assets/javascripts/new-dashboard/i18n/locales/en.json
+++ b/lib/assets/javascripts/new-dashboard/i18n/locales/en.json
@@ -391,6 +391,10 @@
     "title": "What’s new in Data Observatory?",
     "message": "Check out our new public & premium datasets in the Data Observatory: Census data from the UK and Canada, Dstillery's Behavioural Audiences and more.</br><a href='{path}'>Visit our Spatial Data Catalog</a>"
   },
+  "DataObservatorySamples": {
+    "title": "Sample data now available in Data Observatory",
+    "message": "You can now access samples of the datasets available in the Data Observatory to help in your data discovery and evaluation efforts. We have also added a map preview as part of the catalog.</br><a href='{path}'>Visit our Spatial Data Catalog</a>"
+  },
   "SharedBrief": {
     "sharedWith": "Shared with",
     "org": "all your organization",

From fc33274dbaa950b935d5a2d76a58ea9b1cc99bfd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Tue, 22 Dec 2020 14:26:25 +0100
Subject: [PATCH 47/56] Remove opacity for points,lines in geography

---
 .../new-dashboard/components/Catalog/CatalogMap.vue         | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
index cabdb6fc311d..53050cea061e 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
@@ -343,7 +343,7 @@ export default {
         getLineColor = [44, 44, 44, 60];
         getLineWidth = 1;
       } else if (g === 'LineString' && this.isGeography) {
-        getLineColor = [234, 200, 100, 168];
+        getLineColor = [234, 200, 100, 255];
         getLineWidth = 2;
       } else if (g === 'LineString' && v === 'Number') {
         colorStyle = colorBinsStyle({
@@ -360,8 +360,8 @@ export default {
         getLineColor = (d) => colorStyle(d.properties[propId]);
         getLineWidth = 2;
       } else if (g === 'Point' && this.isGeography) {
-        getFillColor = [234, 200, 100, 168];
-        getLineColor = [44, 44, 44, 60];
+        getFillColor = [234, 200, 100, 255];
+        getLineColor = [44, 44, 44, 255];
         getLineWidth = 1;
         getRadius = 4;
       } else if (g === 'Point' && v === 'Number') {

From de3263e62da4f434f93f16de158ebabd90283ef9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Tue, 22 Dec 2020 15:07:52 +0100
Subject: [PATCH 48/56] Update tests

---
 .../components/NavigationBar/NavigationBar.vue         |  4 ++--
 .../unit/specs/components/NavigationBar.spec.js        |  6 ++++++
 .../__snapshots__/NavigationBar.spec.js.snap           | 10 +++++-----
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/lib/assets/javascripts/new-dashboard/components/NavigationBar/NavigationBar.vue b/lib/assets/javascripts/new-dashboard/components/NavigationBar/NavigationBar.vue
index 3b7e27b1dc68..816cc46c9d3d 100644
--- a/lib/assets/javascripts/new-dashboard/components/NavigationBar/NavigationBar.vue
+++ b/lib/assets/javascripts/new-dashboard/components/NavigationBar/NavigationBar.vue
@@ -45,13 +45,13 @@
           :message="$t('FeedbackMessage.message')"
           @click.native.stop.prevent="toggleDropdown"/>
 
-        <NotificationPopup
+        <!-- <NotificationPopup
           v-if="!popupWasShown('dataObservatory.popupWasShown') && hasDOEnabled"
           class="notification-popup"
           :title="$t('DataObservatoryMessage.title')"
           :message="$t('DataObservatoryMessage.message', { path: this.$router.resolve({ name: 'spatial-data-catalog' }).href })"
           :messageHasHTML="true"
-          @click.native="markPopupAsRead('dataObservatory.popupWasShown')"/>
+          @click.native="markPopupAsRead('dataObservatory.popupWasShown')"/> -->
 
         <NotificationPopup
           v-if="!popupWasShown('popups.DataObservatorySamples')"
diff --git a/lib/assets/test/spec/new-dashboard/unit/specs/components/NavigationBar.spec.js b/lib/assets/test/spec/new-dashboard/unit/specs/components/NavigationBar.spec.js
index 43d385f12942..ea52710fbf65 100755
--- a/lib/assets/test/spec/new-dashboard/unit/specs/components/NavigationBar.spec.js
+++ b/lib/assets/test/spec/new-dashboard/unit/specs/components/NavigationBar.spec.js
@@ -57,6 +57,12 @@ describe('NavigationBar.vue', () => {
         user,
         isNotificationVisible: true
       },
+      mocks: {
+        $router: {
+          resolve: href => href
+        },
+        $t: key => key
+      },
       localVue
     });
 
diff --git a/lib/assets/test/spec/new-dashboard/unit/specs/components/__snapshots__/NavigationBar.spec.js.snap b/lib/assets/test/spec/new-dashboard/unit/specs/components/__snapshots__/NavigationBar.spec.js.snap
index cfaabbad417e..a195138ab6c4 100644
--- a/lib/assets/test/spec/new-dashboard/unit/specs/components/__snapshots__/NavigationBar.spec.js.snap
+++ b/lib/assets/test/spec/new-dashboard/unit/specs/components/__snapshots__/NavigationBar.spec.js.snap
@@ -14,7 +14,7 @@ exports[`NavigationBar.vue should have is-user-notification class when the user
       <div class="navbar-avatar" style="background-image: url(//cartodb-libs.global.ssl.fastly.net/cartodbui/assets/unversioned/images/avatars/avatar_ghost_yellow.png);"></div>
       <userdropdown-stub baseurl="" usermodel="[object Object]"></userdropdown-stub>
       <!---->
-      <!---->
+      <notificationpopup-stub title="DataObservatorySamples.title" message="DataObservatorySamples.message" messagehashtml="true" class="notification-popup"></notificationpopup-stub>
     </div> <span class="navbar-searchClose"><img svg-inline="" src="../../assets/icons/navbar/close.svg"></span>
   </div>
 </nav>
@@ -34,7 +34,7 @@ exports[`NavigationBar.vue should render regular navbar with search input open 1
       <div class="navbar-avatar" style="background-image: url(//cartodb-libs.global.ssl.fastly.net/cartodbui/assets/unversioned/images/avatars/avatar_ghost_yellow.png);"></div>
       <userdropdown-stub baseurl="" usermodel="[object Object]"></userdropdown-stub>
       <!---->
-      <!---->
+      <notificationpopup-stub title="DataObservatorySamples.title" message="DataObservatorySamples.message" messagehashtml="true" class="notification-popup"></notificationpopup-stub>
     </div> <span class="navbar-searchClose"><img svg-inline="" src="../../assets/icons/navbar/close.svg"></span>
   </div>
 </nav>
@@ -54,7 +54,7 @@ exports[`NavigationBar.vue should render regular navbar with user dropdown close
       <div class="navbar-avatar" style="background-image: url(//cartodb-libs.global.ssl.fastly.net/cartodbui/assets/unversioned/images/avatars/avatar_ghost_yellow.png);"></div>
       <userdropdown-stub baseurl="" usermodel="[object Object]"></userdropdown-stub>
       <!---->
-      <!---->
+      <notificationpopup-stub title="DataObservatorySamples.title" message="DataObservatorySamples.message" messagehashtml="true" class="notification-popup"></notificationpopup-stub>
     </div> <span class="navbar-searchClose"><img svg-inline="" src="../../assets/icons/navbar/close.svg"></span>
   </div>
 </nav>
@@ -74,7 +74,7 @@ exports[`NavigationBar.vue should render regular navbar with user dropdown close
       <div class="navbar-avatar" style="background-image: url(//cartodb-libs.global.ssl.fastly.net/cartodbui/assets/unversioned/images/avatars/avatar_ghost_yellow.png);"></div>
       <userdropdown-stub baseurl="" usermodel="[object Object]"></userdropdown-stub>
       <notificationpopup-stub title="FeedbackMessage.title" message="FeedbackMessage.message" class="notification-popup"></notificationpopup-stub>
-      <!---->
+      <notificationpopup-stub title="DataObservatorySamples.title" message="DataObservatorySamples.message" messagehashtml="true" class="notification-popup"></notificationpopup-stub>
     </div> <span class="navbar-searchClose"><img svg-inline="" src="../../assets/icons/navbar/close.svg"></span>
   </div>
 </nav>
@@ -94,7 +94,7 @@ exports[`NavigationBar.vue should render regular navbar with user dropdown open
       <div class="navbar-avatar" style="background-image: url(//cartodb-libs.global.ssl.fastly.net/cartodbui/assets/unversioned/images/avatars/avatar_ghost_yellow.png);"></div>
       <userdropdown-stub baseurl="" usermodel="[object Object]" open="true"></userdropdown-stub>
       <!---->
-      <!---->
+      <notificationpopup-stub title="DataObservatorySamples.title" message="DataObservatorySamples.message" messagehashtml="true" class="notification-popup"></notificationpopup-stub>
     </div> <span class="navbar-searchClose"><img svg-inline="" src="../../assets/icons/navbar/close.svg"></span>
   </div>
 </nav>

From da943d8e8c11e83d24df30e25482efb4f08a7d89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Tue, 22 Dec 2020 16:02:41 +0100
Subject: [PATCH 49/56] Remove logs

---
 .../new-dashboard/components/Catalog/CatalogMap.vue            | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
index 53050cea061e..31458fd56bd1 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
@@ -90,7 +90,6 @@ export default {
       return this.dataset.name;
     },
     categoryId () {
-      console.log('CATEGORY ID:', this.dataset.category_id);
       return this.dataset.category_id;
     },
     categoryIdPalette () {
@@ -260,7 +259,6 @@ export default {
           pointRadiusUnits: 'pixels',
           pickable: true,
           onDataLoad: (tileJSON) => {
-            console.log('TILEJSON', tileJSON);
             const { center, tilestats } = tileJSON;
             this.initialViewState = {
               zoom: parseFloat(center[2]) - 1,
@@ -299,7 +297,6 @@ export default {
         ...variable,
         ...variableExtra
       };
-      console.log('VARIABLE', { ...this.variable });
     },
     formatNumber (value) {
       if (value !== undefined && value !== null) {

From 24c7b8cf2e600b7ce096f6214b91a1c408d02251 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Wed, 23 Dec 2020 10:54:31 +0100
Subject: [PATCH 50/56] Refactor colorStyle features

---
 .../components/Catalog/CatalogMap.vue         | 161 +++---------------
 .../Catalog/legends/BasicLegend.vue           |  18 --
 .../Catalog/map-styles/colorBinsStyle.js      |   4 +-
 .../map-styles/colorCategoriesStyle.js        |   4 +-
 .../Catalog/map-styles/colorStyles.js         | 104 +++++++++++
 .../components/Catalog/map-styles/utils.js    |  22 ++-
 .../NavigationBar/NavigationBar.vue           |   8 -
 .../pages/Data/CatalogDatasetMap.vue          |   2 -
 .../Catalog/map-styles/colorBinsStyle.spec.js |  46 +++++
 .../map-styles/colorCategoriesStyle.spec.js   |  46 +++++
 .../Catalog/map-styles/colorStyles.spec.js    |  46 +++++
 .../Catalog/map-styles/utils.spec.js          |  46 +++++
 package.json                                  |   2 +-
 13 files changed, 340 insertions(+), 169 deletions(-)
 delete mode 100644 lib/assets/javascripts/new-dashboard/components/Catalog/legends/BasicLegend.vue
 create mode 100644 lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorStyles.js
 create mode 100644 lib/assets/test/spec/new-dashboard/unit/specs/components/Catalog/map-styles/colorBinsStyle.spec.js
 create mode 100644 lib/assets/test/spec/new-dashboard/unit/specs/components/Catalog/map-styles/colorCategoriesStyle.spec.js
 create mode 100644 lib/assets/test/spec/new-dashboard/unit/specs/components/Catalog/map-styles/colorStyles.spec.js
 create mode 100644 lib/assets/test/spec/new-dashboard/unit/specs/components/Catalog/map-styles/utils.spec.js

diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
index 31458fd56bd1..79c4c6113162 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
@@ -34,31 +34,14 @@ import mapboxgl from 'mapbox-gl';
 import { Deck } from '@deck.gl/core';
 import { CartoBQTilerLayer, BASEMAP } from '@deck.gl/carto';
 
-import colorBinsStyle from './map-styles/colorBinsStyle';
-import colorCategoriesStyle from './map-styles/colorCategoriesStyle';
+import { formatNumber, capitalize, compare } from './map-styles/utils';
+import { generateColorStyleProps, resetColorStyleProps } from './map-styles/colorStyles';
 
 import ColorBinsLegend from './legends/ColorBinsLegend';
 import ColorCategoriesLegend from './legends/ColorCategoriesLegend';
 
 let deck;
-let propId;
-let colorStyle;
-let getFillColor;
-let getLineColor;
-let getLineWidth;
-let getRadius;
-
-const CATEGORY_PALETTES = {
-  demographics: 'BrwnYl',
-  environmental: 'BluGrn',
-  derived: 'Teal',
-  housing: 'Burg',
-  human_mobility: 'RedOr',
-  road_traffic: 'Sunset',
-  financial: 'PurpOr',
-  covid19: 'Peach',
-  behavioral: 'TealGrn'
-};
+let styleProps = {};
 
 export default {
   name: 'CatalogMap',
@@ -92,9 +75,6 @@ export default {
     categoryId () {
       return this.dataset.category_id;
     },
-    categoryIdPalette () {
-      return CATEGORY_PALETTES[this.categoryId] || 'OrYel';
-    },
     isGeography () {
       return this.$route.params.entity_type === 'geography';
     },
@@ -105,28 +85,28 @@ export default {
       return this.variable && this.variable.description;
     },
     variableMin () {
-      return this.formatNumber(this.variable && this.variable.min);
+      return formatNumber(this.variable && this.variable.min);
     },
     variableMax () {
-      return this.formatNumber(this.variable && this.variable.max);
+      return formatNumber(this.variable && this.variable.max);
     },
     variableAvg () {
-      return this.formatNumber(this.variable && this.variable.avg);
+      return formatNumber(this.variable && this.variable.avg);
     },
     variableBins () {
-      if (this.variable && this.variable.quantiles && colorStyle) {
+      if (this.variable && this.variable.quantiles && styleProps.colorStyle) {
         const breaks = [...this.variable.quantiles[2]['5'], this.variable.max];
         const bins = [...new Set(breaks)].map(q => ({
-          color: `rgb(${colorStyle(q)})`
+          color: `rgb(${styleProps.colorStyle(q)})`
         }));
         return bins;
       }
     },
     variableCategories () {
-      if (this.variable && this.variable.categories && colorStyle) {
+      if (this.variable && this.variable.categories && styleProps.colorStyle) {
         const categories = this.variable.categories.slice(0, 10).map(c => ({
-          color: `rgb(${colorStyle(c.category)})`,
-          name: this.capitalize(c.category)
+          color: `rgb(${styleProps.colorStyle(c.category)})`,
+          name: capitalize(c.category)
         }));
         categories.push({
           name: 'Others',
@@ -174,14 +154,14 @@ export default {
         let index = 0;
         const items = {};
         for (const o of objects) {
-          if (this.compare(o.object.geometry.coordinates, object.geometry.coordinates)) {
+          if (compare(o.object.geometry.coordinates, object.geometry.coordinates)) {
             // Display the points that are fully overlapped (same coordinates)
             let value = o.object.properties[this.variable.attribute];
             if (value !== undefined && value !== null) {
               if (typeof value === 'number') {
-                value = this.formatNumber(value);
+                value = formatNumber(value);
               } else if (typeof value === 'string') {
-                value = this.capitalize(value);
+                value = capitalize(value);
               }
             } else {
               value = 'No data';
@@ -219,7 +199,7 @@ export default {
       let style = document.createElement('link');
       style.type = 'text/css';
       style.rel = 'stylesheet';
-      style.href = 'https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css';
+      style.href = 'https://libs.cartocdn.com/mapbox-gl/v1.13.0/mapbox-gl.css';
       document.head.appendChild(style);
     },
     syncMapboxViewState (viewState) {
@@ -251,16 +231,14 @@ export default {
             // To test in staging:
             // mapsUrl: 'https://maps-api-v2.carto-staging.com/user/{user}'
           },
-          getFillColor,
-          getLineColor,
-          getLineWidth,
-          getRadius,
+          ...styleProps.deck,
           lineWidthUnits: 'pixels',
           pointRadiusUnits: 'pixels',
           pickable: true,
           onDataLoad: (tileJSON) => {
             const { center, tilestats } = tileJSON;
             this.initialViewState = {
+              // Zoom out the original zoom value
               zoom: parseFloat(center[2]) - 1,
               latitude: parseFloat(center[1]),
               longitude: parseFloat(center[0]),
@@ -270,8 +248,7 @@ export default {
             this.recenterMap();
             this.setGeomType(tilestats);
             this.setVariable(tilestats);
-            this.resetColorStyle();
-            this.generateColorStyle();
+            this.setStyleProps();
             this.renderLayer();
             this.showMap = true;
           }
@@ -298,99 +275,14 @@ export default {
         ...variableExtra
       };
     },
-    formatNumber (value) {
-      if (value !== undefined && value !== null) {
-        if (!Number.isInteger(value)) {
-          return value.toLocaleString(undefined, {
-            minimumFractionDigits: 2,
-            maximumFractionDigits: 2
-          });
-        }
-        return value.toLocaleString();
-      }
-    },
-    capitalize (string) {
-      return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
-    },
-    generateColorStyle () {
-      const g = this.geomType;
-      const v = this.variable && this.variable.type;
-      const stats = this.variable;
-
-      propId = this.variable && this.variable.attribute;
-
-      if (g === 'Polygon' && this.isGeography) {
-        getFillColor = [234, 200, 100, 168];
-        getLineColor = [44, 44, 44, 60];
-        getLineWidth = 1;
-      } else if (g === 'Polygon' && v === 'Number') {
-        colorStyle = colorBinsStyle({
-          breaks: { stats, method: 'quantiles', bins: 5 },
-          colors: this.categoryIdPalette
-        });
-        getFillColor = (d) => colorStyle(d.properties[propId]);
-        getLineColor = [44, 44, 44, 60];
-        getLineWidth = 1;
-      } else if (g === 'Polygon' && v === 'String') {
-        colorStyle = colorCategoriesStyle({
-          categories: { stats, top: 10 },
-          colors: 'Prism'
-        });
-        getFillColor = (d) => colorStyle(d.properties[propId]);
-        getLineColor = [44, 44, 44, 60];
-        getLineWidth = 1;
-      } else if (g === 'LineString' && this.isGeography) {
-        getLineColor = [234, 200, 100, 255];
-        getLineWidth = 2;
-      } else if (g === 'LineString' && v === 'Number') {
-        colorStyle = colorBinsStyle({
-          breaks: { stats, method: 'quantiles', bins: 5 },
-          colors: this.categoryIdPalette
-        });
-        getLineColor = (d) => colorStyle(d.properties[propId]);
-        getLineWidth = 2;
-      } else if (g === 'LineString' && v === 'String') {
-        colorStyle = colorCategoriesStyle({
-          categories: { stats, top: 10 },
-          colors: 'Prism'
-        });
-        getLineColor = (d) => colorStyle(d.properties[propId]);
-        getLineWidth = 2;
-      } else if (g === 'Point' && this.isGeography) {
-        getFillColor = [234, 200, 100, 255];
-        getLineColor = [44, 44, 44, 255];
-        getLineWidth = 1;
-        getRadius = 4;
-      } else if (g === 'Point' && v === 'Number') {
-        colorStyle = colorBinsStyle({
-          breaks: { stats, method: 'quantiles', bins: 5 },
-          colors: this.categoryIdPalette
-        });
-        getFillColor = (d) => colorStyle(d.properties[propId]);
-        getLineColor = [100, 100, 100, 255];
-        getLineWidth = 1;
-        getRadius = 4;
-      } else if (g === 'Point' && v === 'String') {
-        colorStyle = colorCategoriesStyle({
-          categories: { stats, top: 10 },
-          colors: 'Bold'
-        });
-        getFillColor = (d) => colorStyle(d.properties[propId]);
-        getLineColor = [100, 100, 100, 255];
-        getLineWidth = 1;
-        getRadius = 4;
-      }
-    },
-    resetColorStyle () {
-      propId = undefined;
-      colorStyle = undefined;
-      getFillColor = undefined;
-      getLineColor = undefined;
-      getLineWidth = undefined;
-      getRadius = undefined;
-    },
-    compare (a, b) {
-      return JSON.stringify(a) === JSON.stringify(b);
+    setStyleProps () {
+      styleProps = resetColorStyleProps();
+      styleProps = generateColorStyleProps({
+        geomType: this.geomType,
+        variable: this.variable,
+        categoryId: this.categoryId,
+        isGeography: this.isGeography
+      });
     }
   }
 };
@@ -463,5 +355,4 @@ export default {
     }
   }
 }
-
 </style>
diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/legends/BasicLegend.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/legends/BasicLegend.vue
deleted file mode 100644
index d5761c813267..000000000000
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/legends/BasicLegend.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div class="basic-legend is-small">
-    <p class="legend-title is-semibold">{{ title }}</p>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'BasicLegend',
-  props: {
-    title: String
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-// .basic-legend {}
-</style>
diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorBinsStyle.js b/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorBinsStyle.js
index 0e597516afea..952b19fc8b4c 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorBinsStyle.js
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorBinsStyle.js
@@ -1,6 +1,6 @@
 import { range } from 'd3-array';
 import { scaleThreshold } from 'd3-scale';
-import { gePalette, NULL_COLOR } from './utils';
+import { getPalette, NULL_COLOR } from './utils';
 
 const N_BINS = 5;
 
@@ -30,7 +30,7 @@ export default function colorBinsStyle ({ breaks, colors, nullColor = NULL_COLOR
     }
   }
 
-  const palette = typeof colors === 'string' ? gePalette(colors, domain.length) : colors;
+  const palette = typeof colors === 'string' ? getPalette(colors, domain.length) : colors;
 
   const color = scaleThreshold()
     .domain(domain)
diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorCategoriesStyle.js b/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorCategoriesStyle.js
index f1947d127826..9f49001a09b7 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorCategoriesStyle.js
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorCategoriesStyle.js
@@ -1,4 +1,4 @@
-import { gePalette, NULL_COLOR } from './utils';
+import { getPalette, NULL_COLOR } from './utils';
 
 const OTHERS_COLOR = [165, 170, 153];
 const TOP = 10;
@@ -19,7 +19,7 @@ export default function colorCategoriesStyle ({
     categoryList = stats.categories.map(c => c.category).slice(0, top);
   }
 
-  const palette = typeof colors === 'string' ? gePalette(colors, categoryList.length) : colors;
+  const palette = typeof colors === 'string' ? getPalette(colors, categoryList.length) : colors;
 
   for (const [i, c] of categoryList.entries()) {
     colorsByCategory[c] = palette[i];
diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorStyles.js b/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorStyles.js
new file mode 100644
index 000000000000..b58a813506de
--- /dev/null
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorStyles.js
@@ -0,0 +1,104 @@
+import colorBinsStyle from './colorBinsStyle';
+import colorCategoriesStyle from './colorCategoriesStyle';
+
+const CATEGORY_PALETTES = {
+  demographics: 'BrwnYl',
+  environmental: 'BluGrn',
+  derived: 'Teal',
+  housing: 'Burg',
+  human_mobility: 'RedOr',
+  road_traffic: 'Sunset',
+  financial: 'PurpOr',
+  covid19: 'Peach',
+  behavioral: 'TealGrn'
+};
+
+export function generateColorStyleProps ({ geomType, variable, categoryId, isGeography }) {
+  const g = geomType;
+  const v = variable && variable.type;
+  const stats = variable;
+  const props = { deck: {} };
+
+  props.propId = variable && variable.attribute;
+
+  if (g === 'Polygon' && isGeography) {
+    props.deck.getFillColor = [234, 200, 100, 168];
+    props.deck.getLineColor = [44, 44, 44, 60];
+    props.deck.getLineWidth = 1;
+  } else if (g === 'Polygon' && v === 'Number') {
+    props.colorStyle = colorBinsStyle({
+      breaks: { stats, method: 'quantiles', bins: 5 },
+      colors: categoryIdPalette(categoryId)
+    });
+    props.deck.getFillColor = (d) => props.colorStyle(d.properties[props.propId]);
+    props.deck.getLineColor = [44, 44, 44, 60];
+    props.deck.getLineWidth = 1;
+  } else if (g === 'Polygon' && v === 'String') {
+    props.colorStyle = colorCategoriesStyle({
+      categories: { stats, top: 10 },
+      colors: 'Prism'
+    });
+    props.deck.getFillColor = (d) => props.colorStyle(d.properties[props.propId]);
+    props.deck.getLineColor = [44, 44, 44, 60];
+    props.deck.getLineWidth = 1;
+  } else if (g === 'LineString' && isGeography) {
+    props.deck.getLineColor = [234, 200, 100, 255];
+    props.deck.getLineWidth = 2;
+  } else if (g === 'LineString' && v === 'Number') {
+    props.colorStyle = colorBinsStyle({
+      breaks: { stats, method: 'quantiles', bins: 5 },
+      colors: categoryIdPalette(categoryId)
+    });
+    props.deck.getLineColor = (d) => props.colorStyle(d.properties[props.propId]);
+    props.deck.getLineWidth = 2;
+  } else if (g === 'LineString' && v === 'String') {
+    props.colorStyle = colorCategoriesStyle({
+      categories: { stats, top: 10 },
+      colors: 'Prism'
+    });
+    props.deck.getLineColor = (d) => props.colorStyle(d.properties[props.propId]);
+    props.deck.getLineWidth = 2;
+  } else if (g === 'Point' && isGeography) {
+    props.deck.getFillColor = [234, 200, 100, 255];
+    props.deck.getLineColor = [44, 44, 44, 255];
+    props.deck.getLineWidth = 1;
+    props.deck.getRadius = 4;
+  } else if (g === 'Point' && v === 'Number') {
+    props.colorStyle = colorBinsStyle({
+      breaks: { stats, method: 'quantiles', bins: 5 },
+      colors: categoryIdPalette(categoryId)
+    });
+    props.deck.getFillColor = (d) => props.colorStyle(d.properties[props.propId]);
+    props.deck.getLineColor = [100, 100, 100, 255];
+    props.deck.getLineWidth = 1;
+    props.deck.getRadius = 4;
+  } else if (g === 'Point' && v === 'String') {
+    props.colorStyle = colorCategoriesStyle({
+      categories: { stats, top: 10 },
+      colors: 'Bold'
+    });
+    props.deck.getFillColor = (d) => props.colorStyle(d.properties[props.propId]);
+    props.deck.getLineColor = [100, 100, 100, 255];
+    props.deck.getLineWidth = 1;
+    props.deck.getRadius = 4;
+  }
+
+  return props;
+}
+
+export function resetColorStyleProps () {
+  return {
+    propId: undefined,
+    colorStyle: undefined,
+    deck: {
+      getFillColor: undefined,
+      getLineColor: undefined,
+      getLineWidth: undefined,
+      getRadius: undefined
+    }
+  };
+}
+
+function categoryIdPalette (categoryId) {
+  return CATEGORY_PALETTES[categoryId] || 'OrYel';
+}
diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/utils.js b/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/utils.js
index 249f237a56cc..c3c65712223f 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/utils.js
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/utils.js
@@ -2,7 +2,7 @@ import * as cartoColors from 'cartocolor';
 
 export const NULL_COLOR = [204, 204, 204];
 
-export function gePalette (name, numCategories) {
+export function getPalette (name, numCategories) {
   const palette = cartoColors[name];
   let paletteIndex = numCategories;
 
@@ -78,3 +78,23 @@ function hexToRgb (hex) {
 
   throw new Error(`Error parsing hexadecimal color: ${hex}`);
 }
+
+export function formatNumber (value) {
+  if (value !== undefined && value !== null) {
+    if (!Number.isInteger(value)) {
+      return value.toLocaleString(undefined, {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+      });
+    }
+    return value.toLocaleString();
+  }
+}
+
+export function capitalize (string) {
+  return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
+}
+
+export function compare (a, b) {
+  return JSON.stringify(a) === JSON.stringify(b);
+}
diff --git a/lib/assets/javascripts/new-dashboard/components/NavigationBar/NavigationBar.vue b/lib/assets/javascripts/new-dashboard/components/NavigationBar/NavigationBar.vue
index 816cc46c9d3d..6dbda609be8b 100644
--- a/lib/assets/javascripts/new-dashboard/components/NavigationBar/NavigationBar.vue
+++ b/lib/assets/javascripts/new-dashboard/components/NavigationBar/NavigationBar.vue
@@ -45,14 +45,6 @@
           :message="$t('FeedbackMessage.message')"
           @click.native.stop.prevent="toggleDropdown"/>
 
-        <!-- <NotificationPopup
-          v-if="!popupWasShown('dataObservatory.popupWasShown') && hasDOEnabled"
-          class="notification-popup"
-          :title="$t('DataObservatoryMessage.title')"
-          :message="$t('DataObservatoryMessage.message', { path: this.$router.resolve({ name: 'spatial-data-catalog' }).href })"
-          :messageHasHTML="true"
-          @click.native="markPopupAsRead('dataObservatory.popupWasShown')"/> -->
-
         <NotificationPopup
           v-if="!popupWasShown('popups.DataObservatorySamples')"
           class="notification-popup"
diff --git a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue
index 0c88c8e21c2a..789f6dab3615 100644
--- a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue
+++ b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue
@@ -48,8 +48,6 @@ export default {
     hasSample () {
       return this.dataset.sample_info && !!this.dataset.sample_info.id;
     }
-  },
-  methods: {
   }
 };
 </script>
diff --git a/lib/assets/test/spec/new-dashboard/unit/specs/components/Catalog/map-styles/colorBinsStyle.spec.js b/lib/assets/test/spec/new-dashboard/unit/specs/components/Catalog/map-styles/colorBinsStyle.spec.js
new file mode 100644
index 000000000000..49d25e18c4a7
--- /dev/null
+++ b/lib/assets/test/spec/new-dashboard/unit/specs/components/Catalog/map-styles/colorBinsStyle.spec.js
@@ -0,0 +1,46 @@
+import * as Metrics from 'new-dashboard/core/metrics';
+import store from 'new-dashboard/store';
+
+describe('Internal Metrics Tracker', () => {
+  describe('sendMetric', () => {
+    let previousState;
+
+    beforeEach(() => {
+      global.fetch = jest.fn();
+      previousState = {
+        ...store.state,
+        config: { ...store.state.config },
+        user: { ...store.state.user }
+      };
+    });
+
+    afterEach(() => {
+      store.replaceState(previousState);
+    });
+
+    it('should return call fetch with proper parameters', () => {
+      const eventName = 'fake_event';
+      const eventProperties = { page: 'dashboard', user_id: 'fake_id' };
+      const baseURL = 'https://user.carto.com';
+      store.state.config.base_url = baseURL;
+      store.state.user = { id: 'fake_id' };
+
+      Metrics.sendMetric(eventName, eventProperties);
+
+      const requestURL = `${baseURL}/api/v3/metrics`;
+      const requestProperties = {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: eventName,
+          properties: eventProperties
+        })
+      };
+
+      expect(global.fetch).toHaveBeenCalledWith(
+        requestURL,
+        requestProperties
+      );
+    });
+  });
+});
diff --git a/lib/assets/test/spec/new-dashboard/unit/specs/components/Catalog/map-styles/colorCategoriesStyle.spec.js b/lib/assets/test/spec/new-dashboard/unit/specs/components/Catalog/map-styles/colorCategoriesStyle.spec.js
new file mode 100644
index 000000000000..49d25e18c4a7
--- /dev/null
+++ b/lib/assets/test/spec/new-dashboard/unit/specs/components/Catalog/map-styles/colorCategoriesStyle.spec.js
@@ -0,0 +1,46 @@
+import * as Metrics from 'new-dashboard/core/metrics';
+import store from 'new-dashboard/store';
+
+describe('Internal Metrics Tracker', () => {
+  describe('sendMetric', () => {
+    let previousState;
+
+    beforeEach(() => {
+      global.fetch = jest.fn();
+      previousState = {
+        ...store.state,
+        config: { ...store.state.config },
+        user: { ...store.state.user }
+      };
+    });
+
+    afterEach(() => {
+      store.replaceState(previousState);
+    });
+
+    it('should return call fetch with proper parameters', () => {
+      const eventName = 'fake_event';
+      const eventProperties = { page: 'dashboard', user_id: 'fake_id' };
+      const baseURL = 'https://user.carto.com';
+      store.state.config.base_url = baseURL;
+      store.state.user = { id: 'fake_id' };
+
+      Metrics.sendMetric(eventName, eventProperties);
+
+      const requestURL = `${baseURL}/api/v3/metrics`;
+      const requestProperties = {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: eventName,
+          properties: eventProperties
+        })
+      };
+
+      expect(global.fetch).toHaveBeenCalledWith(
+        requestURL,
+        requestProperties
+      );
+    });
+  });
+});
diff --git a/lib/assets/test/spec/new-dashboard/unit/specs/components/Catalog/map-styles/colorStyles.spec.js b/lib/assets/test/spec/new-dashboard/unit/specs/components/Catalog/map-styles/colorStyles.spec.js
new file mode 100644
index 000000000000..49d25e18c4a7
--- /dev/null
+++ b/lib/assets/test/spec/new-dashboard/unit/specs/components/Catalog/map-styles/colorStyles.spec.js
@@ -0,0 +1,46 @@
+import * as Metrics from 'new-dashboard/core/metrics';
+import store from 'new-dashboard/store';
+
+describe('Internal Metrics Tracker', () => {
+  describe('sendMetric', () => {
+    let previousState;
+
+    beforeEach(() => {
+      global.fetch = jest.fn();
+      previousState = {
+        ...store.state,
+        config: { ...store.state.config },
+        user: { ...store.state.user }
+      };
+    });
+
+    afterEach(() => {
+      store.replaceState(previousState);
+    });
+
+    it('should return call fetch with proper parameters', () => {
+      const eventName = 'fake_event';
+      const eventProperties = { page: 'dashboard', user_id: 'fake_id' };
+      const baseURL = 'https://user.carto.com';
+      store.state.config.base_url = baseURL;
+      store.state.user = { id: 'fake_id' };
+
+      Metrics.sendMetric(eventName, eventProperties);
+
+      const requestURL = `${baseURL}/api/v3/metrics`;
+      const requestProperties = {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: eventName,
+          properties: eventProperties
+        })
+      };
+
+      expect(global.fetch).toHaveBeenCalledWith(
+        requestURL,
+        requestProperties
+      );
+    });
+  });
+});
diff --git a/lib/assets/test/spec/new-dashboard/unit/specs/components/Catalog/map-styles/utils.spec.js b/lib/assets/test/spec/new-dashboard/unit/specs/components/Catalog/map-styles/utils.spec.js
new file mode 100644
index 000000000000..49d25e18c4a7
--- /dev/null
+++ b/lib/assets/test/spec/new-dashboard/unit/specs/components/Catalog/map-styles/utils.spec.js
@@ -0,0 +1,46 @@
+import * as Metrics from 'new-dashboard/core/metrics';
+import store from 'new-dashboard/store';
+
+describe('Internal Metrics Tracker', () => {
+  describe('sendMetric', () => {
+    let previousState;
+
+    beforeEach(() => {
+      global.fetch = jest.fn();
+      previousState = {
+        ...store.state,
+        config: { ...store.state.config },
+        user: { ...store.state.user }
+      };
+    });
+
+    afterEach(() => {
+      store.replaceState(previousState);
+    });
+
+    it('should return call fetch with proper parameters', () => {
+      const eventName = 'fake_event';
+      const eventProperties = { page: 'dashboard', user_id: 'fake_id' };
+      const baseURL = 'https://user.carto.com';
+      store.state.config.base_url = baseURL;
+      store.state.user = { id: 'fake_id' };
+
+      Metrics.sendMetric(eventName, eventProperties);
+
+      const requestURL = `${baseURL}/api/v3/metrics`;
+      const requestProperties = {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: eventName,
+          properties: eventProperties
+        })
+      };
+
+      expect(global.fetch).toHaveBeenCalledWith(
+        requestURL,
+        requestProperties
+      );
+    });
+  });
+});
diff --git a/package.json b/package.json
index 6d60abd6acef..23addfd8925f 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,7 @@
     "jquery": "2.1.4",
     "leaflet": "CartoDB/Leaflet#v1.3.1-carto1",
     "loader-utils": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.17.tgz",
-    "mapbox-gl": "^1.12.0",
+    "mapbox-gl": "^1.13.0",
     "moment": "2.18.1",
     "moment-timezone": "^0.5.13",
     "node-polyglot": "1.0.0",

From b5fb4ada2b1439db4578b7f563f0def3a890bc12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Wed, 23 Dec 2020 10:55:14 +0100
Subject: [PATCH 51/56] Improve responsive style

---
 .../new-dashboard/pages/Data/CatalogDataset.vue          | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDataset.vue b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDataset.vue
index c57c38a9f276..f99fab1e02aa 100644
--- a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDataset.vue
+++ b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDataset.vue
@@ -32,7 +32,7 @@
     </section>
 
     <section v-if="!loading" class="catalogDetail" :class="{ 'container grid': !publicWebsite, 'u-flex u-flex__justify--center website-header': publicWebsite }">
-      <div class="grid-cell" :class="{ 'grid-cell--col12': !publicWebsite, 'grid-cell--col10': publicWebsite }">
+      <div class="grid-cell" :class="{ 'grid-cell--col12': !publicWebsite || responsive, 'grid-cell--col10': publicWebsite && !responsive }">
         <transition name="fade">
           <div>
             <div v-if="publicWebsite" class="catalogDetail__catalog">
@@ -57,9 +57,9 @@
     </section>
 
     <section v-if="!loading" class="catalogDetail" :class="{ 'container grid': !publicWebsite, 'u-flex u-flex__justify--center': publicWebsite }">
-      <div class="grid-cell" :class="{ 'grid-cell--col12': !publicWebsite, 'grid-cell--col10': publicWebsite }">
+      <div class="grid-cell" :class="{ 'grid-cell--col12': !publicWebsite || responsive, 'grid-cell--col10': publicWebsite && !responsive }">
         <transition name="fade">
-          <div >
+          <div :class="{ 'u-pb--120': responsive }">
             <div class="grid grid-cell u-flex__justify--center">
               <NavigationTabs class="grid-cell--col12">
                 <router-link :to="{ name: 'catalog-dataset-summary' }" replace>Summary</router-link>
@@ -124,6 +124,9 @@ export default {
     },
     hasSample () {
       return this.dataset.sample_info && !!this.dataset.sample_info.id;
+    },
+    responsive () {
+      return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
     }
   },
   methods: {

From a5f146cf6726850ed19bedf1cb3b60eaf6652222 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Wed, 23 Dec 2020 11:06:45 +0100
Subject: [PATCH 52/56] Extract getQuantiles to utils

---
 .../components/Catalog/CatalogMap.vue         | 99 ++++++++++---------
 .../Catalog/map-styles/colorBinsStyle.js      | 16 +--
 .../components/Catalog/map-styles/utils.js    | 12 +++
 3 files changed, 67 insertions(+), 60 deletions(-)

diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
index 79c4c6113162..a168904a0e2f 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
@@ -34,8 +34,8 @@ import mapboxgl from 'mapbox-gl';
 import { Deck } from '@deck.gl/core';
 import { CartoBQTilerLayer, BASEMAP } from '@deck.gl/carto';
 
-import { formatNumber, capitalize, compare } from './map-styles/utils';
 import { generateColorStyleProps, resetColorStyleProps } from './map-styles/colorStyles';
+import { getQuantiles, formatNumber, capitalize, compare } from './map-styles/utils';
 
 import ColorBinsLegend from './legends/ColorBinsLegend';
 import ColorCategoriesLegend from './legends/ColorCategoriesLegend';
@@ -43,6 +43,8 @@ import ColorCategoriesLegend from './legends/ColorCategoriesLegend';
 let deck;
 let styleProps = {};
 
+const BINS = 5;
+
 export default {
   name: 'CatalogMap',
   props: {
@@ -95,7 +97,7 @@ export default {
     },
     variableBins () {
       if (this.variable && this.variable.quantiles && styleProps.colorStyle) {
-        const breaks = [...this.variable.quantiles[2]['5'], this.variable.max];
+        const breaks = [...getQuantiles(this.variable, BINS), this.variable.max];
         const bins = [...new Set(breaks)].map(q => ({
           color: `rgb(${styleProps.colorStyle(q)})`
         }));
@@ -144,52 +146,7 @@ export default {
         this.syncMapboxViewState(viewState);
       },
       controller: true,
-      getTooltip: ({ x, y, object }) => {
-        if (!object || !this.variable) return false;
-        const title = this.variable.attribute;
-        let html = `<p style="margin: 0 0 0 4px; color: #6f777c;">${title}</p>`;
-        const objects = deck.pickMultipleObjects({ x, y })
-          // Remove duplicated objects
-          .filter((v, i, a) => a.findIndex(t => (t.index === v.index)) === i);
-        let index = 0;
-        const items = {};
-        for (const o of objects) {
-          if (compare(o.object.geometry.coordinates, object.geometry.coordinates)) {
-            // Display the points that are fully overlapped (same coordinates)
-            let value = o.object.properties[this.variable.attribute];
-            if (value !== undefined && value !== null) {
-              if (typeof value === 'number') {
-                value = formatNumber(value);
-              } else if (typeof value === 'string') {
-                value = capitalize(value);
-              }
-            } else {
-              value = 'No data';
-            }
-            items[value] ? items[value].count += 1 : items[value] = { index: index++, count: 1 };
-          }
-        }
-        const orderedItems = Object.keys(items).map(key => ({
-          value: key, index: items[key].index, count: items[key].count
-        })).sort((a, b) => (a.index > b.index) ? 1 : -1);
-        for (const item of orderedItems) {
-          let value = item.value;
-          if (item.count > 1) {
-            value += ` (${item.count})`;
-          }
-          html += `<p style="margin: 4px 0 0 4px;"><b>${value}</b></p>`;
-        }
-        const style = {
-          'padding': '8px 12px',
-          'border-radius': '2px',
-          'font-size': '12px',
-          'font-family': "'Open Sans', 'Helvetica Neue', Helvetica, sans-serif",
-          'color': '#162945',
-          'background-color': 'white',
-          'border': 'solid 1px #e6e8eb'
-        };
-        return { html, style };
-      }
+      getTooltip: this.getTooltip
     });
 
     this.renderLayer();
@@ -283,6 +240,52 @@ export default {
         categoryId: this.categoryId,
         isGeography: this.isGeography
       });
+    },
+    getTooltip ({ x, y, object }) {
+      if (!object || !this.variable) return false;
+      const title = this.variable.attribute;
+      let html = `<p style="margin: 0 0 0 4px; color: #6f777c;">${title}</p>`;
+      const objects = deck.pickMultipleObjects({ x, y })
+        // Remove duplicated objects
+        .filter((v, i, a) => a.findIndex(t => (t.index === v.index)) === i);
+      let index = 0;
+      const items = {};
+      for (const o of objects) {
+        if (compare(o.object.geometry.coordinates, object.geometry.coordinates)) {
+          // Display the points that are fully overlapped (same coordinates)
+          let value = o.object.properties[this.variable.attribute];
+          if (value !== undefined && value !== null) {
+            if (typeof value === 'number') {
+              value = formatNumber(value);
+            } else if (typeof value === 'string') {
+              value = capitalize(value);
+            }
+          } else {
+            value = 'No data';
+          }
+          items[value] ? items[value].count += 1 : items[value] = { index: index++, count: 1 };
+        }
+      }
+      const orderedItems = Object.keys(items).map(key => ({
+        value: key, index: items[key].index, count: items[key].count
+      })).sort((a, b) => (a.index > b.index) ? 1 : -1);
+      for (const item of orderedItems) {
+        let value = item.value;
+        if (item.count > 1) {
+          value += ` (${item.count})`;
+        }
+        html += `<p style="margin: 4px 0 0 4px;"><b>${value}</b></p>`;
+      }
+      const style = {
+        'padding': '8px 12px',
+        'border-radius': '2px',
+        'font-size': '12px',
+        'font-family': "'Open Sans', 'Helvetica Neue', Helvetica, sans-serif",
+        'color': '#162945',
+        'background-color': 'white',
+        'border': 'solid 1px #e6e8eb'
+      };
+      return { html, style };
     }
   }
 };
diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorBinsStyle.js b/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorBinsStyle.js
index 952b19fc8b4c..b1d145c95d2f 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorBinsStyle.js
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/colorBinsStyle.js
@@ -1,26 +1,18 @@
 import { range } from 'd3-array';
 import { scaleThreshold } from 'd3-scale';
-import { getPalette, NULL_COLOR } from './utils';
+import { getQuantiles, getPalette, NULL_COLOR } from './utils';
 
-const N_BINS = 5;
+const BINS = 5;
 
 export default function colorBinsStyle ({ breaks, colors, nullColor = NULL_COLOR }) {
   let domain;
   if (Array.isArray(breaks)) {
     domain = breaks;
   } else {
-    const { stats, method, bins = N_BINS } = breaks;
+    const { stats, method, bins = BINS } = breaks;
 
     if (method === 'quantiles') {
-      const minQuantile = parseInt(Object.keys(stats.quantiles[0]), 10);
-      const maxQuantile = parseInt(Object.keys(stats.quantiles[stats.quantiles.length - 1]), 10);
-      if (bins < minQuantile || bins > maxQuantile) {
-        throw new Error(
-          `Invalid bins value. It shoud be between ${minQuantile} and ${maxQuantile}`
-        );
-      }
-      const quantiles = stats.quantiles.find(d => d.hasOwnProperty(bins));
-      const range = [...quantiles[bins]];
+      const range = getQuantiles(stats, bins);
       range.push(stats.max);
       domain = [...new Set(range)];
     } else {
diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/utils.js b/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/utils.js
index c3c65712223f..b92a9c0ce007 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/utils.js
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/map-styles/utils.js
@@ -79,6 +79,18 @@ function hexToRgb (hex) {
   throw new Error(`Error parsing hexadecimal color: ${hex}`);
 }
 
+export function getQuantiles (stats, bins) {
+  const minQuantile = parseInt(Object.keys(stats.quantiles[0]), 10);
+  const maxQuantile = parseInt(Object.keys(stats.quantiles[stats.quantiles.length - 1]), 10);
+  if (bins < minQuantile || bins > maxQuantile) {
+    throw new Error(
+      `Invalid bins value. It shoud be between ${minQuantile} and ${maxQuantile}`
+    );
+  }
+  const quantiles = stats.quantiles.find(d => d.hasOwnProperty(bins));
+  return [...quantiles[bins]];
+}
+
 export function formatNumber (value) {
   if (value !== undefined && value !== null) {
     if (!Number.isInteger(value)) {

From 07c6e39c17722e6f11b9654b5f11cee060e63df9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Wed, 23 Dec 2020 11:49:52 +0100
Subject: [PATCH 53/56] Add catalog map style tests!

---
 .../new-dashboard/i18n/locales/en.json        |   2 +-
 .../Catalog/map-styles/colorBinsStyle.spec.js |  59 ++---
 .../map-styles/colorCategoriesStyle.spec.js   |  62 ++---
 .../Catalog/map-styles/colorStyles.spec.js    | 229 +++++++++++++++---
 .../Catalog/map-styles/utils.spec.js          |  46 ----
 5 files changed, 231 insertions(+), 167 deletions(-)
 delete mode 100644 lib/assets/test/spec/new-dashboard/unit/specs/components/Catalog/map-styles/utils.spec.js

diff --git a/lib/assets/javascripts/new-dashboard/i18n/locales/en.json b/lib/assets/javascripts/new-dashboard/i18n/locales/en.json
index 84d06b4de979..4b5823173af3 100644
--- a/lib/assets/javascripts/new-dashboard/i18n/locales/en.json
+++ b/lib/assets/javascripts/new-dashboard/i18n/locales/en.json
@@ -399,7 +399,7 @@
   },
   "DataObservatorySamples": {
     "title": "Sample data now available in Data Observatory",
-    "message": "You can now access samples of the datasets available in the Data Observatory to help in your data discovery and evaluation efforts. We have also added a map preview as part of the catalog.</br><a href='{path}'>Visit our Spatial Data Catalog</a>"
+    "message": "You can now access samples of the datasets available in the Data Observatory to help in your data discovery and evaluation efforts.</br><a href='{path}'>Visit our Spatial Data Catalog</a>"
   },
   "SharedBrief": {
     "sharedWith": "Shared with",
diff --git a/lib/assets/test/spec/new-dashboard/unit/specs/components/Catalog/map-styles/colorBinsStyle.spec.js b/lib/assets/test/spec/new-dashboard/unit/specs/components/Catalog/map-styles/colorBinsStyle.spec.js
index 49d25e18c4a7..43c69aca445c 100644
--- a/lib/assets/test/spec/new-dashboard/unit/specs/components/Catalog/map-styles/colorBinsStyle.spec.js
+++ b/lib/assets/test/spec/new-dashboard/unit/specs/components/Catalog/map-styles/colorBinsStyle.spec.js
@@ -1,46 +1,23 @@
-import * as Metrics from 'new-dashboard/core/metrics';
-import store from 'new-dashboard/store';
+import colorBinsStyle from 'new-dashboard/components/Catalog/map-styles/colorBinsStyle';
 
-describe('Internal Metrics Tracker', () => {
-  describe('sendMetric', () => {
-    let previousState;
-
-    beforeEach(() => {
-      global.fetch = jest.fn();
-      previousState = {
-        ...store.state,
-        config: { ...store.state.config },
-        user: { ...store.state.user }
+describe('colorBinsStyle.js', () => {
+  describe('colorBinsStyle', () => {
+    it('compute color bins style', () => {
+      const stats = {
+        quantiles: [{ '5': [10, 20, 30, 50, 100] }]
       };
-    });
-
-    afterEach(() => {
-      store.replaceState(previousState);
-    });
-
-    it('should return call fetch with proper parameters', () => {
-      const eventName = 'fake_event';
-      const eventProperties = { page: 'dashboard', user_id: 'fake_id' };
-      const baseURL = 'https://user.carto.com';
-      store.state.config.base_url = baseURL;
-      store.state.user = { id: 'fake_id' };
-
-      Metrics.sendMetric(eventName, eventProperties);
-
-      const requestURL = `${baseURL}/api/v3/metrics`;
-      const requestProperties = {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          name: eventName,
-          properties: eventProperties
-        })
-      };
-
-      expect(global.fetch).toHaveBeenCalledWith(
-        requestURL,
-        requestProperties
-      );
+      const colorStyle = colorBinsStyle({
+        breaks: { stats, method: 'quantiles', bins: 5 },
+        colors: 'BrwnYl'
+      });
+      expect(colorStyle(0)).toEqual([237, 229, 207, 255]);
+      expect(colorStyle(1)).toEqual([237, 229, 207, 255]);
+      expect(colorStyle(10)).toEqual([237, 229, 207, 255]);
+      expect(colorStyle(20)).toEqual([221, 186, 155, 255]);
+      expect(colorStyle(30)).toEqual([205, 140, 122, 255]);
+      expect(colorStyle(50)).toEqual([178, 97, 102, 255]);
+      expect(colorStyle(100)).toEqual([138, 60, 86, 255]);
+      expect(colorStyle(200)).toEqual([84, 31, 63, 255]);
     });
   });
 });
diff --git a/lib/assets/test/spec/new-dashboard/unit/specs/components/Catalog/map-styles/colorCategoriesStyle.spec.js b/lib/assets/test/spec/new-dashboard/unit/specs/components/Catalog/map-styles/colorCategoriesStyle.spec.js
index 49d25e18c4a7..bff897b67aa4 100644
--- a/lib/assets/test/spec/new-dashboard/unit/specs/components/Catalog/map-styles/colorCategoriesStyle.spec.js
+++ b/lib/assets/test/spec/new-dashboard/unit/specs/components/Catalog/map-styles/colorCategoriesStyle.spec.js
@@ -1,46 +1,26 @@
-import * as Metrics from 'new-dashboard/core/metrics';
-import store from 'new-dashboard/store';
+import colorCategoriesStyle from 'new-dashboard/components/Catalog/map-styles/colorCategoriesStyle';
 
-describe('Internal Metrics Tracker', () => {
-  describe('sendMetric', () => {
-    let previousState;
-
-    beforeEach(() => {
-      global.fetch = jest.fn();
-      previousState = {
-        ...store.state,
-        config: { ...store.state.config },
-        user: { ...store.state.user }
+describe('colorCategoriesStyle.js', () => {
+  describe('colorCategoriesStyle', () => {
+    it('compute color categories style', () => {
+      const stats = {
+        categories: [
+          { category: 'a' },
+          { category: 'b' },
+          { category: 'c' },
+          { category: 'd' },
+          { category: 'e' }
+        ]
       };
-    });
-
-    afterEach(() => {
-      store.replaceState(previousState);
-    });
-
-    it('should return call fetch with proper parameters', () => {
-      const eventName = 'fake_event';
-      const eventProperties = { page: 'dashboard', user_id: 'fake_id' };
-      const baseURL = 'https://user.carto.com';
-      store.state.config.base_url = baseURL;
-      store.state.user = { id: 'fake_id' };
-
-      Metrics.sendMetric(eventName, eventProperties);
-
-      const requestURL = `${baseURL}/api/v3/metrics`;
-      const requestProperties = {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          name: eventName,
-          properties: eventProperties
-        })
-      };
-
-      expect(global.fetch).toHaveBeenCalledWith(
-        requestURL,
-        requestProperties
-      );
+      const colorStyle = colorCategoriesStyle({
+        categories: { stats, top: 3 },
+        colors: 'Prism'
+      });
+      expect(colorStyle('a')).toEqual([95, 70, 144, 255]);
+      expect(colorStyle('b')).toEqual([29, 105, 150, 255]);
+      expect(colorStyle('c')).toEqual([56, 166, 165, 255]);
+      expect(colorStyle('d')).toEqual([165, 170, 153]);
+      expect(colorStyle('e')).toEqual([165, 170, 153]);
     });
   });
 });
diff --git a/lib/assets/test/spec/new-dashboard/unit/specs/components/Catalog/map-styles/colorStyles.spec.js b/lib/assets/test/spec/new-dashboard/unit/specs/components/Catalog/map-styles/colorStyles.spec.js
index 49d25e18c4a7..f1a3b58ec0c2 100644
--- a/lib/assets/test/spec/new-dashboard/unit/specs/components/Catalog/map-styles/colorStyles.spec.js
+++ b/lib/assets/test/spec/new-dashboard/unit/specs/components/Catalog/map-styles/colorStyles.spec.js
@@ -1,46 +1,199 @@
-import * as Metrics from 'new-dashboard/core/metrics';
-import store from 'new-dashboard/store';
+import { generateColorStyleProps, resetColorStyleProps } from 'new-dashboard/components/Catalog/map-styles/colorStyles';
 
-describe('Internal Metrics Tracker', () => {
-  describe('sendMetric', () => {
-    let previousState;
-
-    beforeEach(() => {
-      global.fetch = jest.fn();
-      previousState = {
-        ...store.state,
-        config: { ...store.state.config },
-        user: { ...store.state.user }
+describe('colorStyles.js', () => {
+  describe('generateColorStyleProps', () => {
+    it('returns polygon geography style props', () => {
+      const expected = {
+        propId: undefined,
+        deck: {
+          getFillColor: [234, 200, 100, 168],
+          getLineColor: [44, 44, 44, 60],
+          getLineWidth: 1
+        }
       };
+      const props = generateColorStyleProps({
+        geomType: 'Polygon',
+        isGeography: true
+      });
+      expect(props).toEqual(expected);
     });
-
-    afterEach(() => {
-      store.replaceState(previousState);
+    it('returns polygon with numeric variable style props', () => {
+      const expected = {
+        propId: 'column',
+        colorStyle: expect.any(Function),
+        deck: {
+          getFillColor: expect.any(Function),
+          getLineColor: [44, 44, 44, 60],
+          getLineWidth: 1
+        }
+      };
+      const props = generateColorStyleProps({
+        geomType: 'Polygon',
+        variable: {
+          type: 'Number',
+          attribute: 'column',
+          quantiles: [{ '5': [10, 20, 30, 50, 100] }]
+        },
+        categoryId: 'demographics',
+        isGeography: false
+      });
+      expect(props).toEqual(expected);
     });
-
-    it('should return call fetch with proper parameters', () => {
-      const eventName = 'fake_event';
-      const eventProperties = { page: 'dashboard', user_id: 'fake_id' };
-      const baseURL = 'https://user.carto.com';
-      store.state.config.base_url = baseURL;
-      store.state.user = { id: 'fake_id' };
-
-      Metrics.sendMetric(eventName, eventProperties);
-
-      const requestURL = `${baseURL}/api/v3/metrics`;
-      const requestProperties = {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          name: eventName,
-          properties: eventProperties
-        })
+    it('returns polygon with string variable style props', () => {
+      const expected = {
+        propId: 'column',
+        colorStyle: expect.any(Function),
+        deck: {
+          getFillColor: expect.any(Function),
+          getLineColor: [44, 44, 44, 60],
+          getLineWidth: 1
+        }
       };
-
-      expect(global.fetch).toHaveBeenCalledWith(
-        requestURL,
-        requestProperties
-      );
+      const props = generateColorStyleProps({
+        geomType: 'Polygon',
+        variable: {
+          type: 'String',
+          attribute: 'column',
+          categories: [{ category: 'a' }]
+        },
+        categoryId: 'demographics',
+        isGeography: false
+      });
+      expect(props).toEqual(expected);
+    });
+    it('returns line geography style props', () => {
+      const expected = {
+        propId: undefined,
+        deck: {
+          getLineColor: [234, 200, 100, 255],
+          getLineWidth: 2
+        }
+      };
+      const props = generateColorStyleProps({
+        geomType: 'LineString',
+        isGeography: true
+      });
+      expect(props).toEqual(expected);
+    });
+    it('returns line with numeric variable style props', () => {
+      const expected = {
+        propId: 'column',
+        colorStyle: expect.any(Function),
+        deck: {
+          getLineColor: expect.any(Function),
+          getLineWidth: 2
+        }
+      };
+      const props = generateColorStyleProps({
+        geomType: 'LineString',
+        variable: {
+          type: 'Number',
+          attribute: 'column',
+          quantiles: [{ '5': [10, 20, 30, 50, 100] }]
+        },
+        categoryId: 'demographics',
+        isGeography: false
+      });
+      expect(props).toEqual(expected);
+    });
+    it('returns line with string variable style props', () => {
+      const expected = {
+        propId: 'column',
+        colorStyle: expect.any(Function),
+        deck: {
+          getLineColor: expect.any(Function),
+          getLineWidth: 2
+        }
+      };
+      const props = generateColorStyleProps({
+        geomType: 'LineString',
+        variable: {
+          type: 'String',
+          attribute: 'column',
+          categories: [{ category: 'a' }]
+        },
+        categoryId: 'demographics',
+        isGeography: false
+      });
+      expect(props).toEqual(expected);
+    });
+    it('returns point geography style props', () => {
+      const expected = {
+        propId: undefined,
+        deck: {
+          getFillColor: [234, 200, 100, 255],
+          getLineColor: [44, 44, 44, 255],
+          getLineWidth: 1,
+          getRadius: 4
+        }
+      };
+      const props = generateColorStyleProps({
+        geomType: 'Point',
+        isGeography: true
+      });
+      expect(props).toEqual(expected);
+    });
+    it('returns point with numeric variable style props', () => {
+      const expected = {
+        propId: 'column',
+        colorStyle: expect.any(Function),
+        deck: {
+          getFillColor: expect.any(Function),
+          getLineColor: [100, 100, 100, 255],
+          getLineWidth: 1,
+          getRadius: 4
+        }
+      };
+      const props = generateColorStyleProps({
+        geomType: 'Point',
+        variable: {
+          type: 'Number',
+          attribute: 'column',
+          quantiles: [{ '5': [10, 20, 30, 50, 100] }]
+        },
+        categoryId: 'demographics',
+        isGeography: false
+      });
+      expect(props).toEqual(expected);
+    });
+    it('returns point with string variable style props', () => {
+      const expected = {
+        propId: 'column',
+        colorStyle: expect.any(Function),
+        deck: {
+          getFillColor: expect.any(Function),
+          getLineColor: [100, 100, 100, 255],
+          getLineWidth: 1,
+          getRadius: 4
+        }
+      };
+      const props = generateColorStyleProps({
+        geomType: 'Point',
+        variable: {
+          type: 'String',
+          attribute: 'column',
+          categories: [{ category: 'a' }]
+        },
+        categoryId: 'demographics',
+        isGeography: false
+      });
+      expect(props).toEqual(expected);
+    });
+  });
+  describe('resetColorStyleProps', () => {
+    it('returns undefined style props', () => {
+      const expected = {
+        propId: undefined,
+        colorStyle: undefined,
+        deck: {
+          getFillColor: undefined,
+          getLineColor: undefined,
+          getLineWidth: undefined,
+          getRadius: undefined
+        }
+      };
+      const props = resetColorStyleProps();
+      expect(props).toEqual(expected);
     });
   });
 });
diff --git a/lib/assets/test/spec/new-dashboard/unit/specs/components/Catalog/map-styles/utils.spec.js b/lib/assets/test/spec/new-dashboard/unit/specs/components/Catalog/map-styles/utils.spec.js
deleted file mode 100644
index 49d25e18c4a7..000000000000
--- a/lib/assets/test/spec/new-dashboard/unit/specs/components/Catalog/map-styles/utils.spec.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import * as Metrics from 'new-dashboard/core/metrics';
-import store from 'new-dashboard/store';
-
-describe('Internal Metrics Tracker', () => {
-  describe('sendMetric', () => {
-    let previousState;
-
-    beforeEach(() => {
-      global.fetch = jest.fn();
-      previousState = {
-        ...store.state,
-        config: { ...store.state.config },
-        user: { ...store.state.user }
-      };
-    });
-
-    afterEach(() => {
-      store.replaceState(previousState);
-    });
-
-    it('should return call fetch with proper parameters', () => {
-      const eventName = 'fake_event';
-      const eventProperties = { page: 'dashboard', user_id: 'fake_id' };
-      const baseURL = 'https://user.carto.com';
-      store.state.config.base_url = baseURL;
-      store.state.user = { id: 'fake_id' };
-
-      Metrics.sendMetric(eventName, eventProperties);
-
-      const requestURL = `${baseURL}/api/v3/metrics`;
-      const requestProperties = {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          name: eventName,
-          properties: eventProperties
-        })
-      };
-
-      expect(global.fetch).toHaveBeenCalledWith(
-        requestURL,
-        requestProperties
-      );
-    });
-  });
-});

From b00cb644034562ae3afb9bc7fe7d36f6c33ecd7f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Wed, 23 Dec 2020 12:20:59 +0100
Subject: [PATCH 54/56] Add catalog map attribution

---
 .../new-dashboard/components/Catalog/CatalogMap.vue           | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
index a168904a0e2f..53250051c1be 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
@@ -137,7 +137,7 @@ export default {
       container: 'map',
       style: BASEMAP.POSITRON,
       interactive: false,
-      attributionControl: false
+      attributionControl: true
     });
 
     deck = new Deck({
@@ -297,6 +297,8 @@ export default {
 .base-map {
   position: relative;
   height: 600px;
+  font-size: 12px;
+  line-height: 20px;
   font-family: $base__font-family;
 
   & > * {

From a2d90dc6e7fa92021d030eb39595a9efd6f497de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Wed, 23 Dec 2020 12:37:46 +0100
Subject: [PATCH 55/56] Move default info for catalog map to the top

---
 .../pages/Data/CatalogDatasetMap.vue            | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue
index 789f6dab3615..343981c85bc7 100644
--- a/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue
+++ b/lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetMap.vue
@@ -1,5 +1,11 @@
 <template>
   <div v-if="hasSample">
+    <div class="catalog-dataset-info" v-if="defaultSource">
+      <span class="is-small is-txtMainTextColor">
+        (*) Map preview not available: this one is for&nbsp;
+        <i class="is-semibold is-italic">{{ defaultSource }}</i>
+      </span>
+    </div>
     <div class="catalog-dataset-map">
       <div class="header">
         <h1 class="is-txtMainTextColor">{{ title }}</h1>
@@ -7,12 +13,6 @@
       </div>
       <CatalogMap class="base-map" :showInfo="infoVisible" :legend="true" :recenter="true" />
     </div>
-    <div class="footer" v-if="defaultSource">
-      <span class="is-small is-txtMainTextColor">
-        (*) Sample not available: this preview is for&nbsp;
-        <i class="is-semibold is-italic">{{ defaultSource }}</i>
-      </span>
-    </div>
   </div>
 </template>
 
@@ -82,10 +82,11 @@ export default {
   }
 }
 
-.footer {
+.catalog-dataset-info {
   display: flex;
   justify-content: flex-end;
-  margin: 0 12px 24px 12px;
+  margin: 28px 20px 20px;
+  font-family: $base__font-family;
 
   span {
     display: flex;

From 22a1d0298d6612637e31f6a38d1a34658db5254f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Arroyo=20Torrens?= <jarroyo@cartodb.com>
Date: Wed, 23 Dec 2020 12:39:00 +0100
Subject: [PATCH 56/56] Bump version

---
 package-lock.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 23728e694681..15fa7341d0e3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18680,9 +18680,9 @@
       }
     },
     "mapbox-gl": {
-      "version": "1.12.0",
-      "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-1.12.0.tgz",
-      "integrity": "sha512-B3URR4qY9R/Bx+DKqP8qmGCai8IOZYMSZF7ZSvcCZaYTaOYhQQi8ErTEDZtFMOR0ZPj7HFWOkkhl5SqvDfpJpA==",
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-1.13.0.tgz",
+      "integrity": "sha512-g8zlzuJxYJqbOPXT19/UBYpVrcefBQ06F/Cbj0fyEfFnFesDcU3cFTxd75/FZ6Upx2ZEjCsD61CHxrcxZidVpA==",
       "requires": {
         "@mapbox/geojson-rewind": "^0.5.0",
         "@mapbox/geojson-types": "^1.0.2",