Support API Collections + bug fixes

src/components/Catalog.vue

@@ -49,6 +49,37 @@
           <div v-if="description" v-html="description" />
 
           <b-tabs v-model="tabIndex">
+            <b-tab
+              v-if="visibleTabs.includes('collections')"
+              key="collections"
+              title="Collections (API)"
+            >
+              <b-table
+                :items="collections"
+                :fields="collectionFields"
+                :per-page="childrenPerPage"
+                :current-page="currentCollectionPage"
+                :outlined="true"
+                responsive
+                small
+                striped
+              >
+                <template slot="cell(link)" slot-scope="data">
+                  <router-link :to="data.item.to">{{
+                    data.item.id
+                  }}</router-link>
+                </template>
+              </b-table>
+              <b-pagination
+                v-if="collectionCount > childrenPerPage"
+                v-model="currentCollectionPage"
+                :limit="15"
+                :total-rows="collectionCount"
+                :per-page="childrenPerPage"
+                :hide-goto-end-buttons="true"
+              />
+            </b-tab>
+
             <b-tab
               v-if="visibleTabs.includes('catalogs')"
               key="catalogs"
@@ -176,6 +207,8 @@ import MetadataSidebar from './MetadataSidebar.vue'
 
 import { transformCatalog } from "../migrate"
 
+import { fetchUri } from "../util";
+
 const ITEMS_PER_PAGE = 25;
 
 export default {
@@ -220,13 +253,26 @@ export default {
           sortable: true
         }
       ],
+      collectionFields: [
+        {
+          key: "link",
+          label: "Identifier",
+          sortable: false // Sorting doesn't work for links
+        },
+        {
+          key: "title",
+          label: "Title",
+          sortable: true
+        }
+      ],
       currentChildPage: 1,
-      childrenPerPage: 25,
+      currentCollectionPage: 1,
+      childrenPerPage: 25, // also applies to collections
       itemFields: [
         {
           key: "link",
           label: "Title",
-          sortable: true
+          sortable: false // Sorting doesn't work for links
         },
         {
           key: "dateAcquired",
@@ -250,18 +296,75 @@ export default {
     };
   },
   asyncComputed: {
+    collections: {
+      default: [],
+      lazy: true,
+      async get() {
+        const externalCollections = this.links.find(x => x.rel === "data");
+        if (externalCollections === undefined) {
+          return [];
+        }
+
+        try {
+          const rsp = await fetchUri(externalCollections.href);
+          if (!rsp.ok) {
+            console.warn(await rsp.text());
+            return [];
+          }
+
+          const data = await rsp.json();
+          if (!data || !Array.isArray(data.collections)) {
+            console.warn(await rsp.text());
+            return [];
+          }
+
+          return data.collections
+            .map(collection => {
+              // strip /collection from the target path
+              let p = this.path.replace(/^\/collection/, "");
+              if (!p.endsWith("/")) {
+                p += "/";
+              }
+
+              // Try to get the location of the collection
+              let href = externalCollections.href + '/collections/' + collection.id;
+              if (Array.isArray(collection.links)) {
+                let selfLink = collection.links.find(l => l.rel == 'self');
+                if (selfLink && selfLink.href) {
+                  href = selfLink.href;
+                }
+              }
+
+              const resolved = this.resolve(href, this.url);
+              const slug = this.slugify(resolved);
+              const to = [p, slug].join("");
+
+              return Object.assign(collection, {
+                path: href,
+                to,
+                title: collection.title || collection.id || href,
+                url: resolved
+              });
+            });
+        } catch (err) {
+          console.warn(err);
+
+          return [];
+        }
+      }
+    },
     externalItems: {
       default: [],
       lazy: true,
       async get() {
         const externalItemsLink = this.links.find(x => x.rel === "items");
 
-        if (externalItemsLink == null) {
+        if (externalItemsLink === undefined) {
           return [];
         }
 
         try {
-          const rsp = await fetch(
+          const rsp = await fetchUri(
             `${externalItemsLink.href}?page=${this.currentItemPage}`
           );
 
@@ -337,8 +440,11 @@ export default {
     catalog() {
       return this.entity;
     },
+    collectionCount() {
+      return this.collections.length;
+    },
     childCount() {
-      return this.links.filter(x => x.rel === "child").length;
+      return this.children.length;
     },
     children() {
       return this.links
@@ -351,15 +457,16 @@ export default {
             p += "/";
           }
 
-          const slug = this.slugify(this.resolve(child.href, this.url));
+          const resolved = this.resolve(child.href, this.url);
+          const slug = this.slugify(resolved);
           const to = [p, slug].join("");
 
           return {
             path: child.href,
             to,
             // child.id is a workaround for https://earthengine-stac.storage.googleapis.com/catalog/catalog.json
             title: child.title || child.id || child.href,
-            url: this.resolve(child.href, this.url)
+            url: resolved
           };
         });
     },
@@ -606,6 +713,7 @@ export default {
     },
     visibleTabs() {
       return [
+        this.collectionCount > 0 && "collections",
         this.childCount > 0 && "catalogs",
         (this.hasExternalItems || this.itemCount > 0) && "items",
         this.bands.length > 0 && "bands",

src/components/MetadataSidebar.vue

@@ -47,7 +47,7 @@
                 <td v-html="prop.value" />
                 </tr>
             </template>
-            <template v-if="providers">
+            <template v-if="Array.isArray(providers) && providers.length > 0">
                 <tr>
                 <td colspan="2" class="group">
                     <h4>

src/components/common.js

@@ -5,7 +5,6 @@ import clone from "clone";
 import { HtmlRenderer, Parser } from "commonmark";
 import escape from "lodash.escape";
 import isEqual from "lodash.isequal";
-import isEmpty from "lodash.isempty";
 import jsonQuery from "json-query";
 import spdxToHTML from "spdx-to-html";
 import spdxLicenseIds from "spdx-license-ids";

src/main.js

@@ -99,7 +99,7 @@ const main = async () => {
   };
 
   const catalogValidator = async (data) => {
-    if (data.license != null || data.extent != null) {
+    if (data.license || data.extent) {
       // contains Collection properties
       return collectionValidator(data);
     }

src/migrate.js

@@ -1,6 +1,6 @@
 /* Methods that transform STAC object JSON from older versions to
 allow for a more consistent usage in other parts of the codebase */
-import { STAC_VERISON } from './config';
+import { STAC_VERSION } from './config';
 
 export const transformCatalog = (entity) => {
     if(!entity) { return entity; }