Idr front page

[will-moore]

Updates to IDR front page.
Draft PR to allow others to try, feedback etc.
But not intended to merge in it's current form...

TODO:

• move 'example image' hard-coded for each study to use 'Study Example Image' tag on image
• cache-busting on JS, CSS etc.
• return to editing src/categories.js and compiling -> static
• content for 'Analysis Examples` tab
• Remove 'Case Studies' tab for now
• background carousel only has Cell/Tissue images for /cell and /tissue pages
• Fix [Cell] and [Tissue] buttons on /cell and /tissue pages
• Don't load background images until visible or 'next'
• Show stats from https://github.com/IDR/idr.openmicroscopy.org/blob/master/_data/studies.tsv and/or https://github.com/IDR/idr.openmicroscopy.org/blob/master/_data/releases.tsv
• tweak thumbnails to always fill the small squares

Notebooks
See also IDR/idr.openmicroscopy.org#144 and IDR/idr.openmicroscopy.org#140

• Studies with notebooks allowing to explore associated results idr0113, idr0094, idr0093, idr0001 (currently in idr-notebooks repo, to be moved)
• Generic notebooks in idr-notebooks,
• Tools against using IDR:
  • Fiji- idr0021 +zarr
  • CellProfiler-idr002 +zarr
  • Python-idr0062 + zarr
  • ilastik-idr0062 +zarr
  • R-idr0021/40

[pwalczysko]

thank you @will-moore
2 RFEs

1. The top backgriound image is having a black bit to the right, is that how the image looks in original ?
2. The Twitter column is much much longer than the block on the left with the videos, leaving a very long white space on the left when you start scrolling down the page. Could the twitter column have its own scrollbar ?

[sbesson]

Possibly for a follow-up PR, how do you propose to source this data? It is currently maintained in https://github.com/IDR/idr.openmicroscopy.org/blob/master/_data/releases.tsv and used by the Jekyll website although it looks like we need to have it consumed in several places.

[will-moore]

I could try to load it from there. I was also thinking that the numbers should be different in the Cell and Tissue IDR sections, but I guess we don't have those numbers anywhere?

[sbesson]

That's correct, we do not collect global release statistics differentiating tissue/cell studies at the moment.

Since you are already filtering the studies to display the thumbnails, it should also be possible to make use of https://github.com/IDR/idr.openmicroscopy.org/blob/master/_data/studies.tsv and compute these numbers on the fly.

[sbesson]

When under either https://idr-testing.openmicroscopy.org/cell/ or https://idr-testing.openmicroscopy.org/tissue, clicking on the Cell - IDR or Tissue - IDR buttons above the search box appends /cell or /tissue to the URL and opens a broken link

[sbesson]

Also the thumbnails are still stretched but display with the correct aspect ratio in the tooltip

[will-moore]

@sbesson I think that's a CSS caching issue again. Looks OK for me ;)

[sbesson]

The issues reported in #91 (comment) were related to the deployment using https://github.com/IDR/deployment and the fact the gallery needs to be deployed on all servers (omeroreadwrite + 4 omeroreadonly) to work with the nginx caching. After fixing the deployment, the thumbnails are now displaying as expected.

Adding some feedback from @jrswedlow who performed some testing in incognito Chrome Window

1. Carousel no longer switching
2. As the number of thumbs grows will the palette grow so large that vids fall off bottom. Do we make the palette wider?
3. If I go to Cell-IDR and the select Tissue-IDR or Cell-IDR, get 404 - see also Idr front page #91 (comment)
4. On thumbnail tooltip, can we add more info to help me understand what the study is? Would Publication Title or Experiment Description fit? Or maybe links to Publication and Data (not sure if we want people to leave our site, but pop up new tab?
5. Do we add a Sort for the thumbs. Current in reverse idr order.
6. Naive question-- any chance of elevating Imaging Method to a full search term. It's hard to find, e.g., light sheet fluorescence microscopy.

[will-moore]

Re: #91 (comment)

• 1. Carousel is working for me - left/right keys and/or clicking on the little circles (any except the filled circle should work)
• 2. I've just pushed a commit to limit the height of the thumbnails to 4 rows, with scrolling
• 3. Yep - will fix...
• 4. I think the thumb tooltip is already showing study title? I don't think there's space for description unless the tooltip allows scrolling... or expands when you hover... or both...? Hmm.. maybe....
• 5. sort by... release date? idr number? -nearly the same thing. Maybe could do a table view. Need to think where to add controls...
• 6. Imaging Method is already a search term:

[will-moore]

After discussion with IDR team & Jason this morning, removed the "only show 4 rows of thumbnails" to show them all now, with a limit of ~6 rows.
Also - "carousel not working" meant not auto-playing, which is as intended.

[sbesson]

As mentioned today, the downside of depending on the master is that studies.tsv will include unreleased statistics.

I have not been able to find a native Jekyll way to expose CSV files as raw files so that they could be directly consumed. On the other side, the IDR deployment is currently constructed as follows:

• / proxies the omero-gallery application deployed on each read-only Web deployment
• /about serves the static content built from https://github.com/IDR/idr.openmicroscopy.org

So having gallery depending on static files under /about would probably create some unnecessary complexity.

An alternative could be to update the deployment playbook to deploy the static content under /about and also copy studies.csv in a static location of the OMERO read-only deployments where it could be consumed by the new omero-gallery.

[sbesson]

Another alternative which does not completely break the deployment is to make this URL or at least the ref configurable.
We already have a variable containing the tag for the static website and this could easily be used to retrieve the studies.tsv e.g. https://raw.githubusercontent.com/IDR/idr.openmicroscopy.org/2022.02.28-1/_data/studies.tsv in this case.

[sbesson]

Capturing the output of some minimal testing of the filter box

A few comments:

• overall the ability to filter by any metadata feels complementary to the hardcoded drop-down menu which exposes controlled vocabulary
• having a tabular representation of the studies when performing a search feels very intuitive. Regarding various comments about the intrusivity of pop-ups, this makes me wonder whether we would like to expose this tabular representation as an alternative to the gallery of thumbnails w/o the filtering
• I found the new gallery of images makes a good job of hiding the complexity of our data (study > {experiments,screens} > images) from our users by dropping the intermediate layer I am a bit concerned that the filtering result window re-introduces this complexity and will lead to confusion e.g. "why is there one marrowquant icon in the gallery but 2 in the results?"
• the text on the right column is barely formatted. in particular there is no distinction between keys and values and it feels very text-heavy compared to the nice gallery of images

Overall, while I think the new filtering functionality addresses a clear need, I feel like the results view does not have the same level of maturity and testing as the rest of the new UI. Whether to bring this to production immediately or as a second step is a decision we will need to make as a team.