chore: replace storydisplay with stacinfo element

eurodatacube · Oct 24, 2023 · 0f71c16 · 0f71c16
1 parent 2d52108
commit 0f71c16
Show file tree

Hide file tree

Showing 11 changed files with 344 additions and 96 deletions.
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -18,6 +18,7 @@
     "@chenfengyuan/vue-countdown": "^1.1.5",
     "@eox/itemfilter": "^0.8.6",
     "@eox/layercontrol": "^0.7.1",
+    "@eox/stacinfo": "^0.2.0",
     "@turf/difference": "^6.5.0",
     "axios": "^0.21.1",
     "chart.js": "2.9.3",

diff --git a/app/src/components/DataPanel.vue b/app/src/components/DataPanel.vue
@@ -652,49 +652,49 @@ export default {
     selectedArea(area) {
       this.showRegenerateButton = this.customAreaIndicator && !!area;
     },
-    indicatorObject:{
-      immediate:true,
-      deep:true,
-      handler(indicatorObj){
-      console.log('indicatorObject watcher triggered');
-       // If markdown is coming from stac collection show it direclty
-      // console.log('changed');
-      if (indicatorObj && 'markdown' in indicatorObj) {
-        this.$store.commit('story/SET_STORY', indicatorObj.markdown);
+    indicatorObject: {
+      immediate: true,
+      deep: true,
+      handler(indicatorObj) {
+        console.log('indicatorObject watcher triggered');
+        // If markdown is coming from stac collection show it direclty
+        // console.log('changed');
+        if (indicatorObj && 'markdown' in indicatorObj) {
+          // this.$store.commit('story/SET_STORY', indicatorObj.markdown);
         // return this.$marked(indicatorObj.markdown);
-      }
-      // If not do previous checks to see if other option can be found
-      let markdown = '';
-      let indObject = indicatorObj;
-      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 {
+        }
+        // If not do previous checks to see if other option can be found
+        let markdown = '';
+        let indObject = indicatorObj;
+        if (this.featureObject) {
+          indObject = this.featureObject;
+        }
         try {
-          markdown = require(`../../public${this.appConfig.storyPath}${this.getLocationCode(indObject)}.md`);
+          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.baseConfig.indicatorsDefinition[indicatorObj.indicator].story}.md`);
+            markdown = require(`../../public${this.appConfig.storyPath}${this.getLocationCode(indObject)}.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`);
+              markdown = require(`../../public${this.baseConfig.indicatorsDefinition[indicatorObj.indicator].story}.md`);
             } catch {
-              markdown = { default: '' };
+              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);
-    }
-  }
+      // this.$store.commit('story/SET_STORY', markdown.default);
+      },
+    },
   },
 };
 </script>

diff --git a/app/src/components/map/StyleControls.vue b/app/src/components/map/StyleControls.vue
@@ -49,7 +49,7 @@ export default {
       } catch {
         markdown = { default: '' };
       }
-      this.$store.commit('story/SET_STORY', markdown.default);
+      // this.$store.commit('story/SET_STORY', markdown.default);
     },
   },
   methods: {

diff --git a/app/src/components/map/VectorTileStyleControl.vue b/app/src/components/map/VectorTileStyleControl.vue
@@ -69,7 +69,7 @@ export default {
       } catch {
         markdown = { default: '' };
       }
-      this.$store.commit('story/SET_STORY', markdown.default);
+      // this.$store.commit('story/SET_STORY', markdown.default);
     },
   },
   methods: {

diff --git a/app/src/components/map/WmsStyleControls.vue b/app/src/components/map/WmsStyleControls.vue
@@ -55,7 +55,7 @@ export default {
       } catch {
         markdown = { default: '' };
       }
-      this.$store.commit('story/SET_STORY', markdown.default);
+      // this.$store.commit('story/SET_STORY', markdown.default);
     },
   },
   methods: {

diff --git a/app/src/main.js b/app/src/main.js
@@ -29,6 +29,7 @@ import getLocationCode from './mixins/getLocationCode';
 
 import '@eox/itemfilter';
 import '@eox/layercontrol';
+import '@eox/stacinfo';
 
 // Set UTC as default time zone behavior for whole client
 Settings.defaultZoneName = 'utc';
@@ -40,6 +41,7 @@ Vue.config.productionTip = false;
 Vue.config.ignoredElements = [
   'eox-itemfilter',
   'eox-layercontrol',
+  'eox-stacinfo',
 ];
 
 Vue.use(VuePapaParse);

diff --git a/app/src/store/index.js b/app/src/store/index.js
@@ -7,7 +7,6 @@ import features from './modules/features';
 import indicators from './modules/indicators';
 import themes from './modules/themes';
 import gtif from './modules/gtif';
-import story from './modules/story';
 
 const vuexLocal = new VuexPersistence({
   storage: localStorage,
@@ -32,7 +31,6 @@ const store = new Vuex.Store({
     indicators,
     themes,
     gtif,
-    story,
   },
   state: {
     packageVersion: process.env.PACKAGE_VERSION || '0',

diff --git a/app/src/store/modules/story.js b/app/src/store/modules/story.js
diff --git a/app/src/views/Dashboard.vue b/app/src/views/Dashboard.vue
@@ -182,7 +182,15 @@
                  @panel-selected="function(id){ handleSelection(id) }"
                  :activeID="activePanel" :title="panel.title"
                  >
-                   <StoryDisplay v-if="panel.title == 'Information'" />
+                  <eox-stacinfo
+                    v-if="panel.title == 'Information' && indicatorSelected"
+                    :for="$store.state.indicators.selectedIndicator.link"
+                    header='[]'
+                    subheader='[]'
+                    properties='["description"]'
+                    featured='[]'
+                    footer='[]'
+                  ></eox-stacinfo>
                    <DataPanel
                     v-if="panel.title === 'Analysis' && indicatorObject
                     || $store.state.features.featureFilters.indicators.length > 0"
@@ -217,7 +225,6 @@ import { getMapInstance } from '@/components/map/map';
 import closeMixin from '@/mixins/close';
 import dialogMixin from '@/mixins/dialogMixin';
 import { mapState, mapGetters } from 'vuex';
-import StoryDisplay from '../components/StoryDisplay.vue';
 import NarrativesToolsPanel from '../components/NarrativesToolsPanel.vue';
 
 export default {
@@ -243,7 +250,6 @@ export default {
     // ESABreadcrumbs,
     UiPanel,
     UiPanelsLayout,
-    StoryDisplay,
     NarrativesToolsPanel,
   },
   props: {

diff --git a/app/vue.config.js b/app/vue.config.js
@@ -53,6 +53,7 @@ module.exports = {
     'ol',
     '@eox/itemfilter',
     '@eox/layercontrol',
+    '@eox/stacinfo',
     'ol-mapbox-style',
   ],
   configureWebpack: {