fix(#6338): LimitLines persist when series is moved to another Y Axis (#6367)

* fix: remove unnecessary emit

* refactor: fix parameter names

* fix: update limit lines on axis reset

* Revert "fix: remove unnecessary emit"

This reverts commit b9a92e5e96bc155d04a10324230de6cd88521af5.

* refactor: adjust parameter names

* test: add test for limit lines visibility

* refactor: convert to one-liner

---------

Co-authored-by: Shefali Joshi <simplyrender@gmail.com>

e2e/tests/functional/plugins/plot/overlayPlot.e2e.spec.js

@@ -62,6 +62,69 @@ test.describe('Overlay Plot', () => {
         expect(color).toBe('rgb(255, 166, 61)');
     });
 
+    test('Limit lines persist when series is moved to another Y Axis and on refresh', async ({ page }) => {
+        test.info().annotations.push({
+            type: 'issue',
+            description: 'https://github.com/nasa/openmct/issues/6338'
+        });
+        // Create an Overlay Plot with a default SWG
+        const overlayPlot = await createDomainObjectWithDefaults(page, {
+            type: "Overlay Plot"
+        });
+
+        const swgA = await createDomainObjectWithDefaults(page, {
+            type: "Sine Wave Generator",
+            parent: overlayPlot.uuid
+        });
+
+        await page.goto(overlayPlot.url);
+
+        // Assert that no limit lines are shown by default
+        await page.waitForSelector('.js-limit-area', { state: 'attached' });
+        expect(await page.locator('.c-plot-limit-line').count()).toBe(0);
+
+        // Enter edit mode
+        await page.click('button[title="Edit"]');
+
+        // Expand the "Sine Wave Generator" plot series options and enable limit lines
+        await selectInspectorTab(page, 'Config');
+        await page.getByRole('list', { name: 'Plot Series Properties' }).locator('span').first().click();
+        await page.getByRole('list', { name: 'Plot Series Properties' }).locator('[title="Display limit lines"]~div input').check();
+
+        await assertLimitLinesExistAndAreVisible(page);
+
+        // Save (exit edit mode)
+        await page.locator('button[title="Save"]').click();
+        await page.locator('li[title="Save and Finish Editing"]').click();
+
+        await assertLimitLinesExistAndAreVisible(page);
+
+        await page.reload();
+
+        await assertLimitLinesExistAndAreVisible(page);
+
+        // Enter edit mode
+        await page.click('button[title="Edit"]');
+
+        await selectInspectorTab(page, 'Elements');
+
+        // Drag Sine Wave Generator series from Y Axis 1 into Y Axis 2
+        await page.locator(`#inspector-elements-tree >> text=${swgA.name}`).dragTo(page.locator('[aria-label="Element Item Group Y Axis 2"]'));
+
+        await assertLimitLinesExistAndAreVisible(page);
+
+        // Save (exit edit mode)
+        await page.locator('button[title="Save"]').click();
+        await page.locator('li[title="Save and Finish Editing"]').click();
+
+        await assertLimitLinesExistAndAreVisible(page);
+
+        await page.reload();
+
+        await assertLimitLinesExistAndAreVisible(page);
+
+    });
+
     test('The elements pool supports dragging series into multiple y-axis buckets', async ({ page }) => {
         const overlayPlot = await createDomainObjectWithDefaults(page, {
             type: "Overlay Plot"
@@ -199,3 +262,17 @@ async function getCanvasPixelsWithData(page) {
 
     return getTelemValuePromise;
 }
+
+/**
+ *
+ * @param {import('@playwright/test').Page} page
+ */
+async function assertLimitLinesExistAndAreVisible(page) {
+    await page.waitForSelector('.js-limit-area', { state: 'attached' });
+    const limitLineCount = await page.locator('.c-plot-limit-line').count();
+    // There should be 10 limit lines created by default
+    expect(await page.locator('.c-plot-limit-line').count()).toBe(10);
+    for (let i = 0; i < limitLineCount; i++) {
+        await expect(page.locator('.c-plot-limit-line').nth(i)).toBeVisible();
+    }
+}

src/plugins/plot/chart/MctChart.vue

@@ -151,12 +151,12 @@ export default {
             this.scheduleDraw();
         },
         showLimitLineLabels() {
-            this.drawLimitLines();
+            this.updateLimitLines();
         },
         hiddenYAxisIds() {
             this.hiddenYAxisIds.forEach(id => {
                 this.resetYOffsetAndSeriesDataForYAxis(id);
-                this.drawLimitLines();
+                this.updateLimitLines();
             });
             this.scheduleDraw();
         }
@@ -222,11 +222,11 @@ export default {
 
             return config;
         },
-        reDraw(mode, o, series) {
-            this.changeInterpolate(mode, o, series);
-            this.changeMarkers(mode, o, series);
-            this.changeAlarmMarkers(mode, o, series);
-            this.changeLimitLines(mode, o, series);
+        reDraw(newXKey, oldXKey, series) {
+            this.changeInterpolate(newXKey, oldXKey, series);
+            this.changeMarkers(newXKey, oldXKey, series);
+            this.changeAlarmMarkers(newXKey, oldXKey, series);
+            this.changeLimitLines(newXKey, oldXKey, series);
         },
         onSeriesAdd(series) {
             this.listenTo(series, `change:${HANDLED_ATTRIBUTES.xKey}`, this.reDraw, this);
@@ -242,6 +242,11 @@ export default {
             this.makeChartElement(series);
             this.makeLimitLines(series);
         },
+        onSeriesRemove(series) {
+            this.stopListening(series);
+            this.removeChartElement(series);
+            this.scheduleDraw();
+        },
         onAddPoint(point, insertIndex, series) {
             const mainYAxisId = this.config.yAxis.get('id');
             const seriesYAxisId = series.get('yAxisId');
@@ -317,13 +322,14 @@ export default {
                 this.pointSets.push(pointSet);
             }
         },
-        changeLimitLines(mode, o, series) {
-            if (mode === o) {
+        changeLimitLines(showLimitLines, oldShowLimitLines, series) {
+            if (showLimitLines === oldShowLimitLines) {
                 return;
             }
 
             this.makeLimitLines(series);
-            this.updateLimitsAndDraw();
+            this.updateLimitLines();
+            this.scheduleDraw();
         },
         resetAxisAndRedraw(newYAxisId, oldYAxisId, series) {
             if (!oldYAxisId) {
@@ -337,12 +343,7 @@ export default {
             //Make the chart elements again for the new y-axis and offset
             this.makeChartElement(series);
             this.makeLimitLines(series);
-
-            this.scheduleDraw();
-        },
-        onSeriesRemove(series) {
-            this.stopListening(series);
-            this.removeChartElement(series);
+            this.updateLimitLines();
             this.scheduleDraw();
         },
         destroy() {
@@ -583,10 +584,7 @@ export default {
                 return;
             }
 
-            this.updateLimitsAndDraw();
-        },
-        updateLimitsAndDraw() {
-            this.drawLimitLines();
+            this.updateLimitLines();
             this.scheduleDraw();
         },
         scheduleDraw() {
@@ -680,17 +678,17 @@ export default {
             const alarmSets = this.alarmSets.filter(this.matchByYAxisId.bind(this, id));
             alarmSets.forEach(this.drawAlarmPoints, this);
         },
-        drawLimitLines() {
+        updateLimitLines() {
             Array.from(this.$refs.limitArea.children).forEach((el) => el.remove());
             this.config.series.models.forEach(series => {
                 const yAxisId = series.get('yAxisId');
 
                 if (this.hiddenYAxisIds.indexOf(yAxisId) < 0) {
-                    this.drawLimitLinesForSeries(yAxisId, series);
+                    this.updateLimitLinesForSeries(yAxisId, series);
                 }
             });
         },
-        drawLimitLinesForSeries(yAxisId, series) {
+        updateLimitLinesForSeries(yAxisId, series) {
             if (!this.canDraw(yAxisId)) {
                 return;
             }