Plot legends expand by default when enabled

.cspell.json

@@ -493,7 +493,7 @@
     "WCAG",
     "stackedplot",
     "Andale",
-    "unnnormalized",
+    "unnormalized",
     "checksnapshots",
     "specced",
     "countup"

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

@@ -63,6 +63,60 @@ test.describe('Overlay Plot', () => {
     await expect(seriesColorSwatch).toHaveCSS('background-color', 'rgb(255, 166, 61)');
   });
 
+  test('Plot legend expands by default', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/7403'
+    });
+    const overlayPlot = await createDomainObjectWithDefaults(page, {
+      type: 'Overlay Plot'
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: overlayPlot.uuid
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: overlayPlot.uuid
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: overlayPlot.uuid
+    });
+
+    await page.goto(overlayPlot.url);
+
+    await page.getByRole('tab', { name: 'Config' }).click();
+
+    // Assert that the legend is collapsed by default
+    await expect(page.getByLabel('Plot Legend Collapsed')).toBeVisible();
+    await expect(page.getByLabel('Plot Legend Expanded')).toBeHidden();
+    let expandDefaultValue = await page.getByLabel('Expand by Default').textContent();
+    expect(expandDefaultValue).toBe('No');
+
+    expect(await page.getByLabel('Plot Legend Item').count()).toBe(3);
+
+    // Change the legend to expand by default
+    await page.getByLabel('Edit Object').click();
+    await page.getByLabel('Expand By Default').check();
+    await page.getByLabel('Save').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+    await page.reload();
+
+    // Assert that the legend is expanded on page load
+    await expect(page.getByLabel('Plot Legend Collapsed')).toBeHidden();
+    await expect(page.getByLabel('Plot Legend Expanded')).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'Name' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'Timestamp' })).toBeVisible();
+    await expect(page.getByRole('cell', { name: 'Value' })).toBeVisible();
+    expandDefaultValue = await page.getByLabel('Expand by Default').textContent();
+    expect(expandDefaultValue).toBe('Yes');
+    expect(await page.getByLabel('Plot Legend Item').count()).toBe(3);
+  });
+
   test('Limit lines persist when series is moved to another Y Axis and on refresh', async ({
     page
   }) => {

src/plugins/persistence/couch/plugin.js

@@ -28,9 +28,9 @@
 const LEGACY_SPACE = 'mct';
 
 export default function CouchPlugin(options) {
-  function normalizeOptions(unnnormalizedOptions) {
+  function normalizeOptions(unnormalizedOptions) {
     const normalizedOptions = {};
-    if (typeof unnnormalizedOptions === 'string') {
+    if (typeof unnormalizedOptions === 'string') {
       normalizedOptions.databases = [
         {
           url: options,
@@ -41,19 +41,19 @@
           indicator: true
         }
       ];
-    } else if (!unnnormalizedOptions.databases) {
+    } else if (!unnormalizedOptions.databases) {
       normalizedOptions.databases = [
         {
-          url: unnnormalizedOptions.url,
+          url: unnormalizedOptions.url,
           namespace: DEFAULT_NAMESPACE,
           additionalNamespaces: [LEGACY_SPACE],
           readOnly: false,
-          useDesignDocuments: unnnormalizedOptions.useDesignDocuments,
+          useDesignDocuments: unnormalizedOptions.useDesignDocuments,
           indicator: true
         }
       ];
     } else {
-      normalizedOptions.databases = unnnormalizedOptions.databases;
+      normalizedOptions.databases = unnormalizedOptions.databases;
     }
 
     // final sanity check, ensure we have all options

src/plugins/plot/configuration/XAxisModel.js

@@ -94,7 +94,7 @@ export default class XAxisModel extends Model {
    */
   defaultModel(options) {
     const bounds = options.openmct.time.bounds();
-    const timeSystem = options.openmct.time.timeSystem();
+    const timeSystem = options.openmct.time.getTimeSystem();
     const format = options.openmct.telemetry.getFormatter(timeSystem.timeFormat);
 
     /** @type {XAxisModelType} */

src/plugins/plot/inspector/PlotOptionsBrowse.vue

@@ -98,7 +98,9 @@
           <div class="grid-cell label" title="Show the legend expanded by default">
             Expand by Default
           </div>
-          <div class="grid-cell value">{{ expandByDefault ? 'Yes' : 'No' }}</div>
+          <div aria-label="Expand by Default" class="grid-cell value">
+            {{ expandByDefault ? 'Yes' : 'No' }}
+          </div>
         </li>
         <li class="grid-row">
           <div class="grid-cell label" title="What to display in the legend when it's collapsed.">
@@ -174,9 +176,8 @@ export default {
     if (!this.isStackedPlotObject) {
       this.initYAxesConfiguration();
       this.registerListeners();
-    } else {
-      this.initLegendConfiguration();
     }
+    this.initLegendConfiguration();
 
     this.loaded = true;
   },

src/plugins/plot/inspector/PlotOptionsItem.vue

@@ -132,7 +132,8 @@ export default {
   },
   data() {
     return {
-      expanded: false
+      expanded: false,
+      status: null
     };
   },
   computed: {

src/plugins/plot/inspector/forms/LegendForm.vue

@@ -64,7 +64,12 @@
         Expand by default
       </div>
       <div class="grid-cell value">
-        <input v-model="expandByDefault" type="checkbox" @change="updateForm('expandByDefault')" />
+        <input
+          v-model="expandByDefault"
+          aria-label="Expand By Default"
+          type="checkbox"
+          @change="updateForm('expandByDefault')"
+        />
       </div>
     </li>
     <li class="grid-row">

src/plugins/plot/inspector/forms/SeriesForm.vue

@@ -157,7 +157,8 @@ export default {
       limitLines: this.series.get('limitLines'),
       markerSize: this.series.get('markerSize'),
       validation: {},
-      swatchActive: false
+      swatchActive: false,
+      status: null
     };
   },
   computed: {

src/plugins/plot/legend/PlotLegend.vue

@@ -35,7 +35,12 @@
 
     <div class="c-plot-legend__wrapper" :class="{ 'is-cursor-locked': cursorLocked }">
       <!-- COLLAPSED PLOT LEGEND -->
-      <div class="plot-wrapper-collapsed-legend" :class="{ 'is-cursor-locked': cursorLocked }">
+      <div
+        v-if="!isLegendExpanded"
+        class="plot-wrapper-collapsed-legend"
+        aria-label="Plot Legend Collapsed"
+        :class="{ 'is-cursor-locked': cursorLocked }"
+      >
         <div
           class="c-state-indicator__alert-cursor-lock icon-cursor-lock"
           title="Cursor is point locked. Click anywhere in the plot to unlock."
@@ -50,7 +55,12 @@
         />
       </div>
       <!-- EXPANDED PLOT LEGEND -->
-      <div class="plot-wrapper-expanded-legend" :class="{ 'is-cursor-locked': cursorLocked }">
+      <div
+        v-else
+        class="plot-wrapper-expanded-legend"
+        aria-label="Plot Legend Expanded"
+        :class="{ 'is-cursor-locked': cursorLocked }"
+      >
         <div
           class="c-state-indicator__alert-cursor-lock--verbose icon-cursor-lock"
           title="Click anywhere in the plot to unlock."
@@ -150,6 +160,7 @@ export default {
   mounted() {
     this.loaded = true;
     this.isLegendExpanded = this.legend.get('expanded') === true;
+    this.$emit('expanded', this.isLegendExpanded);
     this.updatePosition();
   },
   beforeUnmount() {

src/plugins/plot/legend/PlotLegendItemCollapsed.vue

@@ -22,6 +22,7 @@
 <template>
   <div
     class="plot-legend-item"
+    aria-label="Plot Legend Item"
     :class="{
       'is-stale': isStale,
       'is-status--missing': isMissing

src/plugins/plot/legend/PlotLegendItemExpanded.vue

@@ -22,6 +22,7 @@
 <template>
   <tr
     class="plot-legend-item"
+    aria-label="Plot Legend Item"
     :class="{
       'is-stale': isStale,
       'is-status--missing': isMissing

src/plugins/plot/pluginSpec.js

@@ -401,6 +401,7 @@ describe('the plugin', function () {
       const clickEvent = createMouseEvent('click');
 
       legendControl.dispatchEvent(clickEvent);
+      await nextTick();
 
       let legend = element.querySelectorAll('.plot-wrapper-expanded-legend .plot-legend-item td');
       expect(legend.length).toBe(6);

src/plugins/plot/stackedPlot/pluginSpec.js

@@ -360,14 +360,16 @@ describe('the plugin', function () {
       expect(legend[0].innerHTML).toEqual('Test Object');
     });
 
-    it('Renders an expanded legend for every telemetry', () => {
+    it('Renders an expanded legend for every telemetry', async () => {
       let legendControl = element.querySelector(
         '.c-plot-legend__view-control.gl-plot-legend__view-control.c-disclosure-triangle'
       );
       const clickEvent = createMouseEvent('click');
 
       legendControl.dispatchEvent(clickEvent);
 
+      await nextTick();
+
       let legend = element.querySelectorAll('.plot-wrapper-expanded-legend .plot-legend-item td');
       expect(legend.length).toBe(6);
     });

src/styles/_legacy-plots.scss

@@ -658,13 +658,6 @@ mct-plot {
 
 .gl-plot,
 .c-plot {
-  &.plot-legend-collapsed .plot-wrapper-expanded-legend {
-    display: none;
-  }
-  &.plot-legend-expanded .plot-wrapper-collapsed-legend {
-    display: none;
-  }
-
   &.plot-legend-collapsed .icon-cursor-lock::before {
     padding-right: 5px;
   }