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

Steps To Reproduce

1. Refresh the main page
2. Mouse-focus into one of the form fields, for example increment “Imports per day” number.
3. Without blurring (moving the cursor out of the form field), try to drag a black dot on the “Mitigation” plot

The current behavior

The “Mitigation” plot dot being dragged is not moving until mouse button is up

The expected behavior

The “Mitigation” plot dot being dragged is not moving as the cursor moves

Hypotheses

The blur event out of the field coincides with the initial click on the plot’s dot. After the blur, the form rerenders and also causes the plot to rerenders. Currently there is a hack. This .html(null) on every render clears the entire plot:

https://github.com/neherlab/covid19_scenarios/blob/b07eeaedd82dd3f54067e241cb62e5e2ac879504/src/components/Main/Containment/ContainmentGraph.tsx#L44-L49

This also causes the destruction of the black dot we are dragging. The new dot will be rendered only on mouse up. Meanwhile we are dragging nothing.

Potential solution

We need to remove the hack shown above and to figure out proper dependencies for the `useEffect hook here:

https://github.com/neherlab/covid19_scenarios/blob/b07eeaedd82dd3f54067e241cb62e5e2ac879504/src/components/Main/Containment/ContainmentGraph.tsx#L225-L230

such that the plot is properly cleared when it is needed, that it is responsive (to screen size) and not causing unnecessary rerenders at the same time

D3-React interop in this component should be properly audited for additional bugs and performance problems.

[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])