got D3 map objects to pan correctly

[CameronDevine]

To fix the issue of demes and transmissions not being translated correctly (#450) I set the x and y coordinates of the panels.mapD3 object to the same values as the map tiles. I then surrounded the D3 SVG output in an SVG group which translates everything to match the current view. This does nothing to fix #429.

[jameshadfield]

Thanks @CameronDevine - I believe we're making progress here. The d3 transmissions and demes (circles) seem to be generally in-sync now (tested about 5 times on different datasets), including after panning & zooming.

However the map-panes are now consistently out-of-sync, including on a fresh load (i.e. no pan/zoom of the map), which could cause spurious interpretations of a saved SVG (the current auspice release is only "wrong" after panning/zooming). This is #429 (or a variant of that issue), which I suggest we work towards fixing on top of this PR.

[jameshadfield]

See previous message

[CameronDevine]

@jameshadfield I have not been able to exactly reproduce your results. I get something that is also wrong, but in a different way.

localhost:4000/mumps/na:

master branch SVG:

CameronDevine:d3pan branch SVG:

v2.5.7 tag SVG:

Does this vary between OSs/Browsers? I am running Chrome 80.0 on Ubuntu Mate 18.04. I have not extensively tested with Firefox (version 73.0), but from a couple tests the results seem to be the same.

Also, I have been using the command auspice develop to locally serve the website. Is that the correct command to use?

[jameshadfield]

Could be browser specific, but I really hope not! I generally use Firefox. auspice develop is good (in production we use auspice build && auspice view which is faster but not as friendly for development).

[CameronDevine]

After looking into this a little more, it appears this is also a problem with the mapbox/leaflet-image library. It seems to create an image of the wrong area of the map in certain cases. Unfortunately, it appears that the leaflet-image library is no longer maintained (last commit in 2017), so either forking the library or finding another solution may be necessary.

[CameronDevine]

@jameshadfield I have a potential solution to both this issue, and #429, on my d3pan branch. Because leaflet-image was causing problems I switched to the domtoimage library. I haven't done extensive testing, but I haven't been able to break it yet.

[jameshadfield]

Thanks @CameronDevine -- I'll try to test this ASAP

Update: apologies for not being able to test/merge this yet

[jameshadfield]

Hey @CameronDevine -- I've managed to test this a bit now it's much better than current master, and dom-to-image seems a good library to use in general, so I'm going to merge it as-is. There are some weird bugs, which it'd be great to fix going forward. I'll make issues for these unless you have quick fixes?

• The (browser) console is cleared once a SVG is created, which makes debugging hard -- there's no console.clear() that I can find in the auspice code so I assume it's within dom-to-image -- can you replicate this?

• The demes (circles on the map) were consistently up in the top left of the map when the SVG was created in Firefox or Safari and then viewed in Chrome. These looked fine in Firefox however. Confusingly, if the SVG was created in Chrome, it was viewable in both Firefox & Chrome (but not safari). Can you replicate this?

• The SVGs created in Firefox & Chrome & Safari didn't render well in Safari at all!

[jameshadfield]

Not sure why this didn't close. Merged in eb2fd3f