Merge pull request #2383 from eurodatacube/ui-panels-cat

GTIF minor UI fixes
eurodatacube · Nov 13, 2023 · fbeef1c · fbeef1c
2 parents 7c509ab + e3765cc
commit fbeef1c
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 60 deletions.
diff --git a/app/public/data/gtif/components/bottom.json b/app/public/data/gtif/components/bottom.json
@@ -1,5 +1,5 @@
 {
-  "template": "<section><div class=\"full-width\" style=\"width: 100%; background: #FFF; padding-top: 50px; flex-direction: column; display: flex; justify-content: center; align-items: center;\">\n    <h1 style=\"font-family: 'NotesESA' !important; color: #052e42 !important; margin-bottom: 0;\">GREEN TRANSITION DOMAINS</h1>\n    <section class=\"gtif-nav\" style=\"width: 100%; max-width: 1500px; height: 100%; flex-direction: row; display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap;\">\n        <div v-if=\"routeDoesNotInclude('energy-transition')\" class=\"icon-col\">\n            <img\n                @click=\"exploreTools('energy-transition')\"\n                src=\"https://github.com/eurodatacube/eodash/raw/gtif_staging/app/public/img/gtif/icons/energy-transition-trimmy.png\"\n                alt=\"Energy Transition\"\n            />\n            <h3>Energy Transition</h3>\n        </div>\n        <div v-if=\"routeDoesNotInclude('mobility-transition')\" class=\"icon-col\">\n            <img\n                @click=\"exploreTools('mobility-transition')\"\n                src=\"https://github.com/eurodatacube/eodash/raw/gtif_staging/app/public/img/gtif/icons/mobility-transition-trimmy.png\"\n                alt=\"Mobility Transition\"\n            />\n            <h3>Mobility Transition</h3>\n        </div>\n        <div v-if=\"routeDoesNotInclude('sustainable-cities')\" class=\"icon-col\">\n            <img\n                @click=\"exploreTools('sustainable-cities')\"\n                src=\"https://github.com/eurodatacube/eodash/raw/gtif_staging/app/public/img/gtif/icons/sustainable-transition-trimmy.png\"\n                alt=\"Sustainable Transition\"\n            />\n            <h3>Sustainable Cities</h3>\n        </div>\n        <div v-if=\"routeDoesNotInclude('carbon-accounting')\" class=\"icon-col\">\n            <img\n                @click=\"exploreTools('carbon-accounting')\"\n                src=\"https://github.com/eurodatacube/eodash/raw/gtif_staging/app/public/img/gtif/icons/carbon-finance-trimmy.png\"\n                alt=\"Carbon Accounting\"\n            />\n            <h3>Carbon Accounting</h3>\n        </div>\n        <div v-if=\"routeDoesNotInclude('eo-adaptation-services')\" class=\"icon-col\">\n            <img\n                @click=\"exploreTools('eo-adaptation-services')\"\n                src=\"https://github.com/eurodatacube/eodash/raw/gtif_staging/app/public/img/gtif/icons/eo-adaptation-trimmy.png\"\n                alt=\"EO Adaptation\"\n            />\n            <h3>EO Adaptation Services</h3>\n        </div>\n    </section>\n</div></section>",
+  "template": "<section><div class=\"full-width\" style=\"width: 100%; background: #FFF; padding-top: 50px; flex-direction: column; display: flex; justify-content: center; align-items: center;\">\n    <h1 style=\"font-family: 'NotesESA' !important; color: #052e42 !important; margin-bottom: 0;\">GREEN TRANSITION DOMAINS</h1>\n    <section class=\"gtif-nav\" style=\"width: 100%; max-width: 1500px; height: 100%; flex-direction: row; display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap;\">\n        <div v-if=\"routeDoesNotInclude('energy-transition')\" class=\"icon-col\">\n            <img\n                @click=\"exploreTools('energy-transition')\"\n                src=\"https://gtif.esa.int/img/gtif/icons/energy-transition-trimmy.png\"\n                alt=\"Energy Transition\"\n            />\n            <h3>Energy Transition</h3>\n        </div>\n        <div v-if=\"routeDoesNotInclude('mobility-transition')\" class=\"icon-col\">\n            <img\n                @click=\"exploreTools('mobility-transition')\"\n                src=\"https://gtif.esa.int/img/gtif/icons/mobility-transition-trimmy.png\"\n                alt=\"Mobility Transition\"\n            />\n            <h3>Mobility Transition</h3>\n        </div>\n        <div v-if=\"routeDoesNotInclude('sustainable-cities')\" class=\"icon-col\">\n            <img\n                @click=\"exploreTools('sustainable-cities')\"\n                src=\"https://gtif.esa.int/img/gtif/icons/sustainable-transition-trimmy.png\"\n                alt=\"Sustainable Transition\"\n            />\n            <h3>Sustainable Cities</h3>\n        </div>\n        <div v-if=\"routeDoesNotInclude('carbon-accounting')\" class=\"icon-col\">\n            <img\n                @click=\"exploreTools('carbon-accounting')\"\n                src=\"https://gtif.esa.int/img/gtif/icons/carbon-finance-trimmy.png\"\n                alt=\"Carbon Accounting\"\n            />\n            <h3>Carbon Accounting</h3>\n        </div>\n        <div v-if=\"routeDoesNotInclude('eo-adaptation-services')\" class=\"icon-col\">\n            <img\n                @click=\"exploreTools('eo-adaptation-services')\"\n                src=\"https://gtif.esa.int/img/gtif/icons/eo-adaptation-trimmy.png\"\n                alt=\"EO Adaptation\"\n            />\n            <h3>EO Adaptation Services</h3>\n        </div>\n    </section>\n</div></section>",
   "style":"\n        .gtif-nav img {\n            width: 120px;\n            height: 120px;\n            transition: transform 0.2s ease-in-out;\n            cursor: pointer;\n        }\n        \n        .gtif-nav img:hover {\n            transform: scale(1.2);\n        }\n        \n        .icon-col {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n        margin-top: 24px;}\n        \n        .gtif-nav h1 {\n            text-transform: uppercase;\n            font-size: 36px;\n            font-weight: 400;\n            margin-bottom: 60px;\n            color: #052e42 !important;\n            text-align: center;\n        }\n        \n        .icon-col h3 {\n            text-transform: uppercase;\n            margin-top: 30px;\n            max-width: 150px;\n            font-size: 20px;\n            font-weight: 400;\n            color: #052e42 !important;\n            text-align: center;\n        }\n    ",
   "data":"function () { \n        return {\n            checked: false,\n            title: 'Check me',\n        }\n    }",
   "methods":{

diff --git a/app/src/components/IndicatorTimeSelection.vue b/app/src/components/IndicatorTimeSelection.vue
@@ -4,7 +4,7 @@
     :class="$vuetify.breakpoint.xsOnly && autofocus ? 'menu-top' : 'menu-bottom'"
     :style="`position: absolute; z-index: 5; width: auto; max-width: ${
       $vuetify.breakpoint.xsOnly
-    ? '100%' : '600px'}; height: 130px;`"
+    ? '100%' : '600px'}; ${showTimeSlider ? 'height: 130px;' : 'height: 65px;'}`"
   >
     <v-col v-if="showTimeSlider" style="height:68px;">
       <v-slider

diff --git a/app/src/components/map/FullScreenControl.vue b/app/src/components/map/FullScreenControl.vue
@@ -69,6 +69,7 @@ export default {
 
 <style lang="scss" scoped>
   .controlButton {
+    right:4px;
     width: 36px;
     min-width: 0px !important;
     height: 36px !important;

diff --git a/app/src/components/map/Map.vue b/app/src/components/map/Map.vue
@@ -618,6 +618,12 @@ export default {
         && this.$vuetify.breakpoint.smAndUp && this.appConfig.enableESALayout) {
         position = 'bottom: 72px';
       }
+      if (this.dataLayerTimeProp && this.$vuetify.breakpoint.smAndUp) {
+        position = 'bottom: 25px';
+      }
+      if (this.mapId === 'embedMap') {
+        position = ` bottom:${this.$vuetify.application.footer + 24}px`;
+      }
       return position;
     },
     mousePosConStyle() {

diff --git a/app/src/components/map/SliderTicks.vue b/app/src/components/map/SliderTicks.vue
@@ -6,7 +6,7 @@
       :viewBox="`-1 0 ${width + 2} ${height}`"
     >
       <line
-        v-for="(line, index) in lines"
+        v-for="(line, index) in displayedLines"
         :key="index"
         :x1="line"
         :y1="0"
@@ -50,6 +50,12 @@ export default {
   },
   computed: {
     lines() {
+      const spacing = this.width / (this.numLines - 1);
+      return Array.from({ length: this.numLines }, (_, i) => i * spacing);
+    },
+
+    /** Lines with limited tick frequency for display purposes only */
+    displayedLines() {
       const num = this.numLines > (this.width / 2)
         ? (this.width / 2)
         : this.numLines;
@@ -63,67 +69,30 @@ export default {
     },
 
     yearMarks() {
-      const yearIndices = [];
-      let lastDecade = null;
-      let lastYear = null;
-
-      // Calculate first and last dates as fractions of a year
-      const firstTime = DateTime.fromISO(this.times[0].value);
-      const firstYear = firstTime.year + (firstTime.ordinal / 365);
-      const lastTime = DateTime.fromISO(this.times[this.times.length - 1].value);
-      const lastTimeYear = lastTime.year + (lastTime.ordinal / 365);
-
-      // Calculate the total range in fractions of a year
-      const totalYears = lastTimeYear - firstYear;
-
-      // If the total range of years crosses a certain threshold (e.g., 10 years),
-      // we will show marks for every decade.
-      const showDecades = totalYears > 10;
-
-      this.times.forEach((time) => {
-        const currentTime = DateTime.fromISO(time.value);
-        const currentTimeYear = currentTime.year + (currentTime.ordinal / 365);
-
-        if (showDecades) {
-          // If we are in a new decade, place a mark
-          const currentDecade = Math.floor(currentTimeYear / 10) * 10;
-          if (currentDecade !== lastDecade) {
-            yearIndices.push({
-              label: currentDecade,
-              position: ((currentTimeYear - firstYear) / totalYears) * this.width,
-            });
-            lastDecade = currentDecade;
-          }
-        } else {
-          // If we are in a new year, place a mark
-          const currentYear = Math.floor(currentTimeYear);
-          if (currentYear !== lastYear) {
-            yearIndices.push({
-              label: currentYear,
-              position: ((currentTimeYear - firstYear) / totalYears) * this.width,
-            });
-            lastYear = currentYear;
-          }
+      const yearMarks = [];
+      let previousYear = null;
+
+      this.lines.forEach((line, index) => {
+        const currentTime = DateTime.fromISO(this.times[index].value);
+        const currentYear = currentTime.year;
+
+        // If it's the first tick or if the year has changed, add a year mark
+        if (index === 0 || currentYear !== previousYear) {
+          yearMarks.push({
+            label: currentYear,
+            position: line,
+          });
         }
-      });
-
-      // Create a new array with removed overlapping labels
-      const nonOverlappingYearIndices = yearIndices.filter((yearMark, index, array) => {
-        // If it's the last item in the array, it can't overlap with a next item
-        if (index === array.length - 1) return true;
 
-        // Get the next item in the array
-        const nextYearMark = array[index + 1];
-
-        // Determine the distance between the current and next labels
-        const distance = nextYearMark.position - yearMark.position;
-
-        // Only keep this label if it's more than a certain distance from the next one
-        const minDistance = 50; // set this to the minimum acceptable distance
-        return distance > minDistance;
+        // Update previousYear for the next iteration
+        previousYear = currentYear;
       });
 
-      return nonOverlappingYearIndices;
+      // Filter out year marks that are too close together, in favor of the second one.
+      return yearMarks.filter((current, i) => {
+        const next = yearMarks[i + 1];
+        return !(next && next.position - current.position < 20);
+      });
     },
   },
   mounted() {