Merge branch 'ui-panels-cat-changed-layout' of github.com:eurodatacub…

…e/eodash into ui-panels-cat-changed-layout
eurodatacube · Oct 23, 2023 · 2e1ca79 · 2e1ca79
2 parents 1555ec7 + ce19db9
commit 2e1ca79
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 90 deletions.
diff --git a/app/src/components/DataPanel.vue b/app/src/components/DataPanel.vue
@@ -331,10 +331,10 @@
               cols="12"
               class="pb-0"
             >
-              <div
+              <!-- <div
                 v-html="story"
                 class="md-body"
-              ></div>
+              ></div> -->
 
               <v-btn
                 v-if="indicatorObject && externalData"
@@ -372,7 +372,7 @@
             </v-col>
           </v-card>
         </v-col>
-        <v-col
+        <!-- <v-col
           :cols="$vuetify.breakpoint.mdAndDown || !expanded ? 12 : 6"
           :class="$vuetify.breakpoint.smAndUp ? 'scrollContainer' : ''"
           :style="`padding-bottom: 0px; height: ${$vuetify.breakpoint.mdAndDown
@@ -397,14 +397,14 @@
               ></div>
             </v-col>
           </v-row>
-        </v-col>
+        </v-col> -->
       </v-row>
-      <v-row>
+      <!--<v-row>
         <div
           v-html="story"
           class="md-body"
         ></div>
-      </v-row>
+      </v-row>-->
     </div>
   </div>
 </template>
