Add STAC actions for catalogs, collections and items

[vprivat-ads]

This PR adds a new kind of actions: item actions.

It allows to add action buttons for items both in collection page and item page. Here is an example of how it looks:

As an example, an action is proposed (but disabled by default) to open an item in stac-map.

The real use case for us is to implement custom ingestion and processing actions in our STAC catalog, here is for example an action that allows to fill a prefect form to perform a custom run that takes inputs from a STAC item:

import ItemActionPlugin from "../ItemActionPlugin";
import URI from 'urijs';
import i18n from "../../i18n";

export default class Staging extends ItemActionPlugin {

  get show() {
    return true;
  }

  get uri() {
    const parameters = {
        "collection_identifier" : this.item.collection,
        "item_identifier" : this.item.id,
    }
    const doubleEncoded = encodeURIComponent(encodeURIComponent(JSON.stringify(parameters)));
    return new URI(`https://mycooldomain.eu/deployments/deployment/<uuid>/run?parameters=${doubleEncoded}`);
  }

  get text() {
    return i18n.t('stage');
  }
}

I guess it could be useful for other people having EO API / OGC API processes that deal with STAC items.

[m-mohr]

That's a nice idea, thanks!

We are working on a revamp of the item card view in #702 so that needs to be ported over as well, resolving any conflicts etc.

A questions:

• What happens when too many actions are defined that they don't fit in the card?

Two comments:

• I think I'd prefer to move the buttons over the map to keep the distance between map and assets smaller (due to the fact that they have a connection for visualization purposes).
• I think we could also implement it for collections/catalogs, right? Not sure whether it should be a separate action type of a single one. In Assets/Links having separate types lead to duplicated code.

[vprivat-ads]

Thanks for the feedback @m-mohr ! I'm working to add Collections support and I have a question on this part of Catalog.vue:

    <b-card-footer>
      <slot name="footer" :data="data" />
    </b-card-footer>

I see this comes from #359 which is a feature I just discovered.

Where do you think we should put the actions buttons in this case? Above, next to, below?

[m-mohr]

Thanks for the generalization. I'm wondering whether we should just call it "STAC Actions"?

[vprivat-ads]

I can rename it, no problem. I found how to test the collections search results with https://fedeo.ceos.org/ and I am trying to rework this part as actions:

            <template #catalogFooter="slot">
              <b-button-group v-if="itemSearch || canFilterItems(slot.data)" vertical size="sm">
                <b-button v-if="itemSearch" variant="outline-primary" :pressed="selectedCollections[slot.data.id]" @click="selectForItemSearch(slot.data)">
                  <b-icon-check-square v-if="selectedCollections[slot.data.id]" />
                  <b-icon-square v-else />
                  <span class="ml-2">{{ $t('search.selectForItemSearch') }}</span>
                </b-button>
                <StacLink :button="{variant: 'outline-primary', disabled: !canFilterItems(slot.data)}" :data="slot.data" :title="$t('search.filterCollection')" :state="{itemFilterOpen: 1}" />
              </b-button-group>
            </template>

So I guess I will switch the layout to vertical for item search as well.

[m-mohr]

I don't think those should be reworked as actions as they are core functionality, you'd probably rather integrate your actions...

Also, please be aware that we are currently backporting #702 to STAC Browser v4 as well...

[vprivat-ads]

Here is how it looks like in collections search:

and now how it looks like in items search:

Is the proposed styling (outline-primary for collections, primary for items) is ok for you @m-mohr?

[m-mohr]

I think we could use the same styling for both to be a bit more consistent, but I'm not 100% set on whether to use outline or the normal button style. I think I chose outline to indicate that this is a "secondary" action (compared to opening the resource via the title as "primary" action). An alternative we could try is normal with the secondary color scheme. Open to suggestions.

[m-mohr]

We should probably URL encode the URL of the object?!

The following should do the trick:

Suggested change

	return new URI(`https://developmentseed.org/stac-map/?href=${this.object.getAbsoluteUrl()}`);
	return URI('https://developmentseed.org/stac-map/').addQuery('href', this.object.getAbsoluteUrl());

[m-mohr]

This removes the Copy Button for any Href where the "right" part of the condition is all false. I think the changes in this file should be reverted.

[m-mohr]

This code is used four times (2x in StacActions, 1x in HrefActions, and 1x here). Seems to be time for a new component?!

[m-mohr]

I think we use the same principle as in the Catalog.vue, where it's a slot inside a b-card-footer? That would allow to select where to show this, for example I'm wondering whether it makes sense to show the actions in the map popovers. We also plan to use the component later in some other places, where the StacActions should probably not be shown.

[m-mohr]

Between Assets and Map is not a good place as they should stay close together for the asset<->map interaction. Maybe move the actions to the end of the intro section?

[m-mohr]

Between Assets and Map is not a good place as they should stay close together for the asset<->map interaction. Maybe move the actions to the end of the intro section?