Migrate to stac-js

Author: m-mohr

basemaps.config.js

@@ -1,4 +1,4 @@
-import STAC from './src/models/stac';
+import { Collection, Item } from './src/models/stac';
 import Utils from './src/utils';
 
 const USGS_ATTRIBUTION = 'USGS Astrogeology';
@@ -68,17 +68,15 @@ const BASEMAPS = {
  * @returns {Array.<BasemapOptions>}
  */
 export default function configureBasemap(stac, i18n) {
-  let targets = ['earth'];
-  if (stac instanceof STAC) {
-    if (stac.isCollection() && Utils.isObject(stac.summaries) && Array.isArray(stac.summaries['ssys:targets'])) {
-      targets = stac.summaries['ssys:targets'];
-    }
-    else if (stac.isCollection() && Array.isArray(stac['ssys:targets'])) {
-      targets = stac['ssys:targets'];
-    }
-    else if (stac.isItem() && Array.isArray(stac.properties['ssys:targets'])) {
-      targets = stac.properties['ssys:targets'];
-    }
+  let targets;
+  if (stac instanceof Collection) {
+    targets = stac.getSummary('ssys:targets');
+  }
+  if (!targets) {
+    targets = stac.getMetadata('ssys:targets');
+  }
+  if (!targets) {
+    targets = ['earth'];
   }
 
   let layers = [];

src/StacBrowser.vue

@@ -38,12 +38,12 @@ import "bootstrap-vue/dist/bootstrap-vue.css";
 import ErrorAlert from './components/ErrorAlert.vue';
 import StacHeader from './components/StacHeader.vue';
 
-import STAC from './models/stac';
+import { STAC } from 'stac-js';
 import Utils from './utils';
 import URI from 'urijs';
 
 import { API_LANGUAGE_CONFORMANCE } from './i18n';
-import { getBest, prepareSupported } from './locale-id';
+import { getBest, prepareSupported } from 'stac-js/src/locales';
 import BrowserStorage from "./browser-store";
 import Authentication from "./components/Authentication.vue";
 

src/components/Catalog.vue

@@ -21,10 +21,11 @@
 
 <script>
 import { mapState, mapGetters } from 'vuex';
+import FileFormatsMixin from './FileFormatsMixin';
 import StacFieldsMixin from './StacFieldsMixin';
 import ThumbnailCardMixin from './ThumbnailCardMixin';
 import StacLink from './StacLink.vue';
-import STAC from '../models/stac';
+import { STAC } from 'stac-js';
 import { formatMediaType, formatTemporalExtent } from '@radiantearth/stac-fields/formatters';
 import Utils from '../utils';
 
@@ -39,6 +40,7 @@ export default {
     formatMediaType: value => formatMediaType(value, null, {shorten: true})
   },
   mixins: [
+    FileFormatsMixin,
     ThumbnailCardMixin,
     StacFieldsMixin({ formatTemporalExtent })
   ],
@@ -79,12 +81,6 @@ export default {
       }
       return null;
     },
-    fileFormats() {
-      if (this.data) {
-        return this.data.getFileFormats();
-      }
-      return [];
-    },
     keywords() {
       if (this.data) {
         return this.data.getMetadata('keywords') || [];

src/components/Catalogs.vue

@@ -38,7 +38,8 @@
 import { mapGetters, mapState } from 'vuex';
 import Catalog from './Catalog.vue';
 import Loading from './Loading.vue';
-import STAC from '../models/stac';
+import { getDisplayTitle } from '../models/stac';
+import { STAC } from 'stac-js';
 import ViewMixin from './ViewMixin';
 import Utils from '../utils';
 
@@ -160,7 +161,7 @@ export default {
       // Sort
       if (!this.hasMore && this.sort !== 0) {
         const collator = new Intl.Collator(this.uiLanguage);
-        catalogs = catalogs.slice(0).sort((a,b) => collator.compare(STAC.getDisplayTitle(a), STAC.getDisplayTitle(b)));
+        catalogs = catalogs.slice(0).sort((a,b) => collator.compare(getDisplayTitle(a), getDisplayTitle(b)));
         if (this.sort === -1) {
           catalogs = catalogs.reverse();
         }

src/components/FileFormatsMixin.js

@@ -0,0 +1,22 @@
+import Utils from '../utils';
+
+export default {
+  computed: {
+    fileFormats() {
+      if (!this.data) {
+        return [];
+      }
+      let assets = [];
+      if ((this.data.isItem() || this.data.isCollection()) && Utils.isObject(this.data.assets)) {
+        assets = assets.concat(Object.values(this.data.assets));
+      }
+      if (this.data.isCollection() && Utils.isObject(this.data.item_assets)) {
+        assets = assets.concat(Object.values(this.data.item_assets));
+      }
+      return assets
+        .filter(asset => Array.isArray(asset.roles) && asset.roles.includes('data') && typeof asset.type === 'string') // Look for data files
+        .map(asset => asset.type) // Array shall only contain media types
+        .filter((v, i, a) => a.indexOf(v) === i); // Unique values
+    }
+  }
+};

src/components/Item.vue

@@ -24,9 +24,10 @@
 
 <script>
 import { mapState, mapGetters } from 'vuex';
+import FileFormatsMixin from './FileFormatsMixin';
 import ThumbnailCardMixin from './ThumbnailCardMixin';
 import StacLink from './StacLink.vue';
-import STAC from '../models/stac';
+import { STAC } from 'stac-js';
 import { formatTemporalExtent, formatTimestamp, formatMediaType } from '@radiantearth/stac-fields/formatters';
 import Registry from '@radiantearth/stac-fields/registry';
 import Utils from '../utils';
@@ -46,6 +47,7 @@ export default {
     formatTimestamp
   },
   mixins: [
+    FileFormatsMixin,
     ThumbnailCardMixin
   ],
   props: {
@@ -66,12 +68,6 @@ export default {
       }
       return null;
     },
-    fileFormats() {
-      if (this.data) {
-        return this.data.getFileFormats();
-      }
-      return [];
-    },
     keywords() {
       if (this.data) {
         return this.data.getMetadata('keywords') || [];

src/components/Items.vue

@@ -47,7 +47,7 @@ import Loading from './Loading.vue';
 import Pagination from './Pagination.vue';
 import { BCollapse, BIconSearch } from "bootstrap-vue";
 import Utils from '../utils';
-import STAC from '../models/stac';
+import { getDisplayTitle } from '../models/stac';
 import { mapState } from 'vuex';
 
 export default {
@@ -134,7 +134,7 @@ export default {
       let items = this.items;
       if (!this.apiFilters.sortby && this.sort !== 0) {
         const collator = new Intl.Collator(this.uiLanguage);
-        items = items.slice(0).sort((a,b) => collator.compare(STAC.getDisplayTitle(a), STAC.getDisplayTitle(b)));
+        items = items.slice(0).sort((a,b) => collator.compare(getDisplayTitle(a), getDisplayTitle(b)));
         if (this.sort === -1) {
           items = items.reverse();
         }

src/components/SearchFilter.vue

@@ -128,7 +128,8 @@ import ApiCapabilitiesMixin, { TYPES } from './ApiCapabilitiesMixin';
 import DatePickerMixin from './DatePickerMixin';
 import Loading from './Loading.vue';
 
-import STAC from '../models/stac';
+import { CatalogLike, STAC } from 'stac-js';
+import { createSTAC } from '../models/stac'; 
 import Cql from '../models/cql2/cql';
 import Queryable from '../models/cql2/queryable';
 import CqlValue from '../models/cql2/value';
@@ -240,7 +241,7 @@ export default {
       };
     },
     collectionSearchLink() {
-      return this.parent instanceof STAC && this.parent.getApiCollectionsLink();
+      return this.parent instanceof CatalogLike && this.parent.getApiCollectionsLink();
     },
     canSearchCollectionsFreeText() {
       return this.canSearchCollections && this.supportsConformance(TYPES.Collections.FreeText);
@@ -426,9 +427,10 @@ export default {
           data.queryableLink = this.findQueryableLink(links) || null;
         }
 
+        // todo: use ItemCollection / CollectionCollection
         if (!hasMore && Array.isArray(response.data.collections)) {
           let collections = response.data.collections
-            .map(collection => new STAC(collection));
+            .map(collection => createSTAC(collection));
           data.collections = this.prepareCollections(collections);
         }
       }

src/components/ShowAssetLinkMixin.js

@@ -1,7 +1,6 @@
 import Utils from '../utils';
 import { mapGetters, mapState } from 'vuex';
 import { stacBrowserSpecialHandling } from "../rels";
-import create from 'stac-js';
 
 export default {
   data() {
@@ -13,22 +12,15 @@ export default {
   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 in stac-js also checks whether the assets have a href and thus are not item asset definitions
     hasAssets() {
       return this.assets.length > 0;
     },
     assets() {
-      if (!this.data2) {
+      if (!this.data) {
         return [];
       }
-      let assets = this.data2.getAssets();
+      let assets = this.data.getAssets();
       if (!this.showThumbnailsAsAssets) {
         assets = assets.filter(asset => !asset.isPreview());
       }
@@ -38,10 +30,10 @@ export default {
       return this.thumbnails.length > 0;
     },
     thumbnails() {
-      if (!this.data2) {
+      if (!this.data) {
         return [];
       }
-      return this.data2.getThumbnails();
+      return this.data.getThumbnails();
     },
     additionalLinks() {
       if (!this.data) {

src/components/Source.vue

@@ -82,7 +82,7 @@ import { mapActions, mapGetters, mapState } from 'vuex';
 import Url from './Url.vue';
 
 import Utils from '../utils';
-import { getBest, prepareSupported } from '../locale-id';
+import { getBest, prepareSupported } from '../../../stac-js/src/locales';
 import CopyButton from './CopyButton.vue';
 import SocialSharing from './SocialSharing.vue';