centroid label overlay UX improvements

[seve]

Generally improves the UX of the label overlay in two ways:

• Drops opacity of the graph on overlay display
• Consistently truncates long labels

---

This PR implements the following changes:

• In client/src/components/graph/overlays/graphOverlayLayer.js
  • add display state
  • add callback for changing the display state
  • check display state and change opacity accordingly
• In client/src/components/graph/overlays/centroidLabels.js
  • Add truncation check and implementation
  • Check display change and call onDisplayChange() if necessary

---

Closes #1121, Closes #1136

[seve]

@liaprins-czi @colinmegill @sidneymbell
Small thing Colin and I observed:

With the opacity change, the colorby swatches on the left sidebar no longer exactly reflect the graph colors. However, they are uniformly changed. Is this good as is, or should I reflect the color change on the swatches?

[seve]

@colinmegill Let me know what you think of my implementation of checking display state, is it bad practice to require children to call onDisplayChange()?

[liaprins-czi]

Oh good catch. I think it's better if the legend reflects teh colors precisely (a.k.a. if the legend lightens its colors as well). But ppl can probably figure it out if that can't be changed.

…

On Mon, Feb 3, 2020 at 4:06 PM Severiano Badajoz ***@***.***> wrote: @liaprins-czi <https://github.com/liaprins-czi> @colinmegill <https://github.com/colinmegill> @sidneymbell <https://github.com/sidneymbell> Small thing Colin and I observed: With the opacity change, the colorby swatches on the left sidebar no longer exactly reflect the graph colors. However, they are uniformly changed. Is this good as is, or should I reflect the color change on the swatches? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1141?email_source=notifications&email_token=AMWPDSEAEXEJRAMUZLIGR73RBCWP7A5CNFSM4KPOD3Q2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKV3UXQ#issuecomment-581679710>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMWPDSDIZYH53IN5I2DTUDLRBCWP7ANCNFSM4KPOD3QQ> .

-- *Lia Prins* Senior Data Visualization Designer (650) 422-1750 lprins@chanzuckerberg.com http://chanzuckerberg.com <http://chanzuckerberg.com/?email> [image: Facebook] <https://www.fb.me/chanzuckerberginitiative/> [image: Instagram] <https://www.instagram.com/chanzuckerberginitiative/> Questions about data privacy & security at CZI? Contact: privacy@chanzuckerberg.com <https://www.instagram.com/chanzuckerberginitiative/>

[liaprins-czi]

This looks good to me!

[seve]

Waiting for @sidneymbell's opinion on swatch color mirroring before merging

[sidneymbell]

This looks great! I think the swatch color is fine, given the mouseover indicators in the sidebar <-> graph.