updated article editor & article views

[eplebel]

summary of improvements/changes to the article editor:
(new fields - and some of the other new features - will require updating the data model (see updated ER diagram (entities to-be-added in blue))

• improved organization & layout of input boxes (two-columns for viewports >1900px, everything fitting vertically within 1050px; stacked for viewports <1900px)
• curation of several new fields (URLs to videos, talks/presentation slides, supplementary materials/appendices, and media coverage)
• ability to add multiple URLs for preregistration, study materials, data, and code input boxes
• ability to indicate reasons for non-transparency & new Basic 4/Basic 7 retroactive disclosure statements
• DOI lookup metadata extraction (already implemented (see here), just needs to be plugged in/adapted)
  

DETAILS:

• the new sections "BASIC METADATA", "PRIMARY TRANSPARENCY", "SECONDARY TRANSPARENCY", and "MEDIA & ASSOCIATED CONTENT" are now grouped and spaced for better organization and visual distinctiveness
• certain fields are grey but enabled (e.g., citations, downloads, views, abstract, keywords, prereg type, reasons for non-transparency drop downs) vs. others are grey/disabled until required input is inputted (e.g., protected access check boxes)
• revert back to using proper Material UI text fields (i.e., Outlined Textfields with placeholder and always-visible label
  • re-add text field adornments to applicable fields (i.e., Outlined Input Adornments, see mockup above) (see older ArticleEditor.jsx where this used to be implemented)
• new article type: "Original - Meta-research": display only Prereg (P), Materials (M), Data (D), & Code (C) badges within article editor and for article card view (see Card C in article views specs below; "Original - Meta-research" label native title: "Article reports new observations regarding a meta-research question")
  (Article type dropdown default remains "Original")
• new details input boxes for 2 article types:
  • Reanalysis - Reproducibility/Robustness: display "Original article/study" and "Original article URL" input boxes (both optional)
  • Commentary: display "Target article" and " Target article URL" input boxes (also both optional)
    
• reduce preregistration type radio buttons and radio button text so they can fit within prereg row
• multiple URLs for preregistration, materials, data, & code: these will be implemented as MD chip input components exactly as described for the Video URLs, Slides/presentation URLs, and Suppl. materials URLs within the Secondary Transparency section below (displayed as in mockup here)
  
• protected access: for materials and data (ONLY), if a valid URL is entered, the respective "Protected access" checkbox becomes enabled. if checked, the materials and data badge popups are displayed slightly differently than the normal case: "Materials" instead of "Public Materials" and "Data" instead of "Public Data", and the text "(protected access; login required)" to the right of each URL (displayed as in mockup here for Materials; same for Data; very rare edge case where "protected access" applies only to one of multiple URLs will be dealt with later)
  
• reasons for non-transparency: for materials and data, a "Reasons for non-transparency" dropdown is displayed. each dropdown only has 2 options ("Proprietary/IP" and "Ethical reasons"), and the default is blank. If a reason is selected (for either materials or data), a dark grey (#b5b5b5) unavailable badge is displayed and this reason is displayed on badge hover (displayed as in mockup; example text for Study Materials: "Study materials not available: Ethical reasons"). The default unavailable badge should be updated from #b5b5b5 to a lighter grey: #f0f0f0)
  
• Reporting standards improvements:

  • Reporting standards dropdown defaults to "Basic 4/Basic 7 (retroactive)" (as in mockup above) and should use the proper Material UI Outlined Select text field with "Reporting standards" as label.

  • details for the "Basic 4/Basic 7 (retroactive)" component:

    • URL of Basic 4 (retroactive) details ; URL of Basic 7 (retroactive) details
    • if "All details reported in article† (for all studies)" checkbox is checked, then the corresponding text field to the left becomes disabled
    • "Disclosure date" defaults to current date, but can be changed to a prior date (just a text field for now; later we'll implement a more proper date-picker component)
    • if user enters information (or checks checkboxes) for:
      • items 1 through 4, "Basic 4 (retroactive)" reporting standards compliance is achieved (and is displayed for the RS badge popup as in mockup immediately below; "Basic 4 (retroactive)" hyperlinked to this URL)
        
      • items 1 through 7, a "Basic 7 (retroactive)" reporting standards compliance is achieved (and is displayed for the RS badge popup as in mockup immediately below; "Basic 7 (retroactive)" hyperlinked to this URL)
        

  • for the various other reporting standards, display the following:

    • Basic 4 (at submission; PSCI, 2014): as per this mockup (details URL; check boxes checked and non-editable)
      
      • badge popup view:
        
    • MARS (2018): Meta-Analysis Reporting Standards (APA's MARS; see Table 9)
      • badge popup view:
        
        (For the remaining reporting standards, badge popups are displayed the same as the MARS (2018) popup except with different reporting standards name, description text, & hyperlink of course)
    • CONSORT-SPI (2018): Randomized trials of social and psychological interventions (CONSORT-SPI 2018; 26 items)
    • CONSORT (2010): Parallel-group RCTs reporting checklist (CONSORT 2010; 25 items)
    • JARS (2018): Journal article reporting standards for articles reporting new data (APA's JARS; see Table 1)
    • STROBE (2007): Observational/correlational studies reporting checklist (STROBE 2007; 22 items)
    • ARRIVE (2010): Animal research reporting checklist (ARRIVE 2010; 20 items)
    • Nature Neuroscience (2015): Life science neuroscience studies research checklist (Nature Neuroscience, 2015)
    • PRISMA (2009): Systematic reviews/meta-analyses reporting checklist (PRISMA 2009; 27 items)
    • PRISMA-P (2015): Systematic reviews/meta-analyses reporting checklist (Updated PRISMA-P 2015; 17 items)
• updates to Commentaries component as follows:
  • display "Authors/publication year" and "Commentary URL" input boxes (and corresponding Delete icon) by default
  • "ADD COMMENTARY" button is replaced by an "add icon" to the right of the delete icon (with the following title text on hover: "Add additional commentary"). If an additional commentary is added, the add icon moves to the end of the new (2nd) commentary row (as implemented within the "Edit Contact" component of Google's Contacts product to add additional email address or phone number)
• "Add Figure" section remains unchanged for this contract, so this section can be ignored (except for adding new section text "MEDIA & ASSOCIATED CONTENT")
• Video URLs, Slides/presentation URLs, and Suppl. materials URLs input boxes are Material UI chip input components (see here and MatChipInput) w/ trimmed text beyond 20 characters (similar to MD chip inputs of Gmail's email addresses field). That is, user can copy-and-paste a URL (or type it), presses ENTER, and (deleteable trimmed) chip is created. Cursor then blinks to the right of the last chip so the user can enter another URL.
  • for "Suppl. materials URLs", each URL will be displayed as "Suppl. materials # 1", "Suppl. materials # 2", etc. (light color given secondary importance)
  • Video URLs, Slides URLs, and Suppl. Materials URLs will be displayed as follows (a separate Video or Slides icon for each Video or Slides URL inputted (light color given secondary importance); see article views live demo, first article card for Slides icon):
    
• Media coverage: this component behaves and is displayed exactly like the "Commentaries" component (as described above), but with different text box and placeholder text. Media coverage URLs will be displayed as in mockup immediately above (if no Media coverage URLs are entered, the "News coverage:" text descriptor and entire line is hidden).
• info icon popups text:
  • Impact metrics & Full-text URLs:

Non-paywalled article full-text URLs only. 'HTML URL' means a URL to an HTML page of a full-text article, not a URL to the publisher's website (which is automatically linked in the DOI field). Impact metrics should be curated from the content provider if available. Citation values should be taken from Google Scholar.

• Article type (should probably describe all ATs within this popup!):

The 'Original' article type can also include articles that report a mixture of original and so-called 'conceptual replications', which are considered 'Far' or 'Very Far' replications according to our replication taxonomy. The 'Replication' article type also includes articles that report a mixture of original and replication studies (i.e., 'Close', 'Very Close', or 'Exact' replications according to our replication taxonomy).

• Preregistration:

A 'pregistration protocol' is the study protocol (methods protocol) that was preregistered prior to data collection.'

• Materials:

'Study materials' are all materials (e.g., questionnaires, stimuli, experimental files, etc.) that would be needed for an independent researcher to conduct a replication of a study (in open/open-source or proprietary file formats).

• Data:

'Data' are the minimal data set file(s), in raw or processed form, that are needed to reproduce an article's primary results.

• Code:

'Code' means any statistical analyses syntax files and/or code files that were used to conduct the statistical analyses and/or to generate figures or tables.

• Reporting standards:

Choose the specific reporting checklist that you followed in reporting your study/studies (these are checklists of specific details that need to be reported for the type of study you conducted). For example, if you've conducted an animal study and reported the 20 items of the ARRIVE (2010) checklist, then you would select 'ARRIVE (2010)'. For psychology studies, you can retroactively affirm reporting standards compliance by choosing 'Basic 4/Basic 7 (retroactive)' and providing the information for the 4 (or 7) items (or by ticking the relevant check boxes to indicate that the item-specific information was reported in your article).

for both "Edit" or "New" article actions, editor will be loaded in an improved modal window:

• has a sticky header at the top (like in Google Scholar, example; so Save button is always visible for screen sizes smaller than 1050px)
• reduced modal header height from 64px to 48px
  

Article views (live demo) for the different article types (in order):

• Card A: Replication (5 badges: P (preregistration), M (materials), D (data), C (code), R (reporting standards))
• Card B: Original (5 badges: P, M, D, C, R)
• Card C: Original - Meta-research (4 badges: P, M, D, C)
• Card D: Reanalysis - Meta-analysis (4 badges: P, D, C, R)
• Card E: Reanalysis - Reproducibility/Robustness (or Reanalysis - Meta-research; not displayed) (3 badges: P, D, C)
• Card F: Conceptual (bonus badges)
• Card G: Commentary (bonus badges)
  

[mickaobrien]

@eplebel The editor mockup only has one 'Protected access' checkbox for the study materials and data URLs (rather than one checkbox per URL), should this be set for all URLs together i.e. if one URL is protected then they all are?

[eplebel]

correct
(this of course won't cover the very rare edge case where "protected access" applies only to one of multiple URLs, but this will be dealt with later)

and this limitation applies to the updated view as well whereby the "protected access; login required" text will appear to the right of each URL (even if it only applies to one of them)

***updated mockup:

[mickaobrien]

@eplebel I just pushed the bulk of the changes to staging. There are still a few outstanding issues (e.g. the popups for the reporting standards and the transparency badges, the input adornments) but most of the work for the editor screen itself should be done. Let me know what you think.

I had to upgrade a few libraries (react, material-ui and some related things) to get all the the outlined inputs working correctly so there were a few changes that had to be made to the code to account for this. Everything else should be working as it was before but if you come across anything strange, let me know.

[eplebel]

awesome! overall things are looking good.

i'm going to make a list of the major stuff still missing (or still not working, e.g. DOI LOOKUP doesn't appear to be working) pronto!

also, could you add the search results page functionality, as mentioned in this comment, thanks!:
#55 (comment)

[eplebel]

here's the list (with new or pre-existing mockups moved here to avoid ambiguities/save us time!):

• reduce height of all text fields as much as possible (to still fit the chips i guess, but even the height of the chips could potentially be reduced a little bit)
• i'm only getting the correct 2 column layout when i zoom out to 80% (even though i have a 1920px display); a potential fix (that could kill 2 birds w/ one stone) is to shrink down the font-size of all text across the entire site (because since jeremey's 1st version), i've found the font-size too large, and actually typically zoom out to 90% to make it look better. (i'm not sure if there's an easy way to reduce font-size of all text (keeping relative font-size of text fields w/ different font-size constant), but it's something worth considering...)
• remove the horizontal scroll bar at the bottom
• remove the bottom "SAVE" and "CANCEL" buttons altogether (and entire row) given that both of these actions can already be completed in the modal header
  
• DOI LOOKUP doesn't appear to work (i.e., clicking "DOI LOOKUP" button doesn't populate the title, authors, publication year, and journal name for valid DOIs, eg 10.1016/j.jesp.2008.04.005)
  • partially fixed, but journal name still not populating correctly on staging
    (this seems fixed since latest set of commits)
• missing: input boxes for details of "commentary" & "Reanalysis - Reproducibility/Robustness" article types are missing (and the display of this info for the article type popup within article card)
  
  displayed as follows:
  
• missing: display protected access status for materials and data links (to the right of each link)
  
• fix: reasons-for-non-transparency dropdowns (for materials & data) should always be enabled
• missing: display (dark-grey) badges for non-transparent exempt materials & data badges (w/ corresponding title displaying the reason for the non-transparency); and correspondingly using a lighter grey badge for the default unavailable badge: "The default unavailable badge should be updated from #b5b5b5 to a lighter grey: #f0f0f0".
  
• disclosure date is not saving (it seems to always revert back to the article creation date)
• to simplify things, please remove the "Basic-4 (retroactive; 2012)" reporting standard because it's already included in the "Basic 4/Basic 7 (retroactive)" reporting standard
• missing: reporting standards text descriptions (w/ hyperlinks) for all reporting standards, see above ("Basic 4/Basic 7 (retroactive)" already correctly displays its text description)
  • simplification: for "Basic 4 (at submission; PSCI, 2014)", can just display following text (instead of more complicated UI spec provided):
    "All (1) excluded data (subjects/observations), (2) tested experimental conditions, (3) assessed outcome measures/dependent variables, and (4) the sample size determination (& data collection stopping rule) have been reported in the article (for all studies). Since January 2014, all authors submitting to the journal Psychological Science have affirmed compliance to this reporting standard (see details at the journal website)."
• missing: displaying reporting standards badge within article card (and popup displaying actual disclosed information) (see above for mockups)
• missing: the "commentaries" and "media coverage" components still need to be updated to the spec (text fields displayed by default, and a "+" button displayed at the right of the delete icon (for the last item only) to add additional commentaries/media coverage items
  
• missing: displaying the video URLs, slides/presentation URLs, supp materials URLs, and media coverage items within article card
  
• missing: all info icon popups within article editor (see above for actual text)

hopefully we can have prompt iterations for these given we're a bit behind schedule and was really hoping to be able to show contract#1 features to the team here in Leuven by begining of academic term in a few weeks, thanks!
(and thanks again for all your hard work on this, very exciting! (and i should also mention that haven't noticed any pre-existing functionalities/features broken by all these major changes, which is pretty impressive!)

[mickaobrien]

@eplebel Thanks for all of that, it clarified a lot. I was trying to sort out as many of the issues as possible yesterday because I won't be able to get back to this until next Wednesday. There are still a few left (and a few fixes to my fixes 😄) but hopefully they won't take too long. And I haven't forgotten about the search box changes either, they're on the way!

[eplebel]

ok thanks for heads up. i will carefully review/test all contract#1 pages/features, and then make a list of all outstanding issues so that we can iterate as efficiently/promptly as possible upon your return!

[eplebel]

final outstanding minor issues (above & beyond what's mentioned above):

• add margin-top:-8px to 2nd & 3rd preregtype radio buttons (to save vertical space; see mockup below)

• remove "Reasons for transparency" header

  • also remove centered hyphen below it and entire corresponding div, so that the 1st preregtype radiobutton stays on one line (see mockup below)
  • for both materials & data non-transparency dropdowns: add default (non-selectable) placeholder text: "Non-transparency exemption:" (see mockup below)

• set min-width to publication year text field to avoid it being clipped for two-column layout
  (this seems fixed since latest set of commits)

• move keywords textbox to the right of abstract text field (50/50 split; to save vertical space real-estate) (see mockup below)
  

• for prereg, materials, data, & code badge popups, add left-margin (or invisible placeholder image) for URLs w/out content provider icon (so that links line up when multiple links are available)
  

• multiple URL text fields improvements

  • prevent duplicate URLs from being entered (which i thought was default for MD-chips)
    (UPDATE: some duplicate URLs are already correctly being prevented, eg, "https://google.com", however, duplicates of more realistic URLs are somehow still being allowed, e.g., "https://osf.io/t6q4s/" or "https://figshare.com/articles/LeBel_2010_S_I_Data_and_syntax_/953183" weird!)
  • prevent chips from overflowing text boxes (potential solution: "...wrap all mat-chip elements in a div, then add style display: flex to the div?"
  • add the following placeholder text to all mutliple URL text fields : "Insert URL & hit ENTER" (as done here; it's ok if placeholder text becomes hidden when multiple chips displayed)
  • URLs that aren't yet "chipified" are incorrectly cleared when text field focus is lost; my understanding is that entered text should be "chipified" when user clicks outside text field, as in this angular chips demo under "chip input"/"Chips with input" demo example)

• when adding additional commentaries/media coverage items, focus cursor in the 1st text field (i.e., focus cursor in "Authors/publication year" textbox when adding additional Commentaries; focus cursor in "Media source name" textbox when adding additional media coverage item).
  

• update/shorten text "All details reported in article † (for all studies)" to "All details reported †" (to save vertical space)

  • and update corresponding footnote text to: "† All details reported in article (for all studies) or reported in a public/non-paywalled preregistration protocol or supplementary materials linked herein (URLs to these linked materials must be provided in the relevant fields)."
  • only display "All details reported †" text for the "Basic 4/Basic 7 (retroactive)" reporting standard (i.e., hide it for all other reporting standards (eg PRISMA, CONSORT, etc. ) because it's not relevant)

• missing: under peer review:

  • clicking "Under peer review" disables the "Journal name" text field (sorry i overlooked this)
  • display "Under peer review" as journal name if "Under peer review" checkbox is checked (sorry i forgot to mention how this would be displayed in the spec!);

• for all new multiple URL text fields and Commentaries "Commentary URL" and "Media coverage URL" text fields , attempting to save invalid URLs yields incorrect "[object Object]" error message (if 2 invalid URLs are entered, error message is "[object Object] [object Object]", etc. (for the latter 2 text fields, one must also enter text in corresponding Authors/publication year and Media source name text fields, respectively, to get the error message, see screenshot below).
  
  (note: invalid URLs are still correctly dealt with for the full-text URL, replication original article URL, and open peer review URL fields; though error message should inform user of specific field invalid URL is originating from, but that can be improved later.)

[eplebel]

great work on latest batch of commits, it's really coming together! (20945ec...e444964 and e444964...8608708). everything is working as expected. only the following 3 minor issues were identified:

• max-width of popups no longer seem to be applied; max-width of all popups should be ~450px, to avoid excessively wide popups that are difficult to read: e.g., reporting standards badge popup; replication article type details popup, see screenshot below:
  

• within Reporting Standards (RS) badge popup, clicking "More" for truncated text reveals the truncated text, but then clicking anywhere else on the popup -- makes the popup disappear and reload (which means revealing truncated text for a 2nd "more" is very tricky/confusing because one has to click it twice and let it reload (and then the same problem for clicking on a 3rd more, etc.)

• all links should open in a new window (current behavior for all non-internal links), i.e. links to videos, talks/presentations, supplemental materials, replication target article URLs, commentary target article URLs, reproducibility/robustness reanalysis target article URL, reporting standards details URLs (within article editor and within reporting standards badge popup), etc. (sorry i guess i could/should have been clearer/more explicit about this)

after these are addressed, we're basically almost there. i'd say next critical items are as follows (we could potentially punt on the remaining minor issues):

• missing: all info icon popups within article editor (see above for actual text)
• for all new multiple URL text fields and Commentaries "Commentary URL" and "Media coverage URL" text fields , attempting to save invalid URLs yields incorrect "[object Object]" error message
• prevent chips from overflowing text boxes (potential solution: "...wrap all mat-chip elements in a div, then add style display: flex to the div?"
• place article page content inside a paper card (same style, padding, etc. as article list article card) (article detail page - details #56 (comment))

[mickaobrien]

@eplebel I've pushed a bit of a fix for the issue with expanding the text in the popup. It's still not correct though because if a there's a lot of expanded text the position of the popup is likely to move a lot to fit it all in. One possible solution is to have the popups appear only when the badge is clicked and disappear when the user clicks away. That's not ideal though, I know. Just wanted to let you know the story with it.

[eplebel]

ok, if you can address the overflowing chips issue, i think we can call this contract done!

once that's done, we could then push everything to the master branch, but perhaps we can try to coordinate a rough time, so i can be at the ready in case anything goes wrong (given lots of major changes are going through??)...

thanks again @mickaobrien for all your solid work on this!

[mickaobrien]

Great! I had a look at the overflowing chips the other day and it was trickier than I expected, but I should be able to sort something out later today hopefully. I'll push it to staging for you to have a look and once you're happy with that we can push to master, maybe early tomorrow if that suited you?

[eplebel]

sounds good re: overflowing chips, and re: pushing to master tomorrow morning!

[mickaobrien]

Just pushed a fix for the overflowing chips to staging. Let me know what you think.