fix: styling and display fixes after merge

eurodatacube · Sep 16, 2024 · 07420b5 · 07420b5
1 parent cc957c3
commit 07420b5
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 47 deletions.
diff --git a/app/src/components/AreaStatistics.vue b/app/src/components/AreaStatistics.vue
@@ -1,9 +1,8 @@
 <template>
 <v-card>
+  <v-card-title class="pa-2">Custom Area Statistics</v-card-title>
   <v-col>
     <v-row class="pt-4 area-statistics justify-space-between align-center mx-2">
-      <h3>Custom Area Statistics</h3>
-
       <v-btn
         @click="fetchData"
         color="primary"

diff --git a/app/src/components/DataPanel.vue b/app/src/components/DataPanel.vue
@@ -278,22 +278,6 @@
                 class="my-1"
               ><span><v-icon left>mdi-open-in-new</v-icon>{{externalData.label}}</span>
               </v-btn>
-
-              <v-card
-                class="ma-5"
-                v-if="indicatorSelected
-                  && indicatorSelected.indicator === 'IND2_1'"
-              >
-                <h1 class="ml-5">Species Info</h1>
-                <v-col>
-                  <SpeciesList v-if="selectedArea && sortedSpecies.length > 0"
-                    :species=sortedSpecies />
-                    <div v-else-if="selectedArea">No species in this area.</div>
-                  <div v-else>
-                    Select an area on the map using the rectangle or polygon buttons.
-                  </div>
-                </v-col>
-              </v-card>
             </v-col>
           </v-row>
         </v-col>
@@ -321,6 +305,21 @@
           </v-text-field>
         </v-card>
       </v-col>
+      <v-card
+        class="ma-5"
+        v-if="indicatorSelected
+          && indicatorSelected.indicator === 'IND2_1'"
+      >
+        <h1 class="ml-5">Species Info</h1>
+        <v-col>
+          <SpeciesList v-if="selectedArea && sortedSpecies.length > 0"
+            :species=sortedSpecies />
+            <div v-else-if="selectedArea">No species in this area.</div>
+          <div v-else>
+            Select an area on the map using the rectangle or polygon buttons.
+          </div>
+        </v-col>
+      </v-card>
       <GTIFProcessingButtons
       v-if="mergedConfigsData[0].processingEnabled">
       </GTIFProcessingButtons>
@@ -587,9 +586,7 @@ export default {
     },
     async refreshSpeciesInfo() {
       if (this.selectedArea
-        && this.indicatorSelected
-        && this.indicatorSelected.indicator === 'IND2_1_minesweeper'
-        && !this.mergedConfigsData[0].minesweeperOptions
+        && this.indicatorSelected?.indicator === 'IND2_1'
       ) {
         const bbox = [
           ...this.selectedArea.coordinates[0][0],

diff --git a/app/src/components/map/CustomWmsVariables.vue b/app/src/components/map/CustomWmsVariables.vue
@@ -1,11 +1,9 @@
 <template>
-  <v-container>
-    <v-row align="center">
-      <v-col cols="12" class="pa-0">
-        <v-subheader v-if="wmsVariables.title" class="pa-0">
+  <v-card>
+  <v-card-title class="pa-2"><span v-if="wmsVariables.title" class="pa-0">
           <b>{{ compareEnabledDisplay ? 'Right side' : '' }} {{ wmsVariables.title }}</b>
-        </v-subheader>
-      </v-col>
+        </span></v-card-title>
+    <v-row align="center" class="ma-0 pa-2">
       <v-row class="ma-0" cols="6" v-for="key in Object.keys(wmsVariables.variables)" :key="key">
         <v-col class="pa-0">
           <v-subheader class="pa-0">
@@ -36,7 +34,7 @@
       <v-icon color="black">mdi-compare</v-icon>
       {{ compareEnabledDisplay ? 'Stop': 'Start' }} model comparison
     </p>
-    <v-row align="center" v-if="compareEnabledDisplay">
+    <v-row class="ma-0 pa-2" align="center" v-if="compareEnabledDisplay">
       <v-col cols="12" class="pa-0">
         <v-subheader v-if="wmsVariables.title" class="pa-0">
           <b>Left side {{ wmsVariables.title }}</b>
@@ -65,7 +63,7 @@
         </v-col>
       </v-row>
     </v-row>
-  </v-container>
+  </v-card>
 </template>
 
 <script>

diff --git a/app/src/components/map/FeatureQueryParams.vue b/app/src/components/map/FeatureQueryParams.vue
@@ -1,29 +1,27 @@
 <template>
-  <v-container>
-    <v-row align="center">
-      <v-col cols="12" class="pa-0">
-        <h3 v-if="featureQueryParamsData.title">{{ featureQueryParamsData.title }}</h3>
-        <p>
-          Toggle any combination of OpenStreetMap features
-          to check how different areas can be affected.
-          <br>Note: Availability of OSM data for crops
-          differs for different parts of the world.
-        </p>
-    </v-col>
-    <v-row class="ma-0" cols="6"
+  <v-card>
+    <v-card-title class="pa-2">{{ featureQueryParamsData.title }}</v-card-title>
+    <p class="pa-2 ma-0">
+        Toggle any combination of OpenStreetMap features
+        to check how different areas can be affected.
+        <br>Note: Availability of OSM data for crops
+        differs for different parts of the world.
+      </p>
+    <v-row class="ma-0 pa-2">
+    <v-col class="ma-0 pa-0" cols="6"
         v-for="configItem in featureQueryParamsData.items"
         :key="getConfigItemLabel(configItem)">
-        <v-checkbox class="ma-0"
+        <v-checkbox class="ma-0 pa-0"
           v-bind:false-value="false"
           v-bind:true-value="true"
           v-model="configItem.selected"
           :label="getConfigItemLabel(configItem)"
           :value="configItem.value"
           @change="(evt) => updateMapBool(evt, configItem.key, configItem.value)"
         ></v-checkbox>
-      </v-row>
+      </v-col>
     </v-row>
-  </v-container>
+  </v-card>
 </template>
 
 <script>

diff --git a/app/src/config/esa.js b/app/src/config/esa.js
@@ -436,5 +436,5 @@ export const globalIndicators = [
       },
     },
   },
-  ...createIDEASDatasetConfigs(['IDEAS1_hopi_minesweeper', 'IDEAS1_hopi', 'IDEAS2_wildlife_minesweeper', 'IDEAS2_wildlife', 'IDEAS3_locust', 'IDEAS4_flood_risk']),
+  ...createIDEASDatasetConfigs(['IND1_1_minesweeper', 'IND1_1', 'IND2_1_minesweeper', 'IND2_1', 'IND3_1', 'IND4_1']),
 ];
diff --git a/app/src/config/ideas_config.js b/app/src/config/ideas_config.js
@@ -66,7 +66,7 @@ export const defaultLayersDisplayIdeasSh = {
   projection: 'EPSG:3857',
 };
 
-export const createIDEASDatasetConfigs = (indicatorCodes) => [
+const IDEASConfigs = [
   {
     properties: {
       indicatorObject: {
@@ -874,4 +874,8 @@ export const createIDEASDatasetConfigs = (indicatorCodes) => [
       },
     },
   },
-].filter((item) => (indicatorCodes.includes(item.properties.indicatorObject.indicator)));
+];
+export const createIDEASDatasetConfigs = (indicatorCodes) => {
+  const configsToReturn = IDEASConfigs.filter((item) => (indicatorCodes.includes(item.properties.indicatorObject.indicator)));
+  return configsToReturn;
+};