Merge pull request #6655 from plotly/fix-multi-legend-isolate

Fix double clicking one item in a legend hides traces in other legends
plotly · Jun 30, 2023 · 32b6fec · 32b6fec
2 parents ab5e16a + 988da2a
commit 32b6fec
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 2 deletions.
diff --git a/draftlogs/6655_fix.md b/draftlogs/6655_fix.md
@@ -0,0 +1 @@
+ - Fix double clicking one item in a legend hides traces in other legends [[#6655](https://github.com/plotly/plotly.js/pull/6655)]
diff --git a/src/components/legend/handle_click.js b/src/components/legend/handle_click.js
@@ -183,9 +183,10 @@ module.exports = function handleClick(g, gd, numClicks) {
                 }
             }
 
+            var thisLegend = fullTrace.legend;
             for(i = 0; i < fullData.length; i++) {
-                // False is sticky; we don't change it.
-                if(fullData[i].visible === false) continue;
+                // False is sticky; we don't change it. Also ensure we don't change states of itmes in other legend
+                if(fullData[i].visible === false || fullData[i].legend !== thisLegend) continue;
 
                 if(Registry.traceIs(fullData[i], 'notLegendIsolatable')) {
                     continue;

diff --git a/test/jasmine/tests/legend_test.js b/test/jasmine/tests/legend_test.js
@@ -1782,6 +1782,62 @@ describe('legend interaction', function() {
             });
         });
 
+        describe('traces in different legends', function() {
+            beforeEach(function(done) {
+                Plotly.newPlot(gd, [
+                    {x: [1, 2], y: [0, 1], visible: false},
+                    {x: [1, 2], y: [1, 2], visible: 'legendonly'},
+                    {x: [1, 2], y: [2, 3]},
+                    {x: [1, 2], y: [0, 1], yaxis: 'y2', legend: 'legend2', visible: false},
+                    {x: [1, 2], y: [1, 2], yaxis: 'y2', legend: 'legend2', visible: 'legendonly'},
+                    {x: [1, 2], y: [2, 3], yaxis: 'y2', legend: 'legend2'}
+                ], {
+                    yaxis: {
+                        domain: [0.55, 1]
+                    },
+                    yaxis2: {
+                        anchor: 'x',
+                        domain: [0, 0.45]
+                    },
+                    legend2: {
+                        y: 0.5
+                    }
+                }).then(done);
+            });
+
+            it('clicking once toggles legendonly -> true', function(done) {
+                Promise.resolve()
+                    .then(assertVisible([false, 'legendonly', true, false, 'legendonly', true]))
+                    .then(click(0))
+                    .then(assertVisible([false, true, true, false, 'legendonly', true]))
+                    .then(done, done.fail);
+            });
+
+            it('clicking once toggles true -> legendonly', function(done) {
+                Promise.resolve()
+                    .then(assertVisible([false, 'legendonly', true, false, 'legendonly', true]))
+                    .then(click(1))
+                    .then(assertVisible([false, 'legendonly', 'legendonly', false, 'legendonly', true]))
+                    .then(done, done.fail);
+            });
+
+            it('double-clicking isolates a visible trace ', function(done) {
+                Promise.resolve()
+                    .then(click(0))
+                    .then(assertVisible([false, true, true, false, 'legendonly', true]))
+                    .then(click(0, 2))
+                    .then(assertVisible([false, true, 'legendonly', false, 'legendonly', true]))
+                    .then(done, done.fail);
+            });
+
+            it('double-clicking an isolated trace shows all non-hidden traces', function(done) {
+                Promise.resolve()
+                    .then(click(0, 2))
+                    .then(assertVisible([false, true, true, false, 'legendonly', true]))
+                    .then(done, done.fail);
+            });
+        });
+
         describe('legendgroup visibility', function() {
             beforeEach(function(done) {
                 Plotly.newPlot(gd, [{