add visible attribute to lots of container array items:

rangeselector.buttons
updatemenus.buttons
slider.steps
axes.tickformatstops
mapbox.layers

Author: alexcjohnson

src/components/rangeselector/button_attributes.js

@@ -10,6 +10,12 @@
 
 
 module.exports = {
+    visible: {
+        valType: 'boolean',
+        role: 'info',
+        editType: 'plot',
+        description: 'Determines whether or not this button is visible.'
+    },
     step: {
         valType: 'enumerated',
         role: 'info',

src/components/rangeselector/defaults.js

@@ -10,15 +10,16 @@
 
 var Lib = require('../../lib');
 var Color = require('../color');
+var Template = require('../../plot_api/plot_template');
 
 var attributes = require('./attributes');
 var buttonAttrs = require('./button_attributes');
 var constants = require('./constants');
 
 
 module.exports = function handleDefaults(containerIn, containerOut, layout, counterAxes, calendar) {
-    var selectorIn = containerIn.rangeselector || {},
-        selectorOut = containerOut.rangeselector = {};
+    var selectorIn = containerIn.rangeselector || {};
+    var selectorOut = Template.newContainer(containerOut, 'rangeselector');
 
     function coerce(attr, dflt) {
         return Lib.coerce(selectorIn, selectorOut, attributes, attr, dflt);
@@ -59,22 +60,24 @@ function buttonsDefaults(containerIn, containerOut, calendar) {
         buttonIn = buttonsIn[i];
         buttonOut = {};
 
-        if(!Lib.isPlainObject(buttonIn)) continue;
+        var visible = coerce('visible', Lib.isPlainObject(buttonIn));
 
-        var step = coerce('step');
-        if(step !== 'all') {
-            if(calendar && calendar !== 'gregorian' && (step === 'month' || step === 'year')) {
-                buttonOut.stepmode = 'backward';
-            }
-            else {
-                coerce('stepmode');
+        if(visible) {
+            var step = coerce('step');
+            if(step !== 'all') {
+                if(calendar && calendar !== 'gregorian' && (step === 'month' || step === 'year')) {
+                    buttonOut.stepmode = 'backward';
+                }
+                else {
+                    coerce('stepmode');
+                }
+
+                coerce('count');
             }
 
-            coerce('count');
+            coerce('label');
         }
 
-        coerce('label');
-
         buttonOut._index = i;
         buttonsOut.push(buttonOut);
     }

src/components/rangeselector/draw.js

@@ -50,7 +50,7 @@ module.exports = function draw(gd) {
             selectorLayout = axisLayout.rangeselector;
 
         var buttons = selector.selectAll('g.button')
-            .data(selectorLayout.buttons);
+            .data(Lib.filterVisible(selectorLayout.buttons));
 
         buttons.enter().append('g')
             .classed('button', true);

src/components/sliders/attributes.js

@@ -18,6 +18,14 @@ var constants = require('./constants');
 var stepsAttrs = {
     _isLinkedToArray: 'step',
 
+    visible: {
+        valType: 'boolean',
+        role: 'info',
+        dflt: true,
+        description: [
+            'Determines whether or not this step is included in the slider.'
+        ].join(' ')
+    },
     method: {
         valType: 'enumerated',
         values: ['restyle', 'relayout', 'animate', 'update', 'skip'],

src/components/sliders/defaults.js

@@ -19,12 +19,10 @@ var stepAttrs = attributes.steps;
 
 
 module.exports = function slidersDefaults(layoutIn, layoutOut) {
-    var opts = {
+    handleArrayContainerDefaults(layoutIn, layoutOut, {
         name: name,
         handleItemDefaults: sliderDefaults
-    };
-
-    handleArrayContainerDefaults(layoutIn, layoutOut, opts);
+    });
 };
 
 function sliderDefaults(sliderIn, sliderOut, layoutOut) {
@@ -33,12 +31,27 @@ function sliderDefaults(sliderIn, sliderOut, layoutOut) {
         return Lib.coerce(sliderIn, sliderOut, attributes, attr, dflt);
     }
 
-    var steps = stepsDefaults(sliderIn, sliderOut);
+    var steps = handleArrayContainerDefaults(sliderIn, sliderOut, {
+        name: 'steps',
+        handleItemDefaults: stepDefaults
+    });
+
+    var stepCount = 0;
+    for(var i = 0; i < steps.length; i++) {
+        if(steps[i].visible) stepCount++;
+    }
 
-    var visible = coerce('visible', steps.length > 0);
+    var visible;
+    // If it has fewer than two options, it's not really a slider
+    if(stepCount < 2) visible = sliderOut.visible = false;
+    else visible = coerce('visible');
     if(!visible) return;
 
-    coerce('active');
+    sliderOut._stepCount = stepCount;
+    var visSteps = sliderOut._visibleSteps = Lib.filterVisible(steps);
+
+    var active = coerce('active');
+    if(!(steps[active] || {}).visible) sliderOut.active = visSteps[0]._index;
 
     coerce('x');
     coerce('y');
@@ -81,33 +94,21 @@ function sliderDefaults(sliderIn, sliderOut, layoutOut) {
     coerce('minorticklen');
 }
 
-function stepsDefaults(sliderIn, sliderOut) {
-    var valuesIn = sliderIn.steps || [],
-        valuesOut = sliderOut.steps = [];
-
-    var valueIn, valueOut;
-
+function stepDefaults(valueIn, valueOut, sliderOut, opts, itemOpts) {
     function coerce(attr, dflt) {
         return Lib.coerce(valueIn, valueOut, stepAttrs, attr, dflt);
     }
 
-    for(var i = 0; i < valuesIn.length; i++) {
-        valueIn = valuesIn[i];
-        valueOut = {};
-
-        coerce('method');
-
-        if(!Lib.isPlainObject(valueIn) || (valueOut.method !== 'skip' && !Array.isArray(valueIn.args))) {
-            continue;
-        }
-
-        coerce('args');
-        coerce('label', 'step-' + i);
-        coerce('value', valueOut.label);
-        coerce('execute');
-
-        valuesOut.push(valueOut);
+    var visible;
+    if(itemOpts.itemIsNotPlainObject || (valueIn.method !== 'skip' && !Array.isArray(valueIn.args))) {
+        visible = valueOut.visible = false;
     }
+    else visible = coerce('visible');
+    if(!visible) return;
 
-    return valuesOut;
+    coerce('method');
+    coerce('args');
+    var label = coerce('label', 'step-' + itemOpts.index);
+    coerce('value', label);
+    coerce('execute');
 }

src/components/sliders/draw.js

@@ -74,14 +74,11 @@ module.exports = function draw(gd) {
     }
 
     sliderGroups.each(function(sliderOpts) {
-        // If it has fewer than two options, it's not really a slider:
-        if(sliderOpts.steps.length < 2) return;
-
         var gSlider = d3.select(this);
 
         computeLabelSteps(sliderOpts);
 
-        Plots.manageCommandObserver(gd, sliderOpts, sliderOpts.steps, function(data) {
+        Plots.manageCommandObserver(gd, sliderOpts, sliderOpts._visibleSteps, function(data) {
             // NB: Same as below. This is *not* always the same as sliderOpts since
             // if a new set of steps comes in, the reference in this callback would
             // be invalid. We need to refetch it from the slider group, which is
@@ -111,7 +108,7 @@ function makeSliderData(fullLayout, gd) {
 
     for(var i = 0; i < contOpts.length; i++) {
         var item = contOpts[i];
-        if(!item.visible || !item.steps.length) continue;
+        if(!item.visible) continue;
         item._gd = gd;
         sliderData.push(item);
     }
@@ -127,7 +124,7 @@ function keyFunction(opts) {
 // Compute the dimensions (mutates sliderOpts):
 function findDimensions(gd, sliderOpts) {
     var sliderLabels = Drawing.tester.selectAll('g.' + constants.labelGroupClass)
-        .data(sliderOpts.steps);
+        .data(sliderOpts._visibleSteps);
 
     sliderLabels.enter().append('g')
         .classed(constants.labelGroupClass, true);
@@ -176,7 +173,7 @@ function findDimensions(gd, sliderOpts) {
     dims.inputAreaLength = Math.round(dims.outerLength - sliderOpts.pad.l - sliderOpts.pad.r);
 
     var textableInputLength = dims.inputAreaLength - 2 * constants.stepInset;
-    var availableSpacePerLabel = textableInputLength / (sliderOpts.steps.length - 1);
+    var availableSpacePerLabel = textableInputLength / (sliderOpts._stepCount - 1);
     var computedSpacePerLabel = maxLabelWidth + constants.labelPadding;
     dims.labelStride = Math.max(1, Math.ceil(computedSpacePerLabel / availableSpacePerLabel));
     dims.labelHeight = labelHeight;
@@ -260,8 +257,8 @@ function drawSlider(gd, sliderGroup, sliderOpts) {
     // the *current* slider step is removed. The drawing functions will error out
     // when they fail to find it, so the fix for now is that it will just draw the
     // slider in the first position but will not execute the command.
-    if(sliderOpts.active >= sliderOpts.steps.length) {
-        sliderOpts.active = 0;
+    if(!((sliderOpts.steps[sliderOpts.active] || {}).visible)) {
+        sliderOpts.active = sliderOpts._visibleSteps[0]._index;
     }
 
     // These are carefully ordered for proper z-ordering:
@@ -278,7 +275,7 @@ function drawSlider(gd, sliderGroup, sliderOpts) {
     // Position the rectangle:
     Drawing.setTranslate(sliderGroup, dims.lx + sliderOpts.pad.l, dims.ly + sliderOpts.pad.t);
 
-    sliderGroup.call(setGripPosition, sliderOpts, sliderOpts.active / (sliderOpts.steps.length - 1), false);
+    sliderGroup.call(setGripPosition, sliderOpts, false);
     sliderGroup.call(drawCurrentValue, sliderOpts);
 
 }
@@ -406,10 +403,11 @@ function drawLabelGroup(sliderGroup, sliderOpts) {
 }
 
 function handleInput(gd, sliderGroup, sliderOpts, normalizedPosition, doTransition) {
-    var quantizedPosition = Math.round(normalizedPosition * (sliderOpts.steps.length - 1));
+    var quantizedPosition = Math.round(normalizedPosition * (sliderOpts._stepCount - 1));
+    var quantizedIndex = sliderOpts._visibleSteps[quantizedPosition]._index;
 
-    if(quantizedPosition !== sliderOpts.active) {
-        setActive(gd, sliderGroup, sliderOpts, quantizedPosition, true, doTransition);
+    if(quantizedIndex !== sliderOpts.active) {
+        setActive(gd, sliderGroup, sliderOpts, quantizedIndex, true, doTransition);
     }
 }
 
@@ -419,7 +417,7 @@ function setActive(gd, sliderGroup, sliderOpts, index, doCallback, doTransition)
 
     var step = sliderOpts.steps[sliderOpts.active];
 
-    sliderGroup.call(setGripPosition, sliderOpts, sliderOpts.active / (sliderOpts.steps.length - 1), doTransition);
+    sliderGroup.call(setGripPosition, sliderOpts, doTransition);
     sliderGroup.call(drawCurrentValue, sliderOpts);
 
     gd.emit('plotly_sliderchange', {
@@ -502,7 +500,7 @@ function attachGripEvents(item, gd, sliderGroup) {
 
 function drawTicks(sliderGroup, sliderOpts) {
     var tick = sliderGroup.selectAll('rect.' + constants.tickRectClass)
-        .data(sliderOpts.steps);
+        .data(sliderOpts._visibleSteps);
     var dims = sliderOpts._dims;
 
     tick.enter().append('rect')
@@ -524,7 +522,7 @@ function drawTicks(sliderGroup, sliderOpts) {
             .call(Color.fill, isMajor ? sliderOpts.tickcolor : sliderOpts.tickcolor);
 
         Drawing.setTranslate(item,
-            normalizedValueToPosition(sliderOpts, i / (sliderOpts.steps.length - 1)) - 0.5 * sliderOpts.tickwidth,
+            normalizedValueToPosition(sliderOpts, i / (sliderOpts._stepCount - 1)) - 0.5 * sliderOpts.tickwidth,
             (isMajor ? constants.tickOffset : constants.minorTickOffset) + dims.currentValueTotalHeight
         );
     });
@@ -534,21 +532,28 @@ function drawTicks(sliderGroup, sliderOpts) {
 function computeLabelSteps(sliderOpts) {
     var dims = sliderOpts._dims;
     dims.labelSteps = [];
-    var i0 = 0;
-    var nsteps = sliderOpts.steps.length;
+    var nsteps = sliderOpts._stepCount;
 
-    for(var i = i0; i < nsteps; i += dims.labelStride) {
+    for(var i = 0; i < nsteps; i += dims.labelStride) {
         dims.labelSteps.push({
             fraction: i / (nsteps - 1),
-            step: sliderOpts.steps[i]
+            step: sliderOpts._visibleSteps[i]
         });
     }
 }
 
-function setGripPosition(sliderGroup, sliderOpts, position, doTransition) {
+function setGripPosition(sliderGroup, sliderOpts, doTransition) {
     var grip = sliderGroup.select('rect.' + constants.gripRectClass);
 
-    var x = normalizedValueToPosition(sliderOpts, position);
+    var quantizedIndex = 0;
+    for(var i = 0; i < sliderOpts._stepCount; i++) {
+        if(sliderOpts._visibleSteps[i]._index === sliderOpts.active) {
+            quantizedIndex = i;
+            break;
+        }
+    }
+
+    var x = normalizedValueToPosition(sliderOpts, quantizedIndex / (sliderOpts._stepCount - 1));
 
     // If this is true, then *this component* is already invoking its own command
     // and has triggered its own animation.

src/components/updatemenus/attributes.js

@@ -17,6 +17,11 @@ var padAttrs = require('../../plots/pad_attributes');
 var buttonsAttrs = {
     _isLinkedToArray: 'button',
 
+    visible: {
+        valType: 'boolean',
+        role: 'info',
+        description: 'Determines whether or not this button is visible.'
+    },
     method: {
         valType: 'enumerated',
         values: ['restyle', 'relayout', 'animate', 'update', 'skip'],

src/components/updatemenus/defaults.js

@@ -76,16 +76,15 @@ function buttonsDefaults(menuIn, menuOut) {
         buttonIn = buttonsIn[i];
         buttonOut = {};
 
-        coerce('method');
-
-        if(!Lib.isPlainObject(buttonIn) || (buttonOut.method !== 'skip' && !Array.isArray(buttonIn.args))) {
-            continue;
+        var visible = coerce('visible', Lib.isPlainObject(buttonIn) &&
+            (buttonIn.method === 'skip' || Array.isArray(buttonIn.args)));
+        if(visible) {
+            coerce('method');
+            coerce('args');
+            coerce('label');
+            coerce('execute');
         }
 
-        coerce('args');
-        coerce('label');
-        coerce('execute');
-
         buttonOut._index = i;
         buttonsOut.push(buttonOut);
     }