Page jumps to the top on HMR changes in some cases

[hughess]

I think this might be caused by charts - when an HMR change is made to one chart, they all re-trigger and re-animate. I think when the first chart is close to the top of the page, somehow that triggers the page to jump up to the top to show the update.

Scenarios

1. Lots of text, chart 1 at bottom

Works

2. Now add DataTable to the top

Still works

3. Now replace that DataTable with a chart

Jumps to top

4. Now move the first chart down under the text

This works, but both charts re-animated

5. Move the first chart into the middle of the text content

Works

6. Move the first chart about 25% into the text content (closer to top)

Jumps to top of page

Expected Behavior

Page should stay where it is on any HMR change

[smilingthax]

When I encounter this Problem, the initial load DOM contains:

<h2 class="markdown" id="4">Some Section</h2>

but after HMR it's just:

<h2 class="markdown">Some Section</h2>

I.e. the idattribute is missing. Also, the right sidebar navigation (Sections on the Page) stops working (URL changes to include #4, but there's no such anchor position in the DOM any more).
I suppose this also causes the repositioning after HMR to fail.

[archiewood]

Having looked at this problem recently (id generation and navigation), there are some issues with the way we add the Table of Contents.

The TOC and anchor links are generated client side (and not during prebuild)

I think the design reason for this is that in principle, user interaction could change what headings exist on the page (eg change the number of rows that are looped through, change the heading text etc.

This is suboptimal because it means that you cannot navigate from another site or page in an evidence project to an anchor link

[smilingthax]

I see... unfortunately, putting the MutationObserver on <article> will trigger it very often (e.g just by moving the mouse over a graph, tooltips are added to/removed from the dom), and although after HMR then the <h2> tags regained their id, this did not fix the jump-to-top problem in my short experiment...