started migration to stac-js and map/asset communication

Author: m-mohr

config.js

@@ -39,7 +39,6 @@ module.exports = {
     redirectLegacyUrls: false,
     itemsPerPage: 12,
     defaultThumbnailSize: null,
-    maxPreviewsOnMap: 50,
     crossOriginMedia: null,
     requestHeaders: {},
     requestQueryParameters: {},

config.schema.json

@@ -176,12 +176,6 @@
         ]
       }
     },
-    "maxPreviewsOnMap": {
-      "type": [
-        "integer"
-      ],
-      "minimum": 1
-    },
     "crossOriginMedia": {
       "type": [
         "string",

docs/options.md

@@ -35,7 +35,6 @@ The following ways to set config options are possible:
   - [displayGeoTiffByDefault](#displaygeotiffbydefault)
   - [redirectLegacyUrls](#redirectlegacyurls)
   - [itemsPerPage](#itemsperpage)
-  - [maxPreviewsOnMap](#maxpreviewsonmap)
   - [cardViewMode](#cardviewmode)
   - [cardViewSort](#cardviewsort)
   - [showKeywordsInItemCards](#showkeywordsinitemcards)
@@ -237,10 +236,6 @@ If you are updating from on old version of STAC Browser, you can set this option
 
 The number of items requested and shown per page by default. Only applies to APIs that support the `limit` query parameter.
 
-## maxPreviewsOnMap
-
-The maximum number of previews (thumbnails or overviews) of items that will be shown on the map when on Catalog or Collection pages.
-
 ## cardViewMode
 
 The default view mode for lists of catalogs/collections. Either `"list"` or `"cards"` (default).

src/components/Asset.vue

@@ -6,7 +6,7 @@
           <b-icon-chevron-down v-if="expanded" />
           <b-icon-chevron-right v-else />
         </span>
-        <span class="title">{{ asset.title || id }}</span>
+        <span class="title">{{ title }}</span>
         <div class="badges ml-1">
           <b-badge v-if="shown" variant="success" class="shown" :title="$t('assets.currentlyShown')">
             <b-icon-check /> {{ $t('assets.shown') }}
@@ -23,14 +23,14 @@
       <template v-if="hasAlternatives">
         <b-tabs card>
           <b-tab :title="asset['alternate:name'] || $t('assets.alternate.main')" active>
-            <AssetAlternative :asset="asset" :context="context" :shown="shown" hasAlternatives @show="show" />
+            <AssetAlternative :asset="asset" :shown="shown" hasAlternatives @show="show" />
           </b-tab>
           <b-tab v-for="(altAsset, key) in alternatives" :title="altAsset['alternate:name'] || key" :key="key">
-            <AssetAlternative :asset="altAsset" :context="context" :shown="shown" hasAlternatives :key="key" @show="show" />
+            <AssetAlternative :asset="altAsset" :shown="shown" hasAlternatives :key="key" @show="show" />
           </b-tab>
         </b-tabs>
       </template>
-      <AssetAlternative v-else :asset="asset" :context="context" :shown="shown" @show="show" />
+      <AssetAlternative v-else :asset="asset" :shown="shown" @show="show" />
     </b-collapse>
   </b-card>
 </template>
@@ -42,6 +42,7 @@ import { mapState } from 'vuex';
 import AssetAlternative from './AssetAlternative.vue';
 import StacFieldsMixin from './StacFieldsMixin';
 import Utils from '../utils';
+import { Asset } from 'stac-js';
 
 export default {
   name: 'Asset',
@@ -62,14 +63,6 @@ export default {
       type: Object,
       required: true
     },
-    id: {
-      type: String,
-      required: true
-    },
-    context: {
-      type: Object,
-      default: null
-    },
     definition: {
       type: Boolean,
       default: false
@@ -94,7 +87,10 @@ export default {
       return this.definition ? 'itemdef' : 'asset';
     },
     uid() {
-      return `${this.type}-${this.id.toLowerCase().replace(/[^\w]/g, '-')}`;
+      return `${this.type}-${this.asset.getKey().toLowerCase().replace(/[^\w]/g, '-')}`;
+    },
+    title() {
+      return this.asset.title || this.asset.getKey();
     },
     fileFormat() {
       if (typeof this.asset.type === "string" && this.asset.type.length > 0) {
@@ -113,15 +109,17 @@ export default {
         return {};
       }
 
-      const asset = Object.assign({}, this.asset);
-      delete asset.alternate;
+      const inherit = this.asset.toJSON();
+      delete inherit.alternate;
 
-      const merged = {};
+      const alternates = {};
       for (const key in this.asset.alternate) {
-        merged[key] = Object.assign({}, asset, this.asset.alternate[key]);
+        const alternate = this.asset.alternate[key];
+        const merged = Object.assign({}, inherit, alternate.toJSON());
+        alternates[key] = new Asset(merged, key, alternate.getContext());
       }
       
-      return merged;
+      return alternates;
     },
     hasAlternatives() {
       return Utils.size(this.alternatives) > 0;

src/components/AssetAlternative.vue

@@ -32,10 +32,6 @@ export default {
       type: Object,
       required: true
     },
-    context: {
-      type: Object,
-      default: null
-    },
     hasAlternatives: {
       type: Boolean,
       default: false
@@ -71,6 +67,9 @@ export default {
   },
   computed: {
     ...mapState(['buildTileUrlTemplate', 'useTileLayerAsFallback']),
+    context() {
+      return this.asset.getContext();
+    },
     component() {
       return this.hasAlternatives ? 'div' : 'b-card-body';
     },

src/components/Assets.vue

@@ -3,17 +3,16 @@
     <h2 v-if="displayTitle">{{ displayTitle }}</h2>
     <div class="accordion" role="tablist">
       <Asset
-        v-for="(asset, key) in assets" :asset="asset" :expand="expand" :context="context"
-        :definition="definition" :shown="shown.includes(key)"
-        :id="key" :key="key" @show="show"
+        v-for="asset in assets" :asset="asset" :expand="expand" :context="context"
+        :definition="definition" :shown="shownKeys.includes(asset.getKey())"
+        :key="asset.getKey()" @show="show"
       />
     </div>
   </section>
 </template>
 
 <script>
 import Asset from './Asset.vue';
-import Utils from '../utils';
 
 export default {
   name: 'Assets',
@@ -22,7 +21,7 @@ export default {
   },
   props: {
     assets: {
-      type: Object,
+      type: Array,
       required: true
     },
     shown: {
@@ -43,13 +42,13 @@ export default {
     }
   },
   computed: {
-    count() {
-      return Utils.size(this.assets);
+    shownKeys() {
+      return this.shown.map(asset => asset.getKey());
     },
     displayTitle() {
       if (this.title === null) {
         let langKey = this.definition ? 'assets.inItems' : 'stacAssets';
-        return this.$tc(langKey, this.count);
+        return this.$tc(langKey, this.assets.length);
       }
       else {
         return this.title;
@@ -59,15 +58,15 @@ export default {
       if (this.definition) {
         return false; // Don't expand assets for Item Asset Definitions
       }
-      else if (this.count === 1 && this.stac && this.stac.isItem()) {
+      else if (this.assets.length === 1 && this.stac && this.stac.isItem()) {
         return true; // Expand asset if it's the only asset available and it is in an Item
       }
       return null; // Let asset decide (e.g. depending on roles)
     }
   },
   methods: {
-    show(asset, id, isThumbnail) {
-      this.$emit('showAsset', asset, id, isThumbnail);
+    show() {
+      this.$emit('showAsset', ...arguments);
     }
   }
 };

src/components/HrefActions.vue

@@ -40,14 +40,14 @@
 <script>
 import { BIconBoxArrowUpRight, BIconDownload, BIconEye, BIconLock, BListGroup, BPopover, BSpinner } from 'bootstrap-vue';
 import Description from './Description.vue';
-import STAC from '../models/stac';
 import Utils, { browserProtocols, imageMediaTypes, mapMediaTypes } from '../utils';
 import { mapGetters, mapState } from 'vuex';
 import AssetActions from '../../assetActions.config';
 import LinkActions from '../../linkActions.config';
 import { stacRequestOptions } from '../store/utils';
 import URI from 'urijs';
 import AuthUtils from './auth/utils';
+import { Asset } from 'stac-js';
 
 let i = 0;
 
@@ -197,7 +197,7 @@ export default {
     },
     isThumbnail() {
       if (this.isAsset) {
-        return Array.isArray(this.data.roles) && this.data.roles.includes('thumbnail') && !this.data.roles.includes('overview');
+        return this.data.isPreview() && this.data.canBrowserDisplayImage();
       }
       else {
         return this.data.rel === 'preview' && Utils.canBrowserDisplayImage(this.data);
@@ -210,12 +210,8 @@ export default {
       if (typeof this.data.href !== 'string') {
         return null;
       }
-      let baseUrl = null;
-      if (this.context instanceof STAC) {
-        baseUrl = this.context.getAbsoluteUrl();
-      }
       try {
-        return this.getRequestUrl(this.data.href, baseUrl);
+        return this.getRequestUrl(this.data.getAbsoluteHref());
       } catch (e) {
         return this.data.href;
       }
@@ -379,12 +375,14 @@ export default {
       return '';
     },
     show() {
-      let data = Object.assign({}, this.data);
+      let data = this.data;
       // Override asset href with absolute URL if not a GDAL VFS
       if (!this.isGdalVfs) {
+        // Clone asset so that we can change the href
+        data = new Asset(this.data);
         data.href = this.href;
       }
-      this.$emit('show', data, this.id, this.isThumbnail);
+      this.$emit('show', data);
     },
     handleAuthButton() {
       if (this.auth.length === 1) {

src/components/Map.vue

@@ -48,7 +48,7 @@ export default {
       default: null
     },
     assets: {
-      type: Object,
+      type: Array,
       default: null
     },
     items: {
@@ -123,7 +123,10 @@ export default {
           console.warn(error);
           this.fit();
         });
-        this.stacLayer.on('assetsready', this.fit);
+        this.stacLayer.on('assetsready', () => {
+          this.fit();
+          this.$emit('assets', this.getAssets());
+        });
         this.map.addLayer(this.stacLayer);
 
         if (this.popover) {

src/components/Metadata.vue

@@ -99,7 +99,7 @@ export default {
         !key.startsWith("_") && !this.ignoreFields.includes(key);
       switch (this.type) {
         case "Asset":
-          return formatAsset(this.data, this.context, filter);
+          return formatAsset(this.data.toJSON(), this.context, filter);
         case "Link":
           return formatLink(this.data, this.context, filter);
         case "Provider":

src/components/ShowAssetLinkMixin.js

@@ -0,0 +1,79 @@
+import Utils from '../utils';
+import { mapGetters, mapState } from 'vuex';
+import { stacBrowserSpecialHandling } from "../rels";
+import create from 'stac-js';
+
+export default {
+  data() {
+    return {
+      tab: null,
+      shownOnMap: [],
+    };
+  },
+  computed: {
+    ...mapState(['showThumbnailsAsAssets']),
+    ...mapGetters(['data']),
+    // hasAsset also checks whether the assets have a href and thus are not item asset definitions
+    data2() {
+      // todo: remove once stac-js is implemented fully
+      if (!this.data) {
+        return null;
+      }
+      return create(this.data, false);
+    },
+    hasAssets() {
+      return this.assets;
+    },
+    assets() {
+      if (!this.data2) {
+        return [];
+      }
+      let assets = this.data2.getAssets();
+      if (!this.showThumbnailsAsAssets) {
+        assets = assets.filter(asset => !asset.isPreview());
+      }
+      return assets;
+    },
+    hasThumbnails() {
+      return this.thumbnails.length > 0;
+    },
+    thumbnails() {
+      if (!this.data2) {
+        return [];
+      }
+      return this.data2.getThumbnails();
+    },
+    additionalLinks() {
+      if (!this.data) {
+        return [];
+      }
+      return this.data.getLinksWithOtherRels(stacBrowserSpecialHandling)
+        .filter(link => link.rel !== 'preview' || !Utils.canBrowserDisplayImage(link));
+    },
+    selectedAssets() {
+      if (this.tab === 0) {
+        return this.shownOnMap;
+      }
+      else {
+        return this.thumbnails;
+      }
+    }
+  },
+  methods: {
+    showAsset(asset) {
+      if (asset.isPreview()) {
+        this.tab = 1;
+      }
+      else {
+        this.tab = 0;
+        this.shownOnMap = [asset];
+      }
+      if (this.$refs.tabs) {
+        Utils.scrollTo(this.$refs.tabs.$el);
+      }
+    },
+    dataChanged(data) {
+      this.shownOnMap = data;
+    }
+  }
+};