Add WIP map view #536

simonbukin · 2023-10-09T19:20:57Z

This is a PR to add the WIP map view to Taxonium.

Next steps:

Add scaled pie charts to map view (ChatGPT)
Create a new backend route from the local and server backends that gets the total counts for an attribute for each country

…to add-map-view Merging latest taxonium master branch into add-map-view

…to add-map-view

for more information, see https://pre-commit.ci

vercel · 2023-10-09T19:21:01Z

Someone is attempting to deploy a commit to a Personal Account owned by @theosanderson on Vercel.

@theosanderson first needs to authorize it.

vercel · 2023-10-09T19:44:50Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
cov2tree	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 26, 2024 8:22pm

theosanderson · 2023-10-09T19:48:45Z

taxonium_web_client/package.json

This file didn't previously exist - looks like a merge issue and any changes should go to taxonium_component?

Looks like it, I'll go ahead and remove the taxonium_web_client folder from this PR.

theosanderson · 2023-10-09T19:49:04Z

Thank you for opening this! Adding comments piecemeal

theosanderson · 2023-10-09T19:53:28Z

package-lock.json

We use yarn for taxonium - I think that means we can lose this file but let me know if there's a reason it's useful, I'm no expert

Will remove! I'm used to NPM based projects, so this was just a force of habit.

theosanderson · 2023-10-09T19:56:47Z

taxonium_component/src/Deck.jsx

+        <View id="map">
+          <div
+            id="map-div"
+            key={crypto.randomUUID()}


Is this unique key each time important? (I assume so but just checking)

Usually I err on the side of including an id so that React can more efficiently calculate rerenders. I believe this specific case was added because a warning in the console, so it seems like React was struggling to update Views.

Ah, the re-render thing was my concern here. My model for what will happen for the code here is that every render the key will be different and so React will not be able to see that there is a (potentially) unchanging element here. I would be happy with key="map-div-key" or similar. Again, I don't claim to be an expert and may be misunderstanding.

I think you're totally right here, so I just swapped out the crypto.uuid with the "map-div-key" string. Thanks!

theosanderson · 2023-10-09T19:59:02Z

taxonium_component/src/Deck.jsx

