Vector map, geocentroid, tilemap bug fixes

[thomasneirynck]

Reopening Vector Map against master iso. feature branch (cf. #10448)

---

The scope of this PR is the introduction of the vector map, which includes some map enhancements that will benefit both TileMap and VectorMap.

• Introduce vector Map: Vector Maps / Choropleth Maps / Shapefile based fill maps #5039
• avoid unnecessary call to manifest/do not hang up Kibana while manifest is requested: Tilemap manifest loading in 5.2 blocks loading of Kibana for up to 60s when behind a firewall #10205
• avoid map flicker when zooming: Map is recreated too often #8823
• enable scroll, pinch, double click zooming: [Map] Enable Zoom with scroll wheel #7778, Tile Map double-click to zoom only works on Heatmap #6344
• avoid Heatmap errors: Uncaught IndexSizeError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0. #6343 / Tilemap Heatmap error - possible cleanup issue #6226
• map doesnt fill screen in dashboard: Tilemap - Dashboard visualization size #10477
• fit should work consistently Tilemap "Fit data bounds" should have the same result regardless of the starting zoom #10654
• remove constraints on map positioning Tilemap constraints on map positioning #9653 / Map always seems to centre on Africa #4944
• use geocentroid as default position for Use geo-centroid aggregator for geo-hash grids #5464

---

Feedback:

• map is zoomed-out on startup (should preserve previous zoom)
• auto-expand bucket selection (since there is only a single option) (logged separately Visualization with only a single bucket should not require user to select bucket-type #10833)
• trim default files for speedier loading
• show warning when not all data can be joined to vector map
• improve color ranges (whites are too faint)
• tooltip disappears when changing vector maps

Todos:

• make vector maps configurable in .yml
• add labeling to choropleth maps (just tooltips now, would need ot use L.label plugin due to dependency on leaflet 0.7)
• update test code
• provide better default data (add more join-fields)
• multi tile-map, which was deprecated, is now fully disabled. Perhaps we should re-evaluate this.

[alexfrancoeur]

@thomasneirynck some quick feedback from vector maps below

Since we can only define one metric, can we automatically expand? I see no reason to have the metric options collapsed by default. Users can quickly glance over these things if it's not in their face

If I leave the visualization and return, I enter a zoomed out screen. I've been able to reproduce (with and without refreshing Kibana) multiple times

Will add more tomorrow, need to find a better dataset to use.

[thomasneirynck]

@alexfrancoeur thanks for the quick feedback already. the zooming is a known issue, this needs to be fixed.

agreed on the auto-expand

[alexfrancoeur]

@thomasneirynck alright, have some data and up and running now.

Good that we agree on auto-expanding. Both configurations only have one option - may as well save some clicks :-) If we auto-expand here, I believe we'd need to on tile map as well (and possibly other visualizations). This should really be consistent for configurations with only one option available. It may be a larger task than vector maps.

You have already stated that this is a bug, but I thought I'd share what it now looks like with data as well. I am also seeing this in tile maps as well.

Is there any error handling we can provide if the field provided does not match the two letter abbreviation or state / country name?

If I switch between World Countries and States and hit play, I lose the tooltip when hovering over a country. I can't seem to get it back by toggling any of the other configurations either. There also seems to be a bit of lag when switching between the two in the dropdown without hitting play. Are we loading anything behind the scenes like a geojson file?

Also, as you can see in the above GIF the zoom is a bit touchy. It could just be my mouse (magic mouse). I'll have to try on my laptop as well. I only mention because it looks as if you enhanced the zooming capabilities.

I don't believe we have much control over the colors but white is fairly difficult to see. Maybe we could provide an option to configure the outline color of the vector shape?

I got this error when attempting to use geo centroid for a second time. Not sure why it worked with first time. Also - is the geo centroid aggregation meant to be used in tile maps? I see it as an option for other visualizations but not the tile map.

Hope this helps - will ping you if I find anything else.

[thomasneirynck]

thanks @alexfrancoeur, that's great.

• for auto-expand, I agree, we could do this in a separate PR, since this will effect other visualizations that only have a single bucket-type. For example, tag-cloud should auto-expand as well.

• Is there any error handling we can provide if the field provided does not match the two letter abbreviation or state / country name?

This is a tough one. How do we know this is because of an error, or just an artifact of the data? I would suggest we show a warning when there is data from ES that cannot be joined to the vector map. I'll make this part of this PR.

• the disappearing tooltip is a bug. This needs to be fixed.

• There is somewhat of a lag when we switch the data-files, as the new vector map needs to be downloaded (only once though, not multiple times). One thing is that the states-map is larger than it needs to be. I will trim both these files to a smaller default size. Another thing I can add is to show a small spinner or use the kibana busy-bar to show something is happening.

• the zooming on the vector-map is as good as it gets from Leaflet. At some point we'll want to move to a later version but we have a few blockers there (Upgrade to Leaflet 1.0.3 #10276). There's some informal chatter about using a different library altogether but that is out of scope now.

• agreed on the color ranges. I'm reusing the same ones from the Heatmap-viz, but they don't work well with the background. I'll improve those.

• the geo-centroid is NOT meant to be used in vector maps. This inclusion is a bug and needs to be fixed.

[tbragin]

@thomasneirynck Great work!

In addition to geo-centroid aggregations, it appears that pipeline aggs can't be use with Vector Map, so we should remove those from the picklist as well

Also, when i change the aggregation back, the red message tends to hang around... this may be more of an issue that is already there

[tbragin]

@thomasneirynck We previously talked about a data label option for this visualization type, have you given it more thoughts? I don't see this option in the PR I just pulled down, even though the task at the top is checked off.

[tbragin]

@thomasneirynck Regarding the geocentroid option in the Tilemap, could we format the option differently?

• First, we need a space after it, i think -- currently it blends with the "Custom label" -- almost looks like the latter is a continuation of the previous.
• Second, I don't like that we use the word "center" twice in that option and the name is so long and cryptic. I also think we should mention "geocentroid" in there for the more technical audience (our vis builder already uses ES terminology all over the place). How about naming it "Place markers off grid (use geocentroid)"? I'm open to other suggestions too.

Current

Proposed

[tbragin]

@thomasneirynck I saw some errors in the console, not sure if you already know of them?

UPDATE: Never mind, it's a chrome extension.

Uncaught TypeError: Cannot read property 'getElementsByClassName' of undefined
    at injectCSVExportButton (chrome-extension://kjkjddcjojneaeeppobfolgojhohbpjn/src/inject/inject.js:168:63)
    at HTMLDivElement.<anonymous> (chrome-extension://kjkjddcjojneaeeppobfolgojhohbpjn/src/inject/inject.js:28:11)
    at Object.callCallbacks (chrome-extension://kjkjddcjojneaeeppobfolgojhohbpjn/src/inject/lib/arrive.js:40:23)
    at chrome-extension://kjkjddcjojneaeeppobfolgojhohbpjn/src/inject/lib/arrive.js:285:15
    at Array.forEach (native)
    at MutationObserver.onArriveMutation (chrome-extension://kjkjddcjojneaeeppobfolgojhohbpjn/src/inject/lib/arrive.js:270:17)
    at MutationObserver.<anonymous> (chrome-extension://kjkjddcjojneaeeppobfolgojhohbpjn/src/inject/lib/arrive.js:158:20)

[tbragin]

@thomasneirynck I had significant slowness drilling in on the logs getting started dataset, going from the previous zoom level into this one and beyond. This is specifically bad when i turn on geocentroid as an option. Could someone double-check it's not just me? Slowness was so bad, i thought things were broken. Have we "load tested" this PR on the tilemap, meaning used it heavily with a large datasets, panning and zooming, etc..?

[kobelb]

Uncaught TypeError: Cannot read property 'getElementsByClassName' of undefined
at injectCSVExportButton (chrome-extension://kjkjddcjojneaeeppobfolgojhohbpjn/src/inject/inject.js:168:63)
at HTMLDivElement. (chrome-extension://kjkjddcjojneaeeppobfolgojhohbpjn/src/inject/inject.js:28:11)
at Object.callCallbacks (chrome-extension://kjkjddcjojneaeeppobfolgojhohbpjn/src/inject/lib/arrive.js:40:23)
at chrome-extension://kjkjddcjojneaeeppobfolgojhohbpjn/src/inject/lib/arrive.js:285:15
at Array.forEach (native)
at MutationObserver.onArriveMutation (chrome-extension://kjkjddcjojneaeeppobfolgojhohbpjn/src/inject/lib/arrive.js:270:17)
at MutationObserver. (chrome-extension://kjkjddcjojneaeeppobfolgojhohbpjn/src/inject/lib/arrive.js:158:20)

@tbragin This looks like a chrome extension is throwing this error, probably not related to the Tilemap changes

[tbragin]

Ugh yeah, i forgot i had that in there... Thanks @kobelb :)

[thomasneirynck]

@tanya i think I identified the slow issue with the sample dataset for the Tilemap. I will work on the fix. I introduced a regression when adding some of the other additions.

[EDIT] this is fixed now

[thomasneirynck]

@tbragin with regard to labeling the shapes: The labeling required an extra plugin to Leaflet, and I'm hesitant to introduce dependencies-to-dependencies. Especially since our reliance on the heatmap-plugin is currently preventing us from upgrading to the latest Leaflet version. But I'll take a second look, and let you know.

[thomasneirynck]

@tbragin with regard to labeling the shapes: The labeling required an extra plugin to Leaflet, and I'm hesitant to introduce dependencies-to-dependencies. Especially since our reliance on the heatmap-plugin is currently preventing us from upgrading to the latest Leaflet version. But I'll take a second look, and let you know.

[thomasneirynck]

Separated out geocentroid/tilemap fixed in #10871. This is to resolve blocker quicker.