Event sidebar - representative species images

[jack-brinkman]

I've started implementing the ability to see a representative image for each unique taxon related to an event (via its occurrences), ~in the feature/event-taxa-images branch~ (now merged with master). This builds upon the relatedTaxa work in #217.

This uses iNaturalist's taxa API endpoint, and queries using the acceptedScientificName field returned from the DistinctTaxon GraphQL type.

A few pitfalls of the current implementation:

• iNaturalist uses its own IDs to represent taxa, rather than a unique URL (https://id.biodiversity.org.au/node/apni/2916930), meaning we have to query via acceptedScientificName, which can produce inaccurate results.
• Each image component fires a separate GraphQL query to perform the taxa search rather than all images being returned from the distinctTaxa query.

Screenshot

[MortenHofft]

Would it make sense to allow queries like this (not entirely thought through)

query {
  taxonMedia(key: String) {
    images: [Image!]!  # using the audobon core Image definition here perhaps? As that seems to be the most expressive standard for this
  }
}

// resolver
{
  Query: {
    taxonMedia: (_, { key }, { dataSources }) =>
      dataSources.inatAPI.getImageByKey({ key }) // for now we use the inat api, but I hope we will find another solution down the line
        .then(...some mapping to the format we need for the type)
  }
}

And then have the resolver use inat for now, but not exposing anything inat specific in the types and queries?

[jack-brinkman]

That makes sense to me - @djtfmartin, any thoughts/concerns with using Audubon Core for the image definition?

[jack-brinkman]

@MortenHofft @djtfmartin I've just pushed a commit that changes the Image type to use a subset of Audubon Core terms & matches your preferred query naming (taxonMedia instead of representativeImage).

One small issue that I see is that there aren't multiple terms to provide different-sized variants of an image - i.e. iNaturalist supplies a small square.jpg image URL and medium.jpg, which is a non-square larger variant. I've added an unofficial accessOriginalURI property for accessing larger, full-sized variants.

[jack-brinkman]

I've now implemented the ability to view more images, derived from @MortenHofft's pre-existing images UI :)

[jack-brinkman]

Screenshot of the above change. Note - all menu items excluding Search GenBank are supplied via config, and are not present by default.

[jack-brinkman]

A species link has been added as per @djtfmartin's suggestion. .env.json needs to be updated to handle these links:

{
  "SPECIES_URL": "https://bie.ala.org.au/species" // gbif: https://www.gbif.org/species
}

Example Image

[MortenHofft]

We already have a way to do that. At least it was intended for use cases like this, but it might be overly complex or not work for you.

ResourceLink it is called and is located in the components folder. It is configured as part of the general routing configuration (there isn't one for species currently, but we can add that). It allows routes to vary per language, and doesn't require a new build and it works with history push if needed.

To use it you would add a new route configuration for species. And then use the resourceLink and point to the config when using that component.

It is what we do here https://github.com/gbif/gbif-web/commit/60f91989cdf21e58204445c6f99b53cd316e4ac2#diff-f72823e5552aafb9e8cc789fd28c1c47a0fca6a660c93404019da10ef4efd60fR34

and

https://github.com/gbif/gbif-web/commit/337f11cb4d1e5672474206c4bbcfbac30d2a2741#diff-1365cb24b4a09f253491a1b77d801c14e60f7c734eb41027405c4cefce9d481dR56

It is also possible to use the context more directly like

const routeContext = useContext(RouteContext);
const path = routeContext.datasetSearch.route;

[jack-brinkman]

Ah, okay - I initially opted for the .env configuration as it was very straightforward & I couldn't see the config value changing in the future. However, if the ResourceLink component is your preferred method to handle these types of links, I'll change the implementation to use them :)

[jack-brinkman]

Updated Screenshot