Merge pull request #7730 from silversonicaxel/feature-notifier

Add notifier boolean configuration

Author: camdecoster

draftlogs/7730_add.md

@@ -0,0 +1 @@
+ - Add `displayNotifier` configuration property to set the display of notifier in the top right area of the viewport [[#7730](https://github.com/plotly/plotly.js/pull/7730)], with thanks to @silversonicaxel for the contribution!

src/components/legend/handle_click.js

@@ -31,7 +31,7 @@ exports.handleItemClick = function handleItemClick(g, gd, legendObj, mode) {
     if(mode === 'toggle' && legendObj.itemdoubleclick === 'toggleothers' &&
         SHOWISOLATETIP && gd.data && gd._context.showTips
     ) {
-        Lib.notifier(Lib._(gd, 'Double-click on legend to isolate one trace'), 'long');
+        Lib.notifier(Lib._(gd, 'Double-click on legend to isolate one trace'), 'long', gd);
         SHOWISOLATETIP = false;
     }
 
@@ -323,7 +323,7 @@ exports.handleTitleClick = function handleTitleClick(gd, legendObj, mode) {
         const item = allLegendItems[i];
         const inThisLegend = isInLegend(item);
 
-        // If item is not in this legend, skip if in toggle mode 
+        // If item is not in this legend, skip if in toggle mode
         // or if item is not displayed in the legend
         if(!inThisLegend) {
             const notDisplayed = (item.showlegend !== true && !item.legendgroup);

src/components/modebar/buttons.js

@@ -49,7 +49,7 @@ modeBarButtons.toImage = {
         var toImageButtonOptions = gd._context.toImageButtonOptions;
         var opts = {format: toImageButtonOptions.format || 'png'};
 
-        Lib.notifier(_(gd, 'Taking snapshot - this may take a few seconds'), 'long');
+        Lib.notifier(_(gd, 'Taking snapshot - this may take a few seconds'), 'long', gd);
 
         ['filename', 'width', 'height', 'scale'].forEach(function(key) {
             if(key in toImageButtonOptions) {
@@ -58,12 +58,12 @@ modeBarButtons.toImage = {
         });
 
         Registry.call('downloadImage', gd, opts)
-          .then(function(filename) {
-              Lib.notifier(_(gd, 'Snapshot succeeded') + ' - ' + filename, 'long');
-          })
-          .catch(function() {
-              Lib.notifier(_(gd, 'Sorry, there was a problem downloading your snapshot!'), 'long');
-          });
+            .then(function(filename) {
+                Lib.notifier(_(gd, 'Snapshot succeeded') + ' - ' + filename, 'long', gd);
+            })
+            .catch(function() {
+                Lib.notifier(_(gd, 'Sorry, there was a problem downloading your snapshot!'), 'long', gd);
+            });
     }
 };
 

src/lib/notifier.js

@@ -7,12 +7,14 @@ var NOTEDATA = [];
 
 /**
  * notifier
- * @param {String} text The person's user name
- * @param {Number} [delay=1000] The delay time in milliseconds
- *          or 'long' which provides 2000 ms delay time.
+ * @param {string} text - The message to display in the notification
+ * @param {number|'long'|'stick'} [displayLength=1000] - Display duration in ms,
+ *     'long' for 3000ms, or 'stick' to keep until manually closed
+ * @param {object} [gd] - Plot div; if provided and gd._context.displayNotifier === false, notification is suppressed
  * @return {undefined} this function does not return a value
  */
-module.exports = function(text, displayLength) {
+module.exports = function(text, displayLength, gd) {
+    if(gd?._context?.displayNotifier === false) return;
     if(NOTEDATA.indexOf(text) !== -1) return;
 
     NOTEDATA.push(text);
@@ -63,15 +65,15 @@ module.exports = function(text, displayLength) {
 
             if(displayLength === 'stick') {
                 note.transition()
-                        .duration(350)
-                        .style('opacity', 1);
+                    .duration(350)
+                    .style('opacity', 1);
             } else {
                 note.transition()
-                        .duration(700)
-                        .style('opacity', 1)
+                    .duration(700)
+                    .style('opacity', 1)
                     .transition()
-                        .delay(ts)
-                        .call(killNote);
+                    .delay(ts)
+                    .call(killNote);
             }
         });
 };

src/plot_api/plot_config.js

@@ -221,6 +221,12 @@ var configAttributes = {
         ].join(' ')
     },
 
+    displayNotifier: {
+        valType: 'boolean',
+        dflt: true,
+        description: 'Determines whether or not notifier is displayed.'
+    },
+
     showLink: {
         valType: 'boolean',
         dflt: false,

src/plots/cartesian/dragbox.js

@@ -792,9 +792,9 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
                     r1 !== undefined;
 
                 if((hasRangeInitial && (
-                        (r0 !== undefined && r0 !== ax.range[0]) ||
-                        (r1 !== undefined && r1 !== ax.range[1])
-                    )) ||
+                    (r0 !== undefined && r0 !== ax.range[0]) ||
+                    (r1 !== undefined && r1 !== ax.range[1])
+                )) ||
                     (!hasRangeInitial && ax.autorange !== true)
                 ) {
                     doubleClickConfig = 'reset';
@@ -1209,7 +1209,7 @@ function removeZoombox(gd) {
 
 function showDoubleClickNotifier(gd) {
     if(SHOWZOOMOUTTIP && gd.data && gd._context.showTips) {
-        Lib.notifier(Lib._(gd, 'Double-click to zoom back out'), 'long');
+        Lib.notifier(Lib._(gd, 'Double-click to zoom back out'), 'long', gd);
         SHOWZOOMOUTTIP = false;
     }
 }

src/plots/ternary/ternary.js

@@ -678,7 +678,7 @@ proto.initInteractions = function() {
         Registry.call('_guiRelayout', gd, makeUpdate(mins));
 
         if(SHOWZOOMOUTTIP && gd.data && gd._context.showTips) {
-            Lib.notifier(_(gd, 'Double-click to zoom back out'), 'long');
+            Lib.notifier(_(gd, 'Double-click to zoom back out'), 'long', gd);
             SHOWZOOMOUTTIP = false;
         }
     }

test/jasmine/tests/lib_test.js

@@ -2105,6 +2105,34 @@ describe('Test lib.js:', function () {
                 _run([]);
             });
         });
+
+        describe('should respect notifier config option', function () {
+            var query = '.notifier-note';
+
+            beforeEach(function (done) {
+                d3SelectAll(query).each(function () {
+                    d3Select(this).select('button').node().click();
+                });
+                setTimeout(done, 1000);
+            });
+
+            it('with true', function () {
+                var gd = { _context: { displayNotifier: true } };
+                Lib.notifier('test message', 'long', gd);
+                expect(d3SelectAll(query).size()).toBe(1);
+            });
+
+            it('with false', function () {
+                var gd = { _context: { displayNotifier: false } };
+                Lib.notifier('test message', 'long', gd);
+                expect(d3SelectAll(query).size()).toBe(0);
+            });
+
+            it('when gd has no _context', function () {
+                Lib.notifier('test message', 'long');
+                expect(d3SelectAll(query).size()).toBe(1);
+            });
+        });
     });
 
     describe('keyedContainer', function () {