Fix: Fixed Selecting Paired Result Legend Item Affects Multiple Graphs (

fixes #212) (#224)

src/main/js/controls/PairedResult/helpers/helpers.js

@@ -571,8 +571,21 @@ const clickHandler = (graphContext, control, config, canvasSVG) => (
     canvasSVG
         .selectAll(`.${styles.pairedPoint}[aria-describedby="${item.key}"]`)
         .attr("aria-hidden", legendSelected);
-    const boxPath = d3.selectAll(`.${styles.pairedBox}`);
-    showLine(config, boxPath);
+    /*
+    Select only those .carbon-data-pair elements that belong to the particular canvas for which a paired result legend item was clicked
+    and  pass them to showLine() method.
+    This ensures that when there are multiple canvases with paired results in each canvas,
+    selecting a paired result legend item in one canvas does not affect paired results in other canvases.
+    */
+    const pairedBoxGroupClipPath = `url(#${config.clipPathId})`;
+    const pairedBoxGroup = d3.selectAll(`.${styles.pairedBoxGroup}`);
+    pairedBoxGroup.each(function () {
+        const clipPath = d3.select(this).attr("clip-path");
+        if (clipPath === pairedBoxGroupClipPath) {
+            const boxPath = d3.select(this).selectAll(`.${styles.pairedBox}`);
+            showLine(config, boxPath);
+        }
+    });
     window.requestAnimationFrame(
         onAnimationHandler(graphContext, config, canvasSVG, item)
     );

src/test/unit/controls/PairedResult/PairedResultLoad-spec.js

@@ -2007,5 +2007,36 @@ describe("Paired Result - Load", () => {
                     .getAttribute("aria-describedby")
             ).toEqual(pairPrimary.key);
         });
+        describe("When multiple canvases with paired results present", () => {
+            it("Shoud not affect paired results in other canvases", () => {
+                const inputPrimary = getInput(valuesDefault);
+                const primaryGraph = new Graph(getAxes(axisDefault));
+                primaryGraph.loadContent(new PairedResult(inputPrimary));
+                const secondaryGraph = new Graph(getAxes(axisDefault));
+                secondaryGraph.loadContent(new PairedResult(inputSecondary));
+                const legendItem = document.querySelector(
+                    `.${styles.legendItem}[aria-describedby="${inputPrimary.key}_high"]`
+                );
+                triggerEvent(legendItem, "click");
+                const primaryGraphPRElement = pairedResultGraphContainer.querySelector(
+                    `.${styles.pairedBoxGroup}[aria-describedby="${inputPrimary.key}"]`
+                );
+                const secondaryGraphPRElement = pairedResultGraphContainer.querySelector(
+                    `.${styles.pairedBoxGroup}[aria-describedby="${inputSecondary.key}"]`
+                );
+                expect(
+                    fetchElementByClass(
+                        primaryGraphPRElement,
+                        styles.pairedLine
+                    ).getAttribute("aria-hidden")
+                ).toBe("true");
+                expect(
+                    fetchElementByClass(
+                        secondaryGraphPRElement,
+                        styles.pairedLine
+                    ).getAttribute("aria-hidden")
+                ).toBe("false");
+            });
+        });
     });
 });