Merge branch 'activity-state-display' of https://github.com/nasa/openmct into timelist-expanded-view

- Mod to `s-selected` styling to allow selection visiblity on Time List rows.

.circleci/config.yml

@@ -5,20 +5,20 @@ executors:
       - image: mcr.microsoft.com/playwright:v1.39.0-focal
     environment:
       NODE_ENV: development # Needed to ensure 'dist' folder created and devDependencies installed
-      PERCY_POSTINSTALL_BROWSER: 'true' # Needed to store the percy browser in cache deps
-      PERCY_LOGLEVEL: 'debug' # Enable DEBUG level logging for Percy (Issue: https://github.com/nasa/openmct/issues/5742)
+      PERCY_POSTINSTALL_BROWSER: "true" # Needed to store the percy browser in cache deps
+      PERCY_LOGLEVEL: "debug" # Enable DEBUG level logging for Percy (Issue: https://github.com/nasa/openmct/issues/5742)
   ubuntu:
     machine:
       image: ubuntu-2204:current
       docker_layer_caching: true
 parameters:
   BUST_CACHE:
-    description: 'Set this with the CircleCI UI Trigger Workflow button (boolean = true) to bust the cache!'
+    description: "Set this with the CircleCI UI Trigger Workflow button (boolean = true) to bust the cache!"
     default: false
     type: boolean
 commands:
   build_and_install:
-    description: 'All steps used to build and install. Will use cache if found'
+    description: "All steps used to build and install. Will use cache if found"
     parameters:
       node-version:
         type: string
@@ -30,7 +30,7 @@ commands:
           node-version: << parameters.node-version >>
       - run: npm install --no-audit --progress=false
   restore_cache_cmd:
-    description: 'Custom command for restoring cache with the ability to bust cache. When BUST_CACHE is set to true, jobs will not restore cache'
+    description: "Custom command for restoring cache with the ability to bust cache. When BUST_CACHE is set to true, jobs will not restore cache"
     parameters:
       node-version:
         type: string
@@ -42,7 +42,7 @@ commands:
             - restore_cache:
                 key: deps--{{ arch }}--{{ .Branch }}--<< parameters.node-version >>--{{ checksum "package.json" }}-{{ checksum ".circleci/config.yml" }}
   save_cache_cmd:
-    description: 'Custom command for saving cache.'
+    description: "Custom command for saving cache."
     parameters:
       node-version:
         type: string
@@ -53,7 +53,7 @@ commands:
             - ~/.npm
             - node_modules
   generate_and_store_version_and_filesystem_artifacts:
-    description: 'Track important packages and files'
+    description: "Track important packages and files"
     steps:
       - run: |
           [[ $EUID -ne 0 ]] && (sudo mkdir -p /tmp/artifacts && sudo chmod 777 /tmp/artifacts) || (mkdir -p /tmp/artifacts && chmod 777 /tmp/artifacts)
@@ -64,7 +64,7 @@ commands:
       - store_artifacts:
           path: /tmp/artifacts/
   generate_e2e_code_cov_report:
-    description: 'Generate e2e code coverage artifacts and publish to codecov.io. Needed to that we can ignore the exit code status of the npm run test'
+    description: "Generate e2e code coverage artifacts and publish to codecov.io. Needed to that we can ignore the exit code status of the npm run test"
     parameters:
       suite:
         type: string
@@ -129,7 +129,7 @@ jobs:
           node-version: lts/hydrogen
       - when: #Only install chrome-beta when running the 'full' suite to save $$$
           condition:
-            equal: ['full', <<parameters.suite>>]
+            equal: ["full", <<parameters.suite>>]
           steps:
             - run: npx playwright install chrome-beta
       - run: SHARD="$((${CIRCLE_NODE_INDEX}+1))"; npm run test:e2e:<<parameters.suite>> -- --shard=${SHARD}/${CIRCLE_NODE_TOTAL}
@@ -251,8 +251,6 @@ workflows:
       - e2e-test:
           name: e2e-stable
           suite: stable
-      - mem-test
-      - perf-test
       - visual-a11y-tests:
           name: visual-test-ci
           suite: ci
@@ -278,7 +276,7 @@ workflows:
       - e2e-couchdb
     triggers:
       - schedule:
-          cron: '0 0 * * *'
+          cron: "0 0 * * *"
           filters:
             branches:
               only:

.github/workflows/e2e-perf.yml

@@ -0,0 +1,58 @@
+name: 'e2e-perf'
+on:
+  push:
+    branches: master
+  workflow_dispatch:
+  pull_request:
+    types:
+      - labeled
+      - opened
+  schedule:
+    - cron: '0 0 * * *'
+jobs:
+  e2e-full:
+    if: contains(github.event.pull_request.labels.*.name, 'pr:e2e:perf') || github.event_name == 'schedule' || github.event_name == 'workflow_dispatch'
+    runs-on: ubuntu-latest
+    timeout-minutes: 60
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/hydrogen'
+
+      - name: Cache NPM dependencies
+        uses: actions/cache@v3
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - run: npx playwright@1.39.0 install
+      - run: npm install --cache ~/.npm --no-audit --progress=false
+      - run: npm run test:perf:localhost
+      - run: npm run test:perf:contract
+      - run: npm run test:perf:memory
+      - name: Archive test results
+        if: success() || failure()
+        uses: actions/upload-artifact@v3
+        with:
+          path: test-results
+
+      - name: Remove pr:e2e:perf label (if present)
+        if: always()
+        uses: actions/github-script@v6
+        with:
+          script: |
+            const { owner, repo, number } = context.issue;
+            const labelToRemove = 'pr:e2e:perf';
+            try {
+              await github.rest.issues.removeLabel({
+                owner,
+                repo,
+                issue_number: number,
+                name: labelToRemove
+              });
+            } catch (error) {
+              core.warning(`Failed to remove ' + labelToRemove + ' label: ${error.message}`);
+            }

e2e/test-data/examplePlans/ExamplePlan_Small1.json

@@ -6,7 +6,8 @@
       "end": 1660343797000,
       "type": "Group 1",
       "color": "orange",
-      "textColor": "white"
+      "textColor": "white",
+      "id": 1
     },
     {
       "name": "Past event 2",
@@ -14,7 +15,8 @@
       "end": 1660429160000,
       "type": "Group 1",
       "color": "orange",
-      "textColor": "white"
+      "textColor": "white",
+      "id": 2
     },
     {
       "name": "Past event 3",
@@ -22,7 +24,8 @@
       "end": 1660503981000,
       "type": "Group 1",
       "color": "orange",
-      "textColor": "white"
+      "textColor": "white",
+      "id": 3
     },
     {
       "name": "Past event 4",
@@ -30,7 +33,8 @@
       "end": 1660624108000,
       "type": "Group 1",
       "color": "orange",
-      "textColor": "white"
+      "textColor": "white",
+      "id": 4
     },
     {
       "name": "Past event 5",
@@ -38,7 +42,8 @@
       "end": 1660681529000,
       "type": "Group 1",
       "color": "orange",
-      "textColor": "white"
+      "textColor": "white",
+      "id": 5
     }
   ]
 }

e2e/test-data/examplePlans/ExamplePlan_Small3.json

@@ -6,7 +6,8 @@
       "end": 1660343797000,
       "type": "Group 1",
       "color": "orange",
-      "textColor": "white"
+      "textColor": "white",
+      "id": 1
     },
     {
       "name": "Time until supper",
@@ -14,7 +15,8 @@
       "end": 1650420410000,
       "type": "Group 2",
       "color": "blue",
-      "textColor": "white"
+      "textColor": "white",
+      "id": 2
     }
   ],
   "Group 2": [
@@ -24,7 +26,8 @@
       "end": 1650320102001,
       "type": "Group 2",
       "color": "green",
-      "textColor": "white"
+      "textColor": "white",
+      "id": 3
     },
     {
       "name": "Time since last accident",
@@ -32,7 +35,8 @@
       "end": 1650320102002,
       "type": "Group 1",
       "color": "yellow",
-      "textColor": "white"
+      "textColor": "white",
+      "id": 4
     }
   ]
 }

e2e/tests/functional/planning/plan.e2e.spec.js

@@ -27,7 +27,7 @@ import {
   assertPlanActivities,
   assertPlanOrderedSwimLanes
 } from '../../../helper/planningUtils.js';
-import { test } from '../../../pluginFixtures.js';
+import { expect, test } from '../../../pluginFixtures.js';
 
 const testPlan1 = JSON.parse(
   fs.readFileSync(
@@ -63,4 +63,51 @@ test.describe('Plan', () => {
     });
     await assertPlanOrderedSwimLanes(page, testPlanWithOrderedLanes, planWithSwimLanes.url);
   });
+
+  test('Allows setting the state of an activity when selected.', async ({ page }) => {
+    const groups = Object.keys(testPlan1);
+    const firstGroupKey = groups[0];
+    const firstGroupItems = testPlan1[firstGroupKey];
+    const firstActivity = firstGroupItems[0];
+    const lastActivity = firstGroupItems[firstGroupItems.length - 1];
+    const startBound = firstActivity.start;
+    // Set the endBound to the end time of the current activity
+    let endBound = lastActivity.end;
+    // eslint-disable-next-line playwright/no-conditional-in-test
+    if (endBound === startBound) {
+      // Prevent oddities with setting start and end bound equal
+      // via URL params
+      endBound += 1;
+    }
+
+    // Switch to fixed time mode with all plan events within the bounds
+    await page.goto(
+      `${plan.url}?tc.mode=fixed&tc.startBound=${startBound}&tc.endBound=${endBound}&tc.timeSystem=utc&view=plan.view`
+    );
+
+    // select the first activity in the list
+    await page.getByText('Past event 1').click();
+
+    // Find the activity state section in the inspector
+    await page.getByRole('tab', { name: 'Activity' }).click();
+
+    // Check that activity state label is displayed in the inspector.
+    await expect(page.getByLabel('Activity Status Label')).toHaveText('Not started');
+
+    // Check that activity state dropdown selection shows the `set status` option by default
+    await expect(page.getByLabel('Activity Status').locator("[aria-selected='true']")).toHaveText(
+      '- Set Status -'
+    );
+
+    // Change the selection of the activity status
+    await page.getByRole('combobox').selectOption({ label: 'Aborted' });
+    // select a different activity and back to the previous one
+    await page.getByText('Past event 2').click();
+    await page.getByText('Past event 1').click();
+    // Check that activity state dropdown selection shows the previously selected option by default
+    await expect(page.getByLabel('Activity Status Label')).toHaveText('Aborted');
+    await expect(page.getByLabel('Activity Status').locator("[aria-selected='true']")).toHaveText(
+      'Aborted'
+    );
+  });
 });

e2e/tests/functional/planning/timelist.e2e.spec.js

@@ -30,6 +30,11 @@ const examplePlanSmall3 = JSON.parse(
     new URL('../../../test-data/examplePlans/ExamplePlan_Small3.json', import.meta.url)
   )
 );
+const examplePlanSmall1 = JSON.parse(
+  fs.readFileSync(
+    new URL('../../../test-data/examplePlans/ExamplePlan_Small1.json', import.meta.url)
+  )
+);
 // eslint-disable-next-line no-unused-vars
 const START_TIME_COLUMN = 0;
 // eslint-disable-next-line no-unused-vars
@@ -40,53 +45,8 @@ const ACTIVITY_COLUMN = 3;
 const HEADER_ROW = 0;
 const NUM_COLUMNS = 4;
 
