standardise layer/source id prefixes

Author: etpinard

src/plots/mapbox/constants.js

@@ -42,6 +42,9 @@ module.exports = {
         }]
     },
 
+    traceLayerPrefix: 'plotly-trace-layer-',
+    layoutLayerPrefix: 'plotly-layout-layer-',
+
     wrongVersionErrorMsg: [
         'Your custom plotly.js bundle is not using the correct mapbox-gl version',
         'Please install mapbox-gl@' + requiredVersion + '.'

src/plots/mapbox/layers.js

@@ -10,15 +10,16 @@
 
 var Lib = require('../../lib');
 var convertTextOpts = require('./convert_text_opts');
+var constants = require('./constants');
 
 function MapboxLayer(subplot, index) {
     this.subplot = subplot;
     this.map = subplot.map;
 
-    this.uid = subplot.uid + '-' + 'layer' + index;
+    this.uid = subplot.uid + '-' + index;
 
-    this.idSource = this.uid + '-source';
-    this.idLayer = this.uid + '-layer';
+    this.idSource = 'source-' + this.uid;
+    this.idLayer = constants.layoutLayerPrefix + this.uid;
 
     // some state variable to check if a remove/add step is needed
     this.sourceType = null;

src/traces/choroplethmapbox/plot.js

@@ -10,17 +10,18 @@
 
 var convert = require('./convert').convert;
 var convertOnSelect = require('./convert').convertOnSelect;
+var LAYER_PREFIX = require('../../plots/mapbox/constants').traceLayerPrefix;
 
 function ChoroplethMapbox(subplot, uid) {
     this.subplot = subplot;
     this.uid = uid;
 
     // N.B. fill and line layers share same source
-    this.sourceId = uid + '-source';
+    this.sourceId = 'source-' + uid;
 
     this.layerList = [
-        ['fill', uid + '-layer-fill'],
-        ['line', uid + '-layer-line']
+        ['fill', LAYER_PREFIX + uid + '-fill'],
+        ['line', LAYER_PREFIX + uid + '-line']
     ];
 
     // previous 'below' value,

src/traces/densitymapbox/plot.js

@@ -9,15 +9,16 @@
 'use strict';
 
 var convert = require('./convert');
+var LAYER_PREFIX = require('../../plots/mapbox/constants').traceLayerPrefix;
 
 function DensityMapbox(subplot, uid) {
     this.subplot = subplot;
     this.uid = uid;
 
-    this.sourceId = uid + '-source';
+    this.sourceId = 'source-' + uid;
 
     this.layerList = [
-        ['heatmap', uid + '-layer-heatmap']
+        ['heatmap', LAYER_PREFIX + uid + '-heatmap']
     ];
 
     // previous 'below' value,

src/traces/scattermapbox/plot.js

@@ -9,23 +9,24 @@
 'use strict';
 
 var convert = require('./convert');
+var LAYER_PREFIX = require('../../plots/mapbox/constants').traceLayerPrefix;
 
 function ScatterMapbox(subplot, uid) {
     this.subplot = subplot;
     this.uid = uid;
 
     this.sourceIds = {
-        fill: uid + '-source-fill',
-        line: uid + '-source-line',
-        circle: uid + '-source-circle',
-        symbol: uid + '-source-symbol'
+        fill: 'source-' + uid + '-fill',
+        line: 'source-' + uid + '-line',
+        circle: 'source-' + uid + '-circle',
+        symbol: 'source-' + uid + '-symbol'
     };
 
     this.layerIds = {
-        fill: uid + '-layer-fill',
-        line: uid + '-layer-line',
-        circle: uid + '-layer-circle',
-        symbol: uid + '-layer-symbol'
+        fill: LAYER_PREFIX + uid + '-fill',
+        line: LAYER_PREFIX + uid + '-line',
+        circle: LAYER_PREFIX + uid + '-circle',
+        symbol: LAYER_PREFIX + uid + '-symbol'
     };
 
     this.order = ['fill', 'line', 'circle', 'symbol'];

test/jasmine/tests/choroplethmapbox_test.js

@@ -692,7 +692,7 @@ describe('@noCI Test choroplethmapbox interactions:', function() {
             expect(getLayerIds()).withContext('default *below*').toEqual([
                 'background', 'landuse_overlay_national_park', 'landuse_park',
                 'waterway', 'water',
-                'a-layer-fill', 'a-layer-line',
+                'plotly-trace-layer-a-fill', 'plotly-trace-layer-a-line',
                 'building', 'tunnel_minor', 'tunnel_major', 'road_minor', 'road_major',
                 'bridge_minor case', 'bridge_major case', 'bridge_minor', 'bridge_major',
                 'admin_country', 'poi_label', 'road_major_label',
@@ -708,7 +708,7 @@ describe('@noCI Test choroplethmapbox interactions:', function() {
                 'bridge_minor case', 'bridge_major case', 'bridge_minor', 'bridge_major',
                 'admin_country', 'poi_label', 'road_major_label',
                 'place_label_other', 'place_label_city', 'country_label',
-                'a-layer-fill', 'a-layer-line'
+                'plotly-trace-layer-a-fill', 'plotly-trace-layer-a-line'
             ]);
         })
         .then(function() { return Plotly.restyle(gd, 'below', 'place_label_other'); })
@@ -719,7 +719,7 @@ describe('@noCI Test choroplethmapbox interactions:', function() {
                 'building', 'tunnel_minor', 'tunnel_major', 'road_minor', 'road_major',
                 'bridge_minor case', 'bridge_major case', 'bridge_minor', 'bridge_major',
                 'admin_country', 'poi_label', 'road_major_label',
-                'a-layer-fill', 'a-layer-line',
+                'plotly-trace-layer-a-fill', 'plotly-trace-layer-a-line',
                 'place_label_other', 'place_label_city', 'country_label',
             ]);
         })

test/jasmine/tests/densitymapbox_test.js

@@ -452,7 +452,7 @@ describe('@noCI Test densitymapbox interactions:', function() {
                 'building', 'tunnel_minor', 'tunnel_major', 'road_minor', 'road_major',
                 'bridge_minor case', 'bridge_major case', 'bridge_minor', 'bridge_major',
                 'admin_country',
-                'a-layer-heatmap',
+                'plotly-trace-layer-a-heatmap',
                 'poi_label', 'road_major_label',
                 'place_label_other', 'place_label_city', 'country_label'
             ]);
@@ -466,7 +466,7 @@ describe('@noCI Test densitymapbox interactions:', function() {
                 'bridge_minor case', 'bridge_major case', 'bridge_minor', 'bridge_major',
                 'admin_country', 'poi_label', 'road_major_label',
                 'place_label_other', 'place_label_city', 'country_label',
-                'a-layer-heatmap'
+                'plotly-trace-layer-a-heatmap'
             ]);
         })
         .then(function() { return Plotly.restyle(gd, 'below', 'place_label_other'); })
@@ -477,7 +477,7 @@ describe('@noCI Test densitymapbox interactions:', function() {
                 'building', 'tunnel_minor', 'tunnel_major', 'road_minor', 'road_major',
                 'bridge_minor case', 'bridge_major case', 'bridge_minor', 'bridge_major',
                 'admin_country', 'poi_label', 'road_major_label',
-                'a-layer-heatmap',
+                'plotly-trace-layer-a-heatmap',
                 'place_label_other', 'place_label_city', 'country_label',
             ]);
         })

test/jasmine/tests/mapbox_test.js

@@ -1210,11 +1210,11 @@ describe('@noCI, mapbox plots', function() {
         var uid = subplot.uid;
 
         var traceSources = Object.keys(sources).filter(function(k) {
-            return k.indexOf('-source-') !== -1;
+            return k.indexOf('source-') === 0;
         });
 
         var traceLayers = Object.keys(layers).filter(function(k) {
-            return k.indexOf('-layer-') !== -1;
+            return k.indexOf('plotly-trace-layer-') === 0;
         });
 
         var layoutSources = Object.keys(sources).filter(function(k) {