Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FE-8035] Upgrade Mapbox #373

Merged
merged 51 commits into from
Aug 28, 2019
Merged

[FE-8035] Upgrade Mapbox #373

merged 51 commits into from
Aug 28, 2019

Conversation

CaitW
Copy link
Contributor

@CaitW CaitW commented Jul 26, 2019

Immerse PR

Mapbox Upgrade

Initial investigation notes + reasoning for the upgrade

TLDR: we forked Mapbox a long time ago and never updated it. We'd like to use the current version of Mapbox and not rely on a fork.

This affects all map charts and scatterplot.

Major Changes

Adjusting for premultiplied alpha

Rendering returns premultiplied images.

  • With the old version of Mapbox, we requested a transparent image from core (50% - 85% transparency) and it would be premultiplied. However, old Mapbox would composite the image so it appeared lighter. I did some sleuthing and found this issue that seems to indicate that this was a bug.
  • The new version of Mapbox fixed the aforementioned bug. So initially with this update, images in raster charts appeared much darker than in Immerse master. This seems more "correct", but didn't match our provided color scale.

As an intermediate solution, I changed things so that we request a fully-opaque image from core and then apply the transparency client-side. This seems to create a chart that most closely resembles the given color scale.

I'm don't know enough about this subject to know whether this is the best solution. @vastcharade suggested potentially requesting non-premultiplied images from core. See relevant BE Issue

Backend pushed a fix for this, so all I did was revert the changes I noted in strikethrough above and add this to the genLayedVega call:

    viewRenderOptions: {
      premultipliedAlpha: false
    }

Additional changes:

  • Removed mapDrawMixin because it doesn't appear to be used
  • Took some functions from Old Mapbox (since removed) that we used in charting and placed them in a file mapbox-ported-functions.js

Arbitrary decisions up for debate:

  • Upgrading the mapbox style from light-v8 to light-v9 (alters the basemap)
  • Using a collapsed attribution box when the map size is sufficiently small
  • Using axios for getting an image

@CaitW CaitW changed the title [WIP][FE-8035] Upgrade Mapbox [FE-8035] Upgrade Mapbox Aug 8, 2019
@christopher-w-root
Copy link
Contributor

We're going to need to produce un-premultiplied images from the BE, otherwise immerse will be limited to opaque colors only, and there can certainly be scenarios where that is unwanted.

Here's the BE ticket: https://jira.omnisci.com/browse/BE-3956

@CaitW CaitW requested a review from uyanga-gb August 9, 2019 13:57
@thomasoniii thomasoniii self-requested a review August 12, 2019 13:51
Copy link
Contributor

@thomasoniii thomasoniii left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm; couldn't break anything

@@ -2,7 +2,6 @@ import d3 from "d3"
import * as _ from "lodash"
import { redrawAllAsync, resetRedrawStack } from "../core/core-async"
import { utils } from "../utils/utils"
import { mapDrawMixin } from "./map-draw-mixin"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for removing this.

src/mixins/map-mixin.js Outdated Show resolved Hide resolved
@uyanga-gb
Copy link
Contributor

uyanga-gb commented Aug 12, 2019

If light-v9 is the only option that is comparable to light-v8, we can go with it. Seems like all functionalities are working fine based on my testing. Slight opacity difference in general but assuming we are ok with that. Only thing needed to get fixed is the slider value should reflect the current opacity for the multilayers.

@uyanga-gb
Copy link
Contributor

One more thing @CaitW, is your immerse build is up to date? Does it include the raster resize fix that REMOVES canvas.mapboxgl-canvas { width: 100% !important; }
It looks like when we are changing the chart size, the map is still trying to keep the 100% width which causes the skewed map.
raster_resize

@@ -760,6 +760,9 @@ function genLayeredVega(chart) {
const vegaSpec = {
width: Math.round(width),
height: Math.round(height),
viewRenderOptions: {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this the trick BE needs?

@uyanga-gb
Copy link
Contributor

Looks like there is outstanding PR in mapbox.gl mapbox/mapbox-gl-js#8693 to add originalEvent for the NavigationControl buttons. We can probably use that to call UpdateDraw on the +/- zoom button to immediately update the shapes.

@CaitW CaitW merged commit 9540c6a into master Aug 28, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants