full-screen mode details

[eplebel]

details of full-screen mode with side panel for viewing (supported) embeddable content: i.e., embeddable full-text PDFs, HTML articles/pages, interactive notebooks/code capsules, open peer review, supplementary materials PDF files, etc. (Live demo)

for viewports > 1900px, a full-screen icon will appear immediately to the right of a supported embeddable content's external-link icon, which when clicked, will open (w/ animation if easy to add) a side-panel (to the right) and display the content within it (pressing the "ESC key" or "X" within the panel closes the panel). --> if viewport <1900px, full-screen icons are not visible, so user cannot enter full-screen mode (ensuring that the right-hand article card action buttons (i.e., "EDIT", "LINK", etc.) overflow over the vertical-scrollbar of the left-hand article list panel...)

full-screen mode will be available on the homepage (recent articles component), search results page, article page, and author page (but NOT for author page external embed widget for now).

(difficult) for contract#2, only the following embeddable content will be supported:

• full-text PDF

  • direct links to .pdf files e.g.: https://etiennelebel.com/documents/lbcl(2017,jpsp).pdf http://urisohn.com/sohn_files/wp/wordpress/wp-content/uploads/Shareable-IMA-2019-07-09.pdf https://ppw.kuleuven.be/okp/_pdf/Moshontz2018TPSAA.pdf https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5283063/pdf/sdata2016120.pdf https://www.nature.com/articles/sdata2016120.pdf https://pdfs.semanticscholar.org/fc68/d572dc1cff3554c92eea859b35f3fed2fa62.pdf
  • Meta-Psychology PDFs, eg: https://open.lnu.se/index.php/metapsychology/article/view/843/1835 https://open.lnu.se/index.php/metapsychology/article/view/878/1630
  • Frontiers PDFs via readcube, eg: http://www.readcube.com/articles/10.3389/fpsyg.2017.01691 http://www.readcube.com/articles/10.3389/fpsyg.2017.00908

  code logic: show full-screen icon: if (contains "open.lnu.se/index.php") or if (contains "readcube.com/articles") or if (ends w/ ".pdf", except if URL contains "github.com", "psycnet.apa.org/fulltext", or "academia.edu.documents")

• full-text HTML

  • frontiers HTML articles e.g.: https://www.frontiersin.org/articles/10.3389/fpsyg.2017.01004/full https://www.frontiersin.org/articles/10.3389/fpsyg.2017.00918/full https://www.frontiersin.org/articles/10.3389/fpsyg.2017.00908/full
  • independent HTML articles e.g.: https://rubenarslan.github.io/paternal_age_fitness/5_compare_robustness.html https://explorablemultiverse.github.io/examples/dataverse/ https://explorablemultiverse.github.io/ https://greenelab.github.io/scihub-manuscript/ https://trang1618.github.io/tpot-fss-ms/

  code logic: show full-screen icon: if (ends w/ ".html") or if (contains "frontiersin.org/articles" and ends w/ "full") or if (contains "github.io")

• preprints

  • any direct links to .pdf files (with same exceptions as for full-text PDFs above), egs: https://www.research.ed.ac.uk/portal/files/46321079/Perceptions_of_Sexual_Advances_Main_document_Final.pdf
  • biorxiv preprints eg: https://www.biorxiv.org/content/biorxiv/early/2019/08/09/726505.full.pdf https://www.biorxiv.org/content/biorxiv/early/2019/08/20/739557.full.pdf

  code logic: show full-screen icon: if (ends w/ ".pdf", except if URL contains "github.com", "psycnet.apa.org/fulltext", or "academia.edu.documents")

• preregistration

  • any AsPredicted.org prereg URLs containing "aspredicted.org" and ending w/ .pdf, egs: https://aspredicted.org/h33dn.pdf https://aspredicted.org/963hz.pdf https://aspredicted.org/nfj4s.pdf

• data/code badges:

  • CodeOcean code capsule links: if user links to:
    • eg1: https://codeocean.com/capsule/1324693/ (or https://codeocean.com/capsule/1324693/tree/v1) display full-screen icon and display following embedded code capsule in side panel: <script src="https://codeocean.com/widget.js?slug=1324693" async></script>
    • eg2: https://codeocean.com/capsule/3545064/tree/v1 embedded as: <script src="https://codeocean.com/widget.js?slug=3545064" async></script>

