Create Truncation Component

[seve]

Across the app, we practice truncating large strings by taking a slice of some size out of the middle of the string and replacing it with ellipses. The number of truncations needed throughout the app has begun to grow and the work associated with keeping the methodology between instances has been growing with it.

This PR introduces a Truncation component in the new dir: client/src/components/util/. Given a single child holding text and a width style, the component calculates whether the text needs truncation and truncates to the largest fitting size.

h/t @tihuan for providing a CSS solution and steering me along the way 🎉

---

This PR implements the following changes:

• client/src/components/util/truncate.js
  • Created the truncate component
• client/src/components/categorical/category/index.js + client/src/components/categorical/value/index.js + client/src/components/leftSidebar/topLeftLogoAndTitle.js
  • Refactor in Truncate component
• client/src/components/graph/overlays/centroidLabels.js + client/src/components/categorical/value/occupancy.js
  • Remove fontFamily style declarations
• client/configuration/eslint/eslint.js
  • Removal of redundant/conflicting manual ESLint rules
• client/configuration/lint-staged/lint-staged.config.js
  • Correctly lint only staged files instead of all of src

---

Closes #1489

[codecov-commenter]

Codecov Report

Merging #1500 into master will increase coverage by 0.80%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master    #1500      +/-   ##
==========================================
+ Coverage   60.81%   61.62%   +0.80%     
==========================================
  Files          35       36       +1     
  Lines        3325     3528     +203     
==========================================
+ Hits         2022     2174     +152     
- Misses       1303     1354      +51     

Flag	Coverage Δ
#backend	61.62% <ø> (+0.80%)	⬆️
#python	61.62% <ø> (+0.80%)	⬆️
#unitTest	61.62% <ø> (+0.80%)	⬆️

Impacted Files	Coverage Δ
server/compute/diffexp_cxg.py	84.31% <0.00%> (-8.79%)	⬇️
server/data_common/data_adaptor.py	76.96% <0.00%> (ø)
server/converters/to_sparse.py	0.00% <0.00%> (ø)
server/data_common/fbs/NetEncoding/Matrix.py	84.72% <0.00%> (+1.38%)	⬆️
server/converters/cxgtool.py	82.97% <0.00%> (+5.05%)	⬆️
server/data_cxg/cxg_adaptor.py	49.19% <0.00%> (+5.31%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 030eea1...5b14b61. Read the comment docs.

[tihuan]

Ahh thanks for testing the 5 + 5 case! Yeah the gap is really huge 😆 Definitely not good

What's your thought on this Firefox discussion board's solution?

I added the same test cases from the Stackoverflow one, and it seems to work better:

https://codepen.io/tihuan/pen/qBbWoog

And the only hard coded value is min-width: 30px;!

.split {
  width: 300px;
  background: pink;
  display: flex;
  overflow: hidden;
  justify-content: flex-start;
}

.first {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 30px;
}

.second > span {
  position: absolute;
  right: 0;
  color: initial;
}
.second {
  color: transparent;
  position: relative;
  overflow: hidden;
  white-space:nowrap;
}

PTAL 🎉 !

UPDATE: Changed the width to 250px from 300px to see more truncations:

[seve]

@tihuan I think that's the one! I'm going to run it against some other datasets, but its looking good so far!

[tihuan]

So glad to hear that 😭 !! Thanks for your patience on this one, @seve !!

If that works for our cases, I'll share the code and credit the author back to the original Stackoverflow solution, so other people can see it too 😆

[tihuan]

Woot woot go @seve !! 🎉 🎉 🎉

Thanks so much for testing this approach thoroughly in the app! (I finally set up cellxgene with Matt's help this morning lol)

I'll share the solution back on Stackoverflow now too!

[tihuan]

Looks super good! Just a few nits. Otherwise LGTM! Thanks again for taking on this, @seve 🎉 👍 🥇

[bkmartinjr]

several nits/cleanup items, but OK overall. Thanks!

[bkmartinjr]

ps. please don't merge until all tests pass.