Fix labels being cut-off in SVG features by rendering feature labels on main thread

[cmdcolin]

Currently, there can be a mismatch between the server and the client when hydrating feature labels since they are floated to the right position on the client side, and this can result in the labels being cut off sometimes

The server tries to float the feature labels in the right place, but a mismatch can still occur because if the user scrolls for example during the time the request is sent to when it is hydrated, it can mismatch.

To help with this, this PR proposes using a useEffect to render the feature only on the main thread (e.g. the useEffect would only be used once hydrated)

There is a caveat for exportSVG which does use the server side to render the features labels in the requested position, there is no main thread "hydration" of the ssr component from the svg export so the useEffect would not be useful in that case

[cmdcolin]

example of feature being cutoff without this PR, see KCND3 label (description is cutoff and it's not floating properly on the left side of the feature)

to reproduce, can whip the scroll around while the track is loading

[codecov]

Codecov Report

Merging #3088 (bfd3309) into main (8adb316) will decrease coverage by 0.02%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##             main    #3088      +/-   ##
==========================================
- Coverage   61.41%   61.39%   -0.03%     
==========================================
  Files         595      595              
  Lines       27216    27221       +5     
  Branches     6563     6566       +3     
==========================================
- Hits        16715    16712       -3     
- Misses      10204    10212       +8     
  Partials      297      297              

Impacted Files	Coverage Δ
...src/SvgFeatureRenderer/components/FeatureGlyph.tsx	94.11% <ø> (ø)
...FeatureRenderer/components/SvgFeatureRendering.tsx	72.63% <ø> (ø)
...src/SvgFeatureRenderer/components/FeatureLabel.tsx	80.55% <100.00%> (-3.32%)	⬇️
...svg/src/SvgFeatureRenderer/components/Segments.tsx	85.71% <0.00%> (-7.15%)	⬇️
...gins/svg/src/SvgFeatureRenderer/components/util.ts	91.83% <0.00%> (-4.09%)	⬇️
...rative-view/src/ServerSideRenderedBlockContent.tsx	64.00% <0.00%> (-4.00%)	⬇️
...FeatureRenderer/components/ProcessedTranscript.tsx	87.32% <0.00%> (-1.41%)	⬇️
packages/core/util/layouts/GranularRectLayout.ts	86.86% <0.00%> (-0.43%)	⬇️

---

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 8adb316...bfd3309. Read the comment docs.

[rbuels]

Sounds good

…

On Tue, Jul 12, 2022 at 1:19 PM Colin Diesh ***@***.***> wrote: Currently, there can be a mismatch between the server and the client when hydrating feature labels since they are floated to the right position on the client side, and this can result in the labels being cut off sometimes The server tries to float the feature labels in the right place, but a mismatch can still occur because if the user scrolls for example during the time the request is sent to when it is hydrated, it can mismatch. To help with this, this PR proposes using a useEffect to render the feature only on the main thread (e.g. the useEffect would only be used once hydrated) There is a caveat for exportSVG which does use the server side to render the features ------------------------------ You can view, comment on, or merge this pull request online at: #3088 Commit Summary - 980cace <980cace> Lazy feature labels File Changes (1 file <https://github.com/GMOD/jbrowse-components/pull/3088/files>) - *M* plugins/svg/src/SvgFeatureRenderer/components/FeatureLabel.tsx <https://github.com/GMOD/jbrowse-components/pull/3088/files#diff-08bfa0f90b3374230786c45d77602d1c02f413ecda8b604011400d057a681596> (13) Patch Links: - https://github.com/GMOD/jbrowse-components/pull/3088.patch - https://github.com/GMOD/jbrowse-components/pull/3088.diff — Reply to this email directly, view it on GitHub <#3088>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAASAFLVQNOR44IQFQGAAMDVTXHKBANCNFSM53MHVN4A> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[cmdcolin]

this was shipped already :)