fix: review ideas merge into staging

Author: lubojr

app/src/components/DataPanel.vue

@@ -25,7 +25,7 @@
       class="pt-0 pb-0"
       id="data-panel"
       :class="$vuetify.breakpoint.xsOnly ? 'mx-0' : ''">
-      <v-row v-if="indicatorObject" class="d-flex ma-0">
+      <div v-if="indicatorObject" class="d-flex ma-0">
         <v-col
           :cols="12"
           class="pa-0"
@@ -50,20 +50,19 @@
             <SelectionInfoBar class="pb-2"
             :selectableLayerConfigs="selectableLayerConfigs"/>
         </template>
-          <div v-if="showCustomAreaCard &&  (mergedConfigsData[0].customAreaIndicator &&
+        <div v-if="showCustomAreaCard" ref="chart-div">
+          <div v-if="(mergedConfigsData[0].customAreaIndicator &&
             !hasSelectionEnabled) && !customAreaIndicator" class="justify-center align-center">
               <p class="justify-self-start px-2 py-0">
                 <v-icon color="black">mdi-shape-polygon-plus</v-icon>
                 Draw a polygon in order to start analysis
               </p>
           </div>
-          <div v-else-if="showCustomAreaCard"
+          <div v-else-if="showingChart"
             class="pb-2 col"
           >
             <v-card
-              class="pb-2 col chartareapanel"
-              ref="mapPanel"
-            >
+              class="pb-2 col chartareapanel">
               <v-card-title
                 v-if="customAreaIndicator"
                 style="padding-top: 10px; padding-bottom: 0px;">
@@ -93,114 +92,52 @@
             color="secondary"
             ></v-progress-circular>
           </div>
-          <v-row
-            v-if="(customAreaIndicator && !customAreaIndicator.isEmpty)
-              && (!showMap || !customAreaIndicator.isEmpty)
-              && $route.name !== 'demo'"
-            class="mt-6"
-          >
-            <v-col cols="12" sm="5" ></v-col>
-            <v-col
-              cols="12"
-              sm="7"
-              ref="customButtonRow"
-              style="margin-top: 10px;"
-            >
-              <div :class="$vuetify.breakpoint.xsOnly ? 'text-center' : 'text-right'">
-                <v-btn
-                  color="primary"
-                  text
-                  small
-                  :href="dataCustomHrefCSV"
-                  :download="customAOIDownloadFilename"
-                  target="_blank"
-                  v-if="
-                    customAreaIndicator
-                  "
-                >
-                  <v-icon left>mdi-download</v-icon>
-                  download csv
-                </v-btn>
-                <add-to-dashboard-button
-                  v-if="customAreaIndicator
-                    && (appConfig.id !== 'gtif' || $route.query.customDashboard)"
-                  :indicatorObject="customAreaIndicator"
-                  :featureObject="featureObject"
-                  >
-                </add-to-dashboard-button>
-              </div>
-            </v-col>
-          </v-row>
-          <v-row
+          <div
             v-else-if="showCustomAreaCard"
-            :class="customAreaIndicator ? 'mt-6' : 'mt-0'"
+            class="ma-0 pa-2"
           >
-            <v-col
-              cols="12"
-              sm="5"
-              class="d-flex align-center"
-              :class="$vuetify.breakpoint.xsOnly ? 'justify-center' : 'justify-space-between'"
-            >
-              <small v-if="indicatorObject && indicatorObject.updateFrequency">
-                <span
-                  v-if="indicatorObject.updateFrequency === 'Retired'"
-                >This indicator is no longer updated</span>
-                <span
-                  v-else-if="indicatorObject.updateFrequency === 'EndSeason'"
-                >Due to end of season, this indicator is no longer updated</span>
-                <span v-else>This data is updated: {{ indicatorObject.updateFrequency }}</span>
-              </small>
-              <small v-else> </small>
-            </v-col>
             <v-col
               v-if="$route.name !== 'demo'"
               cols="12"
-              sm="7"
-              ref="buttonRow"
             >