-const testPlan = {
-  TEST_GROUP: [
-    {
-      name: 'Past event 1',
-      start: 1660320408000,
-      end: 1660343797000,
-      type: 'TEST-GROUP',
-      color: 'orange',
-      textColor: 'white'
-    },
-    {
-      name: 'Past event 2',
-      start: 1660406808000,
-      end: 1660429160000,
-      type: 'TEST-GROUP',
-      color: 'orange',
-      textColor: 'white'
-    },
-    {
-      name: 'Past event 3',
-      start: 1660493208000,
-      end: 1660503981000,
-      type: 'TEST-GROUP',
-      color: 'orange',
-      textColor: 'white'
-    },
-    {
-      name: 'Past event 4',
-      start: 1660579608000,
-      end: 1660624108000,
-      type: 'TEST-GROUP',
-      color: 'orange',
-      textColor: 'white'
-    },
-    {
-      name: 'Past event 5',
-      start: 1660666008000,
-      end: 1660681529000,
-      type: 'TEST-GROUP',
-      color: 'orange',
-      textColor: 'white'
-    }
-  ]
-};
-
 test.describe('Time List', () => {
-  test('Create a Time List, add a single Plan to it and verify all the activities are displayed with no milliseconds', async ({
+  test("Create a Time List, add a single Plan to it, verify all the activities are displayed with no milliseconds and selecting an activity shows it's properties", async ({
     page
   }) => {
     // Goto baseURL
@@ -103,12 +63,16 @@ test.describe('Time List', () => {
     await test.step('Create a Plan and add it to the timelist', async () => {
       await createPlanFromJSON(page, {
         name: 'Test Plan',
-        json: testPlan,
+        json: examplePlanSmall1,
         parent: timelist.uuid
       });
-
-      const startBound = testPlan.TEST_GROUP[0].start;
-      const endBound = testPlan.TEST_GROUP[testPlan.TEST_GROUP.length - 1].end;
+      const groups = Object.keys(examplePlanSmall1);
+      const firstGroupKey = groups[0];
+      const firstGroupItems = examplePlanSmall1[firstGroupKey];
+      const firstActivity = firstGroupItems[0];
+      const lastActivity = firstGroupItems[firstGroupItems.length - 1];
+      const startBound = firstActivity.start;
+      const endBound = lastActivity.end;
 
       // Switch to fixed time mode with all plan events within the bounds
       await page.goto(
@@ -118,7 +82,7 @@ test.describe('Time List', () => {
       // Verify all events are displayed
       const eventCount = await page.getByRole('row').count();
       // subtracting one for the header
-      await expect(eventCount - 1).toEqual(testPlan.TEST_GROUP.length);
+      await expect(eventCount - 1).toEqual(firstGroupItems.length);
     });
 
     await test.step('Does not show milliseconds in times', async () => {
@@ -131,6 +95,15 @@ test.describe('Time List', () => {
       await expect(row.locator('.--end')).not.toContainText('.');
       await expect(row.locator('.--duration')).not.toContainText('.');
     });
+
+    await test.step('Shows activity properties when a row is selected', async () => {
+      await page.getByRole('row').nth(2).click();
+
+      // Find the activity state section in the inspector
+      await page.getByRole('tab', { name: 'Activity' }).click();
+      // Check that activity state label is displayed in the inspector.
+      await expect(page.getByLabel('Activity Status Label')).toHaveText('Not started');
+    });
   });
 });
 

e2e/tests/functional/plugins/displayLayout/displayLayout.e2e.spec.js

@@ -161,6 +161,13 @@ test.describe('Display Layout', () => {
     const trimmedDisplayValue = displayLayoutValue.trim();
 
     expect(trimmedDisplayValue).toBe(formattedTelemetryValue);
+
+    // ensure we can right click on the alpha-numeric widget and view historical data
+    await page.getByLabel('Sine', { exact: true }).click({
+      button: 'right'
+    });
+    await page.getByLabel('View Historical Data').click();
+    await expect(page.getByLabel('Plot Container Style Target')).toBeVisible();
   });
   test('alpha-numeric widget telemetry value exactly matches latest telemetry value received in fixed time', async ({
     page

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

@@ -63,78 +63,80 @@ test.describe('Overlay Plot', () => {
     await expect(seriesColorSwatch).toHaveCSS('background-color', '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'
-    });
+  //skipping due to https://github.com/nasa/openmct/issues/7405
+  test.fixme(
+    '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
-    });
+      const swgA = await createDomainObjectWithDefaults(page, {
+        type: 'Sine Wave Generator',
+        parent: overlayPlot.uuid
+      });
 
-    await page.goto(overlayPlot.url);
+      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);
+      // 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.getByLabel('Edit Object').click();
+      // Enter edit mode
+      await page.getByLabel('Edit Object').click();
 
-    // Expand the "Sine Wave Generator" plot series options and enable limit lines
-    await page.getByRole('tab', { name: 'Config' }).click();
-    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();
+      // Expand the "Sine Wave Generator" plot series options and enable limit lines
+      await page.getByRole('tab', { name: 'Config' }).click();
+      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);
+      await assertLimitLinesExistAndAreVisible(page);
 
-    // Save (exit edit mode)
-    await page.locator('button[title="Save"]').click();
-    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+      // Save (exit edit mode)
+      await page.locator('button[title="Save"]').click();
+      await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
-    await assertLimitLinesExistAndAreVisible(page);
+      await assertLimitLinesExistAndAreVisible(page);
 
-    await page.reload();
+      await page.reload();
 
-    await assertLimitLinesExistAndAreVisible(page);
+      await assertLimitLinesExistAndAreVisible(page);
 
-    // Enter edit mode
-    await page.getByLabel('Edit Object').click();
+      // Enter edit mode
+      await page.getByLabel('Edit Object').click();
 
-    await page.getByRole('tab', { name: 'Elements' }).click();
+      await page.getByRole('tab', { name: 'Elements' }).click();
 
-    // 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"]'));
+      // 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);
+      await assertLimitLinesExistAndAreVisible(page);
 
-    // Save (exit edit mode)
-    await page.locator('button[title="Save"]').click();
-    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+      // Save (exit edit mode)
+      await page.locator('button[title="Save"]').click();
+      await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
-    await assertLimitLinesExistAndAreVisible(page);
+      await assertLimitLinesExistAndAreVisible(page);
 
-    await page.reload();
+      await page.reload();
 
-    await assertLimitLinesExistAndAreVisible(page);
-  });
+      await assertLimitLinesExistAndAreVisible(page);
+    }
+  );
 
   test('The elements pool supports dragging series into multiple y-axis buckets', async ({
     page

e2e/tests/functional/plugins/reloadAction/reloadAction.e2e.spec.js

@@ -0,0 +1,125 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2023, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import { createDomainObjectWithDefaults, expandEntireTree } from '../../../../appActions.js';
+import { expect, test } from '../../../../pluginFixtures.js';
+
+test.describe('Reload action', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+
+    const displayLayout = await createDomainObjectWithDefaults(page, {
+      type: 'Display Layout'
+    });
+
+    const alphaTable = await createDomainObjectWithDefaults(page, {
+      type: 'Telemetry Table',
+      name: 'Alpha Table'
+    });
+
+    const betaTable = await createDomainObjectWithDefaults(page, {
+      type: 'Telemetry Table',
+      name: 'Beta Table'
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: alphaTable.uuid,
+      customParameters: {
+        '[aria-label="Data Rate (hz)"]': '0.001'
+      }
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      parent: betaTable.uuid,
+      customParameters: {
+        '[aria-label="Data Rate (hz)"]': '0.001'
+      }
+    });
+
+    await page.goto(displayLayout.url);
+
+    // Expand all folders
+    await expandEntireTree(page);
+
+    await page.getByLabel('Edit Object', { exact: true }).click();
+
+    await page.dragAndDrop(`text='Alpha Table'`, '.l-layout__grid-holder', {
+      targetPosition: { x: 0, y: 0 }
+    });
+
+    await page.dragAndDrop(`text='Beta Table'`, '.l-layout__grid-holder', {
+      targetPosition: { x: 0, y: 250 }
+    });
+
+    await page.locator('button[title="Save"]').click();
+    await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
+  });
+
+  test('can reload display layout and its children', async ({ page }) => {
+    const beforeReloadAlphaTelemetryValue = await page
+      .getByLabel('Alpha Table table content')
+      .getByLabel('wavelengths table cell')
+      .first()
+      .getAttribute('title');
+    const beforeReloadBetaTelemetryValue = await page
+      .getByLabel('Beta Table table content')
+      .getByLabel('wavelengths table cell')
+      .first()
+      .getAttribute('title');
+    // reload alpha
+    await page.getByTitle('View menu items').first().click();
+    await page.getByRole('menuitem', { name: /Reload/ }).click();
+
+    const afterReloadAlphaTelemetryValue = await page
+      .getByLabel('Alpha Table table content')
+      .getByLabel('wavelengths table cell')
+      .first()
+      .getAttribute('title');
+    const afterReloadBetaTelemetryValue = await page
+      .getByLabel('Beta Table table content')
+      .getByLabel('wavelengths table cell')
+      .first()
+      .getAttribute('title');
+
+    expect(beforeReloadAlphaTelemetryValue).not.toEqual(afterReloadAlphaTelemetryValue);
+    expect(beforeReloadBetaTelemetryValue).toEqual(afterReloadBetaTelemetryValue);
+
+    // now reload parent
+    await page.getByTitle('More actions').click();
+    await page.getByRole('menuitem', { name: /Reload/ }).click();
+
+    const fullReloadAlphaTelemetryValue = await page
+      .getByLabel('Alpha Table table content')
+      .getByLabel('wavelengths table cell')
+      .first()
+      .getAttribute('title');
+    const fullReloadBetaTelemetryValue = await page
+      .getByLabel('Beta Table table content')
+      .getByLabel('wavelengths table cell')
+      .first()
+      .getAttribute('title');
+
+    expect(fullReloadAlphaTelemetryValue).not.toEqual(afterReloadAlphaTelemetryValue);
+    expect(fullReloadBetaTelemetryValue).not.toEqual(afterReloadBetaTelemetryValue);
+  });
+});

e2e/tests/functional/plugins/tabs/tabs.e2e.spec.js

@@ -50,7 +50,7 @@ test.describe('Tabs View', () => {
     page.goto(tabsView.url);
 
     // select first tab
-    await page.getByLabel(`${table.name} tab`).click();
+    await page.getByLabel(`${table.name} tab`, { exact: true }).click();
     // ensure table header visible
     await expect(page.getByRole('searchbox', { name: 'message filter input' })).toBeVisible();
 
@@ -58,7 +58,7 @@ test.describe('Tabs View', () => {
     await expect(page.locator('canvas[id=webglContext]')).toBeHidden();
 
     // select second tab
-    await page.getByLabel(`${notebook.name} tab`).click();
+    await page.getByLabel(`${notebook.name} tab`, { exact: true }).click();
 
     // ensure notebook visible
     await expect(page.locator('.c-notebook__drag-area')).toBeVisible();
@@ -67,7 +67,7 @@ test.describe('Tabs View', () => {
     await expect(page.locator('canvas[id=webglContext]')).toBeHidden();
 
     // select third tab
-    await page.getByLabel(`${sineWaveGenerator.name} tab`).click();
+    await page.getByLabel(`${sineWaveGenerator.name} tab`, { exact: true }).click();
 
     // expect sine wave generator visible
     await expect(page.locator('.c-plot')).toBeVisible();
@@ -78,7 +78,7 @@ test.describe('Tabs View', () => {
     await expect(page.locator('canvas').nth(1)).toBeVisible();
 
     // now try to select the first tab again
-    await page.getByLabel(`${table.name} tab`).click();
+    await page.getByLabel(`${table.name} tab`, { exact: true }).click();
     // ensure table header visible
     await expect(page.getByRole('searchbox', { name: 'message filter input' })).toBeVisible();
 

e2e/tests/functional/plugins/telemetryTable/telemetryTable.e2e.spec.js

@@ -64,10 +64,9 @@ test.describe('Telemetry Table', () => {
 
     // Get the most recent telemetry date
     const latestTelemetryDate = await page
-      .locator('table.c-telemetry-table__body > tbody > tr')
+      .getByLabel('table content')
+      .getByLabel('utc table cell')
       .last()
-      .locator('td')
-      .nth(1)
       .getAttribute('title');
 
     // Verify that it is <= our new end bound
@@ -91,7 +90,7 @@ test.describe('Telemetry Table', () => {
     await page.getByRole('searchbox', { name: 'message filter input' }).click();
     await page.getByRole('searchbox', { name: 'message filter input' }).fill('Roger');
 
-    let cells = await page.getByRole('cell', { name: /Roger/ }).all();
+    let cells = await page.getByRole('cell').getByText(/Roger/).all();
     // ensure we've got more than one cell
     expect(cells.length).toBeGreaterThan(1);
     // ensure the text content of each cell contains the search term
@@ -103,7 +102,10 @@ test.describe('Telemetry Table', () => {
     await page.getByRole('searchbox', { name: 'message filter input' }).click();
     await page.getByRole('searchbox', { name: 'message filter input' }).fill('Dodger');
 
-    cells = await page.getByRole('cell', { name: /Dodger/ }).all();
+    cells = await page
+      .getByRole('cell')
+      .getByText(/Dodger/)
+      .all();
     // ensure we've got more than one cell
     expect(cells.length).toBe(0);
     // ensure the text content of each cell contains the search term
@@ -135,7 +137,7 @@ test.describe('Telemetry Table', () => {
     await page.getByRole('searchbox', { name: 'message filter input' }).click();
     await page.getByRole('searchbox', { name: 'message filter input' }).fill('/[Rr]oger/');
 
-    let cells = await page.getByRole('cell', { name: /Roger/ }).all();
+    let cells = await page.getByRole('cell').getByText(/Roger/).all();
     // ensure we've got more than one cell
     expect(cells.length).toBeGreaterThan(1);
     // ensure the text content of each cell contains the search term
@@ -147,7 +149,10 @@ test.describe('Telemetry Table', () => {
     await page.getByRole('searchbox', { name: 'message filter input' }).click();
     await page.getByRole('searchbox', { name: 'message filter input' }).fill('/[Dd]oger/');
 
-    cells = await page.getByRole('cell', { name: /Dodger/ }).all();
+    cells = await page
+      .getByRole('cell')
+      .getByText(/Dodger/)
+      .all();
     // ensure we've got more than one cell
     expect(cells.length).toBe(0);
     // ensure the text content of each cell contains the search term

e2e/tests/performance/tabs.e2e.spec.js

@@ -24,7 +24,7 @@ import { createDomainObjectWithDefaults, waitForPlotsToRender } from '../../appA
 import { expect, test } from '../../pluginFixtures.js';
 
 test.describe('Tabs View', () => {
-  test('Renders tabbed elements nicely', async ({ page }) => {
+  test('Renders tabbed elements only when visible', async ({ page }) => {
     // Code to hook into the requestAnimationFrame function and log each call
     let animationCalls = [];
     await page.exposeFunction('logCall', (callCount) => {
@@ -64,24 +64,24 @@ test.describe('Tabs View', () => {
     page.goto(tabsView.url);
 
     // select first tab
-    await page.getByLabel(`${table.name} tab`).click();
+    await page.getByLabel(`${table.name} tab`, { exact: true }).click();
     // ensure table header visible
     await expect(page.getByRole('searchbox', { name: 'message filter input' })).toBeVisible();
 
     // select second tab
-    await page.getByLabel(`${notebook.name} tab`).click();
+    await page.getByLabel(`${notebook.name} tab`, { exact: true }).click();
 
     // expect notebook visible
     await expect(page.locator('.c-notebook__drag-area')).toBeVisible();
 
     // select third tab
-    await page.getByLabel(`${sineWaveGenerator.name} tab`).click();
+    await page.getByLabel(`${sineWaveGenerator.name} tab`, { exact: true }).click();
 
     // ensure sine wave generator visible
     expect(await page.locator('.c-plot').isVisible()).toBe(true);
 
     // now select notebook and clear animation calls
-    await page.getByLabel(`${notebook.name} tab`).click();
+    await page.getByLabel(`${notebook.name} tab`, { exact: true }).click();
     animationCalls = [];
     // expect notebook visible
     await expect(page.locator('.c-notebook__drag-area')).toBeVisible();
@@ -89,7 +89,7 @@ test.describe('Tabs View', () => {
 
     // select sine wave generator and clear animation calls
     animationCalls = [];
-    await page.getByLabel(`${sineWaveGenerator.name} tab`).click();
+    await page.getByLabel(`${sineWaveGenerator.name} tab`, { exact: true }).click();
 
     // ensure sine wave generator visible
     await waitForPlotsToRender(page);

e2e/tests/visual-a11y/imagery.visual.spec.js

@@ -0,0 +1,93 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import percySnapshot from '@percy/playwright';
+
+import { createDomainObjectWithDefaults, setRealTimeMode } from '../../appActions.js';
+import { VISUAL_URL } from '../../constants.js';
+import { expect, test } from '../../pluginFixtures.js';
+
+test.describe('Visual - Example Imagery', () => {
+  let exampleImagery;
+  let parentLayout;
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
+
+    parentLayout = await createDomainObjectWithDefaults(page, {
+      type: 'Display Layout',
+      name: 'Parent Layout'
+    });
+
+    exampleImagery = await createDomainObjectWithDefaults(page, {
+      type: 'Example Imagery',
+      name: 'Example Imagery Test',
+      parent: parentLayout.uuid
+    });
+
+    // Modify Example Imagery to create a really stable Example Imagery
+    await page.goto(exampleImagery.url, { waitUntil: 'domcontentloaded' });
+    await page.getByRole('button', { name: 'More actions' }).click();
+    await page.getByRole('menuitem', { name: 'Edit Properties...' }).click();
+    await page
+      .locator('#imageLocation-textarea')
+      .fill(
+        'https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18731.jpg,https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18731.jpg,https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18731.jpg,https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18731.jpg,https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18731.jpg,https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18731.jpg,https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18731.jpg,https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18731.jpg,https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18731.jpg,https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18731.jpg,https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18731.jpg,https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18731.jpg,https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18731.jpg,https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18731.jpg,https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18731.jpg,https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18731.jpg,https://www.nasa.gov/wp-content/uploads/static/history/alsj/a16/AS16-117-18731.jpg'
+      );
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.reload({ waitUntil: 'domcontentloaded' });
+    await page.getByTitle('Collapse Browse Pane').click();
+    await page.getByTitle('Collapse Inspect Pane').click();
+  });
+
+  test('Example Imagery in Fixed Time', async ({ page, theme }) => {
+    await page.goto(exampleImagery.url, { waitUntil: 'domcontentloaded' });
+
+    await expect(page.getByLabel('Image Wrapper')).toBeVisible();
+
+    await percySnapshot(page, `Example Imagery in Fixed Time (theme: ${theme})`);
+
+    await page.getByLabel('Image Wrapper').hover();
+
+    await percySnapshot(page, `Example Imagery Hover in Fixed Time (theme: ${theme})`);
+  });
+
+  test('Example Imagery in Real Time', async ({ page, theme }) => {
+    await page.goto(exampleImagery.url, { waitUntil: 'domcontentloaded' });
+
+    await setRealTimeMode(page, true);
+    //Temporary to close the dialog
+    await page.getByLabel('Submit time offsets').click();
+
+    await expect(page.getByLabel('Image Wrapper')).toBeVisible();
+
+    await percySnapshot(page, `Example Imagery in Real Time (theme: ${theme})`);
+  });
+
+  test('Example Imagery in Display Layout', async ({ page, theme }) => {
+    await page.goto(parentLayout.url, { waitUntil: 'domcontentloaded' });
+
+    await expect(page.getByLabel('Image Wrapper')).toBeVisible();
+
+    await percySnapshot(page, `Example Imagery in Display Layout (theme: ${theme})`);
+  });
+});

src/MCT.js

@@ -251,6 +251,7 @@ export class MCT extends EventEmitter {
     this.install(this.plugins.FlexibleLayout());
     this.install(this.plugins.GoToOriginalAction());
     this.install(this.plugins.OpenInNewTabAction());
+    this.install(this.plugins.ReloadAction());
     this.install(this.plugins.WebPage());
     this.install(this.plugins.Condition());
     this.install(this.plugins.ConditionWidget());

src/api/objects/ObjectAPI.js

@@ -99,7 +99,13 @@ export default class ObjectAPI {
     this.cache = {};
     this.interceptorRegistry = new InterceptorRegistry();
 
-    this.SYNCHRONIZED_OBJECT_TYPES = ['notebook', 'restricted-notebook', 'plan', 'annotation'];
+    this.SYNCHRONIZED_OBJECT_TYPES = [
+      'notebook',
+      'restricted-notebook',
+      'plan',
+      'annotation',
+      'activity-states'
+    ];
 
     this.errors = {
       Conflict: ConflictError

src/api/telemetry/BatchingWebSocket.js

@@ -1,194 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2024, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-import installWorker from './WebSocketWorker.js';
-const DEFAULT_RATE_MS = 1000;
-/**
- * Describes the strategy to be used when batching WebSocket messages
- *
- * @typedef BatchingStrategy
- * @property {Function} shouldBatchMessage a function that accepts a single
- * argument - the raw message received from the websocket. Every message
- * received will be evaluated against this function so it should be performant.
- * Note also that this function is executed in a worker, so it must be
- * completely self-contained with no external dependencies. The function
- * should return `true` if the message should be batched, and `false` if not.
- * @property {Function} getBatchIdFromMessage a function that accepts a
- * single argument - the raw message received from the websocket. Only messages
- * where `shouldBatchMessage` has evaluated to true will be passed into this
- * function. The function should return a unique value on which to batch the
- * messages. For example a telemetry, channel, or parameter identifier.
- */
-/**
- * Provides a reliable and convenient WebSocket abstraction layer that handles
- * a lot of boilerplate common to managing WebSocket connections such as:
- * - Establishing a WebSocket connection to a server
- * - Reconnecting on error, with a fallback strategy
- * - Queuing messages so that clients can send messages without concern for the current
- * connection state of the WebSocket.
- *
- * The WebSocket that it manages is based in a dedicated worker so that network
- * concerns are not handled on the main event loop. This allows for performant receipt
- * and batching of messages without blocking either the UI or server.
- *
- * @memberof module:openmct.telemetry
- */
-class BatchingWebSocket extends EventTarget {
-  #worker;
-  #openmct;
-  #showingRateLimitNotification;
-  #rate;
-
-  constructor(openmct) {
-    super();
-    // Install worker, register listeners etc.
-    const workerFunction = `(${installWorker.toString()})()`;
-    const workerBlob = new Blob([workerFunction]);
-    const workerUrl = URL.createObjectURL(workerBlob, { type: 'application/javascript' });
-    this.#worker = new Worker(workerUrl);
-    this.#openmct = openmct;
-    this.#showingRateLimitNotification = false;
-    this.#rate = DEFAULT_RATE_MS;
-
-    const routeMessageToHandler = this.#routeMessageToHandler.bind(this);
-    this.#worker.addEventListener('message', routeMessageToHandler);
-    openmct.on(
-      'destroy',
-      () => {
-        this.disconnect();
-        URL.revokeObjectURL(workerUrl);
-      },
-      { once: true }
-    );
-  }
-
-  /**
-   * Will establish a WebSocket connection to the provided url
-   * @param {string} url The URL to connect to
-   */
-  connect(url) {
-    this.#worker.postMessage({
-      type: 'connect',
-      url
-    });
-
-    this.#readyForNextBatch();
-  }
-
-  #readyForNextBatch() {
-    this.#worker.postMessage({
-      type: 'readyForNextBatch'
-    });
-  }
-
-  /**
-   * Send a message to the WebSocket.
-   * @param {any} message The message to send. Can be any type supported by WebSockets.
-   * See https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/send#data
-   */
-  sendMessage(message) {
-    this.#worker.postMessage({
-      type: 'message',
-      message
-    });
-  }
-
-  /**
-   * Set the strategy used to both decide which raw messages to batch, and how to group
-   * them.
-   * @param {BatchingStrategy} strategy The batching strategy to use when evaluating
-   * raw messages from the WebSocket.
-   */
-  setBatchingStrategy(strategy) {
-    const serializedStrategy = {
-      shouldBatchMessage: strategy.shouldBatchMessage.toString(),
-      getBatchIdFromMessage: strategy.getBatchIdFromMessage.toString()
-    };
-
-    this.#worker.postMessage({
-      type: 'setBatchingStrategy',
-      serializedStrategy
-    });
-  }
-
-  /**
-   * When using batching, sets the rate at which batches of messages are released.
-   * @param {Number} rate the amount of time to wait, in ms, between batches.
-   */
-  setRate(rate) {
-    this.#rate = rate;
-  }
-
-  /**
-   * @param {Number} maxBatchSize the maximum length of a batch of messages. For example,
-   * the maximum number of telemetry values to batch before dropping them
-   * Note that this is a fail-safe that is only invoked if performance drops to the
-   * point where Open MCT cannot keep up with the amount of telemetry it is receiving.
-   * In this event it will sacrifice the oldest telemetry in the batch in favor of the
-   * most recent telemetry. The user will be informed that telemetry has been dropped.
-   *
-   * This should be specced appropriately for the expected data rate. eg. If telemetry
-   * is received at 10Hz for each telemetry point, then a minimal combination of batch
-   * size and rate is 10 and 1000 respectively. Ideally you would add some margin, so
-   * 15 would probably be a better batch size.
-   */
-  setMaxBatchSize(maxBatchSize) {
-    this.#worker.postMessage({
-      type: 'setMaxBatchSize',
-      maxBatchSize
-    });
-  }
-
-  /**
-   * Disconnect the associated WebSocket. Generally speaking there is no need to call
-   * this manually.
-   */
-  disconnect() {
-    this.#worker.postMessage({
-      type: 'disconnect'
-    });
-  }
-
-  #routeMessageToHandler(message) {
-    if (message.data.type === 'batch') {
-      if (message.data.batch.dropped === true && !this.#showingRateLimitNotification) {
-        const notification = this.#openmct.notifications.alert(
-          'Telemetry dropped due to client rate limiting.',
-          { hint: 'Refresh individual telemetry views to retrieve dropped telemetry if needed.' }
-        );
-        this.#showingRateLimitNotification = true;
-        notification.once('minimized', () => {
-          this.#showingRateLimitNotification = false;
-        });
-      }
-      this.dispatchEvent(new CustomEvent('batch', { detail: message.data.batch }));
-      setTimeout(() => {
-        this.#readyForNextBatch();
-      }, this.#rate);
-    } else if (message.data.type === 'message') {
-      this.dispatchEvent(new CustomEvent('message', { detail: message.data.message }));
-    } else {
-      throw new Error(`Unknown message type: ${message.data.type}`);
-    }
-  }
-}
-
-export default BatchingWebSocket;

src/api/telemetry/TelemetryAPI.js

@@ -23,7 +23,6 @@
 import objectUtils from 'objectUtils';
 
 import CustomStringFormatter from '../../plugins/displayLayout/CustomStringFormatter.js';
-import BatchingWebSocket from './BatchingWebSocket.js';
 import DefaultMetadataProvider from './DefaultMetadataProvider.js';
 import TelemetryCollection from './TelemetryCollection.js';
 import TelemetryMetadataManager from './TelemetryMetadataManager.js';
@@ -55,28 +54,6 @@ import TelemetryValueFormatter from './TelemetryValueFormatter.js';
  * @memberof module:openmct.TelemetryAPI~
  */
 
-/**
- * Describes and bounds requests for telemetry data.
- *
- * @typedef TelemetrySubscriptionOptions
- * @property {String} [strategy] symbolic identifier directing providers on how
- * to handle telemetry subscriptions. The default behavior is 'latest' which will
- * always return a single telemetry value with each callback, and in the event
- * of throttling will always prioritize the latest data, meaning intermediate
- * data will be skipped. Alternatively, the `batch` strategy can be used, which
- * will return all telemetry values since the last callback. This strategy is
- * useful for cases where intermediate data is important, such as when
- * rendering a telemetry plot or table. If `batch` is specified, the subscription
- * callback will be invoked with an Array.
- *
- * @memberof module:openmct.TelemetryAPI~
- */
-
-const SUBSCRIBE_STRATEGY = {
-  LATEST: 'latest',
-  BATCH: 'batch'
-};
-
 /**
  * Utilities for telemetry
  * @interface TelemetryAPI
@@ -85,10 +62,6 @@ const SUBSCRIBE_STRATEGY = {
 export default class TelemetryAPI {
   #isGreedyLAD;
 
-  get SUBSCRIBE_STRATEGY() {
-    return SUBSCRIBE_STRATEGY;
-  }
-
   constructor(openmct) {
     this.openmct = openmct;
 
@@ -105,7 +78,6 @@ export default class TelemetryAPI {
     this.valueFormatterCache = new WeakMap();
     this.requestInterceptorRegistry = new TelemetryRequestInterceptorRegistry();
     this.#isGreedyLAD = true;
-    this.BatchingWebSocket = BatchingWebSocket;
   }
 
   abortAllRequests() {
@@ -406,23 +378,18 @@ export default class TelemetryAPI {
    * @memberof module:openmct.TelemetryAPI~TelemetryProvider#
    * @param {module:openmct.DomainObject} domainObject the object
    *        which has associated telemetry
-   * @param {TelemetrySubscriptionOptions} options configuration items for subscription
+   * @param {TelemetryRequestOptions} options configuration items for subscription
    * @param {Function} callback the callback to invoke with new data, as
    *        it becomes available
    * @returns {Function} a function which may be called to terminate
    *          the subscription
    */
-  subscribe(domainObject, callback, options = { strategy: SUBSCRIBE_STRATEGY.LATEST }) {
+  subscribe(domainObject, callback, options) {
     if (domainObject.type === 'unknown') {
       return () => {};
     }
 
-    // Default behavior is to use the latest strategy, as opposed to the new "batch" strategy
-    if (options.strategy === undefined || options.strategy === null) {
-      options.strategy = SUBSCRIBE_STRATEGY.LATEST;
-    }
-
-    const provider = this.findSubscriptionProvider(domainObject, options);
+    const provider = this.findSubscriptionProvider(domainObject);
 
     if (!this.subscribeCache) {
       this.subscribeCache = {};
@@ -438,9 +405,11 @@ export default class TelemetryAPI {
       if (provider) {
         subscriber.unsubscribe = provider.subscribe(
           domainObject,
-          options.strategy === SUBSCRIBE_STRATEGY.BATCH
-            ? subscriptionCallbackForArray
-            : subscriptionCallbackForSingleValue,
+          function (value) {
+            subscriber.callbacks.forEach(function (cb) {
+              cb(value);
+            });
+          },
           options
         );
       } else {
@@ -450,38 +419,6 @@ export default class TelemetryAPI {
       subscriber.callbacks.push(callback);
     }
 
-    function subscriptionCallbackForArray(value) {
-      if (value === undefined || value === null || value.length === 0) {
-        throw new Error(
-          'Attempt to invoke telemetry subscription callback with no telemetry datum'
-        );
-      }
-
-      if (!Array.isArray(value)) {
-        value = [value];
-      }
-
-      subscriber.callbacks.forEach(function (cb) {
-        cb(value);
-      });
-    }
-
-    function subscriptionCallbackForSingleValue(value) {
-      if (Array.isArray(value)) {
-        value = value[value.length - 1];
-      }
-
-      if (value === undefined || value === null) {
-        throw new Error(
-          'Attempt to invoke telemetry subscription callback with no telemetry datum'
-        );
-      }
-
-      subscriber.callbacks.forEach(function (cb) {
-        cb(value);
-      });
-    }
-
     return function unsubscribe() {
       subscriber.callbacks = subscriber.callbacks.filter(function (cb) {
         return cb !== callback;

src/api/telemetry/TelemetryAPISpec.js

@@ -90,9 +90,7 @@ describe('Telemetry API', () => {
 
       const callback = jasmine.createSpy('callback');
       const unsubscribe = telemetryAPI.subscribe(domainObject, callback);
-      expect(telemetryProvider.supportsSubscribe).toHaveBeenCalledWith(domainObject, {
-        strategy: 'latest'
-      });
+      expect(telemetryProvider.supportsSubscribe).toHaveBeenCalledWith(domainObject);
       expect(telemetryProvider.subscribe).not.toHaveBeenCalled();
       expect(unsubscribe).toEqual(jasmine.any(Function));
 
@@ -113,16 +111,12 @@ describe('Telemetry API', () => {
       const callback = jasmine.createSpy('callback');
       const unsubscribe = telemetryAPI.subscribe(domainObject, callback);
       expect(telemetryProvider.supportsSubscribe.calls.count()).toBe(1);
-      expect(telemetryProvider.supportsSubscribe).toHaveBeenCalledWith(domainObject, {
-        strategy: 'latest'
-      });
+      expect(telemetryProvider.supportsSubscribe).toHaveBeenCalledWith(domainObject);
       expect(telemetryProvider.subscribe.calls.count()).toBe(1);
       expect(telemetryProvider.subscribe).toHaveBeenCalledWith(
         domainObject,
         jasmine.any(Function),
-        {
-          strategy: 'latest'
-        }
+        undefined
       );
 
       const notify = telemetryProvider.subscribe.calls.mostRecent().args[1];

src/api/telemetry/TelemetryCollection.js

@@ -180,14 +180,11 @@ export default class TelemetryCollection extends EventEmitter {
     if (this.unsubscribe) {
       this.unsubscribe();
     }
-    const options = { ...this.options };
-    //We always want to receive all available values in telemetry tables.
-    options.strategy = this.openmct.telemetry.SUBSCRIBE_STRATEGY.BATCH;
 
     this.unsubscribe = this.openmct.telemetry.subscribe(
       this.domainObject,
       (datum) => this._processNewTelemetry(datum),
-      options
+      this.options
     );
   }
 

src/api/telemetry/WebSocketWorker.js

@@ -1,383 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2024, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/* eslint-disable max-classes-per-file */
-export default function installWorker() {
-  const FALLBACK_AND_WAIT_MS = [1000, 5000, 5000, 10000, 10000, 30000];
-
-  /**
-   * @typedef {import('./BatchingWebSocket').BatchingStrategy} BatchingStrategy
-   */
-
-  /**
-   * Provides a WebSocket connection that is resilient to errors and dropouts.
-   * On an error or dropout, will automatically reconnect.
-   *
-   * Additionally, messages will be queued and sent only when WebSocket is
-   * connected meaning that client code does not need to check the state of
-   * the socket before sending.
-   */
-  class ResilientWebSocket extends EventTarget {
-    #webSocket;
-    #isConnected = false;
-    #isConnecting = false;
-    #messageQueue = [];
-    #reconnectTimeoutHandle;
-    #currentWaitIndex = 0;
-    #messageCallbacks = [];
-    #wsUrl;
-
-    /**
-     * Establish a new WebSocket connection to the given URL
-     * @param {String} url
-     */
-    connect(url) {
-      this.#wsUrl = url;
-      if (this.#isConnected) {
-        throw new Error('WebSocket already connected');
-      }
-
-      if (this.#isConnecting) {
-        throw new Error('WebSocket connection in progress');
-      }
-
-      this.#isConnecting = true;
-
-      //TODO: Make this configurable
-      this.#webSocket = new WebSocket(url, 'protobuf');
-      //TODO: Make this configurable
-      this.#webSocket.binaryType = 'arraybuffer';
-
-      const boundConnected = this.#connected.bind(this);
-      this.#webSocket.addEventListener('open', boundConnected);
-
-      const boundCleanUpAndReconnect = this.#cleanUpAndReconnect.bind(this);
-      this.#webSocket.addEventListener('error', boundCleanUpAndReconnect);
-      this.#webSocket.addEventListener('close', boundCleanUpAndReconnect);
-
-      const boundMessage = this.#message.bind(this);
-      this.#webSocket.addEventListener('message', boundMessage);
-
-      this.addEventListener(
-        'disconnected',
-        () => {
-          this.#webSocket.removeEventListener('open', boundConnected);
-          this.#webSocket.removeEventListener('error', boundCleanUpAndReconnect);
-          this.#webSocket.removeEventListener('close', boundCleanUpAndReconnect);
-        },
-        { once: true }
-      );
-    }
-
-    /**
-     * Register a callback to be invoked when a message is received on the WebSocket.
-     * This paradigm is used instead of the standard EventTarget or EventEmitter approach
-     * for performance reasons.
-     * @param {Function} callback The function to be invoked when a message is received
-     * @returns an unregister function
-     */
-    registerMessageCallback(callback) {
-      this.#messageCallbacks.push(callback);
-
-      return () => {
-        this.#messageCallbacks = this.#messageCallbacks.filter((cb) => cb !== callback);
-      };
-    }
-
-    #connected() {
-      console.debug('Websocket connected.');
-      this.#isConnected = true;
-      this.#isConnecting = false;
-      this.#currentWaitIndex = 0;
-
-      this.dispatchEvent(new Event('connected'));
-
-      this.#flushQueue();
-    }
-
-    #cleanUpAndReconnect() {
-      console.warn('Websocket closed. Attempting to reconnect...');
-      this.disconnect();
-      this.#reconnect();
-    }
-
-    #message(event) {
-      this.#messageCallbacks.forEach((callback) => callback(event.data));
-    }
-
-    disconnect() {
-      this.#isConnected = false;
-      this.#isConnecting = false;
-
-      // On WebSocket error, both error callback and close callback are invoked, resulting in
-      // this function being called twice, and websocket being destroyed and deallocated.
-      if (this.#webSocket !== undefined && this.#webSocket !== null) {
-        this.#webSocket.close();
-      }
-
-      this.dispatchEvent(new Event('disconnected'));
-      this.#webSocket = undefined;
-    }
-
-    #reconnect() {
-      if (this.#reconnectTimeoutHandle) {
-        return;
-      }
-
-      this.#reconnectTimeoutHandle = setTimeout(() => {
-        this.connect(this.#wsUrl);
-
-        this.#reconnectTimeoutHandle = undefined;
-      }, FALLBACK_AND_WAIT_MS[this.#currentWaitIndex]);
-
-      if (this.#currentWaitIndex < FALLBACK_AND_WAIT_MS.length - 1) {
-        this.#currentWaitIndex++;
-      }
-    }
-
-    enqueueMessage(message) {
-      this.#messageQueue.push(message);
-      this.#flushQueueIfReady();
-    }
-
-    #flushQueueIfReady() {
-      if (this.#isConnected) {
-        this.#flushQueue();
-      }
-    }
-
-    #flushQueue() {
-      while (this.#messageQueue.length > 0) {
-        if (!this.#isConnected) {
-          break;
-        }
-
-        const message = this.#messageQueue.shift();
-        this.#webSocket.send(message);
-      }
-    }
-  }
-
-  /**
-   * Handles messages over the worker interface, and
-   * sends corresponding WebSocket messages.
-   */
-  class WorkerToWebSocketMessageBroker {
-    #websocket;
-    #messageBatcher;
-
-    constructor(websocket, messageBatcher) {
-      this.#websocket = websocket;
-      this.#messageBatcher = messageBatcher;
-    }
-
-    routeMessageToHandler(message) {
-      const { type } = message.data;
-      switch (type) {
-        case 'connect':
-          this.connect(message);
-          break;
-        case 'disconnect':
-          this.disconnect(message);
-          break;
-        case 'message':
-          this.#websocket.enqueueMessage(message.data.message);
-          break;
-        case 'setBatchingStrategy':
-          this.setBatchingStrategy(message);
-          break;
-        case 'readyForNextBatch':
-          this.#messageBatcher.readyForNextBatch();
-          break;
-        case 'setMaxBatchSize':
-          this.#messageBatcher.setMaxBatchSize(message.data.maxBatchSize);
-          break;
-        default:
-          throw new Error(`Unknown message type: ${type}`);
-      }
-    }
-    connect(message) {
-      const { url } = message.data;
-      this.#websocket.connect(url);
-    }
-    disconnect() {
-      this.#websocket.disconnect();
-    }
-    setBatchingStrategy(message) {
-      const { serializedStrategy } = message.data;
-      const batchingStrategy = {
-        // eslint-disable-next-line no-new-func
-        shouldBatchMessage: new Function(`return ${serializedStrategy.shouldBatchMessage}`)(),
-        // eslint-disable-next-line no-new-func
-        getBatchIdFromMessage: new Function(`return ${serializedStrategy.getBatchIdFromMessage}`)()
-        // Will also include maximum batch length here
-      };
-      this.#messageBatcher.setBatchingStrategy(batchingStrategy);
-    }
-  }
-
-  /**
-   * Received messages from the WebSocket, and passes them along to the
-   * Worker interface and back to the main thread.
-   */
-  class WebSocketToWorkerMessageBroker {
-    #worker;
-    #messageBatcher;
-
-    constructor(messageBatcher, worker) {
-      this.#messageBatcher = messageBatcher;
-      this.#worker = worker;
-    }
-
-    routeMessageToHandler(data) {
-      //Implement batching here
-      if (this.#messageBatcher.shouldBatchMessage(data)) {
-        this.#messageBatcher.addMessageToBatch(data);
-      } else {
-        this.#worker.postMessage(
-          {
-            type: 'message',
-            message: data
-          },
-          {
-            transfer: data
-          }
-        );
-      }
-    }
-  }
-
-  /**
-   * Responsible for batching messages according to the defined batching strategy.
-   */
-  class MessageBatcher {
-    #batch;
-    #batchingStrategy;
-    #hasBatch = false;
-    #maxBatchSize;
-    #readyForNextBatch;
-    #worker;
-    #transferables;
-
-    constructor(worker) {
-      this.#maxBatchSize = 10;
-      this.#readyForNextBatch = false;
-      this.#worker = worker;
-      this.#transferables = [];
-      this.#resetBatch();
-    }
-    #resetBatch() {
-      this.#batch = {};
-      this.#hasBatch = false;
-    }
-    /**
-     * @param {BatchingStrategy} strategy
-     */
-    setBatchingStrategy(strategy) {
-      this.#batchingStrategy = strategy;
-    }
-    /**
-     * Applies the `shouldBatchMessage` function from the supplied batching strategy
-     * to each message to determine if it should be added to a batch. If not batched,
-     * the message is immediately sent over the worker to the main thread.
-     * @param {any} message the message received from the WebSocket. See the WebSocket
-     * documentation for more details -
-     * https://developer.mozilla.org/en-US/docs/Web/API/MessageEvent/data
-     * @returns
-     */
-    shouldBatchMessage(message) {
-      return (
-        this.#batchingStrategy.shouldBatchMessage &&
-        this.#batchingStrategy.shouldBatchMessage(message)
-      );
-    }
-    /**
-     * Adds the given message to a batch. The batch group that the message is added
-     * to will be determined by the value returned by `getBatchIdFromMessage`.
-     * @param {any} message the message received from the WebSocket. See the WebSocket
-     * documentation for more details -
-     * https://developer.mozilla.org/en-US/docs/Web/API/MessageEvent/data
-     */
-    addMessageToBatch(message) {
-      const batchId = this.#batchingStrategy.getBatchIdFromMessage(message);
-      let batch = this.#batch[batchId];
-      if (batch === undefined) {
-        batch = this.#batch[batchId] = [message];
-      } else {
-        batch.push(message);
-      }
-      if (batch.length > this.#maxBatchSize) {
-        batch.shift();
-        this.#batch.dropped = this.#batch.dropped || true;
-      }
-      if (this.#readyForNextBatch) {
-        this.#sendNextBatch();
-      } else {
-        this.#hasBatch = true;
-      }
-      this.#transferables.push(message);
-    }
-    setMaxBatchSize(maxBatchSize) {
-      this.#maxBatchSize = maxBatchSize;
-    }
-    /**
-     * Indicates that client code is ready to receive the next batch of
-     * messages. If a batch is available, it will be immediately sent.
-     * Otherwise a flag will be set to send the next batch as soon as
-     * any new data is available.
-     */
-    readyForNextBatch() {
-      if (this.#hasBatch) {
-        this.#sendNextBatch();
-      } else {
-        this.#readyForNextBatch = true;
-      }
-    }
-    #sendNextBatch() {
-      const batch = this.#batch;
-      this.#resetBatch();
-      this.#worker.postMessage(
-        {
-          type: 'batch',
-          batch
-        },
-        {
-          transfer: this.#transferables
-        }
-      );
-      this.#readyForNextBatch = false;
-      this.#hasBatch = false;
-      this.#transferables = [];
-    }
-  }
-
-  const websocket = new ResilientWebSocket();
-  const messageBatcher = new MessageBatcher(self);
-  const workerBroker = new WorkerToWebSocketMessageBroker(websocket, messageBatcher);
-  const websocketBroker = new WebSocketToWorkerMessageBroker(messageBatcher, self);
-
-  self.addEventListener('message', (message) => {
-    workerBroker.routeMessageToHandler(message);
-  });
-  websocket.registerMessageCallback((data) => {
-    websocketBroker.routeMessageToHandler(data);
-  });
-}

src/plugins/activityStates/activityStatesInterceptor.js

@@ -0,0 +1,68 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { ACTIVITY_STATES_KEY } from './createActivityStatesIdentifier.js';
+
+/**
+ * @typedef {object} ActivityStatesInterceptorOptions
+ * @property {import('../../api/objects/ObjectAPI').Identifier} identifier the {namespace, key} to use for the activity states object.
+ * @property {string} name The name of the activity states model.
+ * @property {number} priority the priority of the interceptor. By default, it is low.
+ */
+
+/**
+ * Creates an activity states object in the persistence store. This is used to save plan activity states.
+ * This will only get invoked when an attempt is made to save the state for an activity and no activity states object exists in the store.
+ * @param {import('../../../openmct').OpenMCT} openmct
+ * @param {ActivityStatesInterceptorOptions} options
+ * @returns {object}
+ */
+const ACTIVITY_STATES_TYPE = 'activity-states';
+
+function activityStatesInterceptor(openmct, options) {
+  const { identifier, name, priority = openmct.priority.LOW } = options;
+  const activityStatesModel = {
+    identifier,
+    name,
+    type: ACTIVITY_STATES_TYPE,
+    activities: {},
+    location: null
+  };
+
+  return {
+    appliesTo: (identifierObject) => {
+      return identifierObject.key === ACTIVITY_STATES_KEY;
+    },
+    invoke: (identifierObject, object) => {
+      if (!object || openmct.objects.isMissing(object)) {
+        openmct.objects.save(activityStatesModel);
+
+        return activityStatesModel;
+      }
+
+      return object;
+    },
+    priority
+  };
+}
+
+export default activityStatesInterceptor;

src/plugins/activityStates/createActivityStatesIdentifier.js

@@ -0,0 +1,30 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+export const ACTIVITY_STATES_KEY = 'activity-states';
+
+export function createActivityStatesIdentifier(namespace = '') {
+  return {
+    key: ACTIVITY_STATES_KEY,
+    namespace
+  };
+}

src/plugins/activityStates/pluginSpec.js

@@ -0,0 +1,89 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { createOpenMct, resetApplicationState } from 'utils/testing';
+
+import {
+  ACTIVITY_STATES_KEY,
+  createActivityStatesIdentifier
+} from './createActivityStatesIdentifier.js';
+
+const MISSING_NAME = `Missing: ${ACTIVITY_STATES_KEY}`;
+const DEFAULT_NAME = 'Activity States';
+const activityStatesIdentifier = createActivityStatesIdentifier();
+
+describe('the plugin', () => {
+  let openmct;
+  let missingObj = {
+    identifier: activityStatesIdentifier,
+    type: 'unknown',
+    name: MISSING_NAME
+  };
+
+  describe('with no arguments passed in', () => {
+    beforeEach((done) => {
+      openmct = createOpenMct();
+      openmct.install(openmct.plugins.PlanLayout());
+
+      openmct.on('start', done);
+      openmct.startHeadless();
+    });
+
+    afterEach(() => {
+      return resetApplicationState(openmct);
+    });
+
+    it('when installed, adds "Activity States"', async () => {
+      const activityStatesObject = await openmct.objects.get(activityStatesIdentifier);
+      expect(activityStatesObject.name).toBe(DEFAULT_NAME);
+      expect(activityStatesObject).toBeDefined();
+    });
+
+    describe('adds an interceptor that returns a "Activity States" model for', () => {
+      let activityStatesObject;
+      let mockNotFoundProvider;
+      let activeProvider;
+
+      beforeEach(async () => {
+        mockNotFoundProvider = {
+          get: () => Promise.reject(new Error('Not found')),
+          create: () => Promise.resolve(missingObj),
+          update: () => Promise.resolve(missingObj)
+        };
+
+        activeProvider = mockNotFoundProvider;
+        spyOn(openmct.objects, 'getProvider').and.returnValue(activeProvider);
+        activityStatesObject = await openmct.objects.get(activityStatesIdentifier);
+      });
+
+      it('missing objects', () => {
+        let idsMatch = openmct.objects.areIdsEqual(
+          activityStatesObject.identifier,
+          activityStatesIdentifier
+        );
+
+        expect(activityStatesObject).toBeDefined();
+        expect(idsMatch).toBeTrue();
+      });
+    });
+  });
+});

src/plugins/displayLayout/components/TelemetryView.vue

@@ -84,12 +84,7 @@ import LayoutFrame from './LayoutFrame.vue';
 
 const DEFAULT_TELEMETRY_DIMENSIONS = [10, 5];
 const DEFAULT_POSITION = [1, 1];
-const CONTEXT_MENU_ACTIONS = [
-  'copyToClipboard',
-  'copyToNotebook',
-  'viewHistoricalData',
-  'renderWhenVisible'
-];
+const CONTEXT_MENU_ACTIONS = ['copyToClipboard', 'copyToNotebook', 'viewHistoricalData'];
 
 export default {
   makeDefinition(openmct, gridSize, domainObject, position) {

src/plugins/imagery/components/ImageryView.vue

@@ -145,7 +145,7 @@
             v-if="relatedTelemetry.hasRelatedTelemetry && isSpacecraftPositionFresh"
             class="c-imagery__age icon-check c-imagery--new no-animation"
           >
-            POS
+            ROV
           </div>
 
           <!-- camera position fresh -->

src/plugins/plan/components/ActivityTimeline.vue

@@ -135,6 +135,7 @@ export default {
       default: 22
     }
   },
+  emits: ['activity-selected'],
   data() {
     return {
       lineHeight: 10
@@ -142,30 +143,11 @@ export default {
   },
   methods: {
     setSelectionForActivity(activity, event) {
-      const element = event.currentTarget;
-      const multiSelect = event.metaKey;
-
       event.stopPropagation();
-
-      this.openmct.selection.select(
-        [
-          {
-            element: element,
-            context: {
-              type: 'activity',
-              activity: activity
-            }
-          },
-          {
-            element: this.openmct.layout.$refs.browseObject.$el,
-            context: {
-              item: this.domainObject,
-              supportsMultiSelect: true
-            }
-          }
-        ],
-        multiSelect
-      );
+      this.$emit('activity-selected', {
+        event,
+        selection: activity.selection
+      });
     }
   }
 };

src/plugins/plan/components/PlanView.vue

@@ -47,6 +47,7 @@
         :width="group.width"
         :is-nested="options.isChildObject"
         :status="status"
+        @activity-selected="selectActivity"
       />
     </div>
   </div>
@@ -134,7 +135,7 @@ export default {
     this.swimlaneVisibility = this.configuration.swimlaneVisibility;
     this.clipActivityNames = this.configuration.clipActivityNames;
     if (this.domainObject.type === 'plan') {
-      this.planData = getValidatedData(this.domainObject);
+      this.setPlanData(this.domainObject);
     }
 
     const canvas = document.createElement('canvas');
@@ -177,6 +178,9 @@ export default {
     this.planViewConfiguration.destroy();
   },
   methods: {
+    setPlanData(domainObject) {
+      this.planData = getValidatedData(domainObject);
+    },
     activityNameFitsRect(activityName, rectWidth) {
       return this.getTextWidth(activityName) + TEXT_LEFT_PADDING < rectWidth;
     },
@@ -215,9 +219,7 @@ export default {
             callback: () => {
               this.removeFromComposition(this.planObject);
               this.planObject = domainObject;
-              this.planData = getValidatedData(domainObject);
-              this.setStatus(this.openmct.status.get(domainObject.identifier));
-              this.setScaleAndGenerateActivities();
+              this.handleSelectFileChange();
               dialog.dismiss();
             }
           },
@@ -237,9 +239,7 @@ export default {
       } else {
         this.planObject = domainObject;
         this.swimlaneVisibility = this.configuration.swimlaneVisibility;
-        this.planData = getValidatedData(domainObject);
-        this.setStatus(this.openmct.status.get(domainObject.identifier));
-        this.setScaleAndGenerateActivities();
+        this.handleSelectFileChange(domainObject);
       }
     },
     handleConfigurationChange(newConfiguration) {
@@ -259,8 +259,10 @@ export default {
 
       this.setScaleAndGenerateActivities();
     },
-    handleSelectFileChange() {
-      this.planData = getValidatedData(this.domainObject);
+    handleSelectFileChange(domainObject) {
+      const planDomainObject = domainObject || this.domainObject;
+      this.setPlanData(planDomainObject);
+      this.setStatus(this.openmct.status.get(planDomainObject.identifier));
       this.setScaleAndGenerateActivities();
     },
     removeFromComposition(domainObject) {
@@ -434,7 +436,7 @@ export default {
           return;
         }
 
-        rawActivities.forEach((rawActivity) => {
+        rawActivities.forEach((rawActivity, index) => {
           if (!this.isActivityInBounds(rawActivity)) {
             return;
           }
@@ -481,13 +483,10 @@ export default {
           const activity = {
             color: color,
             textColor: textColor,
-            name: rawActivity.name,
             exceeds: {
               start: this.xScale(this.viewBounds.start) > this.xScale(rawActivity.start),
               end: this.xScale(this.viewBounds.end) < this.xScale(rawActivity.end)
             },
-            start: rawActivity.start,
-            end: rawActivity.end,
             row: currentRow,
             textLines: textLines,
             textStart: textStart,
@@ -496,7 +495,11 @@ export default {
             rectStart: rectX1,
             rectEnd: showTextInsideRect ? rectX2 : textStart + textWidth,
             rectWidth: rectWidth,
-            clipPathId: this.getClipPathId(groupName, rawActivity, currentRow)
+            clipPathId: this.getClipPathId(groupName, rawActivity, currentRow),
+            selection: {
+              groupName,
+              index
+            }
           };
           activitiesByRow[currentRow].push(activity);
         });
@@ -573,6 +576,31 @@ export default {
       const activityName = activity.name.toLowerCase().replace(/ /g, '-');
 
       return `${groupName}-${activityName}-${activity.start}-${activity.end}-${row}`;
+    },
+    selectActivity({ event, selection }) {
+      const element = event.currentTarget;
+      const multiSelect = event.metaKey;
+      const { groupName, index } = selection;
+      const rawActivity = this.planData[groupName][index];
+      this.openmct.selection.select(
+        [
+          {
+            element: element,
+            context: {
+              type: 'activity',
+              activity: rawActivity
+            }
+          },
+          {
+            element: this.openmct.layout.$refs.browseObject.$el,
+            context: {
+              item: this.domainObject,
+              supportsMultiSelect: true
+            }
+          }
+        ],
+        multiSelect
+      );
     }
   }
 };

src/plugins/plan/inspector/components/PlanActivitiesView.vue

@@ -20,21 +20,35 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-  <div class="c-inspector__properties c-inspect-properties">
-    <plan-activity-view
-      v-for="activity in activities"
-      :key="activity.id"
-      :activity="activity"
-      :heading="heading"
-    />
-  </div>
+  <plan-activity-time-view
+    v-for="activity in activities"
+    :key="activity.key"
+    :activity="activity"
+    :heading="heading"
+  />
+  <plan-activity-properties-view
+    v-for="activity in activities"
+    :key="activity.key"
+    heading="Properties"
+    :activity="activity"
+  />
+  <plan-activity-status-view
+    v-if="canPersistState"
+    :key="activities[0].key"
+    :activity="activities[0]"
+    :execution-state="activityExecutionState"
+    heading="Activity Status"
+    @update-activity-state="persistActivityState"
+  />
 </template>
 
 <script>
 import { getPreciseDuration } from 'utils/duration';
-import { v4 as uuid } from 'uuid';
 
-import PlanActivityView from './PlanActivityView.vue';
+import { getDisplayProperties } from '../../util.js';
+import PlanActivityPropertiesView from './PlanActivityPropertiesView.vue';
+import PlanActivityStatusView from './PlanActivityStatusView.vue';
+import PlanActivityTimeView from './PlanActivityTimeView.vue';
 
 const propertyLabels = {
   start: 'Start DateTime',
@@ -44,23 +58,34 @@ const propertyLabels = {
   latestEnd: 'Latest End',
   gap: 'Gap',
   overlap: 'Overlap',
-  totalTime: 'Total Time'
+  totalTime: 'Total Time',
+  description: 'Description'
 };
 export default {
   components: {
-    PlanActivityView
+    PlanActivityTimeView,
+    PlanActivityPropertiesView,
+    PlanActivityStatusView
   },
   inject: ['openmct', 'selection'],
   data() {
     return {
       name: '',
       activities: [],
+      selectedActivities: [],
+      activityExecutionState: undefined,
       heading: ''
     };
   },
+  computed: {
+    canPersistState() {
+      return this.selectedActivities.length === 1 && this.activities?.[0]?.id;
+    }
+  },
   mounted() {
     this.setFormatters();
     this.getPlanData(this.selection);
+    this.getActivityStates();
     this.getActivities();
     this.openmct.selection.on('change', this.updateSelection);
     this.openmct.time.on('timeSystem', this.setFormatters);
@@ -68,8 +93,28 @@ export default {
   beforeUnmount() {
     this.openmct.selection.off('change', this.updateSelection);
     this.openmct.time.off('timeSystem', this.setFormatters);
+    if (this.stopObservingActivityStatesObject) {
+      this.stopObservingActivityStatesObject();
+    }
   },
   methods: {
+    async getActivityStates() {
+      this.activityStatesObject = await this.openmct.objects.get('activity-states');
+      this.setActivityStates(this.activityStatesObject);
+      this.stopObservingActivityStatesObject = this.openmct.objects.observe(
+        this.activityStatesObject,
+        '*',
+        this.setActivityStates
+      );
+    },
+    setActivityStates(newActivitiesStateObject) {
+      if (this.activities.length) {
+        const id = this.activities[0].id;
+        this.activityExecutionState = newActivitiesStateObject.activities[id];
+      } else {
+        this.activityExecutionState = undefined;
+      }
+    },
     setFormatters() {
       let timeSystem = this.openmct.time.timeSystem();
       this.timeFormatter = this.openmct.telemetry.getValueFormatter({
@@ -86,6 +131,7 @@ export default {
         if (selectionItem[0].context.type === 'activity') {
           const activity = selectionItem[0].context.activity;
           if (activity) {
+            activity.key = activity.id ?? activity.name;
             this.selectedActivities.push(activity);
           }
         }
@@ -104,20 +150,37 @@ export default {
       this.activities.splice(0);
       this.selectedActivities.forEach((selectedActivity, index) => {
         const activity = {
-          id: uuid(),
-          start: {
-            label: propertyLabels.start,
-            value: this.formatTime(selectedActivity.start)
-          },
-          end: {
-            label: propertyLabels.end,
-            value: this.formatTime(selectedActivity.end)
-          },
-          duration: {
-            label: propertyLabels.duration,
-            value: this.formatDuration(selectedActivity.end - selectedActivity.start)
+          id: selectedActivity.id,
+          key: selectedActivity.key,
+          timeProperties: {
+            start: {
+              label: propertyLabels.start,
+              value: this.formatTime(selectedActivity.start)
+            },
+            end: {
+              label: propertyLabels.end,
+              value: this.formatTime(selectedActivity.end)
+            },
+            duration: {
+              label: propertyLabels.duration,
+              value: this.formatDuration(selectedActivity.end - selectedActivity.start)
+            }
           }
         };
+        activity.metadata = {};
+        if (selectedActivity.description) {
+          activity.metadata.description = {
+            label: propertyLabels.description,
+            value: selectedActivity.description
+          };
+        }
+
+        const displayProperties = getDisplayProperties(selectedActivity);
+        activity.metadata = {
+          ...activity.metadata,
+          ...displayProperties
+        };
+
         this.activities[index] = activity;
       });
     },
@@ -141,6 +204,8 @@ export default {
       let latestEnd;
       let gap;
       let overlap;
+      let id;
+      let key;
 
       //Sort by start time
       let selectedActivities = this.selectedActivities.sort(this.sortFn);
@@ -159,6 +224,8 @@ export default {
           earliestStart = Math.min(earliestStart, selectedActivity.start);
           latestEnd = Math.max(latestEnd, selectedActivity.end);
         } else {
+          id = selectedActivity.id;
+          key = selectedActivity.id ?? selectedActivity.name;
           earliestStart = selectedActivity.start;
           latestEnd = selectedActivity.end;
         }
@@ -166,30 +233,33 @@ export default {
       let totalTime = latestEnd - earliestStart;
 
       const activity = {
-        id: uuid(),
-        earliestStart: {
-          label: propertyLabels.earliestStart,
-          value: this.formatTime(earliestStart)
-        },
-        latestEnd: {
-          label: propertyLabels.latestEnd,
-          value: this.formatTime(latestEnd)
+        id,
+        key,
+        timeProperties: {
+          earliestStart: {
+            label: propertyLabels.earliestStart,
+            value: this.formatTime(earliestStart)
+          },
+          latestEnd: {
+            label: propertyLabels.latestEnd,
+            value: this.formatTime(latestEnd)
+          }
         }
       };
 
       if (gap) {
-        activity.gap = {
+        activity.timeProperties.gap = {
           label: propertyLabels.gap,
           value: this.formatDuration(gap)
         };
       } else if (overlap) {
-        activity.overlap = {
+        activity.timeProperties.overlap = {
           label: propertyLabels.overlap,
           value: this.formatDuration(overlap)
         };
       }
 
-      activity.totalTime = {
+      activity.timeProperties.totalTime = {
         label: propertyLabels.totalTime,
         value: this.formatDuration(totalTime)
       };
@@ -201,6 +271,11 @@ export default {
     },
     formatTime(time) {
       return this.timeFormatter.format(time);
+    },
+    persistActivityState(data) {
+      const { key, executionState } = data;
+      const activitiesPath = `activities.${key}`;
+      this.openmct.objects.mutate(this.activityStatesObject, activitiesPath, executionState);
     }
   }
 };

src/plugins/plan/inspector/components/PlanActivityPropertiesView.vue

@@ -0,0 +1,81 @@
+<!--
+ Open MCT, Copyright (c) 2014-2023, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div class="c-inspector__properties c-inspect-properties">
+    <div v-if="properties.length" class="u-contents">
+      <div class="c-inspect-properties__header">{{ heading }}</div>
+      <ul v-for="property in properties" :key="property.id" class="c-inspect-properties__section">
+        <activity-property :label="property.label" :value="property.value" />
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import ActivityProperty from './ActivityProperty.vue';
+
+export default {
+  components: {
+    ActivityProperty
+  },
+  props: {
+    activity: {
+      type: Object,
+      required: true
+    },
+    heading: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      properties: []
+    };
+  },
+  mounted() {
+    this.setProperties();
+  },
+  methods: {
+    setProperties() {
+      if (!this.activity.metadata) {
+        return;
+      }
+
+      Object.keys(this.activity.metadata).forEach((key) => {
+        if (this.activity.metadata[key].label) {
+          const label = this.activity.metadata[key].label;
+          const value = String(this.activity.metadata[key].value);
+          const id = this.activity.id;
+
+          this.properties[this.properties.length] = {
+            id,
+            label,
+            value
+          };
+        }
+      });
+    }
+  }
+};
+</script>

src/plugins/plan/inspector/components/PlanActivityStatusView.vue

@@ -0,0 +1,131 @@
+<!--
+ Open MCT, Copyright (c) 2014-2023, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div class="c-inspector__properties c-inspect-properties">
+    <div class="u-contents">
+      <div class="c-inspect-properties__header">{{ heading }}</div>
+      <div class="c-inspect-properties__row">
+        <div class="c-inspect-properties__label" title="Set Status">Set Status</div>
+        <div class="c-inspect-properties__value" aria-label="Activity Status Label">
+          <select
+            v-model="currentStatusKey"
+            name="setActivityStatus"
+            aria-label="Activity Status"
+            @change="changeActivityStatus"
+          >
+            <option
+              v-for="status in activityStates"
+              :key="status.key"
+              :value="status.key"
+              :aria-selected="currentStatusKey === status.key"
+            >
+              {{ status.label }}
+            </option>
+          </select>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+const activityStates = [
+  {
+    key: 'notStarted',
+    label: 'Not started'
+  },
+  {
+    key: 'in-progress',
+    label: 'In progress'
+  },
+  {
+    key: 'completed',
+    label: 'Completed'
+  },
+  {
+    key: 'aborted',
+    label: 'Aborted'
+  },
+  {
+    key: 'skipped',
+    label: 'Skipped'
+  },
+  {
+    key: 'cancelled',
+    label: 'Cancelled'
+  }
+];
+
+export default {
+  props: {
+    activity: {
+      type: Object,
+      required: true
+    },
+    executionState: {
+      type: String,
+      default() {
+        return '';
+      }
+    },
+    heading: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ['updateActivityState'],
+  data() {
+    return {
+      activityStates: activityStates,
+      currentStatusKey: activityStates[0].key
+    };
+  },
+  watch: {
+    executionState() {
+      this.setActivityStatus();
+    }
+  },
+  mounted() {
+    this.setActivityStatus();
+  },
+  methods: {
+    setActivityStatus() {
+      let statusKeyIndex = activityStates.findIndex((state) => state.key === this.executionState);
+      if (statusKeyIndex < 0) {
+        statusKeyIndex = 0;
+      }
+      this.currentStatusKey = this.activityStates[statusKeyIndex].key;
+    },
+    changeActivityStatus() {
+      if (this.currentStatusKey === '') {
+        return;
+      }
+      this.activity.executionState = this.currentStatusKey;
+      this.$emit('updateActivityState', {
+        key: this.activity.id,
+        executionState: this.currentStatusKey
+      });
+    }
+  }
+};
+</script>

src/plugins/plan/inspector/components/PlanActivityTimeView.vue

@@ -21,23 +21,23 @@
 -->
 
 <template>
-  <div v-if="timeProperties.length" class="u-contents">
-    <div class="c-inspect-properties__header">
-      {{ heading }}
+  <div class="c-inspector__properties c-inspect-properties">
+    <div v-if="timeProperties.length" class="u-contents">
+      <div class="c-inspect-properties__header">
+        {{ heading }}
+      </div>
+      <ul
+        v-for="timeProperty in timeProperties"
+        :key="timeProperty.id"
+        class="c-inspect-properties__section"
+      >
+        <activity-property :label="timeProperty.label" :value="timeProperty.value" />
+      </ul>
     </div>
-    <ul
-      v-for="timeProperty in timeProperties"
-      :key="timeProperty.id"
-      class="c-inspect-properties__section"
-    >
-      <activity-property :label="timeProperty.label" :value="timeProperty.value" />
-    </ul>
   </div>
 </template>
 
 <script>
-import { v4 as uuid } from 'uuid';
-
 import ActivityProperty from './ActivityProperty.vue';
 
 export default {
@@ -64,13 +64,14 @@ export default {
   },
   methods: {
     setProperties() {
-      Object.keys(this.activity).forEach((key) => {
-        if (this.activity[key].label) {
-          const label = this.activity[key].label;
-          const value = String(this.activity[key].value);
+      Object.keys(this.activity.timeProperties).forEach((key) => {
+        if (this.activity.timeProperties[key].label) {
+          const label = this.activity.timeProperties[key].label;
+          const value = String(this.activity.timeProperties[key].value);
+          const id = this.activity.id;
 
           this.timeProperties[this.timeProperties.length] = {
-            id: uuid(),
+            id,
             label,
             value
           };

src/plugins/plan/plugin.js

@@ -20,12 +20,28 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+import activityStatesInterceptor from '../activityStates/activityStatesInterceptor.js';
+import { createActivityStatesIdentifier } from '../activityStates/createActivityStatesIdentifier.js';
 import ganttChartCompositionPolicy from './GanttChartCompositionPolicy.js';
 import ActivityInspectorViewProvider from './inspector/ActivityInspectorViewProvider.js';
 import GanttChartInspectorViewProvider from './inspector/GanttChartInspectorViewProvider.js';
 import { DEFAULT_CONFIGURATION } from './PlanViewConfiguration.js';
 import PlanViewProvider from './PlanViewProvider.js';
 
+const ACTIVITY_STATES_DEFAULT_NAME = 'Activity States';
+/**
+ * @typedef {object} PlanOptions
+ * @property {boolean} creatable true/false to allow creation of a plan via the Create menu.
+ * @property {string} name The name of the activity states model.
+ * @property {string} namespace the namespace to use for the activity states object.
+ * @property {Number} priority the priority of the interceptor. By default, it is low.
+ */
+
+/**
+ *
+ * @param {PlanOptions} options
+ * @returns {*} (any)
+ */
 export default function (options = {}) {
   return function install(openmct) {
     openmct.types.addType('plan', {
@@ -70,5 +86,13 @@ export default function (options = {}) {
     openmct.inspectorViews.addProvider(new ActivityInspectorViewProvider(openmct));
     openmct.inspectorViews.addProvider(new GanttChartInspectorViewProvider(openmct));
     openmct.composition.addPolicy(ganttChartCompositionPolicy(openmct));
+
+    //add activity states get interceptor
+    const { name = ACTIVITY_STATES_DEFAULT_NAME, namespace = '', priority } = options;
+    const identifier = createActivityStatesIdentifier(namespace);
+
+    openmct.objects.addGetInterceptor(
+      activityStatesInterceptor(openmct, { identifier, name, priority })
+    );
   };
 }

src/plugins/plan/util.js

@@ -20,6 +20,18 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+/**
+ * The SourceMap allows mapping specific implementations of plan domain objects to those expected by Open MCT.
+ * @typedef {object} SourceMapOption
+ * @property {string} orderedGroups the property of the plan that lists groups/swim lanes specifying what order they will be displayed in Open MCT.
+ * @property {string} activities the property of the plan that has the list of activities to be displayed.
+ * @property {string} groupId the property of the activity that maps to the group/swim lane it should be displayed in.
+ * @property {string} start The start time property of the activity
+ * @property {string} end The end time property of the activity
+ * @property {string} id The unique id of the activity. This is required to allow setting activity states
+ * @property {object} displayProperties a list of key: value pairs that specifies which properties of the activity should be displayed when it is selected. Ex. {'location': 'Location', 'metadata.length_in_meters', 'Length (meters)'}
+ */
+
 export function getValidatedData(domainObject) {
   const sourceMap = domainObject.sourceMap;
   const json = getObjectJson(domainObject);
@@ -45,6 +57,14 @@ export function getValidatedData(domainObject) {
           groupActivity.end = activity[sourceMap.end];
         }
 
+        if (sourceMap.id) {
+          groupActivity.id = activity[sourceMap.id];
+        }
+
+        if (sourceMap.displayProperties) {
+          groupActivity.displayProperties = sourceMap.displayProperties;
+        }
+
         if (!mappedJson[groupIdKey]) {
           mappedJson[groupIdKey] = [];
         }
@@ -100,6 +120,26 @@ export function getValidatedGroups(domainObject, planData) {
   return orderedGroupNames;
 }
 
+export function getDisplayProperties(activity) {
+  let displayProperties = {};
+  function extractProperties(properties, useKeyAsLabel = false) {
+    Object.keys(properties).forEach((key) => {
+      const label = useKeyAsLabel ? key : properties[key];
+      const value = _.get(activity, key);
+      if (value) {
+        displayProperties[key] = { label, value };
+      }
+    });
+  }
+
+  if (activity?.displayProperties) {
+    extractProperties(activity.displayProperties);
+  } else if (activity?.properties) {
+    extractProperties(activity.properties, true);
+  }
+  return displayProperties;
+}
+
 export function getContrastingColor(hexColor) {
   function cutHex(h, start, end) {
     const hStr = h.charAt(0) === '#' ? h.substring(1, 7) : h;

src/plugins/plot/configuration/Model.js

@@ -139,9 +139,7 @@ export default class Model extends EventEmitter {
 
 /** @typedef {any} TODO */
 
-/**
- * @typedef {import('../../../../openmct.js').OpenMCT} OpenMCT
- */
+/** @typedef {TODO} OpenMCT */
 
 /**
 @template {object} T

src/plugins/plot/configuration/PlotSeries.js

@@ -211,16 +211,9 @@ export default class PlotSeries extends Model {
     );
 
     if (!this.unsubscribe) {
-      this.unsubscribe = this.openmct.telemetry.subscribe(
-        this.domainObject,
-        (data) => {
-          this.addAll(data, true);
-        },
-        {
-          filters: this.filters,
-          strategy: this.openmct.telemetry.SUBSCRIBE_STRATEGY.BATCH
-        }
-      );
+      this.unsubscribe = this.openmct.telemetry.subscribe(this.domainObject, this.add.bind(this), {
+        filters: this.filters
+      });
     }
 
     try {
@@ -309,7 +302,9 @@ export default class PlotSeries extends Model {
     this.resetStats();
     this.emit('reset');
     if (newData) {
-      this.addAll(newData, true);
+      newData.forEach(function (point) {
+        this.add(point, true);
+      }, this);
     }
   }
   /**
@@ -421,14 +416,14 @@ export default class PlotSeries extends Model {
    * when adding an array of points that are already properly sorted.
    *
    * @private
-   * @param {Object} newData a telemetry datum.
-   * @param {Boolean} [sorted] default false, if true will append
+   * @param {Object} point a telemetry datum.
+   * @param {Boolean} [appendOnly] default false, if true will append
    *                  a point to the end without dupe checking.
    */
-  add(newData, sorted = false) {
+  add(point, appendOnly) {
     let data = this.getSeriesData();
     let insertIndex = data.length;
-    const currentYVal = this.getYVal(newData);
+    const currentYVal = this.getYVal(point);
     const lastYVal = this.getYVal(data[insertIndex - 1]);
 
     if (this.isValueInvalid(currentYVal) && this.isValueInvalid(lastYVal)) {
@@ -437,28 +432,22 @@ export default class PlotSeries extends Model {
       return;
     }
 
-    if (!sorted) {
-      insertIndex = this.sortedIndex(newData);
-      if (this.getXVal(data[insertIndex]) === this.getXVal(newData)) {
+    if (!appendOnly) {
+      insertIndex = this.sortedIndex(point);
+      if (this.getXVal(data[insertIndex]) === this.getXVal(point)) {
         return;
       }
 
-      if (this.getXVal(data[insertIndex - 1]) === this.getXVal(newData)) {
+      if (this.getXVal(data[insertIndex - 1]) === this.getXVal(point)) {
         return;
       }
     }
 
-    this.updateStats(newData);
-    newData.mctLimitState = this.evaluate(newData);
-    data.splice(insertIndex, 0, newData);
+    this.updateStats(point);
+    point.mctLimitState = this.evaluate(point);
+    data.splice(insertIndex, 0, point);
     this.updateSeriesData(data);
-    this.emit('add', newData, insertIndex, this);
-  }
-
-  addAll(points, sorted = false) {
-    for (let i = 0; i < points.length; i++) {
-      this.add(points[i], sorted);
-    }
+    this.emit('add', point, insertIndex, this);
   }
 
   /**

src/plugins/plugins.js

@@ -65,6 +65,7 @@ import PerformanceIndicator from './performanceIndicator/plugin.js';
 import CouchDBPlugin from './persistence/couch/plugin.js';
 import PlanLayout from './plan/plugin.js';
 import PlotPlugin from './plot/plugin.js';
+import ReloadAction from './reloadAction/plugin.js';
 import RemoteClock from './remoteClock/plugin.js';
 import StaticRootPlugin from './staticRootPlugin/plugin.js';
 import SummaryWidget from './summaryWidget/plugin.js';
@@ -141,6 +142,7 @@ plugins.Filters = Filters;
 plugins.ObjectMigration = ObjectMigration;
 plugins.GoToOriginalAction = GoToOriginalAction;
 plugins.OpenInNewTabAction = OpenInNewTabAction;
+plugins.ReloadAction = ReloadAction;
 plugins.ClearData = ClearData;
 plugins.WebPage = WebPagePlugin;
 plugins.Espresso = Espresso;

src/plugins/reloadAction/ReloadAction.js

@@ -0,0 +1,37 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2023, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+export default class ReloadAction {
+  constructor(openmct) {
+    this.name = 'Reload';
+    this.key = 'reload';
+    this.description = 'Reload this object and its children';
+    this.group = 'action';
+    this.priority = 10;
+    this.cssClass = 'icon-refresh';
+
+    this.openmct = openmct;
+  }
+  invoke(objectPath, view) {
+    const domainObject = objectPath[0];
+    this.openmct.objectViews.emit('reload', domainObject);
+  }
+}

src/plugins/reloadAction/plugin.js

@@ -0,0 +1,28 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2023, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+import ReloadAction from './ReloadAction.js';
+
+export default function plugin() {
+  return function install(openmct) {
+    openmct.actions.register(new ReloadAction(openmct));
+  };
+}

src/plugins/remoteClock/RemoteClock.js

@@ -59,21 +59,26 @@ export default class RemoteClock extends DefaultClock {
   }
 
   start() {
-    this.openmct.objects.get(this.identifier).then((domainObject) => {
-      // The start method is called when at least one listener registers with the clock.
-      // When the clock is changed, listeners are unregistered from the clock and the stop method is called.
-      // Sometimes, the objects.get call above does not resolve before the stop method is called.
-      // So when we proceed with the clock subscription below, we first need to ensure that there is at least one listener for our clock.
-      if (this.eventNames().length === 0) {
-        return;
-      }
-      this.openmct.time.on('timeSystem', this._timeSystemChange);
-      this.timeTelemetryObject = domainObject;
-      this.metadata = this.openmct.telemetry.getMetadata(domainObject);
-      this._timeSystemChange();
-      this._requestLatest();
-      this._subscribe();
-    });
+    this.openmct.objects
+      .get(this.identifier)
+      .then((domainObject) => {
+        // The start method is called when at least one listener registers with the clock.
+        // When the clock is changed, listeners are unregistered from the clock and the stop method is called.
+        // Sometimes, the objects.get call above does not resolve before the stop method is called.
+        // So when we proceed with the clock subscription below, we first need to ensure that there is at least one listener for our clock.
+        if (this.eventNames().length === 0) {
+          return;
+        }
+        this.openmct.time.on('timeSystem', this._timeSystemChange);
+        this.timeTelemetryObject = domainObject;
+        this.metadata = this.openmct.telemetry.getMetadata(domainObject);
+        this._timeSystemChange();
+        this._requestLatest();
+        this._subscribe();
+      })
+      .catch((error) => {
+        throw new Error(error);
+      });
   }
 
   stop() {

src/plugins/telemetryTable/components/TableCell.vue

@@ -22,8 +22,8 @@
 <template>
   <td
     ref="tableCell"
-    :aria-label="formattedValue"
     :title="formattedValue"
+    :aria-label="`${columnKey} table cell ${formattedValue}`"
     @click="selectCell($event.currentTarget, columnKey)"
     @mouseover.ctrl="showToolTip"
     @mouseleave="hideToolTip"

src/plugins/telemetryTable/components/TableComponent.vue

@@ -222,6 +222,7 @@
           ref="contentTable"
           class="c-table__body c-telemetry-table__body js-telemetry-table__content"
           :style="{ height: totalHeight + 'px' }"
+          :aria-label="`${table.domainObject.name} table content`"
         >
           <tbody>
             <telemetry-table-row

src/plugins/telemetryTable/components/table.scss

@@ -123,15 +123,6 @@
       .is-editing .l-layout__frame & {
         pointer-events: none;
       }
-
-      &.is-selected {
-        background-color: $colorSelectedBg !important;
-        color: $colorSelectedFg !important;
-        td {
-          background: none !important;
-          color: inherit !important;
-        }
-      }
     }
 
     td {
@@ -203,6 +194,18 @@ td {
   @include isLimit();
 }
 
+.c-table tr {
+  &[s-selected],
+  &.is-selected {
+    background-color: $colorSelectedBg !important;
+    color: $colorSelectedFg !important;
+    td {
+      background: none !important;
+      color: inherit !important;
+    }
+  }
+}
+
 /******************************* SPECIFIC CASE WRAPPERS */
 .is-editing {
   .c-telemetry-table__headers__labels {

src/plugins/timelist/ExpandedViewItem.vue

@@ -0,0 +1,240 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div :class="listItemClass">
+    <div class="c-tli__activity-color">
+      <div class="c-tli__activity-color-swatch" :style="styleClass"></div>
+    </div>
+    <div class="c-tli__title-and-bounds">
+      <div class="c-tli__title">{{ formattedItemValue.title }}</div>
+      <div class="c-tli__bounds" :class="{ '--has-duration': formattedItemValue.end }">
+        <div class="c-tli__duration">{{ formattedItemValue.duration }}</div>
+        <div class="c-tli__start-time">
+          {{ formattedItemValue.start }}
+        </div>
+        <div class="c-tli__end-time">{{ formattedItemValue.end }}</div>
+      </div>
+    </div>
+    <div class="c-tli__graphic">
+      <svg viewBox="0 0 100 100">
+        <g aria-label="Activity in progress" class="c-tli__graphic__pie">
+          <circle class="c-svg-progress__bg" r="50" cx="50" cy="50"></circle>
+          <path id="svg-progress-path" class="c-svg-progress__progress"></path>
+          <circle
+            class="c-svg-progress__ticks"
+            r="40"
+            cx="50"
+            cy="50"
+            stroke-dasharray="3 7.472"
+          ></circle>
+        </g>
+        <path
+          aria-label="Activity complete"
+          class="c-tli__graphic__check"
+          d="M80 20L42.5 57.5L20 35V57.5L42.5 80L80 42.5V20Z"
+        />
+        <path
+          aria-label="Activity alert"
+          class="c-tli__graphic__alert-triangle"
+          d="M79.4533 70.3034L54.004 25.7641C51.8962 22.0786 48.4636 22.0786 46.3559 25.7641L20.8946 70.3034C18.7868 73.989 20.5332 77 24.7728 77H75.563C79.8146 77 81.561 73.989 79.4533 70.3034ZM54.028 73.1459H46.3198V65.4376H54.028V73.1459ZM55.3409 50.0211L53.0645 61.5835H47.2833L45.007 50.0211V34.6045H55.3529V50.0211H55.3409Z"
+        />
+        <g aria-label="Activity aborted" class="c-tli__graphic__circle-slash">
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M50 82C67.6731 82 82 67.6731 82 50C82 32.3269 67.6731 18 50 18C32.3269 18 18 32.3269 18 50C18 67.6731 32.3269 82 50 82ZM50 72C62.1503 72 72 62.1503 72 50C72 37.8497 62.1503 28 50 28C37.8497 28 28 37.8497 28 50C28 62.1503 37.8497 72 50 72Z"
+          />
+          <path
+            d="M63.7886 29.6404L70.8596 36.7114L36.2114 71.3596L29.1404 64.2886L63.7886 29.6404Z"
+          />
+        </g>
+        <path
+          aria-label="Activity skipped"
+          class="c-tli__graphic__skipped"
+          d="M31 48C31 42.4772 35.5152 38 41 38H59C64.4848 38 69 42.4772 69 48V55H58L74 72L90 55H79V48C79 36.9543 69.9695 28 59 28H41C30.0305 28 21 36.9543 21 48V53.0294C21 56.8792 17.8232 60 14 60V70C23.308 70 31 62.402 31 53.0294V48Z"
+        />
+      </svg>
+    </div>
+    <div class="c-tli__time-hero">
+      <div class="c-tli__time-hero-context-and-time">
+        <div class="c-tli__time-hero-context">{{ formattedItemValue.label }}</div>
+        <div v-if="showTimeHero" class="c-tli__time-hero-time --is-countdown">
+          {{ formattedItemValue.countdown }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+
+import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
+import { CURRENT_CSS_SUFFIX, FUTURE_CSS_SUFFIX, PAST_CSS_SUFFIX } from './constants.js';
+
+const ITEM_COLORS = {
+  [CURRENT_CSS_SUFFIX]: '#ffcc00',
+  [PAST_CSS_SUFFIX]: '#0088ff',
+  [FUTURE_CSS_SUFFIX]: '#7300ff'
+};
+
+const EXECUTION_STATES = {
+  notStarted: 'Not started',
+  active: 'In progress',
+  completed: 'Completed',
+  aborted: 'Aborted',
+  skipped: 'Skipped',
+  cancelled: 'Cancelled'
+};
+
+const INFERRED_EXECUTION_STATES = {
+  incomplete: 'Incomplete',
+  overdue: 'Overdue',
+  runningLong: 'Running Long',
+  starts: 'Starts',
+  occurs: 'Occurs',
+  ends: 'Ends'
+};
+
+export default {
+  inject: ['openmct', 'domainObject', 'path'],
+  props: {
+    item: {
+      type: Object,
+      required: true
+    },
+    itemProperties: {
+      type: Array,
+      required: true
+    },
+    executionState: {
+      type: String,
+      default() {
+        return '';
+      }
+    }
+  },
+  data() {
+    return {
+      timestamp: this.openmct.time.now()
+    };
+  },
+  computed: {
+    styleClass() {
+      return { backgroundColor: ITEM_COLORS[this.item.cssClass] };
+    },
+    listItemClass() {
+      const timeRelationClass = this.item.cssClass;
+      const executionStateClass = `--is-${this.executionState}`;
+      return `c-tli ${timeRelationClass} ${executionStateClass}`;
+    },
+    formattedItemValue() {
+      let executionStateLabel;
+      const executionStateKeys = Object.keys(EXECUTION_STATES);
+      const executionStateIndex = executionStateKeys.findIndex(
+        (key) => key === this.executionState
+      );
+      if (executionStateIndex > -1) {
+        executionStateLabel = EXECUTION_STATES[executionStateIndex];
+
+        // - 'Incomplete' : executionState.notStarted && now > end datetime
+        if (executionStateIndex === 0 && this.item.cssClass === PAST_CSS_SUFFIX) {
+          executionStateLabel = INFERRED_EXECUTION_STATES.incomplete;
+        }
+        // - 'Ends' : executionState.inProgress && now > start datetime && now < end datetime
+        // - 'Running Long' : executionState.inProgress && now > end datetime
+        // - 'Overdue' : executionState.notStarted && start < now datetime
+        if (executionStateIndex === 1) {
+          if (this.item.cssClass === CURRENT_CSS_SUFFIX) {
+            executionStateLabel = INFERRED_EXECUTION_STATES.ends;
+          } else if (this.timestamp > this.item.end) {
+            executionStateLabel = INFERRED_EXECUTION_STATES.runningLong;
+          } else if (this.item.start < this.timestamp) {
+            executionStateLabel = INFERRED_EXECUTION_STATES.overdue;
+          }
+        }
+      }
+      let itemValue = {
+        title: this.item.name
+      };
+      this.itemProperties.forEach((itemProperty) => {
+        let value = this.item[itemProperty.key];
+        let formattedValue;
+        if (itemProperty.format) {
+          formattedValue = itemProperty.format(value, this.item, itemProperty.key, this.openmct, {
+            skipPrefix: true
+          });
+        }
+        itemValue[itemProperty.key] = formattedValue;
+
+        // - 'Starts' : for Activities with now > start datetime
+        // - 'Occurs' : for Events with now > start datetime and 0 duration
+        let label;
+        if (itemProperty.key === 'countdown') {
+          if (this.item.start < this.timestamp) {
+            if (this.item.start === this.item.end) {
+              label = INFERRED_EXECUTION_STATES.occurs;
+            } else {
+              label = INFERRED_EXECUTION_STATES.starts;
+            }
+          } else {
+            label = executionStateLabel;
+          }
+        }
+        itemValue.label = itemValue.label ?? label;
+      });
+
+      return itemValue;
+    },
+    showTimeHero() {
+      return !(
+        this.executionState === EXECUTION_STATES.completed ||
+        this.executionState === EXECUTION_STATES.aborted ||
+        this.executionState === EXECUTION_STATES.skipped
+      );
+    }
+  },
+  mounted() {
+    this.updateTimestamp = _.throttle(this.updateTimestamp, 1000);
+    this.setTimeContext();
+    this.timestamp = this.timeContext.now();
+  },
+  methods: {
+    setTimeContext() {
+      this.stopFollowingTimeContext();
+      this.timeContext = this.openmct.time.getContextForView(this.path);
+      this.followTimeContext();
+    },
+    followTimeContext() {
+      this.timeContext.on(TIME_CONTEXT_EVENTS.tick, this.updateTimestamp);
+    },
+    stopFollowingTimeContext() {
+      if (this.timeContext) {
+        this.timeContext.off(TIME_CONTEXT_EVENTS.tick, this.updateTimestamp);
+      }
+    },
+    updateTimestamp(time) {
+      this.timestamp = time;
+    }
+  }
+};
+</script>

src/plugins/timelist/TimelistComponent.vue

@@ -21,13 +21,50 @@
 -->
 
 <template>
-  <div ref="timelistHolder" class="c-timelist">
-    <list-view
-      :items="planActivities"
-      :header-items="headerItems"
-      :default-sort="defaultSort"
-      class="sticky"
-    />
+  <div ref="timelistHolder" :class="listTypeClass">
+    <template v-if="isExpanded">
+      <expanded-view-item
+        v-for="item in sortedItems"
+        :key="item.key"
+        :item="item"
+        :item-properties="itemProperties"
+        :execution-state="persistedActivityStates[item.id]"
+        @click.stop="setSelectionForActivity(item, $event.currentTarget)"
+      >
+      </expanded-view-item>
+    </template>
+    <div v-else class="c-table c-table--sortable c-list-view c-list-view--sticky-header sticky">
+      <table class="c-table__body js-table__body">
+        <thead class="c-table__header">
+          <tr>
+            <list-header
+              v-for="headerItem in headerItems"
+              :key="headerItem.property"
+              :direction="
+                defaultSort.property === headerItem.property
+                  ? defaultSort.defaultDirection
+                  : headerItem.defaultDirection
+              "
+              :is-sortable="headerItem.isSortable"
+              :aria-label="headerItem.name"
+              :title="headerItem.name"
+              :property="headerItem.property"
+              :current-sort="defaultSort.property"
+              @sort="sort"
+            />
+          </tr>
+        </thead>
+        <tbody>
+          <list-item
+            v-for="item in sortedItems"
+            :key="item.key"
+            :item="item"
+            :item-properties="itemProperties"
+            @click.stop="setSelectionForActivity(item, $event.currentTarget)"
+          />
+        </tbody>
+      </table>
+    </div>
   </div>
 </template>
 
@@ -36,17 +73,22 @@ import _ from 'lodash';
 import { v4 as uuid } from 'uuid';
 
 import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
-import ListView from '../../ui/components/List/ListView.vue';
+import ListHeader from '../../ui/components/List/ListHeader.vue';
+import ListItem from '../../ui/components/List/ListItem.vue';
 import { getPreciseDuration } from '../../utils/duration.js';
 import { getValidatedData, getValidatedGroups } from '../plan/util.js';
-import { SORT_ORDER_OPTIONS } from './constants.js';
+import {
+  CURRENT_CSS_SUFFIX,
+  FUTURE_CSS_SUFFIX,
+  PAST_CSS_SUFFIX,
+  SORT_ORDER_OPTIONS
+} from './constants.js';
+import ExpandedViewItem from './ExpandedViewItem.vue';
 
 const SCROLL_TIMEOUT = 10000;
 
 const TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
-const CURRENT_CSS_SUFFIX = '--is-current';
-const PAST_CSS_SUFFIX = '--is-past';
-const FUTURE_CSS_SUFFIX = '--is-future';
+
 const headerItems = [
   {
     defaultDirection: true,
@@ -72,17 +114,22 @@ const headerItems = [
   },
   {
     defaultDirection: false,
-    property: 'duration',
+    property: 'countdown',
     name: 'Time To/From',
-    format: function (value) {
+    format: function (value, object, key, openmct, options = {}) {
       let result;
       if (value < 0) {
-        result = `+${getPreciseDuration(Math.abs(value), {
+        const prefix = options.skipPrefix ? '' : '+';
+        result = `${prefix}${getPreciseDuration(Math.abs(value), {
           excludeMilliSeconds: true,
           useDayFormat: true
         })}`;
       } else if (value > 0) {
-        result = `-${getPreciseDuration(value, { excludeMilliSeconds: true, useDayFormat: true })}`;
+        const prefix = options.skipPrefix ? '' : '+';
+        result = `${prefix}${getPreciseDuration(value, {
+          excludeMilliSeconds: true,
+          useDayFormat: true
+        })}`;
       } else {
         result = 'Now';
       }
@@ -90,6 +137,14 @@ const headerItems = [
       return result;
     }
   },
+  {
+    defaultDirection: false,
+    property: 'duration',
+    name: 'Duration',
+    format: function (value, object, key, openmct) {
+      return `${getPreciseDuration(value, { excludeMilliSeconds: true, useDayFormat: true })}`;
+    }
+  },
   {
     defaultDirection: true,
     property: 'name',
@@ -104,7 +159,9 @@ const defaultSort = {
 
 export default {
   components: {
-    ListView
+    ExpandedViewItem,
+    ListHeader,
+    ListItem
   },
   inject: ['openmct', 'domainObject', 'path', 'composition'],
   data() {
@@ -114,9 +171,34 @@ export default {
       height: 0,
       planActivities: [],
       headerItems: headerItems,
-      defaultSort: defaultSort
+      defaultSort: defaultSort,
+      isExpanded: false,
+      persistedActivityStates: {}
     };
   },
+  computed: {
+    listTypeClass() {
+      if (this.isExpanded) {
+        return 'c-timelist c-timelist--large';
+      }
+      return 'c-timelist';
+    },
+    sortedItems() {
+      let sortedItems = _.sortBy(this.planActivities, this.defaultSort.property);
+      if (!this.defaultSort.defaultDirection) {
+        sortedItems = sortedItems.reverse();
+      }
+      return sortedItems;
+    },
+    itemProperties() {
+      return this.headerItems.map((headerItem) => {
+        return {
+          key: headerItem.property,
+          format: headerItem.format
+        };
+      });
+    }
+  },
   mounted() {
     this.isEditing = this.openmct.editor.isEditing();
     this.updateTimestamp = _.throttle(this.updateTimestamp, 1000);
@@ -125,6 +207,7 @@ export default {
     this.timestamp = this.timeContext.now();
 
     this.getPlanDataAndSetConfig(this.domainObject);
+    this.getActivityStates();
 
     this.unlisten = this.openmct.objects.observe(
       this.domainObject,
@@ -164,6 +247,14 @@ export default {
       this.unlistenConfig();
     }
 
+    if (this.stopObservingPlan) {
+      this.stopObservingPlan();
+    }
+
+    if (this.stopObservingActivityStatesObject) {
+      this.stopObservingActivityStatesObject();
+    }
+
     if (this.removeStatusListener) {
       this.removeStatusListener();
     }
@@ -203,20 +294,31 @@ export default {
         sourceMap: this.domainObject.sourceMap
       });
     },
+    async getActivityStates() {
+      this.activityStatesObject = await this.openmct.objects.get('activity-states');
+      this.setActivityStates(this.activityStatesObject);
+      this.stopObservingActivityStatesObject = this.openmct.objects.observe(
+        this.activityStatesObject,
+        '*',
+        this.setActivityStates
+      );
+    },
+    setActivityStates(activityStatesObject) {
+      this.persistedActivityStates = activityStatesObject.activities;
+    },
     getPlanDataAndSetConfig(mutatedObject) {
       this.getPlanData(mutatedObject);
       this.setViewFromConfig(mutatedObject.configuration);
     },
     setViewFromConfig(configuration) {
+      this.filterValue = configuration.filter;
       if (this.isEditing) {
-        this.filterValue = configuration.filter;
         this.hideAll = false;
-        this.listActivities();
       } else {
-        this.filterValue = configuration.filter;
         this.setSort();
-        this.listActivities();
+        this.isExpanded = configuration.isExpanded;
       }
+      this.listActivities();
     },
     updateTimestamp(timestamp) {
       //The clock never stops ticking
@@ -230,8 +332,8 @@ export default {
       }
     },
     addItem(domainObject) {
-      this.planObjects = [domainObject];
       this.resetPlanData();
+      this.planObjects = [domainObject];
       if (domainObject.type === 'plan') {
         this.getPlanDataAndSetConfig({
           ...this.domainObject,
@@ -239,15 +341,28 @@ export default {
           sourceMap: domainObject.sourceMap
         });
       }
+      //listen for changes to the plan
+      if (this.stopObservingPlan) {
+        this.stopObservingPlan();
+      }
+      this.stopObservingPlan = this.openmct.objects.observe(
+        this.planObjects[0],
+        '*',
+        this.handlePlanChange
+      );
     },
-    addToComposition(telemetryObject) {
+    handlePlanChange(planObject) {
+      this.getPlanData(planObject);
+      this.listActivities();
+    },
+    addToComposition(planObject) {
       if (this.planObjects.length > 0) {
-        this.confirmReplacePlan(telemetryObject);
+        this.confirmReplacePlan(planObject);
       } else {
-        this.addItem(telemetryObject);
+        this.addItem(planObject);
       }
     },
-    confirmReplacePlan(telemetryObject) {
+    confirmReplacePlan(planObject) {
       const dialog = this.openmct.overlays.dialog({
         iconClass: 'alert',
         message: 'This action will replace the current plan. Do you want to continue?',
@@ -258,22 +373,22 @@ export default {
             callback: () => {
               const oldTelemetryObject = this.planObjects[0];
               this.removeFromComposition(oldTelemetryObject);
-              this.addItem(telemetryObject);
+              this.addItem(planObject);
               dialog.dismiss();
             }
           },
           {
             label: 'Cancel',
             callback: () => {
-              this.removeFromComposition(telemetryObject);
+              this.removeFromComposition(planObject);
               dialog.dismiss();
             }
           }
         ]
       });
     },
-    removeFromComposition(telemetryObject) {
-      this.composition.remove(telemetryObject);
+    removeFromComposition(planObject) {
+      this.composition.remove(planObject);
     },
     removeItem() {
       this.planObjects = [];
@@ -379,11 +494,13 @@ export default {
         activity.key = uuid();
       }
 
+      activity.duration = activity.end - activity.start;
+
       if (activity.start < this.timestamp) {
         //if the activity start time has passed, display the time to the end of the activity
-        activity.duration = activity.end - this.timestamp;
+        activity.countdown = activity.end - this.timestamp;
       } else {
-        activity.duration = activity.start - this.timestamp;
+        activity.countdown = activity.start - this.timestamp;
       }
 
       return activity;
@@ -426,7 +543,7 @@ export default {
     },
     setScrollTop() {
       //The view isn't ready yet
-      if (!this.$el.parentElement) {
+      if (!this.$el.parentElement || this.isExpanded) {
         return;
       }
 
@@ -516,6 +633,40 @@ export default {
     setEditState(isEditing) {
       this.isEditing = isEditing;
       this.setViewFromConfig(this.domainObject.configuration);
+    },
+    sort(data) {
+      const property = data.property;
+      const direction = data.direction;
+
+      if (this.defaultSort.property === property) {
+        this.defaultSort.defaultDirection = !this.defaultSort.defaultDirection;
+      } else {
+        this.defaultSort.property = property;
+        this.defaultSort.defaultDirection = direction;
+      }
+    },
+    setSelectionForActivity(activity, element) {
+      const multiSelect = false;
+
+      this.openmct.selection.select(
+        [
+          {
+            element: element,
+            context: {
+              type: 'activity',
+              activity: activity
+            }
+          },
+          {
+            element: this.openmct.layout.$refs.browseObject.$el,
+            context: {
+              item: this.domainObject,
+              supportsMultiSelect: false
+            }
+          }
+        ],
+        multiSelect
+      );
     }
   }
 };

src/plugins/timelist/constants.js

@@ -22,3 +22,7 @@ export const SORT_ORDER_OPTIONS = [
 ];
 
 export const TIMELIST_TYPE = 'timelist';
+
+export const CURRENT_CSS_SUFFIX = '--is-current';
+export const PAST_CSS_SUFFIX = '--is-past';
+export const FUTURE_CSS_SUFFIX = '--is-future';

src/plugins/timelist/inspector/EventProperties.vue

@@ -22,8 +22,8 @@
 <template>
   <li class="c-inspect-properties__row">
     <div class="c-inspect-properties__label" title="Options for future events.">{{ label }}</div>
-    <div v-if="canEdit" class="c-inspect-properties__value">
-      <select v-model="index" @change="updateForm('index')">
+    <div class="c-inspect-properties__value">
+      <select v-if="canEdit" v-model="index" @change="updateForm('index')">
         <option
           v-for="(activityOption, activityKey) in activitiesOptions"
           :key="activityKey"
@@ -32,9 +32,7 @@
           {{ activityOption }}
         </option>
       </select>
-    </div>
-    <div v-else class="c-inspect-properties__value">
-      {{ activitiesOptions[index] }}
+      <span v-else>{{ activitiesOptions[index] }}</span>
     </div>
   </li>
 </template>

src/plugins/timelist/inspector/TimeListInspectorViewProvider.js

@@ -28,7 +28,7 @@ import TimelistPropertiesView from './TimelistPropertiesView.vue';
 export default function TimeListInspectorViewProvider(openmct) {
   return {
     key: 'timelist-inspector',
-    name: 'Timelist Inspector View',
+    name: 'View Properties',
     canView: function (selection) {
       if (selection.length === 0 || selection[0].length === 0) {
         return false;

src/plugins/timelist/inspector/TimelistPropertiesView.vue

@@ -30,11 +30,21 @@
             These settings don't affect the view while editing, but will be applied after editing is
             finished.
           </div>
+          <div class="c-inspect-properties__label" title="Display Style">Display Style</div>
+          <div class="c-inspect-properties__value">
+            <select v-if="canEdit" v-model="isExpanded" @change="updateExpandedView()">
+              <option :key="'expanded-view-option-enabled'" :value="true">Expanded</option>
+              <option :key="'expanded-view-option-disabled'" :value="false">Compact</option>
+            </select>
+            <span v-else>{{ isExpanded ? 'Expanded' : 'Compact' }}</span>
+          </div>
+        </li>
+        <li class="c-inspect-properties__row">
           <div class="c-inspect-properties__label" title="Sort order of the timelist.">
             Sort Order
           </div>
-          <div v-if="canEdit" class="c-inspect-properties__value">
-            <select v-model="sortOrderIndex" @change="updateSortOrder()">
+          <div class="c-inspect-properties__value">
+            <select v-if="canEdit" v-model="sortOrderIndex" @change="updateSortOrder()">
               <option
                 v-for="(sortOrderOption, index) in sortOrderOptions"
                 :key="index"
@@ -43,9 +53,7 @@
                 {{ sortOrderOption.label }}
               </option>
             </select>
-          </div>
-          <div v-else class="c-inspect-properties__value">
-            {{ sortOrderOptions[sortOrderIndex].label }}
+            <span v-else>{{ sortOrderOptions[sortOrderIndex].label }}</span>
           </div>
         </li>
         <event-properties
@@ -89,7 +97,8 @@ export default {
       sortOrderIndex: this.domainObject.configuration.sortOrderIndex,
       sortOrderOptions: SORT_ORDER_OPTIONS,
       eventTypes: EVENT_TYPES,
-      isEditing: this.openmct.editor.isEditing()
+      isEditing: this.openmct.editor.isEditing(),
+      isExpanded: this.domainObject.configuration.isExpanded || false
     };
   },
   computed: {
@@ -117,6 +126,9 @@ export default {
       const key = data.property;
       const value = data.value;
       this.updateProperty(key, value);
+    },
+    updateExpandedView() {
+      this.updateProperty('isExpanded', this.isExpanded);
     }
   }
 };

src/plugins/timelist/timelist.scss

@@ -19,41 +19,288 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-
 .c-timelist {
-  & .nowMarker.hasCurrent {
-    height: 2px;
-    position: absolute;
-    z-index: 10;
-    background: cyan;
-    width: 100%;
-  }
-
-  .c-list-item {
-    /* Time Lists */
-
-    td {
-      $p: $interiorMarginSm;
-      padding-top: $p;
-      padding-bottom: $p;
+    & .nowMarker.hasCurrent {
+        height: 2px;
+        position: absolute;
+        z-index: 10;
+        background: cyan;
+        width: 100%;
     }
 
-    &.--is-current {
-      background-color: $colorCurrentBg;
-      border-top: 1px solid $colorCurrentBorder !important;
-      color: $colorCurrentFg;
-    }
+    .c-list-item {
+        /* Time Lists */
 
-    &.--is-future {
-      background-color: $colorFutureBg;
-      border-top-color: $colorFutureBorder !important;
-      color: $colorFutureFg;
-    }
+        td {
+            $p: $interiorMarginSm;
+            padding-top: $p;
+            padding-bottom: $p;
+        }
 
-    &__value {
-      &.--duration {
-        width: 5%;
-      }
+        &.--is-current {
+            background-color: $colorCurrentBg;
+            border-top: 1px solid $colorCurrentBorder !important;
+            color: $colorCurrentFgEm;
+        }
+
+        &.--is-future {
+            background-color: $colorFutureBg;
+            border-top-color: $colorFutureBorder !important;
+            color: $colorFutureFgEm;
+        }
+
+        &.--is-in-progress {
+            background-color: $colorInProgressBg;
+        }
+
+        &__value {
+            &.--duration {
+                width: 5%;
+            }
+        }
+    }
+}
+
+/**************************************************** LARGE TIME LIST */
+@mixin styleTliEm($colorEm) {
+    // Styles emphasized elements within c-tli.
+    .c-tli {
+        &__duration,
+        &__title,
+        &__time-hero-time {
+            color: $colorEm;
+        }
+    }
+}
+@mixin showTliGraphic($wGraphic) {
+    .c-tli__graphic {
+        &__#{$wGraphic} {
+            display: block;
+        }
+    }
+}
+
+.c-timelist--large {
+    $textSm: 0.8em;
+    $textLg: 1.3em;
+
+    margin-right: $interiorMargin; // fend off from scrollbar
+
+    > * + * {
+        margin-top: $interiorMarginSm;
+    }
+
+    .c-tli {
+        // TODO: add styles for various activity statuses
+        $baseBg: $colorPastBg;
+        $baseFg: $colorPastFg;
+        $baseFgEm: $colorPastFgEm;
+
+        background: $baseBg;
+        color: $baseFg;
+        border-radius: $basicCr;
+        display: grid;
+        padding: $interiorMargin;
+        grid-template-columns: min-content 3fr 40px 1fr;
+        grid-column-gap: $interiorMargin;
+
+        @include styleTliEm($baseFgEm);
+
+        &__activity-color {
+            align-items: start;
+            display: flex;
+            padding-top: 1px;
+        }
+
+        &__activity-color-swatch {
+            $d: 16px;
+            border-radius: 50%;
+            box-shadow: rgba(black, 0.3) 0 0 2px 1px;
+            width: $d;
+            height: $d;
+        }
+
+        &__title-and-bounds {
+            > * + * {
+                margin-top: $interiorMargin;
+            }
+        }
+
+        &__bounds {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+
+            > * {
+                margin-right: $interiorMargin;
+                white-space: nowrap;
+            }
+
+            &.--has-duration {
+                .c-tli__start-time {
+                    display: flex;
+                    align-items: start;
+
+                    &:after {
+                        content: $glyph-icon-play;
+                        font-family: symbolsfont;
+                        font-size: 0.7em;
+                        display: block;
+                        margin-left: $interiorMargin;
+                        margin-top: 2px;
+                    }
+                }
+            }
+        }
+
+        &__title {
+            font-size: $textLg;
+        }
+
+        &__time-hero {
+            display: flex;
+            align-items: center;
+            justify-content: end;
+        }
+
+        &__time-hero-context-and-time {
+            align-items: center;
+            flex-wrap: wrap;
+            display: flex;
+            justify-content: end;
+            text-align: right;
+
+            > * + * {
+                margin-left: $interiorMargin;
+            }
+        }
+
+        &__time-hero-context {
+            font-size: $textSm;
+            text-transform: uppercase;
+        }
+
+        &__time-hero-time {
+            display: flex;
+            align-items: center;
+            font-size: $textLg;
+            white-space: nowrap;
+
+            &:before {
+                display: block;
+                font-family: symbolsfont;
+                font-size: 0.7em;
+                margin-right: 3px;
+            }
+
+            &.--is-countdown {
+                &:before {
+                    content: $glyph-icon-minus;
+                }
+            }
+
+            &.--is-countup {
+                &:before {
+                    content: $glyph-icon-plus;
+                }
+            }
+        }
+
+        &__graphic {
+            display: flex;
+            fill: $baseFg;
+            align-items: center;
+
+            svg {
+                > * {
+                    display: none;
+                }
+            }
+        }
+
+        &.--is-current {
+            background-color: $colorCurrentBg;
+            color: $colorCurrentFg;
+            @include styleTliEm($colorCurrentFgEm);
+        }
+
+        &.--is-future {
+            background-color: $colorFutureBg;
+            color: $colorFutureFg;
+            @include styleTliEm($colorFutureFgEm);
+        }
+
+        /************************************ ACTIVITY STATE STYLES */
+        /*
+        - 'In Progress' : itemState.inProgress
+        - 'Running Long' : itemState.inProgress && now > end datetime
+        - 'Overdue' : itemState.notStarted && now > start datetime
+        - 'Incomplete' : itemState.notStarted && now > end datetime
+        - 'Starts' : for Activities with now > start datetime
+        - 'Occurs' : for Events with now > start datetime
+        - 'Ends' : itemState.inProgress && now > start datetime && now < end datetime
+        - 'Completed', 'Aborted', 'Skipped' : itemState.<that state>
+        */
+        &.--is-not-started {
+
+        }
+
+        &.--is-in-progress {
+            @include showTliGraphic('pie');
+            background-color: $colorInProgressBg;
+            color: $colorInProgressFg;
+        }
+
+        &.--is-running-long {
+            @include showTliGraphic('alert-triangle');
+            background-color: $colorInProgressBg;
+            color: $colorInProgressFg;
+        }
+
+        &.--is-overdue,
+        &.--is-incomplete {
+            @include showTliGraphic('alert-triangle');
+
+        }
+
+        &.--is-completed {
+            @include showTliGraphic('check');
+        }
+
+        &.--is-aborted {
+            @include showTliGraphic('circle-slash');
+        }
+
+        &.--is-skipped {
+            @include showTliGraphic('skipped');
+        }
+
+        &__check {
+            // Overrides?
+        }
+
+        &__alert-triangle {
+            // Overrides?
+        }
+
+        &__circle-slash {
+            // Overrides?
+        }
+    }
+}
+
+.c-svg-progress {
+    &__bg {
+        fill: rgba(black, 0.2);
+    }
+
+    &__ticks {
+        fill: none;
+        stroke: $colorInProgressFg;
+        stroke-width: 6;
+    }
+
+    &__progress {
+        fill: $colorInProgressFgEm;
     }
-  }
 }

src/styles/_constants-espresso.scss

@@ -421,13 +421,22 @@ $colorGaugeLimitHigh: rgba($colorLimitRedBg, 0.4);
 $colorGaugeLimitLow: $colorGaugeLimitHigh;
 $transitionTimeGauge: 150ms; // CSS transition time used to smooth needle gauge and meter value transitions
 $marginGaugeMeterValue: 10%; // Margin between meter value bar and bounds edges
+
 // Time Strip and Lists
-$colorCurrentBg: $colorTimeRealtimeBg;
-$colorCurrentFg: $colorTimeRealtimeFg;
+$colorPastBg: #444;
+$colorPastFg: pushBack($colorBodyFg, 10%);
+$colorPastFgEm: $colorBodyFg;
+$colorCurrentBg: #666;
+$colorCurrentFg: $colorBodyFg;
+$colorCurrentFgEm: $colorBodyFgEm;
 $colorCurrentBorder: $colorBodyBg;
-$colorFutureBg: #1b5263;
+$colorFutureBg: $colorPastBg;
 $colorFutureFg: $colorCurrentFg;
+$colorFutureFgEm: $colorCurrentFgEm;
 $colorFutureBorder: $colorCurrentBorder;
+$colorInProgressBg: $colorTimeRealtimeBg;
+$colorInProgressFg: $colorTimeRealtimeFgSubtle;
+$colorInProgressFgEm: $colorTimeRealtimeFg;
 $colorGanttSelectedBorder: rgba(#fff, 0.3);
 
 // Tree

src/styles/_constants-maelstrom.scss

@@ -424,14 +424,23 @@ $colorGaugeLimitHigh: rgba($colorLimitRedBg, 0.4);
 $colorGaugeLimitLow: $colorGaugeLimitHigh;
 $transitionTimeGauge: 150ms; // CSS transition time used to smooth needle gauge and meter value transitions
 $marginGaugeMeterValue: 10%; // Margin between meter value bar and bounds edges
+
 // Time Strip and Lists
-$colorCurrentBg: $colorTimeRealtimeBg;
-$colorCurrentFg: $colorTimeRealtimeFg;
+$colorPastBg: #444;
+$colorPastFg: pushBack($colorBodyFg, 10%);
+$colorPastFgEm: $colorBodyFg;
+$colorCurrentBg: #666;
+$colorCurrentFg: $colorBodyFgEm;
+$colorCurrentFgEm: $colorBodyFgEm;
 $colorCurrentBorder: $colorBodyBg;
-$colorFutureBg: #1b5263;
+$colorFutureBg: $colorPastBg;
 $colorFutureFg: $colorCurrentFg;
+$colorFutureFgEm: $colorCurrentFgEm;
 $colorFutureBorder: $colorCurrentBorder;
-$colorGanttSelectedBorder: #fff;
+$colorInProgressBg: $colorTimeRealtimeBg;
+$colorInProgressFg: $colorTimeRealtimeFgSubtle;
+$colorInProgressFgEm: $colorTimeRealtimeFg;
+$colorGanttSelectedBorder: rgba(#fff, 0.3);
 
 // Tree
 $colorTreeBg: transparent;

src/styles/_constants-snow.scss

@@ -157,10 +157,10 @@ $colorTimeFixedBtnFg: $colorTimeFixedFgSubtle;
 $colorTimeFixedBtnBgMajor: #a09375;
 $colorTimeFixedBtnFgMajor: #fff;
 
-$colorTimeRealtime: #445890;
+$colorTimeRealtime: #6179d7;
 $colorTimeRealtimeBg: $colorTimeRealtime;
-$colorTimeRealtimeFg: #eee;
-$colorTimeRealtimeFgSubtle: #88b0ff;
+$colorTimeRealtimeFg: #fff;
+$colorTimeRealtimeFgSubtle: #eee;
 $colorTimeRealtimeHov: pullForward($colorTimeRealtime, 10%);
 $colorTimeRealtimeSubtle: pushBack($colorTimeRealtime, 20%);
 $colorTimeRealtimeBtnBg: pullForward($colorTimeRealtime, 5%);
@@ -421,13 +421,22 @@ $colorGaugeLimitHigh: rgba($colorLimitRedBg, 0.2);
 $colorGaugeLimitLow: $colorGaugeLimitHigh;
 $transitionTimeGauge: 150ms; // CSS transition time used to smooth needle gauge and meter value transitions
 $marginGaugeMeterValue: 10%; // Margin between meter value bar and bounds edges
+
 // Time Strip and Lists
-$colorCurrentBg: #5872bd;
-$colorCurrentFg: #eee;
-$colorCurrentBorder: #fff;
-$colorFutureBg: #c6f0ff;
-$colorFutureFg: $colorBodyFg;
+$colorPastBg: #f0f0f0;
+$colorPastFg: #999;
+$colorPastFgEm: #666;
+$colorCurrentBg: #ddd;
+$colorCurrentFg: #666;
+$colorCurrentFgEm: #000;
+$colorCurrentBorder: $colorBodyBg;
+$colorFutureBg: #eaeaea;
+$colorFutureFg: $colorCurrentFg;
+$colorFutureFgEm: $colorCurrentFgEm;
 $colorFutureBorder: $colorCurrentBorder;
+$colorInProgressBg: #b1e8ff;
+$colorInProgressFg: $colorCurrentFg;
+$colorInProgressFgEm: $colorCurrentFgEm;
 $colorGanttSelectedBorder: #fff;
 
 // Tree

src/ui/components/List/ListView.vue

@@ -43,6 +43,7 @@
           :key="item.key"
           :item="item"
           :item-properties="itemProperties"
+          @click.stop="itemSelected(item, $event)"
         />
       </tbody>
     </table>
@@ -86,6 +87,7 @@ export default {
       }
     }
   },
+  emits: ['item-selection-changed'],
   data() {
     let sortBy = this.defaultSort.property;
     let ascending = this.defaultSort.defaultDirection;
@@ -156,6 +158,9 @@ export default {
           })
         );
       }
+    },
+    itemSelected(item, event) {
+      this.$emit('item-selection-changed', item, event.currentTarget);
     }
   }
 };

src/ui/components/ObjectView.vue

@@ -33,6 +33,7 @@ import StyleRuleManager from '@/plugins/condition/StyleRuleManager';
 import { STYLE_CONSTANTS } from '@/plugins/condition/utils/constants';
 import stalenessMixin from '@/ui/mixins/staleness-mixin';
 
+import objectUtils from '../../api/objects/object-utils.js';
 import VisibilityObserver from '../../utils/visibility/VisibilityObserver.js';
 
 export default {
@@ -184,6 +185,7 @@ export default {
       this.triggerUnsubscribeFromStaleness(this.domainObject);
 
       this.openmct.objectViews.off('clearData', this.clearData);
+      this.openmct.objectViews.off('reload', this.reload);
       if (this.contextActionEvent) {
         this.openmct.objectViews.off(this.contextActionEvent, this.performContextAction);
       }
@@ -218,6 +220,13 @@ export default {
       this.clear();
       this.updateView(true);
     },
+    reload(domainObjectToReload) {
+      if (objectUtils.equals(domainObjectToReload, this.domainObject)) {
+        this.updateView(true);
+        this.initObjectStyles();
+        this.triggerStalenessSubscribe(this.domainObject);
+      }
+    },
     triggerStalenessSubscribe(object) {
       if (this.openmct.telemetry.isTelemetryObject(object)) {
         this.subscribeToStaleness(object);
@@ -316,6 +325,7 @@ export default {
         this.domainObject.identifier
       )}`;
       this.openmct.objectViews.on('clearData', this.clearData);
+      this.openmct.objectViews.on('reload', this.reload);
       this.openmct.objectViews.on(this.contextActionEvent, this.performContextAction);
 
       this.$nextTick(() => {