plot w/ two telemetries in inspector

* e2e test for timage thumbnail visibility and size

* Lint fix

* Remove URL comment

* Added comment and assigned selectors to var

.circleci/config.yml

@@ -2,7 +2,7 @@ version: 2.1
 executors:
   pw-focal-development:
     docker:
-      - image: mcr.microsoft.com/playwright:v1.19.2-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:

.github/ISSUE_TEMPLATE/bug_report.md

@@ -40,6 +40,7 @@ assignees: ''
 - [ ] Is there a workaround available?
 - [ ] Does this impact a critical component?
 - [ ] Is this just a visual bug with no functional impact?
+- [ ] Does this block the execution of e2e tests?
 
 #### Additional Information
 <!--- Include any screenshots, gifs, or logs which will expedite triage -->

.github/PULL_REQUEST_TEMPLATE.md

@@ -16,7 +16,7 @@ Closes <!--- Insert Issue Number(s) this PR addresses. Start by typing # will op
 * [ ] Unit tests included and/or updated with changes?
 * [ ] Command line build passes?
 * [ ] Has this been smoke tested?
-* [ ] Testing instructions included in associated issue?
+* [ ] Testing instructions included in associated issue OR is this a dependency/testcase change?
 
 ### Reviewer Checklist
 

.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,7 +30,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
       - run: npm run test:e2e:full
       - name: Archive test results

.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

e2e/fixtures.js

@@ -0,0 +1,27 @@
+/* eslint-disable no-undef */
+
+// This file extends the base functionality of the playwright test framework
+const base = require('@playwright/test');
+const { expect } = require('@playwright/test');
+
+exports.test = base.test.extend({
+    page: async ({ baseURL, page }, use) => {
+        const messages = [];
+        page.on('console', msg => messages.push(`[${msg.type()}] ${msg.text()}`));
+        await use(page);
+        await expect.soft(messages.toString()).not.toContain('[error]');
+    },
+    browser: async ({ playwright, browser }, use, workerInfo) => {
+    // Use browserless if configured
+        if (workerInfo.project.name.match(/browserless/)) {
+            const vBrowser = await playwright.chromium.connectOverCDP({
+                endpointURL: 'ws://localhost:3003'
+            });
+            await use(vBrowser);
+        } else {
+            // Use Local Browser for testing.
+            await use(browser);
+        }
+    }
+});
+

e2e/playwright-ci.config.js

@@ -2,13 +2,14 @@
 // playwright.config.js
 // @ts-check
 
+// eslint-disable-next-line no-unused-vars
 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 +29,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

@@ -2,6 +2,7 @@
 // playwright.config.js
 // @ts-check
 
+// eslint-disable-next-line no-unused-vars
 const { devices } = require('@playwright/test');
 
 /** @type {import('@playwright/test').PlaywrightTestConfig} */
