fix: styling issues, separate into catalogs

Author: lubojr

app/src/components/AreaStatistics.vue

@@ -2,7 +2,7 @@
 <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">
+    <v-row class="area-statistics align-center ma-2">
       <v-btn
         @click="fetchData"
         color="primary"
@@ -11,19 +11,17 @@
         small
       >Generate</v-btn>
     </v-row>
-    <v-row>
-      <div class="pa-2">
-        Select storm surge, years, or scenarios and additional
-        parameters from the drop-down menu to
-        generate charts representing predictions
-        on population, build-up areas and agriculture areas.
-      </div>
-    </v-row>
+    <div class="pa-0">
+      Select storm surge, years, or scenarios and additional
+      parameters from the drop-down menu to
+      generate charts representing predictions
+      on population, build-up areas and agriculture areas.
+    </div>
     <div
       class="d-flex justify-space-around"
       :class="{'flex-column': $vuetify.breakpoint.mdAndUp}"
     >
-      <v-radio-group v-model="selectedIndex">
+      <v-radio-group v-model="selectedIndex" hide-details>
         <v-col
           class="d-flex justify-space-between ml-1 mt-2"
           :class="{
@@ -415,4 +413,10 @@ export default {
 .charts canvas {
   max-width: 100%;
 }
+.v-label {
+  font-size: 13px;
+}
+.v-input--selection-controls {
+  margin-top: 0;
+}
 </style>

app/src/components/DataPanel.vue

@@ -213,7 +213,7 @@
         v-if="indicatorSelected
           && indicatorSelected.indicator === 'IND2_1'"
       >
-        <h1 class="ml-5">Species Info</h1>
+        <v-card-title class="pa-2">Species Info</v-card-title>
         <v-col>
           <SpeciesList v-if="selectedArea && sortedSpecies.length > 0"
             :species=sortedSpecies />

app/src/components/map/CustomWmsVariables.vue

@@ -28,7 +28,7 @@
       </v-row>
     </v-row>
     <p
-      class="compareEnable my-4"
+      class="compareEnable mb-2"
       @click="toggleCompare"
     >
       <v-icon color="black">mdi-compare</v-icon>

app/src/components/map/Map.vue

@@ -454,6 +454,10 @@ export default {
       };
     },
     displayTimeSelection() {
+      if (this.indicator?.indicator === 'IND4_1') {
+        // custom overload
+        return false;
+      }
       if (this.indicator?.indicator === 'E13d' && this.featureData) {
         // custom overload for extra hassle with replaceMapTimes from config
         return true;

app/src/config/esa.js

@@ -436,5 +436,5 @@ export const globalIndicators = [
       },
     },
   },
-  ...createIDEASDatasetConfigs(['IND1_1_minesweeper', 'IND1_1', 'IND2_1_minesweeper', 'IND2_1', 'IND3_1', 'IND4_1']),
+  ...createIDEASDatasetConfigs(['IND2_1_minesweeper', 'IND2_1', 'IND1_1_minesweeper', 'IND1_1']),
 ];

app/src/config/gtif.js

@@ -6,6 +6,7 @@ import {
 import { DateTime } from 'luxon';
 import colormap from 'colormap';
 import availableDates from '@/config/gtif_dates.json';
+import { createIDEASDatasetConfigs } from '@/config/ideas_config';
 import {
   Fill, Stroke, Style, Circle,
 } from 'ol/style';
@@ -2534,4 +2535,5 @@ export const globalIndicators = [
       },
     },
   },
+  ...createIDEASDatasetConfigs(['IND1_1']),
 ];

app/src/config/trilateral.js

@@ -10,6 +10,7 @@ import shTimeFunction from '@/shTimeFunction';
 import {
   baseLayers, overlayLayers, trucksAreaIndicator, trucksFeatures,
 } from '@/config/layers';
+import { createIDEASDatasetConfigs } from '@/config/ideas_config';
 import {
   nasaStatisticsConfig,
 } from '@/helpers/customAreaObjects';
@@ -918,4 +919,5 @@ export const globalIndicators = [
       },
     },
   },
+  ...createIDEASDatasetConfigs(['IND1_1', 'IND3_1', 'IND4_1']),
 ];