-              <div :class="$vuetify.breakpoint.xsOnly ? 'text-center' : 'text-right'">
-                <v-btn
-                  color="primary"
-                  text
-                  small
-                  :href="dataHrefCSV"
-                  :download="downloadFileName"
-                  target="_blank"
-                  v-if="dataObject && dataObject.time
-                    && !showMap"
-                >
-                  <v-icon left>mdi-download</v-icon>
-                  download csv
-                </v-btn>
-                <iframe-button
-                  :indicatorObject="indicatorObject"
-                  :featureObject="featureObject"
-                  v-if="!customAreaIndicator"
-                />
-                <v-btn
-                  color="primary"
-                  text
-                  small
-                  style="margin-top:50px;"
-                  :href="dataCustomHrefCSV"
-                  :download="customAOIDownloadFilename"
-                  target="_blank"
-                  v-if="
-                    customAreaIndicator &&
-                    !showMap
-                  "
-                >
-                  <v-icon left>mdi-download</v-icon>
-                  download csv
-                </v-btn>
-                <add-to-dashboard-button
-                  v-else-if="!showMap && (appConfig.id !== 'gtif' || $route.query.customDashboard)"
-                  :indicatorObject="indicatorObject"
-                  :featureObject="featureObject"
-                />
-              </div>
+              <v-btn
+                color="primary"
+                text
+                small
+                :href="dataHrefCSV"
+                :download="downloadFileName"
+                target="_blank"
+                v-if="dataObject && dataObject.time
+                  && !showMap"
+              >
+                <v-icon left>mdi-download</v-icon>
+                download csv
+              </v-btn>
+              <iframe-button
+                :indicatorObject="indicatorObject"
+                :featureObject="featureObject"
+                v-if="indicatorObject && featureObject && !customAreaIndicator"
+              />
+              <v-btn
+                color="primary"
+                text
+                small
+                :href="dataCustomHrefCSV"
+                :download="customAOIDownloadFilename"
+                target="_blank"
+                v-if="customAreaIndicator"
+              >
+                <v-icon left>mdi-download</v-icon>
+                download csv area
+              </v-btn>
+              <add-to-dashboard-button
+                v-if="(indicatorObject && featureObject && !customAreaIndicator) && (appConfig.id !== 'gtif' || $route.query.customDashboard)"
+                :indicatorObject="indicatorObject"
+                :featureObject="featureObject"
+              />
             </v-col>
-          </v-row>
+          </div>
+        </div>
         <data-mockup-view v-if="appConfig.id === 'gtif'"
           :indicatorObject="indicatorObject"
           :adminLayer="$store.state.features.adminBorderLayerSelected"
@@ -247,33 +184,7 @@
           >
           </FeatureQueryParams>
         </v-col>
-        <v-col
-          :cols="12"
-          class="py-0"
-          :class="$vuetify.breakpoint.smAndUp ? 'scrollContainer' : ''"
-          v-if="indicatorObject && externalData"
-        >
-          <v-row
-            class="mt-0 fill-height pb-2"
-          >
-            <v-col
-              cols="12"
-              class="pb-0"
-            >
-              <v-btn
-                :href= "externalData.url"
-                target="_blank"
-                color="primary"
-                ref="externalDataBtn"
-                large
-                block
-                class="my-1"
-              ><span><v-icon left>mdi-open-in-new</v-icon>{{externalData.label}}</span>
-              </v-btn>
-            </v-col>
-          </v-row>
-        </v-col>
-      </v-row>
+      </div>
       <div v-if="indicatorObject.features?.length && !featureObject">
         <p class="pa-2">
           <v-icon color="black">mdi-chart-areaspline</v-icon>