@@ -29,12 +30,12 @@ const config = {
         {
             name: 'chrome',
             use: {
-                browserName: 'chromium',
-                ...devices['Desktop Chrome']
+                browserName: 'chromium'
             }
         },
         {
             name: 'MMOC',
+            grepInvert: /@snapshot/,
             use: {
                 browserName: 'chromium',
                 viewport: {

e2e/tests/api/forms/forms.e2e.spec.js

@@ -0,0 +1,79 @@
+/*****************************************************************************
+ * 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 form functionality.
+*/
+
+const { test, expect } = require('@playwright/test');
+
+const TEST_FOLDER = 'test folder';
+
+test.describe('forms set', () => {
+    test('New folder form has title as required field', async ({ page }) => {
+        //Go to baseURL
+        await page.goto('/', { waitUntil: 'networkidle' });
+
+        // Click button:has-text("Create")
+        await page.click('button:has-text("Create")');
+        // Click :nth-match(:text("Folder"), 2)
+        await page.click(':nth-match(:text("Folder"), 2)');
+        // Click text=Properties Title Notes >> input[type="text"]
+        await page.click('text=Properties Title Notes >> input[type="text"]');
+        // Fill text=Properties Title Notes >> input[type="text"]
+        await page.fill('text=Properties Title Notes >> input[type="text"]', '');
+        // Press Tab
+        await page.press('text=Properties Title Notes >> input[type="text"]', 'Tab');
+        // Click text=OK Cancel
+        await page.click('text=OK', { force: true });
+
+        const okButton = page.locator('text=OK');
+
+        await expect(okButton).toBeDisabled();
+        await expect(page.locator('.c-form-row__state-indicator').first()).toHaveClass(/invalid/);
+
+        // Click text=Properties Title Notes >> input[type="text"]
+        await page.click('text=Properties Title Notes >> input[type="text"]');
+        // Fill text=Properties Title Notes >> input[type="text"]
+        await page.fill('text=Properties Title Notes >> input[type="text"]', TEST_FOLDER);
+        // Press Tab
+        await page.press('text=Properties Title Notes >> input[type="text"]', 'Tab');
+
+        await expect(page.locator('.c-form-row__state-indicator').first()).not.toHaveClass(/invalid/);
+
+        // Click text=OK
+        await Promise.all([
+            page.waitForNavigation(),
+            page.click('text=OK')
+        ]);
+
+        await expect(page.locator('.l-browse-bar__object-name')).toContainText(TEST_FOLDER);
+    });
+    test.fixme('Create all object types and verify correctness', async ({ page }) => {
+        //Create the following Domain Objects with their unique Object Types
+        // Sine Wave Generator (number object)
+        // Timer Object
+        // Plan View Object
+        // Clock Object
+        // Hyperlink
+    });
+});

e2e/tests/branding.e2e.spec.js

@@ -24,7 +24,8 @@
 This test suite is dedicated to tests which verify branding related components.
 */
 
-const { test, expect } = require('@playwright/test');
+const { test } = require('../fixtures.js');
+const { expect } = require('@playwright/test');
 
 test.describe('Branding tests', () => {
     test('About Modal launches with basic branding properties', async ({ page }) => {
@@ -57,6 +58,6 @@ test.describe('Branding tests', () => {
             page.waitForEvent('popup'),
             page.locator('text=click here for third party licensing information').click()
         ]);
-        expect(page2.waitForURL('**\/licenses**')).toBeTruthy();
+        expect(page2.waitForURL('**/licenses**')).toBeTruthy();
     });
 });

e2e/tests/example/eventGenerator.e2e.spec.js

@@ -24,7 +24,8 @@
 This test suite is dedicated to tests which verify the basic operations surrounding the example event generator.
 */
 
-const { test, expect } = require('@playwright/test');
+const { test } = require('../../fixtures.js');
+const { expect } = require('@playwright/test');
 
 test.describe('Example Event Generator Operations', () => {
     test('Can create example event generator with a name', async ({ page }) => {

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

@@ -24,7 +24,8 @@
 This test suite is dedicated to tests which verify the basic operations surrounding conditionSets.
 */
 
-const { test, expect } = require('@playwright/test');
+const { test } = require('../../../fixtures.js');
+const { expect } = require('@playwright/test');
 
 test.describe('Sine Wave Generator', () => {
     test('Create new Sine Wave Generator Object and validate create Form Logic', async ({ page }) => {

e2e/tests/moveObjects.e2e.spec.js

@@ -24,19 +24,119 @@
 This test suite is dedicated to tests which verify the basic operations surrounding moving objects.
 */
 
-const { test, expect } = require('@playwright/test');
+const { test } = require('../fixtures.js');
+const { 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/persistence/persistability.e2e.spec.js

@@ -24,7 +24,8 @@
 This test suite is dedicated to tests which verify the basic operations surrounding conditionSets.
 */
 
-const { test, expect } = require('@playwright/test');
+const { test } = require('../../fixtures.js');
+const { expect } = require('@playwright/test');
 const path = require('path');
 
 // https://github.com/nasa/openmct/issues/4323#issuecomment-1067282651

e2e/tests/plugins/ExportAsJSON/exportAsJson.e2e.spec.js

@@ -24,7 +24,10 @@
 This test suite is dedicated to tests which verify the basic operations surrounding exportAsJSON.
 */
 
-const { test, expect } = require('@playwright/test');
+const { test } = require('../../../fixtures.js');
+// FIXME: Remove this eslint exception once tests are implemented
+// eslint-disable-next-line no-unused-vars
+const { expect } = require('@playwright/test');
 
 test.describe('ExportAsJSON', () => {
     test.fixme('Create a basic object and verify that it can be exported as JSON from Tree', async ({ page }) => {

e2e/tests/plugins/ImportAsJSON/importAsJson.e2e.spec.js

@@ -24,7 +24,10 @@
 This test suite is dedicated to tests which verify the basic operations surrounding importAsJSON.
 */
 
-const { test, expect } = require('@playwright/test');
+const { test } = require('../../../fixtures.js');
+// FIXME: Remove this eslint exception once tests are implemented
+// eslint-disable-next-line no-unused-vars
+const { expect } = require('@playwright/test');
 
 test.describe('ExportAsJSON', () => {
     test.fixme('Verify that domain object can be importAsJSON from Tree', async ({ page }) => {

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

@@ -24,7 +24,8 @@
 This test suite is dedicated to tests which verify the basic operations surrounding Clock.
 */
 
-const { test, expect } = require('@playwright/test');
+const { test } = require('../../../fixtures.js');
+const { expect } = require('@playwright/test');
 
 test.describe('Clock Generator', () => {
 

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

@@ -21,45 +21,164 @@
  *****************************************************************************/
 
 /*
-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');
+const { test } = require('../../../fixtures.js');
+const { 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/gauge.e2eSpec.js

@@ -1,31 +0,0 @@
-// 1. create an gauge plugin
-// 2. create with custom settings
-// 3. verify required fields are required
-// 4. should not be able to create gaugue inside a gauge.
-// 5. should not be able to move/duplicate gaugue inside a gauge.
-// 6. delete gauge
-// 7. snapshot gauge
-// 8. snapshot gauge inside Notebook entry
-// 9. gauge inside Notebook entry
-// 10. can drop inside other objects:
-//     can drop to display layout : yes
-//     can drop to Flexible layout : yes
-//     can drop to Folder : yes
-//     can drop to Bar graph: No
-//     can drop to clock: No
-//     . can drop to condition set: No
-//     . can drop to condition widegt: No
-//     // .............all other objects
-//     . can drop to webpage: No
-// 11. drop telemetry inside a gauge and reflect on data in both fixed and realtime
-// 12. can have only one telemetry per gague. (show confirmation dialog if want to replace)
-// 12. all form props (except hidefromInspector) shows inside inspector
-// 13. should be able to export and import
-// 14. able to search in tree
-// 15. supports fix and realtime mode
-// 17. refresh after creating
-// 18. open in new tab
-// 19. two separate gauges inside display layout should not show same numbers unless have same telemetry (should show respctive telemetry data).
-// 20. inside display layout compare gague values vs its telemetry value (should be same in fixed time and should tick with same rate/value in realtime)
-// 21. same for two diff gauges- > inside display layout compare gague values vs its telemetry value (should be same in fixed time and should tick with same rate/value in realtime)
-// 22. export jpeg/png of plugin

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

@@ -24,13 +24,15 @@
 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');
+const { test } = require('../../../fixtures.js');
+const { 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' });
 
@@ -40,12 +42,18 @@ test.describe('Example Imagery', () => {
         // Click text=Example Imagery
         await page.click('text=Example Imagery');
 
+        // Click on My Items in Tree. Workaround for https://github.com/nasa/openmct/issues/5184
+        await page.click('form[name="mctForm"] a:has-text("My Items")');
+
         // 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 +85,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 +101,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,20 +175,26 @@ 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.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();
@@ -180,38 +205,251 @@ test.describe('Example Imagery', () => {
         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('Using the zoom features does not pause telemetry', async ({ page }) => {
+        const bgImageLocator = page.locator(backgroundImageSelector);
+        const pausePlayButton = page.locator('.c-button.pause-play');
+        // wait for zoom animation to finish
+        await bgImageLocator.hover();
+
+        // open the time conductor drop down
+        await page.locator('.c-conductor__controls button.c-mode-button').click();
+        // Click local clock
+        await page.locator('.icon-clock >> text=Local Clock').click();
+
+        await expect.soft(pausePlayButton).not.toHaveClass(/is-paused/);
+        const zoomInBtn = page.locator('.t-btn-zoom-in');
+        await zoomInBtn.click();
+        // wait for zoom animation to finish
+        await bgImageLocator.hover();
+
+        return expect(pausePlayButton).not.toHaveClass(/is-paused/);
+    });
+
 });
 
-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');
+// The following test case will cover these scenarios
+// ('Can use Mouse Wheel to zoom in and out of previous image');
+// ('Can use alt+drag to move around image once zoomed in');
+// ('Clicking on the left arrow should pause the imagery and go to previous image');
+// ('If the imagery view is in pause mode, it should not be updated when new images come in');
+// ('If the imagery view is not in pause mode, it should be updated when new images come in');
+const backgroundImageSelector = '.c-imagery__main-image__background-image';
+test('Example Imagery in Display layout', async ({ page }) => {
+    // Go to baseURL
+    await page.goto('/', { waitUntil: 'networkidle' });
+
+    // Click the Create button
+    await page.click('button:has-text("Create")');
+
+    // Click text=Example Imagery
+    await page.click('text=Example Imagery');
+
+    // Clear and set Image load delay (milliseconds)
+    await page.click('input[type="number"]', {clickCount: 3});
+    await page.type('input[type="number"]', "20");
+
+    // Click text=OK
+    await Promise.all([
+        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');
+    const bgImageLocator = await page.locator(backgroundImageSelector);
+    await bgImageLocator.hover();
+
+    // Click previous image button
+    const previousImageButton = await page.locator('.c-nav--prev');
+    await previousImageButton.click();
+
+    // Verify previous image
+    const selectedImage = page.locator('.selected');
+    await expect(selectedImage).toBeVisible();
+
+    // Zoom in
+    const originalImageDimensions = await page.locator(backgroundImageSelector).boundingBox();
+    await bgImageLocator.hover();
+    const deltaYStep = 100; // equivalent to 1x zoom
+    await page.mouse.wheel(0, deltaYStep * 2);
+    const zoomedBoundingBox = await bgImageLocator.boundingBox();
+    const imageCenterX = zoomedBoundingBox.x + zoomedBoundingBox.width / 2;
+    const imageCenterY = zoomedBoundingBox.y + zoomedBoundingBox.height / 2;
+
+    // Wait for zoom animation to finish
+    await bgImageLocator.hover();
+    const imageMouseZoomedIn = await page.locator(backgroundImageSelector).boundingBox();
+    expect(imageMouseZoomedIn.height).toBeGreaterThan(originalImageDimensions.height);
+    expect(imageMouseZoomedIn.width).toBeGreaterThan(originalImageDimensions.width);
+
+    // Center the mouse pointer
+    await page.mouse.move(imageCenterX, imageCenterY);
+
+    // Pan Imagery Hints
+    console.log('process.platform is ' + process.platform);
+    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);
+
+    // Click next image button
+    const nextImageButton = await page.locator('.c-nav--next');
+    await nextImageButton.click();
+
+    // 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();
+
+    // Zoom in on next image
+    await bgImageLocator.hover();
+    await page.mouse.wheel(0, deltaYStep * 2);
+
+    // Wait for zoom animation to finish
+    await bgImageLocator.hover();
+    const imageNextMouseZoomedIn = await page.locator(backgroundImageSelector).boundingBox();
+    expect(imageNextMouseZoomedIn.height).toBeGreaterThan(originalImageDimensions.height);
+    expect(imageNextMouseZoomedIn.width).toBeGreaterThan(originalImageDimensions.width);
+
+    // Click previous image button
+    await previousImageButton.click();
+
+    // Verify previous image
+    await expect(selectedImage).toBeVisible();
+
+    // Wait 20ms to verify no new image has come in
+    await page.waitForTimeout(21);
+
+    //Get background-image url from background-image css prop
+    const backgroundImage = await page.locator('.c-imagery__main-image__background-image');
+    let backgroundImageUrl = await backgroundImage.evaluate((el) => {
+        return window.getComputedStyle(el).getPropertyValue('background-image').match(/url\(([^)]+)\)/)[1];
+    });
+    let backgroundImageUrl1 = backgroundImageUrl.slice(1, -1); //forgive me, padre
+    console.log('backgroundImageUrl1 ' + backgroundImageUrl1);
+
+    // sleep 21ms
+    await page.waitForTimeout(21);
+
+    // Verify next image has updated
+    let backgroundImageUrlNext = await backgroundImage.evaluate((el) => {
+        return window.getComputedStyle(el).getPropertyValue('background-image').match(/url\(([^)]+)\)/)[1];
+    });
+    let backgroundImageUrl2 = backgroundImageUrlNext.slice(1, -1); //forgive me, padre
+    console.log('backgroundImageUrl2 ' + backgroundImageUrl2);
+
+    // Expect backgroundImageUrl2 to be greater then backgroundImageUrl1
+    expect(backgroundImageUrl2 >= backgroundImageUrl1);
+});
+
+test.describe('Example imagery thumbnails resize in display layouts', () => {
+
+    test('Resizing the layout changes thumbnail visibility and size', async ({ page }) => {
+        await page.goto('/', { waitUntil: 'networkidle' });
+
+        const thumbsWrapperLocator = await page.locator('.c-imagery__thumbs-wrapper');
+        // Click button:has-text("Create")
+        await page.locator('button:has-text("Create")').click();
+
+        // Click li:has-text("Display Layout")
+        await page.locator('li:has-text("Display Layout")').click();
+        const displayLayoutTitleField = page.locator('text=Properties Title Notes Horizontal grid (px) Vertical grid (px) Horizontal size ( >> input[type="text"]');
+        await displayLayoutTitleField.click();
+
+        await displayLayoutTitleField.fill('Thumbnail Display Layout');
+
+        // Click text=OK
+        await Promise.all([
+            page.waitForNavigation(),
+            page.locator('text=OK').click()
+        ]);
+
+        // Click text=Snapshot Save and Finish Editing Save and Continue Editing >> button >> nth=1
+        await page.locator('text=Snapshot Save and Finish Editing Save and Continue Editing >> button').nth(1).click();
+
+        // Click text=Save and Finish Editing
+        await page.locator('text=Save and Finish Editing').click();
+
+        // Click button:has-text("Create")
+        await page.locator('button:has-text("Create")').click();
+
+        // Click li:has-text("Example Imagery")
+        await page.locator('li:has-text("Example Imagery")').click();
+
+        const imageryTitleField = page.locator('text=Properties Title Notes Images url list (comma separated) Image load delay (milli >> input[type="text"]');
+        // Click text=Properties Title Notes Images url list (comma separated) Image load delay (milli >> input[type="text"]
+        await imageryTitleField.click();
+
+        // Fill text=Properties Title Notes Images url list (comma separated) Image load delay (milli >> input[type="text"]
+        await imageryTitleField.fill('Thumbnail Example Imagery');
+
+        // Click text=OK
+        await Promise.all([
+            page.waitForNavigation(),
+            page.locator('text=OK').click()
+        ]);
+
+        // Click text=Thumbnail Example Imagery Imagery Layout Snapshot >> button >> nth=0
+        await Promise.all([
+            page.waitForNavigation(),
+            page.locator('text=Thumbnail Example Imagery Imagery Layout Snapshot >> button').first().click()
+        ]);
+
+        // Edit mode
+        await page.locator('text=Thumbnail Display Layout Snapshot >> button').nth(3).click();
+
+        // Click on example imagery to expose toolbar
+        await page.locator('text=Thumbnail Example Imagery Snapshot Large View').click();
+
+        // expect thumbnails not be visible when first added
+        await expect.soft(thumbsWrapperLocator.isHidden()).toBeTruthy();
+
+        // Resize the example imagery vertically to change the thumbnail visibility
+        /*
+        The following arbitrary values are added to observe the separate visual
+        conditions of the thumbnails (hidden, small thumbnails, regular thumbnails).
+        Specifically, height is set to 50px for small thumbs and 100px for regular
+        */
+        // Click #mct-input-id-103
+        await page.locator('#mct-input-id-103').click();
+
+        // Fill #mct-input-id-103
+        await page.locator('#mct-input-id-103').fill('50');
+
+        expect(thumbsWrapperLocator.isVisible()).toBeTruthy();
+        await expect(thumbsWrapperLocator).toHaveClass(/is-small-thumbs/);
+
+        // Resize the example imagery vertically to change the thumbnail visibility
+        // Click #mct-input-id-103
+        await page.locator('#mct-input-id-103').click();
+
+        // Fill #mct-input-id-103
+        await page.locator('#mct-input-id-103').fill('100');
+
+        expect(thumbsWrapperLocator.isVisible()).toBeTruthy();
+        await expect(thumbsWrapperLocator).not.toHaveClass(/is-small-thumbs/);
+
+    });
+
 });
 
 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

@@ -21,10 +21,11 @@
  *****************************************************************************/
 
 /*
-Test for plot autoscale.
+Testsuite for plot autoscale.
 */
 
-const { test: _test, expect } = require('@playwright/test');
+const { test: _test } = require('../../../fixtures.js');
+const { 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
@@ -47,7 +48,10 @@ test.use({
 });
 
 test.describe('ExportAsJSON', () => {
-    test('autoscale off causes no error from undefined user range', async ({ page }) => {
+    test('User can set autoscale with a valid range @snapshot', async ({ page }) => {
+        //This is necessary due to the size of the test suite.
+        await test.setTimeout(120 * 1000);
+
         await page.goto('/', { waitUntil: 'networkidle' });
 
         await setTimeRange(page);
@@ -68,14 +72,6 @@ test.describe('ExportAsJSON', () => {
                 .then(shot => expect(shot).toMatchSnapshot('autoscale-canvas-prepan.png', { maxDiffPixels: 40 }))
         ]);
 
-        let errorCount = 0;
-
-        function onError() {
-            errorCount++;
-        }
-
-        page.on('pageerror', onError);
-
         await page.keyboard.down('Alt');
 
         await canvas.dragTo(canvas, {
@@ -91,12 +87,6 @@ test.describe('ExportAsJSON', () => {
 
         await page.keyboard.up('Alt');
 
-        page.off('pageerror', onError);
-
-        // There would have been an error at this point. So if there isn't, then
-        // we fixed it.
-        expect(errorCount).toBe(0);
-
         // Ensure the drag worked.
         await Promise.all([
             testYTicks(page, ['0.00', '0.50', '1.00', '1.50', '2.00']),
@@ -134,9 +124,14 @@ async function createSinewaveOverlayPlot(page) {
     // add overlay plot with defaults
     await page.locator('li:has-text("Overlay Plot")').click();
     await Promise.all([
-        page.waitForNavigation(/*{ url: 'http://localhost:8080/#/browse/mine/a9268c6f-45cc-4bcd-a6a0-50ac4036e396?tc.mode=fixed&tc.startBound=1649305424163&tc.endBound=1649307224163&tc.timeSystem=utc&view=plot-overlay' }*/),
-        page.locator('text=OK').click()
+        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();
@@ -148,14 +143,19 @@ async function createSinewaveOverlayPlot(page) {
     // add sine wave generator with defaults
     await page.locator('li:has-text("Sine Wave Generator")').click();
     await Promise.all([
-        page.waitForNavigation(/*{ url: 'http://localhost:8080/#/browse/mine/a9268c6f-45cc-4bcd-a6a0-50ac4036e396/5cfa5c69-17bc-4a99-9545-4da8125380c5?tc.mode=fixed&tc.startBound=1649305424163&tc.endBound=1649307224163&tc.timeSystem=utc&view=plot-single' }*/),
-        page.locator('text=OK').click()
+        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(/*{ url: 'http://localhost:8080/#/browse/mine/a9268c6f-45cc-4bcd-a6a0-50ac4036e396?tc.mode=fixed&tc.startBound=1649305424163&tc.endBound=1649307224163&tc.timeSystem=utc&view=plot-overlay' }*/),
+        page.waitForNavigation(),
         page.locator('text=Unnamed Overlay Plot').first().click()
     ]);
 }
@@ -168,11 +168,18 @@ async function turnOffAutoscale(page) {
     await page.locator('text=Unnamed Overlay Plot Snapshot >> button').nth(3).click();
 
     // uncheck autoscale
-    await page.locator('text=Y Axis Scaling Auto scale Padding >> input[type="checkbox"]').uncheck();
+    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 page.locator('text=Save and Finish Editing').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'});
 }
 
 /**
@@ -180,6 +187,7 @@ async function turnOffAutoscale(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) {

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

@@ -21,13 +21,18 @@
  *****************************************************************************/
 
 /*
-Tests to verify log plot functionality.
+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');
+const { test } = require('../../../fixtures.js');
+const { expect } = require('@playwright/test');
 
 test.describe('Log plot tests', () => {
-    test.only('Can create a log plot.', async ({ page }) => {
+    test('Log Plot ticks are functionally correct in regular and log mode and after refresh', async ({ page }) => {
+        //This is necessary due to the size of the test suite.
+        await test.setTimeout(120 * 1000);
+
         await makeOverlayPlot(page);
         await testRegularTicks(page);
         await enableEditMode(page);
@@ -39,17 +44,20 @@ test.describe('Log plot tests', () => {
         await testLogTicks(page);
         await saveOverlayPlot(page);
         await testLogTicks(page);
-        await testLogPlotPixels(page);
+        //await testLogPlotPixels(page);
 
-        // refresh page
-        await page.reload();
+        // 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);
+        //await testLogPlotPixels(page);
     });
 
-    test.only('Verify that log mode option is reflected in import/export JSON', async ({ 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);
@@ -57,7 +65,7 @@ test.describe('Log plot tests', () => {
 
         // TODO ...export, delete the overlay, then import it...
 
-        await testLogTicks(page);
+        //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...
@@ -88,14 +96,18 @@ async function makeOverlayPlot(page) {
     await page.locator('button.c-create-button').click();
     await page.locator('li:has-text("Overlay Plot")').click();
     await Promise.all([
-        page.waitForNavigation(/*{ url: 'http://localhost:8080/#/browse/mine/8caf7072-535b-4af6-8394-edd86e3ea35f?tc.mode=fixed&tc.startBound=1648590633191&tc.endBound=1648592433191&tc.timeSystem=utc&view=plot-overlay' }*/),
-        page.locator('text=OK').click()
+        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 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();
+    await saveOverlayPlot(page);
 
     // create a sinewave generator
 
@@ -116,15 +128,20 @@ async function makeOverlayPlot(page) {
     // Click OK to make generator
 
     await Promise.all([
-        page.waitForNavigation(/*{ url: 'http://localhost:8080/#/browse/mine/8caf7072-535b-4af6-8394-edd86e3ea35f/6e58b26a-8a73-4df6-b3a6-918decc0bbfa?tc.mode=fixed&tc.startBound=1648590633191&tc.endBound=1648592433191&tc.timeSystem=utc&view=plot-single' }*/),
-        page.locator('text=OK').click()
+        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(/*{ url: 'http://localhost:8080/#/browse/mine/8caf7072-535b-4af6-8394-edd86e3ea35f?tc.mode=fixed&tc.startBound=1648590633191&tc.endBound=1648592433191&tc.timeSystem=utc&view=plot-overlay' }*/),
+        page.waitForNavigation(),
         page.locator('text=Unnamed Overlay Plot').first().click()
     ]);
 }
@@ -133,7 +150,7 @@ async function makeOverlayPlot(page) {
  * @param {import('@playwright/test').Page} page
  */
 async function testRegularTicks(page) {
-    const yTicks = page.locator('.gl-plot-y-tick-label');
+    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');
@@ -148,7 +165,7 @@ async function testRegularTicks(page) {
  * @param {import('@playwright/test').Page} page
  */
 async function testLogTicks(page) {
-    const yTicks = page.locator('.gl-plot-y-tick-label');
+    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');
@@ -186,6 +203,7 @@ async function testLogTicks(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();
 }
 
 /**
@@ -210,17 +228,27 @@ async function disableLogMode(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 page.locator('text=Save and Finish Editing').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
  */
+// FIXME: Remove this eslint exception once implemented
+// eslint-disable-next-line no-unused-vars
 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, 50));
+        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

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

@@ -20,7 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const { test, expect } = require('@playwright/test');
+const { test } = require('../../../fixtures.js');
+const { expect } = require('@playwright/test');
 
 test.describe('Time counductor operations', () => {
     test('validate start time does not exceeds end time', async ({ page }) => {
@@ -67,3 +68,42 @@ 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' });
+
+        // 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": "[]"
+        }
+      ]
+    }
+  ]
+}

e2e/tests/smoke.e2e.spec.js

@@ -33,7 +33,8 @@ comfortable running this test during a live mission?" Avoid creating or deleting
 Make no assumptions about the order that elements appear in the DOM.
 */
 
-const { test, expect } = require('@playwright/test');
+const { test } = require('../fixtures.js');
+const { expect } = require('@playwright/test');
 
 test('Verify that the create button appears and that the Folder Domain Object is available for selection', async ({ page }) => {
 

package.json

@@ -1,13 +1,13 @@
 {
   "name": "openmct",
-  "version": "2.0.3-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.4",
-    "@percy/playwright": "1.0.2",
-    "@playwright/test": "1.19.2",
+    "@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",
@@ -17,15 +17,15 @@
     "babel-loader": "8.2.3",
     "babel-plugin-istanbul": "6.1.1",
     "comma-separated-values": "3.6.4",
-    "copy-webpack-plugin": "10.2.0",
+    "copy-webpack-plugin": "11.0.0",
     "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",
+    "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",
@@ -35,12 +35,12 @@
     "git-rev-sync": "3.0.2",
     "html2canvas": "1.4.1",
     "imports-loader": "0.8.0",
-    "jasmine-core": "4.0.1",
+    "jasmine-core": "4.1.1",
     "jsdoc": "3.5.5",
     "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",
@@ -52,13 +52,13 @@
     "location-bar": "3.0.1",
     "lodash": "4.17.21",
     "mini-css-extract-plugin": "2.6.0",
-    "moment": "2.29.1",
+    "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",
     "request": "2.88.2",
     "resolve-url-loader": "5.0.0",
@@ -82,8 +82,8 @@
     "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",
-    "lint:fix": "eslint example src --ext .js,.vue openmct.js --fix",
+    "lint": "eslint example src e2e --ext .js,.vue openmct.js",
+    "lint:fix": "eslint example src e2e --ext .js,.vue openmct.js --fix",
     "build:prod": "cross-env webpack --config webpack.prod.js",
     "build:dev": "webpack --config webpack.dev.js",
     "build:coverage": "webpack --config webpack.coverage.js",
@@ -92,9 +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 exampleImagery",
     "test:e2e:local": "npx playwright test --config=e2e/playwright-local.config.js --project=chrome",
-    "test:e2e:debug": "npm run test:e2e:local -- --debug",
+    "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",

src/MCT.js

@@ -241,10 +241,9 @@ define([
         this.branding = BrandingAPI.default;
 
         // Plugins that are installed by default
-
-        this.install(this.plugins.Gauge());
         this.install(this.plugins.Plot());
-        this.install(this.plugins.Chart());
+        this.install(this.plugins.ScatterPlot());
+        this.install(this.plugins.BarChart());
         this.install(this.plugins.TelemetryTable.default());
         this.install(PreviewPlugin.default());
         this.install(LicensesPlugin.default());

src/api/forms/FormsAPI.js

@@ -23,10 +23,13 @@
 import FormController from './FormController';
 import FormProperties from './components/FormProperties.vue';
 
+import EventEmitter from 'EventEmitter';
 import Vue from 'vue';
 
-export default class FormsAPI {
+export default class FormsAPI extends EventEmitter {
     constructor(openmct) {
+        super();
+
         this.openmct = openmct;
         this.formController = new FormController(openmct);
     }
@@ -107,6 +110,8 @@ export default class FormsAPI {
         let onDismiss;
         let onSave;
 
+        const self = this;
+
         const promise = new Promise((resolve, reject) => {
             onSave = onFormSave(resolve);
             onDismiss = onFormDismiss(reject);
@@ -115,7 +120,7 @@ export default class FormsAPI {
         const vm = new Vue({
             components: { FormProperties },
             provide: {
-                openmct: this.openmct
+                openmct: self.openmct
             },
             data() {
                 return {
@@ -132,7 +137,7 @@ export default class FormsAPI {
         if (element) {
             element.append(formElement);
         } else {
-            overlay = this.openmct.overlays.overlay({
+            overlay = self.openmct.overlays.overlay({
                 element: vm.$el,
                 size: 'small',
                 onDestroy: () => vm.$destroy()
@@ -140,6 +145,7 @@ export default class FormsAPI {
         }
 
         function onFormPropertyChange(data) {
+            self.emit('onFormPropertyChange', data);
             if (onChange) {
                 onChange(data);
             }

src/api/forms/FormsAPISpec.js

@@ -0,0 +1,157 @@
+/*****************************************************************************
+ * 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';
+
+describe('The Forms API', () => {
+    let openmct;
+    let element;
+
+    beforeEach((done) => {
+        element = document.createElement('div');
+        element.style.display = 'block';
+        element.style.width = '1920px';
+        element.style.height = '1080px';
+
+        openmct = createOpenMct();
+        openmct.on('start', done);
+
+        openmct.startHeadless(element);
+    });
+
+    afterEach(() => {
+        return resetApplicationState(openmct);
+    });
+
+    it('openmct supports form API', () => {
+        expect(openmct.forms).not.toBe(null);
+    });
+
+    describe('check default form controls exists', () => {
+        it('autocomplete', () => {
+            const control = openmct.forms.getFormControl('autocomplete');
+            expect(control).not.toBe(null);
+        });
+
+        it('clock', () => {
+            const control = openmct.forms.getFormControl('composite');
+            expect(control).not.toBe(null);
+        });
+
+        it('datetime', () => {
+            const control = openmct.forms.getFormControl('datetime');
+            expect(control).not.toBe(null);
+        });
+
+        it('file-input', () => {
+            const control = openmct.forms.getFormControl('file-input');
+            expect(control).not.toBe(null);
+        });
+
+        it('locator', () => {
+            const control = openmct.forms.getFormControl('locator');
+            expect(control).not.toBe(null);
+        });
+
+        it('numberfield', () => {
+            const control = openmct.forms.getFormControl('numberfield');
+            expect(control).not.toBe(null);
+        });
+
+        it('select', () => {
+            const control = openmct.forms.getFormControl('select');
+            expect(control).not.toBe(null);
+        });
+
+        it('textarea', () => {
+            const control = openmct.forms.getFormControl('textarea');
+            expect(control).not.toBe(null);
+        });
+
+        it('textfield', () => {
+            const control = openmct.forms.getFormControl('textfield');
+            expect(control).not.toBe(null);
+        });
+    });
+
+    it('supports user defined form controls', () => {
+        const newFormControl = {
+            show: () => {
+                console.log('show new control');
+            },
+            destroy: () => {
+                console.log('destroy');
+            }
+        };
+        openmct.forms.addNewFormControl('newFormControl', newFormControl);
+        const control = openmct.forms.getFormControl('newFormControl');
+        expect(control).not.toBe(null);
+        expect(control.show).not.toBe(null);
+        expect(control.destroy).not.toBe(null);
+    });
+
+    describe('show form on UI', () => {
+        let formStructure;
+
+        beforeEach(() => {
+            formStructure = {
+                title: 'Test Show Form',
+                sections: [
+                    {
+                        rows: [
+                            {
+                                key: 'name',
+                                control: 'textfield',
+                                name: 'Title',
+                                pattern: '\\S+',
+                                required: false,
+                                cssClass: 'l-input-lg',
+                                value: 'Test Name'
+                            }
+                        ]
+                    }
+                ]
+            };
+        });
+
+        it('when container element is provided', (done) => {
+            openmct.forms.showForm(formStructure, { element }).catch(() => {
+                done();
+            });
+            const titleElement = element.querySelector('.c-overlay__dialog-title');
+            expect(titleElement.textContent).toBe(formStructure.title);
+
+            element.querySelector('.js-cancel-button').click();
+        });
+
+        it('when container element is not provided', (done) => {
+            openmct.forms.showForm(formStructure).catch(() => {
+                done();
+            });
+
+            const titleElement = document.querySelector('.c-overlay__dialog-title');
+            const title = titleElement.textContent;
+
+            expect(title).toBe(formStructure.title);
+            document.querySelector('.js-cancel-button').click();
+        });
+    });
+});

src/api/forms/components/FormProperties.vue

@@ -21,9 +21,9 @@
 *****************************************************************************/
 
 <template>
-<div class="c-form">
+<div class="c-form js-form">
     <div class="c-overlay__top-bar c-form__top-bar">
-        <div class="c-overlay__dialog-title">{{ model.title }}</div>
+        <div class="c-overlay__dialog-title js-form-title">{{ model.title }}</div>
         <div class="c-overlay__dialog-hint hint">All fields marked <span class="req icon-asterisk"></span> are required.</div>
     </div>
     <form
@@ -70,7 +70,7 @@
         </button>
         <button
             tabindex="0"
-            class="c-button"
+            class="c-button js-cancel-button"
             @click="onDismiss"
         >
             {{ cancelLabel }}

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

@@ -40,6 +40,12 @@
         >
             {{ name }}
         </button>
+        <button
+            v-if="removable"
+            class="c-button icon-trash"
+            title="Remove file"
+            @click="removeFile"
+        ></button>
     </span>
 </span>
 </template>
@@ -63,6 +69,9 @@ export default {
             const fileInfo = this.fileInfo || this.model.value;
 
             return fileInfo && fileInfo.name || this.model.text;
+        },
+        removable() {
+            return (this.fileInfo || this.model.value) && this.model.removable;
         }
     },
     mounted() {
@@ -97,6 +106,15 @@ export default {
         },
         selectFile() {
             this.$refs.fileInput.click();
+        },
+        removeFile() {
+            this.model.value = undefined;
+            this.fileInfo = undefined;
+            const data = {
+                model: this.model,
+                value: undefined
+            };
+            this.$emit('onChange', data);
         }
     }
 };

src/api/menu/MenuAPISpec.js

@@ -26,29 +26,31 @@ import { createOpenMct, createMouseEvent, resetApplicationState } from '../../ut
 
 describe ('The Menu API', () => {
     let openmct;
-    let element;
+    let appHolder;
     let menuAPI;
     let actionsArray;
-    let x;
-    let y;
     let result;
-    let onDestroy;
+    let menuElement;
+
+    const x = 8;
+    const y = 16;
+
+    const menuOptions = {
+        onDestroy: () => {
+            console.log('default onDestroy');
+        }
+    };
 
     beforeEach((done) => {
-        const appHolder = document.createElement('div');
+        appHolder = document.createElement('div');
         appHolder.style.display = 'block';
         appHolder.style.width = '1920px';
         appHolder.style.height = '1080px';
 
         openmct = createOpenMct();
 
-        element = document.createElement('div');
-        element.style.display = 'block';
-        element.style.width = '1920px';
-        element.style.height = '1080px';
-
         openmct.on('start', done);
-        openmct.startHeadless(appHolder);
+        openmct.startHeadless();
 
         menuAPI = new MenuAPI(openmct);
         actionsArray = [
@@ -56,7 +58,7 @@ describe ('The Menu API', () => {
                 key: 'test-css-class-1',
                 name: 'Test Action 1',
                 cssClass: 'icon-clock',
-                description: 'This is a test action',
+                description: 'This is a test action 1',
                 onItemClicked: () => {
                     result = 'Test Action 1 Invoked';
                 }
@@ -65,149 +67,165 @@ describe ('The Menu API', () => {
                 key: 'test-css-class-2',
                 name: 'Test Action 2',
                 cssClass: 'icon-clock',
-                description: 'This is a test action',
+                description: 'This is a test action 2',
                 onItemClicked: () => {
                     result = 'Test Action 2 Invoked';
                 }
             }
         ];
-        x = 8;
-        y = 16;
     });
 
     afterEach(() => {
         return resetApplicationState(openmct);
     });
 
-    describe("showMenu method", () => {
-        it("creates an instance of Menu when invoked", () => {
-            menuAPI.showMenu(x, y, actionsArray);
-
-            expect(menuAPI.menuComponent).toBeInstanceOf(Menu);
+    describe('showMenu method', () => {
+        beforeAll(() => {
+            spyOn(menuOptions, 'onDestroy').and.callThrough();
         });
 
-        describe("creates a menu component", () => {
-            let menuComponent;
-            let vueComponent;
+        it('creates an instance of Menu when invoked', (done) => {
+            menuOptions.onDestroy = done;
 
-            beforeEach(() => {
-                onDestroy = jasmine.createSpy('onDestroy');
+            menuAPI.showMenu(x, y, actionsArray, menuOptions);
 
-                const menuOptions = {
-                    onDestroy
-                };
+            expect(menuAPI.menuComponent).toBeInstanceOf(Menu);
+            document.body.click();
+        });
+
+        describe('creates a menu component', () => {
+            it('with all the actions passed in', (done) => {
+                menuOptions.onDestroy = done;
 
                 menuAPI.showMenu(x, y, actionsArray, menuOptions);
-                vueComponent = menuAPI.menuComponent.component;
-                menuComponent = document.querySelector(".c-menu");
+                menuElement = document.querySelector('.c-menu');
+                expect(menuElement).toBeDefined();
 
-                spyOn(vueComponent, '$destroy');
-            });
-
-            it("renders a menu component in the expected x and y coordinates", () => {
-                let boundingClientRect = menuComponent.getBoundingClientRect();
-                let left = boundingClientRect.left;
-                let top = boundingClientRect.top;
-
-                expect(left).toEqual(x);
-                expect(top).toEqual(y);
-            });
-
-            it("with all the actions passed in", () => {
-                expect(menuComponent).toBeDefined();
-
-                let listItems = menuComponent.children[0].children;
+                const listItems = menuElement.children[0].children;
 
                 expect(listItems.length).toEqual(actionsArray.length);
+                document.body.click();
             });
 
-            it("with click-able menu items, that will invoke the correct callBacks", () => {
-                let listItem1 = menuComponent.children[0].children[0];
+            it('with click-able menu items, that will invoke the correct callBack', (done) => {
+                menuOptions.onDestroy = done;
+
+                menuAPI.showMenu(x, y, actionsArray, menuOptions);
+
+                menuElement = document.querySelector('.c-menu');
+                const listItem1 = menuElement.children[0].children[0];
 
                 listItem1.click();
 
-                expect(result).toEqual("Test Action 1 Invoked");
+                expect(result).toEqual('Test Action 1 Invoked');
             });
 
-            it("dismisses the menu when action is clicked on", () => {
-                let listItem1 = menuComponent.children[0].children[0];
+            it('dismisses the menu when action is clicked on', (done) => {
+                menuOptions.onDestroy = done;
 
+                menuAPI.showMenu(x, y, actionsArray, menuOptions);
+
+                menuElement = document.querySelector('.c-menu');
+                const listItem1 = menuElement.children[0].children[0];
                 listItem1.click();
 
-                let menu = document.querySelector('.c-menu');
+                menuElement = document.querySelector('.c-menu');
 
-                expect(menu).toBeNull();
+                expect(menuElement).toBeNull();
             });
 
-            it("invokes the destroy method when menu is dismissed", () => {
+            it('invokes the destroy method when menu is dismissed', (done) => {
+                menuOptions.onDestroy = done;
+
+                menuAPI.showMenu(x, y, actionsArray, menuOptions);
+
+                const vueComponent = menuAPI.menuComponent.component;
+                spyOn(vueComponent, '$destroy');
+
                 document.body.click();
 
                 expect(vueComponent.$destroy).toHaveBeenCalled();
             });
 
-            it("invokes the onDestroy callback if passed in", () => {
-                document.body.click();
+            it('invokes the onDestroy callback if passed in', (done) => {
+                let count = 0;
+                menuOptions.onDestroy = () => {
+                    count++;
+                    expect(count).toEqual(1);
+                    done();
+                };
 
-                expect(onDestroy).toHaveBeenCalled();
+                menuAPI.showMenu(x, y, actionsArray, menuOptions);
+
+                document.body.click();
             });
         });
     });
 
-    describe("superMenu method", () => {
-        it("creates a superMenu", () => {
-            menuAPI.showSuperMenu(x, y, actionsArray);
+    describe('superMenu method', () => {
+        it('creates a superMenu', (done) => {
+            menuOptions.onDestroy = done;
 
-            const superMenu = document.querySelector('.c-super-menu__menu');
+            menuAPI.showSuperMenu(x, y, actionsArray, menuOptions);
+            menuElement = document.querySelector('.c-super-menu__menu');
 
-            expect(superMenu).not.toBeNull();
+            expect(menuElement).not.toBeNull();
+            document.body.click();
         });
 
-        it("Mouse over a superMenu shows correct description", (done) => {
-            menuAPI.showSuperMenu(x, y, actionsArray);
+        it('Mouse over a superMenu shows correct description', (done) => {
+            menuOptions.onDestroy = done;
 
-            const superMenu = document.querySelector('.c-super-menu__menu');
-            const superMenuItem = superMenu.querySelector('li');
+            menuAPI.showSuperMenu(x, y, actionsArray, menuOptions);
+            menuElement = document.querySelector('.c-super-menu__menu');
+
+            const superMenuItem = menuElement.querySelector('li');
             const mouseOverEvent = createMouseEvent('mouseover');
 
             superMenuItem.dispatchEvent(mouseOverEvent);
             const itemDescription = document.querySelector('.l-item-description__description');
 
-            setTimeout(() => {
+            menuAPI.menuComponent.component.$nextTick(() => {
+                expect(menuElement).not.toBeNull();
                 expect(itemDescription.innerText).toEqual(actionsArray[0].description);
-                expect(superMenu).not.toBeNull();
-                done();
-            }, 300);
+
+                document.body.click();
+            });
         });
     });
 
-    describe("Menu Placements", () => {
-        it("default menu position BOTTOM_RIGHT", () => {
-            menuAPI.showMenu(x, y, actionsArray);
-
-            const menu = document.querySelector('.c-menu');
-
-            const boundingClientRect = menu.getBoundingClientRect();
-            const left = boundingClientRect.left;
-            const top = boundingClientRect.top;
-
-            expect(left).toEqual(x);
-            expect(top).toEqual(y);
-        });
-
-        it("menu position BOTTOM_RIGHT", () => {
-            const menuOptions = {
-                placement: openmct.menus.menuPlacement.BOTTOM_RIGHT
-            };
+    describe('Menu Placements', () => {
+        it('default menu position BOTTOM_RIGHT', (done) => {
+            menuOptions.onDestroy = done;
 
             menuAPI.showMenu(x, y, actionsArray, menuOptions);
+            menuElement = document.querySelector('.c-menu');
 
-            const menu = document.querySelector('.c-menu');
-            const boundingClientRect = menu.getBoundingClientRect();
+            const boundingClientRect = menuElement.getBoundingClientRect();
             const left = boundingClientRect.left;
             const top = boundingClientRect.top;
 
             expect(left).toEqual(x);
             expect(top).toEqual(y);
+
+            document.body.click();
+        });
+
+        it('menu position BOTTOM_RIGHT', (done) => {
+            menuOptions.onDestroy = done;
+            menuOptions.placement = openmct.menus.menuPlacement.BOTTOM_RIGHT;
+
+            menuAPI.showMenu(x, y, actionsArray, menuOptions);
+            menuElement = document.querySelector('.c-menu');
+
+            const boundingClientRect = menuElement.getBoundingClientRect();
+            const left = boundingClientRect.left;
+            const top = boundingClientRect.top;
+
+            expect(left).toEqual(x);
+            expect(top).toEqual(y);
+
+            document.body.click();
         });
     });
 });

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/TelemetryAPI.js

@@ -512,7 +512,7 @@ define([
     TelemetryAPI.prototype.handleMissingRequestProvider = function (domainObject) {
         this.noRequestProviderForAllObjects = this.requestProviders.every(requestProvider => {
             const supportsRequest = requestProvider.supportsRequest.apply(requestProvider, arguments);
-            const hasRequestProvider = Object.hasOwn(requestProvider, 'request');
+            const hasRequestProvider = Object.prototype.hasOwnProperty.call(requestProvider, 'request') && typeof requestProvider.request === 'function';
 
             return supportsRequest && hasRequestProvider;
         });

src/api/telemetry/TelemetryCollection.js

@@ -22,11 +22,7 @@
 
 import _ from 'lodash';
 import EventEmitter from 'EventEmitter';
-
-const ERRORS = {
-    TIMESYSTEM_KEY: 'All telemetry metadata must have a telemetry value with a key that matches the key of the active time system.',
-    LOADED: 'Telemetry Collection has already been loaded.'
-};
+import { LOADED_ERROR, TIMESYSTEM_KEY_NOTIFICATION, TIMESYSTEM_KEY_WARNING } from './constants';
 
 /** Class representing a Telemetry Collection. */
 
@@ -61,7 +57,7 @@ export class TelemetryCollection extends EventEmitter {
      */
     load() {
         if (this.loaded) {
-            this._error(ERRORS.LOADED);
+            this._error(LOADED_ERROR);
         }
 
         this._setTimeSystem(this.openmct.time.timeSystem());
@@ -172,6 +168,7 @@ export class TelemetryCollection extends EventEmitter {
      * @private
      */
     _processNewTelemetry(telemetryData) {
+        performance.mark('tlm:process:start');
         if (telemetryData === undefined) {
             return;
         }
@@ -266,6 +263,10 @@ export class TelemetryCollection extends EventEmitter {
         this.lastBounds = bounds;
 
         if (isTick) {
+            if (this.timeKey === undefined) {
+                return;
+            }
+
             // need to check futureBuffer and need to check
             // if anything has fallen out of bounds
             let startIndex = 0;
@@ -305,7 +306,6 @@ export class TelemetryCollection extends EventEmitter {
             if (added.length > 0) {
                 this.emit('add', added);
             }
-
         } else {
             // user bounds change, reset
             this._reset();
@@ -325,12 +325,16 @@ export class TelemetryCollection extends EventEmitter {
         let domains = this.metadata.valuesForHints(['domain']);
         let domain = domains.find((d) => d.key === timeSystem.key);
 
-        if (domain === undefined) {
-            this._error(ERRORS.TIMESYSTEM_KEY);
+        if (domain !== undefined) {
+            // timeKey is used to create a dummy datum used for sorting
+            this.timeKey = domain.source;
+        } else {
+            this.timeKey = undefined;
+
+            this._warn(TIMESYSTEM_KEY_WARNING);
+            this.openmct.notifications.alert(TIMESYSTEM_KEY_NOTIFICATION);
         }
 
-        // timeKey is used to create a dummy datum used for sorting
-        this.timeKey = domain.source; // this defaults to key if no source is set
         let metadataValue = this.metadata.value(timeSystem.key) || { format: timeSystem.key };
         let valueFormatter = this.openmct.telemetry.getValueFormatter(metadataValue);
 
@@ -352,6 +356,7 @@ export class TelemetryCollection extends EventEmitter {
      * @todo handle subscriptions more granually
      */
     _reset() {
+        performance.mark('tlm:reset');
         this.boundedTelemetry = [];
         this.futureBuffer = [];
 
@@ -400,4 +405,8 @@ export class TelemetryCollection extends EventEmitter {
     _error(message) {
         throw new Error(message);
     }
+
+    _warn(message) {
+        console.warn(message);
+    }
 }

src/api/telemetry/TelemetryCollectionSpec.js

@@ -0,0 +1,101 @@
+/*****************************************************************************
+ * 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 { TIMESYSTEM_KEY_WARNING } from './constants';
+
+describe('Telemetry Collection', () => {
+    let openmct;
+    let mockMetadataProvider;
+    let mockMetadata = {};
+    let domainObject;
+
+    beforeEach(done => {
+        openmct = createOpenMct();
+        openmct.on('start', done);
+
+        domainObject = {
+            identifier: {
+                key: 'a',
+                namespace: 'b'
+            },
+            type: 'sample-type'
+        };
+
+        mockMetadataProvider = {
+            key: 'mockMetadataProvider',
+            supportsMetadata() {
+                return true;
+            },
+            getMetadata() {
+                return mockMetadata;
+            }
+        };
+
+        openmct.telemetry.addProvider(mockMetadataProvider);
+        openmct.startHeadless();
+    });
+
+    afterEach(() => {
+        return resetApplicationState();
+    });
+
+    it('Warns if telemetry metadata does not match the active timesystem', () => {
+        mockMetadata.values = [
+            {
+                key: 'foo',
+                name: 'Bar',
+                hints: {
+                    domain: 1
+                }
+            }
+        ];
+
+        const telemetryCollection = openmct.telemetry.requestCollection(domainObject);
+        spyOn(telemetryCollection, '_warn');
+        telemetryCollection.load();
+
+        expect(telemetryCollection._warn).toHaveBeenCalledOnceWith(TIMESYSTEM_KEY_WARNING);
+    });
+
+    it('Does not warn if telemetry metadata matches the active timesystem', () => {
+        mockMetadata.values = [
+            {
+                key: 'utc',
+                name: 'Timestamp',
+                format: 'utc',
+                hints: {
+                    domain: 1
+                }
+            }
+        ];
+
+        const telemetryCollection = openmct.telemetry.requestCollection(domainObject);
+        spyOn(telemetryCollection, '_warn');
+        telemetryCollection.load();
+
+        expect(telemetryCollection._warn).not.toHaveBeenCalled();
+    });
+});

src/api/telemetry/constants.js

@@ -0,0 +1,25 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+export const TIMESYSTEM_KEY_WARNING = 'All telemetry metadata must have a telemetry value with a key that matches the key of the active time system.';
+export const TIMESYSTEM_KEY_NOTIFICATION = 'Telemetry metadata does not match the active time system.';
+export const LOADED_ERROR = 'Telemetry Collection has already been loaded.';

src/api/user/UserAPISpec.js

@@ -40,11 +40,13 @@ describe("The User API", () => {
     });
 
     afterEach(() => {
+        const activeOverlays = openmct.overlays.activeOverlays;
+        activeOverlays.forEach(overlay => overlay.dismiss());
+
         return resetApplicationState(openmct);
     });
 
     describe('with regard to user providers', () => {
-
         it('allows you to specify a user provider', () => {
             openmct.user.on('providerAdded', (provider) => {
                 expect(provider).toBeInstanceOf(ExampleUserProvider);

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/charts/bar/BarGraphView.vue

@@ -40,6 +40,14 @@ export default {
         BarGraph
     },
     inject: ['openmct', 'domainObject', 'path'],
+    props: {
+        options: {
+            type: Object,
+            default() {
+                return {};
+            }
+        }
+    },
     data() {
         this.telemetryObjects = {};
         this.telemetryObjectFormats = {};
@@ -247,7 +255,7 @@ export default {
                 }
             });
 
-            const trace = {
+            let trace = {
                 key,
                 name: telemetryObject.name,
                 x: xValues,
@@ -255,13 +263,18 @@ export default {
                 text: yValues.map(String),
                 xAxisMetadata: axisMetadata.xAxisMetadata,
                 yAxisMetadata: axisMetadata.yAxisMetadata,
-                type: 'bar',
+                type: this.options.type ? this.options.type : 'bar',
                 marker: {
                     color: this.domainObject.configuration.barStyles.series[key].color
                 },
                 hoverinfo: 'skip'
             };
 
+            if (this.options.type) {
+                trace.mode = 'markers';
+                trace.hoverinfo = 'x+y';
+            }
+
             this.addTrace(trace, key);
         },
         isDataInTimeRange(datum, key) {

src/plugins/charts/scatter/ScatterPlotCompositionPolicy.js

@@ -0,0 +1,57 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2021, 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 { SCATTER_PLOT_KEY } from './scatterPlotConstants';
+
+export default function ScatterPlotCompositionPolicy(openmct) {
+    function hasRange(metadata) {
+        const rangeValues = metadata.valuesForHints(['range']).map((value) => {
+            return value.source;
+        });
+
+        const uniqueRangeValues = new Set(rangeValues);
+
+        return uniqueRangeValues && uniqueRangeValues.size > 1;
+    }
+
+    function hasScatterPlotTelemetry(domainObject) {
+        if (!openmct.telemetry.isTelemetryObject(domainObject)) {
+            return false;
+        }
+
+        let metadata = openmct.telemetry.getMetadata(domainObject);
+
+        return metadata.values().length > 0 && hasRange(metadata);
+    }
+
+    return {
+        allow: function (parent, child) {
+            if (parent.type === SCATTER_PLOT_KEY) {
+                if ((child.type === 'conditionSet') || (!hasScatterPlotTelemetry(child))) {
+                    return false;
+                }
+            }
+
+            return true;
+        }
+    };
+}

src/plugins/charts/scatter/ScatterPlotForm.vue

@@ -0,0 +1,146 @@
+/*****************************************************************************
+* 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"
+    >
+        <div
+            class="c-form--sub-grid"
+        >
+            <div class="c-form__row">
+                <span
+                    class="req-indicator"
+                    :class="{'req': isRequired}"
+                >
+                </span>
+                <label>Minimum X axis value</label>
+                <input
+                    ref="domainMin"
+                    v-model.number="domainMin"
+                    data-field-name="domainMin"
+                    type="number"
+                    @input="onChange('domainMin')"
+                >
+            </div>
+
+            <div class="c-form__row">
+                <span
+                    class="req-indicator"
+                    :class="{'req': isRequired}"
+                >
+                </span>
+                <label>Maximum X axis value</label>
+                <input
+                    ref="domainMax"
+                    v-model.number="domainMax"
+                    data-field-name="domainMax"
+                    type="number"
+                    @input="onChange('domainMax')"
+                >
+            </div>
+
+            <div class="c-form__row">
+                <span
+                    class="req-indicator"
+                    :class="{'req': isRequired}"
+                >
+                </span>
+                <label>Minimum Y axis value</label>
+                <input
+                    ref="rangeMin"
+                    v-model.number="rangeMin"
+                    data-field-name="rangeMin"
+                    type="number"
+                    @input="onChange('rangeMin')"
+                >
+            </div>
+
+            <div class="c-form__row">
+                <span
+                    class="req-indicator"
+                    :class="{'req': isRequired}"
+                >
+                </span>
+                <label>Maximum Y axis value</label>
+                <input
+                    ref="rangeMax"
+                    v-model.number="rangeMax"
+                    data-field-name="rangeMax"
+                    type="number"
+                    @input="onChange('rangeMax')"
+                >
+            </div>
+        </div>
+    </span>
+</span>
+</template>
+
+<script>
+
+export default {
+    props: {
+        model: {
+            type: Object,
+            required: true
+        }
+    },
+    data() {
+        return {
+            rangeMax: this.model.value.rangeMax,
+            rangeMin: this.model.value.rangeMin,
+            domainMax: this.model.value.domainMax,
+            domainMin: this.model.value.domainMin
+        };
+    },
+    computed: {
+        isRequired() {
+            return [this.rangeMax, this.rangeMin, this.domainMin, this.domainMax].some(value => value !== undefined && value !== '');
+        }
+    },
+    methods: {
+        onChange(property) {
+            if (this[property] === '') {
+                this[property] = undefined;
+            }
+
+            const data = {
+                model: this.model,
+                value: {
+                    rangeMax: this.rangeMax,
+                    rangeMin: this.rangeMin,
+                    domainMax: this.domainMax,
+                    domainMin: this.domainMin
+                }
+            };
+
+            if (property) {
+                this.model.validate(data);
+            }
+
+            this.$emit('onChange', data);
+        }
+    }
+};
+</script>

src/plugins/charts/scatter/ScatterPlotView.vue

@@ -0,0 +1,346 @@
+<!--
+ Open MCT, Copyright (c) 2014-2021, 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>
+<ScatterPlotWithUnderlay
+    class="c-plot c-scatter-chart-view"
+    :data="trace"
+    :plot-axis-title="plotAxisTitle"
+    @subscribe="subscribeToAll"
+    @unsubscribe="removeAllSubscriptions"
+/>
+</template>
+
+<script>
+import ScatterPlotWithUnderlay from './ScatterPlotWithUnderlay.vue';
+import _ from 'lodash';
+
+export default {
+    components: {
+        ScatterPlotWithUnderlay
+    },
+    inject: ['openmct', 'domainObject', 'path'],
+    data() {
+        this.telemetryObjects = {};
+        this.telemetryObjectFormats = {};
+        this.valuesByTimestamp = {};
+        this.subscriptions = [];
+
+        return {
+            trace: []
+        };
+    },
+    computed: {
+        plotAxisTitle() {
+            const { xAxisMetadata = {}, yAxisMetadata = {} } = this.trace[0] || {};
+            const xAxisUnit = xAxisMetadata.units ? `(${xAxisMetadata.units})` : '';
+            const yAxisUnit = yAxisMetadata.units ? `(${yAxisMetadata.units})` : '';
+
+            return {
+                xAxisTitle: `${xAxisMetadata.name || ''} ${xAxisUnit}`,
+                yAxisTitle: `${yAxisMetadata.name || ''} ${yAxisUnit}`
+            };
+        }
+    },
+    mounted() {
+        this.setTimeContext();
+        this.loadComposition();
+        this.reloadTelemetry = this.reloadTelemetry.bind(this);
+        this.reloadTelemetry = _.debounce(this.reloadTelemetry, 500);
+        this.unobserve = this.openmct.objects.observe(this.domainObject, 'configuration.axes', this.reloadTelemetry);
+        this.unobserveUnderlayRanges = this.openmct.objects.observe(this.domainObject, 'configuration.ranges', this.reloadTelemetry);
+    },
+    beforeDestroy() {
+        this.stopFollowingTimeContext();
+
+        if (!this.composition) {
+            return;
+        }
+
+        this.removeAllSubscriptions();
+
+        this.composition.off('add', this.addToComposition);
+        this.composition.off('remove', this.removeTelemetryObject);
+        if (this.unobserve) {
+            this.unobserve();
+        }
+
+        if (this.unobserveUnderlayRanges) {
+            this.unobserveUnderlayRanges();
+        }
+    },
+    methods: {
+        setTimeContext() {
+            this.stopFollowingTimeContext();
+
+            this.timeContext = this.openmct.time.getContextForView(this.path);
+            this.followTimeContext();
+
+        },
+        followTimeContext() {
+            this.timeContext.on('bounds', this.reloadTelemetry);
+        },
+        stopFollowingTimeContext() {
+            if (this.timeContext) {
+                this.timeContext.off('bounds', this.reloadTelemetry);
+            }
+        },
+        addToComposition(telemetryObject) {
+            if (Object.values(this.telemetryObjects).length > 0) {
+                this.confirmRemoval(telemetryObject);
+            } else {
+                this.addTelemetryObject(telemetryObject);
+            }
+        },
+        removeFromComposition(telemetryObject) {
+            let composition = this.domainObject.composition.filter(id =>
+                !this.openmct.objects.areIdsEqual(id, telemetryObject.identifier)
+            );
+
+            this.openmct.objects.mutate(this.domainObject, 'composition', composition);
+        },
+        addTelemetryObject(telemetryObject) {
+            // grab information we need from the added telmetry object
+            const key = this.openmct.objects.makeKeyString(telemetryObject.identifier);
+            this.telemetryObjects[key] = telemetryObject;
+            const metadata = this.openmct.telemetry.getMetadata(telemetryObject);
+            this.telemetryObjectFormats[key] = this.openmct.telemetry.getFormatMap(metadata);
+            this.getDataForTelemetry(key);
+        },
+        confirmRemoval(telemetryObject) {
+            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: () => {
+                            const oldTelemetryObject = Object.values(this.telemetryObjects)[0];
+                            this.removeFromComposition(oldTelemetryObject);
+                            this.removeTelemetryObject(oldTelemetryObject.identifier);
+                            this.valuesByTimestamp = {};
+                            this.addTelemetryObject(telemetryObject);
+                            dialog.dismiss();
+                        }
+                    },
+                    {
+                        label: 'Cancel',
+                        callback: () => {
+                            this.removeFromComposition(telemetryObject);
+                            dialog.dismiss();
+                        }
+                    }
+                ]
+            });
+        },
+        getTelemetryProcessor(keyString) {
+            return (telemetry) => {
+                //Check that telemetry object has not been removed since telemetry was requested.
+                const telemetryObject = this.telemetryObjects[keyString];
+                if (!telemetryObject) {
+                    return;
+                }
+
+                telemetry.forEach(datum => {
+                    this.addDataToGraph(telemetryObject, datum);
+                });
+                this.updateTrace(telemetryObject);
+            };
+        },
+        getAxisMetadata(telemetryObject) {
+            const metadata = this.openmct.telemetry.getMetadata(telemetryObject);
+            if (!metadata) {
+                return {};
+            }
+
+            return metadata.valuesForHints(['range']);
+        },
+        loadComposition() {
+            this.composition = this.openmct.composition.get(this.domainObject);
+            this.composition.on('add', this.addToComposition);
+            this.composition.on('remove', this.removeTelemetryObject);
+            this.composition.load();
+        },
+        reloadTelemetry() {
+            this.valuesByTimestamp = {};
+
+            Object.keys(this.telemetryObjects).forEach(key => {
+                this.getDataForTelemetry(key);
+            });
+        },
+        getDataForTelemetry(key) {
+            const telemetryObject = this.telemetryObjects[key];
+            if (!telemetryObject) {
+                return;
+            }
+
+            const telemetryProcessor = this.getTelemetryProcessor(key);
+            const options = this.getOptions();
+            this.openmct.telemetry.request(telemetryObject, options).then(telemetryProcessor);
+            this.subscribeToObject(telemetryObject);
+        },
+        removeTelemetryObject(identifier) {
+            const key = this.openmct.objects.makeKeyString(identifier);
+            if (this.telemetryObjects[key]) {
+                delete this.telemetryObjects[key];
+            }
+
+            if (this.telemetryObjectFormats && this.telemetryObjectFormats[key]) {
+                delete this.telemetryObjectFormats[key];
+            }
+
+            this.removeSubscription(key);
+        },
+        addDataToGraph(telemetryObject, data) {
+            const key = this.openmct.objects.makeKeyString(telemetryObject.identifier);
+
+            if (data.message) {
+                this.openmct.notifications.alert(data.message);
+            }
+
+            if (!this.domainObject.configuration.axes.xKey || !this.domainObject.configuration.axes.yKey) {
+                return;
+            }
+
+            const timestamp = this.getTimestampForDatum(data, key, telemetryObject);
+            let valueForTimestamp = this.valuesByTimestamp[timestamp] || {};
+
+            //populate x values
+            let metadataKey = this.domainObject.configuration.axes.xKey;
+            if (data[metadataKey] !== undefined) {
+                valueForTimestamp.x = this.format(key, metadataKey, data);
+            }
+
+            metadataKey = this.domainObject.configuration.axes.yKey;
+            if (data[metadataKey] !== undefined) {
+                valueForTimestamp.y = this.format(key, metadataKey, data);
+            }
+
+            this.valuesByTimestamp[timestamp] = valueForTimestamp;
+        },
+        updateTrace(telemetryObject) {
+            const xAndyValues = Object.values(this.valuesByTimestamp);
+            const xValues = xAndyValues.map(value => value.x);
+            const yValues = xAndyValues.map(value => value.y);
+            const axisMetadata = this.getAxisMetadata(telemetryObject);
+            const xAxisMetadata = axisMetadata.find(metadata => metadata.source === this.domainObject.configuration.axes.xKey);
+            let yAxisMetadata = {};
+            if (this.domainObject.configuration.axes.yKey) {
+                yAxisMetadata = axisMetadata.find(metadata => metadata.source === this.domainObject.configuration.axes.yKey);
+            }
+
+            let trace = {
+                key: this.openmct.objects.makeKeyString(this.domainObject.identifier),
+                name: this.domainObject.name,
+                x: xValues,
+                y: yValues,
+                text: yValues.map(String),
+                xAxisMetadata: xAxisMetadata,
+                yAxisMetadata: yAxisMetadata,
+                type: 'scatter',
+                mode: 'markers',
+                marker: {
+                    color: this.domainObject.configuration.styles.color
+                },
+                hoverinfo: 'x+y'
+            };
+
+            if (this.domainObject.configuration.ranges !== undefined && this.domainObject.configuration.ranges.domainMin !== undefined && this.domainObject.configuration.ranges.domainMax !== undefined) {
+                trace.xaxis = {
+                    min: this.domainObject.configuration.ranges.domainMin,
+                    max: this.domainObject.configuration.ranges.domainMax
+                };
+            }
+
+            if (this.domainObject.configuration.ranges !== undefined && this.domainObject.configuration.ranges.rangeMin !== undefined && this.domainObject.configuration.ranges.rangeMax !== undefined) {
+                trace.yaxis = {
+                    min: this.domainObject.configuration.ranges.rangeMin,
+                    max: this.domainObject.configuration.ranges.rangeMax
+                };
+            }
+
+            this.trace = [trace];
+        },
+        getTimestampForDatum(datum, key, telemetryObject) {
+            const timeSystemKey = this.timeContext.timeSystem().key;
+            const metadata = this.openmct.telemetry.getMetadata(telemetryObject);
+            let metadataValue = metadata.value(timeSystemKey) || { format: timeSystemKey };
+
+            return this.parse(key, metadataValue.source, datum);
+        },
+        format(telemetryObjectKey, metadataKey, data) {
+            const formats = this.telemetryObjectFormats[telemetryObjectKey];
+
+            return formats[metadataKey].format(data);
+        },
+        parse(telemetryObjectKey, metadataKey, datum) {
+            if (!datum) {
+                return;
+            }
+
+            const formats = this.telemetryObjectFormats[telemetryObjectKey];
+
+            return formats[metadataKey].parse(datum);
+        },
+        getOptions() {
+            const { start, end } = this.timeContext.bounds();
+
+            return {
+                end,
+                start
+            };
+        },
+        subscribeToObject(telemetryObject) {
+            const key = this.openmct.objects.makeKeyString(telemetryObject.identifier);
+
+            this.removeSubscription(key);
+
+            const options = this.getOptions();
+            const unsubscribe = this.openmct.telemetry.subscribe(telemetryObject,
+                data => this.addDataToGraph(telemetryObject, data)
+                , options);
+
+            this.subscriptions.push({
+                key,
+                unsubscribe
+            });
+        },
+        subscribeToAll() {
+            const telemetryObjects = Object.values(this.telemetryObjects);
+            telemetryObjects.forEach(this.subscribeToObject);
+        },
+        removeAllSubscriptions() {
+            this.subscriptions.forEach(subscription => subscription.unsubscribe());
+            this.subscriptions = [];
+        },
+        removeSubscription(key) {
+            const found = this.subscriptions.findIndex(subscription => subscription.key === key);
+            if (found > -1) {
+                this.subscriptions[found].unsubscribe();
+                this.subscriptions.splice(found, 1);
+            }
+        }
+    }
+};
+
+</script>

src/plugins/charts/scatter/ScatterPlotViewProvider.js

@@ -0,0 +1,79 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2021, 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 ScatterPlotView from './ScatterPlotView.vue';
+import { SCATTER_PLOT_KEY, SCATTER_PLOT_VIEW, TIME_STRIP_KEY } from './scatterPlotConstants.js';
+import Vue from 'vue';
+
+export default function ScatterPlotViewProvider(openmct) {
+    function isCompactView(objectPath) {
+        let isChildOfTimeStrip = objectPath.find(object => object.type === TIME_STRIP_KEY);
+
+        return isChildOfTimeStrip && !openmct.router.isNavigatedObject(objectPath);
+    }
+
+    return {
+        key: SCATTER_PLOT_VIEW,
+        name: 'Scatter Plot',
+        cssClass: 'icon-telemetry',
+        canView(domainObject, objectPath) {
+            return domainObject && domainObject.type === SCATTER_PLOT_KEY;
+        },
+
+        canEdit(domainObject, objectPath) {
+            return domainObject && domainObject.type === SCATTER_PLOT_KEY;
+        },
+
+        view: function (domainObject, objectPath) {
+            let component;
+
+            return {
+                show: function (element) {
+                    let isCompact = isCompactView(objectPath);
+                    component = new Vue({
+                        el: element,
+                        components: {
+                            ScatterPlotView
+                        },
+                        provide: {
+                            openmct,
+                            domainObject,
+                            path: objectPath
+                        },
+                        data() {
+                            return {
+                                options: {
+                                    compact: isCompact
+                                }
+                            };
+                        },
+                        template: '<scatter-plot-view :options="options"></scatter-plot-view>'
+                    });
+                },
+                destroy: function () {
+                    component.$destroy();
+                    component = undefined;
+                }
+            };
+        }
+    };
+}

src/plugins/charts/scatter/ScatterPlotWithUnderlay.vue

@@ -0,0 +1,393 @@
+<template>
+<div
+    ref="plotWrapper"
+    class="has-local-controls"
+    :class="{ 's-unsynced' : isZoomed }"
+>
+    <div
+        v-if="isZoomed"
+        class="l-state-indicators"
+    >
+        <span
+            class="l-state-indicators__alert-no-lad t-object-alert t-alert-unsynced icon-alert-triangle"
+            title="This plot is not currently displaying the latest data. Reset pan/zoom to view latest data."
+        ></span>
+    </div>
+    <div
+        ref="plot"
+        class="c-scatter-chart"
+    ></div>
+    <div
+        ref="localControl"
+        class="gl-plot__local-controls h-local-controls h-local-controls--overlay-content c-local-controls--show-on-hover"
+    >
+        <button
+            v-if="data.length"
+            class="c-button icon-reset"
+            :disabled="!isZoomed"
+            title="Reset pan/zoom"
+            @click="reset()"
+        >
+        </button>
+    </div>
+</div>
+</template>
+<script>
+import Plotly from 'plotly-basic';
+
+const MULTI_AXES_X_PADDING_PERCENT = {
+    LEFT: 8,
+    RIGHT: 94
+};
+
+import { getValidatedData } from "@/plugins/plan/util";
+
+const PATH_COLORS = ['blue', 'red', 'green'];
+const MARKER_COLOR = 'white';
+
+export default {
+    inject: ['openmct', 'domainObject'],
+    props: {
+        data: {
+            type: Array,
+            default() {
+                return [];
+            }
+        },
+        plotAxisTitle: {
+            type: Object,
+            default() {
+                return {};
+            }
+        }
+    },
+    data() {
+        return {
+            isZoomed: false,
+            yAxisRange: {
+                min: '',
+                max: ''
+            },
+            xAxisRange: {
+                min: '',
+                max: ''
+            }
+        };
+    },
+    watch: {
+        data: {
+            immediate: false,
+            handler: 'updateData'
+        }
+    },
+    mounted() {
+        this.getUnderlayPlotData();
+
+        Plotly.newPlot(this.$refs.plot, Array.from(this.data.concat(this.getShapes(this.shapesData))), this.getLayout(), {
+            responsive: true,
+            displayModeBar: false
+        });
+        this.registerListeners();
+
+        this.$refs.plot.on('plotly_relayout', this.zoom);
+    },
+    beforeDestroy() {
+        if (this.$refs.plot && this.$refs.plot.off) {
+            this.$refs.plot.off('plotly_relayout', this.zoom);
+        }
+
+        if (this.plotResizeObserver) {
+            this.plotResizeObserver.unobserve(this.$refs.plotWrapper);
+            clearTimeout(this.resizeTimer);
+        }
+
+        if (this.unlistenUnderlay) {
+            this.unlistenUnderlay();
+        }
+
+        if (this.unlistenUnderlayRanges) {
+            this.unlistenUnderlayRanges();
+        }
+
+        if (this.unobserveColorChanges) {
+            this.unobserveColorChanges();
+        }
+    },
+    methods: {
+        getUnderlayPlotData() {
+            if (this.domainObject.selectFile) {
+                this.shapesData = getValidatedData(this.domainObject);
+            } else {
+                this.shapesData = [];
+            }
+        },
+        observeForUnderlayPlotChanges() {
+            this.getUnderlayPlotData();
+            this.updateData();
+        },
+        getAxisMinMax() {
+            if (!this.data.length) {
+                return;
+            }
+
+            // For now, use x and y axes min, max values only if an underlay is available
+            if (this.shapesData.length && this.data[0].xaxis) {
+                this.xAxisRange = this.data[0].xaxis;
+            }
+
+            if (this.shapesData.length && this.data[0].yaxis) {
+                this.yAxisRange = this.data[0].yaxis;
+            }
+        },
+        getLayout() {
+            this.getAxisMinMax();
+
+            const yAxesMeta = this.getYAxisMeta();
+            const primaryYaxis = this.getYaxisLayout(yAxesMeta['1']);
+            const xAxisDomain = this.getXAxisDomain(yAxesMeta);
+
+            const shapes = this.shapesData.map((shapeData, index) => {
+                if (!shapeData.x || !shapeData.y
+                || !shapeData.x.length || !shapeData.y.length
+                || shapeData.x.length !== shapeData.y.length) {
+                    return "";
+                }
+
+                let path = `M ${shapeData.x[0]},${shapeData.y[0]}`;
+                shapeData.x.forEach((point, shapeIndex) => {
+                    if (shapeIndex > 0) {
+                        path = `${path} L${point},${shapeData.y[shapeIndex]}`;
+                    }
+                });
+
+                return {
+                    path,
+                    type: 'path',
+                    line: {
+                        color: PATH_COLORS[index]
+                    },
+                    opacity: 0.5
+                };
+            });
+
+            return {
+                autosize: true,
+                showlegend: false,
+                textposition: 'auto',
+                font: {
+                    family: 'Helvetica Neue, Helvetica, Arial, sans-serif',
+                    size: '12px',
+                    color: '#666'
+                },
+                xaxis: {
+                    domain: xAxisDomain,
+                    range: [this.xAxisRange.min, this.xAxisRange.max],
+                    title: this.plotAxisTitle.xAxisTitle,
+                    automargin: true
+                },
+                yaxis: primaryYaxis,
+                margin: {
+                    l: 5,
+                    r: 5,
+                    t: 5,
+                    b: 0
+                },
+                paper_bgcolor: 'transparent',
+                plot_bgcolor: 'transparent',
+                shapes,
+                layer: 'below'
+            };
+        },
+        getYAxisMeta() {
+            const yAxisMeta = {};
+
+            this.data.forEach(datum => {
+                const yAxisMetadata = datum.yAxisMetadata;
+                const range = '1';
+                const side = 'left';
+                const name = yAxisMetadata.name;
+                const unit = yAxisMetadata.units;
+
+                yAxisMeta[range] = {
+                    range,
+                    side,
+                    name,
+                    unit
+                };
+            });
+
+            return yAxisMeta;
+        },
+        getXAxisDomain(yAxisMeta) {
+            let leftPaddingPerc = 0;
+            let rightPaddingPerc = 100;
+            let rightSide = yAxisMeta && Object.values(yAxisMeta).filter((axisMeta => axisMeta.side === 'right'));
+            let leftSide = yAxisMeta && Object.values(yAxisMeta).filter((axisMeta => axisMeta.side === 'left'));
+            if (yAxisMeta && rightSide.length > 1) {
+                rightPaddingPerc = MULTI_AXES_X_PADDING_PERCENT.RIGHT;
+            }
+
+            if (yAxisMeta && leftSide.length > 1) {
+                leftPaddingPerc = MULTI_AXES_X_PADDING_PERCENT.LEFT;
+            }
+
+            return [leftPaddingPerc / 100, rightPaddingPerc / 100];
+        },
+        getYaxisLayout(yAxisMeta) {
+            if (!yAxisMeta) {
+                return {};
+            }
+
+            const { name, range, side = 'left', unit } = yAxisMeta;
+            const title = `${name} ${unit ? '(' + unit + ')' : ''}`;
+            const yaxis = {
+                automargin: true,
+                title
+            };
+
+            let yRange = this.yAxisRange;
+            if (range === '1') {
+                yaxis.range = [yRange.min, yRange.max];
+
+                return yaxis;
+            }
+
+            yaxis.range = [yRange.min, yRange.max];
+            yaxis.anchor = side.toLowerCase() === 'left'
+                ? 'free'
+                : 'x';
+            yaxis.showline = side.toLowerCase() === 'left';
+            yaxis.side = side.toLowerCase();
+            yaxis.overlaying = 'y';
+            yaxis.position = 0.01;
+
+            return yaxis;
+        },
+        registerListeners() {
+            this.unobserveColorChanges = this.openmct.objects.observe(this.domainObject, 'configuration.styles.color', this.updateColors);
+            this.unlistenUnderlay = this.openmct.objects.observe(this.domainObject, 'selectFile', this.observeForUnderlayPlotChanges);
+            this.unlistenUnderlayRanges = this.openmct.objects.observe(this.domainObject, 'configuration.ranges', this.updateData);
+            this.resizeTimer = false;
+            if (window.ResizeObserver) {
+                this.plotResizeObserver = new ResizeObserver(() => {
+                    // debounce and trigger window resize so that plotly can resize the plot
+                    clearTimeout(this.resizeTimer);
+                    this.resizeTimer = setTimeout(() => {
+                        window.dispatchEvent(new Event('resize'));
+                    }, 250);
+                });
+                this.plotResizeObserver.observe(this.$refs.plotWrapper);
+            }
+        },
+        updateColors() {
+            const colors = [];
+            const indices = [];
+            this.data.forEach((item, index) => {
+                const colorExists = this.domainObject.configuration.styles.color;
+                indices.push(index);
+                if (colorExists) {
+                    colors.push(this.domainObject.configuration.styles.color);
+                } else {
+                    colors.push(item.marker.color);
+                }
+            });
+            const plotUpdate = {
+                'marker.color': colors
+            };
+
+            Plotly.restyle(this.$refs.plot, plotUpdate, indices);
+        },
+        reset() {
+            this.isZoomed = false;
+
+            this.updatePlot();
+            this.$emit('subscribe');
+        },
+        updateData() {
+            this.updatePlot();
+        },
+        updateLocalControlPosition() {
+            const localControl = this.$refs.localControl;
+            localControl.style.display = 'none';
+
+            const plot = this.$refs.plot;
+            const bgLayer = this.$el.querySelector('.bglayer');
+
+            const plotBoundingRect = plot.getBoundingClientRect();
+            const bgLayerBoundingRect = bgLayer.getBoundingClientRect();
+
+            const top = bgLayerBoundingRect.top - plotBoundingRect.top + 5;
+            const left = bgLayerBoundingRect.left - plotBoundingRect.left + 5;
+
+            localControl.style.top = `${top}px`;
+            localControl.style.left = `${left}px`;
+            localControl.style.display = 'block';
+        },
+        updatePlot() {
+            if (!this.$refs || !this.$refs.plot || this.isZoomed) {
+                return;
+            }
+
+            Plotly.react(this.$refs.plot, Array.from(this.data.concat(this.getShapes(this.shapesData))), this.getLayout());
+        },
+        zoom(eventData) {
+            const autorange = eventData['xaxis.autorange'];
+            const { autosize } = eventData;
+
+            if (autosize || autorange) {
+                return;
+            }
+
+            this.isZoomed = true;
+            this.$emit('unsubscribe');
+        },
+        getShapes() {
+            let markerData = {
+                x: [],
+                y: []
+            };
+            const shapes = this.shapesData.map((shapeData, index) => {
+                if (!shapeData.x || !shapeData.y
+              || !shapeData.x.length || !shapeData.y.length
+              || shapeData.x.length !== shapeData.y.length) {
+                    return "";
+                }
+
+                let text = [];
+                shapeData.x.forEach((point) => {
+                    text.push(`${parseFloat(point).toPrecision(2)}`);
+                });
+
+                markerData.x = markerData.x.concat(shapeData.x);
+                markerData.y = markerData.y.concat(shapeData.y);
+
+                return {
+                    x: shapeData.x,
+                    y: shapeData.y,
+                    mode: 'text',
+                    text,
+                    textfont: {
+                        family: 'Helvetica Neue, Helvetica, Arial, sans-serif',
+                        size: '12px',
+                        color: PATH_COLORS[index]
+                    },
+                    opacity: 0.5
+                };
+            });
+
+            shapes.push({
+                x: markerData.x,
+                y: markerData.y,
+                mode: "markers",
+                marker: {
+                    size: 6,
+                    color: MARKER_COLOR
+                }
+            });
+
+            return shapes;
+        }
+    }
+};
+</script>
+

src/plugins/charts/scatter/inspector/PlotOptions.vue

@@ -0,0 +1,64 @@
+<!--
+ 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>
+    <div v-if="canEdit">
+        <plot-options-edit />
+    </div>
+    <div v-else>
+        <plot-options-browse />
+    </div>
+</div>
+</template>
+
+<script>
+import PlotOptionsBrowse from "./PlotOptionsBrowse.vue";
+import PlotOptionsEdit from "./PlotOptionsEdit.vue";
+export default {
+    components: {
+        PlotOptionsBrowse,
+        PlotOptionsEdit
+    },
+    inject: ['openmct', 'domainObject'],
+    data() {
+        return {
+            isEditing: this.openmct.editor.isEditing()
+        };
+    },
+    computed: {
+        canEdit() {
+            return this.isEditing && !this.domainObject.locked;
+        }
+    },
+    mounted() {
+        this.openmct.editor.on('isEditing', this.setEditState);
+    },
+    beforeDestroy() {
+        this.openmct.editor.off('isEditing', this.setEditState);
+    },
+    methods: {
+        setEditState(isEditing) {
+            this.isEditing = isEditing;
+        }
+    }
+};
+</script>

src/plugins/charts/scatter/inspector/PlotOptionsBrowse.vue

@@ -0,0 +1,153 @@
+<!--
+ 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="js-plot-options-browse grid-properties">
+    <ul class="l-inspector-part">
+        <h2 title="Object view settings">Settings</h2>
+        <li class="grid-row">
+            <div
+                class="grid-cell label"
+                title="X axis selection"
+            >X Axis</div>
+            <div class="grid-cell value">{{ xKeyLabel }}</div>
+        </li>
+        <li class="grid-row">
+            <div
+                class="grid-cell label"
+                title="Y axis selection"
+            >Y Axis</div>
+            <div class="grid-cell value">{{ yKeyLabel }}</div>
+        </li>
+        <ColorSwatch
+            :current-color="currentColor"
+            edit-title="Manually set the color for this plot"
+            view-title="The marker color for this plot"
+            short-label="Color"
+        />
+    </ul>
+</div>
+</template>
+
+<script>
+import ColorSwatch from "../../../../ui/color/ColorSwatch.vue";
+import Color from "../../../../ui/color/Color";
+import ColorPalette from "../../../../ui/color/ColorPalette";
+
+export default {
+    components: { ColorSwatch },
+    inject: ['openmct', 'domainObject'],
+    data() {
+        return {
+            xKeyLabel: '',
+            yKeyLabel: '',
+            currentColor: undefined
+        };
+    },
+    mounted() {
+        this.plotSeries = [];
+        this.colorPalette = new ColorPalette();
+        this.initColor();
+        this.composition = this.openmct.composition.get(this.domainObject);
+        this.registerListeners();
+        this.composition.load();
+    },
+    beforeDestroy() {
+        this.stopListening();
+    },
+    methods: {
+        initColor() {
+        // this is called before the plot is initialized
+            if (!this.domainObject.configuration.styles || !this.domainObject.configuration.styles.color) {
+                const color = this.colorPalette.getNextColor().asHexString();
+                this.domainObject.configuration.styles = {
+                    color
+                };
+            }
+
+            this.currentColor = this.domainObject.configuration.styles.color;
+            const colorObject = Color.fromHexString(this.currentColor);
+
+            this.colorPalette.remove(colorObject);
+        },
+        registerListeners() {
+            this.composition.on('add', this.addSeries);
+            this.composition.on('remove', this.removeSeries);
+            this.unobserve = this.openmct.objects.observe(this.domainObject, 'configuration.axes', this.setAxesLabels);
+        },
+        stopListening() {
+            this.composition.off('add', this.addSeries);
+            this.composition.off('remove', this.removeSeries);
+            if (this.unobserve) {
+                this.unobserve();
+            }
+        },
+        addSeries(series, index) {
+            this.$set(this.plotSeries, this.plotSeries.length, series);
+            this.setAxesLabels();
+        },
+        removeSeries(series) {
+            const index = this.plotSeries.findIndex(plotSeries => this.openmct.objects.areIdsEqual(series.identifier, plotSeries.identifier));
+            if (index !== undefined) {
+                this.$delete(this.plotSeries, index);
+                this.setAxesLabels();
+            }
+        },
+        setAxesLabels() {
+            let xKeyOptions = [];
+            let yKeyOptions = [];
+            if (this.plotSeries.length <= 0) {
+                return;
+            }
+
+            const series = this.plotSeries[0];
+            const metadataValues = this.openmct.telemetry.getMetadata(series).valuesForHints(['range']);
+
+            metadataValues.forEach((metadataValue) => {
+                xKeyOptions.push({
+                    name: metadataValue.name || metadataValue.key,
+                    value: metadataValue.source || metadataValue.key
+                });
+                yKeyOptions.push({
+                    name: metadataValue.name || metadataValue.key,
+                    value: metadataValue.source || metadataValue.key
+                });
+            });
+            let xKeyOptionIndex;
+            let yKeyOptionIndex;
+
+            if (this.domainObject.configuration.axes.xKey) {
+                xKeyOptionIndex = xKeyOptions.findIndex(option => option.value === this.domainObject.configuration.axes.xKey);
+                if (xKeyOptionIndex > -1) {
+                    this.xKeyLabel = xKeyOptions[xKeyOptionIndex].name;
+                }
+            }
+
+            if (metadataValues.length > 1 && this.domainObject.configuration.axes.yKey) {
+                yKeyOptionIndex = yKeyOptions.findIndex(option => option.value === this.domainObject.configuration.axes.yKey);
+                if (yKeyOptionIndex > -1) {
+                    this.yKeyLabel = yKeyOptions[yKeyOptionIndex].name;
+                }
+            }
+        }
+    }
+};
+</script>

src/plugins/charts/scatter/inspector/PlotOptionsEdit.vue

@@ -0,0 +1,262 @@
+<!--
+ 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="js-plot-options-edit grid-properties">
+    <ul class="l-inspector-part">
+        <h2 title="Object view settings">Settings</h2>
+        <li class="grid-row">
+            <div
+                class="grid-cell label"
+                title="X axis selection."
+            >X Axis</div>
+            <div class="grid-cell value">
+                <select
+                    v-model="xKey"
+                    @change="updateForm('xKey')"
+                >
+                    <option
+                        v-for="option in xKeyOptions"
+                        :key="`xKey-${option.value}`"
+                        :value="option.value"
+                        :selected="option.value == xKey"
+                    >
+                        {{ option.name }}
+                    </option>
+                </select>
+            </div>
+        </li>
+        <li class="grid-row">
+            <div
+                class="grid-cell label"
+                title="Y axis selection."
+            >Y Axis</div>
+            <div class="grid-cell value">
+                <select
+                    v-model="yKey"
+                    @change="updateForm('yKey')"
+                >
+                    <option
+                        v-for="option in yKeyOptions"
+                        :key="`yKey-${option.value}`"
+                        :value="option.value"
+                        :selected="option.value == yKey"
+                    >
+                        {{ option.name }}
+                    </option>
+                </select>
+            </div>
+        </li>
+        <ColorSwatch
+            :current-color="currentColor"
+            title="Manually set the line and marker color for this plot."
+            edit-title="Manually set the line and marker color for this plot."
+            view-title="The line and marker color for this plot."
+            short-label="Color"
+            @colorSet="setColor"
+        />
+    </ul>
+</div>
+</template>
+<script>
+import Color from "../../../../ui/color/Color";
+import ColorPalette from "../../../../ui/color/ColorPalette";
+import ColorSwatch from "../../../../ui/color/ColorSwatch.vue";
+
+export default {
+    components: { ColorSwatch },
+    inject: ['openmct', 'domainObject'],
+    data() {
+        return {
+            xKey: undefined,
+            yKey: undefined,
+            xKeyOptions: [],
+            yKeyOptions: [],
+            currentColor: undefined
+        };
+    },
+    mounted() {
+        this.plotSeries = [];
+        this.colorPalette = new ColorPalette();
+        this.initColor();
+        this.composition = this.openmct.composition.get(this.domainObject);
+        this.registerListeners();
+        this.composition.load();
+    },
+    beforeDestroy() {
+        this.stopListening();
+    },
+    methods: {
+        initColor() {
+        // this is called before the plot is initialized
+            if (!this.domainObject.configuration.styles || !this.domainObject.configuration.styles.color) {
+                const color = this.colorPalette.getNextColor().asHexString();
+                this.domainObject.configuration.styles = {
+                    color
+                };
+            }
+
+            this.currentColor = this.domainObject.configuration.styles.color;
+            const colorObject = Color.fromHexString(this.currentColor);
+
+            this.colorPalette.remove(colorObject);
+        },
+        setColor(chosenColor) {
+            this.currentColor = chosenColor.asHexString();
+            this.openmct.objects.mutate(
+                this.domainObject,
+                `configuration.styles.color`,
+                this.currentColor
+            );
+        },
+        registerListeners() {
+            this.composition.on('add', this.addSeries);
+            this.composition.on('remove', this.removeSeries);
+            this.unobserve = this.openmct.objects.observe(this.domainObject, 'configuration.axes', this.setupOptions);
+        },
+        stopListening() {
+            this.composition.off('add', this.addSeries);
+            this.composition.off('remove', this.removeSeries);
+            if (this.unobserve) {
+                this.unobserve();
+            }
+        },
+        addSeries(series, index) {
+            this.$set(this.plotSeries, this.plotSeries.length, series);
+            this.setupOptions();
+        },
+        removeSeries(seriesIdentifier) {
+            const index = this.plotSeries.findIndex(plotSeries => this.openmct.objects.areIdsEqual(seriesIdentifier, plotSeries.identifier));
+            if (index >= 0) {
+                this.$delete(this.plotSeries, index);
+                this.setupOptions();
+            }
+        },
+        setupOptions() {
+            this.xKeyOptions = [];
+            this.yKeyOptions = [];
+            if (this.plotSeries.length <= 0) {
+                return;
+            }
+
+            let update = false;
+            const series = this.plotSeries[0];
+            const metadataValues = this.openmct.telemetry.getMetadata(series).valuesForHints(['range']);
+            metadataValues.forEach((metadataValue) => {
+                this.xKeyOptions.push({
+                    name: metadataValue.name || metadataValue.key,
+                    value: metadataValue.source || metadataValue.key
+                });
+                this.yKeyOptions.push({
+                    name: metadataValue.name || metadataValue.key,
+                    value: metadataValue.source || metadataValue.key
+                });
+            });
+
+            let xKeyOptionIndex;
+            let yKeyOptionIndex;
+
+            if (this.domainObject.configuration.axes.xKey) {
+                xKeyOptionIndex = this.xKeyOptions.findIndex(option => option.value === this.domainObject.configuration.axes.xKey);
+                if (xKeyOptionIndex > -1) {
+                    this.xKey = this.xKeyOptions[xKeyOptionIndex].value;
+                } else {
+                    this.xKey = undefined;
+                }
+            }
+
+            if (this.xKey === undefined) {
+                update = true;
+                xKeyOptionIndex = 0;
+                this.xKey = this.xKeyOptions[xKeyOptionIndex].value;
+            }
+
+            if (metadataValues.length > 1) {
+                if (this.domainObject.configuration.axes.yKey) {
+                    yKeyOptionIndex = this.yKeyOptions.findIndex(option => option.value === this.domainObject.configuration.axes.yKey);
+                    if (yKeyOptionIndex > -1 && yKeyOptionIndex !== xKeyOptionIndex) {
+                        this.yKey = this.yKeyOptions[yKeyOptionIndex].value;
+                    } else {
+                        this.yKey = undefined;
+                    }
+                }
+
+                if (this.yKey === undefined) {
+                    update = true;
+                    yKeyOptionIndex = this.yKeyOptions.findIndex((option, index) => index !== xKeyOptionIndex);
+                    this.yKey = this.yKeyOptions[yKeyOptionIndex].value;
+                }
+
+                this.yKeyOptions = this.yKeyOptions.map((option, index) => {
+                    if (index === xKeyOptionIndex) {
+                        option.name = `${option.name} (swap)`;
+                        option.swap = yKeyOptionIndex;
+                    } else {
+                        option.name = option.name.replace(' (swap)', '');
+                        option.swap = undefined;
+                    }
+
+                    return option;
+                });
+            }
+
+            this.xKeyOptions = this.xKeyOptions.map((option, index) => {
+                if (index === yKeyOptionIndex) {
+                    option.name = `${option.name} (swap)`;
+                    option.swap = xKeyOptionIndex;
+                } else {
+                    option.name = option.name.replace(' (swap)', '');
+                    option.swap = undefined;
+                }
+
+                return option;
+            });
+
+            if (update === true) {
+                this.saveConfiguration();
+            }
+        },
+        updateForm(property) {
+            if (property === 'xKey') {
+                const xKeyOption = this.xKeyOptions.find(option => option.value === this.xKey);
+                if (xKeyOption.swap !== undefined) {
+                    //swap
+                    this.yKey = this.xKeyOptions[xKeyOption.swap].value;
+                }
+            } else if (property === 'yKey') {
+                const yKeyOption = this.yKeyOptions.find(option => option.value === this.yKey);
+                if (yKeyOption.swap !== undefined) {
+                //swap
+                    this.xKey = this.yKeyOptions[yKeyOption.swap].value;
+                }
+            }
+
+            this.saveConfiguration();
+        },
+        saveConfiguration() {
+            this.openmct.objects.mutate(this.domainObject, `configuration.axes`, {
+                xKey: this.xKey,
+                yKey: this.yKey
+            });
+        }
+    }
+};
+</script>

src/plugins/charts/scatter/inspector/ScatterPlotInspectorViewProvider.js

@@ -0,0 +1,48 @@
+import { SCATTER_PLOT_INSPECTOR_KEY, SCATTER_PLOT_KEY } from '../scatterPlotConstants';
+import Vue from 'vue';
+import PlotOptions from "./PlotOptions.vue";
+
+export default function ScatterPlotInspectorViewProvider(openmct) {
+    return {
+        key: SCATTER_PLOT_INSPECTOR_KEY,
+        name: 'Bar Graph Inspector View',
+        canView: function (selection) {
+            if (selection.length === 0 || selection[0].length === 0) {
+                return false;
+            }
+
+            let object = selection[0][0].context.item;
+
+            return object
+                && object.type === SCATTER_PLOT_KEY;
+        },
+        view: function (selection) {
+            let component;
+
+            return {
+                show: function (element) {
+                    component = new Vue({
+                        el: element,
+                        components: {
+                            PlotOptions
+                        },
+                        provide: {
+                            openmct,
+                            domainObject: selection[0][0].context.item
+                        },
+                        template: '<plot-options></plot-options>'
+                    });
+                },
+                destroy: function () {
+                    if (component) {
+                        component.$destroy();
+                        component = undefined;
+                    }
+                }
+            };
+        },
+        priority: function () {
+            return 1;
+        }
+    };
+}

src/plugins/charts/scatter/plugin.js

@@ -0,0 +1,127 @@
+/*****************************************************************************
+ * 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 { SCATTER_PLOT_KEY } from './scatterPlotConstants.js';
+import ScatterPlotViewProvider from './ScatterPlotViewProvider';
+import ScatterPlotInspectorViewProvider from './inspector/ScatterPlotInspectorViewProvider';
+import ScatterPlotCompositionPolicy from './ScatterPlotCompositionPolicy';
+import Vue from "vue";
+import ScatterPlotForm from "./ScatterPlotForm.vue";
+
+export default function () {
+    return function install(openmct) {
+        openmct.forms.addNewFormControl('scatter-plot-form-control', getScatterPlotFormControl(openmct));
+
+        openmct.types.addType(SCATTER_PLOT_KEY, {
+            key: SCATTER_PLOT_KEY,
+            name: "Scatter Plot",
+            cssClass: "icon-plot-scatter",
+            description: "View data as a scatter plot.",
+            creatable: true,
+            initialize: function (domainObject) {
+                domainObject.composition = [];
+                domainObject.configuration = {
+                    styles: {},
+                    axes: {},
+                    ranges: {}
+                };
+            },
+            form: [
+                {
+                    name: 'Underlay data (JSON file)',
+                    key: 'selectFile',
+                    control: 'file-input',
+                    text: 'Select File...',
+                    type: 'application/json',
+                    removable: true,
+                    hideFromInspector: true,
+                    property: [
+                        "selectFile"
+                    ]
+                },
+                {
+                    name: "Underlay ranges",
+                    control: "scatter-plot-form-control",
+                    cssClass: "l-input",
+                    key: "scatterPlotForm",
+                    required: false,
+                    hideFromInspector: false,
+                    property: [
+                        "configuration",
+                        "ranges"
+                    ],
+                    validate: ({ value }, callback) => {
+                        const { rangeMin, rangeMax, domainMin, domainMax } = value;
+                        const valid = {
+                            rangeMin,
+                            rangeMax,
+                            domainMin,
+                            domainMax
+                        };
+
+                        if (callback) {
+                            callback(valid);
+                        }
+
+                        const values = Object.values(valid);
+                        const hasAllValues = values.every(rangeValue => rangeValue !== undefined);
+                        const hasNoValues = values.every(rangeValue => rangeValue === undefined);
+
+                        return hasAllValues || hasNoValues;
+                    }
+                }
+            ],
+            priority: 891
+        });
+
+        openmct.objectViews.addProvider(new ScatterPlotViewProvider(openmct));
+
+        openmct.inspectorViews.addProvider(new ScatterPlotInspectorViewProvider(openmct));
+
+        openmct.composition.addPolicy(new ScatterPlotCompositionPolicy(openmct).allow);
+    };
+
+    function getScatterPlotFormControl(openmct) {
+        return {
+            show(element, model, onChange) {
+                const rowComponent = new Vue({
+                    el: element,
+                    components: {
+                        ScatterPlotForm
+                    },
+                    provide: {
+                        openmct
+                    },
+                    data() {
+                        return {
+                            model,
+                            onChange
+                        };
+                    },
+                    template: `<scatter-plot-form :model="model" @onChange="onChange"></scatter-plot-form>`
+                });
+
+                return rowComponent;
+            }
+        };
+    }
+}
+

src/plugins/charts/scatter/pluginSpec.js

@@ -0,0 +1,421 @@
+/*****************************************************************************
+ * 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 Vue from "vue";
+import ScatterPlotPlugin from "./plugin";
+import ScatterPlot from './ScatterPlotView.vue';
+import EventEmitter from "EventEmitter";
+import { SCATTER_PLOT_VIEW, SCATTER_PLOT_KEY } from './scatterPlotConstants';
+
+describe("the plugin", function () {
+    let element;
+    let child;
+    let openmct;
+    let telemetryPromise;
+    let telemetryPromiseResolve;
+    let mockObjectPath;
+
+    beforeEach((done) => {
+        mockObjectPath = [
+            {
+                name: 'mock folder',
+                type: 'fake-folder',
+                identifier: {
+                    key: 'mock-folder',
+                    namespace: ''
+                }
+            }
+        ];
+        const testTelemetry = [
+            {
+                'utc': 1,
+                'some-key': 'some-value 1',
+                'some-other-key': 'some-other-value 1'
+            },
+            {
+                'utc': 2,
+                'some-key': 'some-value 2',
+                'some-other-key': 'some-other-value 2'
+            },
+            {
+                'utc': 3,
+                'some-key': 'some-value 3',
+                'some-other-key': 'some-other-value 3'
+            }
+        ];
+
+        openmct = createOpenMct();
+
+        telemetryPromise = new Promise((resolve) => {
+            telemetryPromiseResolve = resolve;
+        });
+
+        spyOn(openmct.telemetry, 'request').and.callFake(() => {
+            telemetryPromiseResolve(testTelemetry);
+
+            return telemetryPromise;
+        });
+
+        openmct.install(new ScatterPlotPlugin());
+
+        element = document.createElement("div");
+        element.style.width = "640px";
+        element.style.height = "480px";
+        child = document.createElement("div");
+        child.style.width = "640px";
+        child.style.height = "480px";
+        element.appendChild(child);
+        document.body.appendChild(element);
+
+        spyOn(window, 'ResizeObserver').and.returnValue({
+            observe() {},
+            unobserve() {},
+            disconnect() {}
+        });
+
+        openmct.time.timeSystem("utc", {
+            start: 0,
+            end: 4
+        });
+
+        openmct.types.addType("test-object", {
+            creatable: true
+        });
+
+        openmct.on("start", done);
+        openmct.startHeadless();
+    });
+
+    afterEach((done) => {
+        openmct.time.timeSystem('utc', {
+            start: 0,
+            end: 1
+        });
+        resetApplicationState(openmct).then(done).catch(done);
+    });
+
+    describe("The scatter plot view", () => {
+        let testDomainObject;
+        let scatterPlotObject;
+        // eslint-disable-next-line no-unused-vars
+        let component;
+        let mockComposition;
+
+        beforeEach(async () => {
+            scatterPlotObject = {
+                identifier: {
+                    namespace: "",
+                    key: "test-plot"
+                },
+                type: "telemetry.plot.scatter-plot",
+                name: "Test Scatter Plot",
+                configuration: {
+                    axes: {},
+                    styles: {}
+                }
+            };
+
+            testDomainObject = {
+                identifier: {
+                    namespace: "",
+                    key: "test-object"
+                },
+                type: "test-object",
+                name: "Test Object",
+                telemetry: {
+                    values: [{
+                        key: "utc",
+                        format: "utc",
+                        name: "Time",
+                        hints: {
+                            domain: 1
+                        }
+                    }, {
+                        key: "some-key",
+                        name: "Some attribute",
+                        hints: {
+                            range: 1
+                        }
+                    }, {
+                        key: "some-other-key",
+                        name: "Another attribute",
+                        hints: {
+                            range: 2
+                        }
+                    }]
+                }
+            };
+
+            mockComposition = new EventEmitter();
+            mockComposition.load = () => {
+                mockComposition.emit('add', testDomainObject);
+
+                return [testDomainObject];
+            };
+
+            spyOn(openmct.composition, 'get').and.returnValue(mockComposition);
+
+            let viewContainer = document.createElement("div");
+            child.append(viewContainer);
+            component = new Vue({
+                el: viewContainer,
+                components: {
+                    ScatterPlot
+                },
+                provide: {
+                    openmct: openmct,
+                    domainObject: scatterPlotObject,
+                    composition: openmct.composition.get(scatterPlotObject)
+                },
+                template: "<ScatterPlot></ScatterPlot>"
+            });
+
+            await Vue.nextTick();
+        });
+
+        it("provides a scatter plot view", () => {
+            const applicableViews = openmct.objectViews.get(scatterPlotObject, mockObjectPath);
+            const plotViewProvider = applicableViews.find((viewProvider) => viewProvider.key === SCATTER_PLOT_VIEW);
+            expect(plotViewProvider).toBeDefined();
+        });
+
+        it("Renders plotly scatter plot", () => {
+            let scatterPlotElement = element.querySelectorAll(".plotly");
+            expect(scatterPlotElement.length).toBe(1);
+        });
+    });
+
+    describe("the scatter plot objects", () => {
+        const mockObject = {
+            name: 'A very nice scatter plot',
+            key: SCATTER_PLOT_KEY,
+            creatable: true
+        };
+
+        it('defines a scatter plot object type with the correct key', () => {
+            const objectDef = openmct.types.get(SCATTER_PLOT_KEY).definition;
+            expect(objectDef.key).toEqual(mockObject.key);
+        });
+
+        it('is creatable', () => {
+            const objectDef = openmct.types.get(SCATTER_PLOT_KEY).definition;
+            expect(objectDef.creatable).toEqual(mockObject.creatable);
+        });
+    });
+
+    describe("The scatter plot composition policy", () => {
+        it("allows composition for telemetry that contain at least 2 ranges", () => {
+            const parent = {
+                "composition": [],
+                "configuration": {
+                    axes: {},
+                    styles: {}
+                },
+                "name": "Some Scatter Plot",
+                "type": "telemetry.plot.scatter-plot",
+                "location": "mine",
+                "modified": 1631005183584,
+                "persisted": 1631005183502,
+                "identifier": {
+                    "namespace": "",
+                    "key": "b78e7e23-f2b8-4776-b1f0-3ff778f5c8a9"
+                }
+            };
+            const testTelemetryObject = {
+                identifier: {
+                    namespace: "",
+                    key: "test-object"
+                },
+                type: "test-object",
+                name: "Test Object",
+                telemetry: {
+                    values: [{
+                        key: "some-key",
+                        name: "Some attribute",
+                        hints: {
+                            domain: 1
+                        }
+                    }, {
+                        key: "some-other-key",
+                        name: "Another attribute",
+                        hints: {
+                            range: 1
+                        }
+                    }, {
+                        key: "some-other-key2",
+                        name: "Another attribute2",
+                        hints: {
+                            range: 2
+                        }
+                    }]
+                }
+            };
+            const composition = openmct.composition.get(parent);
+            expect(() => {
+                composition.add(testTelemetryObject);
+            }).not.toThrow();
+            expect(parent.composition.length).toBe(1);
+        });
+
+        it("disallows composition for telemetry that don't contain at least 2 range hints", () => {
+            const parent = {
+                "composition": [],
+                "configuration": {
+                    axes: {},
+                    styles: {}
+                },
+                "name": "Some Scatter Plot",
+                "type": "telemetry.plot.scatter-plot",
+                "location": "mine",
+                "modified": 1631005183584,
+                "persisted": 1631005183502,
+                "identifier": {
+                    "namespace": "",
+                    "key": "b78e7e23-f2b8-4776-b1f0-3ff778f5c8a9"
+                }
+            };
+            const testTelemetryObject = {
+                identifier: {
+                    namespace: "",
+                    key: "test-object"
+                },
+                type: "test-object",
+                name: "Test Object",
+                telemetry: {
+                    values: [{
+                        key: "some-key",
+                        name: "Some attribute",
+                        hints: {
+                            domain: 1
+                        }
+                    }, {
+                        key: "some-other-key",
+                        name: "Another attribute",
+                        hints: {
+                            range: 1
+                        }
+                    }]
+                }
+            };
+            const composition = openmct.composition.get(parent);
+            expect(() => {
+                composition.add(testTelemetryObject);
+            }).toThrow();
+            expect(parent.composition.length).toBe(0);
+        });
+    });
+    describe('the inspector view', () => {
+        let mockComposition;
+        let testDomainObject;
+        let selection;
+        let plotInspectorView;
+        let viewContainer;
+        let optionsElement;
+        beforeEach(async () => {
+            testDomainObject = {
+                identifier: {
+                    namespace: "",
+                    key: "test-object"
+                },
+                type: "test-object",
+                name: "Test Object",
+                telemetry: {
+                    values: [{
+                        key: "utc",
+                        format: "utc",
+                        name: "Time",
+                        hints: {
+                            domain: 1
+                        }
+                    }, {
+                        key: "some-key",
+                        name: "Some attribute",
+                        hints: {
+                            range: 1
+                        }
+                    }, {
+                        key: "some-other-key",
+                        name: "Another attribute",
+                        hints: {
+                            range: 2
+                        }
+                    }]
+                }
+            };
+
+            selection = [
+                [
+                    {
+                        context: {
+                            item: {
+                                id: "test-object",
+                                identifier: {
+                                    key: "test-object",
+                                    namespace: ''
+                                },
+                                type: "telemetry.plot.scatter-plot",
+                                configuration: {
+                                    axes: {},
+                                    styles: {
+                                    }
+                                },
+                                composition: [
+                                    {
+                                        key: '~Some~foo.scatter'
+                                    }
+                                ]
+                            }
+                        }
+                    }
+                ]
+            ];
+
+            mockComposition = new EventEmitter();
+            mockComposition.load = () => {
+                mockComposition.emit('add', testDomainObject);
+
+                return [testDomainObject];
+            };
+
+            spyOn(openmct.composition, 'get').and.returnValue(mockComposition);
+
+            viewContainer = document.createElement('div');
+            child.append(viewContainer);
+
+            const applicableViews = openmct.inspectorViews.get(selection);
+            plotInspectorView = applicableViews[0];
+            plotInspectorView.show(viewContainer);
+
+            await Vue.nextTick();
+            optionsElement = element.querySelector('.c-scatter-plot-options');
+        });
+
+        afterEach(() => {
+            plotInspectorView.destroy();
+        });
+
+        it('it renders the options', () => {
+            expect(optionsElement).toBeDefined();
+        });
+    });
+});

src/plugins/charts/scatter/scatterPlotConstants.js

@@ -0,0 +1,4 @@
+export const SCATTER_PLOT_VIEW = 'scatter-plot.view';
+export const SCATTER_PLOT_KEY = 'telemetry.plot.scatter-plot';
+export const SCATTER_PLOT_INSPECTOR_KEY = 'telemetry.plot.scatter-plot.inspector';
+export const TIME_STRIP_KEY = 'time-strip';

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/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/formActions/CreateActionSpec.js

@@ -0,0 +1,128 @@
+/*****************************************************************************
+ * 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 CreateAction from './CreateAction';
+
+import {
+    createOpenMct,
+    resetApplicationState
+} from 'utils/testing';
+
+import { debounce } from 'lodash';
+
+let parentObject;
+let parentObjectPath;
+let unObserve;
+
+describe("The create action plugin", () => {
+    let openmct;
+
+    const TYPES = [
+        'clock',
+        'conditionWidget',
+        'conditionWidget',
+        'example.imagery',
+        'example.state-generator',
+        'flexible-layout',
+        'folder',
+        'generator',
+        'hyperlink',
+        'LadTable',
+        'LadTableSet',
+        'layout',
+        'mmgis',
+        'notebook',
+        'plan',
+        'table',
+        'tabs',
+        'telemetry-mean',
+        'telemetry.plot.bar-graph',
+        'telemetry.plot.overlay',
+        'telemetry.plot.stacked',
+        'time-strip',
+        'timer',
+        'webpage'
+    ];
+
+    beforeEach((done) => {
+        openmct = createOpenMct();
+
+        openmct.on('start', done);
+        openmct.startHeadless();
+    });
+
+    afterEach(() => {
+        return resetApplicationState(openmct);
+    });
+
+    describe('creates new objects for a', () => {
+        beforeEach(() => {
+            parentObject = {
+                name: 'mock folder',
+                type: 'folder',
+                identifier: {
+                    key: 'mock-folder',
+                    namespace: ''
+                },
+                composition: []
+            };
+            parentObjectPath = [parentObject];
+
+            spyOn(openmct.objects, 'save');
+            openmct.objects.save.and.callThrough();
+            spyOn(openmct.forms, 'showForm');
+            openmct.forms.showForm.and.callFake(formStructure => {
+                return Promise.resolve({
+                    name: 'test',
+                    notes: 'test notes',
+                    location: parentObjectPath
+                });
+            });
+        });
+
+        afterEach(() => {
+            parentObject = null;
+            unObserve();
+        });
+
+        TYPES.forEach(type => {
+            it(`type ${type}`, (done) => {
+                function callback(newObject) {
+                    const composition = newObject.composition;
+
+                    openmct.objects.get(composition[0])
+                        .then(object => {
+                            expect(object.type).toEqual(type);
+                            expect(object.location).toEqual(openmct.objects.makeKeyString(parentObject.identifier));
+
+                            done();
+                        });
+                }
+
+                const deBouncedCallback = debounce(callback, 300);
+                unObserve = openmct.objects.observe(parentObject, '*', deBouncedCallback);
+
+                const createAction = new CreateAction(openmct, type, parentObject);
+                createAction.invoke();
+            });
+        });
+    });
+});

src/plugins/formActions/EditPropertiesAction.js

@@ -45,47 +45,35 @@ export default class EditPropertiesAction extends PropertiesAction {
     }
 
     invoke(objectPath) {
-        this._showEditForm(objectPath);
+        return this._showEditForm(objectPath);
     }
 
     /**
      * @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();
     }
 
     /**
@@ -98,7 +86,7 @@ export default class EditPropertiesAction extends PropertiesAction {
         const formStructure = createWizard.getFormStructure(false);
         formStructure.title = 'Edit ' + this.domainObject.name;
 
-        this.openmct.forms.showForm(formStructure)
+        return this.openmct.forms.showForm(formStructure)
             .then(this._onSave.bind(this));
     }
 }

src/plugins/formActions/pluginSpec.js

@@ -0,0 +1,222 @@
+/*****************************************************************************
+ * 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 {
+    createMouseEvent,
+    createOpenMct,
+    resetApplicationState
+} from 'utils/testing';
+
+import { debounce } from 'lodash';
+
+describe('EditPropertiesAction plugin', () => {
+    let editPropertiesAction;
+    let openmct;
+    let element;
+
+    beforeEach((done) => {
+        element = document.createElement('div');
+        element.style.display = 'block';
+        element.style.width = '1920px';
+        element.style.height = '1080px';
+
+        openmct = createOpenMct();
+        openmct.on('start', done);
+        openmct.startHeadless(element);
+
+        editPropertiesAction = openmct.actions.getAction('properties');
+    });
+
+    afterEach(() => {
+        editPropertiesAction = null;
+
+        return resetApplicationState(openmct);
+    });
+
+    it('editPropertiesAction exists', () => {
+        expect(editPropertiesAction.key).toEqual('properties');
+    });
+
+    it('edit properties action applies to only persistable objects', () => {
+        spyOn(openmct.objects, 'isPersistable').and.returnValue(true);
+
+        const domainObject = {
+            name: 'mock folder',
+            type: 'folder',
+            identifier: {
+                key: 'mock-folder',
+                namespace: ''
+            },
+            composition: []
+        };
+        const isApplicableTo = editPropertiesAction.appliesTo([domainObject]);
+        expect(isApplicableTo).toBe(true);
+    });
+
+    it('edit properties action does not apply to non persistable objects', () => {
+        spyOn(openmct.objects, 'isPersistable').and.returnValue(false);
+
+        const domainObject = {
+            name: 'mock folder',
+            type: 'folder',
+            identifier: {
+                key: 'mock-folder',
+                namespace: ''
+            },
+            composition: []
+        };
+        const isApplicableTo = editPropertiesAction.appliesTo([domainObject]);
+        expect(isApplicableTo).toBe(false);
+    });
+
+    it('edit properties action when invoked shows form', (done) => {
+        const domainObject = {
+            name: 'mock folder',
+            notes: 'mock notes',
+            type: 'folder',
+            identifier: {
+                key: 'mock-folder',
+                namespace: ''
+            },
+            modified: 1643065068597,
+            persisted: 1643065068600,
+            composition: []
+        };
+
+        const deBouncedFormChange = debounce(handleFormPropertyChange, 500);
+        openmct.forms.on('onFormPropertyChange', deBouncedFormChange);
+
+        function handleFormPropertyChange(data) {
+            const form = document.querySelector('.js-form');
+            const title = form.querySelector('input');
+            expect(title.value).toEqual(domainObject.name);
+
+            const notes = form.querySelector('textArea');
+            expect(notes.value).toEqual(domainObject.notes);
+
+            const buttons = form.querySelectorAll('button');
+            expect(buttons[0].textContent.trim()).toEqual('OK');
+            expect(buttons[1].textContent.trim()).toEqual('Cancel');
+
+            const clickEvent = createMouseEvent('click');
+            buttons[1].dispatchEvent(clickEvent);
+
+            openmct.forms.off('onFormPropertyChange', deBouncedFormChange);
+        }
+
+        editPropertiesAction.invoke([domainObject])
+            .catch(() => {
+                done();
+            });
+    });
+
+    it('edit properties action saves changes', (done) => {
+        const oldName = 'mock folder';
+        const newName = 'renamed mock folder';
+        const domainObject = {
+            name: oldName,
+            notes: 'mock notes',
+            type: 'folder',
+            identifier: {
+                key: 'mock-folder',
+                namespace: ''
+            },
+            modified: 1643065068597,
+            persisted: 1643065068600,
+            composition: []
+        };
+        let unObserve;
+
+        function callback(newObject) {
+            expect(newObject.name).not.toEqual(oldName);
+            expect(newObject.name).toEqual(newName);
+
+            unObserve();
+            done();
+        }
+
+        const deBouncedCallback = debounce(callback, 300);
+        unObserve = openmct.objects.observe(domainObject, '*', deBouncedCallback);
+
+        let changed = false;
+        const deBouncedFormChange = debounce(handleFormPropertyChange, 500);
+        openmct.forms.on('onFormPropertyChange', deBouncedFormChange);
+
+        function handleFormPropertyChange(data) {
+            const form = document.querySelector('.js-form');
+            const title = form.querySelector('input');
+            const notes = form.querySelector('textArea');
+
+            const buttons = form.querySelectorAll('button');
+            expect(buttons[0].textContent.trim()).toEqual('OK');
+            expect(buttons[1].textContent.trim()).toEqual('Cancel');
+
+            if (!changed) {
+                expect(title.value).toEqual(domainObject.name);
+                expect(notes.value).toEqual(domainObject.notes);
+
+                // change input field value and dispatch event for it
+                title.focus();
+                title.value = newName;
+                title.dispatchEvent(new Event('input'));
+                title.blur();
+
+                changed = true;
+            } else {
+                // click ok to save form changes
+                const clickEvent = createMouseEvent('click');
+                buttons[0].dispatchEvent(clickEvent);
+
+                openmct.forms.off('onFormPropertyChange', deBouncedFormChange);
+            }
+        }
+
+        editPropertiesAction.invoke([domainObject]);
+    });
+
+    it('edit properties action discards changes', (done) => {
+        const name = 'mock folder';
+        const domainObject = {
+            name,
+            notes: 'mock notes',
+            type: 'folder',
+            identifier: {
+                key: 'mock-folder',
+                namespace: ''
+            },
+            modified: 1643065068597,
+            persisted: 1643065068600,
+            composition: []
+        };
+
+        editPropertiesAction.invoke([domainObject])
+            .catch(() => {
+                expect(domainObject.name).toEqual(name);
+
+                done();
+            });
+
+        const form = document.querySelector('.js-form');
+        const buttons = form.querySelectorAll('button');
+        const clickEvent = createMouseEvent('click');
+        buttons[1].dispatchEvent(clickEvent);
+    });
+});

src/plugins/gauge/GaugePluginSpec.js

@@ -53,6 +53,8 @@ describe('Gauge plugin', () => {
         openmct = createOpenMct();
         openmct.on('start', done);
 
+        openmct.install(openmct.plugins.Gauge());
+
         openmct.startHeadless();
     });
 
@@ -190,28 +192,27 @@ describe('Gauge plugin', () => {
         });
 
         it('renders gauge element', () => {
-            const gaugeElement = gaugeHolder.querySelectorAll('.c-gauge');
+            const gaugeElement = gaugeHolder.querySelectorAll('.js-gauge-wrapper');
             expect(gaugeElement.length).toBe(1);
         });
 
         it('renders major elements', () => {
-            const wrapperElement = gaugeHolder.querySelector('.c-gauge__wrapper');
-            const rangeElement = gaugeHolder.querySelector('.c-gauge__range');
-            const curveElement = gaugeHolder.querySelector('.c-gauge__curval');
-            const dialElement = gaugeHolder.querySelector('.c-dial');
+            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 && curveElement && dialElement);
+            const hasMajorElements = Boolean(wrapperElement && rangeElement && valueElement);
 
             expect(hasMajorElements).toBe(true);
         });
 
         it('renders correct min max values', () => {
-            expect(gaugeHolder.querySelector('.c-gauge__range').textContent).toEqual(`${minValue} ${maxValue}`);
+            expect(gaugeHolder.querySelector('.js-gauge-dial-range').textContent).toEqual(`${minValue} ${maxValue}`);
         });
 
         it('renders correct current value', (done) => {
             function WatchUpdateValue() {
-                const textElement = gaugeHolder.querySelector('.c-gauge__curval-text');
+                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();
             }
@@ -326,28 +327,27 @@ describe('Gauge plugin', () => {
         });
 
         it('renders gauge element', () => {
-            const gaugeElement = gaugeHolder.querySelectorAll('.c-gauge');
+            const gaugeElement = gaugeHolder.querySelectorAll('.js-gauge-wrapper');
             expect(gaugeElement.length).toBe(1);
         });
 
         it('renders major elements', () => {
-            const wrapperElement = gaugeHolder.querySelector('.c-gauge__wrapper');
-            const rangeElement = gaugeHolder.querySelector('.c-gauge__range');
-            const curveElement = gaugeHolder.querySelector('.c-gauge__curval');
-            const dialElement = gaugeHolder.querySelector('.c-dial');
+            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 && curveElement && dialElement);
+            const hasMajorElements = Boolean(wrapperElement && rangeElement && valueElement);
 
             expect(hasMajorElements).toBe(true);
         });
 
         it('renders correct min max values', () => {
-            expect(gaugeHolder.querySelector('.c-gauge__range').textContent).toEqual(`${minValue} ${maxValue}`);
+            expect(gaugeHolder.querySelector('.js-gauge-dial-range').textContent).toEqual(`${minValue} ${maxValue}`);
         });
 
         it('renders correct current value', (done) => {
             function WatchUpdateValue() {
-                const textElement = gaugeHolder.querySelector('.c-gauge__curval-text');
+                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();
             }
@@ -462,28 +462,27 @@ describe('Gauge plugin', () => {
         });
 
         it('renders gauge element', () => {
-            const gaugeElement = gaugeHolder.querySelectorAll('.c-gauge');
+            const gaugeElement = gaugeHolder.querySelectorAll('.js-gauge-wrapper');
             expect(gaugeElement.length).toBe(1);
         });
 
         it('renders major elements', () => {
-            const wrapperElement = gaugeHolder.querySelector('.c-gauge__wrapper');
-            const rangeElement = gaugeHolder.querySelector('.c-gauge__range');
-            const curveElement = gaugeHolder.querySelector('.c-meter');
-            const dialElement = gaugeHolder.querySelector('.c-meter__bg');
+            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 && curveElement && dialElement);
+            const hasMajorElements = Boolean(wrapperElement && rangeElement && valueElement);
 
             expect(hasMajorElements).toBe(true);
         });
 
         it('renders correct min max values', () => {
-            expect(gaugeHolder.querySelector('.c-gauge__range').textContent).toEqual(`${maxValue} ${minValue}`);
+            expect(gaugeHolder.querySelector('.js-gauge-meter-range').textContent).toEqual(`${maxValue} ${minValue}`);
         });
 
         it('renders correct current value', (done) => {
             function WatchUpdateValue() {
-                const textElement = gaugeHolder.querySelector('.c-gauge__curval-text');
+                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();
             }
@@ -560,17 +559,16 @@ describe('Gauge plugin', () => {
         });
 
         it('renders gauge element', () => {
-            const gaugeElement = gaugeHolder.querySelectorAll('.c-gauge');
+            const gaugeElement = gaugeHolder.querySelectorAll('.js-gauge-wrapper');
             expect(gaugeElement.length).toBe(1);
         });
 
         it('renders major elements', () => {
-            const wrapperElement = gaugeHolder.querySelector('.c-gauge__wrapper');
-            const rangeElement = gaugeHolder.querySelector('.c-gauge__range');
-            const curveElement = gaugeHolder.querySelector('.c-meter');
-            const dialElement = gaugeHolder.querySelector('.c-meter__bg');
+            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 && curveElement && dialElement);
+            const hasMajorElements = Boolean(wrapperElement && rangeElement && valueElement);
 
             expect(hasMajorElements).toBe(true);
         });
@@ -643,17 +641,16 @@ describe('Gauge plugin', () => {
         });
 
         it('renders gauge element', () => {
-            const gaugeElement = gaugeHolder.querySelectorAll('.c-gauge');
+            const gaugeElement = gaugeHolder.querySelectorAll('.js-gauge-wrapper');
             expect(gaugeElement.length).toBe(1);
         });
 
         it('renders major elements', () => {
-            const wrapperElement = gaugeHolder.querySelector('.c-gauge__wrapper');
+            const wrapperElement = gaugeHolder.querySelector('.js-gauge-wrapper');
             const rangeElement = gaugeHolder.querySelector('.c-gauge__range');
             const curveElement = gaugeHolder.querySelector('.c-meter');
-            const dialElement = gaugeHolder.querySelector('.c-meter__bg');
 
-            const hasMajorElements = Boolean(wrapperElement && rangeElement && curveElement && dialElement);
+            const hasMajorElements = Boolean(wrapperElement && rangeElement && curveElement);
 
             expect(hasMajorElements).toBe(true);
         });
@@ -772,28 +769,27 @@ describe('Gauge plugin', () => {
         });
 
         it('renders gauge element', () => {
-            const gaugeElement = gaugeHolder.querySelectorAll('.c-gauge');
+            const gaugeElement = gaugeHolder.querySelectorAll('.js-gauge-wrapper');
             expect(gaugeElement.length).toBe(1);
         });
 
         it('renders major elements', () => {
-            const wrapperElement = gaugeHolder.querySelector('.c-gauge__wrapper');
-            const rangeElement = gaugeHolder.querySelector('.c-gauge__range');
-            const curveElement = gaugeHolder.querySelector('.c-gauge__curval');
-            const dialElement = gaugeHolder.querySelector('.c-dial');
+            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 && curveElement && dialElement);
+            const hasMajorElements = Boolean(wrapperElement && rangeElement && valueElement);
 
             expect(hasMajorElements).toBe(true);
         });
 
         it('renders correct min max values', () => {
-            expect(gaugeHolder.querySelector('.c-gauge__range').textContent).toEqual(`${gaugeViewObject.configuration.gaugeController.min} ${gaugeViewObject.configuration.gaugeController.max}`);
+            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('.c-gauge__curval-text');
+                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();
             }

src/plugins/gauge/GaugeViewProvider.js

@@ -32,7 +32,9 @@ export default function GaugeViewProvider(openmct) {
             return domainObject.type === 'gauge';
         },
         canEdit: function (domainObject) {
-            return false;
+            if (domainObject.type === 'gauge') {
+                return true;
+            }
         },
         view: function (domainObject) {
             let component;

src/plugins/gauge/components/Gauge.vue

@@ -21,168 +21,259 @@
 *****************************************************************************/
 <template>
 <div
-    class="c-gauge"
+    class="c-gauge__wrapper js-gauge-wrapper"
     :class="`c-gauge--${gaugeType}`"
 >
-    <div class="c-gauge__wrapper">
-        <template v-if="typeDial">
-            <svg
-                class="c-gauge__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>
+    <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-gauge__curval"
+                class="c-dial__current-value-text-sizer"
                 :viewBox="curValViewBox"
             >
                 <text
-                    class="c-gauge__curval-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>
 
-            <div class="c-dial">
-                <svg
-                    class="c-dial__bg"
-                    viewBox="0 0 512 512"
-                >
-                    <path d="M256,0C114.6,0,0,114.6,0,256S114.6,512,256,512,512,397.4,512,256,397.4,0,256,0Zm0,412A156,156,0,1,1,412,256,155.9,155.9,0,0,1,256,412Z" />
-                </svg>
+        <svg
+            class="c-dial__bg"
+            viewBox="0 0 10 10"
+        >
 
-                <svg
-                    v-if="limitHigh && dialHighLimitDeg < 270"
-                    class="c-dial__limit-high"
-                    viewBox="0 0 512 512"
-                    :class="{
-                        'c-high-limit-clip--90': dialHighLimitDeg > 90,
-                        'c-high-limit-clip--180': dialHighLimitDeg >= 180
-                    }"
-                >
-                    <path
-                        d="M100,256A156,156,0,1,1,366.3,366.3L437,437a255.2,255.2,0,0,0,75-181C512,114.6,397.4,0,256,0S0,114.6,0,256A255.2,255.2,0,0,0,75,437l70.7-70.7A155.5,155.5,0,0,1,100,256Z"
-                        :style="`transform: rotate(${dialHighLimitDeg}deg)`"
-                    />
-                </svg>
+            <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>
 
-                <svg
-                    v-if="limitLow && dialLowLimitDeg < 270"
-                    class="c-dial__limit-low"
-                    viewBox="0 0 512 512"
-                    :class="{
-                        'c-dial-clip--90': dialLowLimitDeg < 90,
-                        'c-dial-clip--180': dialLowLimitDeg >= 90 && dialLowLimitDeg < 180
-                    }"
-                >
-                    <path
-                        d="M256,100c86.2,0,156,69.8,156,156s-69.8,156-156,156c-43.1,0-82.1-17.5-110.3-45.7L75,437 c46.3,46.3,110.3,75,181,75c141.4,0,256-114.6,256-256S397.4,0,256,0C185.3,0,121.3,28.7,75,75l70.7,70.7 C173.9,117.5,212.9,100,256,100z"
-                        :style="`transform: rotate(${dialLowLimitDeg}deg)`"
-                    />
-                </svg>
+            <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
-                    class="c-dial__value"
-                    viewBox="0 0 512 512"
-                    :class="{
-                        'c-dial-clip--90': degValue < 90 && typeFilledDial,
-                        'c-dial-clip--180': degValue >= 90 && degValue < 180 && typeFilledDial
-                    }"
-                >
-                    <path
-                        v-if="typeFilledDial && degValue > 0"
-                        d="M256,31A224.3,224.3,0,0,0,98.3,95.5l48.4,49.2a156,156,0,1,1-1,221.6L96.9,415.1A224.4,224.4,0,0,0,256,481c124.3,0,225-100.7,225-225S380.3,31,256,31Z"
-                        :style="`transform: rotate(${degValue}deg)`"
-                    />
-                    <path
-                        v-if="typeNeedleDial && valueInBounds"
-                        d="M256,86c-93.9,0-170,76.1-170,170c0,43.9,16.6,83.9,43.9,114.1l-38.7,38.7c-3.3,3.3-3.3,8.7,0,12s8.7,3.3,12,0 l38.7-38.7C172.1,409.4,212.1,426,256,426c93.9,0,170-76.1,170-170S349.9,86,256,86z M256,411.7c-86,0-155.7-69.7-155.7-155.7 S170,100.3,256,100.3S411.7,170,411.7,256S342,411.7,256,411.7z"
-                        :style="`transform: rotate(${degValue}deg)`"
-                    />
-                </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>
-        </template>
+            <div class="c-meter__bg">
+                <template v-if="typeMeterVertical">
+                    <div
+                        class="c-meter__value"
+                        :style="`transform: translateY(${meterValueToPerc}%)`"
+                    ></div>
 
-        <template v-if="typeMeter">
-            <div class="c-meter">
-                <div
-                    v-if="displayMinMax"
-                    class="c-gauge__range c-meter__range"
+                    <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"
                 >
-                    <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 && meterHighLimitPerc > 0"
-                            class="c-meter__limit-high"
-                            :style="`height: ${meterHighLimitPerc}%`"
-                        ></div>
-
-                        <div
-                            v-if="limitLow && 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 && meterHighLimitPerc > 0"
-                            class="c-meter__limit-high"
-                            :style="`width: ${meterHighLimitPerc}%`"
-                        ></div>
-
-                        <div
-                            v-if="limitLow && meterLowLimitPerc > 0"
-                            class="c-meter__limit-low"
-                            :style="`width: ${meterLowLimitPerc}%`"
-                        ></div>
-                    </template>
-
                     <svg
                         v-if="displayCurVal"
-                        class="c-gauge__curval"
+                        class="c-meter__current-value-text-sizer"
                         :viewBox="curValViewBox"
                         preserveAspectRatio="xMidYMid meet"
                     >
                         <text
-                            class="c-gauge__curval-text"
-                            text-anchor="middle"
+                            class="c-dial__current-value-text js-meter-current-value"
                             lengthAdjust="spacing"
+                            text-anchor="middle"
+                            style="transform: translate(50%, 70%)"
                         >{{ curVal }}</text>
                     </svg>
-                </div>
+                </svg>
             </div>
-        </template>
-    </div>
+        </div>
+    </template>
 </div>
 </template>
 
 <script>
+import { DIAL_VALUE_DEG_OFFSET, getLimitDegree } from '../gauge-limit-util';
+
 const LIMIT_PADDING_IN_PERCENT = 10;
 
 export default {
@@ -209,6 +300,13 @@ export default {
         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));
         },
@@ -299,6 +397,7 @@ export default {
         this.openmct.time.off('timeSystem', this.setTimeSystem);
     },
     methods: {
+        getLimitDegree: getLimitDegree,
         addTelemetryObjectAndSubscribe(domainObject) {
             this.telemetryObject = domainObject;
             this.request();
@@ -340,7 +439,7 @@ export default {
             return this.gaugeType.indexOf(str) !== -1;
         },
         percentToDegrees(vPercent) {
-            return this.round((vPercent / 100) * 270, 2);
+            return this.round(((vPercent / 100) * 270) + DIAL_VALUE_DEG_OFFSET, 2);
         },
         removeFromComposition(telemetryObject = this.telemetryObject) {
             let composition = this.domainObject.composition.filter(id =>
@@ -453,7 +552,7 @@ export default {
         valToPercent(vValue) {
             // Used by dial
             if (vValue >= this.rangeHigh && this.typeFilledDial) {
-                // Don't peg at 100% if the gaugeType isn't a filled shape
+                // For filled dial, clip values over the high range to prevent over-rotation
                 return 100;
             }
 

src/plugins/gauge/components/GaugeFormController.vue

@@ -27,6 +27,7 @@
         :class="model.cssClass"
     >
         <ToggleSwitch
+            :id="'gaugeToggle'"
             :checked="isUseTelemetryLimits"
             label="Use telemetry limits for minimum and maximum ranges"
             @change="toggleUseTelemetryLimits"

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

@@ -1,9 +1,3 @@
-$dialClip: polygon(0 0, 100% 0, 100% 100%, 50% 50%, 0 100%);
-$dialClip90: polygon(0 0, 50% 50%, 0 100%);
-$dialClip180: polygon(0 0, 100% 0, 0 100%);
-$limitHighClip90: polygon(0 0, 100% 0, 100% 100%);
-$limitHighClip180: polygon(100% 0, 100% 100%, 0 100%);
-
 .is-object-type-gauge {
   overflow: hidden;
 }
@@ -13,10 +7,8 @@ $limitHighClip180: polygon(100% 0, 100% 100%, 0 100%);
 
   &.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); }
 }
 
@@ -37,92 +29,47 @@ $limitHighClip180: polygon(100% 0, 100% 100%, 0 100%);
     @include abs();
     overflow: hidden;
   }
-
-  svg {
-    path {
-      transform-origin: center;
-    }
-
-    &.c-gauge__curval {
-      @include abs();
-      fill: $colorGaugeTextValue;
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      z-index: 2;
-
-      .c-gauge__curval-text {
-        font-family: $heroFont;
-        transform: translate(50%, 75%);
-      }
-    }
-  }
-
-  &[class*='dial'] {
-    // Square aspect ratio
-    width: 100%;
-    padding-bottom: 100%;
-  }
-
-  &[class*='meter'] {
-    @include abs();
-  }
 }
 
 /********************************************** DIAL GAUGE */
-.c-dial {
-  // Dial elements
-  @include abs();
-  clip-path: $dialClip;
+svg[class*='c-dial'] {
+  max-height: 100%;
+  max-width: 100%;
+  position: absolute;
 
-  svg,
-  &__ticks,
-  &__bg,
-  &[class*='__limit'],
-  &__value {
-    @include abs();
-  }
-
-  .c-high-limit-clip--90 {
-    clip-path: $limitHighClip90;
-  }
-
-  .c-high-limit-clip--180 {
-    clip-path: $limitHighClip180;
-  }
-
-  &__limit-high path { fill: $colorGaugeLimitHigh; }
-  &__limit-low path { fill: $colorGaugeLimitLow; }
-
-  &__value,
-  &__limit-low {
-    &.c-dial-clip--90 {
-      clip-path: $dialClip90;
-    }
-
-    &.c-dial-clip--180 {
-      clip-path: $dialClip180;
-    }
-  }
-
-  &__value {
-    path,
-    polygon {
-      fill: $colorGaugeValue;
-    }
-  }
-
-  &__bg {
-    path {
-      fill: $colorGaugeBg;
-    }
+  g {
+    transform-origin: center;
   }
 }
 
-.c-gauge--dial-needle .c-dial__value {
-  path {
+.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 */
@@ -131,6 +78,13 @@ $limitHighClip180: polygon(100% 0, 100% 100%, 0 100%);
   @include abs();
   display: flex;
 
+  svg {
+    // current-value-text
+    position: absolute;
+    height: 100%;
+    width: 100%;
+  }
+
   &__range {
     display: flex;
     flex: 0 0 auto;

src/plugins/imagery/components/ImageryView.vue

@@ -55,7 +55,7 @@
             <div
                 v-if="zoomFactor > 1"
                 class="c-imagery__hints"
-            >Alt-drag to pan</div>
+            >{{ formatImageAltText }}</div>
             <div
                 ref="focusedImageWrapper"
                 class="image-wrapper"
@@ -143,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">
@@ -163,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
@@ -179,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
@@ -232,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: {
@@ -272,6 +278,7 @@ export default {
             imageContainerHeight: undefined,
             sizedImageWidth: 0,
             sizedImageHeight: 0,
+            viewHeight: 0,
             lockCompass: true,
             resizingWindow: false,
             timeContext: undefined,
@@ -290,7 +297,8 @@ export default {
             imageTranslateY: 0,
             pan: undefined,
             animateZoom: true,
-            imagePanned: false
+            imagePanned: false,
+            forceShowThumbnails: false
         };
     },
     computed: {
@@ -306,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);
         },
@@ -314,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;
@@ -461,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: {
@@ -497,6 +534,8 @@ export default {
                 if (!this.isPaused) {
                     this.setFocusedImage(imageIndex);
                     this.scrollToRight();
+                } else {
+                    this.scrollToFocused();
                 }
             },
             deep: true
@@ -583,6 +622,9 @@ export default {
 
     },
     methods: {
+        calculateViewHeight() {
+            this.viewHeight = this.$el.clientHeight;
+        },
         setTimeContext() {
             this.stopFollowingTimeContext();
             this.timeContext = this.openmct.time.getContextForView(this.objectPath);
@@ -845,10 +887,6 @@ export default {
             this.imageTranslateY = 0;
         },
         handlePanZoomUpdate({ newScaleFactor, screenClientX, screenClientY }) {
-            if (!this.isPaused) {
-                this.paused(true);
-            }
-
             if (!(screenClientX || screenClientY)) {
                 return this.updatePanZoom(newScaleFactor, 0, 0);
             }
@@ -956,6 +994,8 @@ export default {
             }
 
             this.setSizedImageDimensions();
+            this.calculateViewHeight();
+            this.scrollToFocused();
         },
         setSizedImageDimensions() {
             this.focusedImageNaturalAspectRatio = this.$refs.focusedImage.naturalWidth / this.$refs.focusedImage.naturalHeight;
@@ -984,6 +1024,8 @@ export default {
                 this.scrollToRight('reset');
             }
 
+            this.calculateViewHeight();
+
             this.$nextTick(() => {
                 this.resizingWindow = false;
             });
@@ -994,9 +1036,6 @@ export default {
         },
         wheelZoom(e) {
             e.preventDefault();
-            if (!this.isPaused) {
-                this.paused(true);
-            }
 
             this.$refs.imageControls.wheelZoom(e);
         },

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

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 @keyframes fade-out {
     from {
         background-color: rgba($colorOk, 0.5);
@@ -137,9 +139,12 @@
         animation-name: fade-out;
         animation-timing-function: ease-in;
         animation-iteration-count: 1;
-        animation-fill-mode: forwards;   
+        animation-fill-mode: forwards;
+        &.no-animation {
+            animation: none;
+        }
     }
-    
+
 
     &__thumbs-wrapper {
         display: flex; // Uses row layout
@@ -161,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 {
@@ -184,10 +183,12 @@
 
 /*************************************** THUMBS */
 .c-thumb {
+    $w: $imageThumbsD;
     display: flex;
     flex-direction: column;
     padding: 4px;
-    width: $imageThumbsD;
+    min-width: $w;
+    width: $w;
 
     &:hover {
         background: $colorThumbHoverBg;
@@ -209,11 +210,19 @@
     }
 }
 
-.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;
+        }
     }
 }
 

src/plugins/imagery/mixins/imageryData.js

@@ -46,7 +46,6 @@ export default {
 
         // kickoff
         this.subscribe();
-        this.requestHistory();
     },
     beforeDestroy() {
         if (this.unsubscribe) {
@@ -169,8 +168,6 @@ export default {
             // splice array to encourage garbage collection
             this.imageHistory.splice(0, this.imageHistory.length);
 
-            // requesting history effectively clears imageHistory array
-            return this.requestHistory();
         },
         timeSystemChange() {
             this.timeSystem = this.timeContext.timeSystem();

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/move/pluginSpec.js

@@ -91,6 +91,7 @@ describe("The Move Action plugin", () => {
     });
 
     describe("when moving an object to a new parent and removing from the old parent", () => {
+        let unObserve;
         beforeEach((done) => {
             openmct.router.path = [];
 
@@ -104,7 +105,7 @@ describe("The Move Action plugin", () => {
                 });
             });
 
-            openmct.objects.observe(parentObject, '*', (newObject) => {
+            unObserve = openmct.objects.observe(parentObject, '*', (newObject) => {
                 done();
             });
 
@@ -113,6 +114,10 @@ describe("The Move Action plugin", () => {
             moveAction.invoke([childObject, parentObject]);
         });
 
+        afterEach(() => {
+            unObserve();
+        });
+
         it("the child object's identifier should be in the new parent's composition", () => {
             let newParentChild = anotherParentObject.composition[0];
             expect(newParentChild).toEqual(childObject.identifier);

src/plugins/notebook/components/NotebookEntry.vue

@@ -28,12 +28,16 @@
     @drop.prevent="dropOnEntry"
 >
     <div class="c-ne__time-and-content">
-        <div class="c-ne__time">
-            <template v-if="entry.createdBy">
-                <span class="c-icon icon-person">{{ entry.createdBy }}</span>
-            </template>
-            <span>{{ createdOnDate }}</span>
-            <span>{{ createdOnTime }}</span>
+        <div class="c-ne__time-and-creator">
+            <span class="c-ne__created-date">{{ createdOnDate }}</span>
+            <span class="c-ne__created-time">{{ createdOnTime }}</span>
+
+            <span
+                v-if="entry.createdBy"
+                class="c-ne__creator"
+            >
+                <span class="icon-person"></span> {{ entry.createdBy }}
+            </span>
         </div>
         <div class="c-ne__content">
             <template v-if="readOnly && result">

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/plan/Plan.vue

@@ -49,7 +49,7 @@
 import * as d3Scale from 'd3-scale';
 import TimelineAxis from "../../ui/components/TimeSystemAxis.vue";
 import SwimLane from "@/ui/components/swim-lane/SwimLane.vue";
-import { getValidatedPlan } from "./util";
+import { getValidatedData } from "./util";
 import Vue from "vue";
 
 const PADDING = 1;
@@ -161,7 +161,7 @@ export default {
             return clientWidth - 200;
         },
         getPlanData(domainObject) {
-            this.planData = getValidatedPlan(domainObject);
+            this.planData = getValidatedData(domainObject);
         },
         updateViewBounds(bounds) {
             if (bounds) {

src/plugins/plan/util.js

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-export function getValidatedPlan(domainObject) {
+export function getValidatedData(domainObject) {
     let sourceMap = domainObject.sourceMap;
     let body = domainObject.selectFile.body;
     let json = {};

src/plugins/plot/MctTicks.vue

@@ -192,7 +192,6 @@ export default {
 
             if (this.axisType === 'yAxis' && this.axis.get('logMode')) {
                 return getLogTicks(range.min, range.max, number, 4);
-                // return getLogTicks2(range.min, range.max, number);
             } else {
                 return ticks(range.min, range.max, number);
             }
@@ -204,6 +203,7 @@ export default {
 
         updateTicks(forceRegeneration = false) {
             const range = this.axis.get('displayRange');
+
             if (!range) {
                 delete this.min;
                 delete this.max;

src/plugins/plot/configuration/YAxisModel.js

@@ -215,6 +215,10 @@ export default class YAxisModel extends Model {
 
             const _range = this.get('displayRange');
 
+            if (!_range) {
+                return;
+            }
+
             if (this.get('logMode')) {
                 _range.min = antisymlog(_range.min, 10);
                 _range.max = antisymlog(_range.max, 10);

src/plugins/plot/stackedPlot/mixins/objectStyles-mixin.js

@@ -132,12 +132,6 @@ export default {
                     }
                 }
             });
-
-            if (this.object && this.object.type === 'conditionWidget' && keys.includes('output')) {
-                this.openmct.objects.mutate(this.object, 'conditionalLabel', styleObj.output);
-            } else {
-                this.openmct.objects.mutate(this.object, 'conditionalLabel', '');
-            }
         }
     }
 };

src/plugins/plot/tickUtils.js

@@ -78,11 +78,6 @@ export function getLogTicks(start, stop, mainTickCount = 8, secondaryTickCount =
     return result;
 }
 
-export function getLogTicks2(start, stop, count = 8) {
-    return ticks(antisymlog(start, 10), antisymlog(stop, 10), count)
-        .map(n => symlog(n, 10));
-}
-
 /**
  * Linear tick generation from d3-array.
  */

src/plugins/plugins.js

@@ -37,7 +37,8 @@ define([
     './URLIndicatorPlugin/URLIndicatorPlugin',
     './telemetryMean/plugin',
     './plot/plugin',
-    './charts/plugin',
+    './charts/bar/plugin',
+    './charts/scatter/plugin',
     './telemetryTable/plugin',
     './staticRootPlugin/plugin',
     './notebook/plugin',
@@ -96,7 +97,8 @@ define([
     URLIndicatorPlugin,
     TelemetryMean,
     PlotPlugin,
-    ChartPlugin,
+    BarChartPlugin,
+    ScatterPlotPlugin,
     TelemetryTablePlugin,
     StaticRootPlugin,
     Notebook,
@@ -172,7 +174,8 @@ define([
 
     plugins.ImageryPlugin = ImageryPlugin;
     plugins.Plot = PlotPlugin.default;
-    plugins.Chart = ChartPlugin.default;
+    plugins.BarChart = BarChartPlugin.default;
+    plugins.ScatterPlot = ScatterPlotPlugin.default;
     plugins.TelemetryTable = TelemetryTablePlugin;
 
     plugins.SummaryWidget = SummaryWidget;

src/plugins/telemetryTable/collections/TableRowCollection.js

@@ -29,10 +29,6 @@ define(
         _,
         EventEmitter
     ) {
-        const LESS_THAN = -1;
-        const EQUAL = 0;
-        const GREATER_THAN = 1;
-
         /**
          * @constructor
          */
@@ -80,10 +76,7 @@ define(
                     this.rows = [];
                 }
 
-                for (let row of rowsToAdd) {
-                    let index = this.sortedIndex(this.rows, row);
-                    this.rows.splice(index, 0, row);
-                }
+                this.sortAndMergeRows(rowsToAdd);
 
                 // we emit filter no matter what to trigger
                 // an update of visible rows
@@ -92,58 +85,85 @@ define(
                 }
             }
 
-            sortedLastIndex(rows, testRow) {
-                return this.sortedIndex(rows, testRow, _.sortedLastIndex);
-            }
+            sortAndMergeRows(rows) {
+                const sortedRowsToAdd = this.sortCollection(rows);
 
-            /**
-             * Finds the correct insertion point for the given row.
-             * Leverages lodash's `sortedIndex` function which implements a binary search.
-             * @private
-             */
-            sortedIndex(rows, testRow, lodashFunction = _.sortedIndexBy) {
                 if (this.rows.length === 0) {
-                    return 0;
+                    this.rows = sortedRowsToAdd;
+
+                    return;
                 }
 
-                const testRowValue = this.getValueForSortColumn(testRow);
-                const firstValue = this.getValueForSortColumn(this.rows[0]);
-                const lastValue = this.getValueForSortColumn(this.rows[this.rows.length - 1]);
+                const firstIncomingRow = sortedRowsToAdd[0];
+                const lastIncomingRow = sortedRowsToAdd[sortedRowsToAdd.length - 1];
+                const firstExistingRow = this.rows[0];
+                const lastExistingRow = this.rows[this.rows.length - 1];
+
+                if (this.firstRowInSortOrder(lastIncomingRow, firstExistingRow)
+                    === lastIncomingRow
+                ) {
+                    this.rows = [...sortedRowsToAdd, ...this.rows];
+                } else if (this.firstRowInSortOrder(lastExistingRow, firstIncomingRow)
+                    === lastExistingRow
+                ) {
+                    this.rows = [...this.rows, ...sortedRowsToAdd];
+                } else {
+                    this.mergeSortedRows(sortedRowsToAdd);
+                }
+            }
+
+            sortCollection(rows) {
+                const sortedRows = _.orderBy(
+                    rows,
+                    row => row.getParsedValue(this.sortOptions.key), this.sortOptions.direction
+                );
+
+                return sortedRows;
+            }
+
+            mergeSortedRows(rows) {
+                const mergedRows = [];
+                let i = 0;
+                let j = 0;
+
+                while (i < this.rows.length && j < rows.length) {
+                    const existingRow = this.rows[i];
+                    const incomingRow = rows[j];
+
+                    if (this.firstRowInSortOrder(existingRow, incomingRow) === existingRow) {
+                        mergedRows.push(existingRow);
+                        i++;
+                    } else {
+                        mergedRows.push(incomingRow);
+                        j++;
+                    }
+                }
+
+                // tail of existing rows is all that is left to merge
+                if (i < this.rows.length) {
+                    for (i; i < this.rows.length; i++) {
+                        mergedRows.push(this.rows[i]);
+                    }
+                }
+
+                // tail of incoming rows is all that is left to merge
+                if (j < rows.length) {
+                    for (j; j < rows.length; j++) {
+                        mergedRows.push(rows[j]);
+                    }
+                }
+
+                this.rows = mergedRows;
+            }
+
+            firstRowInSortOrder(row1, row2) {
+                const val1 = this.getValueForSortColumn(row1);
+                const val2 = this.getValueForSortColumn(row2);
 
                 if (this.sortOptions.direction === 'asc') {
-                    if (testRowValue > lastValue) {
-                        return this.rows.length;
-                    } else if (testRowValue === lastValue) {
-                        // Maintain stable sort
-                        return this.rows.length;
-                    } else if (testRowValue <= firstValue) {
-                        return 0;
-                    } else {
-                        return lodashFunction(rows, testRow, (thisRow) => {
-                            return this.getValueForSortColumn(thisRow);
-                        });
-                    }
+                    return val1 <= val2 ? row1 : row2;
                 } else {
-                    if (testRowValue >= firstValue) {
-                        return 0;
-                    } else if (testRowValue < lastValue) {
-                        return this.rows.length;
-                    } else if (testRowValue === lastValue) {
-                        // Maintain stable sort
-                        return this.rows.length;
-                    } else {
-                        // Use a custom comparison function to support descending sort.
-                        return lodashFunction(rows, testRow, (thisRow) => {
-                            const thisRowValue = this.getValueForSortColumn(thisRow);
-                            if (testRowValue === thisRowValue) {
-                                return EQUAL;
-                            } else if (testRowValue < thisRowValue) {
-                                return LESS_THAN;
-                            } else {
-                                return GREATER_THAN;
-                            }
-                        });
-                    }
+                    return val1 >= val2 ? row1 : row2;
                 }
             }
 
@@ -205,8 +225,9 @@ define(
             sortBy(sortOptions) {
                 if (arguments.length > 0) {
                     this.sortOptions = sortOptions;
+                    performance.mark('table:row:sort:start');
                     this.rows = _.orderBy(this.rows, (row) => row.getParsedValue(sortOptions.key), sortOptions.direction);
-
+                    performance.mark('table:row:sort:stop');
                     this.emit('sort');
                 }
 

src/plugins/telemetryTable/components/table.vue

@@ -613,6 +613,7 @@ export default {
             this.calculateScrollbarWidth();
         },
         sortBy(columnKey) {
+            performance.mark('table:sort');
             // If sorting by the same column, flip the sort direction.
             if (this.sortOptions.key === columnKey) {
                 if (this.sortOptions.direction === 'asc') {
@@ -669,6 +670,7 @@ export default {
             this.setHeight();
         },
         rowsAdded(rows) {
+            performance.mark('row:added');
             this.setHeight();
 
             let sizingRow;
@@ -690,6 +692,7 @@ export default {
             this.updateVisibleRows();
         },
         rowsRemoved(rows) {
+            performance.mark('row:removed');
             this.setHeight();
             this.updateVisibleRows();
         },

src/plugins/timeline/TimelineViewLayout.vue

@@ -61,7 +61,7 @@
 import TimelineObjectView from './TimelineObjectView.vue';
 import TimelineAxis from '../../ui/components/TimeSystemAxis.vue';
 import SwimLane from "@/ui/components/swim-lane/SwimLane.vue";
-import { getValidatedPlan } from "../plan/util";
+import { getValidatedData } from "../plan/util";
 
 const unknownObjectType = {
     definition: {
@@ -110,7 +110,7 @@ export default {
             let objectPath = [domainObject].concat(this.objectPath.slice());
             let rowCount = 0;
             if (domainObject.type === 'plan') {
-                rowCount = Object.keys(getValidatedPlan(domainObject)).length;
+                rowCount = Object.keys(getValidatedData(domainObject)).length;
             }
 
             let height = domainObject.type === 'telemetry.plot.stacked' ? `${domainObject.composition.length * 100}px` : '100px';

src/plugins/timelist/Timelist.vue

@@ -35,7 +35,7 @@
 </template>
 
 <script>
-import {getValidatedPlan} from "../plan/util";
+import {getValidatedData} from "../plan/util";
 import ListView from '../../ui/components/List/ListView.vue';
 import {getPreciseDuration} from "../../utils/duration";
 import ticker from 'utils/clock/Ticker';
@@ -164,7 +164,7 @@ export default {
             }
         },
         getPlanData(domainObject) {
-            this.planData = getValidatedPlan(domainObject);
+            this.planData = getValidatedData(domainObject);
         },
         setViewBounds() {
             const pastEventsIndex = this.domainObject.configuration.pastEventsIndex;

src/styles/_constants.scss

@@ -264,6 +264,7 @@ $glyph-icon-bar-chart: '\eb2c';
 $glyph-icon-map: '\eb2d';
 $glyph-icon-plan: '\eb2e';
 $glyph-icon-timelist: '\eb2f';
+$glyph-icon-plot-scatter: '\eb30';
 
 /************************** GLYPHS AS DATA URI */
 // Only objects have been converted, for use in Create menu and folder views
@@ -271,44 +272,41 @@ $bg-icon-alert-rect: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://
 $bg-icon-alert-triangle: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath d='M499.1 424.4L287.8 54.6c-17.5-30.6-46-30.6-63.5 0L12.9 424.4C-4.6 455 9.9 480 45.1 480h421.7c35.3 0 49.8-25 32.3-55.6zM288 448h-64v-64h64v64zm10.9-192L280 352h-48l-18.9-96V128H299v128z' fill='%23000000'/%3e%3c/svg%3e");
 $bg-icon-bell: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cg fill='%23000000'%3e%3cpath d='M256 512c53 0 96-43 96-96H160c0 53 43 96 96 96zM448 224v-32C448 86 362 0 256 0S64 86 64 192v32c0 35.3-28.7 64-64 64v64h512v-64c-35.3 0-64-28.7-64-64z'/%3e%3c/g%3e%3c/svg%3e");
 $bg-icon-info: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath d='M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256 256-114.6 256-256S397.4 0 256 0zm0 64c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zm96 352H160v-64h32V224h128v128h32v64z' fill='%23000000'/%3e%3c/svg%3e");
-$bg-icon-activity: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M288 32H160l160 160H174.872C152.74 153.742 111.377 128 64 128H0v256h64c47.377 0 88.74-25.742 110.872-64H320L160 480h128l224-224L288 32z'/%3e%3c/svg%3e");
-$bg-icon-activity-mode: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M256 0C148.6 0 56.6 66.2 18.6 160H64c28.4 0 54 12.4 71.5 32H256l-96-96h128l160 160-160 160H160l96-96H135.5C118 339.6 92.4 352 64 352H18.6c38 93.8 129.9 160 237.4 160 141.4 0 256-114.6 256-256S397.4 0 256 0z'/%3e%3c/svg%3e");
-$bg-icon-autoflow-tabular: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M96 0C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h32V0H96zM192 0h128v512H192zM416 0h-32v352h128V96c0-52.8-43.2-96-96-96z'/%3e%3c/svg%3e");
 $bg-icon-plus: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M480,192H320V32A32.1,32.1,0,0,0,288,0H224a32.1,32.1,0,0,0-32,32V192H32A32.1,32.1,0,0,0,0,224v64a32.1,32.1,0,0,0,32,32H192V480a32.1,32.1,0,0,0,32,32h64a32.1,32.1,0,0,0,32-32V320H480a32.1,32.1,0,0,0,32-32V224A32.1,32.1,0,0,0,480,192Z' transform='translate(0)'/%3e%3c/svg%3e");
 $bg-icon-grippy-ew: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath d='M416 0v512h-64V0zM288 0v512h-64V0zM160 0v512H96V0z'/%3e%3c/svg%3e");
 $bg-icon-chain-links: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath d='M479.2 32.8C457.3 10.9 428.7 0 400 0c-28.7 0-57.3 10.9-79.2 32.8l-64 64c-37 37-42.7 93.5-17 136.5l-6.4 6.4C215.7 229.3 195.9 224 176 224c-28.7 0-57.3 10.9-79.2 32.8l-64 64c-43.7 43.7-43.7 114.7 0 158.4C54.7 501.1 83.3 512 112 512c28.7 0 57.3-10.9 79.2-32.8l64-64c37-37 42.7-93.5 17-136.5l6.4-6.4c17.6 10.5 37.5 15.8 57.3 15.8 28.7 0 57.3-10.9 79.2-32.8l64-64c43.8-43.8 43.8-114.8.1-158.5zM209.9 369.9l-64 64c-9 9.1-21.1 14.1-33.9 14.1-12.8 0-24.9-5-33.9-14.1-18.7-18.7-18.7-49.2 0-67.9l64-64c9.1-9.1 21.1-14.1 33.9-14.1 2.8 0 5.6.3 8.4.7l-27.8 27.8c-5.2 5.2-8.1 12.1-8.1 19.4s2.9 14.3 8.1 19.4c5.2 5.2 12.1 8.1 19.4 8.1s14.3-2.9 19.4-8.1l27.8-27.8c2.7 15.2-1.8 31.1-13.3 42.5zm224-224l-64 64c-9 9.1-21.1 14.1-33.9 14.1-2.8 0-5.6-.3-8.4-.7l27.8-27.8c5.2-5.2 8.1-12.1 8.1-19.4s-2.9-14.3-8.1-19.4c-5.2-5.2-12.1-8.1-19.4-8.1s-14.3 2.9-19.4 8.1l-27.8 27.8c-2.6-14.9 1.8-30.8 13.3-42.3l64-64C375.1 69 387.2 64 400 64s24.9 5 33.9 14.1c18.8 18.7 18.8 49.1 0 67.8z'/%3e%3c/svg%3e");
-$bg-icon-clock: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256 256-114.6 256-256S397.4 0 256 0zm135 345c-6.4 11.1-18.3 18-31.2 18-6.3 0-12.5-1.7-18-4.8l-110.9-64-.1-.1c-.4-.2-.8-.5-1.2-.7l-.4-.3-.9-.6-.6-.5-.6-.5-.9-.7-.3-.3c-.4-.3-.7-.6-1.1-.9-2.5-2.3-4.7-5-6.5-7.9-.1-.2-.3-.5-.4-.7s-.3-.5-.4-.7c-1.6-3-2.9-6.2-3.6-9.6v-.1c-.1-.5-.2-.9-.3-1.4 0-.1 0-.3-.1-.4-.1-.3-.1-.7-.1-1.1s-.1-.5-.1-.8 0-.5-.1-.8-.1-.8-.1-1.1v-.5-1.4V81c0-19.9 16.1-36 36-36s36 16.1 36 36v161.2l92.9 53.6c17.1 10 22.9 32 13 49.2z'/%3e%3c/svg%3e");
-$bg-icon-database: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M256 256C114.615 256 0 213.019 0 160v256c0 53.019 114.615 96 256 96s256-42.981 256-96V160c0 53.019-114.615 96-256 96z'/%3e%3cellipse fill='%23000000' cx='256' cy='96' rx='256' ry='96'/%3e%3c/svg%3e");
-$bg-icon-database-query: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M341.76 409.643C316.369 423.871 287.118 432 256 432c-97.047 0-176-78.953-176-176S158.953 80 256 80s176 78.953 176 176c0 31.118-8.129 60.369-22.357 85.76l95.846 95.846C509.747 430.661 512 423.429 512 416V96c0-53.019-114.615-96-256-96S0 42.981 0 96v320c0 53.019 114.615 96 256 96 63.055 0 120.774-8.554 165.388-22.73l-79.628-79.627z'/%3e%3cpath fill='%23000000' d='M176 256c0 44.112 35.888 80 80 80s80-35.888 80-80-35.888-80-80-80-80 35.888-80 80z'/%3e%3c/svg%3e");
-$bg-icon-dataset: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M448 96H288l-54.6-54.6-18.7-18.7C202.2 10.2 177.6 0 160 0H32C14.4 0 0 14.4 0 32v192c0-35.2 28.8-64 64-64h384c35.2 0 64 28.8 64 64v-64c0-35.2-28.8-64-64-64zM448 224H64c-35.2 0-64 28.8-64 64v160c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V288c0-35.2-28.8-64-64-64zM160 448H96V288h64v160zm128 0h-64V288h64v160zm128 0h-64V288h64v160z'/%3e%3c/svg%3e");
-$bg-icon-datatable: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M256 256C114.6 256 0 213 0 160v256c0 53 114.6 96 256 96s256-43 256-96V160c0 53-114.6 96-256 96zm192 31.5v128c-18.3 7.8-39.9 14.4-64 19.7v-128c24.1-5.3 45.7-11.9 64-19.7zm-320 19.7v128c-24.1-5.2-45.7-11.9-64-19.7v-128c18.3 7.8 39.9 14.4 64 19.7zM192 445V317c20.5 2 41.9 3 64 3s43.5-1.1 64-3v128c-20.5 2-41.9 3-64 3s-43.5-1.1-64-3z'/%3e%3cellipse fill='%23000000' cx='256' cy='96' rx='256' ry='96'/%3e%3c/svg%3e");
-$bg-icon-dictionary: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M416 320c52.8 0 96-43.2 96-96V96c0-52.8-43.2-96-96-96v160l-64-32-64 32V0H96C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h320c52.8 0 96-43.2 96-96v-96c0 52.8-43.2 96-96 96H96v-96h320z'/%3e%3c/svg%3e");
-$bg-icon-folder: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M448 96H288l-54.6-54.6-18.7-18.7C202.2 10.2 177.6 0 160 0H32C14.4 0 0 14.4 0 32v192c0-35.2 28.8-64 64-64h384c35.2 0 64 28.8 64 64v-64c0-35.2-28.8-64-64-64zM448 224H64c-35.2 0-64 28.8-64 64v160c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V288c0-35.2-28.8-64-64-64z'/%3e%3c/svg%3e");
-$bg-icon-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M448 0H64C28.8 0 0 28.8 0 64v384c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V64c0-35.2-28.8-64-64-64zm0 448H64V64h384v384z'/%3e%3cpath fill='%23000000' d='M160 128l-64 64v224h320V256l-64-64-64 64z'/%3e%3c/svg%3e");
-$bg-icon-layout: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M224 0H96C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h128V0zM416 0H288v288.832h224V96c0-52.8-43.2-96-96-96zM288 512h128c52.8 0 96-43.2 96-96v-64.832H288V512z'/%3e%3c/svg%3e");
-$bg-icon-object: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='none' d='M256 96L76.8 208 256 320l179.2-112z'/%3e%3cpath fill='%23000000' d='M256 512l256-160V160L255.99 0 0 160v192l256 160zm0-416l179.2 112L256 320 76.8 208 256 96z'/%3e%3c/svg%3e");
-$bg-icon-object-unknown: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M255-1L-1 159v192l256 160 256-160V159L255-1zm37.7 430.6c-10.6 10.4-23 15.4-38 15.4-15.6 0-28.1-4.9-38.1-14.8-10-10-14.8-22.4-14.8-38.1 0-15.2 5.1-27.6 15.5-38.1s22.6-15.6 37.4-15.6c14.8 0 27.1 5.2 37.8 16 10.7 10.8 15.9 23.2 15.9 38-.1 14.5-5.4 27-15.7 37.2zm26.4-156.3c-11.8 5.9-18.7 11-21.7 16.2-1.8 3.1-3 7.4-3.7 13.4v20.5H213v-22.1c0-20.1 2.2-34.9 6.5-44 4-8.6 11.3-15.1 22.4-20l17.4-7.7c16-7.1 24.1-17.6 24.1-31.4 0-8-3-15.2-8.6-20.9-5.6-5.6-12.8-8.6-20.8-8.6-12 0-27.2 5-31.4 28.7l-1.1 6.1H148l.7-8.1c2-22.3 8.5-41.2 19.4-56.1 9.8-13.5 22.8-24.3 38.5-32.3 15.7-8 32.3-12 49.1-12 30.3 0 55.1 9.7 75.7 29.8 20.6 20 30.6 44 30.6 73.6 0 35.4-14.4 60.7-42.9 74.9z'/%3e%3c/svg%3e");
-$bg-icon-packet: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='none' d='M256 96L76.8 208 256 320l179.2-112z'/%3e%3cpath fill='%23000000' d='M256 0L0 160v256c0 52.8 43.2 96 96 96h320c52.8 0 96-43.2 96-96V160L256 0zm0 96l179.2 112L256 320 76.8 208 256 96z'/%3e%3c/svg%3e");
-$bg-icon-page: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M352 256c-52.8 0-96-43.2-96-96V0H96C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h320c52.8 0 96-43.2 96-96V256H352z'/%3e%3cpath fill='%23000000' d='M384 192h128L320 0v128c0 35.2 28.8 64 64 64z'/%3e%3c/svg%3e");
-$bg-icon-plot-overlay: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M415 0H97C43.65 0 0 43.65 0 97v203.41c7.09 9.32 12.83 14.17 16 15.42 7.14-2.81 27.22-23.77 46.48-73C83.71 188.64 120.64 124 176 124c26.2 0 50.71 14.58 72.85 43.34 18.67 24.25 32.42 54.46 40.67 75.54 19.26 49.19 39.34 70.15 46.48 73 7.14-2.81 27.22-23.77 46.48-73C403.71 188.64 440.64 124 496 124a69.55 69.55 0 0 1 16 1.87V97c0-53.35-43.65-97-97-97z'/%3e%3cpath fill='%23000000' d='M496 196.17c-7.14 2.81-27.22 23.76-46.48 73C428.29 323.36 391.36 388 336 388c-26.2 0-50.71-14.58-72.85-43.34-18.67-24.25-32.42-54.46-40.67-75.54-19.26-49.19-39.34-70.15-46.48-73-7.14 2.81-27.22 23.76-46.48 73C108.29 323.36 71.36 388 16 388a69.56 69.56 0 0 1-16-1.87V415c0 53.35 43.65 97 97 97h318c53.35 0 97-43.65 97-97V211.59c-7.09-9.32-12.83-14.17-16-15.42z'/%3e%3c/svg%3e");
-$bg-icon-plot-stacked: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M44.8 156c12.49 0 24.48-13.26 42.76-35.09 22.71-27.14 51-60.91 98-60.91 22.32 0 43.31 7.73 62.4 23 14.34 11.45 25.58 25.21 36.46 38.53C303.63 145 314 156 326.4 156H512V97c0-53.35-43.65-97-97-97H97C43.65 0 0 43.65 0 97v59h44.8z'/%3e%3cpath fill='%23000000' d='M264.75 205.2c-14.12-11.32-25.26-25-36-38.14C211 145.32 199.37 132 185.6 132c-12.53 0-24.54 13.27-42.83 35.12-22.7 27.12-51 60.88-98 60.88H0v56h185.6c22 0 42.77 7.67 61.65 22.8 14.12 11.32 25.26 25 36 38.14C301 366.68 312.63 380 326.4 380c12.53 0 24.54-13.27 42.83-35.12 22.7-27.12 51-60.88 98-60.88H512v-56H326.4c-22.03 0-42.77-7.67-61.65-22.8z'/%3e%3cpath fill='%23000000' d='M467.2 356c-12.49 0-24.48 13.26-42.76 35.09-22.71 27.14-51 60.91-98 60.91-22.32 0-43.31-7.73-62.4-23-14.34-11.45-25.58-25.21-36.46-38.53C208.37 367 198 356 185.6 356H0v59c0 53.35 43.65 97 97 97h318c53.35 0 97-43.65 97-97v-59h-44.8z'/%3e%3c/svg%3e");
-$bg-icon-session: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M317.8 262.2c3.3 2.1 6.6 4.3 9.6 6.8l60.2 48.2c14.8 11.9 41.9 11.9 56.7 0l67.6-54c.1-2.4.1-4.7.1-7.1 0-26.1-3.9-51.2-11.1-74.9L423.5 243c-29.1 23.3-70.1 29.6-105.7 19.2zM124.3 317.1l60.2-48.2c29-23.2 70-29.6 105.6-19.2-3.3-2.1-6.6-4.3-9.6-6.8l-60.2-48.2c-14.8-11.9-41.9-11.9-56.7 0L103.5 243c-20 16-45.7 24-71.5 24-10.8 0-21.5-1.4-31.9-4.2v.8c2.5 1.7 5 3.4 7.3 5.3l60.2 48.2c14.9 11.9 41.9 11.9 56.7 0z'/%3e%3cpath fill='%23000000' d='M60.3 189.1l60.2-48.2c40.1-32.1 102.8-32.1 142.9 0l60.2 48.2c14.8 11.9 41.9 11.9 56.7 0l90.5-72.4C425.2 46.5 346 0 256 0 136.7 0 36.4 81.6 8 192.1c15.4 8.8 38.9 7.8 52.3-3zM344.5 371l-60.2-48.2c-14.8-11.9-41.9-11.9-56.7 0L167.5 371c-20 16-45.7 24-71.5 24-23.9 0-47.7-6.9-67.1-20.7C71.7 456.1 157.3 512 256 512s184.3-55.9 227.1-137.7c-40.2 28.7-99.9 27.6-138.6-3.3z'/%3e%3c/svg%3e");
-$bg-icon-tabular: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M448 0H64C28.8 0 0 28.8 0 64v384c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V64c0-35.2-28.8-64-64-64zM320 224H192v-96h128v96zm-128 32h128v96H192v-96zm-32 96H32v-96h128v96zm0-224v96H32v-96h128zM64 480c-8.5 0-16.5-3.3-22.6-9.4S32 456.5 32 448v-64h128v96H64zm128 0v-96h128v96H192zm288-32c0 8.5-3.3 16.5-9.4 22.6S456.5 480 448 480h-96v-96h128v64zm0-96H352v-96h128v96zm0-128H352v-96h128v96z'/%3e%3c/svg%3e");
-$bg-icon-tabular-lad: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M448 0H64C28.7.1.1 28.7 0 64v384c.1 35.3 28.7 63.9 64 64h384c35.3-.1 63.9-28.7 64-64V64c-.1-35.3-28.7-63.9-64-64zM32 128h128v96H32v-96zm0 128h128v96H32v-96zm32 224c-17.6-.1-31.9-14.4-32-32v-64h128v96H64zm128 0v-96h128v96H192zm288-32c-.1 17.6-14.4 31.9-32 32h-96v-96h128v64zm0-192v96H192v-96h32v-32h-32v-96h288v96h-32v32h32z'/%3e%3cpath fill='%23000000' d='M391.2 273.7L336 246.1V160c0-8.8-7.2-16-16-16s-16 7.2-16 16v105.9l72.8 36.4c7.9 4 17.5.8 21.5-7.2 4-7.8.8-17.5-7.1-21.4z'/%3e%3c/svg%3e");
-$bg-icon-tabular-lad-set: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M64 384V96c-35.3.1-63.9 28.7-64 64v288c.1 35.3 28.7 63.9 64 64h288c35.3-.1 63.9-28.7 64-64H128c-35.3-.1-63.9-28.7-64-64z'/%3e%3cpath fill='%23000000' d='M448 0H160c-35.3.1-63.9 28.7-64 64v288c.1 35.3 28.7 63.9 64 64h288c35.3-.1 63.9-28.7 64-64V64c-.1-35.3-28.7-63.9-64-64zM128 96h96v64h-96V96zm0 96h96v96h-96v-96zm32 192c-17.6-.1-31.9-14.4-32-32v-32h96v64h-64zm96 0v-64h96v64h-96zm224-32c-.1 17.6-14.4 31.9-32 32h-64v-64h96v32zm0-64H256V96h224v192z'/%3e%3cpath fill='%23000000' d='M416 240c8.8 0 16-7.2 16-16 0-6.9-4.4-13-10.9-15.2L384 196.5V144c0-8.8-7.2-16-16-16s-16 7.2-16 16v75.5l58.9 19.6c1.7.6 3.4.9 5.1.9z'/%3e%3c/svg%3e");
-$bg-icon-tabular-realtime: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M0 64v384c0 35.2 28.8 64 64 64h288c35.2 0 64-28.8 64-64V340c-19.8 7.8-41.4 12-64 12-35.4 0-68.4-10.5-96-28.6V352h-96v-96h35.3c-5.2-10.1-9.4-20.8-12.6-32H160v-96h22.7C203.6 54.2 271.6 0 352 0H64C28.8 0 0 28.8 0 64zm288 320h96v64c0 8.5-3.3 16.5-9.4 22.6S360.5 480 352 480h-64v-96zm-160 96H64c-8.5 0-16.5-3.3-22.6-9.4S32 456.5 32 448v-64h96v96zm0-128H32v-96h96v96zm32 32h96v96h-96v-96zm-32-160H32v-96h96v96z'/%3e%3cpath fill='%23000000' d='M192 160c0 88.4 71.6 160 160 160s160-71.6 160-160S440.4 0 352 0 192 71.6 192 160zm49.7 39.8L227 187.5c-1.4-6.4-2.3-12.9-2.7-19.6 15.1-.1 30.1-5 41.9-14.8l39.6-33c7.5-6.2 21.1-6.2 28.6 0l39.6 33c2.8 2.3 5.7 4.3 8.8 6.1-23-11.7-52.7-9.2-72.8 7.5l-39.6 33c-7.6 6.3-21.2 6.3-28.7.1zM352 288c-36.7 0-69.7-15.4-93-40.1 14.2-.6 28.1-5.5 39.2-14.7l39.6-33c7.5-6.2 21.1-6.2 28.6 0l39.6 33c11 9.2 25 14.1 39.2 14.7-23.5 24.7-56.5 40.1-93.2 40.1zm125.9-151.3c1.4 7.5 2.1 15.3 2.1 23.3 0 9.4-1 18.6-3 27.5l-14.7 12.3c-7.5 6.2-21.1 6.2-28.6 0l-39.6-33c-2.8-2.3-5.7-4.3-8.8-6.1 23 11.7 52.7 9.2 72.8-7.5l19.8-16.5zM352 32c46.4 0 87.1 24.7 109.5 61.7l-31.2 26c-7.5 6.2-21.1 6.2-28.6 0l-39.6-33c-23.6-19.7-60.6-19.7-84.3 0l-39.6 33c-2.5 2.1-5.7 3.5-9.1 4.2C244.7 70.8 293.8 32 352 32z'/%3e%3c/svg%3e");
-$bg-icon-tabular-scrolling: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M32 0C14.4 0 0 14.4 0 32v96h224V0H32zM512 128V32c0-17.6-14.4-32-32-32H288v128h224zM0 192v96c0 17.6 14.4 32 32 32h192V192H0zM480 320c17.6 0 32-14.4 32-32v-96H288v128h192zM256 512L128 384h256z'/%3e%3c/svg%3e");
-$bg-icon-telemetry: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M16 315.83c7.14-2.81 27.22-23.77 46.48-73C83.71 188.64 120.64 124 176 124c26.2 0 50.71 14.58 72.85 43.34 18.67 24.25 32.42 54.46 40.67 75.54 19.26 49.19 39.34 70.15 46.48 73 7.14-2.81 27.22-23.77 46.48-73 18.7-47.75 49.57-103.57 94.47-116.23A255.87 255.87 0 0 0 256 0C114.62 0 0 114.62 0 256a257.18 257.18 0 0 0 5 50.52c4.77 5.39 8.61 8.37 11 9.31z'/%3e%3cpath fill='%23000000' d='M496 196.17c-7.14 2.81-27.22 23.76-46.48 73C428.29 323.36 391.36 388 336 388c-26.2 0-50.71-14.58-72.85-43.34-18.67-24.25-32.42-54.46-40.67-75.54-19.26-49.19-39.34-70.15-46.48-73-7.14 2.81-27.22 23.76-46.48 73-18.7 47.75-49.57 103.57-94.47 116.23A255.87 255.87 0 0 0 256 512c141.38 0 256-114.62 256-256a257.18 257.18 0 0 0-5-50.52c-4.77-5.39-8.61-8.37-11-9.31z'/%3e%3c/svg%3e");
+$bg-icon-clock: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M288 32H160l160 160H174.872C152.74 153.742 111.377 128 64 128H0v256h64c47.377 0 88.74-25.742 110.872-64H320L160 480h128l224-224L288 32z'/%3e%3c/svg%3e");
+$bg-icon-database: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M256 0C148.6 0 56.6 66.2 18.6 160H64c28.4 0 54 12.4 71.5 32H256l-96-96h128l160 160-160 160H160l96-96H135.5C118 339.6 92.4 352 64 352H18.6c38 93.8 129.9 160 237.4 160 141.4 0 256-114.6 256-256S397.4 0 256 0z'/%3e%3c/svg%3e");
+$bg-icon-database-query: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M96 0C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h32V0H96zM192 0h128v512H192zM416 0h-32v352h128V96c0-52.8-43.2-96-96-96z'/%3e%3c/svg%3e");
+$bg-icon-dataset: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256 256-114.6 256-256S397.4 0 256 0zm135 345c-6.4 11.1-18.3 18-31.2 18-6.3 0-12.5-1.7-18-4.8l-110.9-64-.1-.1c-.4-.2-.8-.5-1.2-.7l-.4-.3-.9-.6-.6-.5-.6-.5-.9-.7-.3-.3c-.4-.3-.7-.6-1.1-.9-2.5-2.3-4.7-5-6.5-7.9-.1-.2-.3-.5-.4-.7s-.3-.5-.4-.7c-1.6-3-2.9-6.2-3.6-9.6v-.1c-.1-.5-.2-.9-.3-1.4 0-.1 0-.3-.1-.4-.1-.3-.1-.7-.1-1.1s-.1-.5-.1-.8 0-.5-.1-.8-.1-.8-.1-1.1v-.5-1.4V81c0-19.9 16.1-36 36-36s36 16.1 36 36v161.2l92.9 53.6c17.1 10 22.9 32 13 49.2z'/%3e%3c/svg%3e");
+$bg-icon-datatable: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M256 256C114.615 256 0 213.019 0 160v256c0 53.019 114.615 96 256 96s256-42.981 256-96V160c0 53.019-114.615 96-256 96z'/%3e%3cellipse fill='%23000000' cx='256' cy='96' rx='256' ry='96'/%3e%3c/svg%3e");
+$bg-icon-dictionary: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M341.76 409.643C316.369 423.871 287.118 432 256 432c-97.047 0-176-78.953-176-176S158.953 80 256 80s176 78.953 176 176c0 31.118-8.129 60.369-22.357 85.76l95.846 95.846C509.747 430.661 512 423.429 512 416V96c0-53.019-114.615-96-256-96S0 42.981 0 96v320c0 53.019 114.615 96 256 96 63.055 0 120.774-8.554 165.388-22.73l-79.628-79.627z'/%3e%3cpath fill='%23000000' d='M176 256c0 44.112 35.888 80 80 80s80-35.888 80-80-35.888-80-80-80-80 35.888-80 80z'/%3e%3c/svg%3e");
+$bg-icon-folder: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M448 96H288l-54.6-54.6-18.7-18.7C202.2 10.2 177.6 0 160 0H32C14.4 0 0 14.4 0 32v192c0-35.2 28.8-64 64-64h384c35.2 0 64 28.8 64 64v-64c0-35.2-28.8-64-64-64zM448 224H64c-35.2 0-64 28.8-64 64v160c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V288c0-35.2-28.8-64-64-64zM160 448H96V288h64v160zm128 0h-64V288h64v160zm128 0h-64V288h64v160z'/%3e%3c/svg%3e");
+$bg-icon-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M256 256C114.6 256 0 213 0 160v256c0 53 114.6 96 256 96s256-43 256-96V160c0 53-114.6 96-256 96zm192 31.5v128c-18.3 7.8-39.9 14.4-64 19.7v-128c24.1-5.3 45.7-11.9 64-19.7zm-320 19.7v128c-24.1-5.2-45.7-11.9-64-19.7v-128c18.3 7.8 39.9 14.4 64 19.7zM192 445V317c20.5 2 41.9 3 64 3s43.5-1.1 64-3v128c-20.5 2-41.9 3-64 3s-43.5-1.1-64-3z'/%3e%3cellipse fill='%23000000' cx='256' cy='96' rx='256' ry='96'/%3e%3c/svg%3e");
+$bg-icon-layout: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M416 320c52.8 0 96-43.2 96-96V96c0-52.8-43.2-96-96-96v160l-64-32-64 32V0H96C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h320c52.8 0 96-43.2 96-96v-96c0 52.8-43.2 96-96 96H96v-96h320z'/%3e%3c/svg%3e");
+$bg-icon-object: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M448 96H288l-54.6-54.6-18.7-18.7C202.2 10.2 177.6 0 160 0H32C14.4 0 0 14.4 0 32v192c0-35.2 28.8-64 64-64h384c35.2 0 64 28.8 64 64v-64c0-35.2-28.8-64-64-64zM448 224H64c-35.2 0-64 28.8-64 64v160c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V288c0-35.2-28.8-64-64-64z'/%3e%3c/svg%3e");
+$bg-icon-object-unknown: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M448 0H64C28.8 0 0 28.8 0 64v384c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V64c0-35.2-28.8-64-64-64zm0 448H64V64h384v384z'/%3e%3cpath fill='%23000000' d='M160 128l-64 64v224h320V256l-64-64-64 64z'/%3e%3c/svg%3e");
+$bg-icon-packet: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M224 0H96C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h128V0zM416 0H288v288.832h224V96c0-52.8-43.2-96-96-96zM288 512h128c52.8 0 96-43.2 96-96v-64.832H288V512z'/%3e%3c/svg%3e");
+$bg-icon-page: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='none' d='M256 96L76.8 208 256 320l179.2-112z'/%3e%3cpath fill='%23000000' d='M256 512l256-160V160L255.99 0 0 160v192l256 160zm0-416l179.2 112L256 320 76.8 208 256 96z'/%3e%3c/svg%3e");
+$bg-icon-plot-overlay: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M255-1L-1 159v192l256 160 256-160V159L255-1zm37.7 430.6c-10.6 10.4-23 15.4-38 15.4-15.6 0-28.1-4.9-38.1-14.8-10-10-14.8-22.4-14.8-38.1 0-15.2 5.1-27.6 15.5-38.1s22.6-15.6 37.4-15.6c14.8 0 27.1 5.2 37.8 16 10.7 10.8 15.9 23.2 15.9 38-.1 14.5-5.4 27-15.7 37.2zm26.4-156.3c-11.8 5.9-18.7 11-21.7 16.2-1.8 3.1-3 7.4-3.7 13.4v20.5H213v-22.1c0-20.1 2.2-34.9 6.5-44 4-8.6 11.3-15.1 22.4-20l17.4-7.7c16-7.1 24.1-17.6 24.1-31.4 0-8-3-15.2-8.6-20.9-5.6-5.6-12.8-8.6-20.8-8.6-12 0-27.2 5-31.4 28.7l-1.1 6.1H148l.7-8.1c2-22.3 8.5-41.2 19.4-56.1 9.8-13.5 22.8-24.3 38.5-32.3 15.7-8 32.3-12 49.1-12 30.3 0 55.1 9.7 75.7 29.8 20.6 20 30.6 44 30.6 73.6 0 35.4-14.4 60.7-42.9 74.9z'/%3e%3c/svg%3e");
+$bg-icon-plot-stacked: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='none' d='M256 96L76.8 208 256 320l179.2-112z'/%3e%3cpath fill='%23000000' d='M256 0L0 160v256c0 52.8 43.2 96 96 96h320c52.8 0 96-43.2 96-96V160L256 0zm0 96l179.2 112L256 320 76.8 208 256 96z'/%3e%3c/svg%3e");
+$bg-icon-session: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M352 256c-52.8 0-96-43.2-96-96V0H96C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h320c52.8 0 96-43.2 96-96V256H352z'/%3e%3cpath fill='%23000000' d='M384 192h128L320 0v128c0 35.2 28.8 64 64 64z'/%3e%3c/svg%3e");
+$bg-icon-tabular: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M415 0H97C43.65 0 0 43.65 0 97v203.41c7.09 9.32 12.83 14.17 16 15.42 7.14-2.81 27.22-23.77 46.48-73C83.71 188.64 120.64 124 176 124c26.2 0 50.71 14.58 72.85 43.34 18.67 24.25 32.42 54.46 40.67 75.54 19.26 49.19 39.34 70.15 46.48 73 7.14-2.81 27.22-23.77 46.48-73C403.71 188.64 440.64 124 496 124a69.55 69.55 0 0 1 16 1.87V97c0-53.35-43.65-97-97-97z'/%3e%3cpath fill='%23000000' d='M496 196.17c-7.14 2.81-27.22 23.76-46.48 73C428.29 323.36 391.36 388 336 388c-26.2 0-50.71-14.58-72.85-43.34-18.67-24.25-32.42-54.46-40.67-75.54-19.26-49.19-39.34-70.15-46.48-73-7.14 2.81-27.22 23.76-46.48 73C108.29 323.36 71.36 388 16 388a69.56 69.56 0 0 1-16-1.87V415c0 53.35 43.65 97 97 97h318c53.35 0 97-43.65 97-97V211.59c-7.09-9.32-12.83-14.17-16-15.42z'/%3e%3c/svg%3e");
+$bg-icon-tabular-lad: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M44.8 156c12.49 0 24.48-13.26 42.76-35.09 22.71-27.14 51-60.91 98-60.91 22.32 0 43.31 7.73 62.4 23 14.34 11.45 25.58 25.21 36.46 38.53C303.63 145 314 156 326.4 156H512V97c0-53.35-43.65-97-97-97H97C43.65 0 0 43.65 0 97v59h44.8z'/%3e%3cpath fill='%23000000' d='M264.75 205.2c-14.12-11.32-25.26-25-36-38.14C211 145.32 199.37 132 185.6 132c-12.53 0-24.54 13.27-42.83 35.12-22.7 27.12-51 60.88-98 60.88H0v56h185.6c22 0 42.77 7.67 61.65 22.8 14.12 11.32 25.26 25 36 38.14C301 366.68 312.63 380 326.4 380c12.53 0 24.54-13.27 42.83-35.12 22.7-27.12 51-60.88 98-60.88H512v-56H326.4c-22.03 0-42.77-7.67-61.65-22.8z'/%3e%3cpath fill='%23000000' d='M467.2 356c-12.49 0-24.48 13.26-42.76 35.09-22.71 27.14-51 60.91-98 60.91-22.32 0-43.31-7.73-62.4-23-14.34-11.45-25.58-25.21-36.46-38.53C208.37 367 198 356 185.6 356H0v59c0 53.35 43.65 97 97 97h318c53.35 0 97-43.65 97-97v-59h-44.8z'/%3e%3c/svg%3e");
+$bg-icon-tabular-lad-set: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M317.8 262.2c3.3 2.1 6.6 4.3 9.6 6.8l60.2 48.2c14.8 11.9 41.9 11.9 56.7 0l67.6-54c.1-2.4.1-4.7.1-7.1 0-26.1-3.9-51.2-11.1-74.9L423.5 243c-29.1 23.3-70.1 29.6-105.7 19.2zM124.3 317.1l60.2-48.2c29-23.2 70-29.6 105.6-19.2-3.3-2.1-6.6-4.3-9.6-6.8l-60.2-48.2c-14.8-11.9-41.9-11.9-56.7 0L103.5 243c-20 16-45.7 24-71.5 24-10.8 0-21.5-1.4-31.9-4.2v.8c2.5 1.7 5 3.4 7.3 5.3l60.2 48.2c14.9 11.9 41.9 11.9 56.7 0z'/%3e%3cpath fill='%23000000' d='M60.3 189.1l60.2-48.2c40.1-32.1 102.8-32.1 142.9 0l60.2 48.2c14.8 11.9 41.9 11.9 56.7 0l90.5-72.4C425.2 46.5 346 0 256 0 136.7 0 36.4 81.6 8 192.1c15.4 8.8 38.9 7.8 52.3-3zM344.5 371l-60.2-48.2c-14.8-11.9-41.9-11.9-56.7 0L167.5 371c-20 16-45.7 24-71.5 24-23.9 0-47.7-6.9-67.1-20.7C71.7 456.1 157.3 512 256 512s184.3-55.9 227.1-137.7c-40.2 28.7-99.9 27.6-138.6-3.3z'/%3e%3c/svg%3e");
+$bg-icon-tabular-realtime: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M448 0H64C28.8 0 0 28.8 0 64v384c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V64c0-35.2-28.8-64-64-64zM320 224H192v-96h128v96zm-128 32h128v96H192v-96zm-32 96H32v-96h128v96zm0-224v96H32v-96h128zM64 480c-8.5 0-16.5-3.3-22.6-9.4S32 456.5 32 448v-64h128v96H64zm128 0v-96h128v96H192zm288-32c0 8.5-3.3 16.5-9.4 22.6S456.5 480 448 480h-96v-96h128v64zm0-96H352v-96h128v96zm0-128H352v-96h128v96z'/%3e%3c/svg%3e");
+$bg-icon-tabular-scrolling: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M448 0H64C28.7.1.1 28.7 0 64v384c.1 35.3 28.7 63.9 64 64h384c35.3-.1 63.9-28.7 64-64V64c-.1-35.3-28.7-63.9-64-64zM32 128h128v96H32v-96zm0 128h128v96H32v-96zm32 224c-17.6-.1-31.9-14.4-32-32v-64h128v96H64zm128 0v-96h128v96H192zm288-32c-.1 17.6-14.4 31.9-32 32h-96v-96h128v64zm0-192v96H192v-96h32v-32h-32v-96h288v96h-32v32h32z'/%3e%3cpath fill='%23000000' d='M391.2 273.7L336 246.1V160c0-8.8-7.2-16-16-16s-16 7.2-16 16v105.9l72.8 36.4c7.9 4 17.5.8 21.5-7.2 4-7.8.8-17.5-7.1-21.4z'/%3e%3c/svg%3e");
+$bg-icon-telemetry: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M64 384V96c-35.3.1-63.9 28.7-64 64v288c.1 35.3 28.7 63.9 64 64h288c35.3-.1 63.9-28.7 64-64H128c-35.3-.1-63.9-28.7-64-64z'/%3e%3cpath fill='%23000000' d='M448 0H160c-35.3.1-63.9 28.7-64 64v288c.1 35.3 28.7 63.9 64 64h288c35.3-.1 63.9-28.7 64-64V64c-.1-35.3-28.7-63.9-64-64zM128 96h96v64h-96V96zm0 96h96v96h-96v-96zm32 192c-17.6-.1-31.9-14.4-32-32v-32h96v64h-64zm96 0v-64h96v64h-96zm224-32c-.1 17.6-14.4 31.9-32 32h-64v-64h96v32zm0-64H256V96h224v192z'/%3e%3cpath fill='%23000000' d='M416 240c8.8 0 16-7.2 16-16 0-6.9-4.4-13-10.9-15.2L384 196.5V144c0-8.8-7.2-16-16-16s-16 7.2-16 16v75.5l58.9 19.6c1.7.6 3.4.9 5.1.9z'/%3e%3c/svg%3e");
 $bg-icon-timeline: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M416 0H96C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h320c52.8 0 96-43.2 96-96V96c0-52.8-43.2-96-96-96ZM64 160V96h128v64Zm64 64h192v64H128Zm320 192H224v-64h224Zm0-128h-64v-64h64Zm0-128H256V96h192Z'/%3e%3c/svg%3e");
-$bg-icon-timer: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M288 73.3V32.01a32 32 0 0 0-32-32h-64a32 32 0 0 0-32 32V73.3C67.48 100.84 0 186.54 0 288.01c0 123.71 100.29 224 224 224s224-100.29 224-224c0-101.48-67.5-187.2-160-214.71zm-54 224.71l-131.88 105.5A167.4 167.4 0 0 1 56 288.01c0-92.64 75.36-168 168-168 3.36 0 6.69.11 10 .31v177.69z'/%3e%3c/svg%3e");
-$bg-icon-topic: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M227.18 238.32l43.15-43.15a25.18 25.18 0 0 1 35.36 0l43.15 43.15a94.42 94.42 0 0 0 35.18 22.25V174.5l-28.82-28.82a95.11 95.11 0 0 0-134.35 0l-43.15 43.15a25.18 25.18 0 0 1-35.36 0L128 174.5v86.07a95.11 95.11 0 0 0 99.18-22.25z'/%3e%3cpath fill='%23000000' d='M252.82 273.68l-43.15 43.15a25.18 25.18 0 0 1-35.36 0l-43.15-43.15c-1-1-2.1-2-3.18-3v98.68a95.11 95.11 0 0 0 131.18-3l43.15-43.15a25.18 25.18 0 0 1 35.36 0l43.15 43.15c1 1 2.1 2 3.18 3v-98.68a95.11 95.11 0 0 0-131.18 3z'/%3e%3cpath fill='%23000000' d='M416 0h-64v96h63.83l.17.17v319.66l-.17.17H352v96h64c52.8 0 96-43.2 96-96V96c0-52.8-43.2-96-96-96zM160 416H96.17l-.17-.17V96.17l.17-.17H160V0H96C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h64v-96z'/%3e%3c/svg%3e");
+$bg-icon-timer: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M32 0C14.4 0 0 14.4 0 32v96h224V0H32zM512 128V32c0-17.6-14.4-32-32-32H288v128h224zM0 192v96c0 17.6 14.4 32 32 32h192V192H0zM480 320c17.6 0 32-14.4 32-32v-96H288v128h192zM256 512L128 384h256z'/%3e%3c/svg%3e");
+$bg-icon-topic: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M16 315.83c7.14-2.81 27.22-23.77 46.48-73C83.71 188.64 120.64 124 176 124c26.2 0 50.71 14.58 72.85 43.34 18.67 24.25 32.42 54.46 40.67 75.54 19.26 49.19 39.34 70.15 46.48 73 7.14-2.81 27.22-23.77 46.48-73 18.7-47.75 49.57-103.57 94.47-116.23A255.87 255.87 0 0 0 256 0C114.62 0 0 114.62 0 256a257.18 257.18 0 0 0 5 50.52c4.77 5.39 8.61 8.37 11 9.31z'/%3e%3cpath fill='%23000000' d='M496 196.17c-7.14 2.81-27.22 23.76-46.48 73C428.29 323.36 391.36 388 336 388c-26.2 0-50.71-14.58-72.85-43.34-18.67-24.25-32.42-54.46-40.67-75.54-19.26-49.19-39.34-70.15-46.48-73-7.14 2.81-27.22 23.76-46.48 73-18.7 47.75-49.57 103.57-94.47 116.23A255.87 255.87 0 0 0 256 512c141.38 0 256-114.62 256-256a257.18 257.18 0 0 0-5-50.52c-4.77-5.39-8.61-8.37-11-9.31z'/%3e%3c/svg%3e");
 $bg-icon-box-with-dashed-lines: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M0 192h64v128H0zM64 64.11l.11-.11H160V0H64A64.19 64.19 0 0 0 0 64v96h64V64.11zM64 447.89V352H0v96a64.19 64.19 0 0 0 64 64h96v-64H64.11zM192 0h128v64H192zM448 447.89l-.11.11H352v64h96a64.19 64.19 0 0 0 64-64v-96h-64v95.89zM448 0h-96v64h95.89l.11.11V160h64V64a64.19 64.19 0 0 0-64-64zM448 192h64v128h-64zM192 448h128v64H192zM128 128h256v256H128z'/%3e%3c/svg%3e");
-$bg-icon-summary-widget: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M448 0H64C28.8 0 0 28.8 0 64v384c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V64c0-35.2-28.8-64-64-64zm-24.1 305.2l-41.3 71.6-94.8-65.8 9.6 115h-82.7l9.6-115-94.8 65.8-41.3-71.6L192.5 256 88.1 206.8l41.3-71.6 94.8 65.8-9.6-115h82.7l-9.6 115 94.8-65.8 41.3 71.6L319.5 256l104.4 49.2z'/%3e%3c/svg%3e");
-$bg-icon-notebook: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M448 55.4c0-39.9-27.7-63.7-61.5-52.7L0 128h448V55.4zM448 160H0v288c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V224c0-35.2-28.8-64-64-64zm-32 256H224V256h192v160z'/%3e%3c/svg%3e");
+$bg-icon-summary-widget: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M128 128h192v64H128zM192 224h192v64H192zM160 320h192v64H160z'/%3e%3cpath fill='%23000000' d='M416 0h-64v96h63.8c.1 0 .1.1.2.2v319.7c0 .1-.1.1-.2.2H352v96h64c52.8 0 96-43.2 96-96V96c0-52.8-43.2-96-96-96zM96 415.8V96.2c0-.1.1-.1.2-.2H160V0H96C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h64v-96H96.2c-.1 0-.2-.1-.2-.2z'/%3e%3c/svg%3e");
+$bg-icon-notebook: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M288 73.3V32.01a32 32 0 0 0-32-32h-64a32 32 0 0 0-32 32V73.3C67.48 100.84 0 186.54 0 288.01c0 123.71 100.29 224 224 224s224-100.29 224-224c0-101.48-67.5-187.2-160-214.71zm-54 224.71l-131.88 105.5A167.4 167.4 0 0 1 56 288.01c0-92.64 75.36-168 168-168 3.36 0 6.69.11 10 .31v177.69z'/%3e%3c/svg%3e");
 $bg-icon-tabs-view: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M0 448a64.2 64.2 0 0 0 64 64h384a64.2 64.2 0 0 0 64-64V144H256L230.9 31.2C227.1 14.1 209.6 0 192 0H64A64.2 64.2 0 0 0 0 64zm416-64H96V256h320z'/%3e%3cpath d='M240 0c17.6 0 35.1 14.1 38.9 31.2l18 80.8H512V64a64.2 64.2 0 0 0-64-64z'/%3e%3c/svg%3e");
 $bg-icon-flexible-layout: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath d='M0 416c0 52.8 43.2 96 96 96h32V224H0zM0 96v64h128V0H96C43.2 0 0 43.2 0 96zM384 512h32c52.8 0 96-43.2 96-96v-64H384zM192 0h128v512H192zM416 0h-32v288h128V96c0-52.8-43.2-96-96-96z'/%3e%3c/svg%3e");
 $bg-icon-generator-telemetry: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M76 236.9c5.4-2.1 20.4-17.8 34.9-54.7C126.8 141.5 154.5 93 196 93c19.7 0 38 10.9 54.6 32.5 14 18.2 24.4 40.8 30.5 56.7 14.5 36.9 29.5 52.6 34.9 54.7 5.4-2.1 20.4-17.8 34.9-54.7S388 104.5 421.7 95A192 192 0 0 0 256 0C150 0 64 86 64 192a197.2 197.2 0 0 0 3.7 37.9c3.6 4 6.5 6.3 8.3 7zM442.3 238.5A192.9 192.9 0 0 0 448 192a197.2 197.2 0 0 0-3.7-37.9c-3.6-4-6.5-6.3-8.3-7-5.4 2.1-20.4 17.8-34.9 54.7-10.9 27.9-27.3 59.5-50 76.6z'/%3e%3cpath d='M256 320l67.5-29.5a60.3 60.3 0 0 1-7.5.5c-19.7 0-38-10.9-54.6-32.5-14-18.2-24.4-40.8-30.5-56.7-14.5-36.9-29.5-52.6-34.9-54.7-5.4 2.1-20.4 17.8-34.9 54.7-8.2 21.1-19.6 44.2-34.4 61.6z'/%3e%3cpath d='M512 240L256 352 0 240v160l256 112 256-112V240z'/%3e%3c/svg%3e");
-$bg-icon-generator-events: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M160 96h192v32H160zM160 224h192v32H160zM160 160h160v32H160z'/%3e%3cpath d='M128 64.1h256V264l64-28V64a64.2 64.2 0 0 0-64-64H128a64.2 64.2 0 0 0-64 64v172l64 28zM329.1 288H182.9l73.1 32 73.1-32z'/%3e%3cpath d='M256 352L0 240v160l256 112 256-112V240L256 352z'/%3e%3c/svg%3e");
+$bg-icon-generator-events: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath d='M160 96h192v32H160zM160 224h192v32H160zM160 160h160v32H160z'/%3e%3cpath d='M128 64.1h256V264l64-28V64a64.2 64.2 0 0 0-64-64H128a64.2 64.2 0 0 0-64 64v172l64 28zM329.1 288H182.9l73.1 32 73.1-32z'/%3e%3cpath d='M256 352L0 240v160l256 112 256-112V240L256 352z'/%3e%3c/svg%3e");
 $bg-icon-gauge: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath d='M256 0C114.6 0 0 114.6 0 256c0 113.2 73.5 209.2 175.3 243L304 256v251.5C422.4 485 512 381 512 256 512 114.6 397.4 0 256 0zm121.4 263.9a159.8 159.8 0 0 0-242.8 0l-73-62.5c4.3-5 8.7-9.8 13.4-14.4a255.9 255.9 0 0 1 362 0c4.7 4.6 9.1 9.4 13.4 14.4z'/%3e%3c/svg%3e");
 $bg-icon-spectra: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M384 352H128l51.2-89.6L0 288v127c0 53.3 43.7 97 97 97h318c53.4 0 97-43.7 97-97v-31l-162.9-93.1zM415 0H97C43.7 0 0 43.6 0 97v159l200-30.1 56-97.9 54.9 96H512V97a97.2 97.2 0 00-97-97zM512 320v-32l-192-32 192 64z'/%3e%3c/svg%3e");
 $bg-icon-spectra-telemetry: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M256 128l54.9 96H510C494.3 97.7 386.5 0 256 0 114.6 0 0 114.6 0 256l200-30.1zM384 352H128l51.2-89.6L2 287.7C17.6 414.1 125.4 512 256 512c100.8 0 188-58.3 229.8-143l-136.7-78.1zM320 256l192 64v-32l-192-32z'/%3e%3c/svg%3e");
@@ -319,3 +317,4 @@ $bg-icon-bar-chart: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://w
 $bg-icon-map: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23000000' d='M448 32.7 384 64v448l64-31.3c35.2-17.21 64-60.1 64-95.3v-320c0-35.2-28.8-49.91-64-32.7ZM160 456l193.6 48.4v-448L160 8v448zM129.6.4 128 0 64 31.3C28.8 48.51 0 91.4 0 126.6v320c0 35.2 28.8 49.91 64 32.7l64-31.3 1.6.4Z'/%3e%3c/svg%3e");
 $bg-icon-plan: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cg data-name='Layer 2'%3e%3cg data-name='Layer 1'%3e%3cpath fill='%23000000' d='M128 96V64a64.19 64.19 0 0 1 64-64h128a64.19 64.19 0 0 1 64 64v32Z'/%3e%3cpath fill='%23000000' d='M416 64v64H96V64c-52.8 0-96 43.2-96 96v256c0 52.8 43.2 96 96 96h320c52.8 0 96-43.2 96-96V160c0-52.8-43.2-96-96-96ZM64 288v-64h128v64Zm256 128H128v-64h192Zm128 0h-64v-64h64Zm0-128H256v-64h192Z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
 $bg-icon-timelist: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cg data-name='Layer 2'%3e%3cpath d='M448 0H64A64.19 64.19 0 0 0 0 64v384a64.19 64.19 0 0 0 64 64h384a64.19 64.19 0 0 0 64-64V64a64.19 64.19 0 0 0-64-64ZM213.47 266.73a24 24 0 0 1-32.2 10.74L104 238.83V128a24 24 0 0 1 48 0v81.17l50.73 25.36a24 24 0 0 1 10.74 32.2ZM448 448H288v-64h160Zm0-96H288v-64h160Zm0-96H288v-64h160Zm0-96H288V96h160Z' data-name='Layer 1'/%3e%3c/g%3e%3c/svg%3e");
+$bg-icon-plot-scatter: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cg data-name='Layer 2'%3e%3cpath d='M96 0C43.2 0 0 43.2 0 96v320c0 52.8 43.2 96 96 96h320c52.8 0 96-43.2 96-96V96c0-52.8-43.2-96-96-96ZM64 176a48 48 0 1 1 48 48 48 48 0 0 1-48-48Zm80 240a48 48 0 1 1 48-48 48 48 0 0 1-48 48Zm128-96a48 48 0 1 1 48-48 48 48 0 0 1-48 48Zm0-160a48 48 0 1 1 48-48 48 48 0 0 1-48 48Zm128 256a48 48 0 1 1 48-48 48 48 0 0 1-48 48Z' data-name='Layer 1'/%3e%3c/g%3e%3c/svg%3e");

src/styles/_glyphs.scss

@@ -195,6 +195,7 @@
 .icon-map {  @include glyphBefore($glyph-icon-map); }
 .icon-plan {  @include glyphBefore($glyph-icon-plan); }
 .icon-timelist {  @include glyphBefore($glyph-icon-timelist); }
+.icon-plot-scatter {  @include glyphBefore($glyph-icon-plot-scatter); }
 
 /************************** 12 PX CLASSES */
 // TODO: sync with 16px redo as of 10/25/18
@@ -210,9 +211,6 @@
 .bg-icon-alert-triangle { @include glyphBg($bg-icon-alert-triangle); }
 .bg-icon-bell { @include glyphBg($bg-icon-bell); }
 .bg-icon-info { @include glyphBg($bg-icon-info); }
-.bg-icon-activity { @include glyphBg($bg-icon-activity); }
-.bg-icon-activity-mode { @include glyphBg($bg-icon-activity-mode); }
-.bg-icon-autoflow-tabular { @include glyphBg($bg-icon-autoflow-tabular); }
 .bg-icon-plus { @include glyphBg($bg-icon-plus); }
 .bg-icon-grippy-ew { @include glyphBg($bg-icon-grippy-ew); }
 .bg-icon-chain-links { @include glyphBg($bg-icon-chain-links); }
@@ -258,3 +256,4 @@
 .bg-icon-map { @include glyphBg($bg-icon-map); }
 .bg-icon-plan { @include glyphBg($bg-icon-plan); }
 .bg-icon-timelist { @include glyphBg($bg-icon-timelist); }
+.bg-icon-plot-scatter { @include glyphBg($bg-icon-plot-scatter); }