Adding STAC Browser catalog section

[charlesbluca]

This website currently has a nonexistent catalog section - for the time being, this could be populated with an instance of STAC Browser pointed to our STAC catalogs (or a modified copy pointing to public versions of the Zarr metadata). I would like to add this functionality, but could use some guidance in moving forward.

Since both this website and STAC Browser are independent Vue sites, it would probably be easier to build and deploy them separately on Netlify. I had a few ideas as to where the STAC Browser source code and STAC catalogs could reside in this case:

• In a branch of this repo
• In a separate repo within this organization
• In a repo outside of this organization (such as the one containing our STAC catalogs)

Additionally, we may not need to host the source code if we are able to git clone whatever version of STAC Browser we need within the deployment process.

My main concern is - can we deploy to a subdirectory of the domain (such as https://pangeo-for.ge/catalog) from a separate Netlify deployment pipeline? Or do we need to keep this all contained within one Netlify pipeline?

[rabernat]

Thanks for thinking about this!

Perhaps it would be best if we asked advice from the stac-browser folks directly about how to accomplish this.

Additionally, we may not need to host the source code if we are able to git clone whatever version of STAC Browser we need within the deployment process.

AFAIK, this is what npm and package-lock.json is for. So I guess our question is whether we can use stac-browser components via an npm package in another vue site.

[charlesbluca]

Ideally, I would've wanted to list stac-browser as a dependency in this site's package.json, but to my knowledge it isn't published as a package on npm - this is something we could potentially push for in the future though. In the meantime, I'll open up an issue in stac-browser to see if they have meaningful advice on this.

[charlesbluca]

STAC Browser is now published on npm!

• https://www.npmjs.com/package/@radiantearth/stac-browser

Keep in mind this is just STAC Browser (can't access individual components yet), and doesn't have the same CLI functionality of the standalone package. I'll look into adding the vanilla browser to a subdirectory of this site, and once individual components are easily accessible for styling, we can give additional considerations to presentation.

[rabernat]

Hi @andersy005 - this could be a good issue for you to pick up if you're interested in working on the website!

[andersy005]

@rabernat, I took a look at this and the relevant issues (namely radiantearth/stac-browser#17, and radiantearth/stac-browser#62). As I understand it, deploying the stac browser alongside the main site (as proposed by @charlesbluca) isn't a straightforward task due to the fact that each app (the main site, and the stac-browser) would be using their own routing and each app would have their own root Vue instance. I could be wrong, but I've never seen an example of two vue apps with two root Vue instances running as part of one main app. If folks are aware of such examples in the wild, please let me know.

In my opinion, it sounds like waiting for radiantearth/stac-browser#17 to be addressed is the most straightforward solution moving forward. @m-mohr, I am curious... is there any timeline on when radiantearth/stac-browser#17 will be addressed? :)

[m-mohr]

I'm pretty sure having two Vue instances combined is in principle no issue. I'm using that in STAC Index (that's a customized STAC Browser in another Vue App) and it works like a charm (see below). Having two vue-router instances should in theory also work and it works also for STAC Index, but routes may conflict depending on how they are set up. Having that said, STAC Browser 1.0 is a bit weird with its main.js and all the things happening before the Vue instance is created so there might be issues coming up, but not from Vue itself but from the way it has been implemented in the past.

radiantearth/stac-browser#17 and the whole STAC Browser 2.0 implementation will take a while, it's basically implementing STAC Browser from scratch. I guess it will materialize in summer or so.

STAC Index implementation:

• https://github.com/stac-utils/stac-index/blob/master/client/src/views/Browse.vue (including the Browser with some custom loading mechanisms as I need to get URLs etc from the database)
• Changes to STAC Browser so that I can include it in the file above: https://github.com/radiantearth/stac-browser/pull/65/files (most are CSS, which you can skip)