Truncate methods: checksums, long summary metadata fields

[TaniaSchlatter]

Design Doc

• Truncate + Toggle Content Display (Google Drive)

Related Issues

• Long (e.g. SHA-512) fixity checksums are too long for display Long (e.g. SHA-512) fixity checksums are too long for display #5210
• Handle long strings in the UI Handle long strings in the UI #6578
• email verify icon overlaps email address email verify icon overlaps email address #4484
• Display when assigning a role Display when assigning a role #5350
• Dataset Description: Doesn't wrap when there are no spaces Dataset Description: Doesn't wrap when there are no spaces #1634
• Dataverse - Description text truncated Dataverse - Description text truncated #1249

Mockups

• https://sketch.cloud/s/90bO0/a/bxvrlj/play

Questions

• Can we pick one format and use for all checksum types, or do we need to show different numbers of characters for different types?
  • The various checksum formats supported by the system are UNF, MD5, SHA-1, SHA-256, SHA-512, which vary from 32 to 512 characters in length... we should one scalable solution to display all the various config options consistently (@mheppler 👋)

To-Do's

• create a list of content types (will require different scalable solutions)
  • checksum (..., display full string, and copy to clipboard)
  • textarea block, e.g. dataset desc, notes (open/close toggle)
  • long strings, e.g. account email Handle long strings in the UI #6578
• review characteristics: what we want to do, and how
• potentially break into separate issues and close this one
• confirm/refine design solutions - plan to apply in scalable "site-wide" way
• identify widgets to use – some trial and error in code

[mheppler]

Last week, I updated my PR #7312 to apply truncation code to the checksums and UNF's on the dataset pg, as requested in #5210. This week, @landreev is helping to investigate issue #5215 in order to apply this feature to UNF's on the dataverse pg for the file search result cards, as I have already applied the feature to the checksums.

