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:

• [x] 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
• [x] content for 'Analysis Examples` tab
• [x] Remove 'Case Studies' tab for now
• [x] background carousel only has Cell/Tissue images for /cell and /tissue pages
• [x] Fix [Cell] and [Tissue] buttons on /cell and /tissue pages
• [x] Don't load background images until visible or 'next'
• [x] 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
• [x] tweak thumbnails to always fill the small squares

Notebooks See also https://github.com/IDR/idr.openmicroscopy.org/issues/144 and https://github.com/IDR/idr.openmicroscopy.org/pull/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]

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 https://github.com/ome/omero-gallery/pull/91#issuecomment-1033570493 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 https://github.com/ome/omero-gallery/pull/91#issuecomment-1033566747
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: https://github.com/ome/omero-gallery/pull/91#issuecomment-1035019211

• 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.

[jburel]

Excluding this PR. https://github.com/ome/omero-gallery/pull/93 (django upgrade has priority)

--exclude

[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.