Add Correlation Telemetry Plugin (#8216)

* adding the plugin file

* adding to available plugins list

* this update makes it so you can see the items selected for correlation in the edit form, previously they would be blank

* fixed incorrect formatting for locator field vue compnent, removed unnecessary openmct arg from correlation plugin

* spelling fix

* add test for correlated telemetry, update subscribe to telemetry util function and move to app actions

* checking timestamps match so we are correctly checking correlated telemetry

* Rename utility function to align with its implementation details

---------

Co-authored-by: Andrew Henry <akhenry@gmail.com>
Co-authored-by: Andrew Henry <andrew.k.henry@nasa.gov>

Author: jvigliotta

e2e/appActions.js

@@ -708,6 +708,45 @@ async function renameCurrentObjectFromBrowseBar(page, newName) {
   await page.getByLabel('Browse bar', { exact: true }).click();
 }
 
+/**
+ * Util for subscribing to a telemetry object by object identifier
+ * Limitations: Currently only works to return telemetry once to the node scope
+ * To Do: See if there's a way to await this multiple times to allow for multiple
+ * values to be returned over time
+ * @param {import('@playwright/test').Page} page
+ * @param {string} objectIdentifier identifier for object
+ * @returns {Promise<string>} the formatted sin telemetry value
+ */
+async function getNextSineValueFromSWG(page, objectIdentifier, returnOnlyValue = true) {
+  // Generate a unique function name for this subscription
+  const uniqueFunctionName = `getTelemValue_${genUuid().replace(/-/g, '_')}`;
+
+  const getTelemValuePromise = new Promise((resolve) =>
+    page.exposeFunction(uniqueFunctionName, resolve)
+  );
+
+  await page.evaluate(
+    async ({ telemetryIdentifier, functionName, onlyValue }) => {
+      const telemetryObject = await window.openmct.objects.get(telemetryIdentifier);
+      const metadata = window.openmct.telemetry.getMetadata(telemetryObject);
+      const formats = await window.openmct.telemetry.getFormatMap(metadata);
+      window.openmct.telemetry.subscribe(telemetryObject, (obj) => {
+        const sinVal = obj.sin;
+        const formattedSinVal = formats.sin.format(sinVal);
+        const formattedTimestamp = formats.utc.format(obj.utc);
+        window[functionName](onlyValue ? formattedSinVal : { ...obj, formattedTimestamp });
+      });
+    },
+    {
+      telemetryIdentifier: objectIdentifier,
+      functionName: uniqueFunctionName,
+      onlyValue: returnOnlyValue
+    }
+  );
+
+  return getTelemValuePromise;
+}
+
 export {
   createDomainObjectWithDefaults,
   createExampleTelemetryObject,
@@ -716,6 +755,7 @@ export {
   createStableStateTelemetry,
   expandEntireTree,
   getCanvasPixels,
+  getNextSineValueFromSWG,
   linkParameterToObject,
   navigateToObjectWithFixedTimeBounds,
   navigateToObjectWithRealTime,

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

@@ -0,0 +1,107 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import {
+  createDomainObjectWithDefaults,
+  getNextSineValueFromSWG,
+  setRealTimeMode
+} from '../../../../appActions.js';
+import { expect, test } from '../../../../pluginFixtures.js';
+
+test.describe('Correlation Telemetry', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+    await page.evaluate(() => {
+      const openmct = window.openmct;
+      openmct.install(openmct.plugins.CorrelationTelemetry());
+    });
+  });
+
+  test('will correlate telemetry from two objects based on timestamp', async ({ page }) => {
+    const sineWaveGenerator1 = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'Sine Wave Generator 1'
+    });
+    const sineWaveGenerator2 = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'Sine Wave Generator 2'
+    });
+
+    // create correlation telemetry object, with x and y sources
+    await page.getByRole('button', { name: 'Create', exact: true }).click();
+    await page.getByRole('menuitem', { name: 'Correlation Telemetry' }).click();
+    await page.getByLabel('Title', { exact: true }).fill('');
+    await page.getByLabel('Title', { exact: true }).fill('Test Correlation Telemetry');
+
+    // choose sine wave generator 1 as x source
+    const createModalTreeFirst = page.getByLabel('Create Modal Tree').first();
+    await createModalTreeFirst.getByLabel('Expand My Items folder').click();
+    await createModalTreeFirst
+      .getByLabel('Navigate to Sine Wave Generator 1 generator Object')
+      .click();
+
+    // choose sine wave generator 2 as y source
+    const createModalTreeSecond = page.getByLabel('Create Modal Tree').nth(1);
+    await createModalTreeSecond.getByLabel('Expand My Items folder').click();
+    await createModalTreeSecond
+      .getByLabel('Navigate to Sine Wave Generator 2 generator Object')
+      .click();
+
+    // save in my items folder
+    const createModalTreeThird = page.getByLabel('Create Modal Tree').nth(2);
+    await createModalTreeThird.getByLabel('Navigate to My Items folder').click();
+    await page.getByRole('button', { name: 'Save' }).click();
+
+    await setRealTimeMode(page);
+
+    await page.getByLabel('Open the View Switcher Menu').click();
+    await page.getByLabel('Telemetry Table').click();
+
+    const getSWG1ValuePromise = getNextSineValueFromSWG(page, sineWaveGenerator1.uuid, false);
+    const getSWG2ValuePromise = getNextSineValueFromSWG(page, sineWaveGenerator2.uuid, false);
+
+    const swg1Value = await getSWG1ValuePromise;
+    const swg2Value = await getSWG2ValuePromise;
+    const correlatedTelemetryObject = {
+      x: swg1Value.sin,
+      y: swg2Value.sin,
+      formattedTimestamp: swg1Value.formattedTimestamp,
+      timestampsMatch: swg1Value.utc === swg2Value.utc
+    };
+
+    // wait for correlated telemetry object formatted timestamp to be visible in the telemetry table
+    await expect(page.getByText(correlatedTelemetryObject.formattedTimestamp)).toBeVisible();
+    await expect(correlatedTelemetryObject.timestampsMatch).toBe(true);
+
+    // check that the x and y values are correlated in the same row, based on column names: x and y, respectively
+    const telemetryTableRows = page.getByRole('row');
+    const correlatedRow = telemetryTableRows.filter((row) =>
+      row.getByText(correlatedTelemetryObject.formattedTimestamp).isVisible()
+    );
+    await expect(
+      correlatedRow.getByLabel(`x table cell ${correlatedTelemetryObject.x}`).first()
+    ).toBeVisible();
+    await expect(
+      correlatedRow.getByLabel(`y table cell ${correlatedTelemetryObject.y}`).first()
+    ).toBeVisible();
+  });
+});

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