@@ -478,43 +478,6 @@ export default {
     ...mapState('indicators', [
       'customAreaIndicator',
     ]),
-    story() {
-      // If markdown is coming from stac collection show it direclty
-      if (this.indicatorObject && 'markdown' in this.indicatorObject) {
-        return this.$marked(this.indicatorObject.markdown);
-      }
-      // If not do previous checks to see if other option can be found
-      let markdown = '';
-      let indObject = this.indicatorObject;
-      if (this.featureObject) {
-        indObject = this.featureObject;
-      }
-      try {
-        const demoItem = this.$route.name === 'demo'
-          ? this.appConfig.demoMode[this.$route.query.event]
-            .find((item) => item.poi === this.getLocationCode(indObject)) : false;
-        markdown = require(`../../public${demoItem.story}.md`);
-      } catch {
-        try {
-          markdown = require(`../../public${this.appConfig.storyPath}${this.getLocationCode(indObject)}.md`);
-        } catch {
-          try {
-            markdown = require(`../../public${this.baseConfig.indicatorsDefinition[this.indicatorObject.indicator].story}.md`);
-          } catch {
-            try {
-              const indicator = Array.isArray(this.$store.state.features.featureFilters.indicators)
-                ? this.$store.state.features.featureFilters.indicators[0]
-                : this.$store.state.features.featureFilters.indicators;
-              markdown = require(`../../public${this.baseConfig.indicatorsDefinition[indicator].story}.md`);
-            } catch {
-              markdown = { default: '' };
-            }
-          }
-        }
-      }
-      this.$store.commit('story/SET_STORY', markdown.default);
-      return this.$marked(markdown.default);
-    },
     indicatorObject() {
       return this.$store.state.indicators.selectedIndicator;
     },
@@ -692,6 +655,42 @@ export default {
     },
   },
   watch: {
+    indicatorObject() {
+      // If markdown is coming from stac collection show it direclty
+      if (this.indicatorObject && 'markdown' in this.indicatorObject) {
+        return this.$marked(this.indicatorObject.markdown);
+      }
+      // If not do previous checks to see if other option can be found
+      let markdown = '';
+      let indObject = this.indicatorObject;
+      if (this.featureObject) {
+        indObject = this.featureObject;
+      }
+      try {
+        const demoItem = this.$route.name === 'demo'
+          ? this.appConfig.demoMode[this.$route.query.event]
+            .find((item) => item.poi === this.getLocationCode(indObject)) : false;
+        markdown = require(`../../public${demoItem.story}.md`);
+      } catch {
+        try {
+          markdown = require(`../../public${this.appConfig.storyPath}${this.getLocationCode(indObject)}.md`);
+        } catch {
+          try {
+            markdown = require(`../../public${this.baseConfig.indicatorsDefinition[this.indicatorObject.indicator].story}.md`);
+          } catch {
+            try {
+              const indicator = Array.isArray(this.$store.state.features.featureFilters.indicators)
+                ? this.$store.state.features.featureFilters.indicators[0]
+                : this.$store.state.features.featureFilters.indicators;
+              markdown = require(`../../public${this.baseConfig.indicatorsDefinition[indicator].story}.md`);
+            } catch {
+              markdown = { default: '' };
+            }
+          }
+        }
+      }
+      this.$store.commit('story/SET_STORY', markdown.default);
+    },
     selectedArea(area) {
       this.showRegenerateButton = this.customAreaIndicator && !!area;
     },

diff --git a/app/src/components/UiPanel.vue b/app/src/components/UiPanel.vue
@@ -90,4 +90,8 @@ div {
   height: calc(100% - 200px);
   z-index: 4;
 }
+
+::v-deep .v-expansion-panel-content__wrap {
+  padding: 0;
+}
 </style>
diff --git a/app/src/components/UiPanelsLayout.vue b/app/src/components/UiPanelsLayout.vue
@@ -41,18 +41,18 @@ export default {
         {
           id: 1,
           title: 'Filters',
-          heightPercentage: 50,
+          heightPercentage: 80,
         },
         {
           id: 2,
           title: 'Layers',
-          heightPercentage: 50,
+          heightPercentage: 20,
         },
       ],
       right: [
         {
           id: 4,
-          title: 'Layers',
+          title: 'Info',
           heightPercentage: 50,
         },
         {
@@ -70,7 +70,18 @@ export default {
       handler(newVal) {
         if (this.gtif && !newVal) {
           this.panels.left[1].title = 'Narratives';
-          this.panels.right = [];
+          this.panels.right = [
+            {
+              id: 4,
+              title: 'Information',
+              heightPercentage: 50,
+            },
+            {
+              id: 5,
+              title: 'Analysis',
+              heightPercentage: 50,
+            },
+          ];
         } else {
           this.panels.left[1].title = 'Layers';
           this.panels.right = [

diff --git a/app/src/components/map/StyleControls.vue b/app/src/components/map/StyleControls.vue
@@ -21,12 +21,6 @@
         ></v-select>
       </v-col>
     </v-row>
-    <v-row align="center">
-      <div
-        v-html="story"
-        class="md-body"
-      ></div>
-    </v-row>
   </v-container>
 </template>
 
@@ -47,20 +41,17 @@ export default {
   mounted() {
     [this.select] = this.vectorStyles.items;
   },
-  computed: {
-    story() {
+  watch: {
+    select() {
       let markdown;
       try {
         markdown = require(`../../../public/data/gtif/markdown/${this.select.markdown}.md`);
       } catch {
         markdown = { default: '' };
       }
       this.$store.commit('story/SET_STORY', markdown.default);
-      return this.$marked(markdown.default);
     },
   },
-  watch: {
-  },
   methods: {
     updateMap(evt) {
       const { map } = getMapInstance('centerMap');

diff --git a/app/src/components/map/VectorTileStyleControl.vue b/app/src/components/map/VectorTileStyleControl.vue
@@ -34,12 +34,6 @@
         </v-select>
       </v-col>
     </v-row>
-     <v-row align="center">
-        <div
-          v-html="story"
-          class="md-body"
-        ></div>
-     </v-row>
   </v-container>
 </template>
 
@@ -67,20 +61,17 @@ export default {
       [this.select] = this.queryParameters?.items;
     }
   },
-  computed: {
-    story() {
+  watch: {
+    select() {
       let markdown;
       try {
         markdown = require(`../../../public/data/gtif/markdown/${this.select.markdown}.md`);
       } catch {
         markdown = { default: '' };
       }
       this.$store.commit('story/SET_STORY', markdown.default);
-      return this.$marked(markdown.default);
     },
   },
-  watch: {
-  },
   methods: {
     updateMap(evt) {
       this.queryParameters.selected = evt.id;

diff --git a/app/src/components/map/WmsStyleControls.vue b/app/src/components/map/WmsStyleControls.vue
@@ -25,13 +25,6 @@
         ></v-select>
       </v-col>
     </v-row>
-     <v-row align="center">
-        <div
-          style="width: 100%"
-          v-html="story"
-          class="md-body"
-        ></div>
-     </v-row>
   </v-container>
 </template>
 
@@ -54,20 +47,17 @@ export default {
   mounted() {
     [this.select] = this.wmsStyles.items;
   },
-  computed: {
-    story() {
+  watch: {
+    select() {
       let markdown;
       try {
         markdown = require(`../../../public/data/gtif/markdown/${this.select.markdown}.md`);
       } catch {
         markdown = { default: '' };
       }
       this.$store.commit('story/SET_STORY', markdown.default);
-      return this.$marked(markdown.default);
     },
   },
-  watch: {
-  },
   methods: {
     updateMap(evt) {
       const { map } = getMapInstance('centerMap');

diff --git a/app/src/views/Dashboard.vue b/app/src/views/Dashboard.vue
@@ -6,7 +6,7 @@
     <global-header
       ref="globalHeader"
     />
-    <v-navigation-drawer
+    <!--<v-navigation-drawer
       v-if="$vuetify.breakpoint.mdAndUp"
       v-model="drawerRight"
       right
@@ -135,7 +135,7 @@
           </v-col>
         </v-row>
       </v-container>
-    </div>
+    </div>-->
 
     <v-main
       :style="`height: 100vh; height: calc((var(--vh, 1vh) * 100) + ${$vuetify.application.top
@@ -182,13 +182,11 @@
                  @panel-selected="function(id){ handleSelection(id) }"
                  :activeID="activePanel" :title="panel.title"
                  >
-                   <StoryDisplay v-if="panel.title == 'Story'" />
-                   <eox-layercontrol
-                   v-if="panel.title == 'Layers'"
-                      for="#centerMap"
-                      :titleProperty.prop="'name'"
-                      class="pointerEvents">
-                    </eox-layercontrol>
+                   <StoryDisplay v-if="panel.title == 'Information'" />
+                   <data-panel
+                    v-if="panel.title === 'Analysis' && indicatorObject
+                    || $store.state.features.featureFilters.indicators.length > 0"
+                    :key="panelKey" />
                  </UiPanel>
               </template>
             </UiPanelsLayout>