Cloud native -- FRONTEND custom branch --

.nvmrc

@@ -1 +1 @@
-10.15.1
+12.22.12

NEWS.md

@@ -5,6 +5,7 @@ Development
 - None yet
 
 ### Features
+* Display GeoParquet link in Catalog [16453](https://github.com/CartoDB/cartodb/pull/16453)
 * Display notifications about the new CARTO platform release [16352](https://github.com/CartoDB/cartodb/pull/16352)
 * Upgrade to deck.gl 8.5.6 [16338](https://github.com/CartoDB/cartodb/pull/16338)
 * Update DO Catalog dependencies and some changes to use bundle on CARTO Workspace [#16325](https://github.com/CartoDB/cartodb/pull/16325)

lib/assets/javascripts/do-catalog/App.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="do-catalog">
     <router-view></router-view>
+    <div id="tooltip-portal"></div>
   </div>
 </template>
 

lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue

@@ -32,7 +32,7 @@
 import { mapState } from 'vuex';
 import mapboxgl from 'mapbox-gl';
 import { Deck } from '@deck.gl/core';
-import { CartoBQTilerLayer, BASEMAP } from '@deck.gl/carto';
+import { VectorTileLayer, vectorTilesetSource, BASEMAP } from '@deck.gl/carto';
 
 import { generateColorStyleProps, resetColorStyleProps } from './map-styles/colorStyles';
 import { getQuantiles, formatNumber, capitalize, compare } from './map-styles/utils';
@@ -170,6 +170,13 @@ export default {
       getTooltip: this.getTooltip
     });
 
+    this.tilesetSource = vectorTilesetSource({
+      accessToken: window.accessToken,
+      ...(window.apiBaseUrl && { apiBaseUrl: window.apiBaseUrl }),
+      connectionName: 'carto_dw',
+      tableName: this.tilesetSampleId
+    });
+
     this.renderLayer();
   },
   methods: {
@@ -201,13 +208,8 @@ export default {
     },
     renderLayer () {
       const layers = [
-        new CartoBQTilerLayer({
-          data: this.tilesetSampleId,
-          credentials: {
-            username: this.username || 'public',
-            apiKey: 'default_public',
-            ...(this.mapUrl && { mapsUrl: this.mapUrl })
-          },
+        new VectorTileLayer({
+          data: this.tilesetSource,
           ...styleProps.deck,
           lineWidthUnits: 'pixels',
           pointRadiusUnits: 'pixels',
@@ -226,7 +228,6 @@ export default {
             this.setGeomType(tilestats);
             this.setVariable(tilestats);
             this.setStyleProps();
-            this.renderLayer();
             this.showMap = true;
           }
         })

lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetData.vue

@@ -98,37 +98,60 @@
 
         <ul class="u-mt--24 text f12 is-small is-txtMainTextColor">
           <li class="grid title is-txtMidGrey header-row">
-            <div class="grid-cell grid-cell--col4">Column Name</div>
+            <div class="grid-cell" :class="cssColumnName" >Column Name</div>
             <div
-              class="grid-cell grid-cell--col7 grid-cell--col6--tablet grid-cell--col5--mobile"
+              class="grid-cell"
+              :class="cssColumnDescription"
             >
               Description
             </div>
             <div
-              class="grid-cell grid-cell--col1 grid-cell--col2--tablet grid-cell--col3--mobile"
+              class="grid-cell"
+              :class="cssColumnType"
             >
               Type
             </div>
+            <div
+              class="grid-cell grid-cell--col2 grid-cell--col3--tablet grid-cell--col3--mobile"
+              v-if="showId"
+            >
+              ID
+            </div>
           </li>
 
           <li
             class="grid info-row"
             v-for="variable in variables"
             :key="variable.slug"
           >
-            <div class="grid-cell grid-cell--col4 is-semibold name-cell">
+            <div :class="cssColumnName" class="grid-cell is-semibold name-cell">
               {{ variable.column_name }}
             </div>
             <div
-              class="grid-cell grid-cell--col7 grid-cell--col6--tablet grid-cell--col5--mobile"
+              class="grid-cell"
+              :class="cssColumnDescription"
             >
               {{ variable.description }}
             </div>
             <div
-              class="grid-cell grid-cell--col1 grid-cell--col2--tablet grid-cell--col3--mobile"
+              class="grid-cell"
+              :class="cssColumnType"
             >
               {{ variable.db_type }}
             </div>
+            <div
+              class="grid-cell grid-cell--col2 grid-cell--col3--tablet grid-cell--col3--mobile"
+              v-if="showId"
+            >
+              <Tooltip :text="copyMessage" position="bottom-left" class="text is-small u-flex u-flex__align-center">
+                <div class="u-flex u-alignCenter copy" @click="() => copyString(variable.slug)" @mouseleave="resetCopyStatus">
+                  <svg class="u-mr--8" width="20" height="20" viewBox="0 0 20 20" style="flex-shrink: 0">
+                    <path xmlns="http://www.w3.org/2000/svg" d="M15.833 2.5c.869 0 1.588.673 1.66 1.523l.007.144v11.666c0 .869-.673 1.588-1.523 1.66l-.144.007H4.167a1.672 1.672 0 0 1-1.66-1.523l-.007-.144V4.167c0-.869.673-1.588 1.523-1.66l.144-.007h11.666zm0 1.667H4.167v11.666h11.666V4.167zM7.917 7.5v5h-1.25v-5h1.25zm4.583 0c.708 0 1.25.542 1.25 1.25v2.5c0 .708-.542 1.25-1.25 1.25H9.583v-5zm0 1.25h-1.667v2.5H12.5v-2.5z" fill="#2C3032" fill-rule="evenodd" fill-opacity=".6"/>
+                  </svg>
+                  {{ variable.slug }}
+                </div>
+              </Tooltip>
+            </div>
           </li>
         </ul>
       </div>
@@ -139,16 +162,19 @@
 <script>
 import { mapState } from 'vuex';
 import NotAvailable from 'new-dashboard/components/Catalog/NotAvailable.vue';
+import Tooltip from 'new-dashboard/components/Tooltip/Tooltip';
 import { formURL } from 'new-dashboard/utils/catalog/form-url';
 import { sendCustomDimensions } from 'new-dashboard/utils/catalog/custom-dimensions-ga';
 
 export default {
   name: 'CatalogDatasetData',
   components: {
-    NotAvailable
+    NotAvailable,
+    Tooltip
   },
   data () {
     return {
+      isCopied: false,
       tooltip: {
         visible: false,
         isFirst: false,
@@ -180,6 +206,9 @@ export default {
       variables: state => state.catalog.variables,
       isFetching: state => state.catalog.isFetching
     }),
+    copyMessage () {
+      return this.isCopied ? 'Copied!' : 'Copy ID';
+    },
     tableKey () {
       if (this.dataset && this.dataset.summary_json) {
         if (this.dataset.summary_json.ordered_glimpses) {
@@ -214,9 +243,34 @@ export default {
     },
     isGeography () {
       return this.$route.params.entity_type === 'geography';
+    },
+    showId () {
+      return this.$route.query.showId;
+    },
+    cssColumnName () {
+      return {'grid-cell--col3': this.showId, 'grid-cell--col4': !this.showId};
+    },
+    cssColumnDescription () {
+      return {
+        'grid-cell--col6 grid-cell--col4--tablet grid-cell--col4--mobile': this.showId,
+        'grid-cell--col7 grid-cell--col6--tablet grid-cell--col5--mobile': !this.showId
+      };
+    },
+    cssColumnType () {
+      return {
+        'grid-cell--col1 grid-cell--col2--tablet grid-cell--col2--mobile': this.showId,
+        'grid-cell--col1 grid-cell--col2--tablet grid-cell--col3--mobile': !this.showId
+      };
     }
   },
   methods: {
+    async copyString (value) {
+      await navigator.clipboard.writeText(value);
+      this.isCopied = true;
+    },
+    resetCopyStatus () {
+      this.isCopied = false;
+    },
     findVariableInfo (variableName) {
       return this.variables.find(e => e.column_name === variableName);
     },
@@ -311,14 +365,6 @@ a {
   border-bottom: 2px solid $blue--100;
 }
 
-.tooltip-container {
-  position: absolute;
-  z-index: 2;
-  bottom: 100%;
-  margin-left: 32px;
-  padding-bottom: 8px;
-}
-
 .table-wrapper {
   position: relative;
 }
@@ -376,6 +422,13 @@ a {
   }
 }
 
+.copy {
+  &:hover {
+    cursor: pointer;
+    text-decoration: underline;
+  }
+}
+
 @media (max-width: $layout-mobile) {
   .title-container {
     flex-wrap: wrap;

lib/assets/javascripts/new-dashboard/pages/Data/CatalogDatasetSummary.vue

@@ -101,6 +101,17 @@
             </router-link>
           </p>
         </li>
+        <li
+          class="u-mb--32 u-mb--12--tablet"
+          v-if="hasGeoparquetAvailable"
+        >
+          <h4 class="text is-small is-txtSoftGrey u-mb--10">
+            GeoParquet
+          </h4>
+          <p class="text is-caption">
+            <a class="underline" :href="geoparquetUrl" target="_blank">Download</a>
+          </p>
+        </li>
       </ul>
     </div>
   </div>
@@ -112,13 +123,20 @@ 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 { checkGeoparquetBucket } from 'new-dashboard/utils/catalog/geoparquet';
 import CatalogMapPreview from 'new-dashboard/components/Catalog/CatalogMapPreview';
 
 export default {
   name: 'CatalogDatasetSummary',
   components: {
     CatalogMapPreview
   },
+  data () {
+    return {
+      hasGeoparquetAvailable: false,
+      geoparquetUrl: undefined
+    };
+  },
   watch: {
     dataset: {
       handler (value) {
@@ -169,10 +187,16 @@ export default {
         id: this.$route.params.entity_id,
         type: this.$route.params.entity_type
       });
+    },
+    async checkIfGeoparquetBucketExists () {
+      const { ok, url } = await checkGeoparquetBucket(this.$route.params.entity_id);
+      this.hasGeoparquetAvailable = ok;
+      this.geoparquetUrl = url;
     }
   },
   mounted () {
     this.fetchKeyVariables();
+    this.checkIfGeoparquetBucketExists();
   }
 };
 </script>

lib/assets/javascripts/new-dashboard/utils/catalog/geoparquet.js

@@ -0,0 +1,9 @@
+export async function checkGeoparquetBucket (dataset) {
+  try {
+    const url = `https://storage.googleapis.com/geoparquet/carto/${dataset}.parquet`;
+    const response = await fetch(url, { method: 'HEAD' });
+    return { ok: response.ok, url };
+  } catch (e) {
+    return { ok: false };
+  }
+}