@@ -387,7 +298,7 @@ export default {
       'customAreaIndicator',
     ]),
     showingChart() {
-      return this.customAreaIndicator || this.customAreaIndicator || this.dataObject?.time;
+      return this.customAreaIndicator || this.dataObject?.time;
     },
     indicatorObject() {
       return this.$store.state.indicators.selectedIndicator;
@@ -414,7 +325,7 @@ export default {
     dataHrefCSV() {
       let dataHref = 'data:text/csv;charset=utf-8,';
       const exportKeys = [
-        'time', 'aoi', 'measurement',
+        'time', 'siteName', 'measurement',
         'indicatorValue', 'referenceTime', 'eoSensor', 'colorCode', 'inputData',
       ];
       const header = `${exportKeys.join()}\n`;
@@ -423,12 +334,7 @@ export default {
         let row = '';
         for (let kk = 0; kk < exportKeys.length; kk++) {
           const cKey = exportKeys[kk];
-          let txtVal = '';
-          if (cKey === 'aoi') {
-            txtVal = `"${this.dataObject[cKey]}",`;
-          } else {
-            txtVal = `"${this.dataObject[cKey][i]}",`;
-          }
+          const txtVal = `"${this.dataObject[cKey][i]}",`;
           row += txtVal;
         }
         row = `${row.slice(0, -1)}\n`;
@@ -447,7 +353,7 @@ export default {
       const wkt = new Wkt();
       const header = `${exportKeys.join()}\n`;
       let csv = header;
-      if (this.customAreaIndicator.time) {
+      if (this.customAreaIndicator?.time) {
         for (let i = 0; i < this.customAreaIndicator.time.length; i++) {
           let row = '';
           for (let kk = 0; kk < exportKeys.length; kk++) {
@@ -477,7 +383,7 @@ export default {
       const currDate = DateTime.utc().toFormat('yyyy-LL-dd');
       const currInd = this.indicatorObject;
       const city = currInd.city || currInd.country || 'global';
-      return `${city}_${currDate}_${currInd.aoiID}-${currInd.indicator}.csv`;
+      return `${city}_${currDate}_${currInd.siteName}-${currInd.indicator}.csv`;
     },
     customAOIDownloadFilename() {
       const currDate = DateTime.utc().toFormat('yyyy-LL-dd');
@@ -501,35 +407,6 @@ export default {
       // customarea seems to be handled differently
       return !this.indicatorObject.features?.length;
     },
-    externalData() {
-      const dataFromDefinition = this.indicatorObject.externalData;
-      const dataFromIndicator = this.dataObject ? this.dataObject.externalData : null;
-      if (dataFromDefinition) {
-        return dataFromDefinition;
-      }
-      if (dataFromIndicator) {
-        return dataFromIndicator;
-      }
-      return null;
-    },
-    wrapperHeight() {
-      if (this.mounted && this.$refs.wrapper != null) {
-        return this.$refs.wrapper.clientHeight;
-      }
-      return 0;
-    },
-    buttonRowHeight() {
-      if (this.mounted && this.$refs.buttonRow != null) {
-        return this.$refs.buttonRow.clientHeight;
-      }
-      return 0;
-    },
-    mapPanelHeight() {
-      if (this.mounted && this.$refs.mapPanel != null) {
-        return this.$refs.mapPanel.$el.clientHeight;
-      }
-      return 0;
-    },
     mergedConfigsData() {
       if (!this.indicatorObject) {
         return [];
@@ -592,16 +469,6 @@ export default {
     },
   },
   watch: {
-    showingChart() {
-      if (this.showingChart) {
-        // we only want to open if it is closed
-        if (!this.$parent.$parent.$el.classList.contains('v-expansion-panel--active')) {
-          this.$parent.$parent.$parent.$refs.header.$emit('click', {
-            currentTarget: this.$parent.$parent.$parent.$refs.header.$el,
-          });
-        }
-      }
-    },
     async selectedArea(area) {
       this.showRegenerateButton = this.customAreaIndicator && !!area;
       this.refreshSpeciesInfo();

app/src/views/EmbedIframe.vue

@@ -55,16 +55,6 @@
           class="pa-5 fill-height"
         />
       </div>
-      <v-card-text v-if="selectedIndicator && selectedIndicator.updateFrequency"
-        class="flex-grow-0">
-        <small>
-          <span v-if="selectedIndicator.updateFrequency
-            === 'Retired'">This indicator is no longer updated</span>
-          <span v-else-if="selectedIndicator.updateFrequency
-            === 'EndSeason'">Due to end of season, this indicator is no longer updated</span>
-          <span v-else>This data is updated: {{ selectedIndicator.updateFrequency }}</span>
-        </small>
-      </v-card-text>
       <v-card-actions
         v-if="!enableScrollyMode"
         :style="`background: ${$vuetify.theme.themes.light.primary}`"