Merge branch 'master' of https://github.com/nasa/openmct into 4359-eliminate-wasted-header-space-in-plot-views

Bumps [karma-coverage](https://github.com/karma-runner/karma-coverage) from 2.1.1 to 2.2.0.
- [Release notes](https://github.com/karma-runner/karma-coverage/releases)
- [Changelog](https://github.com/karma-runner/karma-coverage/blob/master/CHANGELOG.md)
- [Commits](https://github.com/karma-runner/karma-coverage/compare/v2.1.1...v2.2.0)

---
updated-dependencies:
- dependency-name: karma-coverage
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.circleci/config.yml

@@ -2,7 +2,7 @@ version: 2.1
 executors:
   pw-focal-development:
     docker:
-      - image: mcr.microsoft.com/playwright:v1.19.1-focal
+      - image: mcr.microsoft.com/playwright:v1.21.1-focal
     environment:
       NODE_ENV: development # Needed to ensure 'dist' folder created and devDependencies installed
 parameters:
@@ -64,7 +64,7 @@ commands:
         - run: curl -Os https://uploader.codecov.io/latest/linux/codecov;chmod +x codecov;./codecov 
 orbs:
   node: circleci/node@4.9.0
-  browser-tools: circleci/browser-tools@1.2.3
+  browser-tools: circleci/browser-tools@1.3.0
 jobs:
   npm-audit:
     parameters:
@@ -101,7 +101,7 @@ jobs:
             equal: [ "FirefoxESR", <<parameters.browser>> ]
           steps:
             - browser-tools/install-firefox:
-                version: "91.4.0esr" #https://archive.mozilla.org/pub/firefox/releases/          
+                version: "91.7.1esr" #https://archive.mozilla.org/pub/firefox/releases/          
       - when:
           condition:
             equal: [ "FirefoxHeadless", <<parameters.browser>> ]
@@ -142,21 +142,22 @@ workflows:
   overall-circleci-commit-status: #These jobs run on every commit
     jobs:
       - lint:
+          name: node16-lint
           node-version: lts/gallium
-      - unit-test:
-          name: node12-chrome
-          node-version: lts/erbium
-          browser: ChromeHeadless
       - unit-test: 
           name: node14-chrome
           node-version: lts/fermium
           browser: ChromeHeadless
           post-steps:
-            - upload_code_covio  
+            - upload_code_covio
       - unit-test:
           name: node16-chrome
           node-version: lts/gallium
-          browser: ChromeHeadless             
+          browser: ChromeHeadless
+      - unit-test:
+          name: node18-chrome
+          node-version: "18"
+          browser: ChromeHeadless
       - e2e-test:
           name: e2e-ci
           node-version: lts/gallium
@@ -164,13 +165,9 @@ workflows:
   the-nightly: #These jobs do not run on PRs, but against master at night
     jobs:
       - unit-test:
-          name: node12-firefoxESR-nightly
-          node-version: lts/erbium
+          name: node16-firefoxESR-nightly
+          node-version: lts/gallium
           browser: FirefoxESR
-      - unit-test:
-          name: node12-chrome-nightly
-          node-version: lts/erbium
-          browser: ChromeHeadless
       - unit-test:
           name: node14-firefox-nightly
           node-version: lts/fermium
@@ -183,6 +180,10 @@ workflows:
           name: node16-chrome-nightly
           node-version: lts/gallium
           browser: ChromeHeadless
+      - unit-test:
+          name: node18-chrome
+          node-version: "18"
+          browser: ChromeHeadless
       - npm-audit:
           node-version: lts/gallium
       - e2e-test:

.github/workflows/codeql-analysis.yml

@@ -32,12 +32,12 @@ jobs:
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
+      uses: github/codeql-action/init@v2
       with:
         languages: javascript
 
     - name: Autobuild
-      uses: github/codeql-action/autobuild@v1
+      uses: github/codeql-action/autobuild@v2
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1
+      uses: github/codeql-action/analyze@v2

.github/workflows/e2e-pr.yml

@@ -30,11 +30,11 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: '16'
-      - run: npx playwright@1.19.2 install
+      - run: npx playwright@1.21.1 install
       - run: npm install
       - run: npm run test:e2e:full
       - name: Archive test results
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v3
         with:
           path: test-results
       - name: Test success

.github/workflows/e2e-visual.yml

@@ -17,7 +17,7 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: '16'
-      - run: npx playwright@1.19.2 install
+      - run: npx playwright@1.21.1 install
       - run: npm install
       - name: Run the e2e visual tests
         run: npm run test:e2e:visual

.github/workflows/lighthouse.yml

@@ -9,8 +9,6 @@ on:
   pull_request:
     types: 
       - labeled
-  schedule:
-    - cron: '28 21 * * 1-5'
 jobs:
   lighthouse-pr:
     if: ${{ github.event.label.name == 'pr:lighthouse' }}
@@ -20,10 +18,10 @@ jobs:
         uses: actions/checkout@v3
         with:
           ref: master #explicitly checkout master for baseline
-      - name: Install Node 14
+      - name: Install Node 16
         uses: actions/setup-node@v3
         with:
-          node-version: '14'
+          node-version: '16'
       - name: Cache node modules
         uses: actions/cache@v2
         env:
@@ -54,10 +52,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-      - name: Install Node 14
+      - name: Install Node 16
         uses: actions/setup-node@v3
         with:
-          node-version: '14'
+          node-version: '16'
       - name: Cache node modules
         uses: actions/cache@v2
         env:
@@ -83,9 +81,9 @@ jobs:
       - name: Install Node 14
         uses: actions/setup-node@v3
         with:
-          node-version: '14'
+          node-version: '16'
       - name: Cache node modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         env:
           cache-name: cache-node-modules
         with:

.github/workflows/pr-platform.yml

@@ -16,9 +16,9 @@ jobs:
           - macos-latest
           - windows-latest
         node_version:
-          - 12
           - 14
           - 16
+          - 18
         architecture:
           - x64
     name: Node ${{ matrix.node_version }} - ${{ matrix.architecture }} on ${{ matrix.os }}

app.js

@@ -64,7 +64,7 @@ app.use(require('webpack-dev-middleware')(
     compiler,
     {
         publicPath: '/dist',
-        logLevel: 'warn'
+        stats: 'errors-warnings'
     }
 ));
 

e2e/playwright-ci.config.js

@@ -6,9 +6,9 @@ const { devices } = require('@playwright/test');
 
 /** @type {import('@playwright/test').PlaywrightTestConfig} */
 const config = {
-    retries: 2,
+    retries: 1,
     testDir: 'tests',
-    timeout: 90 * 1000,
+    timeout: 60 * 1000,
     webServer: {
         command: 'npm run start',
         port: 8080,
@@ -28,12 +28,12 @@ const config = {
         {
             name: 'chrome',
             use: {
-                browserName: 'chromium',
-                ...devices['Desktop Chrome']
+                browserName: 'chromium'
             }
         },
         {
             name: 'MMOC',
+            grepInvert: /@snapshot/,
             use: {
                 browserName: 'chromium',
                 viewport: {

e2e/playwright-local.config.js

@@ -29,12 +29,12 @@ const config = {
         {
             name: 'chrome',
             use: {
-                browserName: 'chromium',
-                ...devices['Desktop Chrome']
+                browserName: 'chromium'
             }
         },
         {
             name: 'MMOC',
+            grepInvert: /@snapshot/,
             use: {
                 browserName: 'chromium',
                 viewport: {

e2e/tests/example/generator/SinewaveLimitProvider.e2e.spec.js

@@ -157,5 +157,10 @@ test.describe('Sine Wave Generator', () => {
                 y: 28
             }
         });
+
+        // Verify that where we click on canvas shows the number we clicked on
+        // Note that any number will do, we just care that a number exists
+        await expect(page.locator('.value-to-display-nearestValue')).toContainText(/[+-]?([0-9]*[.])?[0-9]+/);
+
     });
 });

e2e/tests/moveObjects.e2e.spec.js

@@ -27,16 +27,115 @@ This test suite is dedicated to tests which verify the basic operations surround
 const { test, expect } = require('@playwright/test');
 
 test.describe('Move item tests', () => {
-    test.fixme('Create a basic object and verify that it can be moved to another Folder', async ({ page }) => {
-        //Create and save Folder
-        //Create and save Domain Object
-        //Verify that the newly created domain object can be moved to Folder from Step 1.
-        //Verify that newly moved object appears in the correct point in Tree
-        //Verify that newly moved object appears correctly in Inspector panel
+    test('Create a basic object and verify that it can be moved to another folder', async ({ page }) => {
+        // Go to Open MCT
+        await page.goto('/');
+
+        // Create a new folder in the root my items folder
+        let folder1 = "Folder1";
+        await page.locator('button:has-text("Create")').click();
+        await page.locator('li.icon-folder').click();
+
+        await page.locator('text=Properties Title Notes >> input[type="text"]').click();
+        await page.locator('text=Properties Title Notes >> input[type="text"]').fill(folder1);
+        await Promise.all([
+            page.waitForNavigation(),
+            page.locator('text=OK').click(),
+            page.waitForSelector('.c-message-banner__message')
+        ]);
+        //Wait until Save Banner is gone
+        await page.locator('.c-message-banner__close-button').click();
+        await page.waitForSelector('.c-message-banner__message', { state: 'detached'});
+
+        // Create another folder with a new name at default location, which is currently inside Folder 1
+        let folder2 = "Folder2";
+        await page.locator('button:has-text("Create")').click();
+        await page.locator('li.icon-folder').click();
+        await page.locator('text=Properties Title Notes >> input[type="text"]').click();
+        await page.locator('text=Properties Title Notes >> input[type="text"]').fill(folder2);
+        await Promise.all([
+            page.waitForNavigation(),
+            page.locator('text=OK').click(),
+            page.waitForSelector('.c-message-banner__message')
+        ]);
+        //Wait until Save Banner is gone
+        await page.locator('.c-message-banner__close-button').click();
+        await page.waitForSelector('.c-message-banner__message', { state: 'detached'});
+
+        // Move Folder 2 from Folder 1 to My Items
+        await page.locator('text=Open MCT My Items >> span').nth(3).click();
+        await page.locator('.c-tree__scrollable div div:nth-child(2) .c-tree__item .c-tree__item__view-control').click();
+
+        await page.locator(`a:has-text("${folder2}")`).click({
+            button: 'right'
+        });
+        await page.locator('li.icon-move').click();
+        await page.locator('form[name="mctForm"] >> text=My Items').click();
+        await Promise.all([
+            page.waitForNavigation(),
+            page.locator('text=OK').click()
+        ]);
+
+        // Expect that Folder 2 is in My Items, the root folder
+        expect(page.locator(`text=My Items >> nth=0:has(text=${folder2})`)).toBeTruthy();
     });
-    test.fixme('Create a basic object and verify that it cannot be moved to object without Composition Provider', async ({ page }) => {
-        //Create and save Telemetry Object
-        //Create and save Domain Object
-        //Verify that the newly created domain object cannot be moved to Telemetry Object from step 1.
+    test('Create a basic object and verify that it cannot be moved to telemetry object without Composition Provider', async ({ page }) => {
+        // Go to Open MCT
+        await page.goto('/');
+
+        // Create Telemetry Table
+        let telemetryTable = 'Test Telemetry Table';
+        await page.locator('button:has-text("Create")').click();
+        await page.locator('li:has-text("Telemetry Table")').click();
+        await page.locator('text=Properties Title Notes >> input[type="text"]').click();
+        await page.locator('text=Properties Title Notes >> input[type="text"]').fill(telemetryTable);
+        await Promise.all([
+            page.waitForNavigation(),
+            page.locator('text=OK').click()
+        ]);
+
+        // Finish editing and save Telemetry Table
+        await page.locator('.c-button--menu.c-button--major.icon-save').click();
+        await page.locator('text=Save and Finish Editing').click();
+
+        // Create New Folder Basic Domain Object
+        let folder = 'Test Folder';
+        await page.locator('button:has-text("Create")').click();
+        await page.locator('li:has-text("Folder")').click();
+        await page.locator('text=Properties Title Notes >> input[type="text"]').click();
+        await page.locator('text=Properties Title Notes >> input[type="text"]').fill(folder);
+
+        // See if it's possible to put the folder in the Telemetry object during creation (Soft Assert)
+        await page.locator(`form[name="mctForm"] >> text=${telemetryTable}`).click();
+        let okButton = await page.locator('button.c-button.c-button--major:has-text("OK")');
+        let okButtonStateDisabled = await okButton.isDisabled();
+        expect.soft(okButtonStateDisabled).toBeTruthy();
+
+        // Continue test regardless of assertion and create it in My Items
+        await page.locator('form[name="mctForm"] >> text=My Items').click();
+        await Promise.all([
+            page.waitForNavigation(),
+            page.locator('text=OK').click()
+        ]);
+
+        // Open My Items
+        await page.locator('text=Open MCT My Items >> span').nth(3).click();
+
+        // Select Folder Object and select Move from context menu
+        await Promise.all([
+            page.waitForNavigation(),
+            page.locator(`a:has-text("${folder}")`).click()
+        ]);
+        await page.locator('.c-tree__item.is-navigated-object .c-tree__item__label .c-tree__item__type-icon').click({
+            button: 'right'
+        });
+        await page.locator('li.icon-move').click();
+
+        // See if it's possible to put the folder in the Telemetry object after creation
+        await page.locator('text=Location Open MCT My Items >> span').nth(3).click();
+        await page.locator(`form[name="mctForm"] >> text=${telemetryTable}`).click();
+        let okButton2 = await page.locator('button.c-button.c-button--major:has-text("OK")');
+        let okButtonStateDisabled2 = await okButton2.isDisabled();
+        expect(okButtonStateDisabled2).toBeTruthy();
     });
 });

e2e/tests/plugins/clock/Clock.e2e.spec.js

@@ -0,0 +1,66 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2022, 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.
+ *****************************************************************************/
+
+/*
+This test suite is dedicated to tests which verify the basic operations surrounding Clock.
+*/
+
+const { test, expect } = require('@playwright/test');
+
+test.describe('Clock Generator', () => {
+
+    test('Timezone dropdown will collapse when clicked outside or on dropdown icon again', async ({ page }) => {
+        test.info().annotations.push({
+            type: 'issue',
+            description: 'https://github.com/nasa/openmct/issues/4878'
+        });
+        //Go to baseURL
+        await page.goto('/', { waitUntil: 'networkidle' });
+
+        //Click the Create button
+        await page.click('button:has-text("Create")');
+
+        // Click Clock
+        await page.click('text=Clock');
+
+        // Click .icon-arrow-down
+        await page.locator('.icon-arrow-down').click();
+        //verify if the autocomplete dropdown is visible
+        await expect(page.locator(".optionPreSelected")).toBeVisible();
+        // Click .icon-arrow-down
+        await page.locator('.icon-arrow-down').click();
+
+        // Verify clicking on the autocomplete arrow collapses the dropdown
+        await expect(page.locator(".optionPreSelected")).not.toBeVisible();
+
+        // Click timezone input to open dropdown
+        await page.locator('.autocompleteInput').click();
+        //verify if the autocomplete dropdown is visible
+        await expect(page.locator(".optionPreSelected")).toBeVisible();
+
+        // Verify clicking outside the autocomplete dropdown collapses it
+        await page.locator('text=Timezone').click();
+        // Verify clicking on the autocomplete arrow collapses the dropdown
+        await expect(page.locator(".optionPreSelected")).not.toBeVisible();
+
+    });
+});

e2e/tests/plugins/condition/condition.e2e.spec.js

@@ -21,45 +21,163 @@
  *****************************************************************************/
 
 /*
-This test suite is dedicated to tests which verify the basic operations surrounding conditionSets.
+This test suite is dedicated to tests which verify the basic operations surrounding conditionSets. Note: this
+suite is sharing state between tests which is considered an anti-pattern. Implimenting in this way to
+demonstrate some playwright for test developers. This pattern should not be re-used in other CRUD suites.
 */
 
 const { test, expect } = require('@playwright/test');
 
-test.describe('Condition Set Operations', () => {
-    test('Create new button `condition set` creates new condition object', async ({ page }) => {
-        //Go to baseURL
-        await page.goto('/', { waitUntil: 'networkidle' });
+let conditionSetUrl;
+let getConditionSetIdentifierFromUrl;
 
-        //Click the Create button
-        await page.click('button:has-text("Create")');
+test('Create new Condition Set object and store @localStorage', async ({ page, context }) => {
+    //Go to baseURL
+    await page.goto('/', { waitUntil: 'networkidle' });
 
-        // Click text=Condition Set
-        await page.click('text=Condition Set');
+    //Click the Create button
+    await page.click('button:has-text("Create")');
 
-        // Click text=OK
+    // Click text=Condition Set
+    await page.click('text=Condition Set');
+
+    // Click text=OK
+    await Promise.all([
+        page.waitForNavigation(),
+        page.click('text=OK')
+    ]);
+
+    await expect(page.locator('.l-browse-bar__object-name')).toContainText('Unnamed Condition Set');
+    //Save localStorage for future test execution
+    await context.storageState({ path: './e2e/tests/recycled_storage.json' });
+
+    //Set object identifier from url
+    conditionSetUrl = await page.url();
+    console.log('conditionSetUrl ' + conditionSetUrl);
+
+    getConditionSetIdentifierFromUrl = await conditionSetUrl.split('/').pop().split('?')[0];
+    console.log('getConditionSetIdentifierFromUrl ' + getConditionSetIdentifierFromUrl);
+
+});
+
+test.describe.serial('Condition Set CRUD Operations on @localStorage', () => {
+    //Load localStorage for subsequent tests
+    test.use({ storageState: './e2e/tests/recycled_storage.json' });
+
+    //Begin suite of tests again localStorage
+    test('Condition set object properties persist in main view and inspector', async ({ page }) => {
+        //Navigate to baseURL with injected localStorage
+        await page.goto(conditionSetUrl, { waitUntil: 'networkidle' });
+
+        //Assertions on loaded Condition Set in main view
+        await expect.soft(page.locator('.l-browse-bar__object-name')).toContainText('Unnamed Condition Set');
+
+        //Assertions on loaded Condition Set in Inspector
+        await expect.soft(page.locator('_vue=item.name=Unnamed Condition Set')).toBeTruthy;
+
+        //Reload Page
         await Promise.all([
-            page.waitForNavigation(/*{ url: 'http://localhost:8080/#/browse/mine/dab945d4-5a84-480e-8180-222b4aa730fa?tc.mode=fixed&tc.startBound=1639696164435&tc.endBound=1639697964435&tc.timeSystem=utc&view=conditionSet.view' }*/),
-            page.click('text=OK')
+            page.reload(),
+            page.waitForLoadState('networkidle')
         ]);
 
-        await expect(page.locator('.l-browse-bar__object-name')).toContainText('Unnamed Condition Set');
+        //Re-verify after reload
+        await expect.soft(page.locator('.l-browse-bar__object-name')).toContainText('Unnamed Condition Set');
+        //Assertions on loaded Condition Set in Inspector
+        await expect.soft(page.locator('_vue=item.name=Unnamed Condition Set')).toBeTruthy;
+
     });
-    test.fixme('condition set object properties exist', async ({ page }) => {
-        //Go to object created in step one
-        //Verify the Condition Set properties persist on Save
-        //Verify the Condition Set properties persist on page.reload()
-    });
-    test.fixme('condition set object can be modified', async ({ page }) => {
-        //Go to object created in step one
+    test('condition set object can be modified on @localStorage', async ({ page }) => {
+        await page.goto(conditionSetUrl, { waitUntil: 'networkidle' });
+
+        //Assertions on loaded Condition Set in main view
+        await expect.soft(page.locator('.l-browse-bar__object-name')).toContainText('Unnamed Condition Set');
+
         //Update the Condition Set properties
-        //Verify the Condition Set properties persist on Save
-        //Verify the Condition Set properties persist on page.reload()
+        // Click Edit Button
+        await page.locator('text=Conditions View Snapshot >> button').nth(3).click();
+
+        //Edit Condition Set Name from main view
+        await page.locator('text=Unnamed Condition Set').first().fill('Renamed Condition Set');
+        await page.locator('text=Renamed Condition Set').first().press('Enter');
+        // Click Save Button
+        await page.locator('text=Snapshot Save and Finish Editing Save and Continue Editing >> button').nth(1).click();
+        // Click Save and Finish Editing Option
+        await page.locator('text=Save and Finish Editing').click();
+
+        //Verify Main section reflects updated Name Property
+        await expect.soft(page.locator('.l-browse-bar__object-name')).toContainText('Renamed Condition Set');
+
+        // Verify Inspector properties
+        // Verify Inspector has updated Name property
+        await expect.soft(page.locator('text=Renamed Condition Set').nth(1)).toBeTruthy();
+        // Verify Inspector Details has updated Name property
+        await expect.soft(page.locator('text=Renamed Condition Set').nth(2)).toBeTruthy();
+
+        // Verify Tree reflects updated Name proprety
+        // Expand Tree
+        await page.locator('text=Open MCT My Items >> span >> nth=3').click();
+        // Verify Condition Set Object is renamed in Tree
+        await expect(page.locator('a:has-text("Renamed Condition Set")')).toBeTruthy();
+        // Verify Search Tree reflects renamed Name property
+        await page.locator('input[type="search"]').fill('Renamed');
+        await expect(page.locator('a:has-text("Renamed Condition Set")')).toBeTruthy();
+
+        //Reload Page
+        await Promise.all([
+            page.reload(),
+            page.waitForLoadState('networkidle')
+        ]);
+
+        //Verify Main section reflects updated Name Property
+        await expect.soft(page.locator('.l-browse-bar__object-name')).toContainText('Renamed Condition Set');
+
+        // Verify Inspector properties
+        // Verify Inspector has updated Name property
+        await expect.soft(page.locator('text=Renamed Condition Set').nth(1)).toBeTruthy();
+        // Verify Inspector Details has updated Name property
+        await expect.soft(page.locator('text=Renamed Condition Set').nth(2)).toBeTruthy();
+
+        // Verify Tree reflects updated Name proprety
+        // Expand Tree
+        await page.locator('text=Open MCT My Items >> span >> nth=3').click();
+        // Verify Condition Set Object is renamed in Tree
+        await expect(page.locator('a:has-text("Renamed Condition Set")')).toBeTruthy();
+        // Verify Search Tree reflects renamed Name property
+        await page.locator('input[type="search"]').fill('Renamed');
+        await expect(page.locator('a:has-text("Renamed Condition Set")')).toBeTruthy();
     });
-    test.fixme('condition set object can be deleted', async ({ page }) => {
-        //Go to object created in step one
-        //Verify that Condition Set object can be deleted
-        //Verify the Condition Set object does not exist in Tree
-        //Verify the Condition Set object does not exist with direct navigation to object's URL
+    test('condition set object can be deleted by Search Tree Actions menu on @localStorage', async ({ page }) => {
+        //Navigate to baseURL
+        await page.goto('/', { waitUntil: 'networkidle' });
+
+        //Expect Unnamed Condition Set to be visible in Main View
+        await expect(page.locator('a:has-text("Unnamed Condition Set Condition Set")')).toBeVisible();
+
+        // Search for Unnamed Condition Set
+        await page.locator('input[type="search"]').fill('Unnamed Condition Set');
+        // Right Click to Open Actions Menu
+        await page.locator('a:has-text("Unnamed Condition Set")').click({
+            button: 'right'
+        });
+        // Click Remove Action
+        await page.locator('text=Remove').click();
+
+        await page.locator('text=OK').click();
+
+        //Expect Unnamed Condition Set to be removed in Main View
+        await expect(page.locator('a:has-text("Unnamed Condition Set Condition Set")')).not.toBeVisible();
+
+        await page.locator('.c-search__clear-input').click();
+        // Search for Unnamed Condition Set
+        await page.locator('input[type="search"]').fill('Unnamed Condition Set');
+        // Expect Unnamed Condition Set to be removed
+        await expect(page.locator('a:has-text("Unnamed Condition Set")')).not.toBeVisible();
+
+        //Feature?
+        //Domain Object is still available by direct URL after delete
+        await page.goto(conditionSetUrl, { waitUntil: 'networkidle' });
+        await expect(page.locator('.l-browse-bar__object-name')).toContainText('Unnamed Condition Set');
+
     });
 });

e2e/tests/plugins/imagery/exampleImagery.e2e.spec.js

@@ -24,13 +24,14 @@
 This test suite is dedicated to tests which verify the basic operations surrounding imagery,
 but only assume that example imagery is present.
 */
+/* globals process */
 
 const { test, expect } = require('@playwright/test');
 
 test.describe('Example Imagery', () => {
 
     test.beforeEach(async ({ page }) => {
-        page.on('console', msg => console.log(msg.text()))
+        page.on('console', msg => console.log(msg.text()));
         //Go to baseURL
         await page.goto('/', { waitUntil: 'networkidle' });
 
@@ -42,10 +43,13 @@ test.describe('Example Imagery', () => {
 
         // Click text=OK
         await Promise.all([
-            page.waitForNavigation(/*{ url: 'http://localhost:8080/#/browse/mine/dab945d4-5a84-480e-8180-222b4aa730fa?tc.mode=fixed&tc.startBound=1639696164435&tc.endBound=1639697964435&tc.timeSystem=utc&view=conditionSet.view' }*/),
-            page.click('text=OK')
+            page.waitForNavigation({waitUntil: 'networkidle'}),
+            page.click('text=OK'),
+            //Wait for Save Banner to appear
+            page.waitForSelector('.c-message-banner__message')
         ]);
-
+        //Wait until Save Banner is gone
+        await page.waitForSelector('.c-message-banner__message', { state: 'detached'});
         await expect(page.locator('.l-browse-bar__object-name')).toContainText('Unnamed Example Imagery');
     });
 
@@ -77,9 +81,11 @@ test.describe('Example Imagery', () => {
 
     test('Can use alt+drag to move around image once zoomed in', async ({ page }) => {
         const deltaYStep = 100; //equivalent to 1x zoom
+        const panHotkey = process.platform === 'linux' ? ['Control', 'Alt'] : ['Alt'];
 
         const bgImageLocator = await page.locator(backgroundImageSelector);
         await bgImageLocator.hover();
+
         // zoom in
         await page.mouse.wheel(0, deltaYStep * 2);
         await bgImageLocator.hover();
@@ -91,40 +97,49 @@ test.describe('Example Imagery', () => {
         // center the mouse pointer
         await page.mouse.move(imageCenterX, imageCenterY);
 
+        //Get Diagnostic info about process environment
+        console.log('process.platform is ' + process.platform);
+        const getUA = await page.evaluate(() => navigator.userAgent);
+        console.log('navigator.userAgent ' + getUA);
+        // Pan Imagery Hints
+        const expectedAltText = process.platform === 'linux' ? 'Ctrl+Alt drag to pan' : 'Alt drag to pan';
+        const imageryHintsText = await page.locator('.c-imagery__hints').innerText();
+        expect(expectedAltText).toEqual(imageryHintsText);
+
         // pan right
-        await page.keyboard.down('Alt');
+        await Promise.all(panHotkey.map(x => page.keyboard.down(x)));
         await page.mouse.down();
         await page.mouse.move(imageCenterX - 200, imageCenterY, 10);
         await page.mouse.up();
-        await page.keyboard.up('Alt');
+        await Promise.all(panHotkey.map(x => page.keyboard.up(x)));
         const afterRightPanBoundingBox = await bgImageLocator.boundingBox();
         expect(zoomedBoundingBox.x).toBeGreaterThan(afterRightPanBoundingBox.x);
 
         // pan left
-        await page.keyboard.down('Alt');
+        await Promise.all(panHotkey.map(x => page.keyboard.down(x)));
         await page.mouse.down();
         await page.mouse.move(imageCenterX, imageCenterY, 10);
         await page.mouse.up();
-        await page.keyboard.up('Alt');
+        await Promise.all(panHotkey.map(x => page.keyboard.up(x)));
         const afterLeftPanBoundingBox = await bgImageLocator.boundingBox();
         expect(afterRightPanBoundingBox.x).toBeLessThan(afterLeftPanBoundingBox.x);
 
         // pan up
         await page.mouse.move(imageCenterX, imageCenterY);
-        await page.keyboard.down('Alt');
+        await Promise.all(panHotkey.map(x => page.keyboard.down(x)));
         await page.mouse.down();
         await page.mouse.move(imageCenterX, imageCenterY + 200, 10);
         await page.mouse.up();
-        await page.keyboard.up('Alt');
+        await Promise.all(panHotkey.map(x => page.keyboard.up(x)));
         const afterUpPanBoundingBox = await bgImageLocator.boundingBox();
         expect(afterUpPanBoundingBox.y).toBeGreaterThan(afterLeftPanBoundingBox.y);
 
         // pan down
-        await page.keyboard.down('Alt');
+        await Promise.all(panHotkey.map(x => page.keyboard.down(x)));
         await page.mouse.down();
         await page.mouse.move(imageCenterX, imageCenterY - 200, 10);
         await page.mouse.up();
-        await page.keyboard.up('Alt');
+        await Promise.all(panHotkey.map(x => page.keyboard.up(x)));
         const afterDownPanBoundingBox = await bgImageLocator.boundingBox();
         expect(afterDownPanBoundingBox.y).toBeLessThan(afterUpPanBoundingBox.y);
 
@@ -156,62 +171,68 @@ test.describe('Example Imagery', () => {
 
     test('Can use the reset button to reset the image', async ({ page }) => {
         const bgImageLocator = await page.locator(backgroundImageSelector);
+        // wait for zoom animation to finish
         await bgImageLocator.hover();
+
         const zoomInBtn = await page.locator('.t-btn-zoom-in');
         const zoomResetBtn = await page.locator('.t-btn-zoom-reset');
         const initialBoundingBox = await bgImageLocator.boundingBox();
 
         await zoomInBtn.click();
+        // wait for zoom animation to finish
+        await bgImageLocator.hover();
         await zoomInBtn.click();
         // wait for zoom animation to finish
         await bgImageLocator.hover();
+
         const zoomedInBoundingBox = await bgImageLocator.boundingBox();
-        expect(zoomedInBoundingBox.height).toBeGreaterThan(initialBoundingBox.height);
-        expect(zoomedInBoundingBox.width).toBeGreaterThan(initialBoundingBox.width);
+        expect.soft(zoomedInBoundingBox.height).toBeGreaterThan(initialBoundingBox.height);
+        expect.soft(zoomedInBoundingBox.width).toBeGreaterThan(initialBoundingBox.width);
 
         await zoomResetBtn.click();
+        // wait for zoom animation to finish
         await bgImageLocator.hover();
 
         const resetBoundingBox = await bgImageLocator.boundingBox();
-        expect(resetBoundingBox.height).toBeLessThan(zoomedInBoundingBox.height);
-        expect(resetBoundingBox.width).toBeLessThan(zoomedInBoundingBox.width);
+        expect.soft(resetBoundingBox.height).toBeLessThan(zoomedInBoundingBox.height);
+        expect.soft(resetBoundingBox.width).toBeLessThan(zoomedInBoundingBox.width);
 
-        expect(resetBoundingBox.height).toEqual(initialBoundingBox.height);
+        expect.soft(resetBoundingBox.height).toEqual(initialBoundingBox.height);
         expect(resetBoundingBox.width).toEqual(initialBoundingBox.width);
     });
 
-    //test('Can use Mouse Wheel to zoom in and out of previous image');
-    //test('Can zoom into the latest image and the real-time/fixed-time imagery will pause');
-    //test.skip('Can zoom into a previous image from thumbstrip in real-time or fixed-time');
-    //test.skip('Clicking on the left arrow should pause the imagery and go to previous image');
-    //test.skip('If the imagery view is in pause mode, it should not be updated when new images come in');
-    //test.skip('If the imagery view is not in pause mode, it should be updated when new images come in');
+    //test.fixme('Can use Mouse Wheel to zoom in and out of previous image');
+    //test.fixme('Can zoom into the latest image and the real-time/fixed-time imagery will pause');
+    //test.fixme('Can zoom into a previous image from thumbstrip in real-time or fixed-time');
+    //test.fixme('Clicking on the left arrow should pause the imagery and go to previous image');
+    //test.fixme('If the imagery view is in pause mode, it should not be updated when new images come in');
+    //test.fixme('If the imagery view is not in pause mode, it should be updated when new images come in');
 });
 
 test.describe('Example Imagery in Display layout', () => {
-    test.skip('Can use Mouse Wheel to zoom in and out of previous image');
-    test.skip('Can use alt+drag to move around image once zoomed in');
-    test.skip('Can zoom into the latest image and the real-time/fixed-time imagery will pause');
-    test.skip('Clicking on the left arrow should pause the imagery and go to previous image');
-    test.skip('If the imagery view is in pause mode, it should not be updated when new images come in');
-    test.skip('If the imagery view is not in pause mode, it should be updated when new images come in');
+    test.fixme('Can use Mouse Wheel to zoom in and out of previous image');
+    test.fixme('Can use alt+drag to move around image once zoomed in');
+    test.fixme('Can zoom into the latest image and the real-time/fixed-time imagery will pause');
+    test.fixme('Clicking on the left arrow should pause the imagery and go to previous image');
+    test.fixme('If the imagery view is in pause mode, it should not be updated when new images come in');
+    test.fixme('If the imagery view is not in pause mode, it should be updated when new images come in');
 });
 
 test.describe('Example Imagery in Flexible layout', () => {
-    test.skip('Can use Mouse Wheel to zoom in and out of previous image');
-    test.skip('Can use alt+drag to move around image once zoomed in');
-    test.skip('Can zoom into the latest image and the real-time/fixed-time imagery will pause');
-    test.skip('Clicking on the left arrow should pause the imagery and go to previous image');
-    test.skip('If the imagery view is in pause mode, it should not be updated when new images come in');
-    test.skip('If the imagery view is not in pause mode, it should be updated when new images come in');
+    test.fixme('Can use Mouse Wheel to zoom in and out of previous image');
+    test.fixme('Can use alt+drag to move around image once zoomed in');
+    test.fixme('Can zoom into the latest image and the real-time/fixed-time imagery will pause');
+    test.fixme('Clicking on the left arrow should pause the imagery and go to previous image');
+    test.fixme('If the imagery view is in pause mode, it should not be updated when new images come in');
+    test.fixme('If the imagery view is not in pause mode, it should be updated when new images come in');
 });
 
 test.describe('Example Imagery in Tabs view', () => {
-    test.skip('Can use Mouse Wheel to zoom in and out of previous image');
-    test.skip('Can use alt+drag to move around image once zoomed in');
-    test.skip('Can zoom into the latest image and the real-time/fixed-time imagery will pause');
-    test.skip('Can zoom into a previous image from thumbstrip in real-time or fixed-time');
-    test.skip('Clicking on the left arrow should pause the imagery and go to previous image');
-    test.skip('If the imagery view is in pause mode, it should not be updated when new images come in');
-    test.skip('If the imagery view is not in pause mode, it should be updated when new images come in');
+    test.fixme('Can use Mouse Wheel to zoom in and out of previous image');
+    test.fixme('Can use alt+drag to move around image once zoomed in');
+    test.fixme('Can zoom into the latest image and the real-time/fixed-time imagery will pause');
+    test.fixme('Can zoom into a previous image from thumbstrip in real-time or fixed-time');
+    test.fixme('Clicking on the left arrow should pause the imagery and go to previous image');
+    test.fixme('If the imagery view is in pause mode, it should not be updated when new images come in');
+    test.fixme('If the imagery view is not in pause mode, it should be updated when new images come in');
 });

e2e/tests/plugins/plot/autoscale.e2e.spec.js

@@ -0,0 +1,194 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2022, 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.
+ *****************************************************************************/
+
+/*
+Testsuite for plot autoscale.
+*/
+
+const { test: _test, expect } = require('@playwright/test');
+
+// create a new `test` API that will not append platform details to snapshot
+// file names, only for the tests in this file, so that the same snapshots will
+// be used for all platforms.
+const test = _test.extend({
+    _autoSnapshotSuffix: [
+        async ({}, use, testInfo) => {
+            testInfo.snapshotSuffix = '';
+            await use();
+        },
+        { auto: true }
+    ]
+});
+
+test.use({
+    viewport: {
+        width: 1280,
+        height: 720
+    }
+});
+
+test.describe('ExportAsJSON', () => {
+    test.slow('User can set autoscale with a valid range @snapshot', async ({ page }) => {
+        await page.goto('/', { waitUntil: 'networkidle' });
+
+        await setTimeRange(page);
+
+        await createSinewaveOverlayPlot(page);
+
+        await testYTicks(page, ['-1.00', '-0.50', '0.00', '0.50', '1.00']);
+
+        await turnOffAutoscale(page);
+
+        const canvas = page.locator('canvas').nth(1);
+
+        // Make sure that after turning off autoscale, the user selected range values start at the same values the plot had prior.
+        await Promise.all([
+            testYTicks(page, ['-1.00', '-0.50', '0.00', '0.50', '1.00']),
+            new Promise(r => setTimeout(r, 100))
+                .then(() => canvas.screenshot())
+                .then(shot => expect(shot).toMatchSnapshot('autoscale-canvas-prepan.png', { maxDiffPixels: 40 }))
+        ]);
+
+        await page.keyboard.down('Alt');
+
+        await canvas.dragTo(canvas, {
+            sourcePosition: {
+                x: 200,
+                y: 200
+            },
+            targetPosition: {
+                x: 400,
+                y: 400
+            }
+        });
+
+        await page.keyboard.up('Alt');
+
+        // Ensure the drag worked.
+        await Promise.all([
+            testYTicks(page, ['0.00', '0.50', '1.00', '1.50', '2.00']),
+            new Promise(r => setTimeout(r, 100))
+                .then(() => canvas.screenshot())
+                .then(shot => expect(shot).toMatchSnapshot('autoscale-canvas-panned.png', { maxDiffPixels: 40 }))
+        ]);
+    });
+});
+
+/**
+ * @param {import('@playwright/test').Page} page
+ * @param {string} start
+ * @param {string} end
+ */
+async function setTimeRange(page, start = '2022-03-29 22:00:00.000Z', end = '2022-03-29 22:00:30.000Z') {
+    // Set a specific time range for consistency, otherwise it will change
+    // on every test to a range based on the current time.
+
+    const timeInputs = page.locator('input.c-input--datetime');
+    await timeInputs.first().click();
+    await timeInputs.first().fill(start);
+
+    await timeInputs.nth(1).click();
+    await timeInputs.nth(1).fill(end);
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function createSinewaveOverlayPlot(page) {
+    // click create button
+    await page.locator('button:has-text("Create")').click();
+
+    // add overlay plot with defaults
+    await page.locator('li:has-text("Overlay Plot")').click();
+    await Promise.all([
+        page.waitForNavigation(),
+        page.locator('text=OK').click(),
+        //Wait for Save Banner to appear1
+        page.waitForSelector('.c-message-banner__message')
+    ]);
+    //Wait until Save Banner is gone
+    await page.locator('.c-message-banner__close-button').click();
+    await page.waitForSelector('.c-message-banner__message', { state: 'detached'});
+
+    // save (exit edit mode)
+    await page.locator('text=Snapshot Save and Finish Editing Save and Continue Editing >> button').nth(1).click();
+    await page.locator('text=Save and Finish Editing').click();
+
+    // click create button
+    await page.locator('button:has-text("Create")').click();
+
+    // add sine wave generator with defaults
+    await page.locator('li:has-text("Sine Wave Generator")').click();
+    await Promise.all([
+        page.waitForNavigation(),
+        page.locator('text=OK').click(),
+        //Wait for Save Banner to appear1
+        page.waitForSelector('.c-message-banner__message')
+    ]);
+    //Wait until Save Banner is gone
+    await page.locator('.c-message-banner__close-button').click();
+    await page.waitForSelector('.c-message-banner__message', { state: 'detached'});
+
+    // focus the overlay plot
+    await page.locator('text=Open MCT My Items >> span').nth(3).click();
+    await Promise.all([
+        page.waitForNavigation(),
+        page.locator('text=Unnamed Overlay Plot').first().click()
+    ]);
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function turnOffAutoscale(page) {
+    // enter edit mode
+    await page.locator('text=Unnamed Overlay Plot Snapshot >> button').nth(3).click();
+
+    // uncheck autoscale
+    await page.locator('text=Y Axis Label Log mode Auto scale Padding >> input[type="checkbox"] >> nth=1').uncheck();
+
+    // save
+    await page.locator('text=Snapshot Save and Finish Editing Save and Continue Editing >> button').nth(1).click();
+    await Promise.all([
+        page.locator('text=Save and Finish Editing').click(),
+        //Wait for Save Banner to appear
+        page.waitForSelector('.c-message-banner__message')
+    ]);
+    //Wait until Save Banner is gone
+    await page.locator('.c-message-banner__close-button').click();
+    await page.waitForSelector('.c-message-banner__message', { state: 'detached'});
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function testYTicks(page, values) {
+    const yTicks = page.locator('.gl-plot-y-tick-label');
+    await page.locator('canvas >> nth=1').hover();
+    let promises = [yTicks.count().then(c => expect(c).toBe(values.length))];
+
+    for (let i = 0, l = values.length; i < l; i += 1) {
+        promises.push(expect(yTicks.nth(i)).toHaveText(values[i])); // eslint-disable-line
+    }
+
+    await Promise.all(promises);
+}

e2e/tests/plugins/plot/logPlot.e2e.spec.js

@@ -0,0 +1,301 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2022, 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.
+ *****************************************************************************/
+
+/*
+Tests to verify log plot functionality. Note this test suite if very much under active development and should not
+necessarily be used for reference when writing new tests in this area.
+*/
+
+const { test, expect } = require('@playwright/test');
+
+test.describe('Log plot tests', () => {
+    test.slow('Log Plot ticks are functionally correct in regular and log mode and after refresh', async ({ page }) => {
+        await makeOverlayPlot(page);
+        await testRegularTicks(page);
+        await enableEditMode(page);
+        await enableLogMode(page);
+        await testLogTicks(page);
+        await disableLogMode(page);
+        await testRegularTicks(page);
+        await enableLogMode(page);
+        await testLogTicks(page);
+        await saveOverlayPlot(page);
+        await testLogTicks(page);
+        //await testLogPlotPixels(page);
+
+        // refresh page and wait for charts and ticks to load
+        await page.waitForTimeout(1 * 1000);
+        await page.reload({ waitUntil: 'networkidle'});
+        await page.waitForSelector('.gl-plot-chart-area');
+        await page.waitForSelector('.gl-plot-y-tick-label');
+
+        // test log ticks hold up after refresh
+        await testLogTicks(page);
+        //await testLogPlotPixels(page);
+    });
+
+    test.skip('Verify that log mode option is reflected in import/export JSON', async ({ page }) => {
+        await makeOverlayPlot(page);
+        await enableEditMode(page);
+        await enableLogMode(page);
+        await saveOverlayPlot(page);
+
+        // TODO ...export, delete the overlay, then import it...
+
+        //await testLogTicks(page);
+
+        // TODO, the plot is slightly at different position that in the other test, so this fails.
+        // ...We can fix it by copying all steps from the first test...
+        // await testLogPlotPixels(page);
+    });
+});
+
+/**
+ * Makes an overlay plot with a sine wave generator and clicks on the overlay plot in the sidebar so it is the active thing displayed.
+ * @param {import('@playwright/test').Page} page
+ */
+async function makeOverlayPlot(page) {
+    // fresh page with time range from 2022-03-29 22:00:00.000Z to 2022-03-29 22:00:30.000Z
+    await page.goto('/', { waitUntil: 'networkidle' });
+
+    // Set a specific time range for consistency, otherwise it will change
+    // on every test to a range based on the current time.
+
+    const timeInputs = page.locator('input.c-input--datetime');
+    await timeInputs.first().click();
+    await timeInputs.first().fill('2022-03-29 22:00:00.000Z');
+
+    await timeInputs.nth(1).click();
+    await timeInputs.nth(1).fill('2022-03-29 22:00:30.000Z');
+
+    // create overlay plot
+
+    await page.locator('button.c-create-button').click();
+    await page.locator('li:has-text("Overlay Plot")').click();
+    await Promise.all([
+        page.waitForNavigation({ waitUntil: 'networkidle'}),
+        page.locator('text=OK').click(),
+        //Wait for Save Banner to appear
+        page.waitForSelector('.c-message-banner__message')
+    ]);
+    //Wait until Save Banner is gone
+    await page.locator('.c-message-banner__close-button').click();
+    await page.waitForSelector('.c-message-banner__message', { state: 'detached'});
+
+    // save the overlay plot
+
+    await saveOverlayPlot(page);
+
+    // create a sinewave generator
+
+    await page.locator('button.c-create-button').click();
+    await page.locator('li:has-text("Sine Wave Generator")').click();
+
+    // set amplitude to 6, offset 4, period 2
+
+    await page.locator('div:nth-child(5) .form-row .c-form-row__controls .form-control .field input').click();
+    await page.locator('div:nth-child(5) .form-row .c-form-row__controls .form-control .field input').fill('6');
+
+    await page.locator('div:nth-child(6) .form-row .c-form-row__controls .form-control .field input').click();
+    await page.locator('div:nth-child(6) .form-row .c-form-row__controls .form-control .field input').fill('4');
+
+    await page.locator('div:nth-child(7) .form-row .c-form-row__controls .form-control .field input').click();
+    await page.locator('div:nth-child(7) .form-row .c-form-row__controls .form-control .field input').fill('2');
+
+    // Click OK to make generator
+
+    await Promise.all([
+        page.waitForNavigation({ waitUntil: 'networkidle'}),
+        page.locator('text=OK').click(),
+        //Wait for Save Banner to appear
+        page.waitForSelector('.c-message-banner__message')
+    ]);
+    //Wait until Save Banner is gone
+    await page.locator('.c-message-banner__close-button').click();
+    await page.waitForSelector('.c-message-banner__message', { state: 'detached'});
+
+    // click on overlay plot
+
+    await page.locator('text=Open MCT My Items >> span').nth(3).click();
+    await Promise.all([
+        page.waitForNavigation(),
+        page.locator('text=Unnamed Overlay Plot').first().click()
+    ]);
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function testRegularTicks(page) {
+    const yTicks = await page.locator('.gl-plot-y-tick-label');
+    expect(await yTicks.count()).toBe(7);
+    await expect(yTicks.nth(0)).toHaveText('-2');
+    await expect(yTicks.nth(1)).toHaveText('0');
+    await expect(yTicks.nth(2)).toHaveText('2');
+    await expect(yTicks.nth(3)).toHaveText('4');
+    await expect(yTicks.nth(4)).toHaveText('6');
+    await expect(yTicks.nth(5)).toHaveText('8');
+    await expect(yTicks.nth(6)).toHaveText('10');
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function testLogTicks(page) {
+    const yTicks = await page.locator('.gl-plot-y-tick-label');
+    expect(await yTicks.count()).toBe(28);
+    await expect(yTicks.nth(0)).toHaveText('-2.98');
+    await expect(yTicks.nth(1)).toHaveText('-2.50');
+    await expect(yTicks.nth(2)).toHaveText('-2.00');
+    await expect(yTicks.nth(3)).toHaveText('-1.51');
+    await expect(yTicks.nth(4)).toHaveText('-1.20');
+    await expect(yTicks.nth(5)).toHaveText('-1.00');
+    await expect(yTicks.nth(6)).toHaveText('-0.80');
+    await expect(yTicks.nth(7)).toHaveText('-0.58');
+    await expect(yTicks.nth(8)).toHaveText('-0.40');
+    await expect(yTicks.nth(9)).toHaveText('-0.20');
+    await expect(yTicks.nth(10)).toHaveText('-0.00');
+    await expect(yTicks.nth(11)).toHaveText('0.20');
+    await expect(yTicks.nth(12)).toHaveText('0.40');
+    await expect(yTicks.nth(13)).toHaveText('0.58');
+    await expect(yTicks.nth(14)).toHaveText('0.80');
+    await expect(yTicks.nth(15)).toHaveText('1.00');
+    await expect(yTicks.nth(16)).toHaveText('1.20');
+    await expect(yTicks.nth(17)).toHaveText('1.51');
+    await expect(yTicks.nth(18)).toHaveText('2.00');
+    await expect(yTicks.nth(19)).toHaveText('2.50');
+    await expect(yTicks.nth(20)).toHaveText('2.98');
+    await expect(yTicks.nth(21)).toHaveText('3.50');
+    await expect(yTicks.nth(22)).toHaveText('4.00');
+    await expect(yTicks.nth(23)).toHaveText('4.50');
+    await expect(yTicks.nth(24)).toHaveText('5.31');
+    await expect(yTicks.nth(25)).toHaveText('7.00');
+    await expect(yTicks.nth(26)).toHaveText('8.00');
+    await expect(yTicks.nth(27)).toHaveText('9.00');
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function enableEditMode(page) {
+    // turn on edit mode
+    await page.locator('text=Unnamed Overlay Plot Snapshot >> button').nth(3).click();
+    await expect(await page.locator('text=Snapshot Save and Finish Editing Save and Continue Editing >> button').nth(1)).toBeVisible();
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function enableLogMode(page) {
+    // turn on log mode
+    await page.locator('text=Y Axis Label Log mode Auto scale Padding >> input[type="checkbox"]').first().check();
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function disableLogMode(page) {
+    // turn off log mode
+    await page.locator('text=Y Axis Label Log mode Auto scale Padding >> input[type="checkbox"]').first().uncheck();
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function saveOverlayPlot(page) {
+    // save overlay plot
+    await page.locator('text=Snapshot Save and Finish Editing Save and Continue Editing >> button').nth(1).click();
+
+    await Promise.all([
+        page.locator('text=Save and Finish Editing').click(),
+        //Wait for Save Banner to appear
+        page.waitForSelector('.c-message-banner__message')
+    ]);
+    //Wait until Save Banner is gone
+    await page.locator('.c-message-banner__close-button').click();
+    await page.waitForSelector('.c-message-banner__message', { state: 'detached' });
+}
+
+/**
+ * @param {import('@playwright/test').Page} page
+ */
+async function testLogPlotPixels(page) {
+    const pixelsMatch = await page.evaluate(async () => {
+        // TODO get canvas pixels at a few locations to make sure they're the correct color, to test that the plot comes out as expected.
+
+        await new Promise((r) => setTimeout(r, 5 * 1000));
+
+        // These are some pixels that should be blue points in the log plot.
+        // If the plot changes shape to an unexpected shape, this will
+        // likely fail, which is what we want.
+        //
+        // I found these pixels by pausing playwright in debug mode at this
+        // point, and using similar code as below to output the pixel data, then
+        // I logged those pixels here.
+        const expectedBluePixels = [
+            // TODO these pixel sets only work with the first test, but not the second test.
+
+            // [60, 35],
+            // [121, 125],
+            // [156, 377],
+            // [264, 73],
+            // [372, 186],
+            // [576, 73],
+            // [659, 439],
+            // [675, 423]
+
+            [60, 35],
+            [120, 125],
+            [156, 375],
+            [264, 73],
+            [372, 185],
+            [575, 72],
+            [659, 437],
+            [675, 421]
+        ];
+
+        // The first canvas in the DOM is the one that has the plot point
+        // icons (canvas 2d), which is the one we are testing. The second
+        // one in the DOM is the WebGL canvas with the line. (Why aren't
+        // they both WebGL?)
+        const canvas = document.querySelector('canvas');
+
+        const ctx = canvas.getContext('2d');
+
+        for (const pixel of expectedBluePixels) {
+            // XXX Possible optimization: call getImageData only once with
+            // area including all pixels to be tested.
+            const data = ctx.getImageData(pixel[0], pixel[1], 1, 1).data;
+
+            // #43b0ffff <-- openmct cyanish-blue with 100% opacity
+            // if (data[0] !== 0x43 || data[1] !== 0xb0 || data[2] !== 0xff || data[3] !== 0xff) {
+            if (data[0] === 0 && data[1] === 0 && data[2] === 0 && data[3] === 0) {
+                // If any pixel is empty, it means we didn't hit a plot point.
+                return false;
+            }
+        }
+
+        return true;
+    });
+
+    expect(pixelsMatch).toBe(true);
+}

e2e/tests/plugins/timeConductor/timeConductor.e2e.spec.js

@@ -67,3 +67,46 @@ test.describe('Time counductor operations', () => {
         expect(endDateValidityStatus).not.toBeTruthy();
     });
 });
+
+
+// Testing instructions:
+// Try to change the realtime offsets when in realtime (local clock) mode.
+test.describe('Time conductor input fields real-time mode', () => {
+    test('validate input fields in real-time mode', async ({ page }) => {
+        //Go to baseURL
+        await page.goto('/', { waitUntil: 'networkidle' });
+
+        // Set realtime "local clock" mode offsets
+        const timeInputs = page.locator('input.c-input--datetime');
+
+        // Click fixed timespan button
+        await page.locator('.c-button__label >> text=Fixed Timespan').click();
+
+        // Click local clock 
+        await page.locator('.icon-clock >> text=Local Clock').click();
+
+        // Click time offset button
+        await page.locator('.c-conductor__delta-button >> text=00:30:00').click();
+
+        // Input start time offset
+        await page.fill('.pr-time-controls__secs', '23');
+
+        // Click the check button
+        await page.locator('.icon-check').click();
+
+        // Verify time was updated on time offset button
+        await expect(page.locator('.c-conductor__delta-button').first()).toContainText('00:30:23');
+
+        // Click time offset set preceding now button
+        await page.locator('.c-conductor__delta-button >> text=00:00:30').click();
+
+        // Input preceding time offset
+        await page.fill('.pr-time-controls__secs', '31')
+
+        // Click the check buttons
+        await page.locator('.icon-check').click();
+
+        // Verify time was updated on preceding time offset button
+        await expect(page.locator('.c-conductor__delta-button').nth(1)).toContainText('00:00:31');
+    });
+});

e2e/tests/recycled_storage.json

@@ -0,0 +1,22 @@
+{
+  "cookies": [],
+  "origins": [
+    {
+      "origin": "http://localhost:8080",
+      "localStorage": [
+        {
+          "name": "tcHistory",
+          "value": "{\"utc\":[{\"start\":1651513945533,\"end\":1651515745533}]}"
+        },
+        {
+          "name": "mct",
+          "value": "{\"mine\":{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"c0f99e39-85e7-4ef7-99b1-ef52d4ed69b2\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"persisted\":1651515746374,\"modified\":1651515746374},\"c0f99e39-85e7-4ef7-99b1-ef52d4ed69b2\":{\"name\":\"Unnamed Condition Set\",\"type\":\"conditionSet\",\"identifier\":{\"key\":\"c0f99e39-85e7-4ef7-99b1-ef52d4ed69b2\",\"namespace\":\"\"},\"configuration\":{\"conditionTestData\":[],\"conditionCollection\":[{\"isDefault\":true,\"id\":\"e35a066b-eb0e-4b05-a4c9-cc31dc202572\",\"configuration\":{\"name\":\"Default\",\"output\":\"Default\",\"trigger\":\"all\",\"criteria\":[]},\"summary\":\"Default condition\"}]},\"composition\":[],\"telemetry\":{},\"modified\":1651515746373,\"location\":\"mine\",\"persisted\":1651515746373}}"
+        },
+        {
+          "name": "mct-tree-expanded",
+          "value": "[]"
+        }
+      ]
+    }
+  ]
+}

example/generator/GeneratorProvider.js

@@ -35,8 +35,8 @@ define([
         phase: 0
     };
 
-    function GeneratorProvider() {
-        this.workerInterface = new WorkerInterface();
+    function GeneratorProvider(openmct) {
+        this.workerInterface = new WorkerInterface(openmct);
     }
 
     GeneratorProvider.prototype.canProvideTelemetry = function (domainObject) {

example/generator/WorkerInterface.js

@@ -21,20 +21,13 @@
  *****************************************************************************/
 
 define([
-    'raw-loader!./generatorWorker.js',
     'uuid'
 ], function (
-    workerText,
     uuid
 ) {
-
-    var workerBlob = new Blob(
-        [workerText],
-        {type: 'application/javascript'}
-    );
-    var workerUrl = URL.createObjectURL(workerBlob);
-
-    function WorkerInterface() {
+    function WorkerInterface(openmct) {
+        // eslint-disable-next-line no-undef
+        const workerUrl = `${openmct.getAssetPath()}${__OPENMCT_ROOT_RELATIVE__}generatorWorker.js`;
         this.worker = new Worker(workerUrl);
         this.worker.onmessage = this.onMessage.bind(this);
         this.callbacks = {};

example/generator/plugin.js

@@ -146,7 +146,7 @@ define([
             }
         });
 
-        openmct.telemetry.addProvider(new GeneratorProvider());
+        openmct.telemetry.addProvider(new GeneratorProvider(openmct));
         openmct.telemetry.addProvider(new GeneratorMetadataProvider());
         openmct.telemetry.addProvider(new SinewaveLimitProvider());
     };

example/imagery/plugin.js

@@ -59,8 +59,7 @@ export default function () {
                 object.configuration = {
                     imageLocation: '',
                     imageLoadDelayInMilliSeconds: DEFAULT_IMAGE_LOAD_DELAY_IN_MILISECONDS,
-                    imageSamples: [],
-                    layers: []
+                    imageSamples: []
                 };
 
                 object.telemetry = {
@@ -91,21 +90,7 @@ export default function () {
                             format: 'image',
                             hints: {
                                 image: 1
-                            },
-                            layers: [
-                                {
-                                    source: 'dist/imagery/example-imagery-layer-16x9.png',
-                                    name: '16:9'
-                                },
-                                {
-                                    source: 'dist/imagery/example-imagery-layer-safe.png',
-                                    name: 'Safe'
-                                },
-                                {
-                                    source: 'dist/imagery/example-imagery-layer-scale.png',
-                                    name: 'Scale'
-                                }
-                            ]
+                            }
                         },
                         {
                             name: 'Image Download Name',

index.html

@@ -77,7 +77,7 @@
 
 
         openmct.install(openmct.plugins.LocalStorage());
-      
+
         openmct.install(openmct.plugins.example.Generator());
         openmct.install(openmct.plugins.example.EventGeneratorPlugin());
         openmct.install(openmct.plugins.example.ExampleImagery());
@@ -195,6 +195,7 @@
         ));
         openmct.install(openmct.plugins.Clock({ enableClockIndicator: true }));
         openmct.install(openmct.plugins.Timer());
+        openmct.install(openmct.plugins.Timelist());
         openmct.start();
     </script>
 </html>

karma.conf.js

@@ -38,6 +38,10 @@ module.exports = (config) => {
             {
                 pattern: 'dist/inMemorySearchWorker.js*',
                 included: false
+            },
+            {
+                pattern: 'dist/generatorWorker.js*',
+                included: false
             }
         ],
         port: 9876,
@@ -92,8 +96,7 @@ module.exports = (config) => {
         },
         webpack: webpackConfig,
         webpackMiddleware: {
-            stats: 'errors-only',
-            logLevel: 'warn'
+            stats: 'errors-warnings'
         },
         concurrency: 1,
         singleRun: true,

package.json

@@ -1,83 +1,85 @@
 {
   "name": "openmct",
-  "version": "2.0.2-SNAPSHOT",
+  "version": "2.0.4-SNAPSHOT",
   "description": "The Open MCT core platform",
   "devDependencies": {
     "@babel/eslint-parser": "7.16.3",
     "@braintree/sanitize-url": "6.0.0",
-    "@percy/cli": "1.0.0-beta.76",
-    "@percy/playwright": "1.0.1",
-    "@playwright/test": "1.19.2",
+    "@percy/cli": "1.0.4",
+    "@percy/playwright": "1.0.3",
+    "@playwright/test": "1.21.1",
+    "@types/eventemitter3": "^1.0.0",
+    "@types/jasmine": "^4.0.1",
+    "@types/karma": "^6.3.2",
+    "@types/lodash": "^4.14.178",
+    "@types/mocha": "^9.1.0",
     "allure-playwright": "2.0.0-beta.15",
     "babel-loader": "8.2.3",
     "babel-plugin-istanbul": "6.1.1",
     "comma-separated-values": "3.6.4",
     "copy-webpack-plugin": "10.2.0",
-    "core-js": "3.21.1",
     "cross-env": "7.0.3",
     "css-loader": "4.0.0",
-    "d3-axis": "1.0.x",
-    "d3-scale": "1.0.x",
-    "d3-selection": "1.3.x",
-    "eslint": "8.11.0",
+    "d3-axis": "3.0.0",
+    "d3-scale": "3.3.0",
+    "d3-selection": "3.0.0",
+    "eslint": "8.13.0",
     "eslint-plugin-compat": "4.0.2",
-    "eslint-plugin-playwright": "0.8.0",
+    "eslint-plugin-playwright": "0.9.0",
     "eslint-plugin-vue": "8.5.0",
     "eslint-plugin-you-dont-need-lodash-underscore": "6.12.0",
     "eventemitter3": "1.2.0",
     "exports-loader": "0.7.0",
     "express": "4.13.1",
-    "file-loader": "6.2.0",
     "file-saver": "2.0.5",
     "git-rev-sync": "3.0.2",
-    "html-loader": "0.5.5",
     "html2canvas": "1.4.1",
     "imports-loader": "0.8.0",
     "jasmine-core": "4.0.1",
     "jsdoc": "3.5.5",
-    "karma": "6.3.15",
+    "karma": "6.3.18",
     "karma-chrome-launcher": "3.1.1",
     "karma-cli": "2.0.0",
-    "karma-coverage": "2.1.1",
+    "karma-coverage": "2.2.0",
     "karma-coverage-istanbul-reporter": "3.0.3",
     "karma-firefox-launcher": "2.1.2",
     "karma-jasmine": "4.0.1",
     "karma-junit-reporter": "2.0.1",
     "karma-sourcemap-loader": "0.3.8",
-    "karma-spec-reporter": "0.0.33",
+    "karma-spec-reporter": "0.0.34",
     "karma-webpack": "5.0.0",
+    "lighthouse": "9.5.0",
     "location-bar": "3.0.1",
-    "lodash": "4.17.12",
-    "mini-css-extract-plugin": "2.4.5",
-    "moment": "2.29.1",
-    "moment-duration-format": "2.2.2",
-    "moment-timezone": "0.5.28",
+    "lodash": "4.17.21",
+    "mini-css-extract-plugin": "2.6.0",
+    "moment": "2.29.3",
+    "moment-duration-format": "2.3.2",
+    "moment-timezone": "0.5.34",
     "node-bourbon": "4.2.3",
     "painterro": "1.2.56",
-    "plotly.js-basic-dist": "2.5.0",
-    "plotly.js-gl2d-dist": "2.5.0",
+    "plotly.js-basic-dist": "2.12.0",
+    "plotly.js-gl2d-dist": "2.12.0",
     "printj": "1.3.1",
-    "raw-loader": "4.0.2",
     "request": "2.88.2",
-    "resolve-url-loader": "4.0.0",
-    "sass": "1.49.0",
-    "sass-loader": "12.4.0",
+    "resolve-url-loader": "5.0.0",
+    "sass": "1.49.9",
+    "sass-loader": "12.6.0",
     "sinon": "13.0.1",
     "style-loader": "^1.0.1",
     "uuid": "3.3.3",
     "vue": "2.6.14",
-    "vue-eslint-parser": "8.2.0",
+    "vue-eslint-parser": "8.3.0",
     "vue-loader": "15.9.8",
     "vue-template-compiler": "2.6.14",
     "webpack": "5.68.0",
     "webpack-cli": "4.9.2",
-    "webpack-dev-middleware": "3.7.3",
+    "webpack-dev-middleware": "5.3.1",
     "webpack-hot-middleware": "2.25.1",
     "webpack-merge": "5.8.0",
     "zepto": "1.2.0"
   },
   "scripts": {
-    "clean": "rm -rf ./dist ./node_modules; rm package-lock.json",
+    "clean": "rm -rf ./dist ./node_modules ./package-lock.json",
     "clean-test-lint": "npm run clean; npm install; npm run test; npm run lint",
     "start": "node app.js",
     "lint": "eslint example src --ext .js,.vue openmct.js",
@@ -90,8 +92,9 @@
     "test": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" karma start --single-run",
     "test:firefox": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" karma start --single-run --browsers=FirefoxHeadless",
     "test:debug": "cross-env NODE_ENV=debug karma start --no-single-run",
-    "test:e2e:ci": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome smoke default condition timeConductor",
+    "test:e2e:ci": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome smoke default condition timeConductor branding clock",
     "test:e2e:local": "npx playwright test --config=e2e/playwright-local.config.js --project=chrome",
+    "test:e2e:updatesnapshots": "npx playwright test --config=e2e/playwright-local.config.js --project=chrome --grep @snapshot --update-snapshots",
     "test:e2e:visual": "percy exec --config ./e2e/.percy.yml -- npx playwright test --config=e2e/playwright-visual.config.js default",
     "test:e2e:full": "npx playwright test --config=e2e/playwright-ci.config.js",
     "test:watch": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" karma start --no-single-run",
@@ -107,7 +110,10 @@
     "url": "https://github.com/nasa/openmct.git"
   },
   "engines": {
-    "node": ">=12.22.0"
+    "node": ">=14.19.1"
+  },
+  "overrides": {
+    "core-js": "3.21.1"
   },
   "browserslist": [
     "Firefox ESR",

src/MCT.js

@@ -241,7 +241,6 @@ define([
         this.branding = BrandingAPI.default;
 
         // Plugins that are installed by default
-
         this.install(this.plugins.Plot());
         this.install(this.plugins.Chart());
         this.install(this.plugins.TelemetryTable.default());

src/api/forms/FormController.js

@@ -1,5 +1,6 @@
 import AutoCompleteField from './components/controls/AutoCompleteField.vue';
 import ClockDisplayFormatField from './components/controls/ClockDisplayFormatField.vue';
+import CheckBoxField from './components/controls/CheckBoxField.vue';
 import Datetime from './components/controls/Datetime.vue';
 import FileInput from './components/controls/FileInput.vue';
 import Locator from './components/controls/Locator.vue';
@@ -7,11 +8,13 @@ import NumberField from './components/controls/NumberField.vue';
 import SelectField from './components/controls/SelectField.vue';
 import TextAreaField from './components/controls/TextAreaField.vue';
 import TextField from './components/controls/TextField.vue';
+import ToggleSwitchField from './components/controls/ToggleSwitchField.vue';
 
 import Vue from 'vue';
 
 export const DEFAULT_CONTROLS_MAP = {
     'autocomplete': AutoCompleteField,
+    'checkbox': CheckBoxField,
     'composite': ClockDisplayFormatField,
     'datetime': Datetime,
     'file-input': FileInput,
@@ -19,7 +22,8 @@ export const DEFAULT_CONTROLS_MAP = {
     'numberfield': NumberField,
     'select': SelectField,
     'textarea': TextAreaField,
-    'textfield': TextField
+    'textfield': TextField,
+    'toggleSwitch': ToggleSwitchField
 };
 
 export default class FormControl {
@@ -65,10 +69,11 @@ export default class FormControl {
      */
     _getControlViewProvider(control) {
         const self = this;
+        let rowComponent;
 
         return {
             show(element, model, onChange) {
-                const rowComponent = new Vue({
+                rowComponent = new Vue({
                     el: element,
                     components: {
                         FormControlComponent: DEFAULT_CONTROLS_MAP[control]
@@ -86,8 +91,10 @@ export default class FormControl {
                 });
 
                 return rowComponent;
+            },
+            destroy() {
+                rowComponent.$destroy();
             }
         };
     }
 }
-

src/api/forms/components/FormRow.vue

@@ -79,10 +79,12 @@ export default {
         rowClass() {
             let cssClass = this.cssClass;
 
-            if (this.row.required) {
-                cssClass = `${cssClass} req`;
+            if (!this.row.required) {
+                return;
             }
 
+            cssClass = `${cssClass} req`;
+
             if (this.visited && this.valid !== undefined) {
                 if (this.valid === true) {
                     cssClass = `${cssClass} valid`;

src/api/forms/components/controls/AutoCompleteField.vue

@@ -22,17 +22,19 @@
 
 <template>
 <div class="form-control autocomplete">
-    <input
-        v-model="field"
-        class="autocompleteInput"
-        type="text"
-        @click="inputClicked()"
-        @keydown="keyDown($event)"
-    >
-    <span
-        class="icon-arrow-down"
-        @click="arrowClicked()"
-    ></span>
+    <span class="autocompleteInputAndArrow">
+        <input
+            v-model="field"
+            class="autocompleteInput"
+            type="text"
+            @click="inputClicked()"
+            @keydown="keyDown($event)"
+        >
+        <span
+            class="icon-arrow-down"
+            @click="arrowClicked()"
+        ></span>
+    </span>
     <div
         class="autocompleteOptions"
         @blur="hideOptions = true"
@@ -108,10 +110,21 @@ export default {
 
                 this.$emit('onChange', data);
             }
+        },
+        hideOptions(newValue) {
+            if (!newValue) {
+                // adding a event listener when the hideOpntions is false (dropdown is visible)
+                // handleoutsideclick can collapse the dropdown when clicked outside autocomplete
+                document.body.addEventListener('click', this.handleOutsideClick);
+            } else {
+                //removing event listener when hideOptions become true (dropdown is collapsed)
+                document.body.removeEventListener('click', this.handleOutsideClick);
+            }
         }
     },
     mounted() {
         this.options = this.model.options;
+        this.autocompleteInputAndArrow = this.$el.getElementsByClassName('autocompleteInputAndArrow')[0];
         this.autocompleteInputElement = this.$el.getElementsByClassName('autocompleteInput')[0];
         if (this.options[0].name) {
         // If "options" include name, value pair
@@ -123,6 +136,9 @@ export default {
             this.optionNames = this.options;
         }
     },
+    destroyed() {
+        document.body.removeEventListener('click', this.handleOutsideClick);
+    },
     methods: {
         decrementOptionIndex() {
             if (this.optionIndex === 0) {
@@ -176,7 +192,21 @@ export default {
             // to show them all the options
             this.showFilteredOptions = false;
             this.autocompleteInputElement.select();
-            this.showOptions();
+
+            if (this.hideOptions) {
+                this.showOptions();
+            } else {
+                this.hideOptions = true;
+            }
+
+        },
+        handleOutsideClick(event) {
+            // if click event is detected outside autocomplete (both input & arrow) while the
+            // dropdown is visible, this will collapse the dropdown.
+            const clickedInsideAutocomplete = this.autocompleteInputAndArrow.contains(event.target);
+            if (!clickedInsideAutocomplete && !this.hideOptions) {
+                this.hideOptions = true;
+            }
         },
         optionMouseover(optionId) {
             this.optionIndex = optionId;

src/api/forms/components/controls/CheckBoxField.vue

@@ -0,0 +1,55 @@
+/*****************************************************************************
+* Open MCT, Copyright (c) 2014-2022, 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>
+<span class="form-control shell">
+    <span
+        class="field control"
+        :class="model.cssClass"
+    >
+        <input
+            type="checkbox"
+            :checked="isChecked"
+            @input="toggleCheckBox"
+        >
+    </span>
+</span>
+</template>
+
+<script>
+import toggleMixin from '../../toggle-check-box-mixin';
+
+export default {
+    mixins: [toggleMixin],
+    props: {
+        model: {
+            type: Object,
+            required: true
+        }
+    },
+    data() {
+        return {
+            isChecked: this.model.value
+        };
+    }
+};
+</script>

src/api/forms/components/controls/NumberField.vue

@@ -58,7 +58,6 @@ export default {
     },
     methods: {
         updateText() {
-            console.log('updateText', this.field);
             const data = {
                 model: this.model,
                 value: this.field

src/api/forms/components/controls/ToggleSwitchField.vue

@@ -0,0 +1,62 @@
+/*****************************************************************************
+* Open MCT, Copyright (c) 2014-2022, 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>
+<span class="form-control shell">
+    <span
+        class="field control"
+        :class="model.cssClass"
+    >
+        <ToggleSwitch
+            id="switchId"
+            :checked="isChecked"
+            @change="toggleCheckBox"
+        />
+    </span>
+</span>
+</template>
+
+<script>
+import toggleMixin from '../../toggle-check-box-mixin';
+import ToggleSwitch from '@/ui/components/ToggleSwitch.vue';
+
+import uuid from 'uuid';
+
+export default {
+    components: {
+        ToggleSwitch
+    },
+    mixins: [toggleMixin],
+    props: {
+        model: {
+            type: Object,
+            required: true
+        }
+    },
+    data() {
+        return {
+            switchId: `toggleSwitch-${uuid}`,
+            isChecked: this.model.value
+        };
+    }
+};
+</script>

src/api/forms/toggle-check-box-mixin.js

@@ -0,0 +1,19 @@
+export default {
+    data() {
+        return {
+            isChecked: false
+        };
+    },
+    methods: {
+        toggleCheckBox(event) {
+            this.isChecked = !this.isChecked;
+
+            const data = {
+                model: this.model,
+                value: this.isChecked
+            };
+
+            this.$emit('onChange', data);
+        }
+    }
+};

src/api/objects/InMemorySearchProvider.js

@@ -36,13 +36,14 @@ class InMemorySearchProvider {
          */
         this.MAX_CONCURRENT_REQUESTS = 100;
         /**
-        * If max results is not specified in query, use this as default.
-        */
+         * If max results is not specified in query, use this as default.
+         */
         this.DEFAULT_MAX_RESULTS = 100;
 
         this.openmct = openmct;
 
         this.indexedIds = {};
+        this.indexedCompositions = {};
         this.idsToIndex = [];
         this.pendingIndex = {};
         this.pendingRequests = 0;
@@ -58,7 +59,6 @@ class InMemorySearchProvider {
         this.onWorkerMessageError = this.onWorkerMessageError.bind(this);
         this.onerror = this.onWorkerError.bind(this);
         this.startIndexing = this.startIndexing.bind(this);
-        this.onMutationOfIndexedObject = this.onMutationOfIndexedObject.bind(this);
 
         this.openmct.on('start', this.startIndexing);
         this.openmct.on('destroy', () => {
@@ -68,6 +68,9 @@ class InMemorySearchProvider {
                 this.worker.port.onmessageerror = null;
                 this.worker.port.close();
             }
+
+            this.destroyObservers(this.indexedIds);
+            this.destroyObservers(this.indexedCompositions);
         });
     }
 
@@ -137,7 +140,7 @@ class InMemorySearchProvider {
         };
         modelResults.hits = await Promise.all(event.data.results.map(async (hit) => {
             const identifier = this.openmct.objects.parseKeyString(hit.keyString);
-            const domainObject = await this.openmct.objects.get(identifier.key);
+            const domainObject = await this.openmct.objects.get(identifier);
 
             return domainObject;
         }));
@@ -213,29 +216,52 @@ class InMemorySearchProvider {
         }
     }
 
-    onMutationOfIndexedObject(domainObject) {
+    onNameMutation(domainObject, name) {
         const provider = this;
-        provider.index(domainObject.identifier, domainObject);
+
+        domainObject.name = name;
+        provider.index(domainObject);
+    }
+
+    onCompositionMutation(domainObject, composition) {
+        const provider = this;
+        const indexedComposition = domainObject.composition;
+        const identifiersToIndex = composition
+            .filter(identifier => !indexedComposition
+                .some(indexedIdentifier => this.openmct.objects
+                    .areIdsEqual([identifier, indexedIdentifier])));
+
+        identifiersToIndex.forEach(identifier => {
+            this.openmct.objects.get(identifier).then(objectToIndex => provider.index(objectToIndex));
+        });
     }
 
     /**
-     * Pass an id and model to the worker to be indexed.  If the model has
-     * composition, schedule those ids for later indexing.
+     * Pass a domainObject to the worker to be indexed.
+     * If the object has composition, schedule those ids for later indexing.
+     * Watch for object changes and re-index object and children if so
      *
      * @private
-     * @param id a model id
-     * @param model a model
+     * @param domainObject a domainObject
      */
-    async index(id, domainObject) {
+    async index(domainObject) {
         const provider = this;
-        const keyString = this.openmct.objects.makeKeyString(id);
+        const keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
+
         if (!this.indexedIds[keyString]) {
-            this.openmct.objects.observe(domainObject, `*`, this.onMutationOfIndexedObject);
+            this.indexedIds[keyString] = this.openmct.objects.observe(
+                domainObject,
+                'name',
+                this.onNameMutation.bind(this, domainObject)
+            );
+            this.indexedCompositions[keyString] = this.openmct.objects.observe(
+                domainObject,
+                'composition',
+                this.onCompositionMutation.bind(this, domainObject)
+            );
         }
 
-        this.indexedIds[keyString] = true;
-
-        if ((id.key !== 'ROOT')) {
+        if ((keyString !== 'ROOT')) {
             if (this.worker) {
                 this.worker.port.postMessage({
                     request: 'index',
@@ -247,15 +273,12 @@ class InMemorySearchProvider {
             }
         }
 
-        const composition = this.openmct.composition.registry.find(foundComposition => {
-            return foundComposition.appliesTo(domainObject);
-        });
+        const composition = this.openmct.composition.get(domainObject);
 
-        if (composition) {
-            const childIdentifiers = await composition.load(domainObject);
-            childIdentifiers.forEach(function (childIdentifier) {
-                provider.scheduleForIndexing(childIdentifier);
-            });
+        if (composition !== undefined) {
+            const children = await composition.load();
+
+            children.forEach(child => provider.scheduleForIndexing(child.identifier));
         }
     }
 
@@ -271,12 +294,12 @@ class InMemorySearchProvider {
         const provider = this;
 
         this.pendingRequests += 1;
-        const identifier = await this.openmct.objects.parseKeyString(keyString);
-        const domainObject = await this.openmct.objects.get(identifier.key);
+        const domainObject = await this.openmct.objects.get(keyString);
         delete provider.pendingIndex[keyString];
+
         try {
             if (domainObject) {
-                await provider.index(identifier, domainObject);
+                await provider.index(domainObject);
             }
         } catch (error) {
             console.warn('Failed to index domain object ' + keyString, error);
@@ -305,9 +328,9 @@ class InMemorySearchProvider {
     }
 
     /**
-    * A local version of the same SharedWorker function
-    * if we don't have SharedWorkers available (e.g., iOS)
-    */
+     * A local version of the same SharedWorker function
+     * if we don't have SharedWorkers available (e.g., iOS)
+     */
     localIndexItem(keyString, model) {
         this.localIndexedItems[keyString] = {
             type: model.type,
@@ -347,6 +370,16 @@ class InMemorySearchProvider {
         };
         this.onWorkerMessage(eventToReturn);
     }
+
+    destroyObservers(observers) {
+        Object.entries(observers).forEach(([keyString, unobserve]) => {
+            if (typeof unobserve === 'function') {
+                unobserve();
+            }
+
+            delete observers[keyString];
+        });
+    }
 }
 
 export default InMemorySearchProvider;

src/api/objects/ObjectAPISearchSpec.js

@@ -105,13 +105,18 @@ describe("The Object API Search Function", () => {
 
         beforeEach((done) => {
             openmct = createOpenMct();
+            const defaultObjectProvider = openmct.objects.getProvider({
+                key: '',
+                namespace: ''
+            });
+            openmct.objects.addProvider('foo', defaultObjectProvider);
             spyOn(openmct.objects.inMemorySearchProvider, "query").and.callThrough();
             spyOn(openmct.objects.inMemorySearchProvider, "localSearch").and.callThrough();
 
             openmct.on('start', async () => {
                 mockIdentifier1 = {
                     key: 'some-object',
-                    namespace: 'some-namespace'
+                    namespace: 'foo'
                 };
                 mockDomainObject1 = {
                     type: 'clock',
@@ -120,7 +125,7 @@ describe("The Object API Search Function", () => {
                 };
                 mockIdentifier2 = {
                     key: 'some-other-object',
-                    namespace: 'some-namespace'
+                    namespace: 'foo'
                 };
                 mockDomainObject2 = {
                     type: 'clock',
@@ -129,16 +134,16 @@ describe("The Object API Search Function", () => {
                 };
                 mockIdentifier3 = {
                     key: 'yet-another-object',
-                    namespace: 'some-namespace'
+                    namespace: 'foo'
                 };
                 mockDomainObject3 = {
                     type: 'clock',
                     name: 'redBear',
                     identifier: mockIdentifier3
                 };
-                await openmct.objects.inMemorySearchProvider.index(mockIdentifier1, mockDomainObject1);
-                await openmct.objects.inMemorySearchProvider.index(mockIdentifier2, mockDomainObject2);
-                await openmct.objects.inMemorySearchProvider.index(mockIdentifier3, mockDomainObject3);
+                await openmct.objects.inMemorySearchProvider.index(mockDomainObject1);
+                await openmct.objects.inMemorySearchProvider.index(mockDomainObject2);
+                await openmct.objects.inMemorySearchProvider.index(mockDomainObject3);
                 done();
             });
             openmct.startHeadless();
@@ -175,9 +180,9 @@ describe("The Object API Search Function", () => {
             beforeEach(async () => {
                 openmct.objects.inMemorySearchProvider.worker = null;
                 // reindex locally
-                await openmct.objects.inMemorySearchProvider.index(mockIdentifier1, mockDomainObject1);
-                await openmct.objects.inMemorySearchProvider.index(mockIdentifier2, mockDomainObject2);
-                await openmct.objects.inMemorySearchProvider.index(mockIdentifier3, mockDomainObject3);
+                await openmct.objects.inMemorySearchProvider.index(mockDomainObject1);
+                await openmct.objects.inMemorySearchProvider.index(mockDomainObject2);
+                await openmct.objects.inMemorySearchProvider.index(mockDomainObject3);
             });
             it("calls local search", () => {
                 openmct.objects.search('foo');

src/api/objects/Transaction.js

@@ -22,12 +22,14 @@
 
 export default class Transaction {
     constructor(objectAPI) {
-        this.dirtyObjects = new Set();
+        this.dirtyObjects = {};
         this.objectAPI = objectAPI;
     }
 
     add(object) {
-        this.dirtyObjects.add(object);
+        const key = this.objectAPI.makeKeyString(object.identifier);
+
+        this.dirtyObjects[key] = object;
     }
 
     cancel() {
@@ -37,7 +39,8 @@ export default class Transaction {
     commit() {
         const promiseArray = [];
         const save = this.objectAPI.save.bind(this.objectAPI);
-        this.dirtyObjects.forEach(object => {
+
+        Object.values(this.dirtyObjects).forEach(object => {
             promiseArray.push(this.createDirtyObjectPromise(object, save));
         });
 
@@ -48,7 +51,9 @@ export default class Transaction {
         return new Promise((resolve, reject) => {
             action(object)
                 .then((success) => {
-                    this.dirtyObjects.delete(object);
+                    const key = this.objectAPI.makeKeyString(object.identifier);
+
+                    delete this.dirtyObjects[key];
                     resolve(success);
                 })
                 .catch(reject);
@@ -57,7 +62,8 @@ export default class Transaction {
 
     getDirtyObject(identifier) {
         let dirtyObject;
-        this.dirtyObjects.forEach(object => {
+
+        Object.values(this.dirtyObjects).forEach(object => {
             const areIdsEqual = this.objectAPI.areIdsEqual(object.identifier, identifier);
             if (areIdsEqual) {
                 dirtyObject = object;
@@ -67,14 +73,11 @@ export default class Transaction {
         return dirtyObject;
     }
 
-    start() {
-        this.dirtyObjects = new Set();
-    }
-
     _clear() {
         const promiseArray = [];
         const refresh = this.objectAPI.refresh.bind(this.objectAPI);
-        this.dirtyObjects.forEach(object => {
+
+        Object.values(this.dirtyObjects).forEach(object => {
             promiseArray.push(this.createDirtyObjectPromise(object, refresh));
         });
 

src/api/objects/TransactionSpec.js

@@ -34,24 +34,24 @@ describe("Transaction Class", () => {
     });
 
     it('has no dirty objects', () => {
-        expect(transaction.dirtyObjects.size).toEqual(0);
+        expect(Object.keys(transaction.dirtyObjects).length).toEqual(0);
     });
 
     it('add(), adds object to dirtyObjects', () => {
         const mockDomainObjects = createMockDomainObjects();
         transaction.add(mockDomainObjects[0]);
-        expect(transaction.dirtyObjects.size).toEqual(1);
+        expect(Object.keys(transaction.dirtyObjects).length).toEqual(1);
     });
 
     it('cancel(), clears all dirtyObjects', (done) => {
         const mockDomainObjects = createMockDomainObjects(3);
         mockDomainObjects.forEach(transaction.add.bind(transaction));
 
-        expect(transaction.dirtyObjects.size).toEqual(3);
+        expect(Object.keys(transaction.dirtyObjects).length).toEqual(3);
 
         transaction.cancel()
             .then(success => {
-                expect(transaction.dirtyObjects.size).toEqual(0);
+                expect(Object.keys(transaction.dirtyObjects).length).toEqual(0);
             }).finally(done);
     });
 
@@ -59,12 +59,12 @@ describe("Transaction Class", () => {
         const mockDomainObjects = createMockDomainObjects(3);
         mockDomainObjects.forEach(transaction.add.bind(transaction));
 
-        expect(transaction.dirtyObjects.size).toEqual(3);
+        expect(Object.keys(transaction.dirtyObjects).length).toEqual(3);
         spyOn(objectAPI, 'save').and.callThrough();
 
         transaction.commit()
             .then(success => {
-                expect(transaction.dirtyObjects.size).toEqual(0);
+                expect(Object.keys(transaction.dirtyObjects).length).toEqual(0);
                 expect(objectAPI.save.calls.count()).toEqual(3);
             }).finally(done);
     });
@@ -73,7 +73,7 @@ describe("Transaction Class", () => {
         const mockDomainObjects = createMockDomainObjects();
         transaction.add(mockDomainObjects[0]);
 
-        expect(transaction.dirtyObjects.size).toEqual(1);
+        expect(Object.keys(transaction.dirtyObjects).length).toEqual(1);
         const dirtyObject = transaction.getDirtyObject(mockDomainObjects[0].identifier);
 
         expect(dirtyObject).toEqual(mockDomainObjects[0]);
@@ -82,7 +82,7 @@ describe("Transaction Class", () => {
     it('getDirtyObject(), returns empty dirtyObject for no active transaction', () => {
         const mockDomainObjects = createMockDomainObjects();
 
-        expect(transaction.dirtyObjects.size).toEqual(0);
+        expect(Object.keys(transaction.dirtyObjects).length).toEqual(0);
         const dirtyObject = transaction.getDirtyObject(mockDomainObjects[0].identifier);
 
         expect(dirtyObject).toEqual(undefined);

src/api/telemetry/TelemetryCollection.js

@@ -172,6 +172,7 @@ export class TelemetryCollection extends EventEmitter {
      * @private
      */
     _processNewTelemetry(telemetryData) {
+        performance.mark('tlm:process:start');
         if (telemetryData === undefined) {
             return;
         }
@@ -352,6 +353,7 @@ export class TelemetryCollection extends EventEmitter {
      * @todo handle subscriptions more granually
      */
     _reset() {
+        performance.mark('tlm:reset');
         this.boundedTelemetry = [];
         this.futureBuffer = [];
 

src/api/time/TimeContext.js

@@ -365,3 +365,7 @@ class TimeContext extends EventEmitter {
 }
 
 export default TimeContext;
+
+/**
+@typedef {{start: number, end: number}} Bounds
+*/

src/plugins/LADTable/components/LADRow.vue

@@ -1,4 +1,3 @@
-
 /*****************************************************************************
  * Open MCT, Copyright (c) 2014-2022, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -114,14 +113,12 @@ export default {
         this.metadata = this.openmct.telemetry.getMetadata(this.domainObject);
         this.formats = this.openmct.telemetry.getFormatMap(this.metadata);
         this.keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
-        this.bounds = this.openmct.time.bounds();
 
         this.limitEvaluator = this.openmct
             .telemetry
             .limitEvaluator(this.domainObject);
 
         this.openmct.time.on('timeSystem', this.updateTimeSystem);
-        this.openmct.time.on('bounds', this.updateBounds);
 
         this.timestampKey = this.openmct.time.timeSystem().key;
 
@@ -135,72 +132,41 @@ export default {
 
         this.valueKey = this.valueMetadata ? this.valueMetadata.key : undefined;
 
-        this.unsubscribe = this.openmct
-            .telemetry
-            .subscribe(this.domainObject, this.setLatestValues);
-
-        this.requestHistory();
+        this.telemetryCollection = this.openmct.telemetry.requestCollection(this.domainObject, {
+            size: 1,
+            strategy: 'latest'
+        });
+        this.telemetryCollection.on('add', this.setLatestValues);
+        this.telemetryCollection.on('clear', this.resetValues);
+        this.telemetryCollection.load();
 
         if (this.hasUnits) {
             this.setUnit();
         }
     },
     destroyed() {
-        this.unsubscribe();
         this.openmct.time.off('timeSystem', this.updateTimeSystem);
-        this.openmct.time.off('bounds', this.updateBounds);
+        this.telemetryCollection.off('add', this.setLatestValues);
+        this.telemetryCollection.off('clear', this.resetValues);
+
+        this.telemetryCollection.destroy();
     },
     methods: {
         updateView() {
             if (!this.updatingView) {
                 this.updatingView = true;
                 requestAnimationFrame(() => {
-                    let newTimestamp = this.getParsedTimestamp(this.latestDatum);
-
-                    if (this.shouldUpdate(newTimestamp)) {
-                        this.timestamp = newTimestamp;
-                        this.datum = this.latestDatum;
-                    }
-
+                    this.timestamp = this.getParsedTimestamp(this.latestDatum);
+                    this.datum = this.latestDatum;
                     this.updatingView = false;
                 });
             }
         },
-        setLatestValues(datum) {
-            this.latestDatum = datum;
-
+        setLatestValues(data) {
+            this.latestDatum = data[data.length - 1];
             this.updateView();
         },
-        shouldUpdate(newTimestamp) {
-            return this.inBounds(newTimestamp)
-                && (this.timestamp === undefined || newTimestamp > this.timestamp);
-        },
-        requestHistory() {
-            this.openmct
-                .telemetry
-                .request(this.domainObject, {
-                    start: this.bounds.start,
-                    end: this.bounds.end,
-                    size: 1,
-                    strategy: 'latest'
-                })
-                .then((array) => this.setLatestValues(array[array.length - 1]))
-                .catch((error) => {
-                    console.warn('Error fetching data', error);
-                });
-        },
-        updateBounds(bounds, isTick) {
-            this.bounds = bounds;
-            if (!isTick) {
-                this.resetValues();
-                this.requestHistory();
-            }
-        },
-        inBounds(timestamp) {
-            return timestamp >= this.bounds.start && timestamp <= this.bounds.end;
-        },
         updateTimeSystem(timeSystem) {
-            this.resetValues();
             this.timestampKey = timeSystem.key;
         },
         updateViewContext() {
@@ -241,4 +207,3 @@ export default {
     }
 };
 </script>
-

src/plugins/LADTable/pluginSpec.js

@@ -46,6 +46,7 @@ describe("The LAD Table", () => {
 
     let openmct;
     let ladPlugin;
+    let historicalProvider;
     let parent;
     let child;
     let telemetryCount = 3;
@@ -81,6 +82,13 @@ describe("The LAD Table", () => {
 
         spyOn(openmct.objects, 'get').and.returnValue(Promise.resolve({}));
 
+        historicalProvider = {
+            request: () => {
+                return Promise.resolve([]);
+            }
+        };
+        spyOn(openmct.telemetry, 'findRequestProvider').and.returnValue(historicalProvider);
+
         openmct.time.bounds({
             start: bounds.start,
             end: bounds.end
@@ -147,7 +155,7 @@ describe("The LAD Table", () => {
         // add another telemetry object as composition in lad table to test multi rows
         mockObj.ladTable.composition.push(anotherTelemetryObj.identifier);
 
-        beforeEach(async () => {
+        beforeEach(async (done) => {
             let telemetryRequestResolve;
             let telemetryObjectResolve;
             let anotherTelemetryObjectResolve;
@@ -166,11 +174,12 @@ describe("The LAD Table", () => {
                 callBack();
             });
 
-            openmct.telemetry.request.and.callFake(() => {
+            historicalProvider.request = () => {
                 telemetryRequestResolve(mockTelemetry);
 
                 return telemetryRequestPromise;
-            });
+            };
+
             openmct.objects.get.and.callFake((obj) => {
                 if (obj.key === 'telemetry-object') {
                     telemetryObjectResolve(mockObj.telemetry);
@@ -195,6 +204,8 @@ describe("The LAD Table", () => {
 
             await Promise.all([telemetryRequestPromise, telemetryObjectPromise, anotherTelemetryObjectPromise]);
             await Vue.nextTick();
+
+            done();
         });
 
         it("should show one row per object in the composition", () => {

src/plugins/conditionWidget/components/ConditionWidget.vue

@@ -27,7 +27,7 @@
     :href="url"
 >
     <div class="c-condition-widget__label">
-        {{ internalDomainObject.conditionalLabel || internalDomainObject.label }}
+        {{ label }}
     </div>
 </component>
 </template>
@@ -39,28 +39,112 @@ export default {
     inject: ['openmct', 'domainObject'],
     data: function () {
         return {
-            internalDomainObject: this.domainObject
+            conditionalLabel: '',
+            conditionSetIdentifier: null,
+            domainObjectLabel: '',
+            url: null,
+            urlDefined: false,
+            useConditionSetOutputAsLabel: false
         };
     },
     computed: {
-        urlDefined() {
-            return this.internalDomainObject.url && this.internalDomainObject.url.length > 0;
-        },
-        url() {
-            return this.urlDefined ? sanitizeUrl(this.internalDomainObject.url) : null;
+        label() {
+            return this.useConditionSetOutputAsLabel
+                ? this.conditionalLabel
+                : this.domainObjectLabel
+            ;
+        }
+    },
+    watch: {
+        conditionSetIdentifier: {
+            handler(newValue, oldValue) {
+                if (!oldValue || !newValue || !this.openmct.objects.areIdsEqual(newValue, oldValue)) {
+                    return;
+                }
+
+                this.listenToConditionSetChanges();
+            },
+            deep: true
         }
     },
     mounted() {
-        this.unlisten = this.openmct.objects.observe(this.internalDomainObject, '*', this.updateInternalDomainObject);
+        this.unlisten = this.openmct.objects.observe(this.domainObject, '*', this.updateDomainObject);
+
+        if (this.domainObject) {
+            this.updateDomainObject(this.domainObject);
+            this.listenToConditionSetChanges();
+        }
     },
     beforeDestroy() {
+        this.conditionSetIdentifier = null;
+
         if (this.unlisten) {
             this.unlisten();
         }
+
+        this.stopListeningToConditionSetChanges();
     },
     methods: {
-        updateInternalDomainObject(domainObject) {
-            this.internalDomainObject = domainObject;
+        async listenToConditionSetChanges() {
+            if (!this.conditionSetIdentifier) {
+                return;
+            }
+
+            const conditionSetDomainObject = await this.openmct.objects.get(this.conditionSetIdentifier);
+            this.stopListeningToConditionSetChanges();
+
+            if (!conditionSetDomainObject) {
+                this.openmct.notifications.alert('Unable to find condition set');
+            }
+
+            this.telemetryCollection = this.openmct.telemetry.requestCollection(conditionSetDomainObject, {
+                size: 1,
+                strategy: 'latest'
+            });
+
+            this.telemetryCollection.on('add', this.updateConditionLabel, this);
+            this.telemetryCollection.load();
+        },
+        stopListeningToConditionSetChanges() {
+            if (this.telemetryCollection) {
+                this.telemetryCollection.off('add', this.updateConditionLabel, this);
+                this.telemetryCollection.destroy();
+                this.telemetryCollection = null;
+            }
+        },
+        updateConditionLabel([latestDatum]) {
+            if (!this.conditionSetIdentifier) {
+                this.stopListeningToConditionSetChanges();
+
+                return;
+            }
+
+            this.conditionalLabel = latestDatum.output || '';
+        },
+        updateDomainObject(domainObject) {
+            if (this.domainObjectLabel !== domainObject.label) {
+                this.domainObjectLabel = domainObject.label;
+            }
+
+            const urlDefined = domainObject.url && domainObject.url.length > 0;
+            if (this.urlDefined !== urlDefined) {
+                this.urlDefined = urlDefined;
+            }
+
+            const url = this.urlDefined ? sanitizeUrl(domainObject.url) : null;
+            if (this.url !== url) {
+                this.url = url;
+            }
+
+            const conditionSetIdentifier = domainObject.configuration.objectStyles.conditionSetIdentifier;
+            if (this.conditionSetIdentifier !== conditionSetIdentifier) {
+                this.conditionSetIdentifier = conditionSetIdentifier;
+            }
+
+            const useConditionSetOutputAsLabel = this.conditionSetIdentifier && domainObject.configuration.useConditionSetOutputAsLabel;
+            if (this.useConditionSetOutputAsLabel !== useConditionSetOutputAsLabel) {
+                this.useConditionSetOutputAsLabel = useConditionSetOutputAsLabel;
+            }
         }
     }
 };

src/plugins/displayLayout/components/LayoutFrame.vue

@@ -25,7 +25,8 @@
     class="l-layout__frame c-frame"
     :class="{
         'no-frame': !item.hasFrame,
-        'u-inspectable': inspectable
+        'u-inspectable': inspectable,
+        'is-in-small-container': size.width < 600 || size.height < 600
     }"
     :style="style"
 >

src/plugins/displayLayout/components/TelemetryView.vue

@@ -222,20 +222,20 @@ export default {
                 .then(this.setObject);
         }
 
-        this.openmct.time.on("bounds", this.refreshData);
-
         this.status = this.openmct.status.get(this.item.identifier);
         this.removeStatusListener = this.openmct.status.observe(this.item.identifier, this.setStatus);
     },
     beforeDestroy() {
-        this.removeSubscription();
         this.removeStatusListener();
 
         if (this.removeSelectable) {
             this.removeSelectable();
         }
 
-        this.openmct.time.off("bounds", this.refreshData);
+        this.telemetryCollection.off('add', this.setLatestValues);
+        this.telemetryCollection.off('clear', this.refreshData);
+
+        this.telemetryCollection.destroy();
 
         if (this.mutablePromise) {
             this.mutablePromise.then(() => {
@@ -253,34 +253,9 @@ export default {
 
             return `At ${timeFormatter.format(this.datum)} ${this.domainObject.name} had a value of ${this.telemetryValue}${unit}`;
         },
-        requestHistoricalData() {
-            let bounds = this.openmct.time.bounds();
-            let options = {
-                start: bounds.start,
-                end: bounds.end,
-                size: 1,
-                strategy: 'latest'
-            };
-            this.openmct.telemetry.request(this.domainObject, options)
-                .then(data => {
-                    if (data.length > 0) {
-                        this.latestDatum = data[data.length - 1];
-                        this.updateView();
-                    }
-                });
-        },
-        subscribeToObject() {
-            this.subscription = this.openmct.telemetry.subscribe(this.domainObject, function (datum) {
-                const key = this.openmct.time.timeSystem().key;
-                const datumTimeStamp = datum[key];
-                if (this.openmct.time.clock() !== undefined
-                    || (datumTimeStamp
-                        && (this.openmct.time.bounds().end >= datumTimeStamp))
-                ) {
-                    this.latestDatum = datum;
-                    this.updateView();
-                }
-            }.bind(this));
+        setLatestValues(data) {
+            this.latestDatum = data[data.length - 1];
+            this.updateView();
         },
         updateView() {
             if (!this.updatingView) {
@@ -291,17 +266,10 @@ export default {
                 });
             }
         },
-        removeSubscription() {
-            if (this.subscription) {
-                this.subscription();
-                this.subscription = undefined;
-            }
-        },
         refreshData(bounds, isTick) {
             if (!isTick) {
                 this.latestDatum = undefined;
                 this.updateView();
-                this.requestHistoricalData(this.domainObject);
             }
         },
         setObject(domainObject) {
@@ -315,8 +283,13 @@ export default {
             const valueMetadata = this.metadata.value(this.item.value);
             this.customStringformatter = this.openmct.telemetry.customStringFormatter(valueMetadata, this.item.format);
 
-            this.requestHistoricalData();
-            this.subscribeToObject();
+            this.telemetryCollection = this.openmct.telemetry.requestCollection(this.domainObject, {
+                size: 1,
+                strategy: 'latest'
+            });
+            this.telemetryCollection.on('add', this.setLatestValues);
+            this.telemetryCollection.on('clear', this.refreshData);
+            this.telemetryCollection.load();
 
             this.currentObjectPath = this.objectPath.slice();
             this.currentObjectPath.unshift(this.domainObject);

src/plugins/displayLayout/components/layout-frame.scss

@@ -9,6 +9,10 @@
     > *:first-child {
         flex: 1 1 auto;
     }
+
+    &.is-in-small-container {
+        //background: rgba(blue, 0.1);
+    }
 }
 
 .c-frame__move-bar {

src/plugins/flexibleLayout/components/container.vue

@@ -57,7 +57,7 @@
             />
 
             <drop-hint
-                :key="i"
+                :key="'hint-' + i"
                 class="c-fl-frame__drop-hint"
                 :index="i"
                 :allow-drop="allowDrop"
@@ -66,7 +66,7 @@
 
             <resize-handle
                 v-if="(i !== frames.length - 1)"
-                :key="i"
+                :key="'handle-' + i"
                 :index="i"
                 :orientation="rowsLayout ? 'horizontal' : 'vertical'"
                 :is-editing="isEditing"

src/plugins/folderView/components/ListView.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="c-table c-table--sortable c-list-view">
+<div class="c-table c-table--sortable c-list-view c-list-view--sticky-header c-list-view--selectable">
     <table class="c-table__body">
         <thead class="c-table__header">
             <tr>

src/plugins/folderView/components/list-view.scss

@@ -1,32 +0,0 @@
-/******************************* LIST VIEW */
-.c-list-view {
-    overflow-x: auto !important;
-    overflow-y: auto;
-
-    tbody tr {
-        background: $colorListItemBg;
-        transition: $transOut;
-    }
-
-    body.desktop & {
-        tbody tr {
-            cursor: pointer;
-
-            &:hover {
-                background: $colorListItemBgHov;
-                filter: $filterHov;
-                transition: $transIn;
-            }
-        }
-    }
-
-    td {
-        $p: floor($interiorMargin * 1.5);
-        @include ellipsize();
-        line-height: 120%; // Needed for icon alignment
-        max-width: 0;
-        padding-top: $p;
-        padding-bottom: $p;
-        width: 25%;
-    }
-}

src/plugins/formActions/CreateWizard.js

@@ -90,6 +90,9 @@ export default class CreateWizard {
             rows: this.properties.map(property => {
                 const row = JSON.parse(JSON.stringify(property));
                 row.value = this.getValue(row);
+                if (property.validate) {
+                    row.validate = property.validate;
+                }
 
                 return row;
             }).filter(row => row && row.control)

src/plugins/formActions/EditPropertiesAction.js

@@ -51,41 +51,29 @@ export default class EditPropertiesAction extends PropertiesAction {
     /**
      * @private
      */
-    async _onSave(changes) {
-        Object.entries(changes).forEach(([key, value]) => {
-            const properties = key.split('.');
-            let object = this.domainObject;
-            const propertiesLength = properties.length;
-            properties.forEach((property, index) => {
-                const isComplexProperty = propertiesLength > 1 && index !== propertiesLength - 1;
-                if (isComplexProperty && object[property] !== null) {
-                    object = object[property];
-                } else {
-                    object[property] = value;
-                }
+    _onSave(changes) {
+        try {
+            Object.entries(changes).forEach(([key, value]) => {
+                const properties = key.split('.');
+                let object = this.domainObject;
+                const propertiesLength = properties.length;
+                properties.forEach((property, index) => {
+                    const isComplexProperty = propertiesLength > 1 && index !== propertiesLength - 1;
+                    if (isComplexProperty && object[property] !== null) {
+                        object = object[property];
+                    } else {
+                        object[property] = value;
+                    }
+                });
+
+                object = value;
+                this.openmct.objects.mutate(this.domainObject, key, value);
+                this.openmct.notifications.info('Save successful');
             });
-
-            object = value;
-        });
-
-        this.domainObject.modified = Date.now();
-
-        // Show saving progress dialog
-        let dialog = this.openmct.overlays.progressDialog({
-            progressPerc: 'unknown',
-            message: 'Do not navigate away from this page or close this browser tab while this message is displayed.',
-            iconClass: 'info',
-            title: 'Saving'
-        });
-
-        const success = await this.openmct.objects.save(this.domainObject);
-        if (success) {
-            this.openmct.notifications.info('Save successful');
-        } else {
+        } catch (error) {
             this.openmct.notifications.error('Error saving objects');
+            console.error(error);
         }
-
-        dialog.dismiss();
     }
 
     /**

src/plugins/gauge/GaugePlugin.js

@@ -0,0 +1,199 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2022, 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 GaugeViewProvider from './GaugeViewProvider';
+import GaugeFormController from './components/GaugeFormController.vue';
+import Vue from 'vue';
+
+export const GAUGE_TYPES = [
+    ['Filled Dial', 'dial-filled'],
+    ['Needle Dial', 'dial-needle'],
+    ['Vertical Meter', 'meter-vertical'],
+    ['Vertical Meter Inverted', 'meter-vertical-inverted'],
+    ['Horizontal Meter', 'meter-horizontal']
+];
+
+export default function () {
+    return function install(openmct) {
+        openmct.objectViews.addProvider(new GaugeViewProvider(openmct));
+
+        openmct.forms.addNewFormControl('gauge-controller', getGaugeFormController(openmct));
+        openmct.types.addType('gauge', {
+            name: "Gauge",
+            creatable: true,
+            description: "Graphically visualize a telemetry element's current value between a minimum and maximum.",
+            cssClass: 'icon-gauge',
+            initialize(domainObject) {
+                domainObject.composition = [];
+                domainObject.configuration = {
+                    gaugeController: {
+                        gaugeType: GAUGE_TYPES[0][1],
+                        isDisplayMinMax: true,
+                        isDisplayCurVal: true,
+                        isUseTelemetryLimits: true,
+                        limitLow: 10,
+                        limitHigh: 90,
+                        max: 100,
+                        min: 0,
+                        precision: 2
+                    }
+                };
+            },
+            form: [
+                {
+                    name: "Display current value",
+                    control: "toggleSwitch",
+                    cssClass: "l-input",
+                    key: "isDisplayCurVal",
+                    property: [
+                        "configuration",
+                        "gaugeController",
+                        "isDisplayCurVal"
+                    ]
+                },
+                {
+                    name: "Display range values",
+                    control: "toggleSwitch",
+                    cssClass: "l-input",
+                    key: "isDisplayMinMax",
+                    property: [
+                        "configuration",
+                        "gaugeController",
+                        "isDisplayMinMax"
+                    ]
+                },
+                {
+                    name: "Float precision",
+                    control: "numberfield",
+                    cssClass: "l-input-sm",
+                    key: "precision",
+                    property: [
+                        "configuration",
+                        "gaugeController",
+                        "precision"
+                    ]
+                },
+                {
+                    name: "Gauge type",
+                    options: GAUGE_TYPES.map(type => {
+                        return {
+                            name: type[0],
+                            value: type[1]
+                        };
+                    }),
+                    control: "select",
+                    cssClass: "l-input-sm",
+                    key: "gaugeController",
+                    property: [
+                        "configuration",
+                        "gaugeController",
+                        "gaugeType"
+                    ]
+                },
+                {
+                    name: "Value ranges and limits",
+                    control: "gauge-controller",
+                    cssClass: "l-input",
+                    key: "gaugeController",
+                    required: false,
+                    hideFromInspector: true,
+                    property: [
+                        "configuration",
+                        "gaugeController"
+                    ],
+                    validate: ({ value }, callback) => {
+                        if (value.isUseTelemetryLimits) {
+                            return true;
+                        }
+
+                        const { min, max, limitLow, limitHigh } = value;
+                        const valid = {
+                            min: true,
+                            max: true,
+                            limitLow: true,
+                            limitHigh: true
+                        };
+
+                        if (min === '') {
+                            valid.min = false;
+                        }
+
+                        if (max === '') {
+                            valid.max = false;
+                        }
+
+                        if (max < min) {
+                            valid.min = false;
+                            valid.max = false;
+                        }
+
+                        if (limitLow !== '') {
+                            valid.limitLow = min <= limitLow && limitLow < max;
+                        }
+
+                        if (limitHigh !== '') {
+                            valid.limitHigh = min < limitHigh && limitHigh <= max;
+                        }
+
+                        if (valid.limitLow && valid.limitHigh
+                                && limitLow !== '' && limitHigh !== ''
+                                && limitLow > limitHigh) {
+                            valid.limitLow = false;
+                            valid.limitHigh = false;
+                        }
+
+                        if (callback) {
+                            callback(valid);
+                        }
+
+                        return valid.min && valid.max && valid.limitLow && valid.limitHigh;
+                    }
+                }
+            ]
+        });
+    };
+
+    function getGaugeFormController(openmct) {
+        return {
+            show(element, model, onChange) {
+                const rowComponent = new Vue({
+                    el: element,
+                    components: {
+                        GaugeFormController
+                    },
+                    provide: {
+                        openmct
+                    },
+                    data() {
+                        return {
+                            model,
+                            onChange
+                        };
+                    },
+                    template: `<GaugeFormController :model="model" @onChange="onChange"></GaugeFormController>`
+                });
+
+                return rowComponent;
+            }
+        };
+    }
+}

src/plugins/gauge/GaugePluginSpec.js

@@ -0,0 +1,801 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2022, 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 { debounce } from 'lodash';
+
+import Vue from 'vue';
+
+let gaugeDomainObject = {
+    identifier: {
+        key: 'gauge',
+        namespace: 'test-namespace'
+    },
+    type: 'gauge',
+    composition: []
+};
+
+describe('Gauge plugin', () => {
+    let openmct;
+    let child;
+    let gaugeHolder;
+
+    beforeEach((done) => {
+        gaugeHolder = document.createElement('div');
+        gaugeHolder.style.display = 'block';
+        gaugeHolder.style.width = '1920px';
+        gaugeHolder.style.height = '1080px';
+
+        child = document.createElement('div');
+        gaugeHolder.appendChild(child);
+
+        openmct = createOpenMct();
+        openmct.on('start', done);
+
+        openmct.install(openmct.plugins.Gauge());
+
+        openmct.startHeadless();
+    });
+
+    afterEach(() => {
+        return resetApplicationState(openmct);
+    });
+
+    it('Plugin installed by default', () => {
+        const gaugueType = openmct.types.get('gauge');
+
+        expect(gaugueType).not.toBeNull();
+        expect(gaugueType.definition.name).toEqual('Gauge');
+    });
+
+    it('Gaugue plugin is creatable', () => {
+        const gaugueType = openmct.types.get('gauge');
+
+        expect(gaugueType.definition.creatable).toBeTrue();
+    });
+
+    it('Gaugue plugin is creatable', () => {
+        const gaugueType = openmct.types.get('gauge');
+
+        expect(gaugueType.definition.creatable).toBeTrue();
+    });
+
+    it('Gaugue form controller', () => {
+        const gaugeController = openmct.forms.getFormControl('gauge-controller');
+        expect(gaugeController).toBeDefined();
+    });
+
+    describe('Gaugue with Filled Dial', () => {
+        let gaugeViewProvider;
+        let gaugeView;
+        let gaugeViewObject;
+        let mutablegaugeObject;
+        let randomValue;
+
+        const minValue = -1;
+        const maxValue = 1;
+
+        beforeEach(() => {
+            randomValue = Math.random();
+            gaugeViewObject = {
+                ...gaugeDomainObject,
+                configuration: {
+                    gaugeController: {
+                        gaugeType: 'dial-filled',
+                        isDisplayMinMax: true,
+                        isDisplayCurVal: true,
+                        isUseTelemetryLimits: false,
+                        limitLow: -0.9,
+                        limitHigh: 0.9,
+                        max: maxValue,
+                        min: minValue,
+                        precision: 2
+                    }
+                },
+                composition: [
+                    {
+                        namespace: 'test-namespace',
+                        key: 'test-object'
+                    }
+                ],
+                id: 'test-object',
+                name: 'gauge'
+            };
+
+            const testObjectProvider = jasmine.createSpyObj('testObjectProvider', [
+                'get',
+                'create',
+                'update',
+                'observe'
+            ]);
+
+            openmct.editor = {};
+            openmct.editor.isEditing = () => false;
+
+            const applicableViews = openmct.objectViews.get(gaugeViewObject, [gaugeViewObject]);
+            gaugeViewProvider = applicableViews.find(viewProvider => viewProvider.key === 'gauge');
+
+            testObjectProvider.get.and.returnValue(Promise.resolve(gaugeViewObject));
+            testObjectProvider.create.and.returnValue(Promise.resolve(gaugeViewObject));
+            openmct.objects.addProvider('test-namespace', testObjectProvider);
+            testObjectProvider.observe.and.returnValue(() => {});
+            testObjectProvider.create.and.returnValue(Promise.resolve(true));
+            testObjectProvider.update.and.returnValue(Promise.resolve(true));
+
+            spyOn(openmct.telemetry, 'getMetadata').and.returnValue({
+                valuesForHints: () => {
+                    return [
+                        {
+                            source: 'sin'
+                        }
+                    ];
+                },
+                value: () => 1
+            });
+            spyOn(openmct.telemetry, 'getValueFormatter').and.returnValue({
+                parse: () => {
+                    return 2000;
+                }
+            });
+            spyOn(openmct.telemetry, 'getFormatMap').and.returnValue({
+                sin: {
+                    format: (datum) => {
+                        return randomValue;
+                    }
+                }
+            });
+            spyOn(openmct.telemetry, 'getLimits').and.returnValue({ limits: () => Promise.resolve() });
+            spyOn(openmct.telemetry, 'request').and.returnValue(Promise.resolve([randomValue]));
+            spyOn(openmct.time, 'bounds').and.returnValue({
+                start: 1000,
+                end: 5000
+            });
+
+            return openmct.objects.getMutable(gaugeViewObject.identifier).then((mutableObject) => {
+                mutablegaugeObject = mutableObject;
+                gaugeView = gaugeViewProvider.view(mutablegaugeObject);
+                gaugeView.show(child);
+
+                return Vue.nextTick();
+            });
+        });
+
+        afterEach(() => {
+            gaugeView.destroy();
+
+            return resetApplicationState(openmct);
+        });
+
+        it('provides gauge view', () => {
+            expect(gaugeViewProvider).toBeDefined();
+        });
+
+        it('renders gauge element', () => {
+            const gaugeElement = gaugeHolder.querySelectorAll('.js-gauge-wrapper');
+            expect(gaugeElement.length).toBe(1);
+        });
+
+        it('renders major elements', () => {
+            const wrapperElement = gaugeHolder.querySelector('.js-gauge-wrapper');
+            const rangeElement = gaugeHolder.querySelector('.js-gauge-dial-range');
+            const valueElement = gaugeHolder.querySelector('.js-dial-current-value');
+
+            const hasMajorElements = Boolean(wrapperElement && rangeElement && valueElement);
+
+            expect(hasMajorElements).toBe(true);
+        });
+
+        it('renders correct min max values', () => {
+            expect(gaugeHolder.querySelector('.js-gauge-dial-range').textContent).toEqual(`${minValue} ${maxValue}`);
+        });
+
+        it('renders correct current value', (done) => {
+            function WatchUpdateValue() {
+                const textElement = gaugeHolder.querySelector('.js-dial-current-value');
+                expect(Number(textElement.textContent).toFixed(gaugeViewObject.configuration.gaugeController.precision)).toBe(randomValue.toFixed(gaugeViewObject.configuration.gaugeController.precision));
+                done();
+            }
+
+            const debouncedWatchUpdate = debounce(WatchUpdateValue, 200);
+            Vue.nextTick(debouncedWatchUpdate);
+        });
+    });
+
+    describe('Gaugue with Needle Dial', () => {
+        let gaugeViewProvider;
+        let gaugeView;
+        let gaugeViewObject;
+        let mutablegaugeObject;
+        let randomValue;
+
+        const minValue = -1;
+        const maxValue = 1;
+        beforeEach(() => {
+            randomValue = Math.random();
+            gaugeViewObject = {
+                ...gaugeDomainObject,
+                configuration: {
+                    gaugeController: {
+                        gaugeType: 'dial-needle',
+                        isDisplayMinMax: true,
+                        isDisplayCurVal: true,
+                        isUseTelemetryLimits: false,
+                        limitLow: -0.9,
+                        limitHigh: 0.9,
+                        max: maxValue,
+                        min: minValue,
+                        precision: 2
+                    }
+                },
+                composition: [
+                    {
+                        namespace: 'test-namespace',
+                        key: 'test-object'
+                    }
+                ],
+                id: 'test-object',
+                name: 'gauge'
+            };
+
+            const testObjectProvider = jasmine.createSpyObj('testObjectProvider', [
+                'get',
+                'create',
+                'update',
+                'observe'
+            ]);
+
+            openmct.editor = {};
+            openmct.editor.isEditing = () => false;
+
+            const applicableViews = openmct.objectViews.get(gaugeViewObject, [gaugeViewObject]);
+            gaugeViewProvider = applicableViews.find(viewProvider => viewProvider.key === 'gauge');
+
+            testObjectProvider.get.and.returnValue(Promise.resolve(gaugeViewObject));
+            testObjectProvider.create.and.returnValue(Promise.resolve(gaugeViewObject));
+            openmct.objects.addProvider('test-namespace', testObjectProvider);
+            testObjectProvider.observe.and.returnValue(() => {});
+            testObjectProvider.create.and.returnValue(Promise.resolve(true));
+            testObjectProvider.update.and.returnValue(Promise.resolve(true));
+
+            spyOn(openmct.telemetry, 'getMetadata').and.returnValue({
+                valuesForHints: () => {
+                    return [
+                        {
+                            source: 'sin'
+                        }
+                    ];
+                },
+                value: () => 1
+            });
+            spyOn(openmct.telemetry, 'getValueFormatter').and.returnValue({
+                parse: () => {
+                    return 2000;
+                }
+            });
+            spyOn(openmct.telemetry, 'getFormatMap').and.returnValue({
+                sin: {
+                    format: (datum) => {
+                        return randomValue;
+                    }
+                }
+            });
+            spyOn(openmct.telemetry, 'getLimits').and.returnValue({ limits: () => Promise.resolve() });
+            spyOn(openmct.telemetry, 'request').and.returnValue(Promise.resolve([randomValue]));
+            spyOn(openmct.time, 'bounds').and.returnValue({
+                start: 1000,
+                end: 5000
+            });
+
+            return openmct.objects.getMutable(gaugeViewObject.identifier).then((mutableObject) => {
+                mutablegaugeObject = mutableObject;
+                gaugeView = gaugeViewProvider.view(mutablegaugeObject);
+                gaugeView.show(child);
+
+                return Vue.nextTick();
+            });
+        });
+
+        afterEach(() => {
+            gaugeView.destroy();
+
+            return resetApplicationState(openmct);
+        });
+
+        it('provides gauge view', () => {
+            expect(gaugeViewProvider).toBeDefined();
+        });
+
+        it('renders gauge element', () => {
+            const gaugeElement = gaugeHolder.querySelectorAll('.js-gauge-wrapper');
+            expect(gaugeElement.length).toBe(1);
+        });
+
+        it('renders major elements', () => {
+            const wrapperElement = gaugeHolder.querySelector('.js-gauge-wrapper');
+            const rangeElement = gaugeHolder.querySelector('.js-gauge-dial-range');
+            const valueElement = gaugeHolder.querySelector('.js-dial-current-value');
+
+            const hasMajorElements = Boolean(wrapperElement && rangeElement && valueElement);
+
+            expect(hasMajorElements).toBe(true);
+        });
+
+        it('renders correct min max values', () => {
+            expect(gaugeHolder.querySelector('.js-gauge-dial-range').textContent).toEqual(`${minValue} ${maxValue}`);
+        });
+
+        it('renders correct current value', (done) => {
+            function WatchUpdateValue() {
+                const textElement = gaugeHolder.querySelector('.js-dial-current-value');
+                expect(Number(textElement.textContent).toFixed(gaugeViewObject.configuration.gaugeController.precision)).toBe(randomValue.toFixed(gaugeViewObject.configuration.gaugeController.precision));
+                done();
+            }
+
+            const debouncedWatchUpdate = debounce(WatchUpdateValue, 200);
+            Vue.nextTick(debouncedWatchUpdate);
+        });
+    });
+
+    describe('Gaugue with Vertical Meter', () => {
+        let gaugeViewProvider;
+        let gaugeView;
+        let gaugeViewObject;
+        let mutablegaugeObject;
+        let randomValue;
+
+        const minValue = -1;
+        const maxValue = 1;
+        beforeEach(() => {
+            randomValue = Math.random();
+            gaugeViewObject = {
+                ...gaugeDomainObject,
+                configuration: {
+                    gaugeController: {
+                        gaugeType: 'meter-vertical',
+                        isDisplayMinMax: true,
+                        isDisplayCurVal: true,
+                        isUseTelemetryLimits: false,
+                        limitLow: -0.9,
+                        limitHigh: 0.9,
+                        max: maxValue,
+                        min: minValue,
+                        precision: 2
+                    }
+                },
+                composition: [
+                    {
+                        namespace: 'test-namespace',
+                        key: 'test-object'
+                    }
+                ],
+                id: 'test-object',
+                name: 'gauge'
+            };
+
+            const testObjectProvider = jasmine.createSpyObj('testObjectProvider', [
+                'get',
+                'create',
+                'update',
+                'observe'
+            ]);
+
+            openmct.editor = {};
+            openmct.editor.isEditing = () => false;
+
+            const applicableViews = openmct.objectViews.get(gaugeViewObject, [gaugeViewObject]);
+            gaugeViewProvider = applicableViews.find(viewProvider => viewProvider.key === 'gauge');
+
+            testObjectProvider.get.and.returnValue(Promise.resolve(gaugeViewObject));
+            testObjectProvider.create.and.returnValue(Promise.resolve(gaugeViewObject));
+            openmct.objects.addProvider('test-namespace', testObjectProvider);
+            testObjectProvider.observe.and.returnValue(() => {});
+            testObjectProvider.create.and.returnValue(Promise.resolve(true));
+            testObjectProvider.update.and.returnValue(Promise.resolve(true));
+
+            spyOn(openmct.telemetry, 'getMetadata').and.returnValue({
+                valuesForHints: () => {
+                    return [
+                        {
+                            source: 'sin'
+                        }
+                    ];
+                },
+                value: () => 1
+            });
+            spyOn(openmct.telemetry, 'getValueFormatter').and.returnValue({
+                parse: () => {
+                    return 2000;
+                }
+            });
+            spyOn(openmct.telemetry, 'getFormatMap').and.returnValue({
+                sin: {
+                    format: (datum) => {
+                        return randomValue;
+                    }
+                }
+            });
+            spyOn(openmct.telemetry, 'getLimits').and.returnValue({ limits: () => Promise.resolve() });
+            spyOn(openmct.telemetry, 'request').and.returnValue(Promise.resolve([randomValue]));
+            spyOn(openmct.time, 'bounds').and.returnValue({
+                start: 1000,
+                end: 5000
+            });
+
+            return openmct.objects.getMutable(gaugeViewObject.identifier).then((mutableObject) => {
+                mutablegaugeObject = mutableObject;
+                gaugeView = gaugeViewProvider.view(mutablegaugeObject);
+                gaugeView.show(child);
+
+                return Vue.nextTick();
+            });
+        });
+
+        afterEach(() => {
+            gaugeView.destroy();
+
+            return resetApplicationState(openmct);
+        });
+
+        it('provides gauge view', () => {
+            expect(gaugeViewProvider).toBeDefined();
+        });
+
+        it('renders gauge element', () => {
+            const gaugeElement = gaugeHolder.querySelectorAll('.js-gauge-wrapper');
+            expect(gaugeElement.length).toBe(1);
+        });
+
+        it('renders major elements', () => {
+            const wrapperElement = gaugeHolder.querySelector('.js-gauge-wrapper');
+            const rangeElement = gaugeHolder.querySelector('.js-gauge-meter-range');
+            const valueElement = gaugeHolder.querySelector('.js-meter-current-value');
+
+            const hasMajorElements = Boolean(wrapperElement && rangeElement && valueElement);
+
+            expect(hasMajorElements).toBe(true);
+        });
+
+        it('renders correct min max values', () => {
+            expect(gaugeHolder.querySelector('.js-gauge-meter-range').textContent).toEqual(`${maxValue} ${minValue}`);
+        });
+
+        it('renders correct current value', (done) => {
+            function WatchUpdateValue() {
+                const textElement = gaugeHolder.querySelector('.js-meter-current-value');
+                expect(Number(textElement.textContent).toFixed(gaugeViewObject.configuration.gaugeController.precision)).toBe(randomValue.toFixed(gaugeViewObject.configuration.gaugeController.precision));
+                done();
+            }
+
+            const debouncedWatchUpdate = debounce(WatchUpdateValue, 200);
+            Vue.nextTick(debouncedWatchUpdate);
+        });
+    });
+
+    describe('Gaugue with Vertical Meter Inverted', () => {
+        let gaugeViewProvider;
+        let gaugeView;
+        let gaugeViewObject;
+        let mutablegaugeObject;
+
+        beforeEach(() => {
+            gaugeViewObject = {
+                ...gaugeDomainObject,
+                configuration: {
+                    gaugeController: {
+                        gaugeType: 'meter-vertical',
+                        isDisplayMinMax: true,
+                        isDisplayCurVal: true,
+                        isUseTelemetryLimits: false,
+                        limitLow: -0.9,
+                        limitHigh: 0.9,
+                        max: 1,
+                        min: -1,
+                        precision: 2
+                    }
+                },
+                id: 'test-object',
+                name: 'gauge'
+            };
+
+            const testObjectProvider = jasmine.createSpyObj('testObjectProvider', [
+                'get',
+                'create',
+                'update',
+                'observe'
+            ]);
+
+            openmct.editor = {};
+            openmct.editor.isEditing = () => false;
+
+            const applicableViews = openmct.objectViews.get(gaugeViewObject, [gaugeViewObject]);
+            gaugeViewProvider = applicableViews.find(viewProvider => viewProvider.key === 'gauge');
+
+            testObjectProvider.get.and.returnValue(Promise.resolve(gaugeViewObject));
+            testObjectProvider.create.and.returnValue(Promise.resolve(gaugeViewObject));
+            openmct.objects.addProvider('test-namespace', testObjectProvider);
+            testObjectProvider.observe.and.returnValue(() => {});
+            testObjectProvider.create.and.returnValue(Promise.resolve(true));
+            testObjectProvider.update.and.returnValue(Promise.resolve(true));
+
+            return openmct.objects.getMutable(gaugeViewObject.identifier).then((mutableObject) => {
+                mutablegaugeObject = mutableObject;
+
+                gaugeView = gaugeViewProvider.view(mutablegaugeObject);
+                gaugeView.show(child);
+
+                return Vue.nextTick();
+            });
+        });
+
+        afterEach(() => {
+            gaugeView.destroy();
+
+            return resetApplicationState(openmct);
+        });
+
+        it('provides gauge view', () => {
+            expect(gaugeViewProvider).toBeDefined();
+        });
+
+        it('renders gauge element', () => {
+            const gaugeElement = gaugeHolder.querySelectorAll('.js-gauge-wrapper');
+            expect(gaugeElement.length).toBe(1);
+        });
+
+        it('renders major elements', () => {
+            const wrapperElement = gaugeHolder.querySelector('.js-gauge-wrapper');
+            const rangeElement = gaugeHolder.querySelector('.js-gauge-meter-range');
+            const valueElement = gaugeHolder.querySelector('.js-meter-current-value');
+
+            const hasMajorElements = Boolean(wrapperElement && rangeElement && valueElement);
+
+            expect(hasMajorElements).toBe(true);
+        });
+    });
+
+    describe('Gaugue with Horizontal Meter', () => {
+        let gaugeViewProvider;
+        let gaugeView;
+        let gaugeViewObject;
+        let mutablegaugeObject;
+
+        beforeEach(() => {
+            gaugeViewObject = {
+                ...gaugeDomainObject,
+                configuration: {
+                    gaugeController: {
+                        gaugeType: 'meter-vertical',
+                        isDisplayMinMax: true,
+                        isDisplayCurVal: true,
+                        isUseTelemetryLimits: false,
+                        limitLow: -0.9,
+                        limitHigh: 0.9,
+                        max: 1,
+                        min: -1,
+                        precision: 2
+                    }
+                },
+                id: 'test-object',
+                name: 'gauge'
+            };
+
+            const testObjectProvider = jasmine.createSpyObj('testObjectProvider', [
+                'get',
+                'create',
+                'update',
+                'observe'
+            ]);
+
+            openmct.editor = {};
+            openmct.editor.isEditing = () => false;
+
+            const applicableViews = openmct.objectViews.get(gaugeViewObject, [gaugeViewObject]);
+            gaugeViewProvider = applicableViews.find(viewProvider => viewProvider.key === 'gauge');
+
+            testObjectProvider.get.and.returnValue(Promise.resolve(gaugeViewObject));
+            testObjectProvider.create.and.returnValue(Promise.resolve(gaugeViewObject));
+            openmct.objects.addProvider('test-namespace', testObjectProvider);
+            testObjectProvider.observe.and.returnValue(() => {});
+            testObjectProvider.create.and.returnValue(Promise.resolve(true));
+            testObjectProvider.update.and.returnValue(Promise.resolve(true));
+
+            return openmct.objects.getMutable(gaugeViewObject.identifier).then((mutableObject) => {
+                mutablegaugeObject = mutableObject;
+
+                gaugeView = gaugeViewProvider.view(mutablegaugeObject);
+                gaugeView.show(child);
+
+                return Vue.nextTick();
+            });
+        });
+
+        afterEach(() => {
+            gaugeView.destroy();
+
+            return resetApplicationState(openmct);
+        });
+
+        it('provides gauge view', () => {
+            expect(gaugeViewProvider).toBeDefined();
+        });
+
+        it('renders gauge element', () => {
+            const gaugeElement = gaugeHolder.querySelectorAll('.js-gauge-wrapper');
+            expect(gaugeElement.length).toBe(1);
+        });
+
+        it('renders major elements', () => {
+            const wrapperElement = gaugeHolder.querySelector('.js-gauge-wrapper');
+            const rangeElement = gaugeHolder.querySelector('.c-gauge__range');
+            const curveElement = gaugeHolder.querySelector('.c-meter');
+
+            const hasMajorElements = Boolean(wrapperElement && rangeElement && curveElement);
+
+            expect(hasMajorElements).toBe(true);
+        });
+    });
+
+    describe('Gaugue with Filled Dial with Use Telemetry Limits', () => {
+        let gaugeViewProvider;
+        let gaugeView;
+        let gaugeViewObject;
+        let mutablegaugeObject;
+        let randomValue;
+
+        beforeEach(() => {
+            randomValue = Math.random();
+
+            gaugeViewObject = {
+                ...gaugeDomainObject,
+                configuration: {
+                    gaugeController: {
+                        gaugeType: 'dial-filled',
+                        isDisplayMinMax: true,
+                        isDisplayCurVal: true,
+                        isUseTelemetryLimits: true,
+                        limitLow: 10,
+                        limitHigh: 90,
+                        max: 100,
+                        min: 0,
+                        precision: 2
+                    }
+                },
+                composition: [
+                    {
+                        namespace: 'test-namespace',
+                        key: 'test-object'
+                    }
+                ],
+                id: 'test-object',
+                name: 'gauge'
+            };
+
+            const testObjectProvider = jasmine.createSpyObj('testObjectProvider', [
+                'get',
+                'create',
+                'update',
+                'observe'
+            ]);
+
+            openmct.editor = {};
+            openmct.editor.isEditing = () => false;
+
+            const applicableViews = openmct.objectViews.get(gaugeViewObject, [gaugeViewObject]);
+            gaugeViewProvider = applicableViews.find(viewProvider => viewProvider.key === 'gauge');
+
+            testObjectProvider.get.and.returnValue(Promise.resolve(gaugeViewObject));
+            testObjectProvider.create.and.returnValue(Promise.resolve(gaugeViewObject));
+            openmct.objects.addProvider('test-namespace', testObjectProvider);
+            testObjectProvider.observe.and.returnValue(() => {});
+            testObjectProvider.create.and.returnValue(Promise.resolve(true));
+            testObjectProvider.update.and.returnValue(Promise.resolve(true));
+
+            spyOn(openmct.telemetry, 'getMetadata').and.returnValue({
+                valuesForHints: () => {
+                    return [
+                        {
+                            source: 'sin'
+                        }
+                    ];
+                },
+                value: () => 1
+            });
+            spyOn(openmct.telemetry, 'getValueFormatter').and.returnValue({
+                parse: () => {
+                    return 2000;
+                }
+            });
+            spyOn(openmct.telemetry, 'getFormatMap').and.returnValue({
+                sin: {
+                    format: (datum) => {
+                        return randomValue;
+                    }
+                }
+            });
+            spyOn(openmct.telemetry, 'getLimits').and.returnValue(
+                {
+                    limits: () => Promise.resolve({
+                        CRITICAL: {
+                            high: 0.99,
+                            low: -0.99
+                        }
+                    })
+                }
+            );
+            spyOn(openmct.telemetry, 'request').and.returnValue(Promise.resolve([randomValue]));
+            spyOn(openmct.time, 'bounds').and.returnValue({
+                start: 1000,
+                end: 5000
+            });
+
+            return openmct.objects.getMutable(gaugeViewObject.identifier).then((mutableObject) => {
+                mutablegaugeObject = mutableObject;
+                gaugeView = gaugeViewProvider.view(mutablegaugeObject);
+                gaugeView.show(child);
+
+                return Vue.nextTick();
+            });
+        });
+
+        afterEach(() => {
+            gaugeView.destroy();
+
+            return resetApplicationState(openmct);
+        });
+
+        it('provides gauge view', () => {
+            expect(gaugeViewProvider).toBeDefined();
+        });
+
+        it('renders gauge element', () => {
+            const gaugeElement = gaugeHolder.querySelectorAll('.js-gauge-wrapper');
+            expect(gaugeElement.length).toBe(1);
+        });
+
+        it('renders major elements', () => {
+            const wrapperElement = gaugeHolder.querySelector('.js-gauge-wrapper');
+            const rangeElement = gaugeHolder.querySelector('.js-gauge-dial-range');
+            const valueElement = gaugeHolder.querySelector('.js-dial-current-value');
+
+            const hasMajorElements = Boolean(wrapperElement && rangeElement && valueElement);
+
+            expect(hasMajorElements).toBe(true);
+        });
+
+        it('renders correct min max values', () => {
+            expect(gaugeHolder.querySelector('.js-gauge-dial-range').textContent).toEqual(`${gaugeViewObject.configuration.gaugeController.min} ${gaugeViewObject.configuration.gaugeController.max}`);
+        });
+
+        it('renders correct current value', (done) => {
+            function WatchUpdateValue() {
+                const textElement = gaugeHolder.querySelector('.js-dial-current-value');
+                expect(Number(textElement.textContent).toFixed(gaugeViewObject.configuration.gaugeController.precision)).toBe(randomValue.toFixed(gaugeViewObject.configuration.gaugeController.precision));
+                done();
+            }
+
+            const debouncedWatchUpdate = debounce(WatchUpdateValue, 200);
+            Vue.nextTick(debouncedWatchUpdate);
+        });
+    });
+});

src/plugins/gauge/GaugeViewProvider.js

@@ -0,0 +1,67 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2022, 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 GaugeComponent from './components/Gauge.vue';
+import Vue from 'vue';
+
+export default function GaugeViewProvider(openmct) {
+    return {
+        key: 'gauge',
+        name: 'Gauge',
+        cssClass: 'icon-gauge',
+        canView: function (domainObject) {
+            return domainObject.type === 'gauge';
+        },
+        canEdit: function (domainObject) {
+            if (domainObject.type === 'gauge') {
+                return true;
+            }
+        },
+        view: function (domainObject) {
+            let component;
+
+            return {
+                show: function (element) {
+                    component = new Vue({
+                        el: element,
+                        components: {
+                            GaugeComponent
+                        },
+                        provide: {
+                            openmct,
+                            domainObject,
+                            composition: openmct.composition.get(domainObject)
+                        },
+                        template: '<gauge-component></gauge-component>'
+                    });
+                },
+                destroy: function (element) {
+                    component.$destroy();
+                    component = undefined;
+                }
+            };
+        },
+        priority: function () {
+            return 1;
+        }
+    };
+}

src/plugins/gauge/components/Gauge.vue

@@ -0,0 +1,566 @@
+/*****************************************************************************
+* Open MCT, Copyright (c) 2014-2022, 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-gauge__wrapper js-gauge-wrapper"
+    :class="`c-gauge--${gaugeType}`"
+>
+    <template v-if="typeDial">
+        <svg
+            width="0"
+            height="0"
+            class="c-dial__clip-paths"
+        >
+            <defs>
+                <clipPath
+                    id="gaugeBgMask"
+                    clipPathUnits="objectBoundingBox"
+                >
+                    <path d="M0.853553 0.853553C0.944036 0.763071 1 0.638071 1 0.5C1 0.223858 0.776142 0 0.5 0C0.223858 0 0 0.223858 0 0.5C0 0.638071 0.0559644 0.763071 0.146447 0.853553L0.285934 0.714066C0.23115 0.659281 0.197266 0.583598 0.197266 0.5C0.197266 0.332804 0.332804 0.197266 0.5 0.197266C0.667196 0.197266 0.802734 0.332804 0.802734 0.5C0.802734 0.583598 0.76885 0.659281 0.714066 0.714066L0.853553 0.853553Z" />
+                </clipPath>
+                <clipPath
+                    id="gaugeValueMask"
+                    clipPathUnits="objectBoundingBox"
+                >
+                    <path d="M0.18926 0.81074C0.109735 0.731215 0.0605469 0.621351 0.0605469 0.5C0.0605469 0.257298 0.257298 0.0605469 0.5 0.0605469C0.742702 0.0605469 0.939453 0.257298 0.939453 0.5C0.939453 0.621351 0.890265 0.731215 0.81074 0.81074L0.714066 0.714066C0.76885 0.659281 0.802734 0.583599 0.802734 0.5C0.802734 0.332804 0.667196 0.197266 0.5 0.197266C0.332804 0.197266 0.197266 0.332804 0.197266 0.5C0.197266 0.583599 0.23115 0.659281 0.285934 0.714066L0.18926 0.81074Z" />
+                </clipPath>
+            </defs>
+        </svg>
+
+        <svg
+            class="c-dial__range c-gauge__range js-gauge-dial-range"
+            viewBox="0 0 512 512"
+        >
+            <text
+                v-if="displayMinMax"
+                font-size="35"
+                transform="translate(105 455) rotate(-45)"
+            >{{ rangeLow }}</text>
+            <text
+                v-if="displayMinMax"
+                font-size="35"
+                transform="translate(407 455) rotate(45)"
+                text-anchor="end"
+            >{{ rangeHigh }}</text>
+        </svg>
+
+        <svg
+            class="c-dial__current-value-text-wrapper"
+            viewBox="0 0 512 512"
+        >
+            <svg
+                v-if="displayCurVal"
+                class="c-dial__current-value-text-sizer"
+                :viewBox="curValViewBox"
+            >
+                <text
+                    class="c-dial__current-value-text js-dial-current-value"
+                    lengthAdjust="spacing"
+                    text-anchor="middle"
+                    style="transform: translate(50%, 70%)"
+                >{{ curVal }}</text>
+            </svg>
+        </svg>
+
+        <svg
+            class="c-dial__bg"
+            viewBox="0 0 10 10"
+        >
+
+            <g
+                v-if="limitLow !== null && dialLowLimitDeg < getLimitDegree('low', 'max')"
+                class="c-dial__limit-low"
+                :style="`transform: rotate(${dialLowLimitDeg}deg)`"
+            >
+                <rect
+                    v-if="dialLowLimitDeg >= getLimitDegree('low', 'q1')"
+                    class="c-dial__low-limit__low"
+                    x="5"
+                    y="5"
+                    width="5"
+                    height="5"
+                />
+                <rect
+                    v-if="dialLowLimitDeg >= getLimitDegree('low', 'q2')"
+                    class="c-dial__low-limit__mid"
+                    x="5"
+                    y="0"
+                    width="5"
+                    height="5"
+                />
+                <rect
+                    v-if="dialLowLimitDeg >= getLimitDegree('low', 'q3')"
+                    class="c-dial__low-limit__high"
+                    x="0"
+                    y="0"
+                    width="5"
+                    height="5"
+                />
+            </g>
+
+            <g
+                v-if="limitHigh !== null && dialHighLimitDeg < getLimitDegree('high', 'max')"
+                class="c-dial__limit-high"
+                :style="`transform: rotate(${dialHighLimitDeg}deg)`"
+            >
+                <rect
+                    v-if="dialHighLimitDeg <= getLimitDegree('high', 'max')"
+                    class="c-dial__high-limit__low"
+                    x="0"
+                    y="5"
+                    width="5"
+                    height="5"
+                />
+                <rect
+                    v-if="dialHighLimitDeg <= getLimitDegree('high', 'q2')"
+                    class="c-dial__high-limit__mid"
+                    x="0"
+                    y="0"
+                    width="5"
+                    height="5"
+                />
+                <rect
+                    v-if="dialHighLimitDeg <= getLimitDegree('high', 'q3')"
+                    class="c-dial__high-limit__high"
+                    x="5"
+                    y="0"
+                    width="5"
+                    height="5"
+                />
+            </g>
+        </svg>
+
+        <svg
+            v-if="typeFilledDial"
+            class="c-dial__filled-value-wrapper"
+            viewBox="0 0 10 10"
+        >
+            <g
+                class="c-dial__filled-value"
+                :style="`transform: rotate(${degValueFilledDial}deg)`"
+            >
+                <rect
+                    v-if="degValue >= getLimitDegree('low', 'q1')"
+                    class="c-dial__filled-value__low"
+                    x="5"
+                    y="5"
+                    width="5"
+                    height="5"
+                />
+                <rect
+                    v-if="degValue >= getLimitDegree('low', 'q2')"
+                    class="c-dial__filled-value__mid"
+                    x="5"
+                    y="0"
+                    width="5"
+                    height="5"
+                />
+                <rect
+                    v-if="degValue >= getLimitDegree('low', 'q3')"
+                    class="c-dial__filled-value__high"
+                    x="0"
+                    y="0"
+                    width="5"
+                    height="5"
+                />
+            </g>
+        </svg>
+
+        <svg
+            v-if="valueInBounds && typeNeedleDial"
+            class="c-dial__needle-value-wrapper"
+            viewBox="0 0 10 10"
+        >
+            <g
+                class="c-dial__needle-value"
+                :style="`transform: rotate(${degValue}deg)`"
+            >
+                <path d="M4.90234 9.39453L5.09766 9.39453L5.30146 8.20874C6.93993 8.05674 8.22265 6.67817 8.22266 5C8.22266 3.22018 6.77982 1.77734 5 1.77734C3.22018 1.77734 1.77734 3.22018 1.77734 5C1.77734 6.67817 3.06007 8.05674 4.69854 8.20874L4.90234 9.39453Z" />
+            </g>
+        </svg>
+    </template>
+
+    <template v-if="typeMeter">
+        <div class="c-meter">
+            <div
+                v-if="displayMinMax"
+                class="c-gauge__range c-meter__range js-gauge-meter-range"
+            >
+                <div class="c-meter__range__high">{{ rangeHigh }}</div>
+                <div class="c-meter__range__low">{{ rangeLow }}</div>
+            </div>
+            <div class="c-meter__bg">
+                <template v-if="typeMeterVertical">
+                    <div
+                        class="c-meter__value"
+                        :style="`transform: translateY(${meterValueToPerc}%)`"
+                    ></div>
+
+                    <div
+                        v-if="limitHigh !== null && meterHighLimitPerc > 0"
+                        class="c-meter__limit-high"
+                        :style="`height: ${meterHighLimitPerc}%`"
+                    ></div>
+
+                    <div
+                        v-if="limitLow !== null && meterLowLimitPerc > 0"
+                        class="c-meter__limit-low"
+                        :style="`height: ${meterLowLimitPerc}%`"
+                    ></div>
+                </template>
+
+                <template v-if="typeMeterHorizontal">
+                    <div
+                        class="c-meter__value"
+                        :style="`transform: translateX(${meterValueToPerc * -1}%)`"
+                    ></div>
+
+                    <div
+                        v-if="limitHigh !== null && meterHighLimitPerc > 0"
+                        class="c-meter__limit-high"
+                        :style="`width: ${meterHighLimitPerc}%`"
+                    ></div>
+
+                    <div
+                        v-if="limitLow !== null && meterLowLimitPerc > 0"
+                        class="c-meter__limit-low"
+                        :style="`width: ${meterLowLimitPerc}%`"
+                    ></div>
+                </template>
+
+                <svg
+                    class="c-meter__current-value-text-wrapper"
+                    viewBox="0 0 512 512"
+                >
+                    <svg
+                        v-if="displayCurVal"
+                        class="c-meter__current-value-text-sizer"
+                        :viewBox="curValViewBox"
+                        preserveAspectRatio="xMidYMid meet"
+                    >
+                        <text
+                            class="c-dial__current-value-text js-meter-current-value"
+                            lengthAdjust="spacing"
+                            text-anchor="middle"
+                            style="transform: translate(50%, 70%)"
+                        >{{ curVal }}</text>
+                    </svg>
+                </svg>
+            </div>
+        </div>
+    </template>
+</div>
+</template>
+
+<script>
+import { DIAL_VALUE_DEG_OFFSET, getLimitDegree } from '../gauge-limit-util';
+
+const LIMIT_PADDING_IN_PERCENT = 10;
+
+export default {
+    name: 'Gauge',
+    inject: ['openmct', 'domainObject', 'composition'],
+    data() {
+        let gaugeController = this.domainObject.configuration.gaugeController;
+
+        return {
+            curVal: 0,
+            digits: 3,
+            precision: gaugeController.precision,
+            displayMinMax: gaugeController.isDisplayMinMax,
+            displayCurVal: gaugeController.isDisplayCurVal,
+            limitHigh: gaugeController.limitHigh,
+            limitLow: gaugeController.limitLow,
+            rangeHigh: gaugeController.max,
+            rangeLow: gaugeController.min,
+            gaugeType: gaugeController.gaugeType,
+            activeTimeSystem: this.openmct.time.timeSystem()
+        };
+    },
+    computed: {
+        degValue() {
+            return this.percentToDegrees(this.valToPercent(this.curVal));
+        },
+        degValueFilledDial() {
+            if (this.curVal > this.rangeHigh) {
+                return this.percentToDegrees(100);
+            }
+
+            return this.percentToDegrees(this.valToPercent(this.curVal));
+        },
+        dialHighLimitDeg() {
+            return this.percentToDegrees(this.valToPercent(this.limitHigh));
+        },
+        dialLowLimitDeg() {
+            return this.percentToDegrees(this.valToPercent(this.limitLow));
+        },
+        curValViewBox() {
+            const DIGITS_RATIO = 10;
+            const VIEWBOX_STR = '0 0 X 15';
+
+            return VIEWBOX_STR.replace('X', this.digits * DIGITS_RATIO);
+        },
+        typeDial() {
+            return this.matchGaugeType('dial');
+        },
+        typeFilledDial() {
+            return this.matchGaugeType('dial-filled');
+        },
+        typeNeedleDial() {
+            return this.matchGaugeType('dial-needle');
+        },
+        typeMeter() {
+            return this.matchGaugeType('meter');
+        },
+        typeMeterHorizontal() {
+            return this.matchGaugeType('horizontal');
+        },
+        typeMeterVertical() {
+            return this.matchGaugeType('vertical');
+        },
+        typeMeterInverted() {
+            return this.matchGaugeType('inverted');
+        },
+        meterValueToPerc() {
+            const meterDirection = (this.typeMeterInverted) ? -1 : 1;
+
+            if (this.curVal <= this.rangeLow) {
+                return meterDirection * 100;
+            }
+
+            if (this.curVal >= this.rangeHigh) {
+                return 0;
+            }
+
+            return this.valToPercentMeter(this.curVal) * meterDirection;
+        },
+        meterHighLimitPerc() {
+            return this.valToPercentMeter(this.limitHigh);
+        },
+        meterLowLimitPerc() {
+            return 100 - this.valToPercentMeter(this.limitLow);
+        },
+        valueInBounds() {
+            return (this.curVal >= this.rangeLow && this.curVal <= this.rangeHigh);
+        },
+        timeFormatter() {
+            const timeSystem = this.activeTimeSystem;
+            const metadataValue = this.metadata.value(timeSystem.key) || { format: timeSystem.key };
+
+            return this.openmct.telemetry.getValueFormatter(metadataValue);
+        }
+    },
+    watch: {
+        curVal(newCurValue) {
+            if (this.digits < newCurValue.toString().length) {
+                this.digits = newCurValue.toString().length;
+            }
+        }
+    },
+    mounted() {
+        this.composition.on('add', this.addedToComposition);
+        this.composition.on('remove', this.removeTelemetryObject);
+
+        this.composition.load();
+
+        this.openmct.time.on('bounds', this.refreshData);
+        this.openmct.time.on('timeSystem', this.setTimeSystem);
+    },
+    destroyed() {
+        this.composition.off('add', this.addedToComposition);
+        this.composition.off('remove', this.removeTelemetryObject);
+
+        if (this.unsubscribe) {
+            this.unsubscribe();
+        }
+
+        this.openmct.time.off('bounds', this.refreshData);
+        this.openmct.time.off('timeSystem', this.setTimeSystem);
+    },
+    methods: {
+        getLimitDegree: getLimitDegree,
+        addTelemetryObjectAndSubscribe(domainObject) {
+            this.telemetryObject = domainObject;
+            this.request();
+            this.subscribe();
+        },
+        addedToComposition(domainObject) {
+            if (this.telemetryObject) {
+                this.confirmRemoval(domainObject);
+            } else {
+                this.addTelemetryObjectAndSubscribe(domainObject);
+            }
+        },
+        confirmRemoval(domainObject) {
+            const dialog = this.openmct.overlays.dialog({
+                iconClass: 'alert',
+                message: 'This action will replace the current telemetry source. Do you want to continue?',
+                buttons: [
+                    {
+                        label: 'Ok',
+                        emphasis: true,
+                        callback: () => {
+                            this.removeFromComposition();
+                            this.removeTelemetryObject();
+                            this.addTelemetryObjectAndSubscribe(domainObject);
+                            dialog.dismiss();
+                        }
+                    },
+                    {
+                        label: 'Cancel',
+                        callback: () => {
+                            this.removeFromComposition(domainObject);
+                            dialog.dismiss();
+                        }
+                    }
+                ]
+            });
+        },
+        matchGaugeType(str) {
+            return this.gaugeType.indexOf(str) !== -1;
+        },
+        percentToDegrees(vPercent) {
+            return this.round(((vPercent / 100) * 270) + DIAL_VALUE_DEG_OFFSET, 2);
+        },
+        removeFromComposition(telemetryObject = this.telemetryObject) {
+            let composition = this.domainObject.composition.filter(id =>
+                !this.openmct.objects.areIdsEqual(id, telemetryObject.identifier)
+            );
+
+            this.openmct.objects.mutate(this.domainObject, 'composition', composition);
+        },
+        refreshData(bounds, isTick) {
+            if (!isTick) {
+                this.request();
+            }
+        },
+        removeTelemetryObject() {
+            if (this.unsubscribe) {
+                this.unsubscribe();
+                this.unsubscribe = null;
+            }
+
+            this.metadata = null;
+            this.formats = null;
+            this.valueKey = null;
+            this.limitHigh = null;
+            this.limitLow = null;
+            this.rangeHigh = null;
+            this.rangeLow = null;
+        },
+        request(domainObject = this.telemetryObject) {
+            this.metadata = this.openmct.telemetry.getMetadata(domainObject);
+            this.formats = this.openmct.telemetry.getFormatMap(this.metadata);
+            const LimitEvaluator = this.openmct.telemetry.getLimits(domainObject);
+            LimitEvaluator.limits().then(this.updateLimits);
+
+            this.valueKey = this
+                .metadata
+                .valuesForHints(['range'])[0].source;
+
+            this.openmct
+                .telemetry
+                .request(domainObject, { strategy: 'latest' })
+                .then(values => {
+                    const length = values.length;
+                    this.updateValue(values[length - 1]);
+                });
+        },
+        round(val, decimals = this.precision) {
+            let precision = Math.pow(10, decimals);
+
+            return Math.round(val * precision) / precision;
+        },
+        setTimeSystem(timeSystem) {
+            this.activeTimeSystem = timeSystem;
+        },
+        subscribe(domainObject = this.telemetryObject) {
+            this.unsubscribe = this.openmct
+                .telemetry
+                .subscribe(domainObject, this.updateValue.bind(this));
+        },
+        updateLimits(telemetryLimit) {
+            if (!telemetryLimit || !this.domainObject.configuration.gaugeController.isUseTelemetryLimits) {
+                return;
+            }
+
+            let limits = {
+                high: 0,
+                low: 0
+            };
+            if (telemetryLimit.CRITICAL) {
+                limits = telemetryLimit.CRITICAL;
+            } else if (telemetryLimit.DISTRESS) {
+                limits = telemetryLimit.DISTRESS;
+            } else if (telemetryLimit.SEVERE) {
+                limits = telemetryLimit.SEVERE;
+            } else if (telemetryLimit.WARNING) {
+                limits = telemetryLimit.WARNING;
+            } else if (telemetryLimit.WATCH) {
+                limits = telemetryLimit.WATCH;
+            } else {
+                this.openmct.notifications.error('No limits definition for given telemetry');
+            }
+
+            this.limitHigh = this.round(limits.high[this.valueKey]);
+            this.limitLow = this.round(limits.low[this.valueKey]);
+            this.rangeHigh = this.round(this.limitHigh + this.limitHigh * LIMIT_PADDING_IN_PERCENT / 100);
+            this.rangeLow = this.round(this.limitLow - Math.abs(this.limitLow * LIMIT_PADDING_IN_PERCENT / 100));
+        },
+        updateValue(datum) {
+            this.datum = datum;
+
+            if (this.isRendering) {
+                return;
+            }
+
+            const { start, end } = this.openmct.time.bounds();
+            const parsedValue = this.timeFormatter.parse(this.datum);
+
+            const beforeStartOfBounds = parsedValue < start;
+            const afterEndOfBounds = parsedValue > end;
+            if (afterEndOfBounds || beforeStartOfBounds) {
+                return;
+            }
+
+            this.isRendering = true;
+            requestAnimationFrame(() => {
+                this.isRendering = false;
+
+                this.curVal = this.round(this.formats[this.valueKey].format(this.datum), this.precision);
+            });
+        },
+        valToPercent(vValue) {
+            // Used by dial
+            if (vValue >= this.rangeHigh && this.typeFilledDial) {
+                // For filled dial, clip values over the high range to prevent over-rotation
+                return 100;
+            }
+
+            return ((vValue - this.rangeLow) / (this.rangeHigh - this.rangeLow)) * 100;
+        },
+        valToPercentMeter(vValue) {
+            return this.round((this.rangeHigh - vValue) / (this.rangeHigh - this.rangeLow) * 100, 2);
+        }
+    }
+};
+</script>

src/plugins/gauge/components/GaugeFormController.vue

@@ -0,0 +1,171 @@
+/*****************************************************************************
+* Open MCT, Copyright (c) 2014-2022, 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>
+<span class="form-control">
+    <span
+        class="field control"
+        :class="model.cssClass"
+    >
+        <ToggleSwitch
+            :id="'gaugeToggle'"
+            :checked="isUseTelemetryLimits"
+            label="Use telemetry limits for minimum and maximum ranges"
+            @change="toggleUseTelemetryLimits"
+        />
+
+        <div
+            v-if="!isUseTelemetryLimits"
+            class="c-form--sub-grid"
+        >
+            <div class="c-form__row">
+                <span class="req-indicator req">
+                </span>
+                <label>Range minimum value</label>
+                <input
+                    ref="min"
+                    v-model.number="min"
+                    data-field-name="min"
+                    type="number"
+                    @input="onChange"
+                >
+            </div>
+
+            <div class="c-form__row">
+                <span class="req-indicator">
+                </span>
+                <label>Range low limit</label>
+                <input
+                    ref="limitLow"
+                    v-model.number="limitLow"
+                    data-field-name="limitLow"
+                    type="number"
+                    @input="onChange"
+                >
+            </div>
+
+            <div class="c-form__row">
+                <span class="req-indicator req">
+                </span>
+                <label>Range maximum value</label>
+                <input
+                    ref="max"
+                    v-model.number="max"
+                    data-field-name="max"
+                    type="number"
+                    @input="onChange"
+                >
+            </div>
+
+            <div class="c-form__row">
+                <span class="req-indicator">
+                </span>
+                <label>Range high limit</label>
+                <input
+                    ref="limitHigh"
+                    v-model.number="limitHigh"
+                    data-field-name="limitHigh"
+                    type="number"
+                    @input="onChange"
+                >
+            </div>
+        </div>
+    </span>
+</span>
+</template>
+
+<script>
+import ToggleSwitch from '@/ui/components/ToggleSwitch.vue';
+
+export default {
+    components: {
+        ToggleSwitch
+    },
+    props: {
+        model: {
+            type: Object,
+            required: true
+        }
+    },
+    data() {
+        return {
+            isUseTelemetryLimits: this.model.value.isUseTelemetryLimits,
+            isDisplayMinMax: this.model.value.isDisplayMinMax,
+            isDisplayCurVal: this.model.value.isDisplayCurVal,
+            limitHigh: this.model.value.limitHigh,
+            limitLow: this.model.value.limitLow,
+            max: this.model.value.max,
+            min: this.model.value.min
+        };
+    },
+    methods: {
+        onChange(event) {
+            const data = {
+                model: this.model,
+                value: {
+                    gaugeType: this.model.value.gaugeType,
+                    isDisplayMinMax: this.isDisplayMinMax,
+                    isDisplayCurVal: this.isDisplayCurVal,
+                    isUseTelemetryLimits: this.isUseTelemetryLimits,
+                    limitLow: this.limitLow,
+                    limitHigh: this.limitHigh,
+                    max: this.max,
+                    min: this.min,
+                    precision: this.model.value.precision
+                }
+            };
+
+            if (event) {
+                const target = event.target;
+                const targetIndicator = target.parentElement.querySelector('.req-indicator');
+                if (targetIndicator.classList.contains('req')) {
+                    targetIndicator.classList.add('visited');
+                }
+
+                this.model.validate(data, (valid) => {
+                    Object.entries(valid).forEach(([key, isValid]) => {
+                        const element = this.$refs[key];
+                        const reqIndicatorElement = element.parentElement.querySelector('.req-indicator');
+                        reqIndicatorElement.classList.toggle('invalid', !isValid);
+
+                        if (reqIndicatorElement.classList.contains('req') && (!isValid || reqIndicatorElement.classList.contains('visited'))) {
+                            reqIndicatorElement.classList.toggle('valid', isValid);
+                        }
+                    });
+                });
+            }
+
+            this.$emit('onChange', data);
+        },
+        toggleUseTelemetryLimits() {
+            this.isUseTelemetryLimits = !this.isUseTelemetryLimits;
+
+            this.onChange();
+        },
+        toggleMinMax() {
+            this.isDisplayMinMax = !this.isDisplayMinMax;
+
+            this.onChange();
+        }
+    }
+};
+</script>

src/plugins/gauge/gauge-limit-util.js

@@ -0,0 +1,39 @@
+const GAUGE_LIMITS = {
+    q1: 0,
+    q2: 90,
+    q3: 180,
+    q4: 270
+};
+
+export const DIAL_VALUE_DEG_OFFSET = 45;
+
+// type: low, high
+// quadrant: low, mid, high, max
+export function getLimitDegree(type, quadrant) {
+    if (quadrant === 'max') {
+        return GAUGE_LIMITS.q4 + DIAL_VALUE_DEG_OFFSET;
+    }
+
+    return type === 'low'
+        ? getLowLimitDegree(quadrant)
+        : getHighLimitDegree(quadrant)
+    ;
+}
+
+function getLowLimitDegree(quadrant) {
+    return GAUGE_LIMITS[quadrant] + DIAL_VALUE_DEG_OFFSET;
+}
+
+function getHighLimitDegree(quadrant) {
+    if (quadrant === 'q1') {
+        return GAUGE_LIMITS.q4 + DIAL_VALUE_DEG_OFFSET;
+    }
+
+    if (quadrant === 'q2') {
+        return GAUGE_LIMITS.q3 + DIAL_VALUE_DEG_OFFSET;
+    }
+
+    if (quadrant === 'q3') {
+        return GAUGE_LIMITS.q2 + DIAL_VALUE_DEG_OFFSET;
+    }
+}

src/plugins/gauge/gauge.scss

@@ -0,0 +1,223 @@
+.is-object-type-gauge {
+  overflow: hidden;
+}
+
+.req-indicator {
+  width: 20px;
+
+  &.invalid,
+  &.invalid.req { @include validationState($glyph-icon-x, $colorFormInvalid); }
+  &.valid,
+  &.valid.req { @include validationState($glyph-icon-check, $colorFormValid); }
+  &.req { @include validationState($glyph-icon-asterisk, $colorFormRequired); }
+}
+
+.c-gauge {
+  // Both dial and meter types
+  overflow: hidden;
+
+  &__range {
+    $c: $colorGaugeRange;
+    color: $c;
+
+    text {
+      fill: $c;
+    }
+  }
+
+  &__wrapper {
+    @include abs();
+    overflow: hidden;
+  }
+}
+
+/********************************************** DIAL GAUGE */
+svg[class*='c-dial'] {
+  max-height: 100%;
+  max-width: 100%;
+  position: absolute;
+
+  g {
+    transform-origin: center;
+  }
+}
+
+.c-dial {
+  &__bg {
+    background: $colorGaugeBg;
+    clip-path: url(#gaugeBgMask);
+  }
+
+  &__limit-high rect { fill: $colorGaugeLimitHigh; }
+  &__limit-low rect { fill: $colorGaugeLimitLow; }
+
+  &__filled-value-wrapper {
+    clip-path: url(#gaugeValueMask);
+  }
+
+  &__needle-value-wrapper {
+    clip-path: url(#gaugeValueMask);
+  }
+
+  &__filled-value { fill: $colorGaugeValue; }
+
+  &__needle-value {
+    fill: $colorGaugeValue;
+    transition: transform $transitionTimeGauge;
+  }
+
+  &__current-value-text {
+    fill: $colorGaugeTextValue;
+    font-family: $heroFont;
+  }
+}
+
+/********************************************** METER GAUGE */
+.c-meter {
+  // Common styles for c-meter
+  @include abs();
+  display: flex;
+
+  svg {
+    // current-value-text
+    position: absolute;
+    height: 100%;
+    width: 100%;
+  }
+
+  &__range {
+    display: flex;
+    flex: 0 0 auto;
+    justify-content: space-between;
+  }
+
+  &__bg {
+    background: $colorGaugeBg;
+    border-radius: $basicCr;
+    flex: 1 1 auto;
+    overflow: hidden;
+  }
+
+  &__value {
+    // Filled area
+    position: absolute;
+    background: $colorGaugeValue;
+    transition: transform $transitionTimeGauge;
+    z-index: 1;
+  }
+
+  .c-gauge__curval {
+    fill: $colorGaugeMeterTextValue !important;
+  }
+
+  [class*='limit'] {
+    position: absolute;
+  }
+
+  &__limit-high {
+    background: $colorGaugeLimitHigh;
+  }
+
+  &__limit-low {
+    background: $colorGaugeLimitLow;
+  }
+}
+
+.c-meter {
+  .c-gauge--meter-vertical &,
+  .c-gauge--meter-vertical-inverted & {
+    &__range {
+      flex-direction: column;
+      min-width: min-content;
+      margin-right: $interiorMarginSm;
+      text-align: right;
+    }
+
+    &__value {
+      // Filled area
+      $lrM: $marginGaugeMeterValue;
+      left: $lrM;
+      right: $lrM;
+      top: 0;
+      bottom: 0;
+    }
+
+    [class*='limit'] {
+      left: 0;
+      right: 0;
+    }
+  }
+
+  .c-gauge--meter-vertical & {
+    &__limit-low {
+      bottom: 0;
+    }
+
+    &__limit-high {
+      top: 0;
+    }
+  }
+
+  .c-gauge--meter-vertical-inverted & {
+    &__limit-low {
+      top: 0;
+    }
+
+    &__limit-high {
+      bottom: 0;
+    }
+
+    &__range__low {
+      order: 1;
+    }
+
+    &__range__high {
+      order: 2;
+    }
+  }
+
+  .c-gauge--meter-horizontal & {
+    flex-direction: column;
+
+    &__range {
+      flex-direction: row;
+      min-height: min-content;
+      margin-top: $interiorMarginSm;
+      order: 2;
+
+      &__high {
+        order: 2;
+      }
+
+      &__low {
+        order: 1;
+      }
+    }
+
+    &__bg {
+      order: 1;
+    }
+
+    &__value {
+      // Filled area
+      $m: $marginGaugeMeterValue;
+      top: $m;
+      bottom: $m;
+      left: 0;
+      right: 0;
+    }
+
+    [class*='limit'] {
+      top: 0;
+      bottom: 0;
+    }
+
+    &__limit-low {
+      left: 0;
+    }
+
+    &__limit-high {
+      right: 0;
+    }
+  }
+}

src/plugins/imagery/ImageryView.js

@@ -2,11 +2,16 @@ import ImageryViewComponent from './components/ImageryView.vue';
 
 import Vue from 'vue';
 
+const DEFAULT_IMAGE_FRESHNESS_OPTIONS = {
+    fadeOutDelayTime: '0s',
+    fadeOutDurationTime: '30s'
+};
 export default class ImageryView {
-    constructor(openmct, domainObject, objectPath) {
+    constructor(openmct, domainObject, objectPath, options) {
         this.openmct = openmct;
         this.domainObject = domainObject;
         this.objectPath = objectPath;
+        this.options = options;
         this.component = undefined;
     }
 
@@ -27,6 +32,7 @@ export default class ImageryView {
                 openmct: this.openmct,
                 domainObject: this.domainObject,
                 objectPath: alternateObjectPath || this.objectPath,
+                imageFreshnessOptions: this.options?.imageFreshness || DEFAULT_IMAGE_FRESHNESS_OPTIONS,
                 currentView: this
             },
             data() {

src/plugins/imagery/ImageryViewProvider.js

@@ -21,7 +21,7 @@
  *****************************************************************************/
 import ImageryView from './ImageryView';
 
-export default function ImageryViewProvider(openmct) {
+export default function ImageryViewProvider(openmct, options) {
     const type = 'example.imagery';
 
     function hasImageTelemetry(domainObject) {
@@ -43,7 +43,7 @@ export default function ImageryViewProvider(openmct) {
             return hasImageTelemetry(domainObject) && (!isChildOfTimeStrip || openmct.router.isNavigatedObject(objectPath));
         },
         view: function (domainObject, objectPath) {
-            return new ImageryView(openmct, domainObject, objectPath);
+            return new ImageryView(openmct, domainObject, objectPath, options);
         }
     };
 }

src/plugins/imagery/components/Compass/compass.scss

@@ -14,7 +14,7 @@ $elemBg: rgba(black, 0.7);
     position: absolute;
     left: 0;
     top: 0;
-    z-index: 5;
+    z-index: 2;
     @include userSelectNone;
 }
 

src/plugins/imagery/components/FilterSettings.vue

@@ -1,74 +0,0 @@
-<template>
-<div
-    class="c-control-menu c-menu--to-left c-menu--has-close-btn c-image-controls c-image-controls--filters"
-    @click="handleClose"
->
-    <div
-        class="c-image-controls__controls"
-        @click="$event.stopPropagation()"
-    >
-        <span class="c-image-controls__sliders">
-            <div class="c-image-controls__slider-wrapper icon-brightness">
-                <input
-                    v-model="filters.brightness"
-                    type="range"
-                    min="0"
-                    max="500"
-                    @change="notifyFiltersChanged"
-                    @input="notifyFiltersChanged"
-                >
-            </div>
-            <div class="c-image-controls__slider-wrapper icon-contrast">
-                <input
-                    v-model="filters.contrast"
-                    type="range"
-                    min="0"
-                    max="500"
-                    @change="notifyFiltersChanged"
-                    @input="notifyFiltersChanged"
-                >
-            </div>
-        </span>
-        <span class="c-image-controls__reset-btn">
-            <a
-                class="s-icon-button icon-reset t-btn-reset"
-                @click="resetFilters"
-            ></a>
-        </span>
-    </div>
-
-    <button class="c-click-icon icon-x t-btn-close c-switcher-menu__close-button"></button>
-</div>
-</template>
-
-<script>
-export default {
-    inject: ['openmct'],
-    data() {
-        return {
-            filters: {
-                brightness: 100,
-                contrast: 100
-            }
-        };
-    },
-    methods: {
-        handleClose(e) {
-            const closeButton = e.target.classList.contains('c-switcher-menu__close-button');
-            if (!closeButton) {
-                e.stopPropagation();
-            }
-        },
-        notifyFiltersChanged() {
-            this.$emit('filterChanged', this.filters);
-        },
-        resetFilters() {
-            this.filters = {
-                brightness: 100,
-                contrast: 100
-            };
-            this.notifyFiltersChanged();
-        }
-    }
-};
-</script>

src/plugins/imagery/components/ImageControls.vue

@@ -21,62 +21,75 @@
  *****************************************************************************/
 
 <template>
-<div class="h-local-controls h-local-controls--overlay-content h-local-controls--menus-aligned c-local-controls--show-on-hover">
-    <imagery-view-menu-switcher
-        :icon-class="'icon-brightness'"
-        :title="'Brightness and contrast'"
-    >
-        <filter-settings @filterChanged="updateFilterValues" />
-    </imagery-view-menu-switcher>
+<div class="h-local-controls h-local-controls--overlay-content c-local-controls--show-on-hover c-image-controls__controls">
+    <div class="c-image-controls__control c-image-controls__zoom icon-magnify">
+        <div class="c-button-set c-button-set--strip-h">
+            <button
+                class="c-button t-btn-zoom-out icon-minus"
+                title="Zoom out"
+                @click="zoomOut"
+            ></button>
 
-    <imagery-view-menu-switcher
-        v-if="layers.length"
-        :icon-class="'icon-layers'"
-        :title="'Layers'"
-    >
-        <layer-settings
-            :layers="layers"
-            @toggleLayerVisibility="toggleLayerVisibility"
-        />
-    </imagery-view-menu-switcher>
+            <button
+                class="c-button t-btn-zoom-in icon-plus"
+                title="Zoom in"
+                @click="zoomIn"
+            ></button>
+        </div>
 
-    <zoom-settings
-        class="--hide-if-less-than-220"
-        :pan-zoom-locked="panZoomLocked"
-        :zoom-factor="zoomFactor"
-        @zoomOut="zoomOut"
-        @zoomIn="zoomIn"
-        @toggleZoomLock="toggleZoomLock"
-        @handleResetImage="handleResetImage"
-    />
+        <button
+            class="c-button t-btn-zoom-lock"
+            title="Lock current zoom and pan across all images"
+            :class="{'icon-unlocked': !panZoomLocked, 'icon-lock': panZoomLocked}"
+            @click="toggleZoomLock"
+        ></button>
 
-    <imagery-view-menu-switcher
-        class="--show-if-less-than-220"
-        :icon-class="'icon-magnify'"
-        :title="'Zoom settings'"
-    >
-        <zoom-settings
-            :pan-zoom-locked="panZoomLocked"
-            :class="'c-control-menu c-menu--has-close-btn'"
-            :zoom-factor="zoomFactor"
-            :is-menu="true"
-            @zoomOut="zoomOut"
-            @zoomIn="zoomIn"
-            @toggleZoomLock="toggleZoomLock"
-            @handleResetImage="handleResetImage"
-        />
-    </imagery-view-menu-switcher>
+        <button
+            class="c-button icon-reset t-btn-zoom-reset"
+            title="Remove zoom and pan"
+            @click="handleResetImage"
+        ></button>
+
+        <span class="c-image-controls__zoom-factor">x{{ formattedZoomFactor }}</span>
+    </div>
+    <div class="c-image-controls__control c-image-controls__brightness-contrast">
+        <span
+            class="c-image-controls__sliders"
+            draggable="true"
+            @dragstart.stop.prevent
+        >
+            <div class="c-image-controls__input icon-brightness">
+                <input
+                    v-model="filters.contrast"
+                    type="range"
+                    min="0"
+                    max="500"
+                    @change="notifyFiltersChanged"
+                >
+            </div>
+            <div class="c-image-controls__input icon-contrast">
+                <input
+                    v-model="filters.brightness"
+                    type="range"
+                    min="0"
+                    max="500"
+                    @change="notifyFiltersChanged"
+                >
+            </div>
+        </span>
+        <span class="t-reset-btn-holder c-imagery__lc__reset-btn c-image-controls__btn-reset">
+            <button
+                class="c-icon-link icon-reset t-btn-reset"
+                @click="handleResetFilters"
+            ></button>
+        </span>
+    </div>
 </div>
 </template>
 
 <script>
 import _ from 'lodash';
 
-import FilterSettings from "./FilterSettings.vue";
-import LayerSettings from "./LayerSettings.vue";
-import ZoomSettings from "./ZoomSettings.vue";
-import ImageryViewMenuSwitcher from "./ImageryViewMenuSwitcher.vue";
-
 const DEFAULT_FILTER_VALUES = {
     brightness: '100',
     contrast: '100'
@@ -88,28 +101,13 @@ const ZOOM_STEP = 1;
 const ZOOM_WHEEL_SENSITIVITY_REDUCTION = 0.01;
 
 export default {
-    components: {
-        FilterSettings,
-        LayerSettings,
-        ImageryViewMenuSwitcher,
-        ZoomSettings
-    },
     inject: ['openmct', 'domainObject'],
     props: {
-        layers: {
-            type: Array,
-            required: true
-        },
         zoomFactor: {
             type: Number,
             required: true
         },
-        imageUrl: {
-            type: String,
-            default: () => {
-                return '';
-            }
-        }
+        imageUrl: String
     },
     data() {
         return {
@@ -125,6 +123,9 @@ export default {
         };
     },
     computed: {
+        formattedZoomFactor() {
+            return Number.parseFloat(this.zoomFactor).toPrecision(2);
+        },
         cursorStates() {
             const isPannable = this.altPressed && this.zoomFactor > 1;
             const showCursorZoomIn = this.metaPressed && !this.shiftPressed;
@@ -266,13 +267,6 @@ export default {
 
             const newScaleFactor = this.zoomFactor + (this.shiftPressed ? -ZOOM_STEP : ZOOM_STEP);
             this.zoomImage(newScaleFactor, e.clientX, e.clientY);
-        },
-        toggleLayerVisibility(index) {
-            this.$emit('toggleLayerVisibility', index);
-        },
-        updateFilterValues(filters) {
-            this.filters = filters;
-            this.notifyFiltersChanged();
         }
     }
 };

src/plugins/imagery/components/ImageryView.vue

@@ -28,41 +28,34 @@
     @keydown="arrowDownHandler"
     @mouseover="focusElement"
 >
-    <div
-        class="c-imagery__main-image-wrapper has-local-controls"
-        :class="{
-            'paused unnsynced': isPaused && !isFixed,
-            'stale': false,
-            'pannable': cursorStates.isPannable,
-            'cursor-zoom-in': cursorStates.showCursorZoomIn,
-            'cursor-zoom-out': cursorStates.showCursorZoomOut
-        }"
-        @mousedown="handlePanZoomClick"
-    >
+    <div class="c-imagery__main-image-wrapper has-local-controls">
         <ImageControls
             ref="imageControls"
             :zoom-factor="zoomFactor"
             :image-url="imageUrl"
-            :layers="layers"
             @resetImage="resetImage"
             @panZoomUpdated="handlePanZoomUpdate"
             @filtersUpdated="setFilters"
             @cursorsUpdated="setCursorStates"
             @startPan="startPan"
-            @toggleLayerVisibility="toggleLayerVisibility"
         />
 
-        <div
-            v-if="zoomFactor > 1"
-            class="c-imagery__hints"
-        >
-            Alt-drag to pan
-        </div>
         <div
             ref="imageBG"
             class="c-imagery__main-image__bg"
+            :class="{
+                'paused unnsynced': isPaused && !isFixed,
+                'stale': false,
+                'pannable': cursorStates.isPannable,
+                'cursor-zoom-in': cursorStates.showCursorZoomIn,
+                'cursor-zoom-out': cursorStates.showCursorZoomOut
+            }"
             @click="expand"
         >
+            <div
+                v-if="zoomFactor > 1"
+                class="c-imagery__hints"
+            >{{formatImageAltText}}</div>
             <div
                 ref="focusedImageWrapper"
                 class="image-wrapper"
@@ -70,18 +63,8 @@
                     'width': `${sizedImageWidth}px`,
                     'height': `${sizedImageHeight}px`
                 }"
+                @mousedown="handlePanZoomClick"
             >
-                <div
-                    v-for="(layer, index) in visibleLayers"
-                    :key="index"
-                    class="layer-image s-image-layer c-imagery__layer-image"
-                    :style="{
-                        'background-image': `url(${layer.source})`,
-                        'transform': `scale(${zoomFactor}) translate(${imageTranslateX}px, ${imageTranslateY}px)`,
-                        'transition': `${!pan && animateZoom ? 'transform 250ms ease-in' : 'initial'}`,
-                    }"
-                >
-                </div>
                 <img
                     ref="focusedImage"
                     class="c-imagery__main-image__image js-imageryView-image "
@@ -149,6 +132,10 @@
                 <!-- image fresh -->
                 <div
                     v-if="canTrackDuration"
+                    :style="{
+                        'animation-delay': imageFreshnessOptions.fadeOutDelayTime,
+                        'animation-duration': imageFreshnessOptions.fadeOutDurationTime
+                    }"
                     :class="{'c-imagery--new': isImageNew && !refreshCSS}"
                     class="c-imagery__age icon-timer"
                 >{{ formattedDuration }}</div>
@@ -156,13 +143,13 @@
                 <!-- spacecraft position fresh -->
                 <div
                     v-if="relatedTelemetry.hasRelatedTelemetry && isSpacecraftPositionFresh"
-                    class="c-imagery__age icon-check c-imagery--new"
+                    class="c-imagery__age icon-check c-imagery--new no-animation"
                 >POS</div>
 
                 <!-- camera position fresh -->
                 <div
                     v-if="relatedTelemetry.hasRelatedTelemetry && isCameraPositionFresh"
-                    class="c-imagery__age icon-check c-imagery--new"
+                    class="c-imagery__age icon-check c-imagery--new no-animation"
                 >CAM</div>
             </div>
             <div class="h-local-controls">
@@ -176,10 +163,13 @@
         </div>
     </div>
     <div
+        v-if="displayThumbnails"
         class="c-imagery__thumbs-wrapper"
         :class="[
             { 'is-paused': isPaused && !isFixed },
-            { 'is-autoscroll-off': !resizingWindow && !autoScroll && !isPaused }
+            { 'is-autoscroll-off': !resizingWindow && !autoScroll && !isPaused },
+            { 'is-small-thumbs': displayThumbnailsSmall },
+            { 'hide': !displayThumbnails }
         ]"
     >
         <div
@@ -192,6 +182,7 @@
                 :key="image.url + image.time"
                 class="c-imagery__thumb c-thumb"
                 :class="{ selected: focusedImageIndex === index && isPaused }"
+                :title="image.formattedTime"
                 @click="thumbnailClicked(index)"
             >
                 <a
@@ -245,6 +236,8 @@ const ARROW_LEFT = 37;
 const SCROLL_LATENCY = 250;
 
 const ZOOM_SCALE_DEFAULT = 1;
+const SHOW_THUMBS_THRESHOLD_HEIGHT = 200;
+const SHOW_THUMBS_FULLSIZE_THRESHOLD_HEIGHT = 600;
 
 export default {
     components: {
@@ -252,7 +245,7 @@ export default {
         ImageControls
     },
     mixins: [imageryData],
-    inject: ['openmct', 'domainObject', 'objectPath', 'currentView'],
+    inject: ['openmct', 'domainObject', 'objectPath', 'currentView', 'imageFreshnessOptions'],
     props: {
         focusedImageTimestamp: {
             type: Number,
@@ -267,9 +260,6 @@ export default {
         this.requestCount = 0;
 
         return {
-            timeFormat: '',
-            layers: [],
-            visibleLayers: [],
             durationFormatter: undefined,
             imageHistory: [],
             timeSystem: timeSystem,
@@ -288,6 +278,7 @@ export default {
             imageContainerHeight: undefined,
             sizedImageWidth: 0,
             sizedImageHeight: 0,
+            viewHeight: 0,
             lockCompass: true,
             resizingWindow: false,
             timeContext: undefined,
@@ -306,7 +297,8 @@ export default {
             imageTranslateY: 0,
             pan: undefined,
             animateZoom: true,
-            imagePanned: false
+            imagePanned: false,
+            forceShowThumbnails: false
         };
     },
     computed: {
@@ -322,6 +314,15 @@ export default {
 
             return compassRoseSizingClasses;
         },
+        displayThumbnails() {
+            return (
+                this.forceShowThumbnails
+                || this.viewHeight >= SHOW_THUMBS_THRESHOLD_HEIGHT
+            );
+        },
+        displayThumbnailsSmall() {
+            return this.viewHeight > SHOW_THUMBS_THRESHOLD_HEIGHT && this.viewHeight <= SHOW_THUMBS_FULLSIZE_THRESHOLD_HEIGHT;
+        },
         time() {
             return this.formatTime(this.focusedImage);
         },
@@ -330,6 +331,16 @@ export default {
         },
         isImageNew() {
             let cutoff = FIVE_MINUTES;
+            if (this.imageFreshnessOptions) {
+                const { fadeOutDelayTime, fadeOutDurationTime} = this.imageFreshnessOptions;
+                // convert css duration to IS8601 format for parsing
+                const isoFormattedDuration = 'PT' + fadeOutDurationTime.toUpperCase();
+                const isoFormattedDelay = 'PT' + fadeOutDelayTime.toUpperCase();
+                const parsedDuration = moment.duration(isoFormattedDuration).asMilliseconds();
+                const parsedDelay = moment.duration(isoFormattedDelay).asMilliseconds();
+                cutoff = parsedDuration + parsedDelay;
+            }
+
             let age = this.numericDuration;
 
             return age < cutoff && !this.refreshCSS;
@@ -477,6 +488,16 @@ export default {
                 width: this.sizedImageWidth,
                 height: this.sizedImageHeight
             };
+        },
+        formatImageAltText() {
+            const regexLinux = /Linux/;
+            const navigator = window.navigator.userAgent;
+
+            if (regexLinux.test(navigator)) {
+                return 'Ctrl+Alt drag to pan';
+            }
+
+            return 'Alt drag to pan';
         }
     },
     watch: {
@@ -513,6 +534,8 @@ export default {
                 if (!this.isPaused) {
                     this.setFocusedImage(imageIndex);
                     this.scrollToRight();
+                } else {
+                    this.scrollToFocused();
                 }
             },
             deep: true
@@ -552,7 +575,7 @@ export default {
         this.updateRelatedTelemetryForFocusedImage = _.debounce(this.updateRelatedTelemetryForFocusedImage, 400);
 
         // for resizing the object view
-        this.resizeImageContainer = _.debounce(this.resizeImageContainer, 400);
+        this.resizeImageContainer = _.debounce(this.resizeImageContainer, 400, { leading: true });
 
         if (this.$refs.imageBG) {
             this.imageContainerResizeObserver = new ResizeObserver(this.resizeImageContainer);
@@ -570,10 +593,8 @@ export default {
         }
 
         this.listenTo(this.focusedImageWrapper, 'wheel', this.wheelZoom, this);
-        this.loadVisibleLayers();
     },
     beforeDestroy() {
-        this.persistVisibleLayers();
         this.stopFollowingTimeContext();
 
         if (this.thumbWrapperResizeObserver) {
@@ -601,6 +622,9 @@ export default {
 
     },
     methods: {
+        calculateViewHeight() {
+            this.viewHeight = this.$el.clientHeight;
+        },
         setTimeContext() {
             this.stopFollowingTimeContext();
             this.timeContext = this.openmct.time.getContextForView(this.objectPath);
@@ -669,37 +693,6 @@ export default {
 
             return mostRecent[valueKey];
         },
-        loadVisibleLayers() {
-            const metaDataValues = this.metadata.valuesForHints(['image'])[0];
-            this.imageFormat = this.openmct.telemetry.getValueFormatter(metaDataValues);
-            let layersMetadata = metaDataValues.layers;
-            if (layersMetadata) {
-                this.layers = layersMetadata;
-                if (this.domainObject.configuration) {
-                    let persistedLayers = this.domainObject.configuration.layers;
-                    layersMetadata.forEach((layer) => {
-                        const persistedLayer = persistedLayers.find(object => object.name === layer.name);
-                        if (persistedLayer) {
-                            layer.visible = persistedLayer.visible === true;
-                        }
-                    });
-                    this.visibleLayers = this.layers.filter(layer => layer.visible);
-                } else {
-                    this.visibleLayers = [];
-                    this.layers.forEach((layer) => {
-                        layer.visible = false;
-                    });
-                }
-            }
-        },
-        persistVisibleLayers() {
-            if (this.domainObject.configuration) {
-                this.openmct.objects.mutate(this.domainObject, 'configuration.layers', this.layers);
-            }
-
-            this.visibleLayers = [];
-            this.layers = [];
-        },
         // will subscribe to data for this key if not already done
         subscribeToDataForKey(key) {
             if (this.relatedTelemetry[key].isSubscribed) {
@@ -756,6 +749,7 @@ export default {
         focusElement() {
             this.$el.focus();
         },
+
         handleScroll() {
             const thumbsWrapper = this.$refs.thumbsWrapper;
             if (!thumbsWrapper || this.resizingWindow) {
@@ -1004,6 +998,8 @@ export default {
             }
 
             this.setSizedImageDimensions();
+            this.calculateViewHeight();
+            this.scrollToFocused();
         },
         setSizedImageDimensions() {
             this.focusedImageNaturalAspectRatio = this.$refs.focusedImage.naturalWidth / this.$refs.focusedImage.naturalHeight;
@@ -1032,10 +1028,13 @@ export default {
                 this.scrollToRight('reset');
             }
 
+            this.calculateViewHeight();
+
             this.$nextTick(() => {
                 this.resizingWindow = false;
             });
         },
+        // debounced method
         clearWheelZoom() {
             this.$refs.imageControls.clearWheelZoom();
         },
@@ -1101,11 +1100,6 @@ export default {
         },
         setCursorStates(states) {
             this.cursorStates = states;
-        },
-        toggleLayerVisibility(index) {
-            let isVisible = this.layers[index].visible === true;
-            this.layers[index].visible = !isVisible;
-            this.visibleLayers = this.layers.filter(layer => layer.visible);
         }
     }
 };

src/plugins/imagery/components/ImageryViewMenuSwitcher.vue

@@ -1,65 +0,0 @@
-<template>
-<div class="c-switcher-menu">
-    <button
-        :id="id"
-        class="c-button c-button--menu c-switcher-menu__button"
-        :class="iconClass"
-        :title="title"
-        @click="toggleMenu"
-    >
-        <span class="c-button__label"></span>
-    </button>
-    <div
-        v-show="showMenu"
-        class="c-switcher-menu__content"
-    >
-        <slot></slot>
-    </div>
-</div>
-</template>
-
-<script>
-import uuid from 'uuid';
-
-export default {
-    inject: ['openmct'],
-    props: {
-        iconClass: {
-            type: String,
-            default() {
-                return '';
-            }
-        },
-        title: {
-            type: String,
-            default() {
-                return '';
-            }
-        }
-    },
-    data() {
-        return {
-            id: uuid(),
-            showMenu: false
-        };
-    },
-    mounted() {
-        document.addEventListener('click', this.hideMenu);
-    },
-    destroyed() {
-        document.removeEventListener('click', this.hideMenu);
-    },
-    methods: {
-        toggleMenu() {
-            this.showMenu = !this.showMenu;
-        },
-        hideMenu(e) {
-            if (this.id === e.target.id) {
-                return;
-            }
-
-            this.showMenu = false;
-        }
-    }
-};
-</script>

src/plugins/imagery/components/LayerSettings.vue

@@ -1,59 +0,0 @@
-<template>
-<div
-    class="c-control-menu c-menu--to-left c-menu--has-close-btn c-image-controls"
-    @click="handleClose"
->
-    <div class="c-checkbox-list js-checkbox-menu c-menu--to-left c-menu--has-close-btn">
-        <ul
-            @click="$event.stopPropagation()"
-        >
-            <li
-                v-for="(layer, index) in layers"
-                :key="index"
-            >
-                <input
-                    v-if="layer.visible"
-                    :id="index + 'LayerControl'"
-                    checked
-                    type="checkbox"
-                    @change="toggleLayerVisibility(index)"
-                >
-                <input
-                    v-else
-                    :id="index + 'LayerControl'"
-                    type="checkbox"
-                    @change="toggleLayerVisibility(index)"
-                >
-                <label :for="index + 'LayerControl'">{{ layer.name }}</label>
-            </li>
-        </ul>
-    </div>
-
-    <button class="c-click-icon icon-x t-btn-close c-switcher-menu__close-button"></button>
-</div>
-</template>
-
-<script>
-export default {
-    inject: ['openmct'],
-    props: {
-        layers: {
-            type: Array,
-            default() {
-                return [];
-            }
-        }
-    },
-    methods: {
-        handleClose(e) {
-            const closeButton = e.target.classList.contains('c-switcher-menu__close-button');
-            if (!closeButton) {
-                e.stopPropagation();
-            }
-        },
-        toggleLayerVisibility(index) {
-            this.$emit('toggleLayerVisibility', index);
-        }
-    }
-};
-</script>

src/plugins/imagery/components/ZoomSettings.vue

@@ -1,89 +0,0 @@
-<template>
-<div
-    class="c-image-controls__controls-wrapper"
-    @click="handleClose"
->
-    <div class="c-image-controls__control c-image-controls__zoom">
-        <div class="c-button-set c-button-set--strip-h">
-            <button
-                class="c-button t-btn-zoom-out icon-minus"
-                title="Zoom out"
-                @click="zoomOut"
-            ></button>
-
-            <button
-                class="c-button t-btn-zoom-in icon-plus"
-                title="Zoom in"
-                @click="zoomIn"
-            ></button>
-
-            <button
-                class="c-button t-btn-zoom-lock"
-                title="Lock current zoom and pan across all images"
-                :class="{'icon-unlocked': !panZoomLocked, 'icon-lock': panZoomLocked}"
-                @click="toggleZoomLock"
-            ></button>
-
-            <button
-                class="c-button icon-reset t-btn-zoom-reset"
-                title="Remove zoom and pan"
-                @click="handleResetImage"
-            ></button>
-        </div>
-        <div class="c-image-controls__zoom-factor">x{{ formattedZoomFactor }}</div>
-    </div>
-    <button
-        v-if="isMenu"
-        class="c-click-icon icon-x t-btn-close c-switcher-menu__close-button"
-    ></button>
-</div>
-</template>
-
-<script>
-export default {
-    inject: ['openmct'],
-    props: {
-        zoomFactor: {
-            type: Number,
-            required: true
-        },
-        panZoomLocked: {
-            type: Boolean,
-            required: true
-        },
-        isMenu: {
-            type: Boolean,
-            required: false
-        }
-    },
-    data() {
-        return {
-        };
-    },
-    computed: {
-        formattedZoomFactor() {
-            return Number.parseFloat(this.zoomFactor).toPrecision(2);
-        }
-    },
-    methods: {
-        handleClose(e) {
-            const closeButton = e.target.classList.contains('c-switcher-menu__close-button');
-            if (!closeButton) {
-                e.stopPropagation();
-            }
-        },
-        handleResetImage() {
-            this.$emit('handleResetImage');
-        },
-        toggleZoomLock() {
-            this.$emit('toggleZoomLock');
-        },
-        zoomIn() {
-            this.$emit('zoomIn');
-        },
-        zoomOut() {
-            this.$emit('zoomOut');
-        }
-    }
-};
-</script>

src/plugins/imagery/components/imagery-view.scss

@@ -1,3 +1,15 @@
+@use 'sass:math';
+
+@keyframes fade-out {
+    from {
+        background-color: rgba($colorOk, 0.5);
+    }
+    to {
+        background-color: rgba($colorOk, 0);
+        color: inherit;
+    }
+}
+
 .c-imagery {
     display: flex;
     flex-direction: column;
@@ -16,22 +28,6 @@
         display: flex;
         flex-direction: column;
         flex: 1 1 auto;
-
-        &.unnsynced{
-            @include sUnsynced();
-        }
-
-        &.cursor-zoom-in {
-            cursor: zoom-in;
-        }
-
-        &.cursor-zoom-out {
-            cursor: zoom-out;
-        }
-
-        &.pannable {
-            @include cursorGrab();
-        }
     }
 
     .image-wrapper {
@@ -49,6 +45,19 @@
             flex: 1 1 auto;
             height: 0;
             overflow: hidden;
+            &.unnsynced{
+                @include sUnsynced();
+            }
+            &.cursor-zoom-in {
+                cursor: zoom-in;
+            }
+            &.cursor-zoom-out {
+                cursor: zoom-out;
+            }
+            &.pannable {
+                @include cursorGrab();
+
+            }
         }
         &__background-image {
             background-position: center;
@@ -68,7 +77,6 @@
         background: rgba(black, 0.2);
         border-radius: $smallCr;
         padding: 2px $interiorMargin;
-        pointer-events: none;
         position: absolute;
         right: $m;
         top: $m;
@@ -127,17 +135,20 @@
         // New imagery
         $bgColor: $colorOk;
         color: $colorOkFg;
-        background: rgba($bgColor, 0.5);
-        @include flash($animName: flashImageAge, $iter: 2, $dur: 250ms, $valStart: rgba($colorOk, 0.7), $valEnd: rgba($colorOk, 0));
+        background-color: rgba($bgColor, 0.5);
+        animation-name: fade-out;
+        animation-timing-function: ease-in;
+        animation-iteration-count: 1;
+        animation-fill-mode: forwards;
+        &.no-animation {
+            animation: none;
+        }
     }
 
-    &__layer-image {
-        pointer-events: none;
-        z-index: 1;
-    }
 
     &__thumbs-wrapper {
         display: flex; // Uses row layout
+        justify-content: flex-end;
 
         &.is-autoscroll-off {
             background: $colorInteriorBorder;
@@ -155,17 +166,11 @@
         flex: 0 1 auto;
         display: flex;
         flex-direction: row;
-        height: 135px;
+        height: 145px;
         overflow-x: auto;
         overflow-y: hidden;
         margin-bottom: 1px;
         padding-bottom: $interiorMarginSm;
-
-        .c-thumb:last-child {
-            // Hilite the lastest thumb
-            background: $colorBodyFg;
-            color: $colorBodyBg;
-        }
     }
 
     &__auto-scroll-resume-button {
@@ -174,58 +179,16 @@
         font-size: 0.8em;
         margin: $interiorMarginSm;
     }
-
-    .c-control-menu {
-        // Controls on left of flex column layout, close btn on right
-        @include menuOuter();
-        //background: $colorItemBgHov;
-        border-radius: $controlCr;
-        display: flex;
-        align-items: flex-start;
-        justify-content: space-between;
-        padding: $interiorMargin;
-        width: min-content;
-
-        > * + * {
-            margin-left: $interiorMargin;
-        }
-    }
-
-    .c-switcher-menu {
-        display: contents;
-
-        &__content {
-            // Menu panel
-            top: 28px;
-            position: absolute;
-
-            .c-so-view & {
-                top: 25px;
-            }
-        }
-    }
-}
-
-.--width-less-than-220 .--show-if-less-than-220.c-switcher-menu {
-    display: contents !important;
-}
-
-.s-image-layer {
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    opacity: 0.5;
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center;
 }
 
 /*************************************** THUMBS */
 .c-thumb {
+    $w: $imageThumbsD;
     display: flex;
     flex-direction: column;
     padding: 4px;
-    width: $imageThumbsD;
+    min-width: $w;
+    width: $w;
 
     &:hover {
         background: $colorThumbHoverBg;
@@ -247,47 +210,89 @@
     }
 }
 
-.l-layout,
-.c-fl {
+.is-small-thumbs {
     .c-imagery__thumbs-scroll-area {
-        //  When Imagery is in a layout, hide the thumbs area
-        display: none;
+        height: 60px; // Allow room for scrollbar
+    }
+
+    .c-thumb {
+        $w: math.div($imageThumbsD, 2);
+        min-width: $w;
+        width: $w;
+
+        &__timestamp {
+            display: none;
+        }
     }
 }
 
 /*************************************** IMAGERY LOCAL CONTROLS*/
 .c-imagery {
     .h-local-controls--overlay-content {
-        display: flex;
-        flex-direction: row;
         position: absolute;
         left: $interiorMargin; top: $interiorMargin;
-        z-index: 2;
+        z-index: 70;
         background: $colorLocalControlOvrBg;
         border-radius: $basicCr;
+        max-width: 250px;
+        min-width: 170px;
+        width: 35%;
         align-items: center;
-        padding: $interiorMargin $interiorMargin;
+        padding: $interiorMargin $interiorMarginLg;
+
+        input[type="range"] {
+            display: block;
+            width: 100%;
+            &:not(:first-child) {
+                margin-top: $interiorMarginLg;
+            }
+
+            &:before {
+                margin-right: $interiorMarginSm;
+            }
+        }
 
         .s-status-taking-snapshot & {
             display: none;
         }
     }
-    [class*='--menus-aligned'] {
-        > * + * {
-            button { margin-left: $interiorMarginSm; }
+
+    &__lc {
+        &__reset-btn {
+            // Span that holds bracket graphics and button
+            $bc: $scrollbarTrackColorBg;
+
+            &:before,
+            &:after {
+                border-right: 1px solid $bc;
+                content:'';
+                display: block;
+                width: 5px;
+                height: 4px;
+            }
+
+            &:before {
+                border-top: 1px solid $bc;
+                margin-bottom: 2px;
+            }
+
+            &:after {
+                border-bottom: 1px solid $bc;
+                margin-top: 2px;
+            }
+
+            .c-icon-link {
+                color: $colorBtnFg;
+            }
         }
     }
 }
 
 .c-image-controls {
-    &__controls-wrapper {
-        // Wraps __controls and __close-btn
-        display: flex;
-    }
-
     &__controls {
         display: flex;
         align-items: stretch;
+        flex-direction: column;
 
         > * + * {
             margin-top: $interiorMargin;
@@ -309,67 +314,31 @@
 
     }
 
-    &__zoom {
-        > * + * { margin-left: $interiorMargin; } // Is this used?
+    &__input {
+        // A wrapper is needed to add the type icon to left of each control
+
+        input[type='range'] {
+            //width: 100%; // Do we need this?
+        }
     }
 
-    &--filters {
-        // Styles specific to the brightness and contrast controls
+    &__zoom {
+        > * + * { margin-left: $interiorMargin; }
+    }
 
-        .c-image-controls {
-            &__sliders {
-                display: flex;
-                flex: 1 1 auto;
-                flex-direction: column;
-                min-width: 80px;
+    &__sliders {
+        display: flex;
+        flex: 1 1 auto;
+        flex-direction: column;
 
-                > * + * {
-                    margin-top: 11px;
-                }
-
-                input[type="range"] {
-                    display: block;
-                    width: 100%;
-                }
-            }
-
-            &__slider-wrapper {
-                display: flex;
-                align-items: center;
-
-                &:before { margin-right: $interiorMargin; }
-            }
-
-            &__reset-btn {
-                // Span that holds bracket graphics and button
-                $bc: $scrollbarTrackColorBg;
-                flex: 0 0 auto;
-
-                &:before,
-                &:after {
-                    border-right: 1px solid $bc;
-                    content:'';
-                    display: block;
-                    width: 5px;
-                    height: 4px;
-                }
-
-                &:before {
-                    border-top: 1px solid $bc;
-                    margin-bottom: 2px;
-                }
-
-                &:after {
-                    border-bottom: 1px solid $bc;
-                    margin-top: 2px;
-                }
-
-                .c-icon-link {
-                    color: $colorBtnFg;
-                }
-            }
+        > * + * {
+            margin-top: 11px;
         }
     }
+
+    &__btn-reset {
+        flex: 0 0 auto;
+    }
 }
 
 /*************************************** BUTTONS */
@@ -414,7 +383,7 @@
     @include cArrowButtonSizing($dimOuter: 48px);
     border-radius: $controlCr;
 
-    .--width-less-than-600 & {
+    .is-in-small-container & {
         @include cArrowButtonSizing($dimOuter: 32px);
     }
 }
@@ -440,6 +409,10 @@
                 background-color: $colorBodyFg;
             }
 
+            //[class*='__image-placeholder'] {
+            //    display: none;
+            //}
+
             img {
                 display: block !important;
             }

src/plugins/imagery/plugin.js

@@ -23,9 +23,9 @@
 import ImageryViewProvider from './ImageryViewProvider';
 import ImageryTimestripViewProvider from './ImageryTimestripViewProvider';
 
-export default function () {
+export default function (options) {
     return function install(openmct) {
-        openmct.objectViews.addProvider(new ImageryViewProvider(openmct));
+        openmct.objectViews.addProvider(new ImageryViewProvider(openmct, options));
         openmct.objectViews.addProvider(new ImageryTimestripViewProvider(openmct));
     };
 }

src/plugins/imagery/pluginSpec.js

@@ -344,6 +344,8 @@ describe("The Imagery View Layouts", () => {
             );
             openmct.install(clearDataPlugin);
             clearDataAction = openmct.actions.getAction('clear-data-action');
+            // force show the thumbnails
+            imageryView._getInstance().$children[0].forceShowThumbnails = true;
 
             return Vue.nextTick();
         });
@@ -523,7 +525,10 @@ describe("The Imagery View Layouts", () => {
             expect(clearDataAction).toBeDefined();
         });
 
-        it('on clearData action should clear data for object is selected', (done) => {
+        it('on clearData action should clear data for object is selected', async (done) => {
+            // force show the thumbnails
+            imageryView._getInstance().$children[0].forceShowThumbnails = true;
+            await Vue.nextTick();
             expect(parent.querySelectorAll('.c-imagery__thumb').length).not.toBe(0);
             openmct.objectViews.on('clearData', async (_domainObject) => {
                 await Vue.nextTick();

src/plugins/notebook/components/Notebook.vue

@@ -35,6 +35,8 @@
         ref="searchResults"
         :domain-object="domainObject"
         :results="searchResults"
+        @cancelEdit="cancelTransaction"
+        @editingEntry="startTransaction"
         @changeSectionPage="changeSelectedSection"
         @updateEntries="updateEntries"
     />
@@ -140,6 +142,8 @@
                     :selected-page="selectedPage"
                     :selected-section="selectedSection"
                     :read-only="false"
+                    @cancelEdit="cancelTransaction"
+                    @editingEntry="startTransaction"
                     @deleteEntry="deleteEntry"
                     @updateEntry="updateEntry"
                 />
@@ -710,6 +714,8 @@ export default {
             notebookEntries[this.selectedSection.id][this.selectedPage.id] = entries;
 
             mutateObject(this.openmct, this.domainObject, 'configuration.entries', notebookEntries);
+
+            this.saveTransaction();
         },
         getPageIdFromUrl() {
             return this.openmct.router.getParams().pageId;
@@ -746,6 +752,39 @@ export default {
             this.selectPage(pageId);
 
             this.syncUrlWithPageAndSection();
+        },
+        activeTransaction() {
+            return this.openmct.objects.getActiveTransaction();
+        },
+        startTransaction() {
+            if (!this.openmct.editor.isEditing()) {
+                this.openmct.objects.startTransaction();
+            }
+        },
+        saveTransaction() {
+            const transaction = this.activeTransaction();
+
+            if (!transaction || this.openmct.editor.isEditing()) {
+                return;
+            }
+
+            return transaction.commit()
+                .catch(error => {
+                    throw error;
+                }).finally(() => {
+                    this.openmct.objects.endTransaction();
+                });
+        },
+        cancelTransaction() {
+            if (!this.openmct.editor.isEditing()) {
+                const transaction = this.activeTransaction();
+                transaction.cancel()
+                    .catch(error => {
+                        throw error;
+                    }).finally(() => {
+                        this.openmct.objects.endTransaction();
+                    });
+            }
         }
     }
 };

src/plugins/notebook/components/NotebookEntry.vue

@@ -55,6 +55,7 @@
                     class="c-ne__text c-ne__input"
                     tabindex="0"
                     contenteditable
+                    @focus="editingEntry()"
                     @blur="updateEntryValue($event)"
                     @keydown.enter.exact.prevent
                     @keyup.enter.exact.prevent="forceBlur($event)"
@@ -284,11 +285,16 @@ export default {
 
             this.$emit('updateEntry', this.entry);
         },
+        editingEntry() {
+            this.$emit('editingEntry');
+        },
         updateEntryValue($event) {
             const value = $event.target.innerText;
             if (value !== this.entry.text && value.match(/\S/)) {
                 this.entry.text = value;
                 this.$emit('updateEntry', this.entry);
+            } else {
+                this.$emit('cancelEdit');
             }
         }
     }

src/plugins/notebook/components/SearchResults.vue

@@ -33,6 +33,8 @@
             :read-only="true"
             :selected-page="result.page"
             :selected-section="result.section"
+            @editingEntry="editingEntry"
+            @cancelEdit="cancelEdit"
             @changeSectionPage="changeSectionPage"
             @updateEntries="updateEntries"
         />
@@ -63,6 +65,12 @@ export default {
         }
     },
     methods: {
+        editingEntry() {
+            this.$emit('editingEntry');
+        },
+        cancelEdit() {
+            this.$emit('cancelEdit');
+        },
         changeSectionPage(data) {
             this.$emit('changeSectionPage', data);
         },

src/plugins/performanceIndicator/pluginSpec.js

@@ -20,10 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 import PerformancePlugin from './plugin.js';
-import {
-    createOpenMct,
-    resetApplicationState
-} from 'utils/testing';
+import { createOpenMct, resetApplicationState } from 'utils/testing';
 
 describe('the plugin', () => {
     let openmct;
@@ -31,9 +28,8 @@ describe('the plugin', () => {
     let child;
 
     let performanceIndicator;
-    let countFramesPromise;
 
-    beforeEach((done) => {
+    beforeEach(done => {
         openmct = createOpenMct();
 
         element = document.createElement('div');
@@ -42,11 +38,9 @@ describe('the plugin', () => {
 
         openmct.install(new PerformancePlugin());
 
-        countFramesPromise = countFrames();
-
         openmct.on('start', done);
 
-        performanceIndicator = openmct.indicators.indicatorObjects.find((indicator) => {
+        performanceIndicator = openmct.indicators.indicatorObjects.find(indicator => {
             return indicator.text && indicator.text() === '~ fps';
         });
 
@@ -61,25 +55,21 @@ describe('the plugin', () => {
         expect(performanceIndicator).toBeDefined();
     });
 
-    it('correctly calculates fps', () => {
-        return countFramesPromise.then((frames) => {
-            expect(performanceIndicator.text()).toEqual(`${frames} fps`);
-        });
+    it('calculates an fps value', async () => {
+        await loopForABit();
+        // eslint-disable-next-line
+        expect(parseInt(performanceIndicator.text().split(' fps')[0])).toBeGreaterThan(0);
     });
 
-    function countFrames() {
-        let startTime = performance.now();
+    function loopForABit() {
         let frames = 0;
 
-        return new Promise((resolve) => {
-            requestAnimationFrame(function incrementCount() {
-                let now = performance.now();
-
-                if ((now - startTime) < 1000) {
-                    frames++;
-                    requestAnimationFrame(incrementCount);
+        return new Promise(resolve => {
+            requestAnimationFrame(function loop() {
+                if (++frames === 240) {
+                    resolve();
                 } else {
-                    resolve(frames);
+                    requestAnimationFrame(loop);
                 }
             });
         });

src/plugins/persistence/couch/README.md

@@ -32,7 +32,7 @@ Add a line to install the CouchDB plugin for OpenMCT:
 ```
 openmct.install(openmct.plugins.CouchDB("http://localhost:5984/openmct"));
 ```
-6. Enable cors in CouchDB by editing `/usr/local/etc/local.ini` and add: `
+6. Enable cors in CouchDB by editing `~/homebrew/etc/local.ini` and add: `
 ```
 [chttpd]
 enable_cors = true
@@ -45,4 +45,4 @@ origins = http://localhost:8080
 9. Navigate to http://localhost:8080/ and create a random object in OpenMCT (e.g., a `Clock`) and save. You may get an error saying that the objects failed to persist. This is a known error that you can ignore, and will only happen the first time you save.
 10. Navigate to: http://127.0.0.1:5984/_utils/#database/openmct/_all_docs
 11. Look at the `JSON` tab and ensure you can see the `Clock` object you created above.
-12. All done! 🏆
+12. All done! 🏆

src/plugins/plot/MctPlot.vue

@@ -37,6 +37,7 @@
             v-if="seriesModels.length > 0"
             :tick-width="tickWidth"
             :single-series="seriesModels.length === 1"
+            :has-same-range-value="hasSameRangeValue"
             :series-model="seriesModels[0]"
             :style="{
                 left: (plotWidth - tickWidth) + 'px'
@@ -76,6 +77,9 @@
                 <div
                     ref="chartContainer"
                     class="gl-plot-chart-wrapper"
+                    :class="[
+                        { 'alt-pressed': altPressed },
+                    ]"
                 >
                     <mct-chart
                         :rectangles="rectangles"
@@ -230,6 +234,7 @@ export default {
     },
     data() {
         return {
+            altPressed: false,
             highlights: [],
             lockHighlightPoint: false,
             tickWidth: 0,
@@ -246,7 +251,8 @@ export default {
             loaded: false,
             isTimeOutOfSync: false,
             showLimitLineLabels: undefined,
-            isFrozenOnMouseDown: false
+            isFrozenOnMouseDown: false,
+            hasSameRangeValue: true
         };
     },
     computed: {
@@ -268,6 +274,8 @@ export default {
         }
     },
     mounted() {
+        document.addEventListener('keydown', this.handleKeyDown);
+        document.addEventListener('keyup', this.handleKeyUp);
         eventHelpers.extend(this);
         this.updateRealTime = this.updateRealTime.bind(this);
         this.updateDisplayBounds = this.updateDisplayBounds.bind(this);
@@ -299,9 +307,21 @@ export default {
 
     },
     beforeDestroy() {
+        document.removeEventListener('keydown', this.handleKeyDown);
+        document.removeEventListener('keyup', this.handleKeyUp);
         this.destroy();
     },
     methods: {
+        handleKeyDown(event) {
+            if (event.key === 'Alt') {
+                this.altPressed = true;
+            }
+        },
+        handleKeyUp(event) {
+            if (event.key === 'Alt') {
+                this.altPressed = false;
+            }
+        },
         setTimeContext() {
             this.stopFollowingTimeContext();
 
@@ -344,6 +364,7 @@ export default {
                 this.setDisplayRange(series, xKey);
             }, this);
             this.listenTo(series, 'change:yKey', () => {
+                this.checkSameRangeValue();
                 this.loadSeriesData(series);
             }, this);
 
@@ -351,10 +372,18 @@ export default {
                 this.loadSeriesData(series);
             }, this);
 
+            this.checkSameRangeValue();
             this.loadSeriesData(series);
         },
 
+        checkSameRangeValue() {
+            this.hasSameRangeValue = this.seriesModels.every((model) => {
+                return model.get('yKey') === this.seriesModels[0].get('yKey');
+            });
+        },
+
         removeSeries(plotSeries) {
+            this.checkSameRangeValue();
             this.stopListening(plotSeries);
         },
 
@@ -470,7 +499,7 @@ export default {
         },
 
         setDisplayRange(series, xKey) {
-            if (this.config.series.length !== 1) {
+            if (this.config.series.models.length !== 1) {
                 return;
             }
 
@@ -643,7 +672,7 @@ export default {
             this.positionOverElement = {
                 x: event.clientX - this.chartElementBounds.left,
                 y: this.chartElementBounds.height
-              - (event.clientY - this.chartElementBounds.top)
+                    - (event.clientY - this.chartElementBounds.top)
             };
 
             this.positionOverPlot = {

src/plugins/plot/MctTicks.vue

@@ -30,8 +30,8 @@
         class="gl-plot-tick-wrapper"
     >
         <div
-            v-for="tick in ticks"
-            :key="tick.value"
+            v-for="(tick, i) in ticks"
+            :key="'tick-left' + i"
             class="gl-plot-tick gl-plot-x-tick-label"
             :style="{
                 left: (100 * (tick.value - min) / interval) + '%'
@@ -46,8 +46,8 @@
         class="gl-plot-tick-wrapper"
     >
         <div
-            v-for="tick in ticks"
-            :key="tick.value"
+            v-for="(tick, i) in ticks"
+            :key="'tick-top' + i"
             class="gl-plot-tick gl-plot-y-tick-label"
             :style="{ top: (100 * (max - tick.value) / interval) + '%' }"
             :title="tick.fullText || tick.text"
@@ -59,8 +59,8 @@
     <!-- grid lines follow -->
     <template v-if="position === 'right'">
         <div
-            v-for="tick in ticks"
-            :key="tick.value"
+            v-for="(tick, i) in ticks"
+            :key="'tick-right' + i"
             class="gl-plot-hash hash-v"
             :style="{
                 right: (100 * (max - tick.value) / interval) + '%',
@@ -71,8 +71,8 @@
     </template>
     <template v-if="position === 'bottom'">
         <div
-            v-for="tick in ticks"
-            :key="tick.value"
+            v-for="(tick, i) in ticks"
+            :key="'tick-bottom' + i"
             class="gl-plot-hash hash-h"
             :style="{ bottom: (100 * (tick.value - min) / interval) + '%', width: '100%' }"
         >
@@ -83,7 +83,7 @@
 
 <script>
 import eventHelpers from "./lib/eventHelpers";
-import { ticks, getFormattedTicks } from "./tickUtils";
+import { ticks, getLogTicks, getFormattedTicks } from "./tickUtils";
 import configStore from "./configuration/ConfigStore";
 
 export default {
@@ -96,6 +96,13 @@ export default {
             },
             required: true
         },
+        // Make it a prop, then later we can allow user to change it via UI input
+        tickCount: {
+            type: Number,
+            default() {
+                return 6;
+            }
+        },
         position: {
             required: true,
             type: String,
@@ -112,9 +119,12 @@ export default {
     mounted() {
         eventHelpers.extend(this);
 
+        if (!this.axisType) {
+            throw new Error("axis-type prop expected");
+        }
+
         this.axis = this.getAxisFromConfig();
 
-        this.tickCount = 4;
         this.tickUpdate = false;
         this.listenTo(this.axis, 'change:displayRange', this.updateTicks, this);
         this.listenTo(this.axis, 'change:format', this.updateTicks, this);
@@ -126,15 +136,16 @@ export default {
     },
     methods: {
         getAxisFromConfig() {
-            if (!this.axisType) {
-                return;
+            const configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+
+            /** @type {import('./configuration/PlotConfigurationModel').default} */
+            let config = configStore.get(configId);
+
+            if (!config) {
+                throw new Error('config is missing');
             }
 
-            const configId = this.openmct.objects.makeKeyString(this.domainObject.identifier);
-            let config = configStore.get(configId);
-            if (config) {
-                return config[this.axisType];
-            }
+            return config[this.axisType];
         },
         /**
        * Determine whether ticks should be regenerated for a given range.
@@ -179,7 +190,11 @@ export default {
                 }, this);
             }
 
-            return ticks(range.min, range.max, number);
+            if (this.axisType === 'yAxis' && this.axis.get('logMode')) {
+                return getLogTicks(range.min, range.max, number, 4);
+            } else {
+                return ticks(range.min, range.max, number);
+            }
         },
 
         updateTicksForceRegeneration() {
@@ -188,6 +203,7 @@ export default {
 
         updateTicks(forceRegeneration = false) {
             const range = this.axis.get('displayRange');
+
             if (!range) {
                 delete this.min;
                 delete this.max;
@@ -210,8 +226,8 @@ export default {
             if (this.shouldRegenerateTicks(range, forceRegeneration)) {
                 let newTicks = this.getTicks();
                 this.tickRange = {
-                    min: Math.min.apply(Math, newTicks),
-                    max: Math.max.apply(Math, newTicks),
+                    min: Math.min(...newTicks),
+                    max: Math.max(...newTicks),
                     step: newTicks[1] - newTicks[0]
                 };
 

src/plugins/plot/Plot.vue

@@ -24,41 +24,6 @@
     ref="plotWrapper"
     class="c-plot holder holder-plot has-control-bar"
 >
-    <div
-        v-if="!options.compact"
-        class="c-control-bar"
-    >
-        <span class="c-button-set c-button-set--strip-h">
-            <button
-                class="c-button icon-download"
-                title="Export This View's Data as PNG"
-                @click="exportPNG()"
-            >
-                <span class="c-button__label">PNG</span>
-            </button>
-            <button
-                class="c-button"
-                title="Export This View's Data as JPG"
-                @click="exportJPG()"
-            >
-                <span class="c-button__label">JPG</span>
-            </button>
-        </span>
-        <button
-            class="c-button icon-crosshair"
-            :class="{ 'is-active': cursorGuide }"
-            title="Toggle cursor guides"
-            @click="toggleCursorGuide"
-        >
-        </button>
-        <button
-            class="c-button"
-            :class="{ 'icon-grid-on': gridLines, 'icon-grid-off': !gridLines }"
-            title="Toggle grid lines"
-            @click="toggleGridLines"
-        >
-        </button>
-    </div>
 
     <div
         ref="plotContainer"

src/plugins/plot/PlotViewProvider.js

@@ -61,6 +61,8 @@ export default function PlotViewProvider(openmct) {
             let component;
 
             return {
+                isPlotView: true,
+
                 show: function (element) {
                     let isCompact = isCompactView(objectPath);
                     component = new Vue({
@@ -83,6 +85,9 @@ export default function PlotViewProvider(openmct) {
                         template: '<plot :options="options"></plot>'
                     });
                 },
+                run(key) {
+                    component.$refs.plot[key]();
+                },
                 destroy: function () {
                     component.$destroy();
                     component = undefined;

src/plugins/plot/axis/YAxis.vue

@@ -29,9 +29,9 @@
 >
 
     <div
-        v-if="singleSeries"
+        v-if="canShowYAxisLabel"
         class="gl-plot-label gl-plot-y-label"
-        :class="{'icon-gear': (yKeyOptions.length > 1)}"
+        :class="{'icon-gear': (yKeyOptions.length > 1 && singleSeries)}"
     >{{ yAxisLabel }}
     </div>
 
@@ -76,6 +76,12 @@ export default {
                 return true;
             }
         },
+        hasSameRangeValue: {
+            type: Boolean,
+            default() {
+                return true;
+            }
+        },
         seriesModel: {
             type: Object,
             default() {
@@ -95,6 +101,11 @@ export default {
             loaded: false
         };
     },
+    computed: {
+        canShowYAxisLabel() {
+            return this.singleSeries === true || this.hasSameRangeValue === true;
+        }
+    },
     mounted() {
         this.yAxis = this.getYAxisFromConfig();
         this.loaded = true;

src/plugins/plot/chart/MCTChartAlarmLineSet.js

@@ -23,6 +23,9 @@
 import eventHelpers from '../lib/eventHelpers';
 
 export default class MCTChartAlarmLineSet {
+    /**
+     * @param {Bounds} bounds
+     */
     constructor(series, chart, offset, bounds) {
         this.series = series;
         this.chart = chart;
@@ -40,6 +43,9 @@ export default class MCTChartAlarmLineSet {
         }
     }
 
+    /**
+     * @param {Bounds} bounds
+     */
     updateBounds(bounds) {
         this.bounds = bounds;
         this.getLimitPoints(this.series);
@@ -106,3 +112,7 @@ export default class MCTChartAlarmLineSet {
     }
 
 }
+
+/**
+@typedef {import('@/api/time/TimeContext').Bounds} Bounds
+*/

src/plugins/plot/chart/MCTChartLineLinear.js

@@ -23,7 +23,7 @@
 import MCTChartSeriesElement from './MCTChartSeriesElement';
 
 export default class MCTChartLineLinear extends MCTChartSeriesElement {
-    addPoint(point, start, count) {
+    addPoint(point, start) {
         this.buffer[start] = point.x;
         this.buffer[start + 1] = point.y;
     }

src/plugins/plot/chart/MCTChartLineStepAfter.js

@@ -23,7 +23,7 @@
 import MCTChartSeriesElement from './MCTChartSeriesElement';
 
 export default class MCTChartLineStepAfter extends MCTChartSeriesElement {
-    removePoint(point, index, count) {
+    removePoint(index) {
         if (index > 0 && index / 2 < this.count) {
             this.buffer[index + 1] = this.buffer[index - 1];
         }
@@ -45,7 +45,7 @@ export default class MCTChartLineStepAfter extends MCTChartSeriesElement {
         return 2 + ((index - 1) * 4);
     }
 
-    addPoint(point, start, count) {
+    addPoint(point, start) {
         if (start === 0 && this.count === 0) {
             // First point is easy.
             this.buffer[start] = point.x;

src/plugins/plot/chart/MCTChartPointSet.js

@@ -24,7 +24,7 @@ import MCTChartSeriesElement from './MCTChartSeriesElement';
 
 // TODO: Is this needed? This is identical to MCTChartLineLinear. Why is it a different class?
 export default class MCTChartPointSet extends MCTChartSeriesElement {
-    addPoint(point, start, count) {
+    addPoint(point, start) {
         this.buffer[start] = point.x;
         this.buffer[start + 1] = point.y;
     }

src/plugins/plot/chart/MCTChartSeriesElement.js

@@ -22,6 +22,7 @@
 
 import eventHelpers from '../lib/eventHelpers';
 
+/** @abstract */
 export default class MCTChartSeriesElement {
     constructor(series, chart, offset) {
         this.series = series;
@@ -72,9 +73,11 @@ export default class MCTChartSeriesElement {
         }
     }
 
-    removePoint(point, index, count) {
-        // by default, do nothing.
-    }
+    /** @abstract */
+    removePoint(index) {}
+
+    /** @abstract */
+    addPoint(point, index) {}
 
     remove(point, index, series) {
         const vertexCount = this.vertexCountForPointAtIndex(index);
@@ -82,11 +85,10 @@ export default class MCTChartSeriesElement {
 
         this.removeSegments(removalPoint, vertexCount);
 
-        this.removePoint(
-            this.makePoint(point, series),
-            removalPoint,
-            vertexCount
-        );
+        // TODO useless makePoint call?
+        this.makePoint(point, series);
+        this.removePoint(removalPoint);
+
         this.count -= (vertexCount / 2);
     }
 
@@ -106,11 +108,7 @@ export default class MCTChartSeriesElement {
         const insertionPoint = this.startIndexForPointAtIndex(index);
         this.growIfNeeded(pointsRequired);
         this.makeInsertionPoint(insertionPoint, pointsRequired);
-        this.addPoint(
-            this.makePoint(point, series),
-            insertionPoint,
-            pointsRequired
-        );
+        this.addPoint(this.makePoint(point, series), insertionPoint);
         this.count += (pointsRequired / 2);
     }
 
@@ -155,3 +153,18 @@ export default class MCTChartSeriesElement {
     }
 
 }
+
+/** @typedef {any} TODO */
+
+/** @typedef {import('../configuration/PlotSeries').default} PlotSeries */
+
+/**
+@typedef {{
+    x: (x: number) => number
+    y: (y: number) => number
+    xVal: (point: Point, pSeries: PlotSeries) => number
+    yVal: (point: Point, pSeries: PlotSeries) => number
+    xKey: TODO
+    yKey: TODO
+}} Offset
+*/

src/plugins/plot/configuration/Collection.js

@@ -21,11 +21,17 @@
  *****************************************************************************/
 import Model from './Model';
 
+/**
+ * @template {object} T
+ * @template {object} O
+ * @extends {Model<T, O>}
+ */
 export default class Collection extends Model {
+    /** @type {Constructor} */
+    modelClass = Model;
 
     initialize(options) {
         super.initialize(options);
-        this.modelClass = Model;
         if (options.models) {
             this.models = options.models.map(this.modelFn, this);
         } else {
@@ -107,3 +113,7 @@ export default class Collection extends Model {
         this.stopListening();
     }
 }
+
+/** @typedef {any} TODO */
+
+/** @typedef {new (...args: any[]) => object} Constructor */

src/plugins/plot/configuration/ConfigStore.js

@@ -19,32 +19,47 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-function ConfigStore() {
-    this.store = {};
-}
+class ConfigStore {
+    /** @type {Record<string, Destroyable>} */
+    store = {};
 
-ConfigStore.prototype.deleteStore = function (id) {
-    if (this.store[id]) {
-        if (this.store[id].destroy) {
-            this.store[id].destroy();
+    /**
+    @param {string} id
+    */
+    deleteStore(id) {
+        const obj = this.store[id];
+
+        if (obj) {
+            if (obj.destroy) {
+                obj.destroy();
+            }
+
+            delete this.store[id];
         }
-
-        delete this.store[id];
     }
-};
 
-ConfigStore.prototype.deleteAll = function () {
-    Object.keys(this.store).forEach(id => this.deleteStore(id));
-};
+    deleteAll() {
+        Object.keys(this.store).forEach(id => this.deleteStore(id));
+    }
 
-ConfigStore.prototype.add = function (id, config) {
-    this.store[id] = config;
-};
+    /**
+    @param {string} id
+    @param {any} config
+    */
+    add(id, config) {
+        this.store[id] = config;
+    }
 
-ConfigStore.prototype.get = function (id) {
-    return this.store[id];
-};
+    /**
+    @param {string} id
+    */
+    get(id) {
+        return this.store[id];
+    }
+}
 
 const STORE = new ConfigStore();
 
 export default STORE;
+
+/** @typedef {{destroy?(): void}} Destroyable */

src/plugins/plot/configuration/LegendModel.js

@@ -42,7 +42,10 @@ export default class LegendModel extends Model {
         }
     }
 
-    defaults(options) {
+    /**
+     * @override
+     */
+    defaultModel(options) {
         return {
             position: 'top',
             expandByDefault: false,

src/plugins/plot/configuration/Model.js

@@ -20,11 +20,18 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import EventEmitter from 'EventEmitter';
+import EventEmitter from 'eventemitter3';
 import eventHelpers from "../lib/eventHelpers";
 import _ from 'lodash';
 
+/**
+ * @template {object} T
+ * @template {object} O
+ */
 export default class Model extends EventEmitter {
+    /**
+     * @param {ModelOptions<T, O>} options
+     */
     constructor(options) {
         super();
 
@@ -35,10 +42,14 @@ export default class Model extends EventEmitter {
             options = {};
         }
 
+        // FIXME: this.id is defined as a method further below, but here it is
+        // assigned a possibly-undefined value. Is this code unused?
         this.id = options.id;
+
+        /** @type {ModelType<T>} */
         this.model = options.model;
         this.collection = options.collection;
-        const defaults = this.defaults(options);
+        const defaults = this.defaultModel(options);
         if (!this.model) {
             this.model = options.model = defaults;
         } else {
@@ -46,14 +57,24 @@ export default class Model extends EventEmitter {
         }
 
         this.initialize(options);
+
+        /** @type {keyof ModelType<T> } */
         this.idAttr = 'id';
     }
 
-    defaults(options) {
+    /**
+     * @param {ModelOptions<T, O>} options
+     * @returns {ModelType<T>}
+     */
+    defaultModel(options) {
         return {};
     }
 
-    initialize(model) {
+    /**
+     * @abstract
+     * @param {ModelOptions<T, O>} options
+     */
+    initialize(options) {
 
     }
 
@@ -69,14 +90,29 @@ export default class Model extends EventEmitter {
         return this.get(this.idAttr);
     }
 
+    /**
+     * @template {keyof ModelType<T>} K
+     * @param {K} attribute
+     * @returns {ModelType<T>[K]}
+     */
     get(attribute) {
         return this.model[attribute];
     }
 
+    /**
+     * @template {keyof ModelType<T>} K
+     * @param {K} attribute
+     * @returns boolean
+     */
     has(attribute) {
         return _.has(this.model, attribute);
     }
 
+    /**
+     * @template {keyof ModelType<T>} K
+     * @param {K} attribute
+     * @param {ModelType<T>[K]} value
+     */
     set(attribute, value) {
         const oldValue = this.model[attribute];
         this.model[attribute] = value;
@@ -84,6 +120,10 @@ export default class Model extends EventEmitter {
         this.emit('change:' + attribute, value, oldValue, this);
     }
 
+    /**
+     * @template {keyof ModelType<T>} K
+     * @param {K} attribute
+     */
     unset(attribute) {
         const oldValue = this.model[attribute];
         delete this.model[attribute];
@@ -91,3 +131,26 @@ export default class Model extends EventEmitter {
         this.emit('change:' + attribute, undefined, oldValue, this);
     }
 }
+
+/** @typedef {any} TODO */
+
+/** @typedef {TODO} OpenMCT */
+
+/**
+@template {object} T
+@typedef {{
+    id?: string
+} & T} ModelType
+*/
+
+/**
+@template {object} T
+@template {object} O
+@typedef {{
+    model?: ModelType<T>
+    models?: T[]
+    openmct: OpenMCT
+    id?: string
+    [k: string]: unknown
+} & O} ModelOptions
+*/

src/plugins/plot/configuration/PlotConfigurationModel.js

@@ -26,20 +26,30 @@ import SeriesCollection from "./SeriesCollection";
 import XAxisModel from "./XAxisModel";
 import YAxisModel from "./YAxisModel";
 import LegendModel from "./LegendModel";
+
 /**
  * PlotConfiguration model stores the configuration of a plot and some
  * limited state.  The indiidual parts of the plot configuration model
  * handle setting defaults and updating in response to various changes.
  *
+ * @extends {Model<PlotConfigModelType, PlotConfigModelOptions>}
  */
 export default class PlotConfigurationModel extends Model {
     /**
      * Initializes all sub models and then passes references to submodels
      * to those that need it.
+     *
+     * @override
+     * @param {import('./Model').ModelOptions<PlotConfigModelType, PlotConfigModelOptions>} options
      */
     initialize(options) {
         this.openmct = options.openmct;
 
+        // This is a type assertion for TypeScript, this error is never thrown in practice.
+        if (!options.model) {
+            throw new Error('Not a collection model.');
+        }
+
         this.xAxis = new XAxisModel({
             model: options.model.xAxis,
             plot: this,
@@ -76,6 +86,8 @@ export default class PlotConfigurationModel extends Model {
     }
     /**
      * Retrieve the persisted series config for a given identifier.
+     * @param {import('./PlotSeries').Identifier} identifier
+     * @returns {import('./PlotSeries').PlotSeriesModelType=}
      */
     getPersistedSeriesConfig(identifier) {
         const domainObject = this.get('domainObject');
@@ -123,15 +135,49 @@ export default class PlotConfigurationModel extends Model {
     /**
      * Return defaults, which are extracted from the passed in domain
      * object.
+     * @override
+     * @param {import('./Model').ModelOptions<PlotConfigModelType, PlotConfigModelOptions>} options
      */
-    defaults(options) {
+    defaultModel(options) {
         return {
             series: [],
             domainObject: options.domainObject,
-            xAxis: {
-            },
-            yAxis: _.cloneDeep(_.get(options.domainObject, 'configuration.yAxis', {})),
-            legend: _.cloneDeep(_.get(options.domainObject, 'configuration.legend', {}))
+            xAxis: {},
+            yAxis: _.cloneDeep(options.domainObject.configuration?.yAxis ?? {}),
+            legend: _.cloneDeep(options.domainObject.configuration?.legend ?? {})
         };
     }
 }
+
+/** @typedef {any} TODO */
+
+/** @typedef {import('./PlotSeries').default} PlotSeries */
+
+/**
+@typedef {{
+    configuration: {
+        series: import('./PlotSeries').PlotSeriesModelType[]
+        yAxis: import('./YAxisModel').YAxisModelType
+    },
+}} SomeDomainObject_NeedsName
+*/
+
+/**
+@typedef {{
+    xAxis: import('./XAxisModel').XAxisModelType
+    yAxis: import('./YAxisModel').YAxisModelType
+    legend: TODO
+    series: PlotSeries[]
+    domainObject: SomeDomainObject_NeedsName
+}} PlotConfigModelType
+*/
+
+/** @typedef {TODO} SomeOtherDomainObject */
+
+/**
+TODO: Is SomeOtherDomainObject the same domain object as with SomeDomainObject_NeedsName?
+@typedef {{
+    plot: import('./PlotConfigurationModel').default
+    domainObject: SomeOtherDomainObject
+}} PlotConfigModelOptions
+*/

src/plugins/plot/configuration/PlotSeries.js

@@ -23,6 +23,7 @@ import _ from 'lodash';
 import Model from "./Model";
 import { MARKER_SHAPES } from '../draw/MarkerShapes';
 import configStore from "../configuration/ConfigStore";
+import { symlog } from '../mathUtils';
 
 /**
  * Plot series handle interpreting telemetry metadata for a single telemetry
@@ -59,11 +60,21 @@ import configStore from "../configuration/ConfigStore";
  * `metadata`: the Open MCT Telemetry Metadata Manager for the associated
  *             telemetry point.
  * `formats`: the Open MCT format map for this telemetry point.
+ *
+ * @extends {Model<PlotSeriesModelType, PlotSeriesModelOptions>}
  */
 export default class PlotSeries extends Model {
+    logMode = false;
+
+    /**
+     @param {import('./Model').ModelOptions<PlotSeriesModelType, PlotSeriesModelOptions>} options
+     */
     constructor(options) {
+
         super(options);
 
+        this.logMode = options.collection.plot.model.yAxis.logMode;
+
         this.listenTo(this, 'change:xKey', this.onXKeyChange, this);
         this.listenTo(this, 'change:yKey', this.onYKeyChange, this);
         this.persistedConfig = options.persistedConfig;
@@ -76,8 +87,10 @@ export default class PlotSeries extends Model {
 
     /**
      * Set defaults for telemetry series.
+     * @param {import('./Model').ModelOptions<PlotSeriesModelType, PlotSeriesModelOptions>} options
+     * @override
      */
-    defaults(options) {
+    defaultModel(options) {
         this.metadata = options
             .openmct
             .telemetry
@@ -109,13 +122,21 @@ export default class PlotSeries extends Model {
 
     /**
      * Remove real-time subscription when destroyed.
+     * @override
      */
-    onDestroy(model) {
+    destroy() {
+        super.destroy();
+
         if (this.unsubscribe) {
             this.unsubscribe();
         }
     }
 
+    /**
+     * Set defaults for telemetry series.
+     * @override
+     * @param {import('./Model').ModelOptions<PlotSeriesModelType, PlotSeriesModelOptions>} options
+     */
     initialize(options) {
         this.openmct = options.openmct;
         this.domainObject = options.domainObject;
@@ -136,9 +157,11 @@ export default class PlotSeries extends Model {
 
         });
         this.openmct.time.on('bounds', this.updateLimits);
-        this.on('destroy', this.onDestroy, this);
     }
 
+    /**
+     * @param {Bounds} bounds
+     */
     updateLimits(bounds) {
         this.emit('limitBounds', bounds);
     }
@@ -188,7 +211,7 @@ export default class PlotSeries extends Model {
         return this.openmct
             .telemetry
             .request(this.domainObject, options)
-            .then(function (points) {
+            .then((points) => {
                 const data = this.getSeriesData();
                 const newPoints = _(data)
                     .concat(points)
@@ -196,7 +219,7 @@ export default class PlotSeries extends Model {
                     .uniq(true, point => [this.getXVal(point), this.getYVal(point)].join())
                     .value();
                 this.reset(newPoints);
-            }.bind(this))
+            })
             .catch((error) => {
                 console.warn('Error fetching data', error);
             });
@@ -211,6 +234,7 @@ export default class PlotSeries extends Model {
             this.getXVal = format.parse.bind(format);
         }
     }
+
     /**
      * Update y formatter on change, default to stepAfter interpolation if
      * y range is an enumeration.
@@ -232,8 +256,13 @@ export default class PlotSeries extends Model {
         this.evaluate = function (datum) {
             return this.limitEvaluator.evaluate(datum, valueMetadata);
         }.bind(this);
+        this.set('unit', valueMetadata.unit);
         const format = this.formats[newKey];
-        this.getYVal = format.parse.bind(format);
+        this.getYVal = (value) => {
+            const y = format.parse(value);
+
+            return this.logMode ? symlog(y, 10) : y;
+        };
     }
 
     formatX(point) {
@@ -501,8 +530,56 @@ export default class PlotSeries extends Model {
 
     /**
      * Update the series data with the given value.
+     * This return type definition is totally wrong, only covers sinwave generator. It needs to be generic.
+     * @return-example {Array<{
+            cos: number
+            sin: number
+            mctLimitState: {
+                cssClass: string
+                high: number
+                low: {sin: number, cos: number}
+                name: string
+            }
+            utc: number
+            wavelength: number
+            yesterday: number
+        }>}
      */
     getSeriesData() {
         return configStore.get(this.dataStoreId) || [];
     }
 }
+
+/** @typedef {any} TODO */
+
+/** @typedef {{key: string, namespace: string}} Identifier */
+
+/**
+@typedef {{
+    identifier: Identifier
+    name: string
+    unit: string
+    xKey: string
+    yKey: string
+    markers: boolean
+    markerShape: keyof typeof MARKER_SHAPES
+    markerSize: number
+    alarmMarkers: boolean
+    limitLines: boolean
+    interpolate: boolean
+    stats: TODO
+}} PlotSeriesModelType
+*/
+
+/**
+@typedef {{
+    model: PlotSeriesModelType
+    collection: import('./SeriesCollection').default
+    persistedConfig: PlotSeriesModelType
+    filters: TODO
+}} PlotSeriesModelOptions
+*/
+
+/**
+@typedef {import('@/api/time/TimeContext').Bounds} Bounds
+*/

src/plugins/plot/configuration/SeriesCollection.js

@@ -26,8 +26,14 @@ import Collection from "./Collection";
 import Color from "@/ui/color/Color";
 import ColorPalette from "@/ui/color/ColorPalette";
 
+/**
+ * @extends {Collection<SeriesCollectionModelType, SeriesCollectionOptions>}
+ */
 export default class SeriesCollection extends Collection {
-
+    /**
+    @override
+    @param {import('./Model').ModelOptions<SeriesCollectionModelType, SeriesCollectionOptions>} options
+    */
     initialize(options) {
         super.initialize(options);
         this.modelClass = PlotSeries;
@@ -83,11 +89,15 @@ export default class SeriesCollection extends Collection {
         // Clone to prevent accidental mutation by ref.
         seriesConfig = JSON.parse(JSON.stringify(seriesConfig));
 
+        if (!seriesConfig) {
+            throw "not possible";
+        }
+
         this.add(new PlotSeries({
             model: seriesConfig,
             domainObject: domainObject,
-            collection: this,
             openmct: this.openmct,
+            collection: this,
             persistedConfig: this.plot
                 .getPersistedSeriesConfig(domainObject.identifier),
             filters: filters
@@ -163,3 +173,13 @@ export default class SeriesCollection extends Collection {
         })[0];
     }
 }
+
+/**
+@typedef {PlotSeries} SeriesCollectionModelType
+*/
+
+/**
+@typedef {{
+    plot: import('./PlotConfigurationModel').default
+}} SeriesCollectionOptions
+*/

src/plugins/plot/configuration/XAxisModel.js

@@ -19,25 +19,41 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import Model from "./Model";
+import Model from './Model';
+
 /**
-     * TODO: doc strings.
-     */
+ * @extends {Model<XAxisModelType, XAxisModelOptions>}
+ */
 export default class XAxisModel extends Model {
+    // Despite providing template types to the Model class, we still need to
+    // re-define the type of the following initialize() method's options arg. Tracking
+    // issue for this: https://github.com/microsoft/TypeScript/issues/32082
+    // When they fix it, we can remove the `@param` we have here.
+    /**
+     * @override
+     * @param {import('./Model').ModelOptions<XAxisModelType, XAxisModelOptions>} options
+     */
     initialize(options) {
         this.plot = options.plot;
+
+        // This is a type assertion for TypeScript, this error is not thrown in practice.
+        if (!options.model) {
+            throw new Error('Not a collection model.');
+        }
+
         this.set('label', options.model.name || '');
-        this.on('change:range', function (newValue, oldValue, model) {
-            if (!model.get('frozen')) {
-                model.set('displayRange', newValue);
+
+        this.on('change:range', (newValue) => {
+            if (!this.get('frozen')) {
+                this.set('displayRange', newValue);
             }
         });
 
-        this.on('change:frozen', ((frozen, oldValue, model) => {
+        this.on('change:frozen', (frozen) => {
             if (!frozen) {
-                model.set('range', this.get('range'));
+                this.set('range', this.get('range'));
             }
-        }));
+        });
 
         if (this.get('range')) {
             this.set('range', this.get('range'));
@@ -45,6 +61,10 @@ export default class XAxisModel extends Model {
 
         this.listenTo(this, 'change:key', this.changeKey, this);
     }
+
+    /**
+     * @param {string} newKey
+     */
     changeKey(newKey) {
         const series = this.plot.series.first();
         if (series) {
@@ -68,12 +88,17 @@ export default class XAxisModel extends Model {
             plotSeries.reset();
         });
     }
-    defaults(options) {
+    /**
+     * @param {import('./Model').ModelOptions<XAxisModelType, XAxisModelOptions>} options
+     * @override
+     */
+    defaultModel(options) {
         const bounds = options.openmct.time.bounds();
         const timeSystem = options.openmct.time.timeSystem();
         const format = options.openmct.telemetry.getFormatter(timeSystem.timeFormat);
 
-        return {
+        /** @type {XAxisModelType} */
+        const defaultModel = {
             name: timeSystem.name,
             key: timeSystem.key,
             format: format.format.bind(format),
@@ -83,5 +108,42 @@ export default class XAxisModel extends Model {
             },
             frozen: false
         };
+
+        return defaultModel;
     }
 }
+
+/** @typedef {any} TODO */
+
+/** @typedef {TODO} OpenMCT */
+
+/**
+@typedef {{
+    min: number
+    max: number
+}} NumberRange
+*/
+
+/**
+@typedef {import("./Model").ModelType<{
+    range?: NumberRange
+    displayRange: NumberRange
+    frozen: boolean
+    label: string
+    format: (n: number) => string
+    values: Array<TODO>
+}>} AxisModelType
+*/
+
+/**
+@typedef {AxisModelType & {
+    name: string
+    key: string
+}} XAxisModelType
+*/
+
+/**
+@typedef {{
+    plot: import('./PlotConfigurationModel').default
+}} XAxisModelOptions
+*/

src/plugins/plot/configuration/YAxisModel.js

@@ -19,58 +19,62 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import _ from 'lodash';
+import { antisymlog, symlog } from '../mathUtils';
 import Model from './Model';
 
 /**
-     * YAxis model
-      *
-     * TODO: docstrings.
-     *
-     * has the following Model properties:
-     *
-     * `autoscale`: boolean, whether or not to autoscale.
-     * `autoscalePadding`: float, percent of padding to display in plots.
-     * `displayRange`: the current display range for the x Axis.
-     * `format`: the formatter for the axis.
-     * `frozen`: boolean, if true, displayRange will not be updated automatically.
-     *           Used to temporarily disable automatic updates during user interaction.
-     * `label`: label to display on axis.
-     * `stats`: Min and Max Values of data, automatically updated by observing
-     *          plot series.
-     * `values`: for enumerated types, an array of possible display values.
-     * `range`: the user-configured range to use for display, when autoscale is
-     *         disabled.
-     *
-     */
+ * YAxis model
+ *
+ * TODO: docstrings.
+ *
+ * has the following Model properties:
+ *
+ * `autoscale`: boolean, whether or not to autoscale.
+ * `autoscalePadding`: float, percent of padding to display in plots.
+ * `displayRange`: the current display range for the axis.
+ * `format`: the formatter for the axis.
+ * `frozen`: boolean, if true, displayRange will not be updated automatically.
+ *           Used to temporarily disable automatic updates during user interaction.
+ * `label`: label to display on axis.
+ * `stats`: Min and Max Values of data, automatically updated by observing
+ *          plot series.
+ * `values`: for enumerated types, an array of possible display values.
+ * `range`: the user-configured range to use for display, when autoscale is
+ *         disabled.
+ *
+ * @extends {Model<YAxisModelType, YAxisModelOptions>}
+ */
 export default class YAxisModel extends Model {
+    /**
+     * @override
+     * @param {import('./Model').ModelOptions<YAxisModelType, YAxisModelOptions>} options
+     */
     initialize(options) {
         this.plot = options.plot;
         this.listenTo(this, 'change:stats', this.calculateAutoscaleExtents, this);
         this.listenTo(this, 'change:autoscale', this.toggleAutoscale, this);
         this.listenTo(this, 'change:autoscalePadding', this.updatePadding, this);
+        this.listenTo(this, 'change:logMode', this.onLogModeChange, this);
         this.listenTo(this, 'change:frozen', this.toggleFreeze, this);
         this.listenTo(this, 'change:range', this.updateDisplayRange, this);
         this.updateDisplayRange(this.get('range'));
     }
+    /**
+     * @param {import('./SeriesCollection').default} seriesCollection
+     */
     listenToSeriesCollection(seriesCollection) {
         this.seriesCollection = seriesCollection;
-        this.listenTo(this.seriesCollection, 'add', (series => {
+        this.listenTo(this.seriesCollection, 'add', series => {
             this.trackSeries(series);
             this.updateFromSeries(this.seriesCollection);
-        }), this);
-        this.listenTo(this.seriesCollection, 'remove', (series => {
+        }, this);
+        this.listenTo(this.seriesCollection, 'remove', series => {
             this.untrackSeries(series);
             this.updateFromSeries(this.seriesCollection);
-        }), this);
+        }, this);
         this.seriesCollection.forEach(this.trackSeries, this);
         this.updateFromSeries(this.seriesCollection);
     }
-    updateDisplayRange(range) {
-        if (!this.get('autoscale')) {
-            this.set('displayRange', range);
-        }
-    }
     toggleFreeze(frozen) {
         if (!frozen) {
             this.toggleAutoscale(this.get('autoscale'));
@@ -132,12 +136,15 @@ export default class YAxisModel extends Model {
     }
     resetStats() {
         this.unset('stats');
-        this.seriesCollection.forEach(function (series) {
+        this.seriesCollection.forEach(series => {
             if (series.has('stats')) {
                 this.updateStats(series.get('stats'));
             }
-        }, this);
+        });
     }
+    /**
+     * @param {import('./PlotSeries').default} series
+     */
     trackSeries(series) {
         this.listenTo(series, 'change:stats', seriesStats => {
             if (!seriesStats) {
@@ -155,20 +162,104 @@ export default class YAxisModel extends Model {
         this.resetStats();
         this.updateFromSeries(this.seriesCollection);
     }
+
+    /**
+     * This is called in order to map the user-provided `range` to the
+     * `displayRange` that we actually use for plot display.
+     *
+     * @param {import('./XAxisModel').NumberRange} range
+     */
+    updateDisplayRange(range) {
+        if (this.get('autoscale')) {
+            return;
+        }
+
+        const _range = { ...range };
+
+        if (this.get('logMode')) {
+            _range.min = symlog(range.min, 10);
+            _range.max = symlog(range.max, 10);
+        }
+
+        this.set('displayRange', _range);
+    }
+
+    /**
+     * @param {boolean} autoscale
+     */
     toggleAutoscale(autoscale) {
         if (autoscale && this.has('stats')) {
             this.set('displayRange', this.applyPadding(this.get('stats')));
+
+            return;
+        }
+
+        const range = this.get('range');
+
+        if (range) {
+            // If we already have a user-defined range, make sure it maps to the
+            // range we'll actually use for the ticks.
+
+            const _range = { ...range };
+
+            if (this.get('logMode')) {
+                _range.min = symlog(range.min, 10);
+                _range.max = symlog(range.max, 10);
+            }
+
+            this.set('displayRange', _range);
         } else {
-            this.set('displayRange', this.get('range'));
+            // Otherwise use the last known displayRange as the initial
+            // values for the user-defined range, so that we don't end up
+            // with any error from an undefined user range.
+
+            const _range = this.get('displayRange');
+
+            if (!_range) {
+                return;
+            }
+
+            if (this.get('logMode')) {
+                _range.min = antisymlog(_range.min, 10);
+                _range.max = antisymlog(_range.max, 10);
+            }
+
+            this.set('range', _range);
         }
     }
+
+    /** @param {boolean} logMode */
+    onLogModeChange(logMode) {
+        const range = this.get('displayRange');
+
+        if (logMode) {
+            range.min = symlog(range.min, 10);
+            range.max = symlog(range.max, 10);
+        } else {
+            range.min = antisymlog(range.min, 10);
+            range.max = antisymlog(range.max, 10);
+        }
+
+        this.set('displayRange', range);
+
+        this.resetSeries();
+    }
+    resetSeries() {
+        this.plot.series.forEach((plotSeries) => {
+            plotSeries.logMode = this.get('logMode');
+            plotSeries.reset(plotSeries.getSeriesData());
+        });
+        // Update the series collection labels and formatting
+        this.updateFromSeries(this.seriesCollection);
+    }
     /**
-         * Update yAxis format, values, and label from known series.
-         */
-    updateFromSeries(series) {
+     * Update yAxis format, values, and label from known series.
+     * @param {import('./SeriesCollection').default} seriesCollection
+     */
+    updateFromSeries(seriesCollection) {
         const plotModel = this.plot.get('domainObject');
-        const label = _.get(plotModel, 'configuration.yAxis.label');
-        const sampleSeries = series.first();
+        const label = plotModel.configuration?.yAxis?.label;
+        const sampleSeries = seriesCollection.first();
         if (!sampleSeries) {
             if (!label) {
                 this.unset('label');
@@ -180,22 +271,28 @@ export default class YAxisModel extends Model {
         const yKey = sampleSeries.get('yKey');
         const yMetadata = sampleSeries.metadata.value(yKey);
         const yFormat = sampleSeries.formats[yKey];
-        this.set('format', yFormat.format.bind(yFormat));
+
+        if (this.get('logMode')) {
+            this.set('format', (n) => yFormat.format(antisymlog(n, 10)));
+        } else {
+            this.set('format', (n) => yFormat.format(n));
+        }
+
         this.set('values', yMetadata.values);
         if (!label) {
-            const labelName = series.map(function (s) {
-                return s.metadata ? s.metadata.value(s.get('yKey')).name : '';
-            }).reduce(function (a, b) {
-                if (a === undefined) {
-                    return b;
-                }
+            const labelName = seriesCollection
+                .map(s => (s.metadata ? s.metadata.value(s.get('yKey')).name : ''))
+                .reduce((a, b) => {
+                    if (a === undefined) {
+                        return b;
+                    }
 
-                if (a === b) {
-                    return a;
-                }
+                    if (a === b) {
+                        return a;
+                    }
 
-                return '';
-            }, undefined);
+                    return '';
+                }, undefined);
 
             if (labelName) {
                 this.set('label', labelName);
@@ -203,19 +300,19 @@ export default class YAxisModel extends Model {
                 return;
             }
 
-            const labelUnits = series.map(function (s) {
-                return s.metadata ? s.metadata.value(s.get('yKey')).units : '';
-            }).reduce(function (a, b) {
-                if (a === undefined) {
-                    return b;
-                }
+            const labelUnits = seriesCollection
+                .map(s => (s.metadata ? s.metadata.value(s.get('yKey')).units : ''))
+                .reduce((a, b) => {
+                    if (a === undefined) {
+                        return b;
+                    }
 
-                if (a === b) {
-                    return a;
-                }
+                    if (a === b) {
+                        return a;
+                    }
 
-                return '';
-            }, undefined);
+                    return '';
+                }, undefined);
 
             if (labelUnits) {
                 this.set('label', labelUnits);
@@ -224,11 +321,39 @@ export default class YAxisModel extends Model {
             }
         }
     }
-    defaults(options) {
+    /**
+     * @override
+     * @param {import('./Model').ModelOptions<YAxisModelType, YAxisModelOptions>} options
+     * @returns {Partial<YAxisModelType>}
+     */
+    defaultModel(options) {
         return {
             frozen: false,
             autoscale: true,
+            logMode: options.model?.logMode ?? false,
             autoscalePadding: 0.1
+
+            // 'range' is not specified here, it is undefined at first. When the
+            // user turns off autoscale, the current 'displayRange' is used for
+            // the initial value of 'range'.
         };
     }
 }
+
+/** @typedef {any} TODO */
+
+/**
+@typedef {import('./XAxisModel').AxisModelType & {
+    autoscale: boolean
+    logMode: boolean
+    autoscalePadding: number
+    stats?: import('./XAxisModel').NumberRange
+    values: Array<TODO>
+}} YAxisModelType
+*/
+
+/**
+@typedef {{
+    plot: import('./PlotConfigurationModel').default
+}} YAxisModelOptions
+*/