[GA2] Add organism images to landing page, tables and analysis page

[Smeds]

The landing page of www.genomeark.org features a random assortment of images showcasing various organisms. Each image is clickable and redirects users to a page with more detailed information about the selected organism. I believe this visually appealing feature would be a great addition to www.genomeark2.org

Inspiration

Landing page

Part of organism page

Design suggestions

Mockups for GenomeArk2 Landing Page

Don't know if this is a good layout, but it's two suggestions.

The selection process of deciding which images to be shown could be:

• the latest constructed assemblies
• random set of any organism
• random set of organisms filtered out by the organism selector

I could also see these pictures being added to the tables and the analysis page, they are usually really nice to look at.

Data struture

A good source for images is wikimedia, example Social_Flycatcher and we also could reuse files from genomeark.github.io.

catalog/ga2/source/organism.json

We should add image entries to the organism.json file with the current information

1. source_url: where have the file been retrieved from (just for source tracking)
2. credit: person who own the rights of the image (displayed with the image)
3. license: license name (just for source tracking)
4. license_short: short name of license (displayed with the image)
5. page: name of page where file was found (displayed with the image)
6. path: location where we can access the file (used to display image)

This information should be added during the build process tot following files:

• output/organism.json
• output/assemblies.json

current structure

organisms:
  - ploidy:
      - DIPLOID
    taxonomy_id: 81927
  - ploidy:
      - DIPLOID
    taxonomy_id: 28680
  - ploidy:
      - DIPLOID
    taxonomy_id: 3371016

new structure

organisms:
 - ploidy:
      - DIPLOID
    taxonomy_id: 81927
    image:
      source_url: https://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Female_village_indigobird%2C_Vidua_chalybeata%2C_at_Mapungubwe_National_Park%2C_Limpopo%2C_South_Africa_._Not_good_shots%2C_but_they_go_with_all_the_males_I_posted_%2818047546632%29%2C_crop.jpg/960px-thumbnail.jpg
      credit: Derek Keats
      license: Creative Commons Attribution 2.0 Genericn
      license_short: CC BY 2.0
      page: wikimedia
      path: public/organisms/ga2/81927.png
  - ploidy:
      - DIPLOID
    taxonomy_id: 28680
    image:
      source_url: https://upload.wikimedia.org/wikipedia/commons/thumb/e/ee/Northern_pintail_drake_in_flight_at_Llano_Seco-2961.jpg/960px-Northern_pintail_drake_in_flight_at_Llano_Seco-2961.jpg
      credit: Frank Schulenburg
      license: Creative Commons Attribution-Share Alike 4.0 International
      license_short: CC BY-SA 4.0
      page: wikimedia
      path: public/organisms/ga2/28680.png

Tasks

• should this feature be introduced
• decide how to select images to be shown
• what size should the image have
• what should we do I no image can be found
• Create sub-tasks for implementing this feature

[Smeds]

@nekrut @NoopDog what do you think about adding images of the organisms to GA2? I believe that Giulio have said multiple times that it would be nice to have images of organisms.

[Smeds]

I will make a pull-request with first attempt of these feature looking something like this:

Select workflow page

Assembly table

Organism table

ToDo

• Decide if the column position is good, or if the icon should be moved @nekrut @NoopDog
• Create a new issue discussing if the images should be introduced on the landing page.
• Where do we store the images (bucket/git/other?

[NoopDog]

Ok thx @Smeds will take a look.

[Smeds]

In the current implementation I have moved the image information into a separate file to keep organism more clean. It's now under catalog/ga2/source/organism_image_data.json

[Smeds]

I have a first version (#939) that add organism images to the tables and Select workflow page. Images are stored on the genomeark bucket and need to be fetched during build/deployment npm run fetch-ga2-organism-images this command should be run before npm run build-ga2-db.