In addition to truncating long checksum strings, that PR applies a new attribute to the file dataTable on the dataset pg, that was discovered in an answer on Stack Overflow. By adding tableStyle="min-width:100%;width:auto;" to the dataTable, it no longer cuts off long strings when the overflow is hidden by the width of containing table cell. Also included a css overwrite of the PrimeFaces component.css that was applying the hidden value to the overflow property of table cells in the dataTable component. That was the main culprit responsible for the difficulty displaying long checksums in the file table on the dataset pg (#5210) These changes will help solve some of the issues outline in #6578.

Will solve some of the other UI issues in separate PR's from the checksum PR, as there is already a lot going on in that one. Any additional responsive UI cleanup efforts will outlined here.

[mheppler]

Dataset description with HTML example: https://dataverse.harvard.edu/dataset.xhtml?persistentId=doi:10.7910/DVN/M4ZGXP&version=1.0

With the help of @jggautier, who pointed me to the dataset, Harvard Dataverse Optional Feature Use Data, I was able to get a ballpark number on the description field character length in the Harvard Dataverse.

Of the 29,295 datasets included that data file, nearly half have a description length over 250 characters. With that ballpark number, I am going to start prototyping a truncation/toggle solution that would be applied to descriptions over 500 characters. It's a nice round number, and we can do further, more detailed investigation on the metrics once we've got a working prototype which we can demo for the community.

[mheppler]

There is a list of related issues in the original comment above. A lot has been done in various efforts to resolve these issues, and I just wanted to get an update on them here...

• Long (e.g. SHA-512) checksums Long (e.g. SHA-512) fixity checksums are too long for display #5210 ... this was resolved in PR Checksum truncation, click to copy + file metadata fragment code consolidation #7312
• Account email verified label overlap email verify icon overlaps email address #4484 ... this issue was resolved in the PR 3438 email verification 0121 #7516 for issue Email Verification: 2 issues; refresh un-verifies, verify email button should always be available. #3438
• Manage Permissions assign role label and description cleanup Display when assigning a role #5350 ... this issue was resolved in PR Improved responsive layout, added word-break CSS to Assign Role popup on Manage Permissions pg #7615

NOTE: I have closed issue Handle long strings in the UI #6578 as that only had one outstanding issue, which is also being tracked in this issue.

There are two remaining issues that are very related and might be able to be resolved in one effort...

• Dataset Description: Doesn't wrap when there are no spaces Dataset Description: Doesn't wrap when there are no spaces #1634
• Dataverse - Description text truncated Dataverse - Description text truncated #1249

Those issues will continued to be tracked in this issue. Updates to follow.

[mheppler]

Progress tracking outline...

WHAT TO TRUNCATE
    - descriptions more than 500 characters, ~10-12 lines ... Special thanks to @jggautier for the SQL mastery and pointing me to the dataset_data_subset.txt spreadsheet on Harvard Dataverse. According to that 29.3K slice of production datasets from Oct '19, roughly 14.5K, or a hair under 50%, of those datasets have 500 characters or more in their descriptions, which will get truncated
    - HTML tags including <a>, <b>, <blockquote>, <br>, <code>, <del>, <dd>, <dl>, <dt>, <em>, <hr>, <h1>-<h3>, <i>, <img>, <kbd>, <li>, <ol>, <p>, <pre>, <s>, <sup>, <sub>, <strong>, <strike>, <u>, <ul> (from bundle.htmlAllowedTags, see #1320 b982e3d)

HOW TO TRUNCATE
    - JS plugin https://github.com/pathable/truncate (img ignored, extra <p></p>)
    - not really truncating... just using some css to set a max-height, overflow-y... with a fade background behind a "Read More [+]" button... and when you click read more, the css is changed to display the content of the container... a reverse engineered solution from a "Read more..." button found in the wild because EVERY.SINGLE.SOLUTION I found in my research had one problem or another with it...

HOW TO READ MORE
    - button "Read More [+]", styled as text link, w/ tooltip, aria expanded/controls attr's
    - tooltip "Click to read the full description."
    - (FYI, there is no "read less" in this version)

HOW IS IT ACCESSIBLE/RESPONSIVE
    - adjust summary label and content col width (Bootstrap gridlayout left-right/lg vs stack/md-sm-xs)
    - button w/ aria attributes for controls (i.e. metadata label), expanded true/false (e.g. https://getbootstrap.com/docs/3.4/javascript/#collapse, https://www.w3.org/TR/wai-aria-practices-1.1/)
    - structure.css overwrite class for pre tag width issue
    - img-responsive class added to img width issue
   
 Initial prototype screenshot...
 

QUESTIONS + TO-DO's...

• long strings out of scope (https://stackoverflow.com/a/34651154, https://ux.stackexchange.com/a/39520, https://drafts.csswg.org/css-ui/#text-overflow, https://stackoverflow.com/a/18484181, https://stackoverflow.com/a/24158056)
• made my own custom solution with the help of another read more button I found in the wild try other plugins, line-clamp css, (https://dollarshaveclub.github.io/shave/, https://getbootstrap.com/docs/3.4/css/#less-mixins-truncating, https://stackoverflow.com/questions/6222616/with-css-use-for-overflowed-block-of-multi-lines)
  • img's ignored
  • bug with <p></p><blockquote>... plugin pull request patch??
  • bug with <blockquote><em></em> + long strings?? ... test other plugins??
• dynamic, scalable selectors, aria attr's, button label text
• pass bundle text to js for button label, aria attr's
  • fix tooltip sentence structure for internalization ... truncMoreTip + ' ' + truncMetaLabel + '.'
• links target=_blank ++ noopener (Code Cleanup - better handling of external links #4717) performance issue
• test all html tags + example dataset desc's
• test all languages
• test siteimprove + screen readers aria tags

SAMPLE DATASETS

• https://dataverse.harvard.edu/dataset.xhtml?persistentId=doi:10.7910/DVN/M4ZGXP
• https://dataverse.harvard.edu/dataset.xhtml?persistentId=doi:10.7910/DVN/T0WLHB
• https://dataverse.harvard.edu/dataset.xhtml?persistentId=doi:10.7910/DVN/FMY6UR
• https://dataverse.harvard.edu/dataset.xhtml?persistentId=doi:10.7910/DVN/CBYXBY
• https://dataverse.harvard.edu/dataset.xhtml?persistentId=doi:10.7910/DVN/A4HJUR
• https://dataverse.harvard.edu/dataset.xhtml?persistentId=doi:10.7910/DVN/M7NDXN
• https://dataverse.harvard.edu/dataset.xhtml?persistentId=doi:10.7910/DVN/XNQIFA
• https://dataverse.harvard.edu/dataset.xhtml?persistentId=doi:10.7910/DVN/Y5CXM8
• https://dataverse.harvard.edu/dataset.xhtml?persistentId=doi:10.7910/DVN/KF96B2
• https://dataverse.harvard.edu/dataset.xhtml?persistentId=doi:10.7910/DVN/NV26Z6

[mheppler]

Initial attempts at truncating descriptions with HTML worked, but were buggy. When testing on additional sample descriptions from production, they went from buggy to broken. Testing other plugins proved equally buggy, broken or did not support HTML.

• https://github.com/pathable/truncate
• https://github.com/yowainwright/shave
• https://github.com/glinford/ellipsis.js

Back to the drawing board. Investigating CSS-only methods like line-clamp that have spotty browser support. I believe all the heavy lifting is done here, which is why I created the draft PR of the initial attempt. Just need to swap out the one plugin/snippet related to the truncation/clamping or whatever other method is out there. After much research, I can say there is no one "BEST" solution for this feature.

[mheppler]

Line-clamping wasn't all it was cracked up to be either. Reverse engineered a "Read more..." button I found in the wild on the internet for the cleanest (partial) solution yet... yay, me...