We seem to have ended up with the zoom controls repeated 2x, once on the map and once on the tree. (I'd say they are better just on the tree).

Is there a usecase where zooming into the map would be helpful? I was assuming that users may want to zoom into part of the map to view pie charts in only certain regions (eventually), but maybe you had a different idea here. Would the map view be fully zoomed out by default if we remove the zoom functionality?

Yes, there might be use cases where zooming would be useful - but atm the buttons on the map affect the tree so this is not achieved. I don't see a strong need for zoom buttons for the map -- as opposed to panning and scrolling -- we need them for the tree due to separate X and Y zooms.

theosanderson · 2023-10-09T20:00:21Z

taxonium_component/src/hooks/useView.jsx

When I click and drag on the minimap a the top right of the tree (regardless of geo-map enabled or not) the preview crashes with Cannot read properties of undefined (reading 'zoom')

I think I have an idea of a fix here, but may take a few days. Will update!

theosanderson · 2023-10-10T14:27:31Z

taxonium_component/src/hooks/useLayers.jsx

@@ -540,6 +545,49 @@ const useLayers = ({
  layers.push(minimap_line_horiz, minimap_line_vert, minimap_scatter);
  layers.push(minimap_bound_polygon);

+  let countryCounts = {};


It's not clear to me that we will end up using much of this logic other than the layers.push bit. E.g. the max and min aren't used at present. I would probably suggest removing the color piece as it may never be used and leaving all countries coloured the same for now.

Removed the color code for now.

theosanderson · 2023-10-11T12:34:10Z

taxonium_component/src/hooks/useLayers.jsx

@@ -566,6 +615,7 @@ const useLayers = ({
        return new ScatterplotLayer(layer);
      }
      if (layer.layerType === "LineLayer") {
+        console.log('processed ', layer);


to remove in due course

simonbukin · 2023-12-13T18:25:42Z

@theosanderson Sorry for the delay here! Been a busy few months :)

I've looked more deeply into the minimap issues and I believe it has to do with the refactor I did for getting different views to update using setViewState based on their respective viewIds. The code was initially doing an empty return instead of returning the currentViewState, which was causing the viewState on the next render to be undefined.

The above seems to have fixed the crash when dragging on the minimap. However, I believe the dragging behavior is still a little buggy, and I wanted to know if you had any input on the changes I made to fix the crash. I think we might be pretty close to a working minimap again, but I'm getting stumped by the current zoom code (mostly the role of mouseDownIsMinimap, specialMinimap and the old/new scaleX/Y values). Could you take a look at the refactor and see if you can spot a potential issue?

Again, really appreciate your help here!

theosanderson · 2023-12-14T12:49:49Z

Thanks for all your efforts @simonbukin. It's great that the crashing is fixed, but you're right that the behaviour is still buggy as compared to the intended behaviour.

The intended behaviour, as currently on Cov2Tree is:

clicking on the minimap triggers the main display to shift to the clicked on location
dragging the minimap causes the main display to shift to the dragged to region
clicking the mouse down on the main display and then dragging the mouse over to the minimap does not trigger the main display to shift - normal pan behaviour continues

I acknowledge that the view code is hard work to understand (for me). There has been a lot of trial and error to get it to behave in the intended way.

mouseDownIsMinimap is intended to record that the user initially pressed down the mouse button within the minimap and so we should treat this action as a minimap drag, not as a pan. (And conversely, when this is false we should treat the action as a pan).

When mouseDownIsMinimap is true, we in general stop the onViewStateChange command from doing anything, in order to avoid the standard pan behaviour from happening:

taxonium/taxonium_component/src/hooks/useView.jsx

Line 259 in a832742

return;

But we want to manually call onViewStateChange in order to shift the zoom to the place that was clicked on in the minimap

taxonium/taxonium_component/src/hooks/useView.jsx

Line 259 in a832742

return;

. But if we have stopped onViewState doing anything when mouseDownIsMinimap is true, that won't work. So we define specialMinimap which basically overrides the disabling in the case of mouseDownIsMinimap and manually call it with specialMinimap. The scale stuff is fundamentally about the fact that DeckGL doesn't support zooming in a single axis in a good way, and has been adjusted by trial and error to compensate for that.

theosanderson · 2023-12-14T16:11:48Z

(while we're on the minimap - I think it needs to either be overlaid over the tree rather than the map when the map is open, or just disabled in that case)

theosanderson · 2023-12-14T16:13:58Z

Also, if I enable treenome browser mode (not map) and zoom in on the tree, the preview crashes with https://legacy.reactjs.org/docs/error-decoder.html/?invariant=185

theosanderson · 2023-12-14T16:14:32Z

(closing/opening was just a hit-wrong-button thing!)

simonbukin · 2023-12-15T18:48:36Z

Thanks for the detail here! I'll take a crack at making it work to spec. I think emulating the empty return using a setViewState is going to solve most of the issues currently occurring with the buggy minimap, but I'll have to see how it goes.

I'll take a look at the Treenome crashing issue; I have a feeling I know what's breaking it.

I'm going to go ahead and disable the minimap when the map is open as a fix for now, but I believe it can be added back later and overlaid on the tree.

Thanks again!

Simon Bukin and others added 11 commits April 18, 2023 10:42

Add leaflet and wrap Treenome in own component

d7df0f1

Add toggle to show map view (displays cat picture)

923c9a1

Add map view w/ heatmap based on tree sample data

5a3f528

Cleanup View code

9f74398

Separate out map state and orthographic state

fe349d6

Fix map colors and clean up code

5537976

Merge branch 'master' of https://github.com/theosanderson/taxonium in…

14e3abe

…to add-map-view Merging latest taxonium master branch into add-map-view

Merge branch 'master' of https://github.com/theosanderson/taxonium in…

bdd87cb

…to add-map-view

[pre-commit.ci] auto fixes from pre-commit.com hooks

cf33a82

for more information, see https://pre-commit.ci

Update map view to work in Storybook

8174d24

Merge branch 'theosanderson:master' into add-map-view

0066aae

simonbukin changed the title ~~Add leaflet and wrap Treenome in own component~~ Add WIP map view Oct 9, 2023

theosanderson reviewed Oct 9, 2023

View reviewed changes

vercel bot deployed to Preview October 9, 2023 19:49 View deployment

theosanderson reviewed Oct 9, 2023

View reviewed changes

Update .gitignore and remove extra merged folder

b835f72

theosanderson reviewed Oct 10, 2023

View reviewed changes

theosanderson reviewed Oct 11, 2023

View reviewed changes

Remove redundant colors code

99d7cb1

vercel bot deployed to Preview November 16, 2023 17:36 View deployment

Fix minimap crash

f75cf00

vercel bot deployed to Preview December 14, 2023 12:30 View deployment

theosanderson closed this Dec 14, 2023

theosanderson reopened this Dec 14, 2023

Disable minimap when map view is open

f0c735c

vercel bot deployed to Preview January 26, 2024 20:22 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add WIP map view #536

Add WIP map view #536

simonbukin commented Oct 9, 2023

vercel bot commented Oct 9, 2023

vercel bot commented Oct 9, 2023 •

edited

Loading

theosanderson Oct 9, 2023

simonbukin Oct 9, 2023

theosanderson commented Oct 9, 2023

theosanderson Oct 9, 2023

simonbukin Oct 9, 2023

theosanderson Oct 9, 2023

simonbukin Oct 9, 2023

theosanderson Oct 10, 2023 •

edited

Loading

simonbukin Oct 25, 2023

theosanderson Oct 9, 2023

simonbukin Oct 9, 2023

theosanderson Oct 10, 2023

theosanderson Oct 9, 2023

simonbukin Oct 9, 2023

theosanderson Oct 10, 2023

simonbukin Oct 25, 2023

theosanderson Oct 11, 2023

simonbukin Oct 25, 2023

simonbukin commented Dec 13, 2023

theosanderson commented Dec 14, 2023 •

edited

Loading

theosanderson commented Dec 14, 2023 •

edited

Loading

theosanderson commented Dec 14, 2023

theosanderson commented Dec 14, 2023

simonbukin commented Dec 15, 2023

Add WIP map view #536

Are you sure you want to change the base?

Add WIP map view #536

Conversation

simonbukin commented Oct 9, 2023

vercel bot commented Oct 9, 2023

vercel bot commented Oct 9, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

theosanderson commented Oct 9, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

theosanderson Oct 10, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

simonbukin commented Dec 13, 2023

theosanderson commented Dec 14, 2023 • edited Loading

theosanderson commented Dec 14, 2023 • edited Loading

theosanderson commented Dec 14, 2023

theosanderson commented Dec 14, 2023

simonbukin commented Dec 15, 2023

vercel bot commented Oct 9, 2023 •

edited

Loading

theosanderson Oct 10, 2023 •

edited

Loading

theosanderson commented Dec 14, 2023 •

edited

Loading

theosanderson commented Dec 14, 2023 •

edited

Loading