Trace Isolation PR Feedback

- Show Lib.notify on first single-click toggle
- Refactor DBLCLICKDELAY into interaction constants
- Double click on the only visible trace (or group) re-enables all traces
- Single call to restyle

TODO: Tests, fix interaction on editable: true

Author: Robert Paskowitz

src/components/dragelement/index.js

@@ -13,7 +13,7 @@ var Plotly = require('../../plotly');
 var Lib = require('../../lib');
 
 var constants = require('../../plots/cartesian/constants');
-
+var interactConstants = require('../../constants/interactions');
 
 var dragElement = module.exports = {};
 
@@ -51,7 +51,7 @@ dragElement.unhoverRaw = unhover.raw;
 dragElement.init = function init(options) {
     var gd = Lib.getPlotDiv(options.element) || {},
         numClicks = 1,
-        DBLCLICKDELAY = constants.DBLCLICKDELAY,
+        DBLCLICKDELAY = interactConstants.DBLCLICKDELAY,
         startX,
         startY,
         newMouseDownTime,

src/components/legend/constants.js

@@ -12,6 +12,5 @@ module.exports = {
     scrollBarWidth: 4,
     scrollBarHeight: 20,
     scrollBarColor: '#808BA4',
-    scrollBarMargin: 4,
-    DBLCLICKDELAY: 300
+    scrollBarMargin: 4
 };

src/components/legend/draw.js

@@ -21,11 +21,13 @@ var Color = require('../color');
 var svgTextUtils = require('../../lib/svg_text_utils');
 
 var constants = require('./constants');
+var interactConstants = require('../../constants/interactions');
 var getLegendData = require('./get_legend_data');
 var style = require('./style');
 var helpers = require('./helpers');
 var anchorUtils = require('./anchor_utils');
 
+var SHOWISOLATETIP = true;
 
 module.exports = function draw(gd) {
     var fullLayout = gd._fullLayout;
@@ -399,7 +401,7 @@ function drawTexts(g, gd) {
 function setupTraceToggle(g, gd) {
     var newMouseDownTime,
         numClicks = 1,
-        DBLCLICKDELAY = constants.DBLCLICKDELAY;
+        DBLCLICKDELAY = interactConstants.DBLCLICKDELAY;
 
     var traceToggle = g.selectAll('rect')
         .data([0]);
@@ -432,7 +434,7 @@ function setupTraceToggle(g, gd) {
         }
 
         if(numClicks === 1) {
-            legend._clickTimeout = setTimeout(function() { handleClick(g, gd, numClicks); }, 300);
+            legend._clickTimeout = setTimeout(function() { handleClick(g, gd, numClicks); }, DBLCLICKDELAY);
         } else if(numClicks === 2) {
             if(legend._clickTimeout) {
                 clearTimeout(legend._clickTimeout);
@@ -455,6 +457,13 @@ function handleClick(g, gd, numClicks) {
         tracei,
         newVisible;
 
+
+    if(numClicks === 1 && SHOWISOLATETIP && gd.data && gd._context.showTips) {
+        Lib.notifier('Double click on legend to isolate individual trace', 'long');
+        SHOWISOLATETIP = false;
+    } else {
+        SHOWISOLATETIP = false;
+    }
     if(Registry.traceIs(trace, 'pie')) {
         var thisLabel = legendItem.label,
             thisLabelIndex = hiddenSlices.indexOf(thisLabel);
@@ -469,37 +478,50 @@ function handleClick(g, gd, numClicks) {
                     hiddenSlices.push(d.label);
                 }
             });
+            if(gd._fullLayout.hiddenlabels && gd._fullLayout.hiddenlabels.length === hiddenSlices.length && thisLabelIndex === -1) {
+                hiddenSlices = [];
+            }
         }
 
         Plotly.relayout(gd, 'hiddenlabels', hiddenSlices);
     } else {
-        var otherTraces = [],
-            traceIndex,
+        var allTraces = [],
+            traceVisibility = [],
             i;
 
         for(i = 0; i < fullData.length; i++) {
-            otherTraces.push(i);
+            allTraces.push(i);
+            traceVisibility.push('legendonly');
         }
 
         if(legendgroup === '') {
             traceIndicesInGroup = [trace.index];
-            otherTraces.splice(trace.index, 1);
+            traceVisibility[trace.index] = true;
         } else {
             for(i = 0; i < fullData.length; i++) {
                 tracei = fullData[i];
                 if(tracei.legendgroup === legendgroup) {
                     traceIndicesInGroup.push(tracei.index);
-                    traceIndex = otherTraces.indexOf(i);
-                    otherTraces.splice(traceIndex, 1);
+                    traceVisibility[allTraces.indexOf(i)] = true;
                 }
             }
         }
+
         if(numClicks === 1) {
             newVisible = trace.visible === true ? 'legendonly' : true;
             Plotly.restyle(gd, 'visible', newVisible, traceIndicesInGroup);
         } else if(numClicks === 2) {
-            Plotly.restyle(gd, 'visible', true, traceIndicesInGroup);
-            Plotly.restyle(gd, 'visible', 'legendonly', otherTraces);
+            var sameAsLast = true;
+            for(i = 0; i < fullData.length; i++) {
+                if(fullData[i].visible !== traceVisibility[i]) {
+                    sameAsLast = false;
+                    break;
+                }
+            }
+            if(sameAsLast) {
+                traceVisibility = true;
+            }
+            Plotly.restyle(gd, 'visible', traceVisibility, allTraces);
         }
     }
 }

src/constants/interactions.js

@@ -14,5 +14,9 @@ module.exports = {
      * Timing information for interactive elements
      */
     SHOW_PLACEHOLDER: 100,
-    HIDE_PLACEHOLDER: 1000
+    HIDE_PLACEHOLDER: 1000,
+
+    // ms between first mousedown and 2nd mouseup to constitute dblclick...
+    // we don't seem to have access to the system setting
+    DBLCLICKDELAY: 300
 };

src/plots/cartesian/constants.js

@@ -29,10 +29,6 @@ module.exports = {
     AX_ID_PATTERN: /^[xyz][0-9]*$/,
     AX_NAME_PATTERN: /^[xyz]axis[0-9]*$/,
 
-    // ms between first mousedown and 2nd mouseup to constitute dblclick...
-    // we don't seem to have access to the system setting
-    DBLCLICKDELAY: 300,
-
     // pixels to move mouse before you stop clamping to starting point
     MINDRAG: 8,