Update plotly and how selections are handled.

Ugly because plotly.js v2 doesn't expose unselect in any meaningful way.

Author: manthey

histomicsui/web_client/package.json

@@ -38,7 +38,7 @@
         "bootstrap-submenu": "^2.0.4",
         "copy-webpack-plugin": "^4.5.2",
         "petite-vue": "^0.4.1",
-        "plotly.js": "^1.58.5",
+        "plotly.js": "^2.34.0",
         "sinon": "^2.1.0",
         "tinycolor2": "~1.4.1",
         "url-search-params-polyfill": "^8.1.1",

histomicsui/web_client/panels/MetadataPlot.js

@@ -236,10 +236,18 @@ var MetadataPlot = Panel.extend({
     },
 
     onSelect: function (evt, plotData) {
+        if (this._elementSelect) {
+            this._elementSelect -= 1;
+            if (this._afterSelect && !this._elementSelect) {
+                this._afterSelect();
+                this._afterSelect = null;
+            }
+            return;
+        }
         if (plotData.colDict['_3_annotation.id'] === undefined || plotData.colDict['_5_annotationelement.id'] === undefined) {
             return;
         }
-        // evt is undefined when selection is cleared
+        // evt is undefined when the selection is cleared
         if (evt === undefined) {
             this.parentView._resetSelection();
             return;
@@ -284,7 +292,27 @@ var MetadataPlot = Panel.extend({
         if (!points.length) {
             return;
         }
-        window.Plotly.restyle(this._plotlyNode[0], {selectedpoints: [points]});
+        /* Deselect any selection on plotly.  There is no exposed function to
+         * do this, so we synthesize several actions: (a) switch to box select
+         * mode, (b) double click on the plot, (c) ignore the first selection
+         * event (first click), (d) on the second selection event, the plot no
+         * longer has a selection, so we can specify the selected points (in
+         * the _afterSelect callback), (e) switch back to whatever tool the
+         * user had selected on the plot. */
+        this._elementSelect = 2;
+        const curactive = this._plotlyNode.find('.modebar-btn.active');
+        this._afterSelect = () => {
+            window.Plotly.restyle(this._plotlyNode[0], {selectedpoints: [points]});
+            if (curactive.length) {
+                curactive[0].dispatchEvent(new MouseEvent('click'));
+            }
+        };
+        const plot = this._plotlyNode.find('.drag').first()[0];
+        for (let i = 0; i <= 2; i += 1) {
+            this._plotlyNode.find('.modebar-btn[data-val="select"]')[0].dispatchEvent(new MouseEvent('click'));
+            plot.dispatchEvent(new MouseEvent('mousedown', {bubbles: true, cancelable: true, view: window, clientX: 10, clientY: 10}));
+            plot.dispatchEvent(new MouseEvent('mouseup', {bubbles: true, cancelable: true, view: window, clientX: 10, clientY: 10}));
+        }
     },
 
     _formatNumber: function (val, significant) {

histomicsui/web_client/webpack.helper.js

@@ -12,7 +12,9 @@ module.exports = function (config) {
             to: config.output.path,
             toType: 'dir'
         }, {
-            from: require.resolve('plotly.js/dist/plotly.min.js'),
+            // the minified version fails in our test environment because
+            // plotly.min.js uses some modern javascript (plotly.js doesn't)
+            from: require.resolve(process.env.TOX_ENV_NAME ? 'plotly.js/dist/plotly.js' : 'plotly.js/dist/plotly.min.js'),
             to: path.join(config.output.path, 'extra', 'plotly.js'),
             toType: 'file'
         }, {