Migrate Map visualization to React

[kravets-levko]

What type of PR is this? (check all applicable)

• Refactor

Description

• Convert component to React
  • Renderer
  • Editor
    • General tab
    • Groups tab
    • Style tab
• Refine code
• Cleanup
• Tests

Related Tickets & Documents

#3301 (Migrate Visualizations to React -> Map)

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

[ranbena]

Overall looks good. Found bug.

[kravets-levko]

@ranbena noticed that marker cluster icon style is inconsistent depending on "Group by" option. I implemented a fix which IMO looks much better, but now marker group icons look slightly different (see screenshots). It's a kind of breaking change, so I need your opinion - @arikfr, @ranbena, @gabrieldutra - should we keep old version on new one?

before:

Note: green markers have default style set by Leaflet - settings from "Groups" tab are completely ignored.

after:

Note: on both screenshots markers use colors defined on "Groups" tab.

[ranbena]

@ranbena noticed that marker cluster icon style is inconsistent depending on "Group by" option. I implemented a fix which IMO looks much better, but now marker group icons look slightly different (see screenshots). It's a kind of breaking change, so I need your opinion - @arikfr, @ranbena, @gabrieldutra - should we keep old version on new one?

I played around with it and it behaves very sensibly 👍

[arikfr]

One thing I noticed is that the Groups tab won't show the current color unless you change it (you can see this with: https://deploy-preview-4278--redash-preview.netlify.com/queries/49#118).

[kravets-levko]

One thing I noticed is that the Groups tab won't show the current color unless you change it

We have something like this in other visualizations (e.g. Chart) - when you choose Auto color - it does not show actual color in editor.

[arikfr]

One thing I noticed is that the Groups tab won't show the current color unless you change it

We have something like this in other visualizations (e.g. Chart) - when you choose Auto color - it does not show actual color in editor.

Good point. I think that in the chart editor it's less confusing, because in the current color picker UI for charts, at least when you click on it, it tells you it's automatic and if it's automatic the preview is empty. Here it shows the "transparent" color icon, which is a bit confusing imo.

How about we use an "A" to signal automatic color? And maybe show a tooltip saying the same when hovering over it?

[kravets-levko]

@arikfr How about something like this?

[arikfr]

@arikfr How about something like this?

This is an optional behavior, right? Not sure it will "fit" everywhere where we use the color picker.
But don't you like changing the icon of the automatic color to be an "A"?

[kravets-levko]

@arikfr Yes, this is optional behavior. I tried to add a tooltip (does not work fine with color picker's popover), tried adding letter "A" (code looked a bit ugly and it still wasn't easy to understand what that mean). I ended up with this variant.

[arikfr]

@kravets-levko ok, let's move on and maybe figure something else if needed. 👍