Plot legends expand by default when enabled

.cspell.json

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

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

@@ -63,6 +63,66 @@ 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();
+    await expect(page.getByLabel('Expand by Default')).toHaveText('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();
+    // Assert that the legend is now open
+    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();
+    await expect(page.getByLabel('Expand by Default')).toHaveText('Yes');
+    await expect(page.getByLabel('Plot Legend Item')).toHaveCount(3);
+
+    // Assert that the legend is expanded on page load
+    await page.reload();
+    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();
+    await expect(page.getByLabel('Expand by Default')).toHaveText('Yes');
+    await expect(page.getByLabel('Plot Legend Item')).toHaveCount(3);
+  });
+
   test('Limit lines persist when series is moved to another Y Axis and on refresh', async ({
     page
   }) => {

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

@@ -257,6 +257,56 @@ test.describe('Stacked Plot', () => {
 
     await assertAggregateLegendIsVisible(page);
   });
+
+  test('can toggle between aggregate and per child legends', async ({ page }) => {
+    // make some an overlay plot
+    const overlayPlot = await createDomainObjectWithDefaults(page, {
+      type: 'Overlay Plot',
+      parent: stackedPlot.uuid
+    });
+
+    // make some SWGs for the overlay plot
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: overlayPlot.uuid
+    });
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: overlayPlot.uuid
+    });
+
+    await page.goto(stackedPlot.url);
+    await page.getByLabel('Edit Object').click();
+    await page.getByRole('tab', { name: 'Config' }).click();
+    await page.getByLabel('Inspector Views').getByRole('checkbox').uncheck();
+    await page.getByLabel('Expand By Default').check();
+    await page.getByLabel('Save').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+    await expect(page.getByLabel('Plot Legend Expanded')).toHaveCount(1);
+    await expect(page.getByLabel('Plot Legend Item')).toHaveCount(5);
+
+    // reload and ensure the legend is still expanded
+    await page.reload();
+    await expect(page.getByLabel('Plot Legend Expanded')).toHaveCount(1);
+    await expect(page.getByLabel('Plot Legend Item')).toHaveCount(5);
+
+    // change to collapsed by default
+    await page.getByLabel('Edit Object').click();
+    await page.getByLabel('Expand By Default').uncheck();
+    await page.getByLabel('Save').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+    await expect(page.getByLabel('Plot Legend Collapsed')).toHaveCount(1);
+    await expect(page.getByLabel('Plot Legend Item')).toHaveCount(5);
+
+    // change it to individual legends
+    await page.getByLabel('Edit Object').click();
+    await page.getByRole('tab', { name: 'Config' }).click();
+    await page.getByLabel('Show Legends For Children').check();
+    await page.getByLabel('Save').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+    await expect(page.getByLabel('Plot Legend Collapsed')).toHaveCount(4);
+    await expect(page.getByLabel('Plot Legend Item')).toHaveCount(5);
+  });
 });
 
 /**

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

@@ -79,7 +79,7 @@
           </div>
           <div class="grid-cell value">{{ showLegendsForChildren ? 'Yes' : 'No' }}</div>
         </li>
-        <li class="grid-row">
+        <li v-if="showLegendDetails" class="grid-row">
           <div
             class="grid-cell label"
             title="The position of the legend relative to the plot display area."
@@ -88,25 +88,27 @@
           </div>
           <div class="grid-cell value capitalize">{{ position }}</div>
         </li>
-        <li class="grid-row">
+        <li v-if="showLegendDetails" class="grid-row">
           <div class="grid-cell label" title="Hide the legend when the plot is small">
             Hide when plot small
           </div>
           <div class="grid-cell value">{{ hideLegendWhenSmall ? 'Yes' : 'No' }}</div>
         </li>
-        <li class="grid-row">
+        <li v-if="showLegendDetails" class="grid-row">
           <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">
+        <li v-if="showLegendDetails" class="grid-row">
           <div class="grid-cell label" title="What to display in the legend when it's collapsed.">
             Show when collapsed:
           </div>
           <div class="grid-cell value">{{ valueToShowWhenCollapsed.replace('nearest', '') }}</div>
         </li>
-        <li class="grid-row">
+        <li v-if="showLegendDetails" class="grid-row">
           <div class="grid-cell label" title="What to display in the legend when it's expanded.">
             Show when expanded:
           </div>
@@ -164,6 +166,11 @@ export default {
           pathObjIndex === 0 && pathObject.type === 'telemetry.plot.stacked'
       );
     },
+    showLegendDetails() {
+      return (
+        !this.isStackedPlotObject || (this.isStackedPlotObject && !this.showLegendsForChildren)
+      );
+    },
     yAxesWithSeries() {
       return this.yAxes.filter((yAxis) => yAxis.seriesCount > 0);
     }
@@ -174,9 +181,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

@@ -26,12 +26,13 @@
       <div class="grid-cell value">
         <input
           v-model="showLegendsForChildren"
+          aria-label="Show Legends For Children"
           type="checkbox"
           @change="updateForm('showLegendsForChildren')"
         />
       </div>
     </li>
-    <li class="grid-row">
+    <li v-if="showLegendDetails" class="grid-row">
       <div
         class="grid-cell label"
         title="The position of the legend relative to the plot display area."
@@ -47,7 +48,7 @@
         </select>
       </div>
     </li>
-    <li class="grid-row">
+    <li v-if="showLegendDetails" class="grid-row">
       <div class="grid-cell label" title="Hide the legend when the plot is small">
         Hide when plot small
       </div>
@@ -59,15 +60,20 @@
         />
       </div>
     </li>
-    <li class="grid-row">
+    <li v-if="showLegendDetails" class="grid-row">
       <div class="grid-cell label" title="Show the legend expanded by default">
         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">
+    <li v-if="showLegendDetails" class="grid-row">
       <div class="grid-cell label" title="What to display in the legend when it's collapsed.">
         When collapsed show
       </div>
@@ -82,7 +88,7 @@
         </select>
       </div>
     </li>
-    <li class="grid-row">
+    <li v-if="showLegendDetails" class="grid-row">
       <div class="grid-cell label" title="What to display in the legend when it's expanded.">
         When expanded show
       </div>
@@ -169,6 +175,11 @@ export default {
         (pathObject, pathObjIndex) =>
           pathObjIndex === 0 && pathObject?.type === 'telemetry.plot.stacked'
       );
+    },
+    showLegendDetails() {
+      return (
+        !this.isStackedPlotObject || (this.isStackedPlotObject && !this.showLegendsForChildren)
+      );
     }
   },
   mounted() {

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: {