Cartodb: Layer not showing on top after dragging an analysis-node layer below it

[ramiroaznar]

Metro Madrid use case - step 4

1-Add AOI analysis to Layer 1.
2-Drag AOI analysis node (Layer 2) below Layer 1.

The expected view should be Layer 1 on top of Layer 2. This is solved after refreshing the browser:

[xavijam]

The problem is hitting again, could you (any of both @viddo or @alonsogarciapablo) take care of it?

[ramiroaznar]

Not even refreshing works, because the point layer that is on top in the last screenshot is from the analysis node.

[viddo]

The problem is hitting again, …

Just to confirm what problem we're talking about:
@ramiroaznar, from the screenshots it looks like the layers appear in correct order in the layers list on the left, correct? Assuming that's the case:

It looks like it's the same problem as described in issue #8245 and supposedly fixed in PR #8292. @alonsogarciapablo could there be something that changed related to this in cartodb.js since the last fix that provokes this from happening again?

[ramiroaznar]

@viddo it is the same problem, but I think it is not solved. Check the following screenshots:

The Layer 1 (black points) should be displayed on top of Layer 2 (orange points and buffers):

Because when I disable the Layer 2 view, Layer 1 is shown:

[alonsogarciapablo]

@alonsogarciapablo could there be something that changed related to this in cartodb.js since the last fix that provokes this from happening again?

We haven't changed anything lately in CartoDB.js that could have broken this as far as I know.

[saleiva]

Hey, that happened to me also a few days ago (before releasing). Hard to replicate since it doesn't not happen always, but looks something related with the cache @rochoa

[alonsogarciapablo]

I submitted this PR to ensure the order of layers is the same in both the builder and CDB.js. But, that wasn't actually the real issue why this was failing.

Here's what I discovered. When you add an analysis to a layer, the CartoCSS of that layer is reseted to:

// points
 [mapnik-geometry-type=point] {
    marker-fill: #FF6600;
    marker-opacity: 1;
    marker-width: 12;
    marker-line-color: white;
    marker-line-width: 3;
    marker-line-opacity: 0.9;
    marker-placement: point;
    marker-type: ellipse;marker-allow-overlap: true;
  }

 //lines
 [mapnik-geometry-type=linestring] {
    line-color: #FF6600; 
    line-width: 2; 
    line-opacity: 0.7;
  }

 //polygons
 [mapnik-geometry-type=polygon] {
    polygon-fill:#FF6600;
    polygon-opacity: 0.7;
    line-opacity:1;
    line-color: #FFFFFF;
   }

AFAIK, since these selectors don't have an ID (eg: #layer), they affect all of the layers in the map. In the particular situation that @ramiroaznar described in this comment. The layer with the black points, was being affected by this generic cartocss, and that's why he was seeing the orange points inside of the orange polygons.

Changing that default CartoCSS to the following seems to fix the problem:

// points
#layer[mapnik-geometry-type=point] {
    marker-fill: #FF6600;
    marker-opacity: 1;
    marker-width: 12;
    marker-line-color: white;
    marker-line-width: 3;
    marker-line-opacity: 0.9;
    marker-placement: point;
    marker-type: ellipse;marker-allow-overlap: true;
  }

 //lines
#layer[mapnik-geometry-type=linestring] {
    line-color: #FF6600; 
    line-width: 2; 
    line-opacity: 0.7;
  }

 //polygons
#layer[mapnik-geometry-type=polygon] {
    polygon-fill:#FF6600;
    polygon-opacity: 0.7;
    line-opacity:1;
    line-color: #FFFFFF;
   }

I'm trying to find out where that cartocss is coming from.

[xavijam]

Ahhhh that's a good one man! Well spotted!

[ramiroaznar]

@alonsogarciapablo BRAVO!

[alonsogarciapablo]

Default CartoCSS seems to be coming from https://github.com/CartoDB/cartodb/blob/master/lib/assets/javascripts/cartodb3/editor/style/style-converter.js#L5. But, we also have these default styles :https://github.com/CartoDB/cartodb/blob/master/lib/assets/javascripts/cartodb3/data/camshaft-reference.js#L121. The later ones would totally fix the issue.... @xavijam I'd love your advice here since you're more familiar with stylin'.

[xavijam]

adding @javisantana, he will take care of it.

[javisantana]

@alonsogarciapablo I'm changing the default style, I'll ping you in the PR ok?

[alonsogarciapablo]

@javisantana: 👍

[javisantana]

@alonsogarciapablo https://github.com/CartoDB/cartodb/pull/8713/files#diff-1b2da36fb3e2b1fd1420c14e984d4fe3R121

[xavijam]

After first bunch of changes about that, could we close this one?

[alonsogarciapablo]

We can close it if @javisantana fixed this.