From 44415b37697a3cd4b28ea789ffce265dd0da7823 Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <ozyx@users.noreply.github.com>
Date: Tue, 1 Aug 2023 14:16:20 -0700
Subject: [PATCH 1/9] cherry-pick(#6868): fix: toggling markers, alarm markers,
 marker style + update `Vue.extend()` usage to Vue 3 (#6873)

* fix: update to `defineComponent` from `Vue.extend()`
* fix: unwrap Proxy arg before WeakMap.get()
* refactor: `defineComponent` not needed here
---
 src/plugins/plot/chart/MctChart.vue | 29 +++++++++++++----------------
 1 file changed, 13 insertions(+), 16 deletions(-)

diff --git a/src/plugins/plot/chart/MctChart.vue b/src/plugins/plot/chart/MctChart.vue
index b5eec1e203b..b40b2b9f1ae 100644
--- a/src/plugins/plot/chart/MctChart.vue
+++ b/src/plugins/plot/chart/MctChart.vue
@@ -42,7 +42,8 @@ import configStore from '../configuration/ConfigStore';
 import PlotConfigurationModel from '../configuration/PlotConfigurationModel';
 import LimitLine from './LimitLine.vue';
 import LimitLabel from './LimitLabel.vue';
-import Vue from 'vue';
+import mount from 'utils/mount';
+import { toRaw } from 'vue';
 
 const MARKER_SIZE = 6.0;
 const HIGHLIGHT_SIZE = MARKER_SIZE * 2.0;
@@ -315,7 +316,7 @@ export default {
         return;
       }
 
-      const elements = this.seriesElements.get(series);
+      const elements = this.seriesElements.get(toRaw(series));
       elements.lines.forEach(function (line) {
         this.lines.splice(this.lines.indexOf(line), 1);
         line.destroy();
@@ -333,7 +334,7 @@ export default {
         return;
       }
 
-      const elements = this.seriesElements.get(series);
+      const elements = this.seriesElements.get(toRaw(series));
       if (elements.alarmSet) {
         elements.alarmSet.destroy();
         this.alarmSets.splice(this.alarmSets.indexOf(elements.alarmSet), 1);
@@ -349,7 +350,7 @@ export default {
         return;
       }
 
-      const elements = this.seriesElements.get(series);
+      const elements = this.seriesElements.get(toRaw(series));
       elements.pointSets.forEach(function (pointSet) {
         this.pointSets.splice(this.pointSets.indexOf(pointSet), 1);
         pointSet.destroy();
@@ -473,7 +474,7 @@ export default {
       this.$emit('plotReinitializeCanvas');
     },
     removeChartElement(series) {
-      const elements = this.seriesElements.get(series);
+      const elements = this.seriesElements.get(toRaw(series));
 
       elements.lines.forEach(function (line) {
         this.lines.splice(this.lines.indexOf(line), 1);
@@ -576,7 +577,7 @@ export default {
       this.seriesLimits.set(series, limitElements);
     },
     clearLimitLines(series) {
-      const seriesLimits = this.seriesLimits.get(series);
+      const seriesLimits = this.seriesLimits.get(toRaw(series));
 
       if (seriesLimits) {
         seriesLimits.limitLines.forEach(function (line) {
@@ -747,16 +748,14 @@ export default {
         left: 0,
         top: this.drawAPI.y(limit.point.y)
       };
-      let LimitLineClass = Vue.extend(LimitLine);
-      const component = new LimitLineClass({
-        propsData: {
+      const { vNode } = mount(LimitLine, {
+        props: {
           point,
           limit
         }
       });
-      component.$mount();
 
-      return component.$el;
+      return vNode.el;
     },
     getLimitOverlap(limit, overlapMap) {
       //calculate if limit lines are too close to each other
@@ -792,16 +791,14 @@ export default {
         left: 0,
         top: this.drawAPI.y(limit.point.y)
       };
-      let LimitLabelClass = Vue.extend(LimitLabel);
-      const component = new LimitLabelClass({
-        propsData: {
+      const { vNode } = mount(LimitLabel, {
+        props: {
           limit: Object.assign({}, overlap, limit),
           point
         }
       });
-      component.$mount();
 
-      return component.$el;
+      return vNode.el;
     },
     drawAlarmPoints(alarmSet) {
       this.drawAPI.drawLimitPoints(

From 0f5d3afc4a0e747aa261f0652711670acb03188a Mon Sep 17 00:00:00 2001
From: Andrew Henry <akhenry@gmail.com>
Date: Wed, 2 Aug 2023 09:50:29 -0700
Subject: [PATCH 2/9] cherry pick (#6875) suppress deprecation warnings to once
 per unique args (#6881)

fix: suppress deprecation warnings to once per unique args (#6875)

Co-authored-by: Jesse Mazzella <ozyx@users.noreply.github.com>
---
 src/api/time/TimeContext.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/api/time/TimeContext.js b/src/api/time/TimeContext.js
index 8ff1657696f..e18530331f4 100644
--- a/src/api/time/TimeContext.js
+++ b/src/api/time/TimeContext.js
@@ -42,6 +42,7 @@ class TimeContext extends EventEmitter {
     this.activeClock = undefined;
     this.offsets = undefined;
     this.mode = undefined;
+    this.warnCounts = {};
 
     this.tick = this.tick.bind(this);
   }
@@ -648,6 +649,17 @@ class TimeContext extends EventEmitter {
   }
 
   #warnMethodDeprecated(method, newMethod) {
+    const MAX_CALLS = 1; // Only warn once per unique method and newMethod combination
+
+    const key = `${method}.${newMethod}`;
+    const currentWarnCount = this.warnCounts[key] || 0;
+
+    if (currentWarnCount >= MAX_CALLS) {
+      return; // Don't warn if already warned once
+    }
+
+    this.warnCounts[key] = currentWarnCount + 1;
+
     let message = `[DEPRECATION WARNING]: The ${method} API method is deprecated and will be removed in a future version of Open MCT.`;
 
     if (newMethod) {

From 796616fe3f6813cec1d35c14a4d59dd7de5cfcdb Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <ozyx@users.noreply.github.com>
Date: Wed, 2 Aug 2023 10:00:51 -0700
Subject: [PATCH 3/9] cherry-pick(#6877): Set the raw series limits so that we
 can get the raw series limits (#6883)

* Set the raw series limits so that we can get the raw series limits

* fix: `toRaw()` the other gets/sets/deletes

---------

Co-authored-by: Shefali Joshi <simplyrender@gmail.com>
---
 src/plugins/plot/chart/MctChart.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/plugins/plot/chart/MctChart.vue b/src/plugins/plot/chart/MctChart.vue
index b40b2b9f1ae..1cc3438aa2e 100644
--- a/src/plugins/plot/chart/MctChart.vue
+++ b/src/plugins/plot/chart/MctChart.vue
@@ -489,7 +489,7 @@ export default {
         this.alarmSets.splice(this.alarmSets.indexOf(elements.alarmSet), 1);
       }
 
-      this.seriesElements.delete(series);
+      this.seriesElements.delete(toRaw(series));
 
       this.clearLimitLines(series);
     },
@@ -555,7 +555,7 @@ export default {
         this.alarmSets.push(elements.alarmSet);
       }
 
-      this.seriesElements.set(series, elements);
+      this.seriesElements.set(toRaw(series), elements);
     },
     makeLimitLines(series) {
       this.clearLimitLines(series);
@@ -574,7 +574,7 @@ export default {
         this.limitLines.push(limitLine);
       }
 
-      this.seriesLimits.set(series, limitElements);
+      this.seriesLimits.set(toRaw(series), limitElements);
     },
     clearLimitLines(series) {
       const seriesLimits = this.seriesLimits.get(toRaw(series));
@@ -585,7 +585,7 @@ export default {
           line.destroy();
         }, this);
 
-        this.seriesLimits.delete(series);
+        this.seriesLimits.delete(toRaw(series));
       }
     },
     canDraw(yAxisId) {

From 492e8055e57607a1ab0d818de2c3446089af8cbd Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <ozyx@users.noreply.github.com>
Date: Wed, 2 Aug 2023 16:45:47 -0700
Subject: [PATCH 4/9] cherry-pick(#6885): Synchronize timers between multiple
 users (#6886)

* created a throttle util and using it in timer plugin to throttle refreshing the timer domain object

* Simplify timer logic

* Clarify code a little

* refactor: lint:fix

* Fix linting issue

---------

Co-authored-by: Andrew Henry <akhenry@gmail.com>
Co-authored-by: Jamie V <jamie.j.vigliotta@nasa.gov>
---
 src/plugins/timer/components/Timer.vue | 58 ++++++++------------------
 src/utils/throttle.js                  | 34 +++++++++++++++
 2 files changed, 52 insertions(+), 40 deletions(-)
 create mode 100644 src/utils/throttle.js

diff --git a/src/plugins/timer/components/Timer.vue b/src/plugins/timer/components/Timer.vue
index 8a28d895488..ec74cc1a2d4 100644
--- a/src/plugins/timer/components/Timer.vue
+++ b/src/plugins/timer/components/Timer.vue
@@ -43,9 +43,11 @@
 
 <script>
 import raf from 'utils/raf';
+import throttle from '../../../utils/throttle';
 
 const moment = require('moment-timezone');
 const momentDurationFormatSetup = require('moment-duration-format');
+const refreshRateSeconds = 2;
 
 momentDurationFormatSetup(moment);
 
@@ -68,38 +70,21 @@ export default {
     };
   },
   computed: {
-    relativeTimestamp() {
-      let relativeTimestamp;
-      if (this.configuration && this.configuration.timestamp) {
-        relativeTimestamp = moment(this.configuration.timestamp).toDate();
-      } else if (this.configuration && this.configuration.timestamp === undefined) {
-        relativeTimestamp = undefined;
+    timeDelta() {
+      if (this.configuration.pausedTime) {
+        return Date.parse(this.configuration.pausedTime) - this.startTimeMs;
+      } else {
+        return this.lastTimestamp - this.startTimeMs;
       }
-
-      return relativeTimestamp;
     },
-    timeDelta() {
-      return this.lastTimestamp - this.relativeTimestamp;
+    startTimeMs() {
+      return Date.parse(this.configuration.timestamp);
     },
     timeTextValue() {
-      if (isNaN(this.timeDelta)) {
-        return null;
-      }
-
       const toWholeSeconds = Math.abs(Math.floor(this.timeDelta / 1000) * 1000);
 
       return moment.duration(toWholeSeconds, 'ms').format(this.format, { trim: false });
     },
-    pausedTime() {
-      let pausedTime;
-      if (this.configuration && this.configuration.pausedTime) {
-        pausedTime = moment(this.configuration.pausedTime).toDate();
-      } else if (this.configuration && this.configuration.pausedTime === undefined) {
-        pausedTime = undefined;
-      }
-
-      return pausedTime;
-    },
     timerState() {
       let timerState = 'started';
       if (this.configuration && this.configuration.timerState) {
@@ -179,13 +164,9 @@ export default {
     }
   },
   mounted() {
-    this.unobserve = this.openmct.objects.observe(
-      this.domainObject,
-      'configuration',
-      (configuration) => {
-        this.configuration = configuration;
-      }
-    );
+    this.unobserve = this.openmct.objects.observe(this.domainObject, '*', (domainObject) => {
+      this.configuration = domainObject.configuration;
+    });
     this.$nextTick(() => {
       if (!this.configuration?.timerState) {
         const timerAction = !this.relativeTimestamp ? 'stop' : 'start';
@@ -193,6 +174,7 @@ export default {
       }
 
       this.handleTick = raf(this.handleTick);
+      this.refreshTimerObject = throttle(this.refreshTimerObject, refreshRateSeconds * 1000);
       this.openmct.time.on('tick', this.handleTick);
 
       this.viewActionsCollection = this.openmct.actions.getActionsCollection(
@@ -210,15 +192,11 @@ export default {
   },
   methods: {
     handleTick() {
-      const isTimerRunning = !['paused', 'stopped'].includes(this.timerState);
-
-      if (isTimerRunning) {
-        this.lastTimestamp = new Date(this.openmct.time.now());
-      }
-
-      if (this.timerState === 'paused' && !this.lastTimestamp) {
-        this.lastTimestamp = this.pausedTime;
-      }
+      this.lastTimestamp = new Date(this.openmct.time.now());
+      this.refreshTimerObject();
+    },
+    refreshTimerObject() {
+      this.openmct.objects.refresh(this.domainObject);
     },
     restartTimer() {
       this.triggerAction('timer.restart');
diff --git a/src/utils/throttle.js b/src/utils/throttle.js
new file mode 100644
index 00000000000..787152bad20
--- /dev/null
+++ b/src/utils/throttle.js
@@ -0,0 +1,34 @@
+/**
+ * Creates a throttled function that only invokes the provided function at most once every
+ * specified number of milliseconds. Subsequent calls within the waiting period will be ignored.
+ * @param {Function} func The function to throttle.
+ * @param {number} wait The number of milliseconds to wait between successive calls to the function.
+ * @return {Function} Returns the new throttled function.
+ */
+export default function throttle(func, wait) {
+  let timeout;
+  let result;
+  let previous = 0;
+
+  return function (...args) {
+    const now = new Date().getTime();
+    const remaining = wait - (now - previous);
+
+    if (remaining <= 0 || remaining > wait) {
+      if (timeout) {
+        clearTimeout(timeout);
+        timeout = null;
+      }
+
+      previous = now;
+      result = func(...args);
+    } else if (!timeout) {
+      timeout = setTimeout(() => {
+        previous = new Date().getTime();
+        timeout = null;
+        result = func(...args);
+      }, remaining);
+    }
+    return result;
+  };
+}

From 60e5bbc5902c1f455e9911475912dd3f408066d5 Mon Sep 17 00:00:00 2001
From: Shefali Joshi <simplyrender@gmail.com>
Date: Thu, 3 Aug 2023 07:25:33 -0700
Subject: [PATCH 5/9] Remove snapshot (#6887)

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 41131d921ec..9db31aeb30e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "openmct",
-  "version": "3.0.0-SNAPSHOT",
+  "version": "3.0.0",
   "description": "The Open MCT core platform",
   "devDependencies": {
     "@babel/eslint-parser": "7.22.5",

From 32b68cf0df85cbad014050b6d51da57d455e87bb Mon Sep 17 00:00:00 2001
From: Scott Bell <scott@traclabs.com>
Date: Tue, 8 Aug 2023 18:49:39 +0200
Subject: [PATCH 6/9] cherry-pick(#6866): Only load annotations in fixed time
 mode or frozen (#6902)

Only load annotations in fixed time mode or frozen (#6866)

* fix annotations load to not happen on start

* remove range checking per annotated point

* back to local variable

* reduce tagging size to improve reliability of test

* remove .only

* remove .only

* reduce hz rate for functional test and keep high frequency test in performance

* remove console.debugs

* this test runs pretty fast now

* fix network request tests to match new behavior
---
 e2e/appActions.js                             |  13 +-
 .../displayLayout/displayLayout.e2e.spec.js   |  13 +-
 .../plugins/plot/tagging.e2e.spec.js          |  44 +--
 e2e/tests/performance/tagging.perf.spec.js    | 273 ++++++++++++++++++
 src/plugins/plot/MctPlot.vue                  |  12 +-
 src/plugins/plot/chart/MctChart.vue           |  56 +---
 6 files changed, 350 insertions(+), 61 deletions(-)
 create mode 100644 e2e/tests/performance/tagging.perf.spec.js

diff --git a/e2e/appActions.js b/e2e/appActions.js
index 230602334b5..9f64b089fcf 100644
--- a/e2e/appActions.js
+++ b/e2e/appActions.js
@@ -35,6 +35,7 @@
  * @property {string} type the type of domain object to create (e.g.: "Sine Wave Generator").
  * @property {string} [name] the desired name of the created domain object.
  * @property {string | import('../src/api/objects/ObjectAPI').Identifier} [parent] the Identifier or uuid of the parent object.
+ * @property {Object<string, string>} [customParameters] any additional parameters to be passed to the domain object's form. E.g. '[aria-label="Data Rate (hz)"]': {'0.1'}
  */
 
 /**
@@ -65,7 +66,10 @@ const { expect } = require('@playwright/test');
  * @param {CreateObjectOptions} options
  * @returns {Promise<CreatedObjectInfo>} An object containing information about the newly created domain object.
  */
-async function createDomainObjectWithDefaults(page, { type, name, parent = 'mine' }) {
+async function createDomainObjectWithDefaults(
+  page,
+  { type, name, parent = 'mine', customParameters = {} }
+) {
   if (!name) {
     name = `${type}:${genUuid()}`;
   }
@@ -94,6 +98,13 @@ async function createDomainObjectWithDefaults(page, { type, name, parent = 'mine
     await notesInput.fill(page.testNotes);
   }
 
+  // If there are any further parameters, fill them in
+  for (const [key, value] of Object.entries(customParameters)) {
+    const input = page.locator(`form[name="mctForm"] ${key}`);
+    await input.fill('');
+    await input.fill(value);
+  }
+
   // Click OK button and wait for Navigate event
   await Promise.all([
     page.waitForLoadState(),
diff --git a/e2e/tests/functional/plugins/displayLayout/displayLayout.e2e.spec.js b/e2e/tests/functional/plugins/displayLayout/displayLayout.e2e.spec.js
index e2310740765..ee093b45dc8 100644
--- a/e2e/tests/functional/plugins/displayLayout/displayLayout.e2e.spec.js
+++ b/e2e/tests/functional/plugins/displayLayout/displayLayout.e2e.spec.js
@@ -260,6 +260,7 @@ test.describe('Display Layout', () => {
   test('When multiple plots are contained in a layout, we only ask for annotations once @couchdb', async ({
     page
   }) => {
+    await setFixedTimeMode(page);
     // Create another Sine Wave Generator
     const anotherSineWaveObject = await createDomainObjectWithDefaults(page, {
       type: 'Sine Wave Generator'
@@ -316,10 +317,20 @@ test.describe('Display Layout', () => {
 
     // wait for annotations requests to be batched and requested
     await page.waitForLoadState('networkidle');
-
     // Network requests for the composite telemetry with multiple items should be:
     // 1.  a single batched request for annotations
     expect(networkRequests.length).toBe(1);
+
+    await setRealTimeMode(page);
+    networkRequests = [];
+
+    await page.reload();
+
+    // wait for annotations to not load (if we have any, we've got a problem)
+    await page.waitForLoadState('networkidle');
+
+    // In real time mode, we don't fetch annotations at all
+    expect(networkRequests.length).toBe(0);
   });
 });
 
diff --git a/e2e/tests/functional/plugins/plot/tagging.e2e.spec.js b/e2e/tests/functional/plugins/plot/tagging.e2e.spec.js
index aa3b6e52798..04d6ba2c2ea 100644
--- a/e2e/tests/functional/plugins/plot/tagging.e2e.spec.js
+++ b/e2e/tests/functional/plugins/plot/tagging.e2e.spec.js
@@ -32,7 +32,7 @@ const {
   waitForPlotsToRender
 } = require('../../../../appActions');
 
-test.describe.fixme('Plot Tagging', () => {
+test.describe('Plot Tagging', () => {
   /**
    * Given a canvas and a set of points, tags the points on the canvas.
    * @param {import('@playwright/test').Page} page
@@ -41,7 +41,7 @@ test.describe.fixme('Plot Tagging', () => {
    * @param {Number} yEnd a telemetry item with a plot
    * @returns {Promise}
    */
-  async function createTags({ page, canvas, xEnd, yEnd }) {
+  async function createTags({ page, canvas, xEnd = 700, yEnd = 480 }) {
     await canvas.hover({ trial: true });
 
     //Alt+Shift Drag Start to select some points to tag
@@ -97,8 +97,8 @@ test.describe.fixme('Plot Tagging', () => {
     // click on the tagged plot point
     await canvas.click({
       position: {
-        x: 325,
-        y: 377
+        x: 100,
+        y: 100
       }
     });
 
@@ -171,8 +171,6 @@ test.describe.fixme('Plot Tagging', () => {
       type: 'issue',
       description: 'https://github.com/nasa/openmct/issues/6822'
     });
-    //Test.slow decorator is currently broken. Needs to be fixed in https://github.com/nasa/openmct/issues/5374
-    test.slow();
 
     const overlayPlot = await createDomainObjectWithDefaults(page, {
       type: 'Overlay Plot'
@@ -181,13 +179,19 @@ test.describe.fixme('Plot Tagging', () => {
     const alphaSineWave = await createDomainObjectWithDefaults(page, {
       type: 'Sine Wave Generator',
       name: 'Alpha Sine Wave',
-      parent: overlayPlot.uuid
+      parent: overlayPlot.uuid,
+      customParameters: {
+        '[aria-label="Data Rate (hz)"]': '0.01'
+      }
     });
 
     await createDomainObjectWithDefaults(page, {
       type: 'Sine Wave Generator',
       name: 'Beta Sine Wave',
-      parent: overlayPlot.uuid
+      parent: overlayPlot.uuid,
+      customParameters: {
+        '[aria-label="Data Rate (hz)"]': '0.02'
+      }
     });
 
     await page.goto(overlayPlot.url);
@@ -200,9 +204,7 @@ test.describe.fixme('Plot Tagging', () => {
 
     await createTags({
       page,
-      canvas,
-      xEnd: 700,
-      yEnd: 480
+      canvas
     });
 
     await setFixedTimeMode(page);
@@ -232,15 +234,15 @@ test.describe.fixme('Plot Tagging', () => {
 
   test('Tags work with Plot View of telemetry items', async ({ page }) => {
     await createDomainObjectWithDefaults(page, {
-      type: 'Sine Wave Generator'
+      type: 'Sine Wave Generator',
+      customParameters: {
+        '[aria-label="Data Rate (hz)"]': '0.01'
+      }
     });
-
     const canvas = page.locator('canvas').nth(1);
     await createTags({
       page,
-      canvas,
-      xEnd: 700,
-      yEnd: 480
+      canvas
     });
     await basicTagsTests(page);
   });
@@ -253,13 +255,19 @@ test.describe.fixme('Plot Tagging', () => {
     const alphaSineWave = await createDomainObjectWithDefaults(page, {
       type: 'Sine Wave Generator',
       name: 'Alpha Sine Wave',
-      parent: stackedPlot.uuid
+      parent: stackedPlot.uuid,
+      customParameters: {
+        '[aria-label="Data Rate (hz)"]': '0.01'
+      }
     });
 
     await createDomainObjectWithDefaults(page, {
       type: 'Sine Wave Generator',
       name: 'Beta Sine Wave',
-      parent: stackedPlot.uuid
+      parent: stackedPlot.uuid,
+      customParameters: {
+        '[aria-label="Data Rate (hz)"]': '0.02'
+      }
     });
 
     await page.goto(stackedPlot.url);
diff --git a/e2e/tests/performance/tagging.perf.spec.js b/e2e/tests/performance/tagging.perf.spec.js
new file mode 100644
index 00000000000..2e3b7c32ba0
--- /dev/null
+++ b/e2e/tests/performance/tagging.perf.spec.js
@@ -0,0 +1,273 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2023, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+Tests to verify plot tagging performance.
+*/
+
+const { test, expect } = require('../../pluginFixtures');
+const {
+  createDomainObjectWithDefaults,
+  setRealTimeMode,
+  setFixedTimeMode,
+  waitForPlotsToRender
+} = require('../../appActions');
+
+test.describe.fixme('Plot Tagging Performance', () => {
+  /**
+   * Given a canvas and a set of points, tags the points on the canvas.
+   * @param {import('@playwright/test').Page} page
+   * @param {HTMLCanvasElement} canvas a telemetry item with a plot
+   * @param {Number} xEnd a telemetry item with a plot
+   * @param {Number} yEnd a telemetry item with a plot
+   * @returns {Promise}
+   */
+  async function createTags({ page, canvas, xEnd = 700, yEnd = 480 }) {
+    await canvas.hover({ trial: true });
+
+    //Alt+Shift Drag Start to select some points to tag
+    await page.keyboard.down('Alt');
+    await page.keyboard.down('Shift');
+
+    await canvas.dragTo(canvas, {
+      sourcePosition: {
+        x: 1,
+        y: 1
+      },
+      targetPosition: {
+        x: xEnd,
+        y: yEnd
+      }
+    });
+
+    //Alt Drag End
+    await page.keyboard.up('Alt');
+    await page.keyboard.up('Shift');
+
+    //Wait for canvas to stablize.
+    await canvas.hover({ trial: true });
+
+    // add some tags
+    await page.getByText('Annotations').click();
+    await page.getByRole('button', { name: /Add Tag/ }).click();
+    await page.getByPlaceholder('Type to select tag').click();
+    await page.getByText('Driving').click();
+
+    await page.getByRole('button', { name: /Add Tag/ }).click();
+    await page.getByPlaceholder('Type to select tag').click();
+    await page.getByText('Science').click();
+  }
+
+  /**
+   * Given a telemetry item (e.g., a Sine Wave Generator) with a plot, tests that the plot can be tagged.
+   * @param {import('@playwright/test').Page} page
+   * @param {import('../../../../appActions').CreatedObjectInfo} telemetryItem a telemetry item with a plot
+   * @returns {Promise}
+   */
+  async function testTelemetryItem(page, telemetryItem) {
+    // Check that telemetry item also received the tag
+    await page.goto(telemetryItem.url);
+
+    await expect(page.getByText('No tags to display for this item')).toBeVisible();
+
+    const canvas = page.locator('canvas').nth(1);
+
+    //Wait for canvas to stablize.
+    await canvas.hover({ trial: true });
+
+    // click on the tagged plot point
+    await canvas.click({
+      position: {
+        x: 100,
+        y: 100
+      }
+    });
+
+    await expect(page.getByText('Science')).toBeVisible();
+    await expect(page.getByText('Driving')).toBeHidden();
+  }
+
+  /**
+   * Given a page, tests that tags are searchable, deletable, and persist across reloads.
+   * @param {import('@playwright/test').Page} page
+   * @returns {Promise}
+   */
+  async function basicTagsTests(page) {
+    // Search for Driving
+    await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
+
+    // Clicking elsewhere should cause annotation selection to be cleared
+    await expect(page.getByText('No tags to display for this item')).toBeVisible();
+
+    await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('driv');
+    // click on the search result
+    await page
+      .getByRole('searchbox', { name: 'OpenMCT Search' })
+      .getByText(/Sine Wave/)
+      .first()
+      .click();
+
+    // Delete Driving
+    await page.hover('[aria-label="Tag"]:has-text("Driving")');
+    await page.locator('[aria-label="Remove tag Driving"]').click();
+
+    // Search for Science
+    await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
+    await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('sc');
+    await expect(page.locator('[aria-label="Search Result"]').nth(0)).toContainText('Science');
+    await expect(page.locator('[aria-label="Search Result"]').nth(0)).not.toContainText('Drilling');
+
+    // Search for Driving
+    await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
+    await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('driv');
+    await expect(page.getByText('No results found')).toBeVisible();
+
+    //Reload Page
+    await page.reload({ waitUntil: 'domcontentloaded' });
+    // wait for plots to load
+    await waitForPlotsToRender(page);
+
+    await page.getByText('Annotations').click();
+    await expect(page.getByText('No tags to display for this item')).toBeVisible();
+
+    const canvas = page.locator('canvas').nth(1);
+    // click on the tagged plot point
+    await canvas.click({
+      position: {
+        x: 100,
+        y: 100
+      }
+    });
+
+    await expect(page.getByText('Science')).toBeVisible();
+    await expect(page.getByText('Driving')).toBeHidden();
+  }
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
+  });
+
+  test('Tags work with Overlay Plots', async ({ page }) => {
+    test.info().annotations.push({
+      type: 'issue',
+      description: 'https://github.com/nasa/openmct/issues/6822'
+    });
+    //Test.slow decorator is currently broken. Needs to be fixed in https://github.com/nasa/openmct/issues/5374
+    test.slow();
+
+    const overlayPlot = await createDomainObjectWithDefaults(page, {
+      type: 'Overlay Plot'
+    });
+
+    const alphaSineWave = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'Alpha Sine Wave',
+      parent: overlayPlot.uuid
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'Beta Sine Wave',
+      parent: overlayPlot.uuid
+    });
+
+    await page.goto(overlayPlot.url);
+
+    let canvas = page.locator('canvas').nth(1);
+
+    // Switch to real-time mode
+    // Adding tags should pause the plot
+    await setRealTimeMode(page);
+
+    await createTags({
+      page,
+      canvas
+    });
+
+    await setFixedTimeMode(page);
+
+    await basicTagsTests(page);
+    await testTelemetryItem(page, alphaSineWave);
+
+    // set to real time mode
+    await setRealTimeMode(page);
+
+    // Search for Science
+    await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
+    await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('sc');
+    // click on the search result
+    await page
+      .getByRole('searchbox', { name: 'OpenMCT Search' })
+      .getByText('Alpha Sine Wave')
+      .first()
+      .click();
+    // wait for plots to load
+    await expect(page.locator('.js-series-data-loaded')).toBeVisible();
+    // expect plot to be paused
+    await expect(page.locator('[title="Resume displaying real-time data"]')).toBeVisible();
+
+    await setFixedTimeMode(page);
+  });
+
+  test('Tags work with Plot View of telemetry items', async ({ page }) => {
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator'
+    });
+    const canvas = page.locator('canvas').nth(1);
+    await createTags({
+      page,
+      canvas
+    });
+    await basicTagsTests(page);
+  });
+
+  test('Tags work with Stacked Plots', async ({ page }) => {
+    const stackedPlot = await createDomainObjectWithDefaults(page, {
+      type: 'Stacked Plot'
+    });
+
+    const alphaSineWave = await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'Alpha Sine Wave',
+      parent: stackedPlot.uuid
+    });
+
+    await createDomainObjectWithDefaults(page, {
+      type: 'Sine Wave Generator',
+      name: 'Beta Sine Wave',
+      parent: stackedPlot.uuid
+    });
+
+    await page.goto(stackedPlot.url);
+
+    const canvas = page.locator('canvas').nth(1);
+
+    await createTags({
+      page,
+      canvas,
+      xEnd: 700,
+      yEnd: 215
+    });
+    await basicTagsTests(page);
+    await testTelemetryItem(page, alphaSineWave);
+  });
+});
diff --git a/src/plugins/plot/MctPlot.vue b/src/plugins/plot/MctPlot.vue
index 3123041cd71..35f7fa362e3 100644
--- a/src/plugins/plot/MctPlot.vue
+++ b/src/plugins/plot/MctPlot.vue
@@ -248,6 +248,7 @@ export default {
       highlights: [],
       annotatedPoints: [],
       annotationSelections: [],
+      annotationsEverLoaded: false,
       lockHighlightPoint: false,
       yKeyOptions: [],
       yAxisLabel: '',
@@ -394,7 +395,11 @@ export default {
     );
 
     this.openmct.objectViews.on('clearData', this.clearData);
-    this.$on('loadingComplete', this.loadAnnotations);
+    this.$on('loadingComplete', () => {
+      if (this.annotationViewingAndEditingAllowed) {
+        this.loadAnnotations();
+      }
+    });
     this.openmct.selection.on('change', this.updateSelection);
     this.yAxisListWithRange = [this.config.yAxis, ...this.config.additionalYAxes];
 
@@ -636,6 +641,7 @@ export default {
       if (rawAnnotationsForPlot) {
         this.annotatedPoints = this.findAnnotationPoints(rawAnnotationsForPlot);
       }
+      this.annotationsEverLoaded = true;
     },
     loadSeriesData(series) {
       //this check ensures that duplicate requests don't happen on load
@@ -789,6 +795,7 @@ export default {
       };
       this.config.xAxis.set('range', newRange);
       if (!isTick) {
+        this.annotatedPoints = [];
         this.clearPanZoomHistory();
         this.synchronizeIfBoundsMatch();
         this.loadMoreData(newRange, true);
@@ -1785,6 +1792,9 @@ export default {
       });
       this.config.xAxis.set('frozen', true);
       this.setStatus();
+      if (!this.annotationsEverLoaded) {
+        this.loadAnnotations();
+      }
     },
 
     resumeRealtimeData() {
diff --git a/src/plugins/plot/chart/MctChart.vue b/src/plugins/plot/chart/MctChart.vue
index 1cc3438aa2e..3bb67246dda 100644
--- a/src/plugins/plot/chart/MctChart.vue
+++ b/src/plugins/plot/chart/MctChart.vue
@@ -826,56 +826,32 @@ export default {
         );
       }
     },
-    annotatedPointWithinRange(annotatedPoint, xRange, yRange) {
-      if (!yRange) {
-        return false;
-      }
-
-      const xValue = annotatedPoint.series.getXVal(annotatedPoint.point);
-      const yValue = annotatedPoint.series.getYVal(annotatedPoint.point);
-
-      return (
-        xValue > xRange.min && xValue < xRange.max && yValue > yRange.min && yValue < yRange.max
-      );
-    },
     drawAnnotatedPoints(yAxisId) {
       // we should do this by series, and then plot all the points at once instead
       // of doing it one by one
       if (this.annotatedPoints && this.annotatedPoints.length) {
         const uniquePointsToDraw = [];
-        const xRange = this.config.xAxis.get('displayRange');
-        let yRange;
-        if (yAxisId === this.config.yAxis.get('id')) {
-          yRange = this.config.yAxis.get('displayRange');
-        } else if (this.config.additionalYAxes.length) {
-          const yAxisForId = this.config.additionalYAxes.find(
-            (yAxis) => yAxis.get('id') === yAxisId
-          );
-          yRange = yAxisForId.get('displayRange');
-        }
 
         const annotatedPoints = this.annotatedPoints.filter(
           this.matchByYAxisId.bind(this, yAxisId)
         );
         annotatedPoints.forEach((annotatedPoint) => {
-          // if the annotation is outside the range, don't draw it
-          if (this.annotatedPointWithinRange(annotatedPoint, xRange, yRange)) {
-            const canvasXValue = this.offset[yAxisId].xVal(
-              annotatedPoint.point,
-              annotatedPoint.series
-            );
-            const canvasYValue = this.offset[yAxisId].yVal(
-              annotatedPoint.point,
-              annotatedPoint.series
-            );
-            const pointToDraw = new Float32Array([canvasXValue, canvasYValue]);
-            const drawnPoint = uniquePointsToDraw.some((rawPoint) => {
-              return rawPoint[0] === pointToDraw[0] && rawPoint[1] === pointToDraw[1];
-            });
-            if (!drawnPoint) {
-              uniquePointsToDraw.push(pointToDraw);
-              this.drawAnnotatedPoint(annotatedPoint, pointToDraw);
-            }
+          // annotation points are all within range (checked in MctPlot with FlatBush), so we don't need to check
+          const canvasXValue = this.offset[yAxisId].xVal(
+            annotatedPoint.point,
+            annotatedPoint.series
+          );
+          const canvasYValue = this.offset[yAxisId].yVal(
+            annotatedPoint.point,
+            annotatedPoint.series
+          );
+          const pointToDraw = new Float32Array([canvasXValue, canvasYValue]);
+          const drawnPoint = uniquePointsToDraw.some((rawPoint) => {
+            return rawPoint[0] === pointToDraw[0] && rawPoint[1] === pointToDraw[1];
+          });
+          if (!drawnPoint) {
+            uniquePointsToDraw.push(pointToDraw);
+            this.drawAnnotatedPoint(annotatedPoint, pointToDraw);
           }
         });
       }

From 339640e0d61a02faa33e022218a413a9d074925e Mon Sep 17 00:00:00 2001
From: Jesse Mazzella <ozyx@users.noreply.github.com>
Date: Wed, 9 Aug 2023 14:42:09 -0700
Subject: [PATCH 7/9] cherry-pick(#6904): Check for null in DuplicateAction
 (#6911)

check for null before checking before hasOwnProperty

Co-authored-by: Scott Bell <scott@traclabs.com>
---
 src/plugins/duplicate/DuplicateTask.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/plugins/duplicate/DuplicateTask.js b/src/plugins/duplicate/DuplicateTask.js
index f79dc0bb79d..06c3e26bd42 100644
--- a/src/plugins/duplicate/DuplicateTask.js
+++ b/src/plugins/duplicate/DuplicateTask.js
@@ -221,6 +221,8 @@ export default class DuplicateTask {
       // parse reviver to replace identifiers
       clonedParent = JSON.parse(clonedParent, (key, value) => {
         if (
+          value !== null &&
+          value !== undefined &&
           Object.prototype.hasOwnProperty.call(value, 'key') &&
           Object.prototype.hasOwnProperty.call(value, 'namespace') &&
           value.key === oldId.key &&

From 92a8ab5279131c3853923b0a82399edfaccb512f Mon Sep 17 00:00:00 2001
From: Shefali <simplyrender@gmail.com>
Date: Fri, 11 Aug 2023 10:52:40 -0700
Subject: [PATCH 8/9] If there are no listeners for this clock then don't
 bother subscribing after getting the domain object details

---
 src/plugins/remoteClock/RemoteClock.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/plugins/remoteClock/RemoteClock.js b/src/plugins/remoteClock/RemoteClock.js
index 7faa3b9290f..2a73112f3a6 100644
--- a/src/plugins/remoteClock/RemoteClock.js
+++ b/src/plugins/remoteClock/RemoteClock.js
@@ -62,6 +62,9 @@ export default class RemoteClock extends DefaultClock {
     this.openmct.objects
       .get(this.identifier)
       .then((domainObject) => {
+        if (this.eventNames().length === 0) {
+          return;
+        }
         this.openmct.time.on('timeSystem', this._timeSystemChange);
         this.timeTelemetryObject = domainObject;
         this.metadata = this.openmct.telemetry.getMetadata(domainObject);

From c392634a3556872ace9d003e4da8f2d28055ef29 Mon Sep 17 00:00:00 2001
From: Shefali <simplyrender@gmail.com>
Date: Mon, 14 Aug 2023 09:18:08 -0700
Subject: [PATCH 9/9] Comment explaining the fix

---
 src/plugins/remoteClock/RemoteClock.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/plugins/remoteClock/RemoteClock.js b/src/plugins/remoteClock/RemoteClock.js
index 2a73112f3a6..5bfec818cf9 100644
--- a/src/plugins/remoteClock/RemoteClock.js
+++ b/src/plugins/remoteClock/RemoteClock.js
@@ -62,6 +62,10 @@ export default class RemoteClock extends DefaultClock {
     this.openmct.objects
       .get(this.identifier)
       .then((domainObject) => {
+        // The start method is called when at least one listener registers with the clock.
+        // When the clock is changed, listeners are unregistered from the clock and the stop method is called.
+        // Sometimes, the objects.get call above does not resolve before the stop method is called.
+        // So when we proceed with the clock subscription below, we first need to ensure that there is at least one listener for our clock.
         if (this.eventNames().length === 0) {
           return;
         }