Persistent point selection

src/components/drawing/index.js

@@ -22,6 +22,7 @@ var svgTextUtils = require('../../lib/svg_text_utils');
 var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
 var alignment = require('../../constants/alignment');
 var LINE_SPACING = alignment.LINE_SPACING;
+var DESELECTDIM = require('../../constants/interactions').DESELECTDIM;
 
 var subTypes = require('../../traces/scatter/subtypes');
 var makeBubbleSizeFn = require('../../traces/scatter/make_bubble_size_func');
@@ -248,8 +249,6 @@ drawing.symbolNumber = function(v) {
 };
 
 function singlePointStyle(d, sel, trace, markerScale, lineScale, marker, markerLine, gd) {
-    // only scatter & box plots get marker path and opacity
-    // bars, histograms don't
     if(Registry.traceIs(trace, 'symbols')) {
         var sizeFn = makeBubbleSizeFn(trace);
 
@@ -276,12 +275,13 @@ function singlePointStyle(d, sel, trace, markerScale, lineScale, marker, markerL
 
             return drawing.symbolFuncs[xBase](r) +
                 (x >= 200 ? DOTPATH : '');
-        })
-        .style('opacity', function(d) {
-            return (d.mo + 1 || marker.opacity + 1) - 1;
         });
     }
 
+    sel.style('opacity', function(d) {
+        return (d.mo + 1 || marker.opacity + 1) - 1;
+    });
+
     var perPointGradient = false;
 
     // 'so' is suspected outliers, for box plots
@@ -409,7 +409,6 @@ drawing.singlePointStyle = function(d, sel, trace, markerScale, lineScale, gd) {
     var marker = trace.marker;
 
     singlePointStyle(d, sel, trace, markerScale, lineScale, marker, marker.line, gd);
-
 };
 
 drawing.pointStyle = function(s, trace, gd) {
@@ -426,6 +425,35 @@ drawing.pointStyle = function(s, trace, gd) {
     });
 };
 
+drawing.selectedPointStyle = function(s, trace) {
+    if(!s.size() || !trace.selectedpoints) return;
+
+    var selectedAttrs = trace.selected || {};
+    var unselectedAttrs = trace.unselected || {};
+
+    s.style('opacity', function(d) {
+        return d.selected ?
+            (selectedAttrs.marker || {}).opacity :
+            (unselectedAttrs.marker || {}).opacity;
+    });
+
+    // which is slightly different than:
+    // ((d.mo + 1 || opacity + 1) - 1) * (d.dim ? DESELECTDIM : 1);
+    // in https://github.com/plotly/plotly.js/blob/master/src/traces/scatter/select.js
+
+    s.each(function(d) {
+        var pt = d3.select(this);
+        var smc = (selectedAttrs.marker || {}).color;
+        var usmc = (unselectedAttrs.marker || {}).color;
+
+        if(d.selected) {
+            if(smc) Color.fill(pt, smc);
+        } else {
+            if(usmc) Color.fill(pt, usmc);
+        }
+    });
+};
+
 drawing.tryColorscale = function(marker, prefix) {
     var cont = prefix ? Lib.nestedProperty(marker, prefix).get() : marker,
         scl = cont.colorscale,
@@ -483,6 +511,31 @@ drawing.textPointStyle = function(s, trace, gd) {
     });
 };
 
+drawing.selectedTextStyle = function(s, trace) {
+    if(!s.size() || !trace.selectedpoints) return;
+
+    var selectedAttrs = trace.selected || {};
+    var unselectedAttrs = trace.unselected || {};
+
+    s.each(function(d) {
+        var tx = d3.select(this);
+        var tc = d.tc || trace.textfont.color;
+        var stc = (selectedAttrs.textfont || {}).color;
+        var utc = (unselectedAttrs.textfont || {}).color;
+        var tc2;
+
+        if(d.selected) {
+            if(stc) tc2 = stc;
+            else tc2 = Color.addOpacity(tc, 1);
+        } else {
+            if(utc) tc2 = utc;
+            else tc2 = Color.addOpacity(tc, DESELECTDIM);
+        }
+
+        Color.fill(tx, tc2);
+    });
+};
+
 // generalized Catmull-Rom splines, per
 // http://www.cemyuksel.com/research/catmullrom_param/catmullrom.pdf
 var CatmullRomExp = 0.5;

src/plots/attributes.js

@@ -94,6 +94,35 @@ module.exports = {
             'DOM elements'
         ].join(' ')
     },