• open peer review URLs:

  • Collabra open peer review PDF links, eg: http://s3-eu-west-1.amazonaws.com/ubiquity-partner-network/ucp/journal/collabra/collabra-pr-23-v2.pdf code logic: show full-screen icon: if (ends w/ ".pdf", except if URL contains "github.com", "psycnet.apa.org/fulltext", or "academia.edu.documents")

• supplementary materials URLs, egs: http://p-curve.com/Supplement/Supplement_pcurve1.pdf http://urisohn.com/sohn_files/papers/jeea_appendix.pdf
  code logic: show full-screen icon: if (ends w/ ".pdf", except if URL contains "github.com", "psycnet.apa.org/fulltext", or "academia.edu.documents")

(NOTE: in the future, we should "validate" each full-screenable links, and only display a full-screen icon if link doesn't return a 404)

• key figures/videos within article card will open full-screen via much better FancyBox media viewer (as implemented on my alpha page), rather than currently limited/suboptimal React Image Lightbox viewer that we're currently using.
  • NOTE: some folks have reported an issue trying to port fancyBox into a React app (possible due to dependency issue w/ jQuery, see here), however, others have successfully been able to import it, so hopefully it's possible and/or there's now a fix/workaround for this.
  • if fancyBox works, or if a better media viewer is implemented that supports image captions (because current React Image Lightbox doesn't support captions, one of its many limitations), please add the following image caption text: "Figure/table is reproduced based on an open license or under Fair Use for educational/scientific purposes."

Content that will NOT (yet) be supported:

• any direct links to .pdf files for:

  • supplementary materials:
    • OSF project PDF or .docx files are embedabble, but i'm not sure there's a way of knowing the file type from an OSF project URL alone, eg:
      • https://osf.io/gpu3a/ is an embeddable PDF file (https://mfr.osf.io/render?url=https://osf.io/gpu3a/?action=download%26mode=render)
      • https://osf.io/aetd9/ is an embeddable .docx file (https://mfr.osf.io/render?url=https://osf.io/aetd9/?action=download%26mode=render)
      • but https://osf.io/96ucr isn't because it just points to a project directory, and "https://mfr.osf.io/render?url=https://osf.io/96ucr?action=download%26mode=render" returns "OK" (but they may have an API endpoint that does yield the file type, e.g., "entity type" or "entity attribute" see https://developer.osf.io/#tag/Entities-and-Entity-Collections and https://developer.osf.io/#tag/Embedding )
    • shinyApps: these are embeddable (eg: http://shinyapps.org/apps/N-per-discovery/), but there doesn't seem to be an a priori/systematic way to validate these URLs
  • original study target article for replication or commentary article types: yes, but a combination of code logic (and exceptions) for full-text PDF, full-text HTML, and pre-print from above (given these could be any of these 3 possibilities)

• Full-text PDF:

  • PLOS ONE (doesn't seem to allow -- for either PDF or HTML -- also due to cross-origin blocking [aka 'X-Frame-Options' = 'sameorigin'?], but should probably reach out to them; eg: https://journals.plos.org/plosone/article?id=10.1371/journal.pone.0202075)
  • F1000 (same issue; eg: https://f1000research.com/articles/8-1563)

• Preprints:

  • OSF preprints (does not appear to be embeddable, but perhaps could open a GitHub issue and ask them...)
  • preprints.org (also don't seem to allow embedding due to cross-origin blocking

• Data:

  • embedded OSF data (.csv, .sav, .txt, etc.) except doesn't render correctly (probably their bug, so just ignore these for now)
  • Figshare data has embed functionality, but very ugly/suboptimal, so will ignore for now
  • Harvard dataverse: terrible UI/UX and doesn't seem to offer embed capabilities
  • Zenodo: nope (but maybe the most promising data repository, other than google dataset search/public data explorer)
  • DataDryad: nope
    
    

****various reasons why content cannot be embedded:

• "frame-ancestors 'none'" (e.g., https://github.com/eplebel/science-commons/blob/master/curated/dijkstra-et-al%5B2015%5D.pdf)
• 'X-Frame-Options' to 'deny' (e.g., https://journals.plos.org/plosone/article?id=10.1371/journal.pone.0202075 )
  **SEVERAL techniques exist to work around sameorigin restrictions, however, not sure how effective and/or legal these are.... (as listed here: https://stackoverflow.com/questions/3076414/ways-to-circumvent-the-same-origin-policy)

[eplebel]

your first pass at this @mickaobrien (https://github.com/ScienceCommons/curate_science/compare/ead2fd8357...74114fd5f3) is looking pretty good, I quite like it overall!

a few minor tweaks:

• revert back max-width=650px for article lists (&/or entire MuiGrid-root container), see screenshot below
• right-align full-text links (as they previously were)

and plug in the fancyBox media viewer for all article key figures.

hopefully you can push these minor tweaks by friday, thanks so much!!

[eplebel]

and plug in the fancyBox media viewer for all article key figures.

any chance for this?

[mickaobrien]

:crossed_fingers: Haven't had a chance to look at it yet, but I will. Hopefully it'll be a quick fix and I'll get it done today or tomorrow. I'll let you know either way.

[eplebel]

thx so much!

[mickaobrien]

Just push it in the latest comit (b12397181848e8f7fda546a24a86d7c505effc72). I think everything is working but have a look around and let me know if there are any issues.

[eplebel]

that's so awesome!!, thanks for squeezing this in. looks really delicious, i'm really happy with it (only noticed a tiny issue , but it can wait).

ok so you could you please "hot fix" these into production, i.e., fancyBox commit (https://github.com/ScienceCommons/curate_science/commit/b12397181848e8f7fda546a24a86d7c505effc72), and the max-width commit (https://github.com/ScienceCommons/curate_science/commit/639ff70d938d57d76c8c597812cef9413c922bad), and 3 other minor ones i pushed, typo (https://github.com/ScienceCommons/curate_science/commit/ead2fd8357ce4f2b78250922bad0998861d581f7), and 2 adding Mathijs as technical advisor (https://github.com/ScienceCommons/curate_science/commit/42d3d6c00a6e6f04d8e4e0ef73224f3d4278bfcb , https://github.com/ScienceCommons/curate_science/commit/dc0273fa52c74ba136f5b79c1ef18b3aeb73137f). thanks a million!

[mickaobrien]

:+1: Just pushed it there, looks good to me. Let me know if there are any issues.

[eplebel]

awesome!! everything looks good. only minor issue is that the max-width update isn't showing up correctly (see below). is it perhaps just a dist, bundle.js webpack issue?

[eplebel]

actually, i don't think it's a simple bundle.js issue; i think the issue is due to the remaining min-width=650px in the ArticleList.jsx (see line29 ) , which you removed for the full-screen mode stuff. so ya, if you don't have time to fix this, no worries. and thanks again for squeezing in the FancyBox update!

[mickaobrien]

You're welcome!

Ah yeah, I see the issue. I might leave it for the moment if that's ok with you? The structure of these pages is a bit all over the place — the layouts and widths are being changed at several different levels of the component tree which can make it hard to figure out what's happening. We could probably do with cleaning up the overall structure at some stage so it's easier to control. Or just wait to merge in the full-screen stuff and it'll all be fine :laughing:

[eplebel]

ya sounds good... (and ya i think it's mostly already fixed within the full-screen changes). have a happy and relaxing holidays!

[mickaobrien]

Thanks, you too!

[eplebel]

here are the remaining minor issues to get achieve a scaled-back version of the full-screen mode specs:

• [x] left panel needs a vertical scrollbar (so that when scroll down article list, the right-panel embedded viewer does NOT also scroll)

• [x] embedded viewer panel height issue: viewer panel should always be 100% height of viewport (currently if only 1 article in article list, the viewer panel is incorrectly the height of that 1 article)

• [x] close viewer when browsing away from a page currently displaying viewer: for example, from recent page to article page, from author page to article page, from recent page to author page, etc.)

• [x] increase icon size of full-screen and external link icons: to 20px (from 16px; making sure the 2 icons remain vertically aligned)

• [x] add 1 exception for when to active full-screen icon, i.e., any non-https URLs (which don't work due to a "mixed-content error", which blocks non-https http content (unless you can think of a workaround to allow embedding non-https content?)): example1: http://www.readcube.com/articles/10.3389/fpsyg.2017.01691 example2: http://urisohn.com/sohn_files/wp/wordpress/wp-content/uploads/Shareable-IMA-2019-07-09.pdf (i guess this could also happen for HTML and preprint URLs, so perhaps also add exception for these too)

• [x] close viewer panel when hitting ESC key (whether focus is on left or right panel; minor issue, could live w/out this if it's not a quick fix)

please let me know if you have any questions @mickaobrien , thanks!

after full-screen mode is done, i'll do one last round of final testing and make a final small set of minor requests.