@@ -23,6 +23,7 @@ import { fileURLToPath } from 'url';
 
 import {
   createDomainObjectWithDefaults,
+  getNextSineValueFromSWG,
   navigateToObjectWithFixedTimeBounds,
   setFixedIndependentTimeConductorBounds,
   setFixedTimeMode,
@@ -242,7 +243,7 @@ test.describe('Display Layout', () => {
     // Subscribe to the Sine Wave Generator data
     // On getting data, check if the value found in the  Display Layout is the most recent value
     // from the Sine Wave Generator
-    const getTelemValuePromise = subscribeToTelemetry(page, sineWaveObject.uuid);
+    const getTelemValuePromise = getNextSineValueFromSWG(page, sineWaveObject.uuid);
     const formattedTelemetryValue = await getTelemValuePromise;
     await expect(page.getByText(formattedTelemetryValue)).toBeVisible();
     const displayLayoutValue = await page.getByText(formattedTelemetryValue).textContent();
@@ -282,7 +283,7 @@ test.describe('Display Layout', () => {
     await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     // Subscribe to the Sine Wave Generator data
-    const getTelemValuePromise = subscribeToTelemetry(page, sineWaveObject.uuid);
+    const getTelemValuePromise = getNextSineValueFromSWG(page, sineWaveObject.uuid);
     // Set an offset of 1 minute and then change the time mode to fixed to set a 1 minute historical window
     await setStartOffset(page, { startMins: '1' });
     await setFixedTimeMode(page);
@@ -693,31 +694,3 @@ async function addLayoutObject(page, layoutName, layoutObject) {
     await page.getByText('Ok').click();
   }
 }
-
-/**
- * Util for subscribing to a telemetry object by object identifier
- * Limitations: Currently only works to return telemetry once to the node scope
- * To Do: See if there's a way to await this multiple times to allow for multiple
- * values to be returned over time
- * @param {import('@playwright/test').Page} page
- * @param {string} objectIdentifier identifier for object
- * @returns {Promise<string>} the formatted sin telemetry value
- */
-async function subscribeToTelemetry(page, objectIdentifier) {
-  const getTelemValuePromise = new Promise((resolve) =>
-    page.exposeFunction('getTelemValue', resolve)
-  );
-
-  await page.evaluate(async (telemetryIdentifier) => {
-    const telemetryObject = await window.openmct.objects.get(telemetryIdentifier);
-    const metadata = window.openmct.telemetry.getMetadata(telemetryObject);
-    const formats = await window.openmct.telemetry.getFormatMap(metadata);
-    window.openmct.telemetry.subscribe(telemetryObject, (obj) => {
-      const sinVal = obj.sin;
-      const formattedSinVal = formats.sin.format(sinVal);
-      window.getTelemValue(formattedSinVal);
-    });
-  }, objectIdentifier);
-
-  return getTelemValuePromise;
-}

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

@@ -22,6 +22,7 @@
 
 import {
   createDomainObjectWithDefaults,
+  getNextSineValueFromSWG,
   navigateToObjectWithRealTime,
   setFixedTimeMode,
   setRealTimeMode,
@@ -268,7 +269,7 @@ test.describe('Testing LAD table', () => {
     // Subscribe to the Sine Wave Generator data
     // On getting data, check if the value found in the LAD table is the most recent value
     // from the Sine Wave Generator
-    const getTelemValuePromise = subscribeToTelemetry(page, sineWaveObject.uuid);
+    const getTelemValuePromise = getNextSineValueFromSWG(page, sineWaveObject.uuid);
     const subscribeTelemValue = await getTelemValuePromise;
     await expect(page.getByLabel('lad value')).toHaveText(subscribeTelemValue);
     const ladTableValue = await page.getByText(subscribeTelemValue).textContent();
@@ -294,7 +295,7 @@ test.describe('Testing LAD table', () => {
     await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
 
     // Subscribe to the Sine Wave Generator data
-    const getTelemValuePromise = subscribeToTelemetry(page, sineWaveObject.uuid);
+    const getTelemValuePromise = getNextSineValueFromSWG(page, sineWaveObject.uuid);
     // Set an offset of 1 minute and then change the time mode to fixed to set a 1 minute historical window
     await setRealTimeMode(page);
     await setStartOffset(page, { startMins: '01' });
@@ -307,34 +308,6 @@ test.describe('Testing LAD table', () => {
   });
 });
 
-/**
- * Util for subscribing to a telemetry object by object identifier
- * Limitations: Currently only works to return telemetry once to the node scope
- * To Do: See if there's a way to await this multiple times to allow for multiple
- * values to be returned over time
- * @param {import('@playwright/test').Page} page
- * @param {string} objectIdentifier identifier for object
- * @returns {Promise<string>} the formatted sin telemetry value
- */
-async function subscribeToTelemetry(page, objectIdentifier) {
-  const getTelemValuePromise = new Promise((resolve) =>
-    page.exposeFunction('getTelemValue', resolve)
-  );
-
-  await page.evaluate(async (telemetryIdentifier) => {
-    const telemetryObject = await window.openmct.objects.get(telemetryIdentifier);
-    const metadata = window.openmct.telemetry.getMetadata(telemetryObject);
-    const formats = await window.openmct.telemetry.getFormatMap(metadata);
-    window.openmct.telemetry.subscribe(telemetryObject, (obj) => {
-      const sinVal = obj.sin;
-      const formattedSinVal = formats.sin.format(sinVal);
-      window.getTelemValue(formattedSinVal);
-    });
-  }, objectIdentifier);
-
-  return getTelemValuePromise;
-}
-
 /**
  * Open the given `domainObject`'s context menu from the object tree.
  * Expands the path to the object and scrolls to it if necessary.

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

@@ -23,7 +23,7 @@
 <template>
   <MctTree
     :is-selector-tree="true"
-    :initial-selection="model.parent"
+    :initial-selection="initialSelection"
     @tree-item-selection="handleItemSelection"
   />
 </template>
@@ -43,6 +43,11 @@ export default {
     }
   },
   emits: ['on-change'],
+  computed: {
+    initialSelection() {
+      return this.model.parent || this.model.value?.[0];
+    }
+  },
   methods: {
     handleItemSelection(item) {
       const data = {