+
+    // N.B. these cannot be 'data_array' as they do not have the same length as
+    // other data arrays and arrayOk attributes in general
+    //
+    // TODO maybe add another valType:
+    // https://github.com/plotly/plotly.js/issues/1894
+    selectedpoints: {
+        valType: 'any',
+        role: 'info',
+        editType: 'calc',
+        description: [
+            'Array containing integer indices of selected points.',
+            'Has an effect only for traces that support selections.',
+            'Note that an empty array means an empty selection where the `unselected`',
+            'are turned on for all points, whereas, any other non-array values means no',
+            'selection all where the `selected` and `unselected` styles have no effect.'
+        ].join(' ')
+    },
+    selectedids: {
+        valType: 'any',
+        role: 'info',
+        editType: 'calc',
+        description: [
+            'Array containing `ids` of selected points.',
+            'Has an effect only for traces that support selections.',
+            '...'
+        ].join(' ')
+    },
+
     hoverinfo: {
         valType: 'flaglist',
         role: 'info',

src/plots/cartesian/select.js

@@ -24,7 +24,9 @@ var MINSELECT = constants.MINSELECT;
 function getAxId(ax) { return ax._id; }
 
 module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {
-    var zoomLayer = dragOptions.gd._fullLayout._zoomlayer,
+    var gd = dragOptions.gd,
+        fullLayout = gd._fullLayout,
+        zoomLayer = fullLayout._zoomlayer,
         dragBBox = dragOptions.element.getBoundingClientRect(),
         plotinfo = dragOptions.plotinfo,
         xs = plotinfo.xaxis._offset,
@@ -66,8 +68,7 @@ module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {
 
     // find the traces to search for selection points
     var searchTraces = [];
-    var gd = dragOptions.gd;
-    var throttleID = gd._fullLayout._uid + constants.SELECTID;
+    var throttleID = fullLayout._uid + constants.SELECTID;
     var selection = [];
     var i, cd, trace, searchInfo, eventData;
 
@@ -83,6 +84,7 @@ module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {
             ) {
                 searchTraces.push({
                     selectPoints: trace._module.selectPoints,
+                    style: trace._module.style,
                     cd: cd,
                     xaxis: dragOptions.xaxes[0],
                     yaxis: dragOptions.yaxes[0]
@@ -94,6 +96,7 @@ module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {
 
             searchTraces.push({
                 selectPoints: trace._module.selectPoints,
+                style: trace._module.style,
                 cd: cd,
                 xaxis: axes.getFromId(gd, trace.xaxis),
                 yaxis: axes.getFromId(gd, trace.yaxis)
@@ -202,6 +205,7 @@ module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {
                 }
 
                 eventData = {points: selection};
+                updateSelectedState(gd, searchTraces, eventData);
                 fillRangeItems(eventData, poly, pts);
                 dragOptions.gd.emit('plotly_selecting', eventData);
             }
@@ -221,6 +225,7 @@ module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {
                     searchInfo.selectPoints(searchInfo, false);
                 }
 
+                updateSelectedState(gd, searchTraces);
                 gd.emit('plotly_deselect', null);
             }
             else {
@@ -230,6 +235,40 @@ module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {
     };
 };
 
+function updateSelectedState(gd, searchTraces, eventData) {
+    var i, searchInfo;
+
+    if(eventData) {
+        var pts = eventData.points || [];
+
+        for(i = 0; i < searchTraces.length; i++) {
+            searchInfo = searchTraces[i];
+            searchInfo.cd[0].trace.selectedpoints = [];
+            searchInfo.cd[0].trace._input.selectedpoints = [];
+        }
+
+        for(i = 0; i < pts.length; i++) {
+            var pt = pts[i];
+            var ptNumber = pt.pointNumber;
+
+            pt.data.selectedpoints.push(ptNumber);
+            pt.fullData.selectedpoints.push(ptNumber);
+        }
+    }
+    else {
+        for(i = 0; i < searchTraces.length; i++) {
+            searchInfo = searchTraces[i];
+            delete searchInfo.cd[0].trace.selectedpoints;
+            delete searchInfo.cd[0].trace._input.selectedpoints;
+        }
+    }
+
+    for(i = 0; i < searchTraces.length; i++) {
+        searchInfo = searchTraces[i];
+        if(searchInfo.style) searchInfo.style(gd, searchInfo.cd);
+    }
+}
+
 function fillSelectionItem(selection, searchInfo) {
     if(Array.isArray(selection)) {
         var trace = searchInfo.cd[0].trace;

src/plots/plots.js

@@ -1022,6 +1022,11 @@ plots.supplyTraceDefaults = function(traceIn, traceOutIndex, layout, traceInInde
             traceOut.visible = !!traceOut.visible;
         }
 
+        if(_module && _module.selectPoints && traceOut.type !== 'scattergl') {
+            coerce('selectedpoints');
+            coerce('selectedids');
+        }
+
         plots.supplyTransformDefaults(traceIn, traceOut, layout);
     }
 

src/traces/bar/arrays_to_calcdata.js

@@ -14,6 +14,8 @@ var mergeArray = require('../../lib').mergeArray;
 
 // arrayOk attributes, merge them into calcdata array
 module.exports = function arraysToCalcdata(cd, trace) {
+    for(var i = 0; i < cd.length; i++) cd[i].i = i;
+
     mergeArray(trace.text, cd, 'tx');
     mergeArray(trace.hovertext, cd, 'htx');
 

src/traces/bar/attributes.js

@@ -38,10 +38,19 @@ var marker = extendFlat({
     editType: 'calc'
 }, colorAttributes('marker'), {
     showscale: scatterMarkerAttrs.showscale,
-    colorbar: colorbarAttrs
+    colorbar: colorbarAttrs,
+    opacity: {
+        valType: 'number',
+        arrayOk: true,
+        dflt: 1,
+        min: 0,
+        max: 1,
+        role: 'style',
+        editType: 'style',
+        description: 'Sets the opacity of the bars.'
+    }
 });
 
-
 module.exports = {
     x: scatterAttrs.x,
     x0: scatterAttrs.x0,
@@ -150,6 +159,9 @@ module.exports = {
 
     marker: marker,
 
+    selected: scatterAttrs.selected,
+    unselected: scatterAttrs.unselected,
+
     r: scatterAttrs.r,
     t: scatterAttrs.t,
 

src/traces/bar/calc.js

@@ -14,9 +14,8 @@ var isNumeric = require('fast-isnumeric');
 var Axes = require('../../plots/cartesian/axes');
 var hasColorscale = require('../../components/colorscale/has_colorscale');
 var colorscaleCalc = require('../../components/colorscale/calc');
-
 var arraysToCalcdata = require('./arrays_to_calcdata');
-
+var calcSelection = require('../scatter/calc_selection');
 
 module.exports = function calc(gd, trace) {
     // depending on bar direction, set position and size axes
@@ -92,6 +91,7 @@ module.exports = function calc(gd, trace) {
     }
 
     arraysToCalcdata(cd, trace);
+    calcSelection(cd, trace);
 
     return cd;
 };

src/traces/bar/defaults.js

@@ -17,7 +17,6 @@ var handleStyleDefaults = require('../bar/style_defaults');
 var errorBarsSupplyDefaults = require('../../components/errorbars/defaults');
 var attributes = require('./attributes');
 
-
 module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
     function coerce(attr, dflt) {
         return Lib.coerce(traceIn, traceOut, attributes, attr, dflt);
@@ -44,11 +43,14 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     var hasBoth = Array.isArray(textPosition) || textPosition === 'auto',
         hasInside = hasBoth || textPosition === 'inside',
         hasOutside = hasBoth || textPosition === 'outside';
+
     if(hasInside || hasOutside) {
         var textFont = coerceFont(coerce, 'textfont', layout.font);
         if(hasInside) coerceFont(coerce, 'insidetextfont', textFont);
         if(hasOutside) coerceFont(coerce, 'outsidetextfont', textFont);
         coerce('constraintext');
+        coerce('selected.textfont.color');
+        coerce('unselected.textfont.color');
     }
 
     handleStyleDefaults(traceIn, traceOut, coerce, defaultColor, layout);

src/traces/bar/plot.js

@@ -42,10 +42,14 @@ module.exports = function plot(gd, plotinfo, cdbar) {
     bartraces.enter().append('g')
         .attr('class', 'trace bars');
 
+    bartraces.each(function(d) {
+        d[0].node3 = d3.select(this);
+    });
+
     bartraces.append('g')
         .attr('class', 'points')
         .each(function(d) {
-            var sel = d[0].node3 = d3.select(this);
+            var sel = d3.select(this);
             var t = d[0].t;
             var trace = d[0].trace;
             var poffset = t.poffset;
@@ -146,11 +150,13 @@ module.exports = function plot(gd, plotinfo, cdbar) {
 };
 
 function appendBarText(gd, bar, calcTrace, i, x0, x1, y0, y1) {
+    var textPosition;
+
     function appendTextNode(bar, text, textFont) {
         var textSelection = bar.append('text')
             .text(text)
             .attr({
-                'class': 'bartext',
+                'class': 'bartext bartext-' + textPosition,
                 transform: '',
                 'text-anchor': 'middle',
                 // prohibit tex interpretation until we can handle
@@ -170,7 +176,7 @@ function appendBarText(gd, bar, calcTrace, i, x0, x1, y0, y1) {
     var text = getText(trace, i);
     if(!text) return;
 
-    var textPosition = getTextPosition(trace, i);
+    textPosition = getTextPosition(trace, i);
     if(textPosition === 'none') return;
 
     var textFont = getTextFont(trace, i, gd._fullLayout.font),
@@ -201,6 +207,7 @@ function appendBarText(gd, bar, calcTrace, i, x0, x1, y0, y1) {
     if(textPosition === 'auto') {
         if(isOutmostBar) {
             // draw text using insideTextFont and check if it fits inside bar
+            textPosition = 'inside';
             textSelection = appendTextNode(bar, text, insideTextFont);
 
             textBB = Drawing.bBox(textSelection.node()),