Fix black dots dragging behavior on the mitigation plot (React hooks + D3.js guru needed) about covid19_scenarios

[petebacondarwin]

By the way, as I said I am not that hot on React development but I found that I needed to change the webpack.SourceMapDevToolPlugin to set noSources to false when debugging in order to get half-decent debugging experience. Is there a better way to manage this?

[petebacondarwin]

Ahah! So it seems that the first time draw() is called we have d3ref.current is null, which causes an error and so the effect is not run again. Adding a guard against this and adding d3ref.current as a dependency for the effect seems to solve the problem:

function draw({ data, width, height, onDataChange, d3ref }: DrawParams) {
  if (d3ref.current === null) {
    return
  }
  ...

 useEffect(() => draw({ data, onDataChange, width, height, d3ref }), [data, width, height, d3ref.current])

[petebacondarwin]

I am not that up with React but I had a little play and it seems to me that this component only needs to re-render the graph if the time series changes, which is defined by the data property, or when the size of the graph changes, which is defined by the width and height properties. Yes?

So I changed

covid19_scenarios/src/components/Main/Containment/ContainmentGraph.tsx

Line 229 in b07eeae

useEffect(() => draw({ data, onDataChange, width, height, d3ref }))

to be:

  useEffect(() => draw({ data, onDataChange, width, height, d3ref }), [data, width, height])

and that seems to solve the problem. Now the graph only re-renders if the start and end dates change, or the number of points changes (this triggers a recalculation of data) or the window is resized (this updates width and height).

Also previous to this the graph is re-rendering on just about every event, not only focus events but all other kinds of events that are not related to this graph.

Happy to create a PR for this if it is agreed that this is the correct solution...

[petebacondarwin]

Oops! Of course now the graph is not rendered correctly at application start up... :-(

[ivan-aksamentov]

Regarding source maps: #94 (comment)