From aa7a5ca22202491578cf488a85b5a16dd4fd283f Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Fri, 22 Dec 2023 15:48:53 -0800
Subject: [PATCH 01/49] bump to 5.3.0

update core to v3.2.0
---
 config.js                                 | 4 ++--
 package.json                              | 4 ++--
 pom.xml                                   | 2 +-
 src/services/session/SessionURLHandler.js | 2 ++
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/config.js b/config.js
index bbfc180..4ce7efc 100644
--- a/config.js
+++ b/config.js
@@ -486,8 +486,8 @@
          * they do!
          */
         assetPath: 'node_modules/openmct/dist',
-        // proxyUrl: 'http://localhost:8080/',
-        // useDeveloperStorage: true
+        proxyUrl: 'http://localhost:8080/',
+        useDeveloperStorage: true
     };
 
     window.openmctMCWSConfig = openmctMCWSConfig;
diff --git a/package.json b/package.json
index 6424e41..17c7ed5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "openmct-mcws",
-  "version": "5.2.0-rc2",
+  "version": "5.3.0",
   "description": "Open MCT for MCWS",
   "devDependencies": {
     "@braintree/sanitize-url": "6.0.2",
@@ -32,7 +32,7 @@
     "mini-css-extract-plugin": "2.6.0",
     "moment": "2.29.4",
     "node-bourbon": "^4.2.3",
-    "openmct": "nasa/openmct#omm-r5.2.0-rc2",
+    "openmct": "nasa/openmct#omm-release/5.3",
     "openmct-legacy-support": "akhenry/openmct-legacy-support#omm-r5.1.0-rc1",
     "printj": "^1.2.1",
     "raw-loader": "^0.5.1",
diff --git a/pom.xml b/pom.xml
index 7582a5f..310b835 100644
--- a/pom.xml
+++ b/pom.xml
@@ -6,7 +6,7 @@
     <groupId>gov.nasa.arc.wtd</groupId>
     <artifactId>openmct-client</artifactId>
     <name>Open MCT for MCWS Client</name>
-    <version>5.2.0-rc2</version>
+    <version>5.3.0</version>
     <packaging>war</packaging>
 
     <properties>
diff --git a/src/services/session/SessionURLHandler.js b/src/services/session/SessionURLHandler.js
index 126eb75..9004f0e 100644
--- a/src/services/session/SessionURLHandler.js
+++ b/src/services/session/SessionURLHandler.js
@@ -14,6 +14,8 @@ export default class SessionURLHandler {
         );
 
         this.didSessionParamsChange = this.didSessionParamsChange.bind(this);
+
+        this.updateSession();
     }
 
     getParams () {

From 26a57b70273df95c51030a8207a8e6faae348f61 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Tue, 26 Dec 2023 13:26:20 -0800
Subject: [PATCH 02/49] upgrade to use vue 3 compatibility layer

---
 .webpack/webpack.common.js | 11 ++++++++++-
 .webpack/webpack.dev.js    |  5 -----
 .webpack/webpack.prod.js   |  8 +-------
 package.json               |  6 ++++--
 4 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/.webpack/webpack.common.js b/.webpack/webpack.common.js
index fc7d337..8f4da83 100644
--- a/.webpack/webpack.common.js
+++ b/.webpack/webpack.common.js
@@ -45,6 +45,7 @@ const config = {
             "EventEmitter": "eventemitter3",
             "bourbon": "bourbon.scss",
             "printj": path.join(__dirname, '..', "node_modules/printj/dist/printj.min.js"),
+            "vue": path.join(__dirname, '..', "node_modules/@vue/compat/dist/vue.esm-bundler.js"),
             "styles": path.join(__dirname, '..', "node_modules/openmct/src/styles"),
             /**
              * VISTA Paths
@@ -104,7 +105,15 @@ const config = {
             },
             {
                 test: /\.vue$/,
-                use: 'vue-loader'
+                loader: 'vue-loader',
+                options: {
+                    compilerOptions: {
+                        whitespace: 'preserve',
+                        compatConfig: {
+                            MODE: 2
+                        }
+                    }
+                }
             },
             {
                 test: /\.html$/,
diff --git a/.webpack/webpack.dev.js b/.webpack/webpack.dev.js
index 6fd5fa1..c17932b 100644
--- a/.webpack/webpack.dev.js
+++ b/.webpack/webpack.dev.js
@@ -21,11 +21,6 @@ module.exports = merge(common, {
     entry: {
         config: './config.js'
     },
-    resolve: {
-        alias: {
-            vue: path.join(__dirname, '..', 'node_modules/vue/dist/vue.js'),
-        }
-    },
     plugins: [
         new CopyWebpackPlugin({
             patterns: [
diff --git a/.webpack/webpack.prod.js b/.webpack/webpack.prod.js
index adc6b9e..6767fc4 100644
--- a/.webpack/webpack.prod.js
+++ b/.webpack/webpack.prod.js
@@ -11,11 +11,5 @@ const path = require('path');
 
 /** @type {import('webpack').Configuration} */
 module.exports =  merge(common, {
-    mode: 'production',
-    resolve: {
-        alias: {
-            "vue": path.join(__dirname, '..', 'node_modules/vue/dist/vue.min.js'),
-        }
-    },
-    devtool: 'source-map'
+    mode: 'production'
 });
diff --git a/package.json b/package.json
index 17c7ed5..93b4409 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,8 @@
   "description": "Open MCT for MCWS",
   "devDependencies": {
     "@braintree/sanitize-url": "6.0.2",
+    "@vue/compat": "^3.1.0",
+    "@vue/compiler-sfc": "^3.1.0",
     "axios": "^0.21.2",
     "babel-loader": "8.2.3",
     "babel-plugin-istanbul": "6.1.1",
@@ -41,8 +43,8 @@
     "sass-loader": "12.6.0",
     "source-map-loader": "^0.2.4",
     "style-loader": "^1.0.1",
-    "vue": "2.6.14",
-    "vue-loader": "15.9.8",
+    "vue": "^3.1.0",
+    "vue-loader": "^16.0.0",
     "vue-template-compiler": "2.6.14",
     "webpack": "5.76.3",
     "webpack-cli": "5.0.0",

From b2019d677a8003c5c15c5a43ba114b58922d7335 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Tue, 26 Dec 2023 13:32:52 -0800
Subject: [PATCH 03/49] add element to body for vue 3 component mounting

---
 index.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/index.html b/index.html
index 23013c8..2ec3d9d 100644
--- a/index.html
+++ b/index.html
@@ -20,5 +20,6 @@
     <link rel="icon" type="image/png" href="node_modules/openmct/dist/favicons/favicon-16x16.png" sizes="16x16" type="image/x-icon">
 </head>
 <body class="user-environ">
+    <div id="app"></div>
 </body>
 </html>

From fba4c412eb266cdf5ad779dcaeefd0982853b700 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Tue, 26 Dec 2023 14:11:18 -0800
Subject: [PATCH 04/49] fix `resolve-url-loader` error

---
 .webpack/webpack.common.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/.webpack/webpack.common.js b/.webpack/webpack.common.js
index 8f4da83..3386af2 100644
--- a/.webpack/webpack.common.js
+++ b/.webpack/webpack.common.js
@@ -73,7 +73,7 @@ const config = {
              /**
              * Telemetry Table Components
             **/
-            "openmct.tables.components.Table": path.join(__dirname, '..', "node_modules/openmct/src/plugins/telemetryTable/components/table.vue"),
+            "openmct.tables.components.Table": path.join(__dirname, '..', "node_modules/openmct/src/plugins/telemetryTable/components/TableComponent.vue"),
             "openmct.tables.components.TableConfiguration": path.join(__dirname, '..', "node_modules/openmct/src/plugins/telemetryTable/components/table-configuration.vue"),
         }
     },
@@ -99,8 +99,13 @@ const config = {
                     {
                         loader: 'css-loader'
                     },
-                    'resolve-url-loader',
-                    'sass-loader'
+                    {
+                        loader: 'resolve-url-loader'
+                    },
+                    {
+                        loader: 'sass-loader',
+                        options: { sourceMap: true }
+                    }
                 ]
             },
             {

From e357c4b659dd0ccda7fe74bd4b9a30e88796375a Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Tue, 26 Dec 2023 14:45:02 -0800
Subject: [PATCH 05/49] fix name of extended component changed in core

---
 .webpack/webpack.common.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.webpack/webpack.common.js b/.webpack/webpack.common.js
index 3386af2..a040138 100644
--- a/.webpack/webpack.common.js
+++ b/.webpack/webpack.common.js
@@ -74,7 +74,7 @@ const config = {
              * Telemetry Table Components
             **/
             "openmct.tables.components.Table": path.join(__dirname, '..', "node_modules/openmct/src/plugins/telemetryTable/components/TableComponent.vue"),
-            "openmct.tables.components.TableConfiguration": path.join(__dirname, '..', "node_modules/openmct/src/plugins/telemetryTable/components/table-configuration.vue"),
+            "openmct.tables.components.TableConfiguration": path.join(__dirname, '..', "node_modules/openmct/src/plugins/telemetryTable/components/TableConfiguration.vue"),
         }
     },
     plugins: [

From ca3cf6fe51ee7513e8d55ca334b3d73cdc5b7015 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Tue, 26 Dec 2023 15:07:57 -0800
Subject: [PATCH 06/49] fix resolving of `@` alias in core

---
 .webpack/webpack.common.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.webpack/webpack.common.js b/.webpack/webpack.common.js
index a040138..683d510 100644
--- a/.webpack/webpack.common.js
+++ b/.webpack/webpack.common.js
@@ -41,6 +41,8 @@ const config = {
              * Globals
             **/
             "openmct": path.join(__dirname, '..', "node_modules/openmct/dist/openmct.js"),
+            // this is a core openmct alias required to resolve '@' in core components
+            "@": path.join(__dirname, '..', "node_modules/openmct/src"),
             "saveAs": "file-saver/src/FileSaver.js",
             "EventEmitter": "eventemitter3",
             "bourbon": "bourbon.scss",

From cfd61181fb2a2dde3ff4bbe661a94cc2598b890c Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Tue, 26 Dec 2023 16:02:57 -0800
Subject: [PATCH 07/49] key should be bound to v-for

---
 src/channelTable/channelTableSetPlugin/ChannelTableSet.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/channelTable/channelTableSetPlugin/ChannelTableSet.vue b/src/channelTable/channelTableSetPlugin/ChannelTableSet.vue
index 456922b..2e44dbb 100644
--- a/src/channelTable/channelTableSetPlugin/ChannelTableSet.vue
+++ b/src/channelTable/channelTableSetPlugin/ChannelTableSet.vue
@@ -11,9 +11,9 @@
         <tbody>
             <template
                 v-for="ladTable in ladTableObjects"
+                :key="ladTable.key"
             >
                 <tr
-                    :key="ladTable.key"
                     class="c-table__group-header js-lad-table-set__table-headers"
                 >
                     <td colspan="10">

From 1080624b2748cfff2c8fba44557f79333def5261 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Wed, 27 Dec 2023 14:35:13 -0800
Subject: [PATCH 08/49] disable overlay on dev build

---
 .webpack/webpack.dev.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.webpack/webpack.dev.js b/.webpack/webpack.dev.js
index c17932b..5e0e113 100644
--- a/.webpack/webpack.dev.js
+++ b/.webpack/webpack.dev.js
@@ -66,7 +66,8 @@ module.exports = merge(common, {
         }],
         client: {
             progress: true,
-            overlay: true
+            // overlay: true
+            overlay: false
         },
         proxy: {
             '/mcws-test': {

From e8850328f576b9c3815dbf6793f8f4db46ff83c1 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Wed, 27 Dec 2023 14:35:45 -0800
Subject: [PATCH 09/49] display loading or sessions, not both

---
 .../sessionSelector/historicalSessionSelector.vue               | 2 +-
 src/realtimeSessions/components/RealtimeSessionSelector.vue     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/multipleHistoricalSessions/sessionSelector/historicalSessionSelector.vue b/src/multipleHistoricalSessions/sessionSelector/historicalSessionSelector.vue
index e8ea483..4621ece 100644
--- a/src/multipleHistoricalSessions/sessionSelector/historicalSessionSelector.vue
+++ b/src/multipleHistoricalSessions/sessionSelector/historicalSessionSelector.vue
@@ -9,7 +9,7 @@
             </div>
         </template>
 
-        <template v-if="!isLoading">
+        <template v-else>
             <div class="c-overlay__top-bar">
                 <div class="c-overlay__dialog-title">Select Historical Sessions</div>
                 <div class="c-overlay__dialog-hint">Select one or more sessions to use for historical queries. Note that sessions may only be selected within one host at a time.</div>
diff --git a/src/realtimeSessions/components/RealtimeSessionSelector.vue b/src/realtimeSessions/components/RealtimeSessionSelector.vue
index 678034b..5873a67 100644
--- a/src/realtimeSessions/components/RealtimeSessionSelector.vue
+++ b/src/realtimeSessions/components/RealtimeSessionSelector.vue
@@ -11,7 +11,7 @@
         </div>
     </template>
 
-    <template>
+    <template v-else>
         <div class="c-overlay__top-bar">
             <div class="c-overlay__dialog-title">Select Real-time Data Source</div>
         </div>

From 6b9fb0bd43589166189804b05fc9c15b1e8d774a Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Thu, 28 Dec 2023 13:45:59 -0800
Subject: [PATCH 10/49] conver import to vue 3 mount

---
 .../importWithDatasetsModifier.js                   | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/actionModifiers/ImportExportWithDatasets/importWithDatasetsModifier.js b/src/actionModifiers/ImportExportWithDatasets/importWithDatasetsModifier.js
index fbd0afc..84e69f0 100644
--- a/src/actionModifiers/ImportExportWithDatasets/importWithDatasetsModifier.js
+++ b/src/actionModifiers/ImportExportWithDatasets/importWithDatasetsModifier.js
@@ -1,5 +1,5 @@
 import ImportWithDatasetsFormComponent from './ImportWithDatasetsFormComponent.vue';
-import Vue from 'vue';
+import createApp from 'vue';
 import DatasetCache from 'services/dataset/DatasetCache';
 import Types from 'types/types';
 
@@ -9,6 +9,7 @@ function importWithDatasetsModifier(openmct) {
     let datasets;
     let referencedDatasets;
     let component;
+    let destroyForm = null;
 
     const importAsJSONAction = openmct.actions._allActions['import.JSON'];
 
@@ -75,7 +76,7 @@ function importWithDatasetsModifier(openmct) {
                 onSave(domainObject, changes);
             })
             .catch(error => {
-                component.$destroy();
+                destroyForm?.();
             });
     }
 
@@ -124,8 +125,7 @@ function importWithDatasetsModifier(openmct) {
     function getImportWithDatasetsFormController(openmct) {
         return {
             show(element, model, onChange) {
-                component = new Vue({
-                    el: element,
+                component = createApp({
                     components: {
                         ImportWithDatasetsFormComponent
                     },
@@ -151,10 +151,10 @@ function importWithDatasetsModifier(openmct) {
                     }
                 });
 
-                return component;
+                destroyForm = () => component.unmount();
             },
             destroy() {
-                component.$destroy();
+                destroyForm?.();
                 resetAction();
             }
         };
@@ -164,6 +164,7 @@ function importWithDatasetsModifier(openmct) {
         datasets = undefined;
         referencedDatasets = undefined;
         component = undefined;
+        destroyForm = undefined;
     }
 
     function getReferencedDatasetsFromImport(json) {

From 4fdab4471a1222041dc1afdd32b05a2344dd0174 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Thu, 28 Dec 2023 14:09:11 -0800
Subject: [PATCH 11/49] convert alarms view to vue 3 mount

---
 src/alarmsView/AlarmsViewProvider.js | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/alarmsView/AlarmsViewProvider.js b/src/alarmsView/AlarmsViewProvider.js
index 949dc5c..ee9f12e 100644
--- a/src/alarmsView/AlarmsViewProvider.js
+++ b/src/alarmsView/AlarmsViewProvider.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import createApp from 'vue';
 import TableComponent from 'openmct.tables.components.Table';
 import AlarmsTable from './AlarmsTable.js';
 
@@ -18,6 +18,7 @@ export default class AlarmsViewProvider {
     view(domainObject, objectPath) {
         let table = new AlarmsTable(domainObject, openmct);
         let component;
+        let _destroy = null;
         let markingProp = {
             enable: true,
             useAlternateControlBar: false,
@@ -26,8 +27,7 @@ export default class AlarmsViewProvider {
         };
         const view = {
             show: function (element, editMode) {
-                component = new Vue({
-                    el: element,
+                component = createApp({
                     components: {
                         TableComponent
                     },
@@ -53,6 +53,8 @@ export default class AlarmsViewProvider {
                             :view="view"
                         />`
                 });
+
+                _destroy = () => component.unmount;
             },
             onEditModeChange(editMode) {
                 component.isEditing = editMode;
@@ -62,7 +64,7 @@ export default class AlarmsViewProvider {
             },
             getViewContext() {
                 if (component) {
-                    let context = component.$refs.tableComponent.getViewContext();
+                    const context = component.$refs.tableComponent.getViewContext();
 
                     context['vista.alarmsView'] = true;
                     context.clearOutOfAlarmRows = () => {
@@ -78,8 +80,7 @@ export default class AlarmsViewProvider {
                 }
             },
             destroy: function (element) {
-                component.$destroy();
-                component = undefined;
+                _destroy?.();
             }
         };
 

From 64ecc505bc03e61a6480a51f0513337bac175c13 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Thu, 28 Dec 2023 14:49:53 -0800
Subject: [PATCH 12/49] convert cell format view to vue 3 mount

---
 .../CellFormatConfigurationComponent.js       | 39 --------
 .../CellFormatConfigurationComponent.vue      | 50 ++++++++++
 .../ChannelTableFormatViewProvider.js         | 99 +++++++++----------
 .../cell-format-configuration.html            |  9 --
 4 files changed, 97 insertions(+), 100 deletions(-)
 delete mode 100644 src/channelTable/channelTablePlugin/CellFormatConfigurationComponent.js
 create mode 100644 src/channelTable/channelTablePlugin/CellFormatConfigurationComponent.vue
 delete mode 100644 src/channelTable/channelTablePlugin/cell-format-configuration.html

diff --git a/src/channelTable/channelTablePlugin/CellFormatConfigurationComponent.js b/src/channelTable/channelTablePlugin/CellFormatConfigurationComponent.js
deleted file mode 100644
index 108a4e6..0000000
--- a/src/channelTable/channelTablePlugin/CellFormatConfigurationComponent.js
+++ /dev/null
@@ -1,39 +0,0 @@
-define(['./cell-format-configuration.html'], function (CellFormatConfigurationTemplate) {
-    return {
-        inject: ['tableConfiguration', 'openmct'],
-        template: CellFormatConfigurationTemplate,
-        data() {
-            let configuration = this.tableConfiguration.getConfiguration();
-            let selection = this.openmct.selection.get()[0][0];
-
-            configuration.cellFormat = configuration.cellFormat || {};
-            let rowFormat = configuration.cellFormat[selection.context.row] || {};
-
-            return {
-                isEditing: this.openmct.editor.isEditing(),
-                cellFormat: rowFormat[selection.context.column]
-            }
-        },
-        methods: {
-            toggleEdit(isEditing) {
-                this.isEditing = isEditing;
-            },
-            formatCell(event) {
-                let selection = this.openmct.selection.get()[0][0];
-                let configuration = this.tableConfiguration.getConfiguration();
-
-                configuration.cellFormat = configuration.cellFormat || {};
-                configuration.cellFormat[selection.context.row] = configuration.cellFormat[selection.context.row] || {};
-                configuration.cellFormat[selection.context.row][selection.context.column] = event.currentTarget.value;
-                this.tableConfiguration.updateConfiguration(configuration);
-            }
-        },
-        mounted() {
-            this.openmct.editor.on('isEditing', this.toggleEdit);
-        },
-        destroyed() {
-            this.tableConfiguration.destroy();
-            this.openmct.editor.off('isEditing', this.toggleEdit);
-        }
-    }
-});
diff --git a/src/channelTable/channelTablePlugin/CellFormatConfigurationComponent.vue b/src/channelTable/channelTablePlugin/CellFormatConfigurationComponent.vue
new file mode 100644
index 0000000..1d89413
--- /dev/null
+++ b/src/channelTable/channelTablePlugin/CellFormatConfigurationComponent.vue
@@ -0,0 +1,50 @@
+<template>
+<div class="c-properties" v-if="isEditing">
+  <div class="c-properties__header">Cell Format</div>
+  <ul class="c-properties__section">
+    <li class="c-properties__row">
+      <div class="c-properties__label" title="Printf formatting for the selected cell"><label for="cellPrintfFormat">Format</label></div>
+      <div class="c-properties__value"><input id="cellPrintfFormat" type="text" @change="formatCell" :value="cellFormat"></div>
+    </li>
+  </ul>
+</div>
+</template>
+
+<script>
+export default {
+  inject: ['tableConfiguration', 'openmct'],
+  data() {
+    let configuration = this.tableConfiguration.getConfiguration();
+    let selection = this.openmct.selection.get()[0][0];
+
+    configuration.cellFormat = configuration.cellFormat || {};
+    let rowFormat = configuration.cellFormat[selection.context.row] || {};
+
+    return {
+      isEditing: this.openmct.editor.isEditing(),
+      cellFormat: rowFormat[selection.context.column]
+    }
+  },
+  methods: {
+    toggleEdit(isEditing) {
+      this.isEditing = isEditing;
+    },
+    formatCell(event) {
+      let selection = this.openmct.selection.get()[0][0];
+      let configuration = this.tableConfiguration.getConfiguration();
+
+      configuration.cellFormat = configuration.cellFormat || {};
+      configuration.cellFormat[selection.context.row] = configuration.cellFormat[selection.context.row] || {};
+      configuration.cellFormat[selection.context.row][selection.context.column] = event.currentTarget.value;
+      this.tableConfiguration.updateConfiguration(configuration);
+    }
+  },
+  mounted() {
+    this.openmct.editor.on('isEditing', this.toggleEdit);
+  },
+  beforeUnmount() {
+    this.tableConfiguration.destroy();
+    this.openmct.editor.off('isEditing', this.toggleEdit);
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/channelTable/channelTablePlugin/ChannelTableFormatViewProvider.js b/src/channelTable/channelTablePlugin/ChannelTableFormatViewProvider.js
index d7e5b7a..6d3d358 100644
--- a/src/channelTable/channelTablePlugin/ChannelTableFormatViewProvider.js
+++ b/src/channelTable/channelTablePlugin/ChannelTableFormatViewProvider.js
@@ -1,56 +1,51 @@
-define([
-    './CellFormatConfigurationComponent',
-    'openmct.tables.TelemetryTableConfiguration',
-    'vue'
-], function (
-    CellFormatConfigurationComponent,
-    TelemetryTableConfiguration,
-    Vue
-) {
+import CellFormatConfigurationComponent from './CellFormatConfigurationComponent.vue';
+import TelemetryTableConfiguration from 'openmct.tables.TelemetryTableConfiguration';
+import createApp from 'vue';
 
-    function ChannelTableFormatViewProvider(openmct) {
-        return {
-            key: 'channel-list-format',
-            name: 'Format',
-            canView: function (selection) {
-                let selectionPath = selection[0];
-                if (selectionPath && selectionPath.length > 1) {
-                    let parentObject = selectionPath[1].context.item;
-                    let selectedContext = selectionPath[0].context;
-                    return parentObject && 
-                        parentObject.type === 'vista.chanTableGroup' &&
-                        selectedContext.type === 'table-cell';
-                }
-                return false;
+export default function ChannelTableFormatViewProvider(openmct) {
+  return {
+    key: 'channel-list-format',
+    name: 'Format',
+    canView: function (selection) {
+      let selectionPath = selection[0];
+      if (selectionPath && selectionPath.length > 1) {
+        let parentObject = selectionPath[1].context.item;
+        let selectedContext = selectionPath[0].context;
+        return parentObject && 
+          parentObject.type === 'vista.chanTableGroup' &&
+          selectedContext.type === 'table-cell';
+      }
+      return false;
+    },
+    view: function (selection) {
+      let component;
+      let _destroy = null;
+      let domainObject = selection[0][1].context.item;
+      const tableConfiguration = new TelemetryTableConfiguration(domainObject, openmct);
+
+      return {
+        show: function (element) {
+          component = createApp({
+            provide: {
+              openmct,
+              tableConfiguration
+            },
+            components: {
+              CellFormatConfiguration: CellFormatConfigurationComponent
             },
-            view: function (selection) {
-                let component;
-                let domainObject = selection[0][1].context.item;
-                const tableConfiguration = new TelemetryTableConfiguration(domainObject, openmct);
-                return {
-                    show: function (element) {
-                        component = new Vue({
-                            provide: {
-                                openmct,
-                                tableConfiguration
-                            },
-                            components: {
-                                CellFormatConfiguration: CellFormatConfigurationComponent
-                            },
-                            template: '<cell-format-configuration></cell-format-configuration>',
-                            el: element
-                        });
-                    },
-                    priority: function () {
-                        return openmct.priority.HIGH;
-                    },
-                    destroy: function () {
-                        component.$destroy();
-                        component = undefined;
-                    }
-                }
-            }
+            template: '<cell-format-configuration></cell-format-configuration>',
+          });
+
+          _destroy = () => component.unmount();
+        },
+        priority: function () {
+          return openmct.priority.HIGH;
+        },
+        destroy: function () {
+          _destroy?.();
         }
+      }
     }
-    return ChannelTableFormatViewProvider;
-});
+  }
+}
+
diff --git a/src/channelTable/channelTablePlugin/cell-format-configuration.html b/src/channelTable/channelTablePlugin/cell-format-configuration.html
deleted file mode 100644
index e403ed3..0000000
--- a/src/channelTable/channelTablePlugin/cell-format-configuration.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<div class="c-properties" v-if="isEditing">
-    <div class="c-properties__header">Cell Format</div>
-    <ul class="c-properties__section">
-        <li class="c-properties__row">
-            <div class="c-properties__label" title="Printf formatting for the selected cell"><label for="cellPrintfFormat">Format</label></div>
-            <div class="c-properties__value"><input id="cellPrintfFormat" type="text" @change="formatCell" :value="cellFormat"></div>
-        </li>
-    </ul>
-</div>
\ No newline at end of file

From e5ebd06e183d8140d02028392228fa6693465129 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Thu, 28 Dec 2023 15:03:51 -0800
Subject: [PATCH 13/49] convert ChannelTableSet to vue 3 mount

---
 .../channelTableSetPlugin/ChannelRow.vue             |  3 ++-
 .../channelTableSetPlugin/ChannelTableSet.vue        |  2 +-
 .../channelTableSetPlugin/ChannelTableSetView.js     | 12 +++++-------
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/channelTable/channelTableSetPlugin/ChannelRow.vue b/src/channelTable/channelTableSetPlugin/ChannelRow.vue
index 545604a..0fefb72 100644
--- a/src/channelTable/channelTableSetPlugin/ChannelRow.vue
+++ b/src/channelTable/channelTableSetPlugin/ChannelRow.vue
@@ -22,6 +22,7 @@
     const BLANK_VALUE = '---';
     export default {
         inject: ['openmct', 'currentView'],
+        emits: ['rowContextClick'],
         props: {
             domainObject: {
                 type: Object,
@@ -105,7 +106,7 @@
             this.telemetryCollection.on('clear', this.resetValues);
             this.telemetryCollection.load();
         },
-        destroyed() {
+        beforeUnmount() {
             this.openmct.time.off('timeSystem', this.updateTimeSystem);
             this.telemetryCollection.off('add', this.setLatestValues);
             this.telemetryCollection.off('clear', this.resetValues);
diff --git a/src/channelTable/channelTableSetPlugin/ChannelTableSet.vue b/src/channelTable/channelTableSetPlugin/ChannelTableSet.vue
index 2e44dbb..d2ba8b3 100644
--- a/src/channelTable/channelTableSetPlugin/ChannelTableSet.vue
+++ b/src/channelTable/channelTableSetPlugin/ChannelTableSet.vue
@@ -63,7 +63,7 @@ export default {
         this.setTimesystem(this.openmct.time.timeSystem());
         this.composition.load();
     },
-    destroyed() {
+    beforeUnmount() {
         this.composition.off('add', this.addLadTable);
         this.composition.off('remove', this.removeLadTable);
         this.composition.off('reorder', this.reorderLadTables);
diff --git a/src/channelTable/channelTableSetPlugin/ChannelTableSetView.js b/src/channelTable/channelTableSetPlugin/ChannelTableSetView.js
index 17ef935..729727f 100644
--- a/src/channelTable/channelTableSetPlugin/ChannelTableSetView.js
+++ b/src/channelTable/channelTableSetPlugin/ChannelTableSetView.js
@@ -1,6 +1,5 @@
 import ChannelTableSet from './ChannelTableSet.vue';
-
-import Vue from 'vue';
+import createApp from 'vue';
 
 export default class ChannelTableSetView {
     constructor(openmct, domainObject, objectPath) {
@@ -8,11 +7,11 @@ export default class ChannelTableSetView {
         this.domainObject = domainObject;
         this.objectPath = objectPath;
         this.component = undefined;
+        this.destroy = null;
     }
 
     show(element) {
-        this.component = new Vue({
-            el: element,
+        this.component = createApp({
             components: {
                 ChannelTableSet
             },
@@ -38,8 +37,7 @@ export default class ChannelTableSetView {
         return this.component.$refs.channelTableSet.getViewContext();
     }
 
-    destroy(element) {
-        this.component.$destroy();
-        this.component = undefined;
+    destroy() {
+        this.destroy?.();
     }
 }

From e5c26f4655828cf5a03d494378cf08b1782659c0 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Thu, 28 Dec 2023 15:27:31 -0800
Subject: [PATCH 14/49] convert alarmsAutoclear to vue 3 mount

---
 src/alarmsView/AlarmsAutoclearViewProvider.js | 51 +++++++++++++++++++
 src/alarmsView/plugin.js                      | 43 +---------------
 2 files changed, 53 insertions(+), 41 deletions(-)
 create mode 100644 src/alarmsView/AlarmsAutoclearViewProvider.js

diff --git a/src/alarmsView/AlarmsAutoclearViewProvider.js b/src/alarmsView/AlarmsAutoclearViewProvider.js
new file mode 100644
index 0000000..e66f3fa
--- /dev/null
+++ b/src/alarmsView/AlarmsAutoclearViewProvider.js
@@ -0,0 +1,51 @@
+import createApp from 'vue';
+import AlarmsViewTimeoutComponent from './alarms-view-timout.vue';
+import TelemetryTableConfiguration from 'openmct.tables.TelemetryTableConfiguration';
+
+export default class AlarmsAutoClearViewProvider {
+  constructor(openmct) {
+    this.key = 'vista.alarmsView-configuration';
+    this.name = 'Autoclear';
+    this.openmct = openmct;
+    this.component = undefined;
+    this.destroy = null;
+  }
+
+  canView(selection) {
+    if (selection.length === 0) {
+        return false;
+    }
+
+    const domainObject = selection[0][0].context.item;
+
+    return domainObject?.type === 'vista.alarmsView';
+  }
+
+  view(selection) {
+    const domainObject = selection[0][0].context.item;
+    const tableConfiguration = new TelemetryTableConfiguration(domainObject, openmct);
+
+    return {
+      show: function (element) {
+        this.component = createApp({
+          provide: {
+            openmct,
+            tableConfiguration
+          },
+          components: {
+            AlarmsViewTimeout: AlarmsViewTimeoutComponent
+          },
+          template: '<alarms-view-timeout></alarms-view-timeout>'
+        });
+
+        this.destroy = () => this.component.unmount();
+      },
+      priority: function () {
+        return openmct.priority.HIGH;
+      },
+      destroy: function () {
+        this.destroy?.();
+      }
+    }
+  }
+}
diff --git a/src/alarmsView/plugin.js b/src/alarmsView/plugin.js
index 96698b2..bd98f45 100644
--- a/src/alarmsView/plugin.js
+++ b/src/alarmsView/plugin.js
@@ -1,13 +1,11 @@
 import AlarmsViewProvider from './AlarmsViewProvider';
 import AlarmsViewActions from './AlarmsViewActions';
-import AlarmsViewTimeoutComponent from './alarms-view-timeout.vue';
 import VistaTableConfigurationProvider from '../tables/VistaTableConfigurationProvider';
-import TelemetryTableConfiguration from 'openmct.tables.TelemetryTableConfiguration';
-import Vue from 'vue';
 
 export default function AlarmsViewPlugin() {
     return function install(openmct) {
         openmct.objectViews.addProvider(new AlarmsViewProvider(openmct));
+        openmct.inspectorViews.addProvider(new AlarmsAutoclearViewProvider(openmct));
 
         AlarmsViewActions.forEach(action => {
             openmct.actions.register(action);
@@ -25,44 +23,7 @@ export default function AlarmsViewPlugin() {
                 };
             }
         });
-        openmct.inspectorViews.addProvider({
-            key: 'vista.alarmsView-configuration',
-            name: 'Autoclear',
-            canView: function (selection) {
-                if (selection.length === 0) {
-                    return false;
-                }
-                let object = selection[0][0].context.item;
-                return object && object.type === 'vista.alarmsView';
-            },
-            view: function (selection) {
-                let component;
-                let domainObject = selection[0][0].context.item;
-                const tableConfiguration = new TelemetryTableConfiguration(domainObject, openmct);
-                return {
-                    show: function (element) {
-                        component = new Vue({
-                            provide: {
-                                openmct,
-                                tableConfiguration
-                            },
-                            components: {
-                                AlarmsViewTimeout: AlarmsViewTimeoutComponent
-                            },
-                            template: '<alarms-view-timeout></alarms-view-timeout>',
-                            el: element
-                        });
-                    },
-                    priority: function () {
-                      return openmct.priority.HIGH;
-                    },
-                    destroy: function () {
-                        component.$destroy();
-                        component = undefined;
-                    }
-                }
-            }
-        });
+
         openmct.inspectorViews.addProvider(new VistaTableConfigurationProvider(
             'vista.alarm-view-configuration', 
             'Config',

From 4bbf9cbce692684f42814c9aa9b8910c5edbd494 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Thu, 28 Dec 2023 15:31:41 -0800
Subject: [PATCH 15/49] rename files

---
 .../{alarms-view-timeout.vue => AlarmsAutoclear.vue}        | 0
 src/alarmsView/AlarmsAutoclearViewProvider.js               | 6 +++---
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename src/alarmsView/{alarms-view-timeout.vue => AlarmsAutoclear.vue} (100%)

diff --git a/src/alarmsView/alarms-view-timeout.vue b/src/alarmsView/AlarmsAutoclear.vue
similarity index 100%
rename from src/alarmsView/alarms-view-timeout.vue
rename to src/alarmsView/AlarmsAutoclear.vue
diff --git a/src/alarmsView/AlarmsAutoclearViewProvider.js b/src/alarmsView/AlarmsAutoclearViewProvider.js
index e66f3fa..e620977 100644
--- a/src/alarmsView/AlarmsAutoclearViewProvider.js
+++ b/src/alarmsView/AlarmsAutoclearViewProvider.js
@@ -1,5 +1,5 @@
 import createApp from 'vue';
-import AlarmsViewTimeoutComponent from './alarms-view-timout.vue';
+import AlarmsAutoclear from './AlarmsAutoclear.vue';
 import TelemetryTableConfiguration from 'openmct.tables.TelemetryTableConfiguration';
 
 export default class AlarmsAutoClearViewProvider {
@@ -33,9 +33,9 @@ export default class AlarmsAutoClearViewProvider {
             tableConfiguration
           },
           components: {
-            AlarmsViewTimeout: AlarmsViewTimeoutComponent
+            AlarmsAutoclear
           },
-          template: '<alarms-view-timeout></alarms-view-timeout>'
+          template: '<AlarmsAutoclear />'
         });
 
         this.destroy = () => this.component.unmount();

From 309dfe4c1110bb994fe3e00eb2bed704f2ec2bac Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Thu, 28 Dec 2023 15:47:07 -0800
Subject: [PATCH 16/49] forgot to import after name change

---
 src/alarmsView/plugin.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/alarmsView/plugin.js b/src/alarmsView/plugin.js
index bd98f45..245e609 100644
--- a/src/alarmsView/plugin.js
+++ b/src/alarmsView/plugin.js
@@ -1,4 +1,5 @@
 import AlarmsViewProvider from './AlarmsViewProvider';
+import AlarmsAutoclearViewProvider from './AlarmsAutoclearViewProvider';
 import AlarmsViewActions from './AlarmsViewActions';
 import VistaTableConfigurationProvider from '../tables/VistaTableConfigurationProvider';
 

From 63a1eb403e923742068647b22644d974cd788d65 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Thu, 28 Dec 2023 18:01:18 -0800
Subject: [PATCH 17/49] commit to full vue 3 upgrade with compat

---
 .webpack/webpack.common.js | 5 +++--
 package.json               | 8 +++-----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/.webpack/webpack.common.js b/.webpack/webpack.common.js
index 683d510..c07222f 100644
--- a/.webpack/webpack.common.js
+++ b/.webpack/webpack.common.js
@@ -47,7 +47,6 @@ const config = {
             "EventEmitter": "eventemitter3",
             "bourbon": "bourbon.scss",
             "printj": path.join(__dirname, '..', "node_modules/printj/dist/printj.min.js"),
-            "vue": path.join(__dirname, '..', "node_modules/@vue/compat/dist/vue.esm-bundler.js"),
             "styles": path.join(__dirname, '..', "node_modules/openmct/src/styles"),
             /**
              * VISTA Paths
@@ -84,7 +83,9 @@ const config = {
             __VISTA_VERSION__: `'${packageDefinition.version}'`,
             __VISTA_BUILD_DATE__: `'${new Date()}'`,
             __VISTA_REVISION__: `'${gitRevision}'`,
-            __VISTA_BUILD_BRANCH__: `'${gitBranch}'`
+            __VISTA_BUILD_BRANCH__: `'${gitBranch}'`,
+            __VUE_OPTIONS_API__: true, // enable/disable Options API support, default: true
+            __VUE_PROD_DEVTOOLS__: false // enable/disable devtools support in production, default: false
         }),
         new VueLoaderPlugin(),
         new MiniCssExtractPlugin({
diff --git a/package.json b/package.json
index 93b4409..8aae1cc 100644
--- a/package.json
+++ b/package.json
@@ -4,8 +4,7 @@
   "description": "Open MCT for MCWS",
   "devDependencies": {
     "@braintree/sanitize-url": "6.0.2",
-    "@vue/compat": "^3.1.0",
-    "@vue/compiler-sfc": "^3.1.0",
+    "@vue/compiler-sfc": "3.3.8",
     "axios": "^0.21.2",
     "babel-loader": "8.2.3",
     "babel-plugin-istanbul": "6.1.1",
@@ -43,9 +42,8 @@
     "sass-loader": "12.6.0",
     "source-map-loader": "^0.2.4",
     "style-loader": "^1.0.1",
-    "vue": "^3.1.0",
-    "vue-loader": "^16.0.0",
-    "vue-template-compiler": "2.6.14",
+    "vue": "3.3.8",
+    "vue-loader": "16.8.3",
     "webpack": "5.76.3",
     "webpack-cli": "5.0.0",
     "webpack-dev-server": "4.11.1",

From f3960702ea8120cbed466376f9ac66f807faa07b Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Thu, 28 Dec 2023 18:03:57 -0800
Subject: [PATCH 18/49] fix createApp imports from 'vue'

---
 .../ImportExportWithDatasets/importWithDatasetsModifier.js      | 2 +-
 src/alarmsView/AlarmsAutoclearViewProvider.js                   | 2 +-
 src/alarmsView/AlarmsViewProvider.js                            | 2 +-
 .../channelTablePlugin/ChannelTableFormatViewProvider.js        | 2 +-
 src/channelTable/channelTableSetPlugin/ChannelTableSetView.js   | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/actionModifiers/ImportExportWithDatasets/importWithDatasetsModifier.js b/src/actionModifiers/ImportExportWithDatasets/importWithDatasetsModifier.js
index 84e69f0..0a7415c 100644
--- a/src/actionModifiers/ImportExportWithDatasets/importWithDatasetsModifier.js
+++ b/src/actionModifiers/ImportExportWithDatasets/importWithDatasetsModifier.js
@@ -1,5 +1,5 @@
 import ImportWithDatasetsFormComponent from './ImportWithDatasetsFormComponent.vue';
-import createApp from 'vue';
+import { createApp } from 'vue';
 import DatasetCache from 'services/dataset/DatasetCache';
 import Types from 'types/types';
 
diff --git a/src/alarmsView/AlarmsAutoclearViewProvider.js b/src/alarmsView/AlarmsAutoclearViewProvider.js
index e620977..f9e5bb7 100644
--- a/src/alarmsView/AlarmsAutoclearViewProvider.js
+++ b/src/alarmsView/AlarmsAutoclearViewProvider.js
@@ -1,4 +1,4 @@
-import createApp from 'vue';
+import { createApp } from 'vue';
 import AlarmsAutoclear from './AlarmsAutoclear.vue';
 import TelemetryTableConfiguration from 'openmct.tables.TelemetryTableConfiguration';
 
diff --git a/src/alarmsView/AlarmsViewProvider.js b/src/alarmsView/AlarmsViewProvider.js
index ee9f12e..a11d53f 100644
--- a/src/alarmsView/AlarmsViewProvider.js
+++ b/src/alarmsView/AlarmsViewProvider.js
@@ -1,4 +1,4 @@
-import createApp from 'vue';
+import { createApp } from 'vue';
 import TableComponent from 'openmct.tables.components.Table';
 import AlarmsTable from './AlarmsTable.js';
 
diff --git a/src/channelTable/channelTablePlugin/ChannelTableFormatViewProvider.js b/src/channelTable/channelTablePlugin/ChannelTableFormatViewProvider.js
index 6d3d358..1ce0a0c 100644
--- a/src/channelTable/channelTablePlugin/ChannelTableFormatViewProvider.js
+++ b/src/channelTable/channelTablePlugin/ChannelTableFormatViewProvider.js
@@ -1,6 +1,6 @@
 import CellFormatConfigurationComponent from './CellFormatConfigurationComponent.vue';
 import TelemetryTableConfiguration from 'openmct.tables.TelemetryTableConfiguration';
-import createApp from 'vue';
+import { createApp } from 'vue';
 
 export default function ChannelTableFormatViewProvider(openmct) {
   return {
diff --git a/src/channelTable/channelTableSetPlugin/ChannelTableSetView.js b/src/channelTable/channelTableSetPlugin/ChannelTableSetView.js
index 729727f..e0d7fba 100644
--- a/src/channelTable/channelTableSetPlugin/ChannelTableSetView.js
+++ b/src/channelTable/channelTableSetPlugin/ChannelTableSetView.js
@@ -1,5 +1,5 @@
 import ChannelTableSet from './ChannelTableSet.vue';
-import createApp from 'vue';
+import { createApp } from 'vue';
 
 export default class ChannelTableSetView {
     constructor(openmct, domainObject, objectPath) {

From fe2f6cace8020c94c42c8f0c489e7830757d7566 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Fri, 29 Dec 2023 11:18:04 -0800
Subject: [PATCH 19/49] convert channel tables to vue 3

---
 .../channelTablePlugin/ChannelTableViewProvider.js   | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/channelTable/channelTablePlugin/ChannelTableViewProvider.js b/src/channelTable/channelTablePlugin/ChannelTableViewProvider.js
index a764d52..4c48cfa 100644
--- a/src/channelTable/channelTablePlugin/ChannelTableViewProvider.js
+++ b/src/channelTable/channelTablePlugin/ChannelTableViewProvider.js
@@ -1,6 +1,6 @@
 import ChannelTable from './ChannelTable';
 import TableComponent from 'openmct.tables.components.Table';
-import Vue from 'vue';
+import { createApp } from 'vue';
 
 export default class ChannelTableViewProvider { 
     constructor(openmct) {
@@ -8,6 +8,8 @@ export default class ChannelTableViewProvider {
         this.key = 'vista.channel-list';
         this.name = 'Channel List';
         this.cssClass = 'icon-tabular-realtime';
+        this.component = undefined;
+        this.destroy = null;
 
         this.view = this.view.bind(this);
     }
@@ -32,7 +34,7 @@ export default class ChannelTableViewProvider {
         const table = new ChannelTable(domainObject, this.openmct);
         const view = {
             show(element, isEditing) {
-                component = new Vue({
+                this.component = createApp({
                     data() {
                         return {
                             isEditing,
@@ -49,7 +51,6 @@ export default class ChannelTableViewProvider {
                         objectPath,
                         currentView: view
                     },
-                    el: element,
                     template: `
                     <table-component
                         class="js-channel-list-view"
@@ -61,6 +62,8 @@ export default class ChannelTableViewProvider {
                         :view="view"
                     ></table-component>`
                 });
+
+                this.destroy = () => this.component.unmount();
             },
             onEditModeChange(isEditing) {
                 component.isEditing = isEditing;
@@ -78,8 +81,7 @@ export default class ChannelTableViewProvider {
                 }
             },
             destroy() {
-                component.$destroy();
-                component = undefined;
+                this.destroy?.();
             }
         }
 

From d400b4e449ff9201e40cf34a148a035840b05fed Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Fri, 29 Dec 2023 12:01:10 -0800
Subject: [PATCH 20/49] helper for mounting vue components

---
 src/utils/mountVueComponent.js | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 src/utils/mountVueComponent.js

diff --git a/src/utils/mountVueComponent.js b/src/utils/mountVueComponent.js
new file mode 100644
index 0000000..bca3724
--- /dev/null
+++ b/src/utils/mountVueComponent.js
@@ -0,0 +1,15 @@
+import { createApp, defineComponent } from 'vue';
+
+export default function mount(component, { props, children, element } = {}) {
+  const el = element ?? document.createElement('div');
+
+  const vueComponent = defineComponent(component);
+  const app = createApp(vueComponent);
+  const componentInstance = app.mount(el);
+
+  return {
+    componentInstance,
+    destroy: () => app.unmount(),
+    el
+  };
+}

From 8edd904f65bb60b56e2cd2ce0d477e132c5fd030 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Fri, 29 Dec 2023 13:10:02 -0800
Subject: [PATCH 21/49] switch to use mountVueComponent utility

---
 .webpack/webpack.common.js                    |  1 +
 .../importWithDatasetsModifier.js             | 21 ++++++++++++------
 src/alarmsView/AlarmsAutoclearViewProvider.js | 22 +++++++++++++------
 src/alarmsView/AlarmsViewProvider.js          | 18 +++++++++++----
 .../ChannelTableFormatViewProvider.js         | 18 ++++++++++-----
 .../ChannelTableViewProvider.js               | 20 ++++++++++++-----
 .../ChannelTableSetView.js                    | 22 ++++++++++++++-----
 7 files changed, 89 insertions(+), 33 deletions(-)

diff --git a/.webpack/webpack.common.js b/.webpack/webpack.common.js
index c07222f..459611d 100644
--- a/.webpack/webpack.common.js
+++ b/.webpack/webpack.common.js
@@ -55,6 +55,7 @@ const config = {
             "services": path.join(__dirname, '..', "src/services"),
             "lib": path.join(__dirname, '..', "src/lib"),
             "tables": path.join(__dirname, '..', "src/tables"),
+            "utils": path.join(__dirname, '..', "src/utils"),
             /**
              * Open MCT Folder View Components
             **/
diff --git a/src/actionModifiers/ImportExportWithDatasets/importWithDatasetsModifier.js b/src/actionModifiers/ImportExportWithDatasets/importWithDatasetsModifier.js
index 0a7415c..3dacf8b 100644
--- a/src/actionModifiers/ImportExportWithDatasets/importWithDatasetsModifier.js
+++ b/src/actionModifiers/ImportExportWithDatasets/importWithDatasetsModifier.js
@@ -1,5 +1,5 @@
 import ImportWithDatasetsFormComponent from './ImportWithDatasetsFormComponent.vue';
-import { createApp } from 'vue';
+import mount from 'utils/mountVueComponent';
 import DatasetCache from 'services/dataset/DatasetCache';
 import Types from 'types/types';
 
@@ -9,7 +9,7 @@ function importWithDatasetsModifier(openmct) {
     let datasets;
     let referencedDatasets;
     let component;
-    let destroyForm = null;
+    let _destroy = null;
 
     const importAsJSONAction = openmct.actions._allActions['import.JSON'];
 
@@ -76,7 +76,7 @@ function importWithDatasetsModifier(openmct) {
                 onSave(domainObject, changes);
             })
             .catch(error => {
-                destroyForm?.();
+                _destroy?.();
             });
     }
 
@@ -125,7 +125,7 @@ function importWithDatasetsModifier(openmct) {
     function getImportWithDatasetsFormController(openmct) {
         return {
             show(element, model, onChange) {
-                component = createApp({
+                const componentDefinition = {
                     components: {
                         ImportWithDatasetsFormComponent
                     },
@@ -149,12 +149,19 @@ function importWithDatasetsModifier(openmct) {
                             this.hasImport = true
                         }
                     }
-                });
+                };
+                const componentOptions = { element };
 
-                destroyForm = () => component.unmount();
+                const {
+                  componentInstance,
+                  destroy,
+                  el
+                } = mount(componentDefinition, componentOptions)
+
+                _destroy = destroy;
             },
             destroy() {
-                destroyForm?.();
+                _destroy?.();
                 resetAction();
             }
         };
diff --git a/src/alarmsView/AlarmsAutoclearViewProvider.js b/src/alarmsView/AlarmsAutoclearViewProvider.js
index f9e5bb7..936d9e5 100644
--- a/src/alarmsView/AlarmsAutoclearViewProvider.js
+++ b/src/alarmsView/AlarmsAutoclearViewProvider.js
@@ -1,4 +1,4 @@
-import { createApp } from 'vue';
+import mount from 'utils/mountVueComponent';
 import AlarmsAutoclear from './AlarmsAutoclear.vue';
 import TelemetryTableConfiguration from 'openmct.tables.TelemetryTableConfiguration';
 
@@ -7,8 +7,7 @@ export default class AlarmsAutoClearViewProvider {
     this.key = 'vista.alarmsView-configuration';
     this.name = 'Autoclear';
     this.openmct = openmct;
-    this.component = undefined;
-    this.destroy = null;
+    this._destroy = null;
   }
 
   canView(selection) {
@@ -27,7 +26,7 @@ export default class AlarmsAutoClearViewProvider {
 
     return {
       show: function (element) {
-        this.component = createApp({
+        const componentDefinition = {
           provide: {
             openmct,
             tableConfiguration
@@ -36,15 +35,24 @@ export default class AlarmsAutoClearViewProvider {
             AlarmsAutoclear
           },
           template: '<AlarmsAutoclear />'
-        });
+        };
+        const componentOptions = {
+          element
+        };
 
-        this.destroy = () => this.component.unmount();
+        const {
+          componentInstance,
+          destroy,
+          el
+        } = mount(componentDefinition, componentOptions);
+
+        this._destroy = destroy;
       },
       priority: function () {
         return openmct.priority.HIGH;
       },
       destroy: function () {
-        this.destroy?.();
+        this._destroy?.();
       }
     }
   }
diff --git a/src/alarmsView/AlarmsViewProvider.js b/src/alarmsView/AlarmsViewProvider.js
index a11d53f..15180fb 100644
--- a/src/alarmsView/AlarmsViewProvider.js
+++ b/src/alarmsView/AlarmsViewProvider.js
@@ -1,4 +1,4 @@
-import { createApp } from 'vue';
+import mount from 'utils/mountVueComponent';
 import TableComponent from 'openmct.tables.components.Table';
 import AlarmsTable from './AlarmsTable.js';
 
@@ -27,7 +27,7 @@ export default class AlarmsViewProvider {
         };
         const view = {
             show: function (element, editMode) {
-                component = createApp({
+                const componentDefinition = {
                     components: {
                         TableComponent
                     },
@@ -52,9 +52,19 @@ export default class AlarmsViewProvider {
                             :marking="markingProp"
                             :view="view"
                         />`
-                });
+                };
+                const componentOptions = {
+                  element
+                };
 
-                _destroy = () => component.unmount;
+                const {
+                  componentInstance,
+                  destroy,
+                  el
+                } = mount(componentDefinition, componentOptions);
+
+                component = componentInstance;
+                _destroy = destroy;
             },
             onEditModeChange(editMode) {
                 component.isEditing = editMode;
diff --git a/src/channelTable/channelTablePlugin/ChannelTableFormatViewProvider.js b/src/channelTable/channelTablePlugin/ChannelTableFormatViewProvider.js
index 1ce0a0c..a8b3374 100644
--- a/src/channelTable/channelTablePlugin/ChannelTableFormatViewProvider.js
+++ b/src/channelTable/channelTablePlugin/ChannelTableFormatViewProvider.js
@@ -1,6 +1,6 @@
 import CellFormatConfigurationComponent from './CellFormatConfigurationComponent.vue';
 import TelemetryTableConfiguration from 'openmct.tables.TelemetryTableConfiguration';
-import { createApp } from 'vue';
+import mount from 'utils/mountVueComponent';
 
 export default function ChannelTableFormatViewProvider(openmct) {
   return {
@@ -18,14 +18,13 @@ export default function ChannelTableFormatViewProvider(openmct) {
       return false;
     },
     view: function (selection) {
-      let component;
       let _destroy = null;
       let domainObject = selection[0][1].context.item;
       const tableConfiguration = new TelemetryTableConfiguration(domainObject, openmct);
 
       return {
         show: function (element) {
-          component = createApp({
+          const componentDefinition = {
             provide: {
               openmct,
               tableConfiguration
@@ -34,9 +33,18 @@ export default function ChannelTableFormatViewProvider(openmct) {
               CellFormatConfiguration: CellFormatConfigurationComponent
             },
             template: '<cell-format-configuration></cell-format-configuration>',
-          });
+          };
+          const componentOptions = {
+            element
+          };
 
-          _destroy = () => component.unmount();
+          const {
+            componentInstance,
+            destroy,
+            el
+          } = mount(componentDefinition, componentOptions);
+
+          _destroy = destroy;
         },
         priority: function () {
           return openmct.priority.HIGH;
diff --git a/src/channelTable/channelTablePlugin/ChannelTableViewProvider.js b/src/channelTable/channelTablePlugin/ChannelTableViewProvider.js
index 4c48cfa..cb94efe 100644
--- a/src/channelTable/channelTablePlugin/ChannelTableViewProvider.js
+++ b/src/channelTable/channelTablePlugin/ChannelTableViewProvider.js
@@ -1,6 +1,6 @@
 import ChannelTable from './ChannelTable';
 import TableComponent from 'openmct.tables.components.Table';
-import { createApp } from 'vue';
+import mount from 'utils/mountVueComponent';
 
 export default class ChannelTableViewProvider { 
     constructor(openmct) {
@@ -34,7 +34,7 @@ export default class ChannelTableViewProvider {
         const table = new ChannelTable(domainObject, this.openmct);
         const view = {
             show(element, isEditing) {
-                this.component = createApp({
+                const componentDefinition = {
                     data() {
                         return {
                             isEditing,
@@ -61,9 +61,19 @@ export default class ChannelTableViewProvider {
                         :allowSorting="false"
                         :view="view"
                     ></table-component>`
-                });
-
-                this.destroy = () => this.component.unmount();
+                };
+                const componentOptions = {
+                    element
+                };
+                
+                const {
+                    componentInstance,
+                    destroy,
+                    el
+                } = mount(componentDefinition, componentOptions);
+                
+                component = componentInstance;
+                _destroy = destroy;
             },
             onEditModeChange(isEditing) {
                 component.isEditing = isEditing;
diff --git a/src/channelTable/channelTableSetPlugin/ChannelTableSetView.js b/src/channelTable/channelTableSetPlugin/ChannelTableSetView.js
index e0d7fba..fcc2452 100644
--- a/src/channelTable/channelTableSetPlugin/ChannelTableSetView.js
+++ b/src/channelTable/channelTableSetPlugin/ChannelTableSetView.js
@@ -1,5 +1,5 @@
 import ChannelTableSet from './ChannelTableSet.vue';
-import { createApp } from 'vue';
+import mount from 'utils/mountVueComponent';
 
 export default class ChannelTableSetView {
     constructor(openmct, domainObject, objectPath) {
@@ -7,11 +7,11 @@ export default class ChannelTableSetView {
         this.domainObject = domainObject;
         this.objectPath = objectPath;
         this.component = undefined;
-        this.destroy = null;
+        this._destroy = null;
     }
 
     show(element) {
-        this.component = createApp({
+        const componentDefinition = {
             components: {
                 ChannelTableSet
             },
@@ -26,7 +26,19 @@ export default class ChannelTableSetView {
                 };
             },
             template: '<channel-table-set ref="channelTableSet" :domain-object="domainObject"></channel-table-set>'
-        });
+        };
+        const componentOptions = {
+            element
+        };
+        
+        const {
+            componentInstance,
+            destroy,
+            el
+        } = mount(componentDefinition, componentOptions);
+        
+        this.component = componentInstance;
+        this._destroy = destroy;
     }
 
     getViewContext() {
@@ -38,6 +50,6 @@ export default class ChannelTableSetView {
     }
 
     destroy() {
-        this.destroy?.();
+        this._destroy?.();
     }
 }

From 7306475c071ceb814dedc2e79e544f1f694dd057 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Thu, 4 Jan 2024 17:16:17 -0800
Subject: [PATCH 22/49] convert rest of view providers to use vue 3 mount

---
 .../ChannelTableViewProvider.js               |  10 +-
 src/clearDataIndicator/plugin.js              |  17 +--
 .../CommandEventsViewProvider.js              |  90 ++++++++------
 src/containerView/FolderGridViewProvider.js   |  26 ++--
 src/containerView/FolderListViewProvider.js   |  28 +++--
 .../UrlField/UrlFieldFormController.js        |  56 +++++----
 src/dictionaryView/dictionaryViewProvider.js  |  30 +++--
 .../EVRViewLevelsConfigurationViewProvider.js |  29 +++--
 src/evrView/EVRViewProvider.js                |  28 +++--
 .../FrameEventFilterViewProvider.js           |  30 +++--
 .../frameAccountabilityViewProvider.js        |  23 +++-
 .../FrameWatchConfigurationViewProvider.js    |  34 ++++--
 src/framesummary/FrameWatchViewProvider.js    |  29 +++--
 src/globalFilters/plugin.js                   |  17 ++-
 src/mcwsIndicator/MCWSIndicator.vue           |   3 +-
 src/mcwsIndicator/MCWSIndicatorSpec.js        |  65 +++++-----
 src/mcwsIndicator/plugin.js                   |  44 ++++---
 src/messagesView/MessagesViewProvider.js      |  32 +++--
 src/metadataAction/metadataAction.js          |  88 ++++++++------
 src/multipleHistoricalSessions/plugin.js      |  61 ++++++----
 src/packetQuery/PacketQueryViewProvider.js    |  26 ++--
 .../PacketSummaryViewProvider.js              |  29 +++--
 .../DataProductInspectorViewProvider.js       |  58 +++++++++
 src/product-status/DataProductViewProvider.js |  34 ++++--
 src/product-status/plugin.js                  |  54 ++-------
 src/realtimeIndicator/plugin.js               |  44 +++----
 src/realtimeSessions/plugin.js                |  42 +++----
 src/tables/VistaTableConfigurationProvider.js | 111 ++++++++++--------
 28 files changed, 701 insertions(+), 437 deletions(-)
 create mode 100644 src/product-status/DataProductInspectorViewProvider.js

diff --git a/src/channelTable/channelTablePlugin/ChannelTableViewProvider.js b/src/channelTable/channelTablePlugin/ChannelTableViewProvider.js
index cb94efe..8a336e5 100644
--- a/src/channelTable/channelTablePlugin/ChannelTableViewProvider.js
+++ b/src/channelTable/channelTablePlugin/ChannelTableViewProvider.js
@@ -8,8 +8,6 @@ export default class ChannelTableViewProvider {
         this.key = 'vista.channel-list';
         this.name = 'Channel List';
         this.cssClass = 'icon-tabular-realtime';
-        this.component = undefined;
-        this.destroy = null;
 
         this.view = this.view.bind(this);
     }
@@ -24,14 +22,16 @@ export default class ChannelTableViewProvider {
 
     view(domainObject, objectPath) {
         let component;
-        let markingProp = {
+        let _destroy = null;
+
+        const markingProp = {
             enable: true,
             useAlternateControlBar: false,
             rowName: '',
             rowNamePlural: ''
         };
-
         const table = new ChannelTable(domainObject, this.openmct);
+
         const view = {
             show(element, isEditing) {
                 const componentDefinition = {
@@ -91,7 +91,7 @@ export default class ChannelTableViewProvider {
                 }
             },
             destroy() {
-                this.destroy?.();
+                _destroy?.();
             }
         }
 
diff --git a/src/clearDataIndicator/plugin.js b/src/clearDataIndicator/plugin.js
index 7395acc..d3394c9 100644
--- a/src/clearDataIndicator/plugin.js
+++ b/src/clearDataIndicator/plugin.js
@@ -1,16 +1,11 @@
-import Vue from 'vue';
+import mount from 'utils/mountVueComponent';
 import ClearDataIndicator from './indicator/clearDataIndicator.vue';
 
 export default function plugin(globalStalenessMs) {
     return function install(openmct) {
-        let indicator = {
-            element: document.createElement('div')
-        };
-
         openmct.indicators.add(indicator);
         openmct.on('start', () => {
-            let component  = new Vue ({
-                el: indicator.element,
+            const componentDefinition = {
                 provide: {
                     openmct,
                     globalStalenessMs
@@ -19,7 +14,13 @@ export default function plugin(globalStalenessMs) {
                     ClearDataIndicator
                 },
                 template: '<ClearDataIndicator />'
-            });
+            };
+            
+            const {
+              componentInstance,
+              destroy,
+              el
+            } = mount(componentDefinition);
         });
     };
 }
diff --git a/src/commandEventsView/CommandEventsViewProvider.js b/src/commandEventsView/CommandEventsViewProvider.js
index 0b7b4c5..15a4bb4 100644
--- a/src/commandEventsView/CommandEventsViewProvider.js
+++ b/src/commandEventsView/CommandEventsViewProvider.js
@@ -1,6 +1,6 @@
 import CommandEventsTable from './CommandEventsTable.js';
 import TableComponent from 'openmct.tables.components.Table';
-import Vue from 'vue';
+import mount from 'utils/mountVueComponent';
 
 export default class CommandEventsViewProvider {
     constructor(openmct) {
@@ -16,48 +16,63 @@ export default class CommandEventsViewProvider {
     }
 
     view(domainObject, objectPath) {
-        let table = new CommandEventsTable(domainObject, openmct);
         let component;
-        let markingProp = {
+        let _destroy = null;
+
+        const table = new CommandEventsTable(domainObject, openmct);
+        const markingProp = {
             enable: true,
             useAlternateControlBar: false,
             rowName: '',
             rowNamePlural: ''
         };
+
         const view = {
             show: function (element, editMode) {
-                component = new Vue({
-                    el: element,
-                    components: {
-                        TableComponent
-                    },
-                    data() {
-                        return {
-                            isEditing: editMode,
-                            markingProp,
-                            view
-                        };
-                    },
-                    provide: {
-                        openmct,
-                        table,
-                        objectPath,
-                        currentView: view
-                    },
-                    template: `
-                        <table-component
-                            ref="tableComponent"
-                            class="v-data-products"
-                            :allowSorting="true"
-                            :isEditing="isEditing"
-                            :marking="markingProp"
-                            :view="view"
-                        >
-                            <template slot="buttons">
-                            </template>
-                        </table-component>
-                    `
-                });
+                const componentDefinition = {
+                  components: {
+                      TableComponent
+                  },
+                  data() {
+                      return {
+                          isEditing: editMode,
+                          markingProp,
+                          view
+                      };
+                  },
+                  provide: {
+                      openmct,
+                      table,
+                      objectPath,
+                      currentView: view
+                  },
+                  template: `
+                      <table-component
+                          ref="tableComponent"
+                          class="v-data-products"
+                          :allowSorting="true"
+                          :isEditing="isEditing"
+                          :marking="markingProp"
+                          :view="view"
+                      >
+                          <template slot="buttons">
+                          </template>
+                      </table-component>
+                  `
+                };
+
+                const componentOptions = {
+                    element
+                };
+
+                const {
+                  componentInstance,
+                  destroy,
+                  el
+                } = mount(componentDefinition, componentOptions);
+                
+                component = componentInstance;
+                _destroy = destroy;
             },
             onEditModeChange(editMode) {
                 component.isEditing = editMode;
@@ -74,9 +89,8 @@ export default class CommandEventsViewProvider {
                     };
                 }
             },
-            destroy: function (element) {
-                component.$destroy();
-                component = undefined;
+            destroy: function () {
+                _destroy?.();
             }
         };
 
diff --git a/src/containerView/FolderGridViewProvider.js b/src/containerView/FolderGridViewProvider.js
index e3b32ff..7f618a0 100644
--- a/src/containerView/FolderGridViewProvider.js
+++ b/src/containerView/FolderGridViewProvider.js
@@ -1,5 +1,5 @@
 import FolderGridViewComponent from 'openmct.views.FolderGridViewComponent';
-import Vue from 'vue';
+import mount from 'utils/mountVueComponent';
 
 export default class FolderGridView {
     constructor(openmct, types) {
@@ -16,12 +16,11 @@ export default class FolderGridView {
     }
 
     view(domainObject, objectPath) {
-        let component;
+        let _destroy = null;
 
         return {
             show: function (element) {
-                component = new Vue({
-                    el: element,
+                const componentDefinition = {
                     components: {
                         gridViewComponent: FolderGridViewComponent
                     },
@@ -30,11 +29,22 @@ export default class FolderGridView {
                         domainObject
                     },
                     template: '<grid-view-component></grid-view-component>'
-                });
+                };
+
+                const componentOptions = {
+                    element
+                };
+
+                const {
+                    componentInstance,
+                    destroy,
+                    el
+                } = mount(componentDefinition, componentOptions);
+
+                _destroy = destroy;
             },
-            destroy: function (element) {
-                component.$destroy();
-                component = undefined;
+            destroy: function () {
+                _destroy?.();
             }
         };
     }
diff --git a/src/containerView/FolderListViewProvider.js b/src/containerView/FolderListViewProvider.js
index 4800670..184bb47 100644
--- a/src/containerView/FolderListViewProvider.js
+++ b/src/containerView/FolderListViewProvider.js
@@ -1,5 +1,5 @@
 import FolderListViewComponent from 'openmct.views.FolderListViewComponent';
-import Vue from 'vue';
+import mount from 'utils/mountVueComponent';
 
 export default class FolderListView {
     constructor(openmct, types) {
@@ -16,25 +16,35 @@ export default class FolderListView {
     }
 
     view(domainObject, objectPath) {
-        let component;
+        let _destroy = null;
 
         return {
             show: function (element) {
-                component = new Vue({
-                    el: element,
+                const componentDefinition = {
                     components: {
-                        listViewComponent: FolderListViewComponent
+                      listViewComponent: FolderListViewComponent
                     },
                     provide: {
                         openmct,
                         domainObject
                     },
                     template: '<list-view-component></list-view-component>'
-                });
+                };
+
+                const componentOptions = {
+                    element
+                };
+
+                const {
+                    componentInstance,
+                    destroy,
+                    el
+                } = mount(componentDefinition, componentOptions);
+
+                _destroy = destroy;
             },
-            destroy: function (element) {
-                component.$destroy();
-                component = undefined;
+            destroy: function () {
+                _destroy?.();
             }
         };
     }
diff --git a/src/customForms/UrlField/UrlFieldFormController.js b/src/customForms/UrlField/UrlFieldFormController.js
index 10ba03e..e1e343d 100644
--- a/src/customForms/UrlField/UrlFieldFormController.js
+++ b/src/customForms/UrlField/UrlFieldFormController.js
@@ -1,35 +1,41 @@
 import UrlField from './UrlField.vue'
-import Vue from 'vue';
+import mount from 'utils/mountVueComponent';
 
 export default function UrlFieldFormController(openmct) {
-  let _component;
+  let _destroy = null;
 
   return {
     show(element, model, onChange) {
-      _component = new Vue(
-        {
-          el: element,
-          components: {
-            UrlField
-          },
-          provide: {
-            openmct
-          },
-          data() {
-            return {
-              model,
-              onChange
-            };
-          },
-          template: `<UrlField :model="model" @onChange="onChange" />`
-        }
-      );
+      const componentDefinition = {
+        components: {
+          UrlField
+        },
+        provide: {
+          openmct
+        },
+        data() {
+          return {
+            model,
+            onChange
+          };
+        },
+        template: `<UrlField :model="model" @onChange="onChange" />`
+      };
+      
+      const componentOptions = {
+          element
+      };
+      
+      const {
+          componentInstance,
+          destroy,
+          el
+      } = mount(componentDefinition, componentOptions);
+      
+      _destroy = destroy;
     },
-    destroy: function (element) {
-      if (_component) {
-        _component.$destroy();
-        _component = undefined;
-      }
+    destroy: function () {
+      _destroy?.();
     }
   };
 }
diff --git a/src/dictionaryView/dictionaryViewProvider.js b/src/dictionaryView/dictionaryViewProvider.js
index 5a7b505..9cf53a2 100644
--- a/src/dictionaryView/dictionaryViewProvider.js
+++ b/src/dictionaryView/dictionaryViewProvider.js
@@ -1,6 +1,6 @@
 import DictionaryView from './components/dictionaryView.vue';
 import DictionaryViewTable from './dictionaryViewTable.js';
-import Vue from 'vue';
+import mount from 'utils/mountVueComponent';
 
 export default class DictionaryViewProvider {
     constructor(openmct) {
@@ -17,8 +17,9 @@ export default class DictionaryViewProvider {
 
     view(domainObject, objectPath) {
         let component;
+        let _destroy = null;
 
-        let table = new DictionaryViewTable(domainObject, openmct);
+        const table = new DictionaryViewTable(domainObject, openmct);
         const markingProp = {
             enable: true,
             useAlternateControlBar: false,
@@ -28,8 +29,7 @@ export default class DictionaryViewProvider {
 
         const view = {
             show: function (element, editMode) {
-                component =  new Vue({
-                    el: element,
+                const componentDefinition = {
                     components: {
                         DictionaryView
                     },
@@ -58,8 +58,21 @@ export default class DictionaryViewProvider {
                         >
                             <template v-slot:buttons></template>
                         </dictionary-view>
-                    `,
-                });
+                    `
+                };
+                
+                const componentOptions = {
+                    element
+                };
+                
+                const {
+                    componentInstance,
+                    destroy,
+                    el
+                } = mount(componentDefinition, componentOptions);
+                
+                component = componentInstance;
+                _destroy = destroy;
             },
             onEditModeChange(editMode) {
                 component.isEditing = editMode;
@@ -70,9 +83,8 @@ export default class DictionaryViewProvider {
             getViewContext() {
                 return {};
             },
-            destroy: function (element) {
-                component.$destroy();
-                component = undefined;
+            destroy: function () {
+                _destroy?.();
             }
         };
 
diff --git a/src/evrView/EVRViewLevelsConfigurationViewProvider.js b/src/evrView/EVRViewLevelsConfigurationViewProvider.js
index ca85982..b48cf61 100644
--- a/src/evrView/EVRViewLevelsConfigurationViewProvider.js
+++ b/src/evrView/EVRViewLevelsConfigurationViewProvider.js
@@ -1,5 +1,5 @@
 import EVRViewLevelsConfigurationView from './EVRViewLevelsConfigurationView.vue'
-import Vue from 'vue';
+import mount from 'utils/mountVueComponent';
 
 export default function EVRViewLevelsConfigurationViewProvider(options) {
     return {
@@ -15,13 +15,13 @@ export default function EVRViewLevelsConfigurationViewProvider(options) {
             return object && object.type === 'vista.evrView';
         },
         view: function (selection) {
-            let component;
-            let domainObject = selection[0][0].context.item;
+            let _destroy = null;
+
+            const domainObject = selection[0][0].context.item;
 
             return {
                 show: function (element) {
-                    component = new Vue({
-                        el: element,
+                    const componentDefinition = {
                         provide: {
                             openmct
                         },
@@ -39,15 +39,26 @@ export default function EVRViewLevelsConfigurationViewProvider(options) {
                                 :domain-object="domainObject"
                                 :options="options"
                             ></evr-levels-configuration>
-                        `,
-                    });
+                        `
+                    };
+
+                    const componentOptions = {
+                        element
+                    };
+
+                    const {
+                        componentInstance,
+                        destroy,
+                        el
+                    } = mount(componentDefinition, componentOptions);
+
+                    _destroy = destroy;
                 },
                 priority: function () {
                     return openmct.priority.HIGH;
                 },
                 destroy: function () {
-                    component.$destroy();
-                    component = undefined;
+                    _destroy?.();
                 }
             }
         }
diff --git a/src/evrView/EVRViewProvider.js b/src/evrView/EVRViewProvider.js
index 89e839e..1c03b50 100644
--- a/src/evrView/EVRViewProvider.js
+++ b/src/evrView/EVRViewProvider.js
@@ -1,6 +1,6 @@
 import EVRTable from './EVRTable';
 import TableComponent from 'openmct.tables.components.Table';
-import Vue from 'vue';
+import mount from 'utils/mountVueComponent';
 
 const RESTRICTED_VIEWS = ['plot-single', 'table'];
 const EVR_SOURCES = [
@@ -37,6 +37,8 @@ export default class EVRViewProvider {
 
     view(domainObject, objectPath) {
         let component;
+        let _destroy = null;
+
         const table = new EVRTable(domainObject, this.openmct);
         const markingProp = {
             enable: true,
@@ -44,10 +46,10 @@ export default class EVRViewProvider {
             rowName: '',
             rowNamePlural: ''
         };
+
         const view = {
             show: function (element, editMode) {
-                component = new Vue({
-                    el: element,
+                const componentDefinition = {
                     components: {
                         TableComponent
                     },
@@ -73,7 +75,20 @@ export default class EVRViewProvider {
                             :view="view"
                         ></table-component>
                     `
-                });
+                };
+                
+                const componentOptions = {
+                    element
+                };
+
+                const {
+                    componentInstance,
+                    destroy,
+                    el
+                } = mount(componentDefinition, componentOptions);
+
+                component = componentInstance;
+                _destroy = destroy;
             },
             onEditModeChange(editMode) {
                 component.isEditing = editMode;
@@ -90,9 +105,8 @@ export default class EVRViewProvider {
                     };
                 }
             },
-            destroy: function (element) {
-                component.$destroy();
-                component = undefined;
+            destroy: function () {
+                _destroy?.();
             }
         };
 
diff --git a/src/frameEventFilterView/FrameEventFilterViewProvider.js b/src/frameEventFilterView/FrameEventFilterViewProvider.js
index 79417b4..1932055 100644
--- a/src/frameEventFilterView/FrameEventFilterViewProvider.js
+++ b/src/frameEventFilterView/FrameEventFilterViewProvider.js
@@ -1,6 +1,6 @@
 import FrameEventFilterTable from './FrameEventFilterTable.js';
 import TableComponent from 'openmct.tables.components.Table';
-import Vue from 'vue';
+import mount from 'utils/mountVueComponent';
 
 export default class FrameEventFilterViewProvider {
     constructor(openmct) {
@@ -16,18 +16,20 @@ export default class FrameEventFilterViewProvider {
     }
 
     view(domainObject, objectPath) {
-        let table = new FrameEventFilterTable(domainObject, openmct);
         let component;
+        let _destroy = null;
+
+        let table = new FrameEventFilterTable(domainObject, openmct);
         let markingProp = {
             enable: true,
             useAlternateControlBar: false,
             rowName: '',
             rowNamePlural: ''
         };
+
         const view = {
             show: function (element, editMode) {
-                component = new Vue({
-                    el: element,
+                const componentDefinition = {
                     components: {
                         TableComponent
                     },
@@ -57,7 +59,20 @@ export default class FrameEventFilterViewProvider {
                             </template>
                         </table-component>
                     `
-                });
+                };
+                
+                const componentOptions = {
+                    element
+                };
+                
+                const {
+                    componentInstance,
+                    destroy,
+                    el
+                } = mount(componentDefinition, componentOptions);
+                
+                component = componentInstance;
+                _destroy = destroy;
             },
             onEditModeChange(editMode) {
                 component.isEditing = editMode;
@@ -74,9 +89,8 @@ export default class FrameEventFilterViewProvider {
                     };
                 }
             },
-            destroy: function (element) {
-                component.$destroy();
-                component = undefined;
+            destroy: function () {
+                _destroy?.();
             }
         };
 
diff --git a/src/frameaccountability/frameAccountabilityViewProvider.js b/src/frameaccountability/frameAccountabilityViewProvider.js
index e153ae6..ce76829 100644
--- a/src/frameaccountability/frameAccountabilityViewProvider.js
+++ b/src/frameaccountability/frameAccountabilityViewProvider.js
@@ -1,6 +1,6 @@
 import frameAccountability from './components/frameAccountability';
 import BadFramesTelemetryTable from './BadFramesTelemetryTable';
-import Vue from 'vue';
+import mount from 'utils/mountVueComponent';
 
 const FLAG_COLORS = {
     'InSync': '#7FFF00',
@@ -16,6 +16,7 @@ export default class FrameAccountabilityViewProvider {
         this.openmct = openmct;
         this.table = this.instantiateBadFramesTable();
         this.expectedVcidList = expectedVcidList;
+        this._destroy = null;
     }
     instantiateBadFramesTable() {
         const domainObject = {
@@ -30,7 +31,7 @@ export default class FrameAccountabilityViewProvider {
         return new BadFramesTelemetryTable(domainObject, this.openmct);
     }
     show(element) {
-        this.component = new Vue({
+        const componentDefinition = {
             components: {
                 frameAccountability
             },
@@ -43,13 +44,23 @@ export default class FrameAccountabilityViewProvider {
                 expectedVcidList: this.expectedVcidList,
                 currentView: {}
             },
-            el: element,
             template: '<frame-accountability></frame-accountability>'
-        });
+        };
+        
+        const componentOptions = {
+            element
+        };
+        
+        const {
+            componentInstance,
+            destroy,
+            el
+        } = mount(componentDefinition, componentOptions);
+        
+        this._destroy = destroy;
     }
     destroy() {
-        this.component.$destroy();
+        this._destroy?.();
         this.table.extendsDestroy();
-        delete this.component;
     }
 }
diff --git a/src/framesummary/FrameWatchConfigurationViewProvider.js b/src/framesummary/FrameWatchConfigurationViewProvider.js
index 6298d09..95b575b 100644
--- a/src/framesummary/FrameWatchConfigurationViewProvider.js
+++ b/src/framesummary/FrameWatchConfigurationViewProvider.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import mount from 'utils/mountVueComponent';
 import FrameWatchTableConfiguration from './FrameWatchTableConfiguration';
 import TableConfigurationComponent from 'openmct.tables.components.TableConfiguration';
 
@@ -7,6 +7,9 @@ export default class FrameWatchConfigurationViewProvider {
         this.key = key;
         this.name = name;
         this.type = type;
+
+        this.openmct = openmct;
+        this._destroy = null;
     }
 
     canView(selection) {
@@ -18,30 +21,39 @@ export default class FrameWatchConfigurationViewProvider {
     }
 
     view(selection) {
-        let component;
-        let domainObject = selection[0][0].context.item;
-        const tableConfiguration = new FrameWatchTableConfiguration(domainObject, openmct, this.type);
+        const domainObject = selection[0][0].context.item;
+        const tableConfiguration = new FrameWatchTableConfiguration(domainObject, this.openmct, this.type);
 
         return {
             show: function (element) {
-                component = new Vue({
+                const componentDefinition = {
                     provide: {
-                        openmct,
+                        openmct: this.openmct,
                         tableConfiguration
                     },
                     components: {
                         TableConfiguration: TableConfigurationComponent
                     },
                     template: '<table-configuration></table-configuration>',
-                    el: element
-                });
+                };
+                
+                const componentOptions = {
+                    element
+                };
+                
+                const {
+                    componentInstance,
+                    destroy,
+                    el
+                } = mount(componentDefinition, componentOptions);
+                
+                this._destroy = destroy;
             },
             priority: function () {
-                return openmct.priority.HIGH + 1;
+                return this.openmct.priority.HIGH + 1;
             },
             destroy: function () {
-                component.$destroy();
-                component = undefined;
+                this._destroy?.();
             }
         }
     }
diff --git a/src/framesummary/FrameWatchViewProvider.js b/src/framesummary/FrameWatchViewProvider.js
index b43becb..06400cd 100644
--- a/src/framesummary/FrameWatchViewProvider.js
+++ b/src/framesummary/FrameWatchViewProvider.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import mount from 'utils/mountVueComponent';
 import FrameWatchTable from './FrameWatchTable';
 import FrameWatchViewComponent from './components/FrameWatchViewComponent.vue';
 import { FRAME_WATCH_TYPE } from './config';
@@ -18,13 +18,14 @@ export default class FrameWatchViewProvider {
     }
 
     view(domainObject, objectPath) {
-        let table = new FrameWatchTable(domainObject, openmct, this.type);
         let component;
+        let _destroy = null;
+      
+        const table = new FrameWatchTable(domainObject, this.openmct, this.type);
 
         const view = {
             show: function (element, editMode) {
-                component = new Vue({
-                    el: element,
+                const componentDefinition = {
                     components: {
                         FrameWatchViewComponent
                     },
@@ -47,7 +48,20 @@ export default class FrameWatchViewProvider {
                             :isEditing="isEditing"
                         />
                     `
-                });
+                };
+                
+                const componentOptions = {
+                    element
+                };
+                
+                const {
+                    componentInstance,
+                    destroy,
+                    el
+                } = mount(componentDefinition, componentOptions);
+                
+                component = componentInstance;
+                _destroy = destroy;
             },
             onEditModeChange(editMode) {
                 component.isEditing = editMode;
@@ -66,9 +80,8 @@ export default class FrameWatchViewProvider {
                     };
                 }
             },
-            destroy: function (element) {
-                component.$destroy();
-                component = undefined;
+            destroy: function () {
+                _destroy?.();
             }
         };
 
diff --git a/src/globalFilters/plugin.js b/src/globalFilters/plugin.js
index 1a3e3c7..748b045 100644
--- a/src/globalFilters/plugin.js
+++ b/src/globalFilters/plugin.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import mount from 'utils/mountVueComponent';
 import GlobalFilterIndicator from './GlobalFilterIndicator.vue';
 
 export default function plugin(config) {
@@ -10,8 +10,7 @@ export default function plugin(config) {
 
     openmct.indicators.add(indicator);
     openmct.on('start', () => {
-      let component = new Vue({
-        el: indicator.element,
+      const componentDefinition = {
         provide: {
           openmct,
           filters: config
@@ -20,7 +19,17 @@ export default function plugin(config) {
           GlobalFilterIndicator
         },
         template: '<GlobalFilterIndicator />'
-      });
+      };
+      
+      const componentOptions = {
+          element: indicator.element
+      };
+      
+      const {
+          componentInstance,
+          destroy,
+          el
+      } = mount(componentDefinition, componentOptions);
     });
   };
 }
diff --git a/src/mcwsIndicator/MCWSIndicator.vue b/src/mcwsIndicator/MCWSIndicator.vue
index 3243a3c..7a5e15b 100644
--- a/src/mcwsIndicator/MCWSIndicator.vue
+++ b/src/mcwsIndicator/MCWSIndicator.vue
@@ -11,7 +11,6 @@
 </template>
 
 <script>
-
 import mcws from 'services/mcws/mcws';
 
 const MCWS_PERSISTENCE_CHECK_NAMESPACE = '';
@@ -70,7 +69,7 @@ export default {
             this.namespace.read().then(
                 () => { this.state = CONNECTION_STATES.CONNECTED; },
                 () => { this.state = CONNECTION_STATES.DISCONNECTED; }
-           );
+            );
         }
     }
 };
diff --git a/src/mcwsIndicator/MCWSIndicatorSpec.js b/src/mcwsIndicator/MCWSIndicatorSpec.js
index 5fcb287..3574e67 100644
--- a/src/mcwsIndicator/MCWSIndicatorSpec.js
+++ b/src/mcwsIndicator/MCWSIndicatorSpec.js
@@ -1,6 +1,7 @@
 import MCWSIndicator from './MCWSIndicator.vue';
 import mcws from 'services/mcws/mcws'
-import Vue from 'vue';
+import mount from 'utils/mountVueComponent';
+import { nextTick } from 'vue';
 
 function getText(el) {
     return el.querySelector('.label.c-indicator__label').innerText.trim();
@@ -22,43 +23,51 @@ describe('MCWS Indicator', () => {
     let mockNamespace;
     let mockPromise;
     let indicator;
-    let parent;
-    let child;
+    let _destroy = null;
+    let element;
     let openmct = {};
 
     beforeEach(() => {
-
         spyOn(mcws, 'namespace');
         spyOn(window, 'setInterval');
         mockNamespace = jasmine.createSpyObj('namespace', ['read']);
         mockPromise = jasmine.createSpyObj('promise', ['then']);
         mockNamespace.read.and.returnValue(mockPromise);
         mcws.namespace.and.returnValue(mockNamespace);
-        parent = document.createElement('div');
-        child = document.createElement('div');
-        indicator = new Vue ({
-            el: child,
-            provide: {
-                openmct
-            },
-            components: {
-                MCWSIndicator
+        element = document.createElement('div');
+
+        indicator = mount(
+            {
+                provide: {
+                    openmct
+                },
+                components: {
+                    MCWSIndicator
+                },
+                template: '<MCWSIndicator />'
             },
-            template: '<MCWSIndicator />'
-        });
-        parent.appendChild(indicator.$el);
+            {
+              element
+            }
+        );
+
+        _destroy = indicator.destroy;
+    });
+
+    afterEach(() => {
+        _destroy?.();
     });
 
     it('should have the correct glyphClass', () => {
-        const indicatorElement = parent.querySelector('.c-indicator');
+        const indicatorElement = element.querySelector('.c-indicator');
 
         expect(indicatorElement.classList.contains('icon-database')).toBeTrue();
     });
 
     describe('initially', () => {
         it('is in a pending state', () => {
-            expect(getText(parent)).toBe('Checking connection...');
-            expect(getDescription(parent)).toBe(null);
+            expect(getText(element)).toBe('Checking connection...');
+            expect(getDescription(element)).toBe(null);
         });
 
         it('registers a function with interval', () => {
@@ -79,26 +88,26 @@ describe('MCWS Indicator', () => {
     describe('successful read call', () => {
         beforeEach((done) => {
             mockPromise.then.calls.all()[0].args[0]();
-            Vue.nextTick(done);
+            nextTick(done);
         });
 
         it('is in a connected state', () => {
-            expect(indicatorHasClasses(parent, ['icon-database', 's-status-ok'])).toBe(true);
-            expect(getText(parent)).toBe('Connected');
-            expect(getDescription(parent)).toBe('Connected to the domain object database.');
+            expect(indicatorHasClasses(element, ['icon-database', 's-status-ok'])).toBe(true);
+            expect(getText(element)).toBe('Connected');
+            expect(getDescription(element)).toBe('Connected to the domain object database.');
         });
     });
 
     describe('failed read call', () => {
         beforeEach((done) => {
             mockPromise.then.calls.all()[0].args[1]();
-            Vue.nextTick(done);
+            nextTick(done);
         });
 
-        it('is in a disconnected state', () => {           
-            expect(indicatorHasClasses(parent, ['icon-database', 's-status-error'])).toBe(true);
-            expect(getText(parent)).toBe('Disconnected');
-            expect(getDescription(parent)).toBe('Unable to connect to the domain object database.');
+        it('is in a disconnected state', () => {
+            expect(indicatorHasClasses(element, ['icon-database', 's-status-error'])).toBe(true);
+            expect(getText(element)).toBe('Disconnected');
+            expect(getDescription(element)).toBe('Unable to connect to the domain object database.');
         });
     });
 });
diff --git a/src/mcwsIndicator/plugin.js b/src/mcwsIndicator/plugin.js
index 42d8a82..8430bdb 100644
--- a/src/mcwsIndicator/plugin.js
+++ b/src/mcwsIndicator/plugin.js
@@ -1,22 +1,34 @@
 import MCWSIndicator from './MCWSIndicator.vue';
-import Vue from 'vue';
+import mount from 'utils/mountVueComponent';
 
 export default function MCWSIndicatorPlugin() {
-    return function install(openmct) {
-        const mcwsIndicator = new Vue ({
-            components: {
-                MCWSIndicator
-            },
-            provide: {
-                openmct: openmct
-            },
-            template: '<MCWSIndicator />'
-        });
+  return function install(openmct) {
+    const indicator = {
+      key: 'mcws-indicator',
+      element: document.createElement('div'),
+      priority: -3
+    };
+
+    const componentDefinition = {
+      components: {
+        MCWSIndicator
+      },
+      provide: {
+        openmct
+      },
+      template: '<MCWSIndicator />'
+    };
 
-        openmct.indicators.add({
-            key: 'mcws-indicator',
-            element: mcwsIndicator.$mount().$el,
-            priority: -3
-        });
+    const componentOptions = {
+      element: indicator.element
     };
+
+    const {
+        componentInstance,
+        destroy,
+        el
+    } = mount(componentDefinition, componentOptions);
+
+    openmct.indicators.add(indicator);
+  };
 }
diff --git a/src/messagesView/MessagesViewProvider.js b/src/messagesView/MessagesViewProvider.js
index a019c87..9745bf9 100644
--- a/src/messagesView/MessagesViewProvider.js
+++ b/src/messagesView/MessagesViewProvider.js
@@ -1,6 +1,6 @@
 import MessagesTable from './MessagesTable.js';
 import TableComponent from 'openmct.tables.components.Table';
-import Vue from 'vue';
+import mount from 'utils/mountVueComponent';
 
 export default class MessagesViewProvider {
     constructor(openmct) {
@@ -16,18 +16,20 @@ export default class MessagesViewProvider {
     }
 
     view(domainObject, objectPath) {
-        let table = new MessagesTable(domainObject, openmct);
         let component;
-        let markingProp = {
+        let _destroy = null;
+
+        const table = new MessagesTable(domainObject, openmct);
+        const markingProp = {
             enable: true,
             useAlternateControlBar: false,
             rowName: '',
             rowNamePlural: ''
         };
+
         const view = {
             show: function (element, editMode) {
-                component = new Vue({
-                    el: element,
+                const componentDefinition = {
                     components: {
                         TableComponent
                     },
@@ -55,7 +57,20 @@ export default class MessagesViewProvider {
                         >
                         </table-component>
                     `
-                });
+                };
+                
+                const componentOptions = {
+                    element
+                };
+                
+                const {
+                    componentInstance,
+                    destroy,
+                    el
+                } = mount(componentDefinition, componentOptions);
+                
+                component = componentInstance;
+                _destroy = destroy;
             },
             onEditModeChange(editMode) {
                 component.isEditing = editMode;
@@ -72,9 +87,8 @@ export default class MessagesViewProvider {
                     };
                 }
             },
-            destroy: function (element) {
-                component.$destroy();
-                component = undefined;
+            destroy: function () {
+                _destroy?.();
             }
         };
 
diff --git a/src/metadataAction/metadataAction.js b/src/metadataAction/metadataAction.js
index 2dc3bc6..c44dd53 100644
--- a/src/metadataAction/metadataAction.js
+++ b/src/metadataAction/metadataAction.js
@@ -1,41 +1,55 @@
 import MetadataListView from './components/metadataList.vue';
-import Vue from 'vue';
+import mount from 'utils/mountVueComponent';
 
 export default class MetadataAction {
-    constructor(openmct) {
-        this.name = 'View Attributes';
-        this.key = 'metadata-action';
-        this.description = 'Shows dictionary attributes related to this object';
-        this.cssClass = 'icon-info';
-
-        this._openmct = openmct;
-    }
-    invoke(objectPath) {
-        let domainObject = objectPath[0],
-            name = domainObject.name,
-            attributes = domainObject.telemetry.definition,
-            component = new Vue ({
-                provide: {
-                    name,
-                    attributes
-                },
-                components: {
-                    MetadataListView
-                },
-                template: '<MetadataListView/>'
-            }),
-            overlay = this._openmct.overlays.overlay({
-                element: component.$mount().$el,
-                size: 'large',
-                dismissable: true,
-                onDestroy: () => {
-                    component.$destroy();
-                }
-            });
-    }
-    appliesTo(objectPath) {
-        let contextualDomainObject = objectPath[0];
-
-        return contextualDomainObject.type === 'vista.evr' || contextualDomainObject.type === 'vista.channel';
-    }
+  constructor(openmct) {
+    this.name = 'View Attributes';
+    this.key = 'metadata-action';
+    this.description = 'Shows dictionary attributes related to this object';
+    this.cssClass = 'icon-info';
+
+    this.openmct = openmct;
+  }
+
+  invoke(objectPath) {
+    const domainObject = objectPath[0];
+    const name = domainObject.name;
+    const attributes = domainObject.telemetry.definition;
+
+    const componentDefinition = {
+      provide: {
+        name,
+        attributes
+      },
+      components: {
+          MetadataListView
+      },
+      template: '<MetadataListView />'
+    };
+
+    const componentOptions = {
+      element
+    };
+
+    const {
+        componentInstance,
+        destroy,
+        el
+    } = mount(componentDefinition, componentOptions);
+
+    this.openmct.overlays.overlay({
+      element: el,
+      size: 'large',
+      dismissable: true,
+      onDestroy: () => {
+        destroy();
+      }
+    });
+  }
+
+  appliesTo(objectPath) {
+      let contextualDomainObject = objectPath[0];
+
+      return contextualDomainObject.type === 'vista.evr' || contextualDomainObject.type === 'vista.channel';
+  }
 }
diff --git a/src/multipleHistoricalSessions/plugin.js b/src/multipleHistoricalSessions/plugin.js
index 932fe8d..d6c9330 100644
--- a/src/multipleHistoricalSessions/plugin.js
+++ b/src/multipleHistoricalSessions/plugin.js
@@ -1,36 +1,35 @@
-import Vue from 'vue';
+import mount from 'utils/mountVueComponent';
 import HistoricalSessionIndicator from './indicator/historicalSessionIndicator.vue';
 import SessionTable from './sessionTable/SessionTable';
 import HistoricalSessionMetadata from './HistoricalSessionMetadata';
 
 export default function HistoricalSessionsPlugin() {
     return function install(openmct) {
-        let indicator = {
-                element: document.createElement('div'),
-                priority: -1
-            };
-
-        openmct.indicators.add(indicator);
+        const indicator = {
+            element: document.createElement('div'),
+            priority: -1
+        };
 
         openmct.on('start', () => {
-            let instantiate = openmct.$injector.get('instantiate'),
-                model = {
-                    identifier: {
-                        key: 'session-historical',
-                        namespace: ''
-                    },
-                    name: 'Historical Session',
-                    type: 'vista.channel'
-                };
-            
-            let oldStyleDomainObject = instantiate(model),
-                newStyleDomainObject = oldStyleDomainObject.useCapability('adapter');
-
-            let table = new SessionTable(newStyleDomainObject, openmct, HistoricalSessionMetadata),
-                objectPath = [model];
+            const instantiate = openmct.$injector.get('instantiate');
+            const model = {
+                identifier: {
+                    key: 'session-historical',
+                    namespace: ''
+                },
+                name: 'Historical Session',
+                type: 'vista.channel'
+            };
+            const oldStyleDomainObject = instantiate(model);
+            const newStyleDomainObject = oldStyleDomainObject.useCapability('adapter');
+            const table = new SessionTable(
+                newStyleDomainObject,
+                openmct,
+                HistoricalSessionMetadata
+            );
+            const objectPath = [ model ];
 
-            let component = new Vue ({
-                el: indicator.element,
+            const componentDefinition = {
                 provide: {
                     openmct,
                     table,
@@ -41,7 +40,19 @@ export default function HistoricalSessionsPlugin() {
                     HistoricalSessionIndicator
                 },
                 template: '<HistoricalSessionIndicator></HistoricalSessionIndicator>'
-            });
+            };
+            
+            const componentOptions = {
+                element: indicator.element
+            };
+            
+            const {
+                componentInstance,
+                destroy,
+                el
+            } = mount(componentDefinition, componentOptions);
         });
+
+        openmct.indicators.add(indicator);
     };
 }
diff --git a/src/packetQuery/PacketQueryViewProvider.js b/src/packetQuery/PacketQueryViewProvider.js
index 69d31c4..2a440d9 100644
--- a/src/packetQuery/PacketQueryViewProvider.js
+++ b/src/packetQuery/PacketQueryViewProvider.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import mount from 'utils/mountVueComponent';
 import PacketQueryView from './components/PacketQueryView.vue';
 
 export default class PacketQueryViewProvider {
@@ -14,12 +14,11 @@ export default class PacketQueryViewProvider {
     }
 
     view(domainObject, objectPath) {
-        let component;
+        let _destroy = null;
 
         const view = {
             show: function (element) {
-                component = new Vue({
-                    el: element,
+                const componentDefinition = {
                     components: {
                         PacketQueryView
                     },
@@ -40,11 +39,22 @@ export default class PacketQueryViewProvider {
                             :domain-object="domainObject"
                             :view="view"
                         />`
-                });
+                };
+
+                const componentOptions = {
+                    element
+                };
+                
+                const {
+                    componentInstance,
+                    destroy,
+                    el
+                } = mount(componentDefinition, componentOptions);
+
+                _destroy = destroy;
             },
-            destroy: function (element) {
-                component.$destroy();
-                component = undefined;
+            destroy: function () {
+                _destroy?.();
             }
         };
 
diff --git a/src/packetSummary/PacketSummaryViewProvider.js b/src/packetSummary/PacketSummaryViewProvider.js
index a373592..a644851 100644
--- a/src/packetSummary/PacketSummaryViewProvider.js
+++ b/src/packetSummary/PacketSummaryViewProvider.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import mount from 'utils/mountVueComponent';
 import PacketSummaryTable from './PacketSummaryTable.js';
 import PacketSummaryViewComponent from './components/PacketSummaryViewComponent.vue';
 
@@ -16,13 +16,14 @@ export default class ProductSummaryViewProvider {
     }
 
     view(domainObject, objectPath) {
-        let table = new PacketSummaryTable(domainObject, openmct);
         let component;
+        let _destroy = null;
+
+        const table = new PacketSummaryTable(domainObject, openmct);
 
         const view = {
             show: function (element, editMode) {
-                component = new Vue({
-                    el: element,
+                const componentDefinition = {
                     components: {
                         PacketSummaryViewComponent
                     },
@@ -44,7 +45,20 @@ export default class ProductSummaryViewProvider {
                             :view="view"
                             :isEditing="isEditing"
                         />`
-                });
+                };
+                
+                const componentOptions = {
+                    element
+                };
+                
+                const {
+                    componentInstance,
+                    destroy,
+                    el
+                } = mount(componentDefinition, componentOptions);
+                
+                component = componentInstance;
+                _destroy = destroy;
             },
             onEditModeChange(editMode) {
                 component.isEditing = editMode;
@@ -63,9 +77,8 @@ export default class ProductSummaryViewProvider {
                     };
                 }
             },
-            destroy: function (element) {
-                component.$destroy();
-                component = undefined;
+            destroy: function () {
+                _destroy?.();
             }
         };
 
diff --git a/src/product-status/DataProductInspectorViewProvider.js b/src/product-status/DataProductInspectorViewProvider.js
new file mode 100644
index 0000000..d7f582c
--- /dev/null
+++ b/src/product-status/DataProductInspectorViewProvider.js
@@ -0,0 +1,58 @@
+import mount from 'utils/mountVueComponent';
+import TelemetryTableConfiguration from 'openmct.tables.TelemetryTableConfiguration';
+import DataProductAutoclear from './data-product-autoclear.vue';
+
+export default class DataProductViewProvider {
+  constructor(openmct) {
+    this.openmct = openmct;
+
+    this.key = 'vista.dataProducts-configuration';
+    this.name = 'Autoclear';
+  }
+
+  canView (selection) {
+    const domainObject = selection?.[0]?.[0]?.context?.item;
+
+    return domainObject?.type === 'vista.dataProductsView';
+  }
+
+  view (selection) {
+    let _destroy = null;
+
+    const domainObject = selection[0][0].context.item;
+    const tableConfiguration = new TelemetryTableConfiguration(domainObject, this.openmct);
+
+    return {
+      show: function (element) {
+        const componentDefinition = {
+          provide: {
+            openmct: this.openmct,
+            tableConfiguration
+          },
+          components: {
+              DataProductAutoclear
+          },
+          template: '<data-product-autoclear></data-product-autoclear>',
+        };
+
+        const componentOptions = {
+            element
+        };
+
+        const {
+            componentInstance,
+            destroy,
+            el
+        } = mount(componentDefinition, componentOptions);
+
+        _destroy = destroy;
+      },
+      priority: function () {
+        return openmct.priority.HIGH;
+      },
+      destroy: function () {
+        _destroy?.();
+      }
+    }
+  }
+}
diff --git a/src/product-status/DataProductViewProvider.js b/src/product-status/DataProductViewProvider.js
index 41f5cce..80376f2 100644
--- a/src/product-status/DataProductViewProvider.js
+++ b/src/product-status/DataProductViewProvider.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import mount from 'utils/mountVueComponent';
 import TableComponent from 'openmct.tables.components.Table';
 import DataProductTable from './DataProductTable.js';
 
@@ -16,18 +16,20 @@ export default class DataProductViewProvider {
     }
 
     view(domainObject, objectPath) {
-        let table = new DataProductTable(domainObject, openmct);
         let component;
-        let markingProp = {
+        let _destroy = null;
+
+        const table = new DataProductTable(domainObject, this.openmct);
+        const markingProp = {
             enable: true,
             useAlternateControlBar: false,
             rowName: '',
             rowNamePlural: ''
         };
+
         const view = {
             show: function (element, editMode) {
-                component = new Vue({
-                    el: element,
+                const componentDefinition = {
                     components: {
                         TableComponent
                     },
@@ -39,7 +41,7 @@ export default class DataProductViewProvider {
                         };
                     },
                     provide: {
-                        openmct,
+                        openmct: this.openmct,
                         table,
                         objectPath,
                         currentView: view
@@ -61,7 +63,20 @@ export default class DataProductViewProvider {
                             :marking="markingProp"
                             :view="view"
                         ></table-component>`
-                });
+                };
+
+                const componentOptions = {
+                    element
+                };
+
+                const {
+                    componentInstance,
+                    destroy,
+                    el
+                } = mount(componentDefinition, componentOptions);
+                
+                component = componentInstance;
+                _destroy = destroy;
             },
             onEditModeChange(editMode) {
                 component.isEditing = editMode;
@@ -89,9 +104,8 @@ export default class DataProductViewProvider {
                     };
                 }
             },
-            destroy: function (element) {
-                component.$destroy();
-                component = undefined;
+            destroy: function () {
+                _destroy?.();
             }
         };
 
diff --git a/src/product-status/plugin.js b/src/product-status/plugin.js
index 2218699..2622002 100644
--- a/src/product-status/plugin.js
+++ b/src/product-status/plugin.js
@@ -1,12 +1,9 @@
-import Vue from 'vue';
 import DataProductViewProvider from './DataProductViewProvider.js';
 import DATDownloadCell from './DATDownloadCell.js';
 import EMDDownloadCell from './EMDDownloadCell.js';
 import EMDPreviewCell from './EMDPreviewCell.js';
 import TXTDownloadCell from './TXTDownloadCell.js';
 import VistaTableConfigurationProvider from '../tables/VistaTableConfigurationProvider.js';
-import DataProductAutoclear from './data-product-autoclear.vue';
-import TelemetryTableConfiguration from 'openmct.tables.TelemetryTableConfiguration';
 import DataProductViewActions from './DataProductViewActions.js';
 
 export default function install() {
@@ -21,45 +18,7 @@ export default function install() {
             }
         });
         openmct.objectViews.addProvider(new DataProductViewProvider(openmct));
-        
-        openmct.inspectorViews.addProvider({
-            key: 'vista.dataProducts-configuration',
-            name: 'Autoclear',
-            canView: function (selection) {
-                if (selection.length === 0) {
-                    return false;
-                }
-                let object = selection[0][0].context.item;
-                return object && object.type === 'vista.dataProductsView';
-            },
-            view: function (selection) {
-                let component;
-                let domainObject = selection[0][0].context.item;
-                const tableConfiguration = new TelemetryTableConfiguration(domainObject, openmct);
-                return {
-                    show: function (element) {
-                        component = new Vue({
-                            provide: {
-                                openmct,
-                                tableConfiguration
-                            },
-                            components: {
-                                DataProductAutoclear
-                            },
-                            template: '<data-product-autoclear></data-product-autoclear>',
-                            el: element
-                        });
-                    },
-                    priority: function () {
-                        return openmct.priority.HIGH;
-                    },
-                    destroy: function () {
-                        component.$destroy();
-                        component = undefined;
-                    }
-                }
-            }
-        });
+        openmct.inspectorViews.addProvider(new DataProductInspectorViewProvider(openmct));
 
         openmct.inspectorViews.addProvider(new VistaTableConfigurationProvider(
             'vista.data-products-configuration', 
@@ -81,9 +40,12 @@ export default function install() {
             openmct.actions.register(action);
         });
 
-        Vue.component('vista-table-dat-cell', DATDownloadCell);
-        Vue.component('vista-table-emd-cell', EMDDownloadCell);
-        Vue.component('vista-table-emd-preview-cell', EMDPreviewCell);
-        Vue.component('vista-table-txt-cell', TXTDownloadCell);
+        // register cell components globally for dynamic component in core openmct table rows
+        openmct.on('start', () => {
+            openmct.app.component('vista-table-dat-cell', DATDownloadCell);
+            openmct.app.component('vista-table-emd-cell', EMDDownloadCell);
+            openmct.app.component('vista-table-emd-preview-cell', EMDPreviewCell);
+            openmct.app.component('vista-table-txt-cell', TXTDownloadCell);
+        });
     }
 }
diff --git a/src/realtimeIndicator/plugin.js b/src/realtimeIndicator/plugin.js
index 7b08c8d..0b2a429 100644
--- a/src/realtimeIndicator/plugin.js
+++ b/src/realtimeIndicator/plugin.js
@@ -1,27 +1,27 @@
-import Vue from 'vue';
+import mount from 'utils/mountVueComponent';
 import RealtimeIndicator from './RealtimeIndicator.vue';
 
 export default function plugin(vistaTime) {
-    return function install(openmct) {
-        let indicator = {
-            element: document.createElement('div'),
-            priority: -5
-        };
-
-        openmct.indicators.add(indicator);
-        openmct.on('start', () => {
-            let component  = new Vue ({
-                el: indicator.element,
-                provide: {
-                    openmct,
-                    vistaTime
-                },
-                components: {
-                    RealtimeIndicator
-                },
-                template: '<RealtimeIndicator />'
-            });
-        });
+  return function install(openmct) {
+    const indicator = {
+        element: document.createElement('div'),
+        priority: -5
+    };
+    const componentDefinition = {
+      provide: {
+        openmct,
+        vistaTime
+      },
+      components: {
+          RealtimeIndicator
+      },
+      template: '<RealtimeIndicator />'
+    };
+    const componentOptions = {
+      element: indicator.element
     };
-}
 
+    openmct.on('start', () => mount(componentDefinition, componentOptions));
+    openmct.indicators.add(indicator);
+  };
+}
diff --git a/src/realtimeSessions/plugin.js b/src/realtimeSessions/plugin.js
index c5a3497..6437c1d 100644
--- a/src/realtimeSessions/plugin.js
+++ b/src/realtimeSessions/plugin.js
@@ -1,26 +1,28 @@
-import Vue from 'vue';
+import mount from 'utils/mountVueComponent';
 import RealtimeSessionIndicator from './components/RealtimeSessionIndicator.vue';
 
-export default function plugin(vistaTime) {
-    return function install(openmct) {
-        let indicator = {
-            element: document.createElement('div'),
-            priority: -4
-        };
+export default function plugin() {
+  return function install(openmct) {
+    const indicator = {
+        element: document.createElement('div'),
+        priority: -4
+    };
+    const componentDefinition = {
+      provide: {
+        openmct
+      },
+      components: {
+          RealtimeSessionIndicator
+      },
+      template: '<RealtimeSessionIndicator />'
+    };
 
-        openmct.indicators.add(indicator);
-        openmct.on('start', () => {
-            let component  = new Vue ({
-                el: indicator.element,
-                provide: {
-                    openmct
-                },
-                components: {
-                    RealtimeSessionIndicator
-                },
-                template: '<RealtimeSessionIndicator />'
-            });
-        });
+    const componentOptions = {
+        element: indicator.element
     };
+
+    openmct.indicators.add(indicator);
+    openmct.on('start', () => mount(componentDefinition, componentOptions));
+  };
 }
 
diff --git a/src/tables/VistaTableConfigurationProvider.js b/src/tables/VistaTableConfigurationProvider.js
index 4851192..3f611a1 100644
--- a/src/tables/VistaTableConfigurationProvider.js
+++ b/src/tables/VistaTableConfigurationProvider.js
@@ -1,52 +1,61 @@
-define([
-    'openmct.tables.TelemetryTableConfiguration',
-    'openmct.tables.components.TableConfiguration',
-    'vue'
-],function(TelemetryTableConfiguration, TableConfigurationComponent, Vue) {
-    function VistaTableConfigurationProvider(key, name, type){
-        this.key = key;
-        this.name = name;
-        this.type = type;
-    }
 
-    VistaTableConfigurationProvider.prototype.canView = function (selection){
-        if (selection.length === 0) {
-            return false;
-        }
-        let object = selection[0][0].context.item;
-        return object && object.type === this.type;
-    };
-
-    VistaTableConfigurationProvider.prototype.view = function (selection) {
-        let component;
-        let domainObject = selection[0][0].context.item;
-        const tableConfiguration = new TelemetryTableConfiguration(domainObject, openmct);
-        return {
-            show: function (element) {
-                component = new Vue({
-                    provide: {
-                        openmct,
-                        tableConfiguration
-                    },
-                    components: {
-                        TableConfiguration: TableConfigurationComponent.default
-                    },
-                    template: '<table-configuration></table-configuration>',
-                    el: element
-                });
-            },
-            showTab: function (isEditing) {
-              return isEditing;
-            },
-            priority: function () {
-              return openmct.priority.HIGH + 1;
-            },
-            destroy: function () {
-                component.$destroy();
-                component = undefined;
-            }
-        }
-    };
-
-    return VistaTableConfigurationProvider;
-});
\ No newline at end of file
+import TelemetryTableConfiguration from 'openmct.tables.TelemetryTableConfiguration';
+import TableConfigurationComponent from 'openmct.tables.components.TableConfiguration';
+import mount from 'utils/mountVueComponent';
+
+export default class VistaTableConfigurationProvider {
+  constructor (key, name, type) {
+    this.key = key;
+    this.name = name;
+    this.type = type;
+  }
+
+  canView (selection) {
+    const domainObject = selection?.[0]?.[0]?.context?.item;
+
+    return domainObject?.type === this.type;
+  };
+
+  view (selection) {
+    let _destroy = null;
+
+    const domainObject = selection[0][0].context.item;
+    const tableConfiguration = new TelemetryTableConfiguration(domainObject, openmct);
+
+    return {
+      show: function (element) {
+        const componentDefinition = {
+          provide: {
+            openmct,
+            tableConfiguration
+          },
+          components: {
+              TableConfiguration: TableConfigurationComponent
+          },
+          template: '<table-configuration></table-configuration>'
+        };
+        
+        const componentOptions = {
+            element
+        };
+        
+        const {
+            componentInstance,
+            destroy,
+            el
+        } = mount(componentDefinition, componentOptions);
+
+        _destroy = destroy;
+      },
+      showTab: function (isEditing) {
+        return isEditing;
+      },
+      priority: function () {
+        return openmct.priority.HIGH + 1;
+      },
+      destroy: function () {
+        _destroy?.();
+      }
+    }
+  }
+}

From ccf73513b338e888545069c0ada4f3f1372f0176 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Thu, 4 Jan 2024 17:34:58 -0800
Subject: [PATCH 23/49] chain component registering

---
 src/product-status/plugin.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/product-status/plugin.js b/src/product-status/plugin.js
index 2622002..5721a9e 100644
--- a/src/product-status/plugin.js
+++ b/src/product-status/plugin.js
@@ -42,10 +42,11 @@ export default function install() {
 
         // register cell components globally for dynamic component in core openmct table rows
         openmct.on('start', () => {
-            openmct.app.component('vista-table-dat-cell', DATDownloadCell);
-            openmct.app.component('vista-table-emd-cell', EMDDownloadCell);
-            openmct.app.component('vista-table-emd-preview-cell', EMDPreviewCell);
-            openmct.app.component('vista-table-txt-cell', TXTDownloadCell);
+            openmct.app
+                .component('vista-table-dat-cell', DATDownloadCell)
+                .component('vista-table-emd-cell', EMDDownloadCell)
+                .component('vista-table-emd-preview-cell', EMDPreviewCell)
+                .component('vista-table-txt-cell', TXTDownloadCell);
         });
     }
 }

From 1b6ebc06f2e987a08f11913d0196fb7d42c38816 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Fri, 5 Jan 2024 14:09:38 -0800
Subject: [PATCH 24/49] remove compat config

---
 .webpack/webpack.common.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/.webpack/webpack.common.js b/.webpack/webpack.common.js
index 459611d..bc1bda8 100644
--- a/.webpack/webpack.common.js
+++ b/.webpack/webpack.common.js
@@ -117,10 +117,7 @@ const config = {
                 loader: 'vue-loader',
                 options: {
                     compilerOptions: {
-                        whitespace: 'preserve',
-                        compatConfig: {
-                            MODE: 2
-                        }
+                        whitespace: 'preserve'
                     }
                 }
             },

From 05375ada2688ac5b1b142d9353bc13e3b1421134 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Fri, 5 Jan 2024 14:10:53 -0800
Subject: [PATCH 25/49] change destroy and beforeDestroy hooks to beforeUnmount

---
 src/alarmsView/AlarmsAutoclear.vue                              | 2 +-
 src/evrView/EVRViewLevelsConfigurationView.vue                  | 2 +-
 src/frameaccountability/components/frameAccountability.js       | 2 +-
 .../components/frameAccountabilityBadFrames.vue                 | 2 +-
 src/framesummary/components/FrameWatchViewComponent.vue         | 2 +-
 src/mcwsIndicator/MCWSIndicator.vue                             | 2 +-
 .../indicator/historicalSessionIndicator.vue                    | 2 +-
 .../sessionSelector/historicalSessionSelector.vue               | 2 +-
 src/packetSummary/components/PacketSummaryViewComponent.vue     | 2 +-
 src/product-status/data-product-autoclear.vue                   | 2 +-
 src/realtimeIndicator/RealtimeIndicator.vue                     | 2 +-
 src/realtimeSessions/components/RealtimeSessionIndicator.vue    | 2 +-
 12 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/alarmsView/AlarmsAutoclear.vue b/src/alarmsView/AlarmsAutoclear.vue
index 2bd1a4f..e46c7aa 100644
--- a/src/alarmsView/AlarmsAutoclear.vue
+++ b/src/alarmsView/AlarmsAutoclear.vue
@@ -49,7 +49,7 @@ export default {
         this.unlisteners = [];
         this.openmct.editor.on('isEditing', this.toggleEdit);
     },
-    destroyed() {
+    beforeUnmount() {
         this.openmct.editor.off('isEditing', this.toggleEdit);
         this.unlisteners.forEach((unlisten) => unlisten());
     }
diff --git a/src/evrView/EVRViewLevelsConfigurationView.vue b/src/evrView/EVRViewLevelsConfigurationView.vue
index 341d035..b3a20d9 100644
--- a/src/evrView/EVRViewLevelsConfigurationView.vue
+++ b/src/evrView/EVRViewLevelsConfigurationView.vue
@@ -113,7 +113,7 @@ export default {
     mounted() {
         this.openmct.editor.on('isEditing', this.toggleEdit);
     },
-    destroyed() {
+    beforeUnmount() {
         this.openmct.editor.off('isEditing', this.toggleEdit);
     }
 }
diff --git a/src/frameaccountability/components/frameAccountability.js b/src/frameaccountability/components/frameAccountability.js
index 304ffed..fdf77ff 100644
--- a/src/frameaccountability/components/frameAccountability.js
+++ b/src/frameaccountability/components/frameAccountability.js
@@ -208,7 +208,7 @@ define([
             this.composition.on('remove', this.removeEvents);
             this.composition.load();
         },
-        destroyed() {
+        beforeUnmount() {
             this.composition.off('add', this.addEvents);
             this.composition.off('remove', this.removeEvents);
 
diff --git a/src/frameaccountability/components/frameAccountabilityBadFrames.vue b/src/frameaccountability/components/frameAccountabilityBadFrames.vue
index db26483..db5632c 100644
--- a/src/frameaccountability/components/frameAccountabilityBadFrames.vue
+++ b/src/frameaccountability/components/frameAccountabilityBadFrames.vue
@@ -84,7 +84,7 @@ export default {
             onDestroy: this.hideBadFrames
         });
     },
-    destroyed() {
+    beforeUnmount() {
        this.table.sortBy({});
     }
 }
diff --git a/src/framesummary/components/FrameWatchViewComponent.vue b/src/framesummary/components/FrameWatchViewComponent.vue
index 6071192..879cb7b 100644
--- a/src/framesummary/components/FrameWatchViewComponent.vue
+++ b/src/framesummary/components/FrameWatchViewComponent.vue
@@ -63,7 +63,7 @@ export default {
     mounted() {
         this.table.on('update-header', this.updateHeader);
     },
-    destroyed() {
+    beforeUnmount() {
         this.table.off('update-header', this.updateHeader);
     },
     data() {
diff --git a/src/mcwsIndicator/MCWSIndicator.vue b/src/mcwsIndicator/MCWSIndicator.vue
index 7a5e15b..df64164 100644
--- a/src/mcwsIndicator/MCWSIndicator.vue
+++ b/src/mcwsIndicator/MCWSIndicator.vue
@@ -56,7 +56,7 @@ export default {
             namespace: ''
         };
     },
-    destroyed() {
+    beforeUnmount() {
         clearInterval(this.intervalId);
     },
     mounted() {
diff --git a/src/multipleHistoricalSessions/indicator/historicalSessionIndicator.vue b/src/multipleHistoricalSessions/indicator/historicalSessionIndicator.vue
index 521e7eb..8b23314 100644
--- a/src/multipleHistoricalSessions/indicator/historicalSessionIndicator.vue
+++ b/src/multipleHistoricalSessions/indicator/historicalSessionIndicator.vue
@@ -138,7 +138,7 @@ export default {
         let activeSessions = this.sessionService.getHistoricalSession();
         this.onActiveSessionChange(activeSessions);
     },
-    destroyed() {
+    beforeUnmount() {
         this.table.extendsDestroy();    
         this.unsubscribeSessionListener();
     }
diff --git a/src/multipleHistoricalSessions/sessionSelector/historicalSessionSelector.vue b/src/multipleHistoricalSessions/sessionSelector/historicalSessionSelector.vue
index 4621ece..49532b4 100644
--- a/src/multipleHistoricalSessions/sessionSelector/historicalSessionSelector.vue
+++ b/src/multipleHistoricalSessions/sessionSelector/historicalSessionSelector.vue
@@ -167,7 +167,7 @@ export default {
             isLoading: true
         }
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.table.destroy();
     },
     methods: {
diff --git a/src/packetSummary/components/PacketSummaryViewComponent.vue b/src/packetSummary/components/PacketSummaryViewComponent.vue
index c8aa348..aaba747 100644
--- a/src/packetSummary/components/PacketSummaryViewComponent.vue
+++ b/src/packetSummary/components/PacketSummaryViewComponent.vue
@@ -60,7 +60,7 @@ export default {
     mounted() {
         this.table.on('update-header', this.updateHeader);
     },
-    destroyed() {
+    beforeUnmount() {
         this.table.off('update-header', this.updateHeader);
     },
     data() {
diff --git a/src/product-status/data-product-autoclear.vue b/src/product-status/data-product-autoclear.vue
index f76ac23..d4c1968 100644
--- a/src/product-status/data-product-autoclear.vue
+++ b/src/product-status/data-product-autoclear.vue
@@ -55,7 +55,7 @@ export default {
         this.unlisteners = [];
         this.openmct.editor.on('isEditing', this.toggleEdit);
     },
-    destroyed() {
+    beforeUnmount() {
         this.openmct.editor.off('isEditing', this.toggleEdit);
         this.unlisteners.forEach((unlisten) => unlisten());
     }
diff --git a/src/realtimeIndicator/RealtimeIndicator.vue b/src/realtimeIndicator/RealtimeIndicator.vue
index 6ac6f99..4574100 100644
--- a/src/realtimeIndicator/RealtimeIndicator.vue
+++ b/src/realtimeIndicator/RealtimeIndicator.vue
@@ -69,7 +69,7 @@ export default {
                 this.vistaTime.ladClocks.ert.on('tick', this.setTick.bind(this));
             }
     },
-    beforeDestroy() {
+    beforeUnmount() {
         if (this.vistaTime.ladClocks.ert) {
             this.vistaTime.ladClocks.ert.off('tick', this.setTick.bind(this));
         }
diff --git a/src/realtimeSessions/components/RealtimeSessionIndicator.vue b/src/realtimeSessions/components/RealtimeSessionIndicator.vue
index 567f44f..067b9d1 100644
--- a/src/realtimeSessions/components/RealtimeSessionIndicator.vue
+++ b/src/realtimeSessions/components/RealtimeSessionIndicator.vue
@@ -75,7 +75,7 @@ export default {
 
         this.pollForSessions();
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.stopListening?.();
     },
     computed: {

From d1a77de36ce92fbe8bd7d7e691d7f8746311744a Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Fri, 5 Jan 2024 15:03:05 -0800
Subject: [PATCH 26/49] `$set` not used in Vue 3

---
 .../ImportWithDatasetsFormComponent.vue            |  2 +-
 .../channelTableSetPlugin/ChannelTableSet.vue      |  8 ++++----
 .../components/frameAccountability.js              | 10 ++++------
 src/packetQuery/components/PacketQueryView.vue     | 14 +++++---------
 4 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/src/actionModifiers/ImportExportWithDatasets/ImportWithDatasetsFormComponent.vue b/src/actionModifiers/ImportExportWithDatasets/ImportWithDatasetsFormComponent.vue
index 2edc693..17fc1b5 100644
--- a/src/actionModifiers/ImportExportWithDatasets/ImportWithDatasetsFormComponent.vue
+++ b/src/actionModifiers/ImportExportWithDatasets/ImportWithDatasetsFormComponent.vue
@@ -139,7 +139,7 @@ export default {
                 const referencedDatasetKeyString = this.makeKeyString(referencedDataset);
                 const datasetKeyString = this.makeKeyString(this.datasets[0]);
 
-                this.$set(this.mapping, referencedDatasetKeyString, datasetKeyString);
+                this.mapping[referencedDatasetKeyString] = datasetKeyString;
             });
         },
         makeKeyString(domainObject) {
diff --git a/src/channelTable/channelTableSetPlugin/ChannelTableSet.vue b/src/channelTable/channelTableSetPlugin/ChannelTableSet.vue
index d2ba8b3..3d38133 100644
--- a/src/channelTable/channelTableSetPlugin/ChannelTableSet.vue
+++ b/src/channelTable/channelTableSetPlugin/ChannelTableSet.vue
@@ -79,7 +79,7 @@ export default {
             ladTable.domainObject = domainObject;
             ladTable.key = this.openmct.objects.makeKeyString(domainObject.identifier);
             ladTable.objectPath = [domainObject, ...this.objectPath];
-            this.$set(this.ladTelemetryObjects, ladTable.key, []);
+            this.ladTelemetryObjects[ladTable.key] = [];
             this.ladTableObjects.push(ladTable);
             let composition = this.openmct.composition.get(ladTable.domainObject);
             let addCallback = this.addTelemetryObject(ladTable);
@@ -102,7 +102,7 @@ export default {
         reorderLadTables(reorderPlan) {
             let oldComposition = this.ladTableObjects.slice();
             reorderPlan.forEach(reorderEvent => {
-                this.$set(this.ladTableObjects, reorderEvent.newIndex, oldComposition[reorderEvent.oldIndex]);
+                this.ladTableObjects[reorderEvent.newIndex] = oldComposition[reorderEvent.oldIndex];
             });
         },
         setTimesystem(timesystem) {
@@ -115,7 +115,7 @@ export default {
                 telemetryObject.domainObject = domainObject;
                 let telemetryObjects = this.ladTelemetryObjects[ladTable.key];
                 telemetryObjects.push(telemetryObject);
-                this.$set(this.ladTelemetryObjects, ladTable.key, telemetryObjects);
+                this.ladTelemetryObjects[ladTable.key] = telemetryObjects;
             };
         },
         removeTelemetryObject(ladTable) {
@@ -123,7 +123,7 @@ export default {
                 let telemetryObjects = this.ladTelemetryObjects[ladTable.key];
                 let index = telemetryObjects.findIndex(telemetryObject => this.openmct.objects.makeKeyString(identifier) === telemetryObject.key);
                 telemetryObjects.splice(index, 1);
-                this.$set(this.ladTelemetryObjects, ladTable.key, telemetryObjects);
+                this.ladTelemetryObjects[ladTable.key] = telemetryObjects;
             };
         },
         updateViewContext(rowContext) {
diff --git a/src/frameaccountability/components/frameAccountability.js b/src/frameaccountability/components/frameAccountability.js
index fdf77ff..6d2f448 100644
--- a/src/frameaccountability/components/frameAccountability.js
+++ b/src/frameaccountability/components/frameAccountability.js
@@ -145,13 +145,11 @@ define([
             },
             updateFramesCollection(vcid) {
                 return (datum) => {
-                    let collection = this.sortedEventsCollections[vcid];
+                    const collection = this.sortedEventsCollections[vcid];
 
-                    if (this.events[vcid]) {
-                        this.$set(this.events, vcid, collection.getRows());
-                    } else {
-                        this.$set(this.events, vcid, [collection.getRows()]);
-                    }
+                    this.events[vcid] = this.events[vcid] !== undefined
+                        ? collection.getRows()
+                        : [ collection.getRows() ];
                 };
             },
             lastChild(vcid) {
diff --git a/src/packetQuery/components/PacketQueryView.vue b/src/packetQuery/components/PacketQueryView.vue
index 16e2d66..f4ea517 100644
--- a/src/packetQuery/components/PacketQueryView.vue
+++ b/src/packetQuery/components/PacketQueryView.vue
@@ -164,21 +164,17 @@ export default {
     },
     methods: {
         initializeQueryModel() {
-            this.$set(this.queryModel, 'useSession' , false);
-            this.$set(this.queryModel, 'sessionId', '');
-            this.$set(this.queryModel, 'useTimeConductor', false);
+            this.queryModel['useSession'] = false;
+            this.queryModel['sessionId'] = '';
+            this.queryModel['useTimeConductor'] = false;
         },
         onChange(change) {
-            this.$set(
-                this.queryModel,
-                change.model.key,
-                change.value
-            );
+            this.queryModel[change.model.key] = change.value;
         },
         setFilterOptions() {
             FILTER_OPTIONS.forEach(key => {
                 const propertyName = key + FILTER_SUFFIX;
-                this.$set(this.queryModel, propertyName, '');
+                this.queryModel[propertyName] = '';
 
                 filterRows.push({
                     name: key.toUpperCase(),

From f2b2dbee3e282f36539297704e714efbb08e4080 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Fri, 5 Jan 2024 15:04:45 -0800
Subject: [PATCH 27/49] import nextTick directly from vue

---
 .../sessionSelector/historicalSessionSelector.vue              | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/multipleHistoricalSessions/sessionSelector/historicalSessionSelector.vue b/src/multipleHistoricalSessions/sessionSelector/historicalSessionSelector.vue
index 49532b4..1114318 100644
--- a/src/multipleHistoricalSessions/sessionSelector/historicalSessionSelector.vue
+++ b/src/multipleHistoricalSessions/sessionSelector/historicalSessionSelector.vue
@@ -145,6 +145,7 @@
 <script>
 import TelemetryTable from 'openmct.tables.components.Table';
 import SessionService from 'services/session/SessionService';
+import { nextTick } from 'vue';
 
 export default {
     inject: ['openmct', 'table'],
@@ -182,7 +183,7 @@ export default {
         selectHostAndFilterSessions(host){
             this.selectedHost = host;
             this.sessionServiceFilteredByHost = this.availableSessions.filter(session => session.host === host);
-            this.$nextTick(() => {
+            nextTick(() => {
                 this.updateDataInTable(this.sessionServiceFilteredByHost);
             });
         },

From e477f8acdaf060c7296325cb052f7355abeccae9 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Tue, 9 Jan 2024 15:27:16 -0800
Subject: [PATCH 28/49] use explicit ref instead of $children

---
 .../components/frameAccountabilityBadFrames.vue                | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/frameaccountability/components/frameAccountabilityBadFrames.vue b/src/frameaccountability/components/frameAccountabilityBadFrames.vue
index db5632c..85e0360 100644
--- a/src/frameaccountability/components/frameAccountabilityBadFrames.vue
+++ b/src/frameaccountability/components/frameAccountabilityBadFrames.vue
@@ -13,6 +13,7 @@
     </div>
     <div class="l-preview-window__object-view l-preview-window__object-view-no-padding">
         <telemetry-table
+            ref="tableComponent"
             :marking="markingProp"
             :enableLegacyToolbar="true"
         >
@@ -69,7 +70,7 @@ export default {
     mounted() {
         this.table.clearAndUpdateData(this.badFrames);
 
-        this.telemetryTableVueComponent = this.$children[0];
+        this.telemetryTableVueComponent = this.$refs.tableComponent;
         this.telemetryTableVueComponent.sortBy('event_time');
 
         let overlay = this.openmct.overlays.overlay({

From 40bbb42aac5017b4db0316ed8198e44ac4f7cf9b Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Tue, 9 Jan 2024 16:11:11 -0800
Subject: [PATCH 29/49] fix missing indicator element

---
 src/clearDataIndicator/plugin.js | 39 +++++++++++++++++---------------
 1 file changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/clearDataIndicator/plugin.js b/src/clearDataIndicator/plugin.js
index d3394c9..dc84b56 100644
--- a/src/clearDataIndicator/plugin.js
+++ b/src/clearDataIndicator/plugin.js
@@ -3,24 +3,27 @@ import ClearDataIndicator from './indicator/clearDataIndicator.vue';
 
 export default function plugin(globalStalenessMs) {
     return function install(openmct) {
+        const indicator = {
+            element: document.createElement('div')
+        };
+        const componentDefinition = {
+            provide: {
+                openmct,
+                globalStalenessMs
+            },
+            components: {
+                ClearDataIndicator
+            },
+            template: '<ClearDataIndicator />'
+        };
+        const componentOptions = {
+            element: indicator.element
+        };
+
         openmct.indicators.add(indicator);
-        openmct.on('start', () => {
-            const componentDefinition = {
-                provide: {
-                    openmct,
-                    globalStalenessMs
-                },
-                components: {
-                    ClearDataIndicator
-                },
-                template: '<ClearDataIndicator />'
-            };
-            
-            const {
-              componentInstance,
-              destroy,
-              el
-            } = mount(componentDefinition);
-        });
+        openmct.on(
+            'start',
+            () => mount(componentDefinition, componentOptions)
+        );
     };
 }

From 8cf4277a0b719c76f0c80e28ec56152f8eceae86 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Tue, 9 Jan 2024 16:12:24 -0800
Subject: [PATCH 30/49] fix missing import

---
 src/product-status/plugin.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/product-status/plugin.js b/src/product-status/plugin.js
index 5721a9e..339b4a4 100644
--- a/src/product-status/plugin.js
+++ b/src/product-status/plugin.js
@@ -1,4 +1,5 @@
 import DataProductViewProvider from './DataProductViewProvider.js';
+import DataProductInspectorViewProvider from './DataProductInspectorViewProvider.js';
 import DATDownloadCell from './DATDownloadCell.js';
 import EMDDownloadCell from './EMDDownloadCell.js';
 import EMDPreviewCell from './EMDPreviewCell.js';

From 58a96c66ac568f355035d1571afdc62b78b9adee Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Tue, 9 Jan 2024 17:32:24 -0800
Subject: [PATCH 31/49] fix runtime compile warning

---
 .webpack/webpack.common.js                                       | 1 +
 .../{indicator/clearDataIndicator.vue => ClearDataIndicator.vue} | 0
 2 files changed, 1 insertion(+)
 rename src/clearDataIndicator/{indicator/clearDataIndicator.vue => ClearDataIndicator.vue} (100%)

diff --git a/.webpack/webpack.common.js b/.webpack/webpack.common.js
index bc1bda8..70fd2c8 100644
--- a/.webpack/webpack.common.js
+++ b/.webpack/webpack.common.js
@@ -77,6 +77,7 @@ const config = {
             **/
             "openmct.tables.components.Table": path.join(__dirname, '..', "node_modules/openmct/src/plugins/telemetryTable/components/TableComponent.vue"),
             "openmct.tables.components.TableConfiguration": path.join(__dirname, '..', "node_modules/openmct/src/plugins/telemetryTable/components/TableConfiguration.vue"),
+            "vue": "vue/dist/vue.esm-bundler.js"
         }
     },
     plugins: [
diff --git a/src/clearDataIndicator/indicator/clearDataIndicator.vue b/src/clearDataIndicator/ClearDataIndicator.vue
similarity index 100%
rename from src/clearDataIndicator/indicator/clearDataIndicator.vue
rename to src/clearDataIndicator/ClearDataIndicator.vue

From 3235dc56ffb6e635ec1e4deff484543eb4e179a9 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Tue, 9 Jan 2024 17:41:19 -0800
Subject: [PATCH 32/49] fix `mountVueComponent` and mounting of indicators

---
 src/clearDataIndicator/plugin.js         | 22 ++++++------
 src/globalFilters/plugin.js              | 45 +++++++++++-------------
 src/mcwsIndicator/plugin.js              | 19 +++++-----
 src/multipleHistoricalSessions/plugin.js | 23 ++++++------
 src/realtimeIndicator/plugin.js          | 19 ++++++----
 src/realtimeSessions/plugin.js           | 20 ++++++-----
 src/utils/mountVueComponent.js           |  6 ++--
 7 files changed, 79 insertions(+), 75 deletions(-)

diff --git a/src/clearDataIndicator/plugin.js b/src/clearDataIndicator/plugin.js
index dc84b56..9faba8b 100644
--- a/src/clearDataIndicator/plugin.js
+++ b/src/clearDataIndicator/plugin.js
@@ -1,11 +1,8 @@
 import mount from 'utils/mountVueComponent';
-import ClearDataIndicator from './indicator/clearDataIndicator.vue';
+import ClearDataIndicator from './ClearDataIndicator.vue';
 
 export default function plugin(globalStalenessMs) {
     return function install(openmct) {
-        const indicator = {
-            element: document.createElement('div')
-        };
         const componentDefinition = {
             provide: {
                 openmct,
@@ -16,14 +13,19 @@ export default function plugin(globalStalenessMs) {
             },
             template: '<ClearDataIndicator />'
         };
-        const componentOptions = {
-            element: indicator.element
+
+        const {
+          componentInstance,
+          destroy,
+          el
+        } = mount(componentDefinition);
+
+        const indicator = {
+            key: 'clear-data-indicator',
+            element: el,
+            destroy
         };
 
         openmct.indicators.add(indicator);
-        openmct.on(
-            'start',
-            () => mount(componentDefinition, componentOptions)
-        );
     };
 }
diff --git a/src/globalFilters/plugin.js b/src/globalFilters/plugin.js
index 748b045..0c093ad 100644
--- a/src/globalFilters/plugin.js
+++ b/src/globalFilters/plugin.js
@@ -3,33 +3,30 @@ import GlobalFilterIndicator from './GlobalFilterIndicator.vue';
 
 export default function plugin(config) {
   return function install(openmct) {
+    const componentDefinition = {
+      provide: {
+        openmct,
+        filters: config
+      },
+      components: {
+        GlobalFilterIndicator
+      },
+      template: '<GlobalFilterIndicator />'
+    };
+
+    const {
+      componentInstance,
+      destroy,
+      el
+    } = mount(componentDefinition);
+
     const indicator = {
-      element: document.createElement('div'),
-      priority: openmct.priority.DEFAULT
+      key: 'global-filter-indicator',
+      priority: openmct.priority.DEFAULT,
+      element: el,
+      destroy
     };
 
     openmct.indicators.add(indicator);
-    openmct.on('start', () => {
-      const componentDefinition = {
-        provide: {
-          openmct,
-          filters: config
-        },
-        components: {
-          GlobalFilterIndicator
-        },
-        template: '<GlobalFilterIndicator />'
-      };
-      
-      const componentOptions = {
-          element: indicator.element
-      };
-      
-      const {
-          componentInstance,
-          destroy,
-          el
-      } = mount(componentDefinition, componentOptions);
-    });
   };
 }
diff --git a/src/mcwsIndicator/plugin.js b/src/mcwsIndicator/plugin.js
index 8430bdb..d146e36 100644
--- a/src/mcwsIndicator/plugin.js
+++ b/src/mcwsIndicator/plugin.js
@@ -3,12 +3,6 @@ import mount from 'utils/mountVueComponent';
 
 export default function MCWSIndicatorPlugin() {
   return function install(openmct) {
-    const indicator = {
-      key: 'mcws-indicator',
-      element: document.createElement('div'),
-      priority: -3
-    };
-
     const componentDefinition = {
       components: {
         MCWSIndicator
@@ -19,15 +13,18 @@ export default function MCWSIndicatorPlugin() {
       template: '<MCWSIndicator />'
     };
 
-    const componentOptions = {
-      element: indicator.element
-    };
-
     const {
         componentInstance,
         destroy,
         el
-    } = mount(componentDefinition, componentOptions);
+    } = mount(componentDefinition);
+
+    const indicator = {
+      key: 'mcws-indicator',
+      priority: -3,
+      element: el,
+      destroy
+    };
 
     openmct.indicators.add(indicator);
   };
diff --git a/src/multipleHistoricalSessions/plugin.js b/src/multipleHistoricalSessions/plugin.js
index d6c9330..166239e 100644
--- a/src/multipleHistoricalSessions/plugin.js
+++ b/src/multipleHistoricalSessions/plugin.js
@@ -5,11 +5,6 @@ import HistoricalSessionMetadata from './HistoricalSessionMetadata';
 
 export default function HistoricalSessionsPlugin() {
     return function install(openmct) {
-        const indicator = {
-            element: document.createElement('div'),
-            priority: -1
-        };
-
         openmct.on('start', () => {
             const instantiate = openmct.$injector.get('instantiate');
             const model = {
@@ -41,18 +36,22 @@ export default function HistoricalSessionsPlugin() {
                 },
                 template: '<HistoricalSessionIndicator></HistoricalSessionIndicator>'
             };
-            
-            const componentOptions = {
-                element: indicator.element
-            };
-            
+
             const {
                 componentInstance,
                 destroy,
                 el
-            } = mount(componentDefinition, componentOptions);
+            } = mount(componentDefinition);
+
+            const indicator = {
+                key: 'historical-session-indicator',
+                element: el,
+                priority: -1,
+                destroy
+            };
+
+            openmct.indicators.add(indicator);
         });
 
-        openmct.indicators.add(indicator);
     };
 }
diff --git a/src/realtimeIndicator/plugin.js b/src/realtimeIndicator/plugin.js
index 0b2a429..2f175a9 100644
--- a/src/realtimeIndicator/plugin.js
+++ b/src/realtimeIndicator/plugin.js
@@ -3,10 +3,6 @@ import RealtimeIndicator from './RealtimeIndicator.vue';
 
 export default function plugin(vistaTime) {
   return function install(openmct) {
-    const indicator = {
-        element: document.createElement('div'),
-        priority: -5
-    };
     const componentDefinition = {
       provide: {
         openmct,
@@ -17,11 +13,20 @@ export default function plugin(vistaTime) {
       },
       template: '<RealtimeIndicator />'
     };
-    const componentOptions = {
-      element: indicator.element
+
+    const {
+      componentInstance,
+      destroy,
+      el
+    } = mount(componentDefinition);
+
+    const indicator = {
+      key: 'realtime-update-indicator',
+      element: el,
+      priority: -5,
+      destroy
     };
 
-    openmct.on('start', () => mount(componentDefinition, componentOptions));
     openmct.indicators.add(indicator);
   };
 }
diff --git a/src/realtimeSessions/plugin.js b/src/realtimeSessions/plugin.js
index 6437c1d..ab72f3b 100644
--- a/src/realtimeSessions/plugin.js
+++ b/src/realtimeSessions/plugin.js
@@ -3,10 +3,6 @@ import RealtimeSessionIndicator from './components/RealtimeSessionIndicator.vue'
 
 export default function plugin() {
   return function install(openmct) {
-    const indicator = {
-        element: document.createElement('div'),
-        priority: -4
-    };
     const componentDefinition = {
       provide: {
         openmct
@@ -16,13 +12,21 @@ export default function plugin() {
       },
       template: '<RealtimeSessionIndicator />'
     };
-
-    const componentOptions = {
-        element: indicator.element
+    
+    const {
+      componentInstance,
+      destroy,
+      el
+    } = mount(componentDefinition);
+    
+    const indicator = {
+      key: 'realtime-session-indicator',
+      element: el,
+      priority: -4,
+      destroy
     };
 
     openmct.indicators.add(indicator);
-    openmct.on('start', () => mount(componentDefinition, componentOptions));
   };
 }
 
diff --git a/src/utils/mountVueComponent.js b/src/utils/mountVueComponent.js
index bca3724..3572fbc 100644
--- a/src/utils/mountVueComponent.js
+++ b/src/utils/mountVueComponent.js
@@ -1,15 +1,15 @@
 import { createApp, defineComponent } from 'vue';
 
 export default function mount(component, { props, children, element } = {}) {
-  const el = element ?? document.createElement('div');
+  const mountingElement = element ?? document.createElement('div');
 
   const vueComponent = defineComponent(component);
   const app = createApp(vueComponent);
-  const componentInstance = app.mount(el);
+  const componentInstance = app.mount(mountingElement);
 
   return {
     componentInstance,
     destroy: () => app.unmount(),
-    el
+    el: componentInstance.$el
   };
 }

From 4207986077012ecfe8d2d15fb5532ccc2ff55d13 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Tue, 9 Jan 2024 17:45:51 -0800
Subject: [PATCH 33/49] remove injector and fix historical session indicator

---
 src/multipleHistoricalSessions/plugin.js | 81 +++++++++++-------------
 1 file changed, 38 insertions(+), 43 deletions(-)

diff --git a/src/multipleHistoricalSessions/plugin.js b/src/multipleHistoricalSessions/plugin.js
index 166239e..bd6ef5b 100644
--- a/src/multipleHistoricalSessions/plugin.js
+++ b/src/multipleHistoricalSessions/plugin.js
@@ -5,53 +5,48 @@ import HistoricalSessionMetadata from './HistoricalSessionMetadata';
 
 export default function HistoricalSessionsPlugin() {
     return function install(openmct) {
-        openmct.on('start', () => {
-            const instantiate = openmct.$injector.get('instantiate');
-            const model = {
-                identifier: {
-                    key: 'session-historical',
-                    namespace: ''
-                },
-                name: 'Historical Session',
-                type: 'vista.channel'
-            };
-            const oldStyleDomainObject = instantiate(model);
-            const newStyleDomainObject = oldStyleDomainObject.useCapability('adapter');
-            const table = new SessionTable(
-                newStyleDomainObject,
-                openmct,
-                HistoricalSessionMetadata
-            );
-            const objectPath = [ model ];
+        const domainObject = {
+            identifier: {
+                key: 'session-historical',
+                namespace: ''
+            },
+            name: 'Historical Session',
+            type: 'vista.channel'
+        };
 
-            const componentDefinition = {
-                provide: {
-                    openmct,
-                    table,
-                    objectPath,
-                    currentView: {}
-                },
-                components: {
-                    HistoricalSessionIndicator
-                },
-                template: '<HistoricalSessionIndicator></HistoricalSessionIndicator>'
-            };
+        const table = new SessionTable(
+            domainObject,
+            openmct,
+            HistoricalSessionMetadata
+        );
+        const objectPath = [ domainObject ];
 
-            const {
-                componentInstance,
-                destroy,
-                el
-            } = mount(componentDefinition);
+        const componentDefinition = {
+            provide: {
+                openmct,
+                table,
+                objectPath,
+                currentView: {}
+            },
+            components: {
+                HistoricalSessionIndicator
+            },
+            template: '<HistoricalSessionIndicator></HistoricalSessionIndicator>'
+        };
 
-            const indicator = {
-                key: 'historical-session-indicator',
-                element: el,
-                priority: -1,
-                destroy
-            };
+        const {
+            componentInstance,
+            destroy,
+            el
+        } = mount(componentDefinition);
 
-            openmct.indicators.add(indicator);
-        });
+        const indicator = {
+            key: 'historical-session-indicator',
+            element: el,
+            priority: -1,
+            destroy
+        };
 
+        openmct.indicators.add(indicator);
     };
 }

From 9ddcb93d645000af9b74ad7d3089b804e4254abe Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Tue, 9 Jan 2024 17:46:43 -0800
Subject: [PATCH 34/49] rename mock domain object type

---
 src/multipleHistoricalSessions/plugin.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/multipleHistoricalSessions/plugin.js b/src/multipleHistoricalSessions/plugin.js
index bd6ef5b..8895ad9 100644
--- a/src/multipleHistoricalSessions/plugin.js
+++ b/src/multipleHistoricalSessions/plugin.js
@@ -11,7 +11,7 @@ export default function HistoricalSessionsPlugin() {
                 namespace: ''
             },
             name: 'Historical Session',
-            type: 'vista.channel'
+            type: 'vista.historical-session'
         };
 
         const table = new SessionTable(

From 68d66cd8aeb508bf81af09f6aeb537528d49d1ff Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Thu, 11 Jan 2024 13:39:38 -0800
Subject: [PATCH 35/49] provide `renderWhenVisible` option to views

---
 src/alarmsView/AlarmsViewProvider.js                 | 12 +++++++-----
 .../channelTablePlugin/ChannelTableViewProvider.js   |  7 ++++---
 .../channelTableSetPlugin/ChannelTableSetView.js     |  5 +++--
 src/commandEventsView/CommandEventsViewProvider.js   |  5 +++--
 src/evrView/EVRViewProvider.js                       |  5 +++--
 .../FrameEventFilterViewProvider.js                  |  5 +++--
 .../frameAccountabilityViewProvider.js               |  5 +++--
 src/framesummary/FrameWatchViewProvider.js           |  5 +++--
 src/messagesView/MessagesViewProvider.js             |  5 +++--
 src/packetSummary/PacketSummaryViewProvider.js       |  5 +++--
 src/product-status/DataProductViewProvider.js        |  5 +++--
 11 files changed, 38 insertions(+), 26 deletions(-)

diff --git a/src/alarmsView/AlarmsViewProvider.js b/src/alarmsView/AlarmsViewProvider.js
index 15180fb..86b7043 100644
--- a/src/alarmsView/AlarmsViewProvider.js
+++ b/src/alarmsView/AlarmsViewProvider.js
@@ -16,17 +16,18 @@ export default class AlarmsViewProvider {
     }
 
     view(domainObject, objectPath) {
-        let table = new AlarmsTable(domainObject, openmct);
         let component;
         let _destroy = null;
-        let markingProp = {
+
+        const table = new AlarmsTable(domainObject, openmct);
+        const markingProp = {
             enable: true,
             useAlternateControlBar: false,
             rowName: '',
             rowNamePlural: ''
         };
         const view = {
-            show: function (element, editMode) {
+            show: function (element, editMode, { renderWhenVisible }) {
                 const componentDefinition = {
                     components: {
                         TableComponent
@@ -35,7 +36,8 @@ export default class AlarmsViewProvider {
                         return {
                             isEditing: editMode,
                             markingProp,
-                            view
+                            view,
+                            renderWhenVisible
                         };
                     },
                     provide: {
@@ -89,7 +91,7 @@ export default class AlarmsViewProvider {
                     };
                 }
             },
-            destroy: function (element) {
+            destroy: function () {
                 _destroy?.();
             }
         };
diff --git a/src/channelTable/channelTablePlugin/ChannelTableViewProvider.js b/src/channelTable/channelTablePlugin/ChannelTableViewProvider.js
index 8a336e5..b35dfb0 100644
--- a/src/channelTable/channelTablePlugin/ChannelTableViewProvider.js
+++ b/src/channelTable/channelTablePlugin/ChannelTableViewProvider.js
@@ -33,7 +33,7 @@ export default class ChannelTableViewProvider {
         const table = new ChannelTable(domainObject, this.openmct);
 
         const view = {
-            show(element, isEditing) {
+            show(element, isEditing, { renderWhenVisible }) {
                 const componentDefinition = {
                     data() {
                         return {
@@ -49,11 +49,12 @@ export default class ChannelTableViewProvider {
                         openmct,
                         table,
                         objectPath,
-                        currentView: view
+                        currentView: view,
+                        renderWhenVisible
                     },
                     template: `
                     <table-component
-                        class="js-channel-list-view"
+                        :class="'js-channel-list-view'"
                         ref="tableComponent"
                         :isEditing="isEditing"
                         :marking="markingProp"
diff --git a/src/channelTable/channelTableSetPlugin/ChannelTableSetView.js b/src/channelTable/channelTableSetPlugin/ChannelTableSetView.js
index fcc2452..af34709 100644
--- a/src/channelTable/channelTableSetPlugin/ChannelTableSetView.js
+++ b/src/channelTable/channelTableSetPlugin/ChannelTableSetView.js
@@ -10,7 +10,7 @@ export default class ChannelTableSetView {
         this._destroy = null;
     }
 
-    show(element) {
+    show(element, isEditing, { renderWhenVisible }) {
         const componentDefinition = {
             components: {
                 ChannelTableSet
@@ -18,7 +18,8 @@ export default class ChannelTableSetView {
             provide: {
                 openmct: this.openmct,
                 objectPath: this.objectPath,
-                currentView: this
+                currentView: this,
+                renderWhenVisible
             },
             data: () => {
                 return {
diff --git a/src/commandEventsView/CommandEventsViewProvider.js b/src/commandEventsView/CommandEventsViewProvider.js
index 15a4bb4..168d781 100644
--- a/src/commandEventsView/CommandEventsViewProvider.js
+++ b/src/commandEventsView/CommandEventsViewProvider.js
@@ -28,7 +28,7 @@ export default class CommandEventsViewProvider {
         };
 
         const view = {
-            show: function (element, editMode) {
+            show: function (element, editMode, { renderWhenVisible }) {
                 const componentDefinition = {
                   components: {
                       TableComponent
@@ -37,7 +37,8 @@ export default class CommandEventsViewProvider {
                       return {
                           isEditing: editMode,
                           markingProp,
-                          view
+                          view,
+                          renderWhenVisible
                       };
                   },
                   provide: {
diff --git a/src/evrView/EVRViewProvider.js b/src/evrView/EVRViewProvider.js
index 1c03b50..8905dcc 100644
--- a/src/evrView/EVRViewProvider.js
+++ b/src/evrView/EVRViewProvider.js
@@ -48,7 +48,7 @@ export default class EVRViewProvider {
         };
 
         const view = {
-            show: function (element, editMode) {
+            show: function (element, editMode, { renderWhenVisible }) {
                 const componentDefinition = {
                     components: {
                         TableComponent
@@ -57,7 +57,8 @@ export default class EVRViewProvider {
                         openmct,
                         table,
                         objectPath,
-                        currentView: view
+                        currentView: view,
+                        renderWhenVisible
                     },
                     data() {
                         return {
diff --git a/src/frameEventFilterView/FrameEventFilterViewProvider.js b/src/frameEventFilterView/FrameEventFilterViewProvider.js
index 1932055..dea1dfa 100644
--- a/src/frameEventFilterView/FrameEventFilterViewProvider.js
+++ b/src/frameEventFilterView/FrameEventFilterViewProvider.js
@@ -28,7 +28,7 @@ export default class FrameEventFilterViewProvider {
         };
 
         const view = {
-            show: function (element, editMode) {
+            show: function (element, editMode, { renderWhenVisible }) {
                 const componentDefinition = {
                     components: {
                         TableComponent
@@ -37,7 +37,8 @@ export default class FrameEventFilterViewProvider {
                         return {
                             isEditing: editMode,
                             markingProp,
-                            view
+                            view,
+                            renderWhenVisible
                         };
                     },
                     provide: {
diff --git a/src/frameaccountability/frameAccountabilityViewProvider.js b/src/frameaccountability/frameAccountabilityViewProvider.js
index ce76829..ddb02fb 100644
--- a/src/frameaccountability/frameAccountabilityViewProvider.js
+++ b/src/frameaccountability/frameAccountabilityViewProvider.js
@@ -30,7 +30,7 @@ export default class FrameAccountabilityViewProvider {
 
         return new BadFramesTelemetryTable(domainObject, this.openmct);
     }
-    show(element) {
+    show(element, isEditing, { renderWhenVisible }) {
         const componentDefinition = {
             components: {
                 frameAccountability
@@ -42,7 +42,8 @@ export default class FrameAccountabilityViewProvider {
                 objectPath: [],
                 FLAG_COLORS,
                 expectedVcidList: this.expectedVcidList,
-                currentView: {}
+                currentView: {},
+                renderWhenVisible
             },
             template: '<frame-accountability></frame-accountability>'
         };
diff --git a/src/framesummary/FrameWatchViewProvider.js b/src/framesummary/FrameWatchViewProvider.js
index 06400cd..1b8ae1e 100644
--- a/src/framesummary/FrameWatchViewProvider.js
+++ b/src/framesummary/FrameWatchViewProvider.js
@@ -24,7 +24,7 @@ export default class FrameWatchViewProvider {
         const table = new FrameWatchTable(domainObject, this.openmct, this.type);
 
         const view = {
-            show: function (element, editMode) {
+            show: function (element, editMode, { renderWhenVisible }) {
                 const componentDefinition = {
                     components: {
                         FrameWatchViewComponent
@@ -32,7 +32,8 @@ export default class FrameWatchViewProvider {
                     data() {
                         return {
                             isEditing: editMode,
-                            view
+                            view,
+                            renderWhenVisible
                         };
                     },
                     provide: {
diff --git a/src/messagesView/MessagesViewProvider.js b/src/messagesView/MessagesViewProvider.js
index 9745bf9..19cd749 100644
--- a/src/messagesView/MessagesViewProvider.js
+++ b/src/messagesView/MessagesViewProvider.js
@@ -28,7 +28,7 @@ export default class MessagesViewProvider {
         };
 
         const view = {
-            show: function (element, editMode) {
+            show: function (element, editMode, { renderWhenVisible }) {
                 const componentDefinition = {
                     components: {
                         TableComponent
@@ -37,7 +37,8 @@ export default class MessagesViewProvider {
                         return {
                             isEditing: editMode,
                             markingProp,
-                            view
+                            view,
+                            renderWhenVisible
                         };
                     },
                     provide: {
diff --git a/src/packetSummary/PacketSummaryViewProvider.js b/src/packetSummary/PacketSummaryViewProvider.js
index a644851..95b8f58 100644
--- a/src/packetSummary/PacketSummaryViewProvider.js
+++ b/src/packetSummary/PacketSummaryViewProvider.js
@@ -22,7 +22,7 @@ export default class ProductSummaryViewProvider {
         const table = new PacketSummaryTable(domainObject, openmct);
 
         const view = {
-            show: function (element, editMode) {
+            show: function (element, editMode, { renderWhenVisible }) {
                 const componentDefinition = {
                     components: {
                         PacketSummaryViewComponent
@@ -30,7 +30,8 @@ export default class ProductSummaryViewProvider {
                     data() {
                         return {
                             isEditing: editMode,
-                            view
+                            view,
+                            renderWhenVisible
                         };
                     },
                     provide: {
diff --git a/src/product-status/DataProductViewProvider.js b/src/product-status/DataProductViewProvider.js
index 80376f2..e2b324a 100644
--- a/src/product-status/DataProductViewProvider.js
+++ b/src/product-status/DataProductViewProvider.js
@@ -28,7 +28,7 @@ export default class DataProductViewProvider {
         };
 
         const view = {
-            show: function (element, editMode) {
+            show: function (element, editMode, { renderWhenVisible }) {
                 const componentDefinition = {
                     components: {
                         TableComponent
@@ -37,7 +37,8 @@ export default class DataProductViewProvider {
                         return {
                             isEditing: editMode,
                             markingProp,
-                            view
+                            view,
+                            renderWhenVisible
                         };
                     },
                     provide: {

From 2a30fde2e29ef6fb3bd0f5a3c000c9f21ccffea4 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Thu, 11 Jan 2024 14:56:59 -0800
Subject: [PATCH 36/49] historical selector needs own `renderWhenVisible` func
 since manually showing view

---
 src/multipleHistoricalSessions/plugin.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/multipleHistoricalSessions/plugin.js b/src/multipleHistoricalSessions/plugin.js
index 8895ad9..0d24234 100644
--- a/src/multipleHistoricalSessions/plugin.js
+++ b/src/multipleHistoricalSessions/plugin.js
@@ -5,6 +5,11 @@ import HistoricalSessionMetadata from './HistoricalSessionMetadata';
 
 export default function HistoricalSessionsPlugin() {
     return function install(openmct) {
+        const renderWhenVisible = func => {
+            window.requestAnimationFrame(func);
+            return true;
+        };
+
         const domainObject = {
             identifier: {
                 key: 'session-historical',
@@ -26,7 +31,8 @@ export default function HistoricalSessionsPlugin() {
                 openmct,
                 table,
                 objectPath,
-                currentView: {}
+                currentView: {},
+                renderWhenVisible
             },
             components: {
                 HistoricalSessionIndicator

From 55d902bd25ba64df01012427aa315d50aaee3ea6 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Thu, 11 Jan 2024 15:22:04 -0800
Subject: [PATCH 37/49] `renderWhenVisible` should be provided, not in data

---
 src/alarmsView/AlarmsViewProvider.js                     | 6 +++---
 src/commandEventsView/CommandEventsViewProvider.js       | 6 +++---
 src/frameEventFilterView/FrameEventFilterViewProvider.js | 6 +++---
 src/framesummary/FrameWatchViewProvider.js               | 6 +++---
 src/messagesView/MessagesViewProvider.js                 | 6 +++---
 src/packetSummary/PacketSummaryViewProvider.js           | 6 +++---
 src/product-status/DataProductViewProvider.js            | 6 +++---
 7 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/alarmsView/AlarmsViewProvider.js b/src/alarmsView/AlarmsViewProvider.js
index 86b7043..a1ed247 100644
--- a/src/alarmsView/AlarmsViewProvider.js
+++ b/src/alarmsView/AlarmsViewProvider.js
@@ -36,15 +36,15 @@ export default class AlarmsViewProvider {
                         return {
                             isEditing: editMode,
                             markingProp,
-                            view,
-                            renderWhenVisible
+                            view
                         };
                     },
                     provide: {
                         openmct,
                         table,
                         objectPath,
-                        currentView: view
+                        currentView: view,
+                        renderWhenVisible
                     },
                     template:
                         `<table-component 
diff --git a/src/commandEventsView/CommandEventsViewProvider.js b/src/commandEventsView/CommandEventsViewProvider.js
index 168d781..dc7faf7 100644
--- a/src/commandEventsView/CommandEventsViewProvider.js
+++ b/src/commandEventsView/CommandEventsViewProvider.js
@@ -37,15 +37,15 @@ export default class CommandEventsViewProvider {
                       return {
                           isEditing: editMode,
                           markingProp,
-                          view,
-                          renderWhenVisible
+                          view
                       };
                   },
                   provide: {
                       openmct,
                       table,
                       objectPath,
-                      currentView: view
+                      currentView: view,
+                      renderWhenVisible
                   },
                   template: `
                       <table-component
diff --git a/src/frameEventFilterView/FrameEventFilterViewProvider.js b/src/frameEventFilterView/FrameEventFilterViewProvider.js
index dea1dfa..485d3be 100644
--- a/src/frameEventFilterView/FrameEventFilterViewProvider.js
+++ b/src/frameEventFilterView/FrameEventFilterViewProvider.js
@@ -37,15 +37,15 @@ export default class FrameEventFilterViewProvider {
                         return {
                             isEditing: editMode,
                             markingProp,
-                            view,
-                            renderWhenVisible
+                            view
                         };
                     },
                     provide: {
                         openmct,
                         table,
                         objectPath,
-                        currentView: view
+                        currentView: view,
+                        renderWhenVisible
                     },
                     template: `
                         <table-component
diff --git a/src/framesummary/FrameWatchViewProvider.js b/src/framesummary/FrameWatchViewProvider.js
index 1b8ae1e..f6de64d 100644
--- a/src/framesummary/FrameWatchViewProvider.js
+++ b/src/framesummary/FrameWatchViewProvider.js
@@ -32,15 +32,15 @@ export default class FrameWatchViewProvider {
                     data() {
                         return {
                             isEditing: editMode,
-                            view,
-                            renderWhenVisible
+                            view
                         };
                     },
                     provide: {
                         openmct,
                         table,
                         objectPath,
-                        currentView: view
+                        currentView: view,
+                        renderWhenVisible
                     },
                     template: `
                         <frame-watch-view-component
diff --git a/src/messagesView/MessagesViewProvider.js b/src/messagesView/MessagesViewProvider.js
index 19cd749..258d293 100644
--- a/src/messagesView/MessagesViewProvider.js
+++ b/src/messagesView/MessagesViewProvider.js
@@ -37,15 +37,15 @@ export default class MessagesViewProvider {
                         return {
                             isEditing: editMode,
                             markingProp,
-                            view,
-                            renderWhenVisible
+                            view
                         };
                     },
                     provide: {
                         openmct,
                         table,
                         objectPath,
-                        currentView: view
+                        currentView: view,
+                        renderWhenVisible
                     },
                     template: `
                         <table-component
diff --git a/src/packetSummary/PacketSummaryViewProvider.js b/src/packetSummary/PacketSummaryViewProvider.js
index 95b8f58..500c7f1 100644
--- a/src/packetSummary/PacketSummaryViewProvider.js
+++ b/src/packetSummary/PacketSummaryViewProvider.js
@@ -30,15 +30,15 @@ export default class ProductSummaryViewProvider {
                     data() {
                         return {
                             isEditing: editMode,
-                            view,
-                            renderWhenVisible
+                            view
                         };
                     },
                     provide: {
                         openmct,
                         table,
                         objectPath,
-                        currentView: view
+                        currentView: view,
+                        renderWhenVisible
                     },
                     template:
                         `<packet-summary-view-component
diff --git a/src/product-status/DataProductViewProvider.js b/src/product-status/DataProductViewProvider.js
index e2b324a..2124115 100644
--- a/src/product-status/DataProductViewProvider.js
+++ b/src/product-status/DataProductViewProvider.js
@@ -37,15 +37,15 @@ export default class DataProductViewProvider {
                         return {
                             isEditing: editMode,
                             markingProp,
-                            view,
-                            renderWhenVisible
+                            view
                         };
                     },
                     provide: {
                         openmct: this.openmct,
                         table,
                         objectPath,
-                        currentView: view
+                        currentView: view,
+                        renderWhenVisible
                     },
                     methods: {
                         clearCompleted() {

From 5b93d3345ef7a3c7722b41618d0ddd9601a4ad36 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Tue, 2 Apr 2024 10:34:49 -0700
Subject: [PATCH 38/49] fix vue props for views

---
 src/commandEventsView/CommandEventsViewProvider.js |  5 +----
 src/evrView/EVRViewProvider.js                     |  4 +---
 .../FrameEventFilterViewProvider.js                |  4 +---
 src/product-status/DataProductViewProvider.js      | 14 ++++++--------
 4 files changed, 9 insertions(+), 18 deletions(-)

diff --git a/src/commandEventsView/CommandEventsViewProvider.js b/src/commandEventsView/CommandEventsViewProvider.js
index dc7faf7..9135bfa 100644
--- a/src/commandEventsView/CommandEventsViewProvider.js
+++ b/src/commandEventsView/CommandEventsViewProvider.js
@@ -36,8 +36,7 @@ export default class CommandEventsViewProvider {
                   data() {
                       return {
                           isEditing: editMode,
-                          markingProp,
-                          view
+                          markingProp
                       };
                   },
                   provide: {
@@ -50,11 +49,9 @@ export default class CommandEventsViewProvider {
                   template: `
                       <table-component
                           ref="tableComponent"
-                          class="v-data-products"
                           :allowSorting="true"
                           :isEditing="isEditing"
                           :marking="markingProp"
-                          :view="view"
                       >
                           <template slot="buttons">
                           </template>
diff --git a/src/evrView/EVRViewProvider.js b/src/evrView/EVRViewProvider.js
index 8905dcc..deae763 100644
--- a/src/evrView/EVRViewProvider.js
+++ b/src/evrView/EVRViewProvider.js
@@ -63,8 +63,7 @@ export default class EVRViewProvider {
                     data() {
                         return {
                             isEditing: editMode,
-                            markingProp,
-                            view
+                            markingProp
                         };
                     },
                     template: `
@@ -73,7 +72,6 @@ export default class EVRViewProvider {
                             :is-editing="isEditing"
                             :allow-sorting="true"
                             :marking="markingProp"
-                            :view="view"
                         ></table-component>
                     `
                 };
diff --git a/src/frameEventFilterView/FrameEventFilterViewProvider.js b/src/frameEventFilterView/FrameEventFilterViewProvider.js
index 485d3be..d23fa52 100644
--- a/src/frameEventFilterView/FrameEventFilterViewProvider.js
+++ b/src/frameEventFilterView/FrameEventFilterViewProvider.js
@@ -36,8 +36,7 @@ export default class FrameEventFilterViewProvider {
                     data() {
                         return {
                             isEditing: editMode,
-                            markingProp,
-                            view
+                            markingProp
                         };
                     },
                     provide: {
@@ -54,7 +53,6 @@ export default class FrameEventFilterViewProvider {
                             :allowSorting="true"
                             :isEditing="isEditing"
                             :marking="markingProp"
-                            :view="view"
                         >
                             <template slot="buttons">
                             </template>
diff --git a/src/product-status/DataProductViewProvider.js b/src/product-status/DataProductViewProvider.js
index 2124115..88e59c4 100644
--- a/src/product-status/DataProductViewProvider.js
+++ b/src/product-status/DataProductViewProvider.js
@@ -5,7 +5,6 @@ import DataProductTable from './DataProductTable.js';
 export default class DataProductViewProvider {
     constructor(openmct) {
         this.openmct = openmct;
-
         this.key = 'vista.productStatus';
         this.name = 'Data Product View';
         this.cssClass = 'icon-tabular-realtime';
@@ -16,10 +15,12 @@ export default class DataProductViewProvider {
     }
 
     view(domainObject, objectPath) {
+
         let component;
         let _destroy = null;
 
-        const table = new DataProductTable(domainObject, this.openmct);
+        const openmct = this.openmct;
+        const table = new DataProductTable(domainObject, openmct);
         const markingProp = {
             enable: true,
             useAlternateControlBar: false,
@@ -28,7 +29,7 @@ export default class DataProductViewProvider {
         };
 
         const view = {
-            show: function (element, editMode, { renderWhenVisible }) {
+            show(element, editMode, { renderWhenVisible }) {
                 const componentDefinition = {
                     components: {
                         TableComponent
@@ -36,12 +37,11 @@ export default class DataProductViewProvider {
                     data() {
                         return {
                             isEditing: editMode,
-                            markingProp,
-                            view
+                            markingProp
                         };
                     },
                     provide: {
-                        openmct: this.openmct,
+                        openmct,
                         table,
                         objectPath,
                         currentView: view,
@@ -58,11 +58,9 @@ export default class DataProductViewProvider {
                     template:
                         `<table-component
                             ref="tableComponent"
-                            class="v-data-products"
                             :allowSorting="true"
                             :isEditing="isEditing"
                             :marking="markingProp"
-                            :view="view"
                         ></table-component>`
                 };
 

From 5629560f08f4b8badf5ede4aa6f5c58fa4c79d4c Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Thu, 18 Jul 2024 10:58:24 -0700
Subject: [PATCH 39/49] update to es6 for importing es6 modules from core
 openmct

---
 .../channelTablePlugin/ChannelTable.js        | 271 +++++++-------
 .../channelTablePlugin/ChannelTableRow.js     |  49 ++-
 .../ChannelTableRowCollection.js              | 251 ++++++-------
 .../EmptyChannelTableRow.js                   |  71 ++--
 src/commandEventsView/CommandEventsTable.js   |  36 +-
 src/lib/HistoricalContextTableRow.js          |  23 +-
 src/product-status/DATColumn.js               |  16 +-
 src/product-status/DataProductRow.js          | 202 +++++-----
 src/product-status/DataProductTable.js        | 353 +++++++++---------
 src/product-status/EMDColumn.js               |  16 +-
 src/product-status/EMDPreviewColumn.js        |  16 +-
 src/product-status/TXTColumn.js               |  15 +-
 12 files changed, 631 insertions(+), 688 deletions(-)

diff --git a/src/channelTable/channelTablePlugin/ChannelTable.js b/src/channelTable/channelTablePlugin/ChannelTable.js
index cb2cf86..98e170d 100644
--- a/src/channelTable/channelTablePlugin/ChannelTable.js
+++ b/src/channelTable/channelTablePlugin/ChannelTable.js
@@ -1,143 +1,132 @@
-define([
-    './ChannelTableRowCollection',
-    './ChannelTableRow',
-    'openmct.tables.TelemetryTable',
-    'openmct.tables.TelemetryTableColumn',
-    './EmptyChannelTableRow',
-    './ObjectNameColumn'
-], function (
-    ChannelTableRowCollection,
-    ChannelTableRow,
-    TelemetryTable,
-    TelemetryTableColumn,
-    EmptyChannelTableRow,
-    ObjectNameColumn
-) {
-    class ChannelTable extends TelemetryTable {
-        constructor(domainObject, openmct) {
-            super(domainObject, openmct);
-            this.updateConfiguration = this.updateConfiguration.bind(this);
-            this.reorder = this.reorder.bind(this);
-            this.addDummyRowForObject = this.addDummyRowForObject.bind(this);
-
-            this.configuration.on('change', this.updateConfiguration);
-            this.objectNames = {};
-        }
-
-        initialize() {
-            this.filterObserver = this.openmct.objects.observe(this.domainObject, 'configuration.filters', this.updateFilters);
-            this.filters = this.domainObject.configuration && this.domainObject.configuration.filters;
-            this.loadComposition();
-            this.tableComposition.on('reorder', this.reorder);
-        }
-
-        createTableRowCollections() {
-            this.tableRows = new ChannelTableRowCollection(this.openmct);
-
-            let sortOptions = this.configuration.getConfiguration().sortOptions;
-    
-            if (sortOptions) {
-                this.tableRows.sortBy(sortOptions);
-            }
-
-            this.tableRows.on('resetRowsFromAllData', this.resetRowsFromAllData);
-        }
-
-        addTelemetryObject(telemetryObject) {
-            super.addTelemetryObject(telemetryObject);
-            this.addDummyRowForObject(telemetryObject);
-        }
-
-        addNameColumn(telemetryObject) {
-            let nameColumn = new ObjectNameColumn(telemetryObject.name);
-            this.configuration.addSingleColumnForObject(telemetryObject, nameColumn, 0);
-        }
-
-        addDummyRowForObject(object) {
-            let objectKeyString = this.openmct.objects.makeKeyString(object.identifier);
-            let columns = this.getColumnMapForObject(objectKeyString);
-            let dummyRow = new EmptyChannelTableRow(columns, objectKeyString);
-
-            this.tableRows.addRows([dummyRow]);
-        }
-
-        updateConfiguration(newConfiguration) {
-            let cellFormatConfiguration = newConfiguration.cellFormat || {};
-            this.tableRows.rows.forEach(row => row.updateRowConfiguration && row.updateRowConfiguration(cellFormatConfiguration[row.objectKeyString]));
-            this.emit('refresh');
-        }
-
-        getTelemetryProcessor(keyString, columnMap, limitEvaluator) {
-            return (telemetry) => {
-                //Check that telemetry object has not been removed since telemetry was requested.
-                if (!this.telemetryObjects[keyString]) {
-                    return;
-                }
-
-                telemetry.forEach(datum => {
-                    const row = this.createRow(datum, columnMap, keyString, limitEvaluator);
-
-                    if (this.paused) {
-                        this.delayedActions.push(this.tableRows.addOrUpdateRow.bind(this, row));
-                    } else {
-                        this.tableRows.addOrUpdateRow(row);
-                    }
-                });
-            };
-        }
-
-        buildOptionsFromConfiguration(telemetryObject) {
-            const requestOptions = super.buildOptionsFromConfiguration(telemetryObject);
-            requestOptions.strategy = 'latest';
-            requestOptions.size = 1;
-
-            return requestOptions;
-        }
-
-        requestDataFor(telemetryObject) {
-            this.incrementOutstandingRequests();
-            let requestOptions = this.buildOptionsFromConfiguration(telemetryObject);
-            requestOptions.strategy = 'latest';
-            requestOptions.size = 1;
-
-            return this.openmct.telemetry.request(telemetryObject, requestOptions)
-                .then(telemetryData => {
-                    let keyString = this.openmct.objects.makeKeyString(telemetryObject.identifier);
-                    let columnMap = this.getColumnMapForObject(keyString);
-                    let limitEvaluator = this.openmct.telemetry.limitEvaluator(telemetryObject);
-                    this.processHistoricalData(telemetryData, columnMap, keyString, limitEvaluator);
-                }).finally(() => this.decrementOutstandingRequests());
-        }
-
-        processHistoricalData(telemetryData, columnMap, keyString, limitEvaluator) {
-            let telemetryRows = telemetryData.map(datum => this.createRow(datum, columnMap, keyString, limitEvaluator));
-            this.tableRows.addRows(telemetryRows);
-        }
-
-        processRealtimeDatum(datum, columnMap, keyString, limitEvaluator) {
-            this.tableRows.addOne(this.createRow(datum, columnMap, keyString, limitEvaluator));
-        }
-
-        createColumn(metadatum) {
-            return new TelemetryTableColumn(this.openmct, metadatum, {selectable: true});
-        }
-
-        createRow(datum, columnMap, keyString, limitEvaluator) {
-            let cellFormatConfiguration = this.configuration.getConfiguration().cellFormat || {};
-            return new ChannelTableRow(datum, columnMap, keyString, limitEvaluator, cellFormatConfiguration[keyString]);
-        }
-
-        reorder(reorderPlan) {
-            this.tableRows.reorder(reorderPlan);
-            this.emit('refresh');
-        }
-
-        destroy() {
-            super.destroy();
-            this.configuration.off('change', this.updateConfiguration);
-            this.tableComposition.off('reorder', this.reorder);
-        }
+import ChannelTableRowCollection from './ChannelTableRowCollection';
+import ChannelTableRow from './ChannelTableRow';
+import TelemetryTable from 'openmct.tables.TelemetryTable';
+import TelemetryTableColumn from 'openmct.tables.TelemetryTableColumn';
+import EmptyChannelTableRow from './EmptyChannelTableRow';
+import ObjectNameColumn from './ObjectNameColumn';
+
+export default class ChannelTable extends TelemetryTable {
+  constructor(domainObject, openmct) {
+    super(domainObject, openmct);
+    this.updateConfiguration = this.updateConfiguration.bind(this);
+    this.reorder = this.reorder.bind(this);
+    this.addDummyRowForObject = this.addDummyRowForObject.bind(this);
+
+    this.configuration.on('change', this.updateConfiguration);
+    this.objectNames = {};
+  }
+
+  initialize() {
+    this.filterObserver = this.openmct.objects.observe(this.domainObject, 'configuration.filters', this.updateFilters);
+    this.filters = this.domainObject.configuration && this.domainObject.configuration.filters;
+    this.loadComposition();
+    this.tableComposition.on('reorder', this.reorder);
+  }
+
+  createTableRowCollections() {
+    this.tableRows = new ChannelTableRowCollection(this.openmct);
+
+    let sortOptions = this.configuration.getConfiguration().sortOptions;
+
+    if (sortOptions) {
+      this.tableRows.sortBy(sortOptions);
     }
 
-    return ChannelTable;
-});
+    this.tableRows.on('resetRowsFromAllData', this.resetRowsFromAllData);
+  }
+
+  addTelemetryObject(telemetryObject) {
+    super.addTelemetryObject(telemetryObject);
+    this.addDummyRowForObject(telemetryObject);
+  }
+
+  addNameColumn(telemetryObject) {
+    let nameColumn = new ObjectNameColumn(telemetryObject.name);
+    this.configuration.addSingleColumnForObject(telemetryObject, nameColumn, 0);
+  }
+
+  addDummyRowForObject(object) {
+    let objectKeyString = this.openmct.objects.makeKeyString(object.identifier);
+    let columns = this.getColumnMapForObject(objectKeyString);
+    let dummyRow = new EmptyChannelTableRow(columns, objectKeyString);
+
+    this.tableRows.addRows([dummyRow]);
+  }
+
+  updateConfiguration(newConfiguration) {
+    let cellFormatConfiguration = newConfiguration.cellFormat || {};
+    this.tableRows.rows.forEach(row => row.updateRowConfiguration && row.updateRowConfiguration(cellFormatConfiguration[row.objectKeyString]));
+    this.emit('refresh');
+  }
+
+  getTelemetryProcessor(keyString, columnMap, limitEvaluator) {
+    return (telemetry) => {
+      //Check that telemetry object has not been removed since telemetry was requested.
+      if (!this.telemetryObjects[keyString]) {
+        return;
+      }
+
+      telemetry.forEach(datum => {
+        const row = this.createRow(datum, columnMap, keyString, limitEvaluator);
+
+        if (this.paused) {
+          this.delayedActions.push(this.tableRows.addOrUpdateRow.bind(this, row));
+        } else {
+          this.tableRows.addOrUpdateRow(row);
+        }
+      });
+    };
+  }
+
+  buildOptionsFromConfiguration(telemetryObject) {
+    const requestOptions = super.buildOptionsFromConfiguration(telemetryObject);
+    requestOptions.strategy = 'latest';
+    requestOptions.size = 1;
+
+    return requestOptions;
+  }
+
+  requestDataFor(telemetryObject) {
+    this.incrementOutstandingRequests();
+    let requestOptions = this.buildOptionsFromConfiguration(telemetryObject);
+    requestOptions.strategy = 'latest';
+    requestOptions.size = 1;
+
+    return this.openmct.telemetry.request(telemetryObject, requestOptions)
+      .then(telemetryData => {
+        let keyString = this.openmct.objects.makeKeyString(telemetryObject.identifier);
+        let columnMap = this.getColumnMapForObject(keyString);
+        let limitEvaluator = this.openmct.telemetry.limitEvaluator(telemetryObject);
+        this.processHistoricalData(telemetryData, columnMap, keyString, limitEvaluator);
+      }).finally(() => this.decrementOutstandingRequests());
+  }
+
+  processHistoricalData(telemetryData, columnMap, keyString, limitEvaluator) {
+    let telemetryRows = telemetryData.map(datum => this.createRow(datum, columnMap, keyString, limitEvaluator));
+    this.tableRows.addRows(telemetryRows);
+  }
+
+  processRealtimeDatum(datum, columnMap, keyString, limitEvaluator) {
+    this.tableRows.addOne(this.createRow(datum, columnMap, keyString, limitEvaluator));
+  }
+
+  createColumn(metadatum) {
+    return new TelemetryTableColumn(this.openmct, metadatum, { selectable: true });
+  }
+
+  createRow(datum, columnMap, keyString, limitEvaluator) {
+    let cellFormatConfiguration = this.configuration.getConfiguration().cellFormat || {};
+    return new ChannelTableRow(datum, columnMap, keyString, limitEvaluator, cellFormatConfiguration[keyString]);
+  }
+
+  reorder(reorderPlan) {
+    this.tableRows.reorder(reorderPlan);
+    this.emit('refresh');
+  }
+
+  destroy() {
+    super.destroy();
+    this.configuration.off('change', this.updateConfiguration);
+    this.tableComposition.off('reorder', this.reorder);
+  }
+}
diff --git a/src/channelTable/channelTablePlugin/ChannelTableRow.js b/src/channelTable/channelTablePlugin/ChannelTableRow.js
index 8def479..d762014 100644
--- a/src/channelTable/channelTablePlugin/ChannelTableRow.js
+++ b/src/channelTable/channelTablePlugin/ChannelTableRow.js
@@ -1,29 +1,26 @@
-define([
-    'lib/HistoricalContextTableRow',
-    'printj',
-], function (HistoricalContextTableRow, printj) {
-    class ChannelTableRow extends HistoricalContextTableRow{
-        constructor(datum, columns, objectKeyString, limitEvaluator, rowFormatConfiguration) {
-            super(datum, columns, objectKeyString, limitEvaluator);
-            this.rowFormats = rowFormatConfiguration || {};
-        }
+import HistoricalContextTableRow from 'lib/HistoricalContextTableRow';
+import printj from 'printj';
 
-        getFormattedValue(key) {
-            if (this.rowFormats[key]) {
-                return this.getCustomFormattedValue(this.datum[key], this.rowFormats[key]);
-            } else {
-                let column = this.columns[key];
-                return column && column.getFormattedValue(this.datum[key]);    
-            }
-        }
+export default class ChannelTableRow extends HistoricalContextTableRow {
+  constructor(datum, columns, objectKeyString, limitEvaluator, rowFormatConfiguration) {
+    super(datum, columns, objectKeyString, limitEvaluator);
+    this.rowFormats = rowFormatConfiguration || {};
+  }
 
-        getCustomFormattedValue(value, format) {
-            return printj.sprintf(format, value);
-        }
-
-        updateRowConfiguration(rowFormatConfiguration) {
-            this.rowFormats = rowFormatConfiguration || {};
-        }
+  getFormattedValue(key) {
+    if (this.rowFormats[key]) {
+      return this.getCustomFormattedValue(this.datum[key], this.rowFormats[key]);
+    } else {
+      let column = this.columns[key];
+      return column && column.getFormattedValue(this.datum[key]);
     }
-    return ChannelTableRow;
-});
+  }
+
+  getCustomFormattedValue(value, format) {
+    return printj.sprintf(format, value);
+  }
+
+  updateRowConfiguration(rowFormatConfiguration) {
+    this.rowFormats = rowFormatConfiguration || {};
+  }
+}
diff --git a/src/channelTable/channelTablePlugin/ChannelTableRowCollection.js b/src/channelTable/channelTablePlugin/ChannelTableRowCollection.js
index cd28bc3..c1fbc7a 100644
--- a/src/channelTable/channelTablePlugin/ChannelTableRowCollection.js
+++ b/src/channelTable/channelTablePlugin/ChannelTableRowCollection.js
@@ -1,132 +1,119 @@
-define(
-    [
-        'lodash',
-        'openmct.tables.collections.TableRowCollection',
-        './EmptyChannelTableRow'
-
-    ],
-    function (
-        _,
-        TableRowCollection,
-        EmptyChannelTableRow
-    ) {
-
-        class ChannelTableRowCollection extends TableRowCollection {
-            constructor (openmct) {
-                super();
-
-                this.openmct = openmct;
-                this.ladMap = new Map();
-                this.timeColumn = openmct.time.timeSystem().key;
-                this.addOrUpdateRow = this.addOrUpdateRow.bind(this);
-            }
-
-            addOrUpdateRow(row) {
-                if (this.isLADRow(row)) {
-                    this.addRows([row]);
-                }
-            }
-
-            isLADRow(newRow) {
-                const isStaleData = this.rows.some(row => 
-                    row.objectKeyString === newRow.objectKeyString
-                    && !row.isDummyRow
-                    && row.datum[this.timeColumn] > newRow.datum[this.timeColumn]
-                );
-
-                return !isStaleData;
-            }
-
-            addOne(item) {
-                if (item.isDummyRow) {
-                    this.ladMap.set(item.objectKeyString, this.rows.length);
-                    this.rows.push(item);
-                    this.emit('add', item);
-                    return true;
-                }
-
-                if (this.isNewerThanLAD(item)) {
-                    let rowIndex = this.ladMap.get(item.objectKeyString);
-                    this.rows[rowIndex] = item;
-                    this.removeExistingByKeystring(item.objectKeyString);
-                    this.emit('add', [item]);
-                    return true;
-                }
-                return false;
-            }
-
-            addRows(rows) {
-                let rowsToAdd = this.filterRows(rows);
-
-                if (rowsToAdd.length > 0) {
-                    rowsToAdd.forEach(this.addOne.bind(this));
-                    this.emit('add', rowsToAdd);
-                }
-            }
-
-            removeAllRowsForObject(objectKeyString) {
-                super.removeAllRowsForObject(objectKeyString);
-                this.rebuildLadMap();
-            }
-
-            removeExistingByKeystring(keyString) {
-                let removed = [];
-
-                this.rows.forEach((row) => {
-                    if (row.objectKeyString === keyString) {
-                        removed.push(row);
-
-                        return false;
-                    } else {
-                        return true;
-                    }
-                });
-
-                this.emit('remove', removed);
-            }
-
-            rebuildLadMap() {
-                this.ladMap.clear();
-                this.rows.forEach((row, index) => {
-                    this.ladMap.set(row.objectKeyString, index);
-                });
-            }
-
-            reorder(reorderPlan) {
-                let oldRows = this.rows.slice();
-                reorderPlan.forEach(reorderEvent => {
-                    let item = oldRows[reorderEvent.oldIndex];
-                    this.rows[reorderEvent.newIndex] = item;
-                    this.ladMap.set(item.objectKeyString, reorderEvent.newIndex);
-                });
-            }
-
-            sortByTimeSystem(timeSystem) {
-                this.timeColumn = timeSystem.key;
-            }
-
-            isNewerThanLAD(item) {
-                let rowIndex = this.ladMap.get(item.objectKeyString);
-                let latestRow = this.rows[rowIndex];
-                let newerThanLatest = latestRow === undefined ||
-                    item.datum[this.timeColumn] > latestRow.datum[this.timeColumn] ||
-                    latestRow.isDummyRow;
-
-                return !this.ladMap.has(item.objectKeyString) || newerThanLatest;
-            }
-
-            getRows() {
-                return this.rows;
-            }
-
-            clear() {
-                this.rows = this.rows.map(
-                    row => new EmptyChannelTableRow(row.columns, row.objectKeyString)
-                );
-                this.rebuildLadMap();
-            }
-
-            destroy() {}
-        }
-    return ChannelTableRowCollection;
-});
+import TableRowCollection from 'openmct.tables.collections.TableRowCollection';
+import EmptyChannelTableRow from './EmptyChannelTableRow.js';
+export default class ChannelTableRowCollection extends TableRowCollection {
+  constructor(openmct) {
+    super();
+
+    this.openmct = openmct;
+    this.ladMap = new Map();
+    this.timeColumn = openmct.time.timeSystem().key;
+    this.addOrUpdateRow = this.addOrUpdateRow.bind(this);
+  }
+
+  addOrUpdateRow(row) {
+    if (this.isLADRow(row)) {
+      this.addRows([row]);
+    }
+  }
+
+  isLADRow(newRow) {
+    const isStaleData = this.rows.some(row =>
+      row.objectKeyString === newRow.objectKeyString
+      && !row.isDummyRow
+      && row.datum[this.timeColumn] > newRow.datum[this.timeColumn]
+    );
+
+    return !isStaleData;
+  }
+
+  addOne(item) {
+    if (item.isDummyRow) {
+      this.ladMap.set(item.objectKeyString, this.rows.length);
+      this.rows.push(item);
+      this.emit('add', item);
+      return true;
+    }
+
+    if (this.isNewerThanLAD(item)) {
+      let rowIndex = this.ladMap.get(item.objectKeyString);
+      this.rows[rowIndex] = item;
+      this.removeExistingByKeystring(item.objectKeyString);
+      this.emit('add', [item]);
+      return true;
+    }
+    return false;
+  }
+
+  addRows(rows) {
+    let rowsToAdd = this.filterRows(rows);
+
+    if (rowsToAdd.length > 0) {
+      rowsToAdd.forEach(this.addOne.bind(this));
+      this.emit('add', rowsToAdd);
+    }
+  }
+
+  removeAllRowsForObject(objectKeyString) {
+    super.removeAllRowsForObject(objectKeyString);
+    this.rebuildLadMap();
+  }
+
+  removeExistingByKeystring(keyString) {
+    let removed = [];
+
+    this.rows.forEach((row) => {
+      if (row.objectKeyString === keyString) {
+        removed.push(row);
+
+        return false;
+      } else {
+        return true;
+      }
+    });
+
+    this.emit('remove', removed);
+  }
+
+  rebuildLadMap() {
+    this.ladMap.clear();
+    this.rows.forEach((row, index) => {
+      this.ladMap.set(row.objectKeyString, index);
+    });
+  }
+
+  reorder(reorderPlan) {
+    let oldRows = this.rows.slice();
+    reorderPlan.forEach(reorderEvent => {
+      let item = oldRows[reorderEvent.oldIndex];
+      this.rows[reorderEvent.newIndex] = item;
+      this.ladMap.set(item.objectKeyString, reorderEvent.newIndex);
+    });
+  }
+
+  sortByTimeSystem(timeSystem) {
+    this.timeColumn = timeSystem.key;
+  }
+
+  isNewerThanLAD(item) {
+    let rowIndex = this.ladMap.get(item.objectKeyString);
+    let latestRow = this.rows[rowIndex];
+    let newerThanLatest = latestRow === undefined ||
+      item.datum[this.timeColumn] > latestRow.datum[this.timeColumn] ||
+      latestRow.isDummyRow;
+
+    return !this.ladMap.has(item.objectKeyString) || newerThanLatest;
+  }
+
+  getRows() {
+    return this.rows;
+  }
+
+  clear() {
+    this.rows = this.rows.map(
+      row => new EmptyChannelTableRow(row.columns, row.objectKeyString)
+    );
+    this.rebuildLadMap();
+  }
+
+  destroy() { }
+}
diff --git a/src/channelTable/channelTablePlugin/EmptyChannelTableRow.js b/src/channelTable/channelTablePlugin/EmptyChannelTableRow.js
index d49a4a9..25c5beb 100644
--- a/src/channelTable/channelTablePlugin/EmptyChannelTableRow.js
+++ b/src/channelTable/channelTablePlugin/EmptyChannelTableRow.js
@@ -1,40 +1,39 @@
-define(['lib/HistoricalContextTableRow'], function (HistoricalContextTableRow) {
-    class EmptyLADRow extends HistoricalContextTableRow {
-        constructor(columns, objectKeyString) {
-            super({}, columns, objectKeyString);
-            this.isDummyRow = true;
-            this.columns = columns;
-            this.objectKeyString = objectKeyString;
-            this.datum = Object.keys(columns).reduce((datum, column) => {
-                datum[column] = undefined;
-                return datum;
-            }, {});
-        }
+import HistoricalContextTableRow from 'lib/HistoricalContextTableRow';
 
-        getFormattedDatum(headers) {
-            return Object.keys(headers).reduce((formattedDatum, columnKey) => {
-                formattedDatum[columnKey] = this.getFormattedValue(columnKey);
-                return formattedDatum;
-            }, {}); 
-        }
+export default class EmptyLADRow extends HistoricalContextTableRow {
+  constructor(columns, objectKeyString) {
+    super({}, columns, objectKeyString);
+    this.isDummyRow = true;
+    this.columns = columns;
+    this.objectKeyString = objectKeyString;
+    this.datum = Object.keys(columns).reduce((datum, column) => {
+      datum[column] = undefined;
+      return datum;
+    }, {});
+  }
 
-        getFormattedValue(key) {
-            if (key === 'vista-lad-name') {
-                let column = this.columns[key];
-                return column && column.getFormattedValue();
-            } else if (this.columns[key] === undefined) {
-                return '';
-            } else {
-                return this.datum[key] || '--'
-            }
-        }
+  getFormattedDatum(headers) {
+    return Object.keys(headers).reduce((formattedDatum, columnKey) => {
+      formattedDatum[columnKey] = this.getFormattedValue(columnKey);
+      return formattedDatum;
+    }, {}); 
+  }
 
-        getRowClass() {
-        }
-
-        getCellLimitClasses() {
-            return {};
-        }
+  getFormattedValue(key) {
+    if (key === 'vista-lad-name') {
+      let column = this.columns[key];
+      return column && column.getFormattedValue();
+    } else if (this.columns[key] === undefined) {
+      return '';
+    } else {
+      return this.datum[key] || '--'
     }
-    return EmptyLADRow;
-});
\ No newline at end of file
+  }
+
+  getRowClass() {
+  }
+
+  getCellLimitClasses() {
+    return {};
+  }
+}
diff --git a/src/commandEventsView/CommandEventsTable.js b/src/commandEventsView/CommandEventsTable.js
index ccc9bb4..c653a1d 100644
--- a/src/commandEventsView/CommandEventsTable.js
+++ b/src/commandEventsView/CommandEventsTable.js
@@ -1,21 +1,17 @@
-define([
-    'openmct.tables.TelemetryTable'
-], function (
-    TelemetryTable
-) {
-    return class CommandEventsTable extends TelemetryTable {
-        constructor(domainObject, openmct) {
-            super(domainObject, openmct);
-        }
+import TelemetryTable from 'openmct.tables.TelemetryTable';
+export default class CommandEventsTable extends TelemetryTable {
+  constructor(domainObject, openmct) {
+    super(domainObject, openmct);
+  }
 
-        initialize() {
-            this.filterObserver = this.openmct.objects.observe(
-                this.domainObject,
-                'configuration.filters',
-                this.updateFilters
-            );
-            this.filters = this.domainObject.configuration && this.domainObject.configuration.filters;
-            this.loadComposition();
-        }
-    };
-});
\ No newline at end of file
+  initialize() {
+    this.filterObserver = this.openmct.objects.observe(
+      this.domainObject,
+      'configuration.filters',
+      this.updateFilters
+    );
+
+    this.filters = this.domainObject.configuration && this.domainObject.configuration.filters;
+    this.loadComposition();
+  }
+}
diff --git a/src/lib/HistoricalContextTableRow.js b/src/lib/HistoricalContextTableRow.js
index 013c5ce..0337fb2 100644
--- a/src/lib/HistoricalContextTableRow.js
+++ b/src/lib/HistoricalContextTableRow.js
@@ -1,14 +1,11 @@
-define([
-    'openmct.tables.TelemetryTableRow'
-], function (TelemetryTableRow) {
-    class HistoricalContextTableRow extends TelemetryTableRow {
-        constructor(datum, columns, objectKeyString, limitEvaluator) {
-            super(datum, columns, objectKeyString, limitEvaluator);
-        }
+import TelemetryTableRow from 'openmct.tables.TelemetryTableRow';
 
-        getContextMenuActions() {
-            return ['viewHistoricalData'];
-        }
-    }
-    return HistoricalContextTableRow;
-});
+export default class HistoricalContextTableRow extends TelemetryTableRow {
+  constructor(datum, columns, objectKeyString, limitEvaluator) {
+    super(datum, columns, objectKeyString, limitEvaluator);
+  }
+
+  getContextMenuActions() {
+    return ['viewHistoricalData'];
+  }
+}
diff --git a/src/product-status/DATColumn.js b/src/product-status/DATColumn.js
index 09ece9c..5d37d93 100644
--- a/src/product-status/DATColumn.js
+++ b/src/product-status/DATColumn.js
@@ -1,9 +1,7 @@
-define([
-    'openmct.tables.TelemetryTableColumn'
-], function (TelemetryTableColumn) {
-    return class DATColumn extends TelemetryTableColumn {
-        getCellComponentName() {
-            return 'vista-table-dat-cell';
-        }
-    }
-});
\ No newline at end of file
+import TelemetryTableColumn from 'openmct.tables.TelemetryTableColumn';
+
+export default class DATColumn extends TelemetryTableColumn {
+  getCellComponentName() {
+    return 'vista-table-dat-cell';
+  }
+}
diff --git a/src/product-status/DataProductRow.js b/src/product-status/DataProductRow.js
index 1e51163..ba498ca 100644
--- a/src/product-status/DataProductRow.js
+++ b/src/product-status/DataProductRow.js
@@ -1,109 +1,107 @@
-define([
-    'openmct.tables.TelemetryTableRow'
-], function (TelemetryTableRow) {
-    const PARTS_RECEIVED_FIELD = 'parts_received';
-    const CREATION_TIME_FIELD = 'creation_time';
-    const RECORD_TYPE_FIELD = 'record_type';
-    const TOTAL_PARTS_FIELD = 'total_parts';
-
-    const PRODUCT_STARTED_RECORD_TYPE = 'PRODUCT_STARTED';
-    const COMPLETE_PRODUCT_RECORD_TYPE = 'COMPLETE_PRODUCT';
-    const PRODUCT_PART_RECEIVED_RECORD_TYPE = 'PRODUCT_PART_RECEIVED';
-    
-    const PRODUCT_STATUS_MISSING_KEYS = ['ert','scet', 'sclk', 'lst', 'unique_name', 'creation_time', 'version', 
-        'seq_id', 'dvt_coarse', 'dvt_fine', 'seq_version', 'checksum', 'file_size', 'command_number', 'ground_status'];
-
-    const STATUS_CONSTANTS = {
-        FIELD: 'ground_status',
-        COMPLETE: 'COMPLETE',
-        COMPLETE_NO_CHECKSUM: 'COMPLETE_NO_CHECKSUM',
-        COMPLETE_CHECKSUM_PASS: 'COMPLETE_CHECKSUM_PASS',
-        PARTIAL: 'PARTIAL',
-        PARTIAL_CHECKSUM_FAIL: 'PARTIAL_CHECKSUM_FAIL'
+import TelemetryTableRow from 'openmct.tables.TelemetryTableRow';
+
+const PARTS_RECEIVED_FIELD = 'parts_received';
+const CREATION_TIME_FIELD = 'creation_time';
+const RECORD_TYPE_FIELD = 'record_type';
+const TOTAL_PARTS_FIELD = 'total_parts';
+
+const PRODUCT_STARTED_RECORD_TYPE = 'PRODUCT_STARTED';
+const COMPLETE_PRODUCT_RECORD_TYPE = 'COMPLETE_PRODUCT';
+const PRODUCT_PART_RECEIVED_RECORD_TYPE = 'PRODUCT_PART_RECEIVED';
+
+const PRODUCT_STATUS_MISSING_KEYS = ['ert', 'scet', 'sclk', 'lst', 'unique_name', 'creation_time', 'version',
+  'seq_id', 'dvt_coarse', 'dvt_fine', 'seq_version', 'checksum', 'file_size', 'command_number', 'ground_status'];
+
+const STATUS_CONSTANTS = {
+  FIELD: 'ground_status',
+  COMPLETE: 'COMPLETE',
+  COMPLETE_NO_CHECKSUM: 'COMPLETE_NO_CHECKSUM',
+  COMPLETE_CHECKSUM_PASS: 'COMPLETE_CHECKSUM_PASS',
+  PARTIAL: 'PARTIAL',
+  PARTIAL_CHECKSUM_FAIL: 'PARTIAL_CHECKSUM_FAIL'
+}
+
+const STATUS_MAP = {};
+STATUS_MAP[STATUS_CONSTANTS.COMPLETE] = 's-status--complete';
+STATUS_MAP[STATUS_CONSTANTS.COMPLETE_CHECKSUM_PASS] = 's-status--complete';
+STATUS_MAP[STATUS_CONSTANTS.COMPLETE_NO_CHECKSUM] = 's-status--complete';
+STATUS_MAP[STATUS_CONSTANTS.PARTIAL] = 's-status--partial';
+STATUS_MAP[STATUS_CONSTANTS.PARTIAL_CHECKSUM_FAIL] = 's-status--partial';
+
+class DataProductRow extends TelemetryTableRow {
+  constructor(datum, columns, objectKeyString, limitEvaluator, rowId) {
+    super(datum, columns, objectKeyString, limitEvaluator);
+
+    this.datum[PARTS_RECEIVED_FIELD] = '--';
+
+    this.rowId = rowId;
+
+    if (this.isComplete()) {
+      let creationTimeColumn = this.columns[CREATION_TIME_FIELD];
+      this.timeCompleted = creationTimeColumn.formatter.parse(creationTimeColumn.getRawValue(datum));
+
+      if (!isNaN(this.datum[TOTAL_PARTS_FIELD])) {
+        this.datum[PARTS_RECEIVED_FIELD] = parseInt(this.datum[TOTAL_PARTS_FIELD]);
+      }
+    } else if (upper(datum[RECORD_TYPE_FIELD]) === PRODUCT_STARTED_RECORD_TYPE) {
+      this.datum[PARTS_RECEIVED_FIELD] = 0;
+    }
+  }
+  getRowClass() {
+    let status = upper(this.datum[STATUS_CONSTANTS.FIELD] || '');
+    return STATUS_MAP[status];
+  }
+  getFormattedValue(key) {
+    if (upper(this.datum[RECORD_TYPE_FIELD]) === PRODUCT_STARTED_RECORD_TYPE &&
+      PRODUCT_STATUS_MISSING_KEYS.includes(key)) {
+      return '';
+    } else {
+      return super.getFormattedValue(key);
+    }
+  }
+
+  update(incomingDatum) {
+    incomingDatum[PARTS_RECEIVED_FIELD] = '--';
+
+    // If message is a "part received" message, then increment the part count UNLESS this row is already 
+    // complete. Parts messages can be received out of order.
+    if (this.isPartReceived(incomingDatum) &&
+      !this.isComplete() &&
+      !isNaN(this.datum[PARTS_RECEIVED_FIELD])) {
+      incomingDatum[PARTS_RECEIVED_FIELD] = this.datum[PARTS_RECEIVED_FIELD] + 1;
     }
 
-    const STATUS_MAP = {};
-    STATUS_MAP[STATUS_CONSTANTS.COMPLETE] = 's-status--complete';
-    STATUS_MAP[STATUS_CONSTANTS.COMPLETE_CHECKSUM_PASS] = 's-status--complete';
-    STATUS_MAP[STATUS_CONSTANTS.COMPLETE_NO_CHECKSUM] = 's-status--complete';
-    STATUS_MAP[STATUS_CONSTANTS.PARTIAL] = 's-status--partial';
-    STATUS_MAP[STATUS_CONSTANTS.PARTIAL_CHECKSUM_FAIL] = 's-status--partial';
-    
-    class DataProductRow extends TelemetryTableRow {
-        constructor(datum, columns, objectKeyString, limitEvaluator, rowId) {
-            super(datum, columns, objectKeyString, limitEvaluator);
-
-            this.datum[PARTS_RECEIVED_FIELD] = '--';
-            
-            this.rowId = rowId;
-
-            if (this.isComplete()) {
-                let creationTimeColumn = this.columns[CREATION_TIME_FIELD];
-                this.timeCompleted = creationTimeColumn.formatter.parse(creationTimeColumn.getRawValue(datum));
-
-                if (!isNaN(this.datum[TOTAL_PARTS_FIELD])) {
-                    this.datum[PARTS_RECEIVED_FIELD] = parseInt(this.datum[TOTAL_PARTS_FIELD]);
-                }
-            } else if (upper(datum[RECORD_TYPE_FIELD]) === PRODUCT_STARTED_RECORD_TYPE) {
-                this.datum[PARTS_RECEIVED_FIELD] = 0;
-            }
-        }
-        getRowClass() {
-            let status = upper(this.datum[STATUS_CONSTANTS.FIELD] || '');
-            return STATUS_MAP[status];
-        }
-        getFormattedValue(key) {
-            if (upper(this.datum[RECORD_TYPE_FIELD]) === PRODUCT_STARTED_RECORD_TYPE && 
-                PRODUCT_STATUS_MISSING_KEYS.includes(key)) {
-                    return '';
-            } else {
-                return super.getFormattedValue(key);
-            }
-        }
-
-        update(incomingDatum) {
-            incomingDatum[PARTS_RECEIVED_FIELD] = '--';
-
-            // If message is a "part received" message, then increment the part count UNLESS this row is already 
-            // complete. Parts messages can be received out of order.
-            if (this.isPartReceived(incomingDatum) &&
-                !this.isComplete() &&
-                !isNaN(this.datum[PARTS_RECEIVED_FIELD])) {
-                incomingDatum[PARTS_RECEIVED_FIELD] = this.datum[PARTS_RECEIVED_FIELD] + 1;
-            }
-
-            // If the incoming message is a "complete" message then always use the total parts as the total value.
-            if (this.isComplete(incomingDatum)) {
-                incomingDatum[PARTS_RECEIVED_FIELD] = parseInt(incomingDatum[TOTAL_PARTS_FIELD]);
-            }
-            // If the current datum for this row is incomplete, then always replace the values with the latest data
-            // UNLESS the incoming datum is complete - it might be a newer version of the same data product.
-            if (!this.isComplete() || this.isComplete(incomingDatum)) {
-                this.datum = incomingDatum;
-            }
-
-            if (this.isComplete()) {
-                this.timeCompleted = Date.now();
-            }
-        }
-        isComplete(datum = this.datum) {
-            return upper(datum[STATUS_CONSTANTS.FIELD]).indexOf(STATUS_CONSTANTS.COMPLETE) === 0 ||
-                upper(datum[STATUS_CONSTANTS.FIELD]).indexOf(STATUS_CONSTANTS.COMPLETE_NO_CHECKSUM) === 0 ||
-                upper(datum[STATUS_CONSTANTS.FIELD]).indexOf(STATUS_CONSTANTS.COMPLETE_CHECKSUM_PASS) === 0;
-        }
-        isPartReceived(datum = this.datum) {
-            return upper(datum[RECORD_TYPE_FIELD]).indexOf(PRODUCT_PART_RECEIVED_RECORD_TYPE) === 0;
-        }
-        isPartial(datum = this.datum) {
-            return upper(datum[STATUS_CONSTANTS.FIELD]).indexOf(STATUS_CONSTANTS.PARTIAL) === 0;
-        }
+    // If the incoming message is a "complete" message then always use the total parts as the total value.
+    if (this.isComplete(incomingDatum)) {
+      incomingDatum[PARTS_RECEIVED_FIELD] = parseInt(incomingDatum[TOTAL_PARTS_FIELD]);
+    }
+    // If the current datum for this row is incomplete, then always replace the values with the latest data
+    // UNLESS the incoming datum is complete - it might be a newer version of the same data product.
+    if (!this.isComplete() || this.isComplete(incomingDatum)) {
+      this.datum = incomingDatum;
     }
 
-    function upper(string) {
-        return ('' + string).toUpperCase();
+    if (this.isComplete()) {
+      this.timeCompleted = Date.now();
     }
+  }
+  isComplete(datum = this.datum) {
+    return upper(datum[STATUS_CONSTANTS.FIELD]).indexOf(STATUS_CONSTANTS.COMPLETE) === 0 ||
+      upper(datum[STATUS_CONSTANTS.FIELD]).indexOf(STATUS_CONSTANTS.COMPLETE_NO_CHECKSUM) === 0 ||
+      upper(datum[STATUS_CONSTANTS.FIELD]).indexOf(STATUS_CONSTANTS.COMPLETE_CHECKSUM_PASS) === 0;
+  }
+  isPartReceived(datum = this.datum) {
+    return upper(datum[RECORD_TYPE_FIELD]).indexOf(PRODUCT_PART_RECEIVED_RECORD_TYPE) === 0;
+  }
+  isPartial(datum = this.datum) {
+    return upper(datum[STATUS_CONSTANTS.FIELD]).indexOf(STATUS_CONSTANTS.PARTIAL) === 0;
+  }
+}
+
+function upper(string) {
+  return ('' + string).toUpperCase();
+}
 
-    DataProductRow.STATUS = STATUS_CONSTANTS;
+DataProductRow.STATUS = STATUS_CONSTANTS;
 
-    return DataProductRow;
-});
+export default DataProductRow;
diff --git a/src/product-status/DataProductTable.js b/src/product-status/DataProductTable.js
index ed74825..d8b21d8 100644
--- a/src/product-status/DataProductTable.js
+++ b/src/product-status/DataProductTable.js
@@ -1,189 +1,178 @@
-define([
-    'openmct.tables.TelemetryTable',
-    './DataProductRow',
-    './EMDColumn',
-    './EMDPreviewColumn',
-    './DATColumn',
-    './TXTColumn',
-    './DataProductRowCollection',
-    'lodash'
-], function (
-    TelemetryTable,
-    DataProductRow,
-    EMDColumn,
-    EMDPreviewColumn,
-    DATColumn,
-    TXTColumn,
-    DataProductRowCollection,
-    _
-) {
-    return class DataProductTable extends TelemetryTable {
-        constructor(domainObject, openmct) {
-            super(domainObject, openmct);
-            
-            this.setAutoClearTimeout = this.setAutoClearTimeout.bind(this);
-            this.autoClearTimeoutObserver = this.openmct.objects.observe(this.domainObject, 
-                'configuration.autoClearTimeout', this.setAutoClearTimeout);
-
-            let autoClearTimeout = _.get(this.domainObject, 'configuration.autoClearTimeout');
-            this.setAutoClearTimeout(autoClearTimeout);
-        }
-
-        initialize() {
-            if (this.isDatasetNode()) {
-                this.addTelemetryObject(this.domainObject);
-            } else {
-                this.loadComposition(this.domainObject);
-            }
-        }
-
-        createTableRowCollections() {
-            this.tableRows = new DataProductRowCollection.default(this.openmct);
-
-            //Fetch any persisted default sort
-            let sortOptions = this.configuration.getConfiguration().sortOptions;
-
-            //If no persisted sort order, default to sorting by time system, ascending.
-            sortOptions = sortOptions || {
-                key: this.openmct.time.timeSystem().key,
-                direction: 'asc'
-            };
-            this.tableRows.sortBy(sortOptions);
-            this.tableRows.on('update', function () {
-                this.emit('refresh');
-            }, this);
-        }
-
-        clearPartial() {
-            this.clearStatuses([DataProductRow.STATUS.PARTIAL, DataProductRow.STATUS.PARTIAL_CHECKSUM_FAIL]);
-        }
-
-        clearCompleted(olderThan) {
-            this.clearStatuses([DataProductRow.STATUS.COMPLETE, DataProductRow.STATUS.COMPLETE_CHECKSUM_PASS, DataProductRow.STATUS.COMPLETE_NO_CHECKSUM], olderThan);
-        }
-
-        clearStatuses(statuses, olderThan) {
-            let removed = [];
-            let now = Date.now();
-
-            for (let i = 0; i < this.tableRows.rows.length; i++) {
-                let row = this.tableRows.rows[i];
-                let shouldRemove = statuses.includes(row.datum[DataProductRow.STATUS.FIELD]);
-                let timeSinceCompleted = now - row.timeCompleted;
-
-                if (shouldRemove && (olderThan !== undefined && timeSinceCompleted < olderThan)) {
-                    shouldRemove = false;
-                }
-
-                if (shouldRemove) {
-                    this.tableRows.rows.splice(i, 1);
-                    removed.push(row);
-                    // Decrement index to ensure every element is visited after deletion
-                    i--;
-                }
-            }
-            if (removed.length > 0) {
-                this.tableRows.emit('remove', removed);
-            } 
-        }
-
-        isDatasetNode() {
-            return this.domainObject.type === 'vista.dataProducts'
-        }
-
-        createColumn(metadatum) {
-            switch (metadatum.key) {
-                //Create custom column types with links for EMD, DAT, and TXT files
-                case 'emd_url':
-                    return new EMDColumn(this.openmct, metadatum);
-                case 'emd_preview':
-                    return new EMDPreviewColumn(this.openmct, metadatum);
-                case 'dat_url':
-                    return new DATColumn(this.openmct, metadatum);
-                case 'txt_url':
-                    return new TXTColumn(this.openmct, metadatum);
-                //Prepend "Dvt" to time columns
-                case 'scet':
-                case 'sclk':
-                case 'msl.sol':
-                    let copyOfMetadatum = Object.assign({}, metadatum);
-                    copyOfMetadatum.name = 'Dvt ' + copyOfMetadatum.name;
-                    return super.createColumn(copyOfMetadatum);
-            }
-
-            return super.createColumn(metadatum);
-        }
+import TelemetryTable from 'openmct.tables.TelemetryTable';
+import DataProductRow from './DataProductRow';
+import EMDColumn from './EMDColumn';
+import EMDPreviewColumn from './EMDPreviewColumn';
+import DATColumn from './DATColumn';
+import TXTColumn from './TXTColumn';
+import DataProductRowCollection from './DataProductRowCollection';
+import _ from 'lodash';
+
+export default class DataProductTable extends TelemetryTable {
+  constructor(domainObject, openmct) {
+    super(domainObject, openmct);
+
+    this.setAutoClearTimeout = this.setAutoClearTimeout.bind(this);
+    this.autoClearTimeoutObserver = this.openmct.objects.observe(this.domainObject,
+      'configuration.autoClearTimeout', this.setAutoClearTimeout);
+
+    let autoClearTimeout = _.get(this.domainObject, 'configuration.autoClearTimeout');
+    this.setAutoClearTimeout(autoClearTimeout);
+  }
+
+  initialize() {
+    if (this.isDatasetNode()) {
+      this.addTelemetryObject(this.domainObject);
+    } else {
+      this.loadComposition(this.domainObject);
+    }
+  }
+
+  createTableRowCollections() {
+    this.tableRows = new DataProductRowCollection.default(this.openmct);
+
+    //Fetch any persisted default sort
+    let sortOptions = this.configuration.getConfiguration().sortOptions;
+
+    //If no persisted sort order, default to sorting by time system, ascending.
+    sortOptions = sortOptions || {
+      key: this.openmct.time.timeSystem().key,
+      direction: 'asc'
+    };
+    this.tableRows.sortBy(sortOptions);
+    this.tableRows.on('update', function () {
+      this.emit('refresh');
+    }, this);
+  }
+
+  clearPartial() {
+    this.clearStatuses([DataProductRow.STATUS.PARTIAL, DataProductRow.STATUS.PARTIAL_CHECKSUM_FAIL]);
+  }
+
+  clearCompleted(olderThan) {
+    this.clearStatuses([DataProductRow.STATUS.COMPLETE, DataProductRow.STATUS.COMPLETE_CHECKSUM_PASS, DataProductRow.STATUS.COMPLETE_NO_CHECKSUM], olderThan);
+  }
+
+  clearStatuses(statuses, olderThan) {
+    let removed = [];
+    let now = Date.now();
+
+    for (let i = 0; i < this.tableRows.rows.length; i++) {
+      let row = this.tableRows.rows[i];
+      let shouldRemove = statuses.includes(row.datum[DataProductRow.STATUS.FIELD]);
+      let timeSinceCompleted = now - row.timeCompleted;
+
+      if (shouldRemove && (olderThan !== undefined && timeSinceCompleted < olderThan)) {
+        shouldRemove = false;
+      }
+
+      if (shouldRemove) {
+        this.tableRows.rows.splice(i, 1);
+        removed.push(row);
+        // Decrement index to ensure every element is visited after deletion
+        i--;
+      }
+    }
+    if (removed.length > 0) {
+      this.tableRows.emit('remove', removed);
+    }
+  }
+
+  isDatasetNode() {
+    return this.domainObject.type === 'vista.dataProducts'
+  }
+
+  createColumn(metadatum) {
+    switch (metadatum.key) {
+      //Create custom column types with links for EMD, DAT, and TXT files
+      case 'emd_url':
+        return new EMDColumn(this.openmct, metadatum);
+      case 'emd_preview':
+        return new EMDPreviewColumn(this.openmct, metadatum);
+      case 'dat_url':
+        return new DATColumn(this.openmct, metadatum);
+      case 'txt_url':
+        return new TXTColumn(this.openmct, metadatum);
+      //Prepend "Dvt" to time columns
+      case 'scet':
+      case 'sclk':
+      case 'msl.sol':
+        let copyOfMetadatum = Object.assign({}, metadatum);
+        copyOfMetadatum.name = 'Dvt ' + copyOfMetadatum.name;
+        return super.createColumn(copyOfMetadatum);
+    }
 
-        getTelemetryProcessor(keyString, columnMap, limitEvaluator) {
-            return (telemetry) => {
-                //Check that telemetry object has not been removed since telemetry was requested.
-                if (!this.telemetryObjects[keyString]) {
-                    return;
-                }
-
-                telemetry.forEach(datum => {
-                    const rowId = this.tableRows.createRowId(datum);
-                    if (this.tableRows.contains(rowId)){
-                        this.tableRows.update(rowId, datum);
-                    } else {
-                        this.tableRows.addRows(
-                            [new DataProductRow(datum, columnMap, keyString, limitEvaluator, rowId)],
-                            'add'
-                        );
-                    }
-                });
-
-                // TODO
-                // if (this.paused) {
-                //     this.delayedActions.push(this.tableRows.addRows.bind(this, telemetryRows, 'add'));
-                // } else {
-                //     this.tableRows.addRows(telemetryRows, 'add');
-                // }
-
-                if (this.autoClearTimeoutMS) {
-                    this.clearCompleted(this.autoClearTimeoutMS);
-                }
-            };
+    return super.createColumn(metadatum);
+  }
+
+  getTelemetryProcessor(keyString, columnMap, limitEvaluator) {
+    return (telemetry) => {
+      //Check that telemetry object has not been removed since telemetry was requested.
+      if (!this.telemetryObjects[keyString]) {
+        return;
+      }
+
+      telemetry.forEach(datum => {
+        const rowId = this.tableRows.createRowId(datum);
+        if (this.tableRows.contains(rowId)) {
+          this.tableRows.update(rowId, datum);
+        } else {
+          this.tableRows.addRows(
+            [new DataProductRow(datum, columnMap, keyString, limitEvaluator, rowId)],
+            'add'
+          );
         }
+      });
+
+      // TODO
+      // if (this.paused) {
+      //     this.delayedActions.push(this.tableRows.addRows.bind(this, telemetryRows, 'add'));
+      // } else {
+      //     this.tableRows.addRows(telemetryRows, 'add');
+      // }
+
+      if (this.autoClearTimeoutMS) {
+        this.clearCompleted(this.autoClearTimeoutMS);
+      }
+    };
+  }
+
+  getTelemetryRemover() {
+    return (telemetry) => {
+      // TODO
+    };
+  }
+
+  setAutoClearTimeout(timeout) {
+    if (timeout === undefined || timeout === '') {
+      clearTimeout(this.autoClearTimeoutHandle);
+    } else {
+      this.autoClearTimeoutMS = timeout * 60 * 1000;
+      this.setNextAutoClearTimeout();
+    }
+  }
 
-        getTelemetryRemover() {
-            return (telemetry) => {
-                // TODO
-            };
-        }
+  setNextAutoClearTimeout() {
+    clearTimeout(this.autoClearTimeoutHandle);
 
-        setAutoClearTimeout(timeout) {
-            if (timeout === undefined || timeout === '') {
-                clearTimeout(this.autoClearTimeoutHandle);
-            } else {
-                this.autoClearTimeoutMS = timeout * 60 * 1000;
-                this.setNextAutoClearTimeout();
-            }
-        }
+    let now = Date.now();
+    let wait = this.autoClearTimeoutMS;
 
-        setNextAutoClearTimeout() {
-            clearTimeout(this.autoClearTimeoutHandle);
-            
-            let now = Date.now();
-            let wait = this.autoClearTimeoutMS;
-
-            let earliestTimeCompleted = this.earliestTimeCompleted();
-
-            if (earliestTimeCompleted != undefined) {
-                let timeSinceEarliestCompleted = now - earliestTimeCompleted;
-                wait = Math.max(0, this.autoClearTimeoutMS - timeSinceEarliestCompleted);
-            }
-            this.autoClearTimeoutHandle = setTimeout(() => {
-                this.clearCompleted(this.autoClearTimeoutMS);
-                this.setNextAutoClearTimeout();
-            }, wait);
-        }
+    let earliestTimeCompleted = this.earliestTimeCompleted();
 
-        earliestTimeCompleted() {
-            return this.tableRows.getRows()
-                .filter(row => row.isComplete())
-                .map(row => row.timeCompleted)
-                .sort((a, b) => a - b)[0];
-        }
+    if (earliestTimeCompleted != undefined) {
+      let timeSinceEarliestCompleted = now - earliestTimeCompleted;
+      wait = Math.max(0, this.autoClearTimeoutMS - timeSinceEarliestCompleted);
     }
-});
\ No newline at end of file
+    this.autoClearTimeoutHandle = setTimeout(() => {
+      this.clearCompleted(this.autoClearTimeoutMS);
+      this.setNextAutoClearTimeout();
+    }, wait);
+  }
+
+  earliestTimeCompleted() {
+    return this.tableRows.getRows()
+      .filter(row => row.isComplete())
+      .map(row => row.timeCompleted)
+      .sort((a, b) => a - b)[0];
+  }
+}
diff --git a/src/product-status/EMDColumn.js b/src/product-status/EMDColumn.js
index 3090352..e11b777 100644
--- a/src/product-status/EMDColumn.js
+++ b/src/product-status/EMDColumn.js
@@ -1,9 +1,7 @@
-define([
-    'openmct.tables.TelemetryTableColumn'
-], function (TelemetryTableColumn) {
-    return class EMDColumn extends TelemetryTableColumn {
-        getCellComponentName() {
-            return 'vista-table-emd-cell';
-        }
-    }
-});
\ No newline at end of file
+
+import TelemetryTableColumn from 'openmct.tables.TelemetryTableColumn';
+export default class EMDColumn extends TelemetryTableColumn {
+  getCellComponentName() {
+    return 'vista-table-emd-cell';
+  }
+}
diff --git a/src/product-status/EMDPreviewColumn.js b/src/product-status/EMDPreviewColumn.js
index 2ab2979..d3baa89 100644
--- a/src/product-status/EMDPreviewColumn.js
+++ b/src/product-status/EMDPreviewColumn.js
@@ -1,9 +1,7 @@
-define([
-    'openmct.tables.TelemetryTableColumn'
-], function (TelemetryTableColumn) {
-    return class EMDPreviewColumn extends TelemetryTableColumn {
-        getCellComponentName() {
-            return 'vista-table-emd-preview-cell';
-        }
-    }
-});
\ No newline at end of file
+import TelemetryTableColumn from 'openmct.tables.TelemetryTableColumn';
+
+export default class EMDPreviewColumn extends TelemetryTableColumn {
+  getCellComponentName() {
+    return 'vista-table-emd-preview-cell';
+  }
+}
diff --git a/src/product-status/TXTColumn.js b/src/product-status/TXTColumn.js
index 8da8387..aadc7b7 100644
--- a/src/product-status/TXTColumn.js
+++ b/src/product-status/TXTColumn.js
@@ -1,9 +1,6 @@
-define([
-    'openmct.tables.TelemetryTableColumn'
-], function (TelemetryTableColumn) {
-    return class TXTColumn extends TelemetryTableColumn {
-        getCellComponentName() {
-            return 'vista-table-txt-cell';
-        }
-    };
-});
+import TelemetryTableColumn from 'openmct.tables.TelemetryTableColumn'
+export default class TXTColumn extends TelemetryTableColumn {
+  getCellComponentName() {
+    return 'vista-table-txt-cell';
+  }
+}

From 84423620d7993e2bd977b731e78576ffd4dd15c9 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Thu, 18 Jul 2024 17:06:37 -0700
Subject: [PATCH 40/49] convert tables to work with new performance mode
 options

---
 config.js                                        | 16 ++++++++++++++++
 loader.js                                        | 10 +++++-----
 package.json                                     |  2 +-
 src/AMMOSPlugins.js                              | 10 +++++-----
 src/alarmsView/AlarmsAutoclearViewProvider.js    |  6 ++++--
 src/alarmsView/AlarmsViewProvider.js             |  5 +++--
 src/alarmsView/plugin.js                         |  9 +++++----
 .../channelTablePlugin/ChannelTable.js           |  5 +++--
 .../ChannelTableFormatViewProvider.js            |  4 ++--
 .../ChannelTableViewProvider.js                  |  6 ++++--
 src/channelTable/channelTablePlugin/plugin.js    |  9 +++++----
 src/commandEventsView/CommandEventsTable.js      |  4 ----
 .../CommandEventsViewProvider.js                 |  5 +++--
 src/commandEventsView/plugin.js                  |  7 ++++---
 src/dictionaryView/dictionaryViewProvider.js     |  5 +++--
 src/dictionaryView/dictionaryViewTable.js        |  4 ++--
 src/dictionaryView/plugin.js                     |  4 ++--
 src/evrView/EVRTable.js                          |  4 ----
 src/evrView/EVRViewProvider.js                   |  5 +++--
 src/evrView/plugin.js                            |  9 ++++++---
 .../FrameEventFilterTable.js                     |  4 ----
 .../FrameEventFilterViewProvider.js              |  5 +++--
 src/frameEventFilterView/plugin.js               |  4 ++--
 .../BadFramesTelemetryTable.js                   |  4 ++--
 .../frameAccountabilityViewProvider.js           |  7 ++++---
 src/frameaccountability/plugin.js                |  4 ++--
 src/framesummary/FrameWatchTable.js              |  4 ++--
 src/framesummary/FrameWatchTableConfiguration.js |  4 ++--
 src/framesummary/FrameWatchViewProvider.js       |  5 +++--
 src/framesummary/plugin.js                       |  6 +++++-
 src/messagesView/MessagesTable.js                |  4 ----
 src/multipleHistoricalSessions/plugin.js         |  3 ++-
 .../sessionTable/SessionTable.js                 |  4 ++--
 src/packetSummary/PacketSummaryTable.js          |  4 ----
 .../DataProductInspectorViewProvider.js          |  7 ++++---
 src/product-status/DataProductTable.js           |  6 +++---
 src/product-status/DataProductViewProvider.js    |  7 ++++---
 src/product-status/plugin.js                     |  9 +++++----
 src/tables/VistaTableConfigurationProvider.js    |  6 ++++--
 39 files changed, 125 insertions(+), 101 deletions(-)

diff --git a/config.js b/config.js
index 4ce7efc..9167c6c 100644
--- a/config.js
+++ b/config.js
@@ -481,6 +481,22 @@
           }
         ],
         */
+        /**
+         * Table Performance Mode Configuration
+         * Can increase performance by limiting the maximum rows retained and displayed by tables
+         * Affects all bounded table types such as Telemetry and EVR tables
+         * Does not affect latest available tables such as Channel tables
+         * @typedef TablePerformanceOptions
+         * @type {object}
+         * @property {('performance'|'unlimited')} telemetryMode performance mode limits the maximum table rows
+         * @property {Boolean} persistModeChange whether changes in the UI are persisted with the table
+         * @property {Number} rowLimit the maximum number of rows in performance mode
+         */
+        tablePerformanceOptions: {
+          telemetryMode: 'unlimited',
+          persistModeChange: false,
+          rowLimit: 50
+        },
         /**
          * Developer Settings-- do not modify these unless you know what
          * they do!
diff --git a/loader.js b/loader.js
index 8994d3b..ee1a43d 100644
--- a/loader.js
+++ b/loader.js
@@ -70,14 +70,14 @@ define([
             }
         ));
         openmct.install(ClearDataIndicator.default(config.globalStalenessInterval));
-        openmct.install(CommandEventsViewPlugin.default());
-        openmct.install(MessagesPlugin.default());
-        openmct.install(ProductStatusPlugin.default());
+        openmct.install(CommandEventsViewPlugin.default(config.tablePerformanceOptions));
+        openmct.install(MessagesPlugin.default(config.tablePerformanceOptions));
+        openmct.install(ProductStatusPlugin.default(config.tablePerformanceOptions));
         openmct.install(openmct.plugins.UTCTimeSystem())
         openmct.install(openmct.plugins.Notebook());
         openmct.install(MetadataActionPlugin.default());
-        openmct.install(DictionaryViewPlugin.default());
-        openmct.install(PacketSummaryPlugin.default());
+        openmct.install(DictionaryViewPlugin.default(config.tablePerformanceOptions));
+        openmct.install(PacketSummaryPlugin.default(config.tablePerformanceOptions));
         openmct.install(ContainerViewPlugin.default());
         openmct.install(openmct.plugins.Clock(
             { useClockIndicator: false }
diff --git a/package.json b/package.json
index 03db88b..b9930e7 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
     "mini-css-extract-plugin": "2.6.0",
     "moment": "2.29.4",
     "node-bourbon": "^4.2.3",
-    "openmct": "nasa/openmct#omm-release/5.3",
+    "openmct": "nasa/openmct#omm-release/5.3-next",
     "printj": "^1.2.1",
     "raw-loader": "^0.5.1",
     "resolve-url-loader": "5.0.0",
diff --git a/src/AMMOSPlugins.js b/src/AMMOSPlugins.js
index 6019dc1..0d440e1 100644
--- a/src/AMMOSPlugins.js
+++ b/src/AMMOSPlugins.js
@@ -97,7 +97,7 @@ define([
 
             mcwsClient.default.configure(options, identityPlugin.login);
 
-            openmct.install(MultipleHistoricalSessions.default());
+            openmct.install(MultipleHistoricalSessions.default(options.tablePerformanceOptions));
             openmct.install(RealtimeSessions.default());
 
             openmct.install(new HistoricalTelemetryPlugin(options));
@@ -108,12 +108,12 @@ define([
             openmct.install(new VenuePlugin.default(options));
             openmct.install(FrameWatchViewPlugin.default());
             openmct.install(FrameEventFilterViewPlugin.default());
-            openmct.install(new ChannelTablePlugin.default());
+            openmct.install(new ChannelTablePlugin.default(options.tablePerformanceOptions));
             openmct.install(new ChannelTableSetPlugin.default());
             openmct.install(new ChannelLimitsPlugin.default());
-            openmct.install(new FrameAccountabilityPlugin.default(options.frameAccountabilityExpectedVcidList));
-            openmct.install(EVRViewPlugin.default(options.taxonomy));
-            openmct.install(new AlarmsViewPlugin.default());
+            openmct.install(new FrameAccountabilityPlugin.default(options));
+            openmct.install(EVRViewPlugin.default(options));
+            openmct.install(new AlarmsViewPlugin.default(options.tablePerformanceOptions));
             openmct.install(MCWSIndicatorPlugin.default());
             
             if (window.openmctMCWSConfig.messageStreamUrl && window.openmctMCWSConfig.messageStreamUrl !== '') {
diff --git a/src/alarmsView/AlarmsAutoclearViewProvider.js b/src/alarmsView/AlarmsAutoclearViewProvider.js
index 936d9e5..593b257 100644
--- a/src/alarmsView/AlarmsAutoclearViewProvider.js
+++ b/src/alarmsView/AlarmsAutoclearViewProvider.js
@@ -3,10 +3,12 @@ import AlarmsAutoclear from './AlarmsAutoclear.vue';
 import TelemetryTableConfiguration from 'openmct.tables.TelemetryTableConfiguration';
 
 export default class AlarmsAutoClearViewProvider {
-  constructor(openmct) {
+  constructor(openmct, options) {
     this.key = 'vista.alarmsView-configuration';
     this.name = 'Autoclear';
+
     this.openmct = openmct;
+    this.options = options;
     this._destroy = null;
   }
 
@@ -22,7 +24,7 @@ export default class AlarmsAutoClearViewProvider {
 
   view(selection) {
     const domainObject = selection[0][0].context.item;
-    const tableConfiguration = new TelemetryTableConfiguration(domainObject, openmct);
+    const tableConfiguration = new TelemetryTableConfiguration(domainObject, openmct, this.options);
 
     return {
       show: function (element) {
diff --git a/src/alarmsView/AlarmsViewProvider.js b/src/alarmsView/AlarmsViewProvider.js
index a1ed247..7730ae6 100644
--- a/src/alarmsView/AlarmsViewProvider.js
+++ b/src/alarmsView/AlarmsViewProvider.js
@@ -3,8 +3,9 @@ import TableComponent from 'openmct.tables.components.Table';
 import AlarmsTable from './AlarmsTable.js';
 
 export default class AlarmsViewProvider {
-    constructor(openmct) {
+    constructor(openmct, options) {
         this.openmct = openmct;
+        this.options = options;
 
         this.key = 'vista.alarmsView';
         this.name = 'Alarms Table';
@@ -19,7 +20,7 @@ export default class AlarmsViewProvider {
         let component;
         let _destroy = null;
 
-        const table = new AlarmsTable(domainObject, openmct);
+        const table = new AlarmsTable(domainObject, openmct, this.options);
         const markingProp = {
             enable: true,
             useAlternateControlBar: false,
diff --git a/src/alarmsView/plugin.js b/src/alarmsView/plugin.js
index 245e609..13ba9de 100644
--- a/src/alarmsView/plugin.js
+++ b/src/alarmsView/plugin.js
@@ -3,10 +3,10 @@ import AlarmsAutoclearViewProvider from './AlarmsAutoclearViewProvider';
 import AlarmsViewActions from './AlarmsViewActions';
 import VistaTableConfigurationProvider from '../tables/VistaTableConfigurationProvider';
 
-export default function AlarmsViewPlugin() {
+export default function AlarmsViewPlugin(options) {
     return function install(openmct) {
-        openmct.objectViews.addProvider(new AlarmsViewProvider(openmct));
-        openmct.inspectorViews.addProvider(new AlarmsAutoclearViewProvider(openmct));
+        openmct.objectViews.addProvider(new AlarmsViewProvider(openmct, options));
+        openmct.inspectorViews.addProvider(new AlarmsAutoclearViewProvider(openmct, options));
 
         AlarmsViewActions.forEach(action => {
             openmct.actions.register(action);
@@ -28,7 +28,8 @@ export default function AlarmsViewPlugin() {
         openmct.inspectorViews.addProvider(new VistaTableConfigurationProvider(
             'vista.alarm-view-configuration', 
             'Config',
-            'vista.alarmsView'
+            'vista.alarmsView',
+            options
         ));
 
         openmct.composition.addPolicy((parent, child) => {
diff --git a/src/channelTable/channelTablePlugin/ChannelTable.js b/src/channelTable/channelTablePlugin/ChannelTable.js
index 98e170d..2355d78 100644
--- a/src/channelTable/channelTablePlugin/ChannelTable.js
+++ b/src/channelTable/channelTablePlugin/ChannelTable.js
@@ -6,8 +6,9 @@ import EmptyChannelTableRow from './EmptyChannelTableRow';
 import ObjectNameColumn from './ObjectNameColumn';
 
 export default class ChannelTable extends TelemetryTable {
-  constructor(domainObject, openmct) {
-    super(domainObject, openmct);
+  constructor(domainObject, openmct, options) {
+    super(domainObject, openmct, options);
+
     this.updateConfiguration = this.updateConfiguration.bind(this);
     this.reorder = this.reorder.bind(this);
     this.addDummyRowForObject = this.addDummyRowForObject.bind(this);
diff --git a/src/channelTable/channelTablePlugin/ChannelTableFormatViewProvider.js b/src/channelTable/channelTablePlugin/ChannelTableFormatViewProvider.js
index a8b3374..5a3fe1c 100644
--- a/src/channelTable/channelTablePlugin/ChannelTableFormatViewProvider.js
+++ b/src/channelTable/channelTablePlugin/ChannelTableFormatViewProvider.js
@@ -2,7 +2,7 @@ import CellFormatConfigurationComponent from './CellFormatConfigurationComponent
 import TelemetryTableConfiguration from 'openmct.tables.TelemetryTableConfiguration';
 import mount from 'utils/mountVueComponent';
 
-export default function ChannelTableFormatViewProvider(openmct) {
+export default function ChannelTableFormatViewProvider(openmct, options) {
   return {
     key: 'channel-list-format',
     name: 'Format',
@@ -20,7 +20,7 @@ export default function ChannelTableFormatViewProvider(openmct) {
     view: function (selection) {
       let _destroy = null;
       let domainObject = selection[0][1].context.item;
-      const tableConfiguration = new TelemetryTableConfiguration(domainObject, openmct);
+      const tableConfiguration = new TelemetryTableConfiguration(domainObject, openmct, options);
 
       return {
         show: function (element) {
diff --git a/src/channelTable/channelTablePlugin/ChannelTableViewProvider.js b/src/channelTable/channelTablePlugin/ChannelTableViewProvider.js
index b35dfb0..9979aee 100644
--- a/src/channelTable/channelTablePlugin/ChannelTableViewProvider.js
+++ b/src/channelTable/channelTablePlugin/ChannelTableViewProvider.js
@@ -3,8 +3,10 @@ import TableComponent from 'openmct.tables.components.Table';
 import mount from 'utils/mountVueComponent';
 
 export default class ChannelTableViewProvider { 
-    constructor(openmct) {
+    constructor(openmct, options) {
         this.openmct = openmct;
+        this.options = options;
+
         this.key = 'vista.channel-list';
         this.name = 'Channel List';
         this.cssClass = 'icon-tabular-realtime';
@@ -30,7 +32,7 @@ export default class ChannelTableViewProvider {
             rowName: '',
             rowNamePlural: ''
         };
-        const table = new ChannelTable(domainObject, this.openmct);
+        const table = new ChannelTable(domainObject, this.openmct, this.options);
 
         const view = {
             show(element, isEditing, { renderWhenVisible }) {
diff --git a/src/channelTable/channelTablePlugin/plugin.js b/src/channelTable/channelTablePlugin/plugin.js
index d7f4c38..14da41a 100644
--- a/src/channelTable/channelTablePlugin/plugin.js
+++ b/src/channelTable/channelTablePlugin/plugin.js
@@ -3,7 +3,7 @@ import ChannelTableViewProvider from './ChannelTableViewProvider';
 import ChannelTableFormatViewProvider from './ChannelTableFormatViewProvider';
 import VistaTableConfigurationProvider from '../../tables/VistaTableConfigurationProvider';
 
-export default function install() {
+export default function install(options) {
     return function ChannelTablePlugin(openmct) {
         openmct.types.addType(CHANNEL_TABLE_KEY, {
             name: CHANNEL_TABLE_NAME,
@@ -19,16 +19,17 @@ export default function install() {
             }
         });
         
-        openmct.objectViews.addProvider(new ChannelTableViewProvider(openmct));
+        openmct.objectViews.addProvider(new ChannelTableViewProvider(openmct, options));
 
         openmct.inspectorViews.addProvider(
             new VistaTableConfigurationProvider(
                 'vista.channel-list-configuration',
                 'Config',
-                CHANNEL_TABLE_KEY
+                CHANNEL_TABLE_KEY,
+                options
             )
         );
-        openmct.inspectorViews.addProvider(new ChannelTableFormatViewProvider(openmct));
+        openmct.inspectorViews.addProvider(new ChannelTableFormatViewProvider(openmct, options));
 
         openmct.composition.addPolicy((parent, child) => {
             if (parent.type === CHANNEL_TABLE_KEY) {
diff --git a/src/commandEventsView/CommandEventsTable.js b/src/commandEventsView/CommandEventsTable.js
index c653a1d..bb4803b 100644
--- a/src/commandEventsView/CommandEventsTable.js
+++ b/src/commandEventsView/CommandEventsTable.js
@@ -1,9 +1,5 @@
 import TelemetryTable from 'openmct.tables.TelemetryTable';
 export default class CommandEventsTable extends TelemetryTable {
-  constructor(domainObject, openmct) {
-    super(domainObject, openmct);
-  }
-
   initialize() {
     this.filterObserver = this.openmct.objects.observe(
       this.domainObject,
diff --git a/src/commandEventsView/CommandEventsViewProvider.js b/src/commandEventsView/CommandEventsViewProvider.js
index 9135bfa..cbfbe96 100644
--- a/src/commandEventsView/CommandEventsViewProvider.js
+++ b/src/commandEventsView/CommandEventsViewProvider.js
@@ -3,8 +3,9 @@ import TableComponent from 'openmct.tables.components.Table';
 import mount from 'utils/mountVueComponent';
 
 export default class CommandEventsViewProvider {
-    constructor(openmct) {
+    constructor(openmct, options) {
         this.openmct = openmct;
+        this.options = options;
 
         this.key = 'vista.commandEventsView';
         this.name = 'Command Events View';
@@ -19,7 +20,7 @@ export default class CommandEventsViewProvider {
         let component;
         let _destroy = null;
 
-        const table = new CommandEventsTable(domainObject, openmct);
+        const table = new CommandEventsTable(domainObject, openmct, this.options);
         const markingProp = {
             enable: true,
             useAlternateControlBar: false,
diff --git a/src/commandEventsView/plugin.js b/src/commandEventsView/plugin.js
index 08e0e41..282ae4e 100644
--- a/src/commandEventsView/plugin.js
+++ b/src/commandEventsView/plugin.js
@@ -1,7 +1,7 @@
 import CommandEventsViewProvider from './CommandEventsViewProvider.js';
 import VistaTableConfigurationProvider from '../tables/VistaTableConfigurationProvider.js';
 
-export default function CommandEventsViewPlugin() {
+export default function CommandEventsViewPlugin(options) {
     return function install(openmct) {        
         openmct.types.addType('vista.commandEventsView', {
             name: 'Command Events View',
@@ -16,7 +16,7 @@ export default function CommandEventsViewPlugin() {
             }
         });
 
-        openmct.objectViews.addProvider(new CommandEventsViewProvider(openmct));
+        openmct.objectViews.addProvider(new CommandEventsViewProvider(openmct, options));
 
         const wrappedGet = openmct.objectViews.get;
         openmct.objectViews.get = function (domainObject) {
@@ -30,7 +30,8 @@ export default function CommandEventsViewPlugin() {
             new VistaTableConfigurationProvider(
                 'vista.command-events-view-configuration',
                 'Config',
-                'vista.commandEventsView'
+                'vista.commandEventsView',
+                options
             )
         );
 
diff --git a/src/dictionaryView/dictionaryViewProvider.js b/src/dictionaryView/dictionaryViewProvider.js
index 9cf53a2..332b783 100644
--- a/src/dictionaryView/dictionaryViewProvider.js
+++ b/src/dictionaryView/dictionaryViewProvider.js
@@ -3,12 +3,13 @@ import DictionaryViewTable from './dictionaryViewTable.js';
 import mount from 'utils/mountVueComponent';
 
 export default class DictionaryViewProvider {
-    constructor(openmct) {
+    constructor(openmct, options) {
         this.key = 'dictionary-view';
         this.name = 'Dictionary View';
         this.cssClass = 'icon-dataset';
 
         this.openmct = openmct;
+        this.options = options;
     }
 
     canView(domainObject) {
@@ -19,7 +20,7 @@ export default class DictionaryViewProvider {
         let component;
         let _destroy = null;
 
-        const table = new DictionaryViewTable(domainObject, openmct);
+        const table = new DictionaryViewTable(domainObject, openmct, this.options);
         const markingProp = {
             enable: true,
             useAlternateControlBar: false,
diff --git a/src/dictionaryView/dictionaryViewTable.js b/src/dictionaryView/dictionaryViewTable.js
index b2d7c06..8417cc6 100644
--- a/src/dictionaryView/dictionaryViewTable.js
+++ b/src/dictionaryView/dictionaryViewTable.js
@@ -3,8 +3,8 @@ import TelemetryTableRow from 'openmct.tables.TelemetryTableRow';
 import mcws from 'services/mcws/mcws';
 
 export default class DictionaryViewTable extends TelemetryTable { 
-    constructor(domainObject, openmct, metadata = []) {
-        super(domainObject, openmct);
+    constructor(domainObject, openmct, options, metadata = []) {
+        super(domainObject, openmct, options);
 
         this.metadata = metadata;
         this.data = [];
diff --git a/src/dictionaryView/plugin.js b/src/dictionaryView/plugin.js
index d8a10cf..e751dc4 100644
--- a/src/dictionaryView/plugin.js
+++ b/src/dictionaryView/plugin.js
@@ -1,7 +1,7 @@
 import DictionaryViewProvider from './dictionaryViewProvider';
 
-export default function plugin() {
+export default function plugin(options) {
     return function install(openmct) {
-        openmct.objectViews.addProvider(new DictionaryViewProvider(openmct));
+        openmct.objectViews.addProvider(new DictionaryViewProvider(openmct, options));
     }
 }
diff --git a/src/evrView/EVRTable.js b/src/evrView/EVRTable.js
index 46e95b9..f58136b 100644
--- a/src/evrView/EVRTable.js
+++ b/src/evrView/EVRTable.js
@@ -2,10 +2,6 @@ import TelemetryTable from 'openmct.tables.TelemetryTable'
 import EVRLevelIndicatorTableRow from './EVRLevelIndicatorTableRow'
 
 export default class EVRTable extends TelemetryTable {
-    constructor(domainObject, openmct) {
-        super(domainObject, openmct);
-    }
-
     initialize() {
         if (this.domainObject.type === 'vista.evrView') {
             this.filterObserver = this.openmct.objects.observe(
diff --git a/src/evrView/EVRViewProvider.js b/src/evrView/EVRViewProvider.js
index deae763..379c2cb 100644
--- a/src/evrView/EVRViewProvider.js
+++ b/src/evrView/EVRViewProvider.js
@@ -15,11 +15,12 @@ function providesEVRData(domainObject) {
     ));
 }
 export default class EVRViewProvider {
-    constructor(openmct) {
+    constructor(openmct, options) {
         this.key = 'vista.evrView';
         this.name = 'EVR View';
         this.cssClass = 'icon-tabular-realtime';
         this.openmct = openmct;
+        this.options = options;
 
         this.view = this.view.bind(this);
     }
@@ -39,7 +40,7 @@ export default class EVRViewProvider {
         let component;
         let _destroy = null;
 
-        const table = new EVRTable(domainObject, this.openmct);
+        const table = new EVRTable(domainObject, this.openmct, this.options);
         const markingProp = {
             enable: true,
             useAlternateControlBar: false,
diff --git a/src/evrView/plugin.js b/src/evrView/plugin.js
index d9c856a..97c9d20 100644
--- a/src/evrView/plugin.js
+++ b/src/evrView/plugin.js
@@ -3,8 +3,10 @@ import EVRViewLevelsConfigurationViewProvider from './EVRViewLevelsConfiguration
 import VistaTableConfigurationProvider from '../tables/VistaTableConfigurationProvider';
 
 export default function EVRViewPlugin(options) {
+    const { taxonomy, tablePerformanceOptions } = options;
+
     return function install(openmct) {
-        openmct.objectViews.addProvider(new EVRViewProvider(openmct));
+        openmct.objectViews.addProvider(new EVRViewProvider(openmct, tablePerformanceOptions));
 
         openmct.types.addType('vista.evrView', {
             name: "EVR View",
@@ -20,14 +22,15 @@ export default function EVRViewPlugin(options) {
         });
 
         openmct.inspectorViews.addProvider(
-            new EVRViewLevelsConfigurationViewProvider(options)
+            new EVRViewLevelsConfigurationViewProvider(taxonomy)
         );
 
         openmct.inspectorViews.addProvider(
             new VistaTableConfigurationProvider(
                 'vista.evr-view-configuration', 
                 'Config',
-                'vista.evrView'
+                'vista.evrView',
+                tablePerformanceOptions
             )
         );
 
diff --git a/src/frameEventFilterView/FrameEventFilterTable.js b/src/frameEventFilterView/FrameEventFilterTable.js
index 5f2da87..e41c636 100644
--- a/src/frameEventFilterView/FrameEventFilterTable.js
+++ b/src/frameEventFilterView/FrameEventFilterTable.js
@@ -1,10 +1,6 @@
 import TelemetryTable from 'openmct.tables.TelemetryTable'
 
 export default class FrameEventFilterTable extends TelemetryTable {
-    constructor(domainObject, openmct) {
-        super(domainObject, openmct);
-    }
-
     requestDataFor() {
         return Promise.resolve([]);
     }
diff --git a/src/frameEventFilterView/FrameEventFilterViewProvider.js b/src/frameEventFilterView/FrameEventFilterViewProvider.js
index d23fa52..43034de 100644
--- a/src/frameEventFilterView/FrameEventFilterViewProvider.js
+++ b/src/frameEventFilterView/FrameEventFilterViewProvider.js
@@ -3,8 +3,9 @@ import TableComponent from 'openmct.tables.components.Table';
 import mount from 'utils/mountVueComponent';
 
 export default class FrameEventFilterViewProvider {
-    constructor(openmct) {
+    constructor(openmct, options) {
         this.openmct = openmct;
+        this.options = options;
 
         this.key = 'vista.frameEventFilterView';
         this.name = 'Frame Events Filtered View';
@@ -19,7 +20,7 @@ export default class FrameEventFilterViewProvider {
         let component;
         let _destroy = null;
 
-        let table = new FrameEventFilterTable(domainObject, openmct);
+        let table = new FrameEventFilterTable(domainObject, openmct, this.options);
         let markingProp = {
             enable: true,
             useAlternateControlBar: false,
diff --git a/src/frameEventFilterView/plugin.js b/src/frameEventFilterView/plugin.js
index 5ae9562..2d4b99f 100644
--- a/src/frameEventFilterView/plugin.js
+++ b/src/frameEventFilterView/plugin.js
@@ -1,7 +1,7 @@
 import FrameEventFilterViewProvider from './FrameEventFilterViewProvider.js';
 
-export default function FrameEventFilterViewPlugin() {
+export default function FrameEventFilterViewPlugin(options) {
     return function install(openmct) {
-        openmct.objectViews.addProvider(new FrameEventFilterViewProvider(openmct));
+        openmct.objectViews.addProvider(new FrameEventFilterViewProvider(openmct, options));
     };
 }
diff --git a/src/frameaccountability/BadFramesTelemetryTable.js b/src/frameaccountability/BadFramesTelemetryTable.js
index cc68dba..f6e2408 100644
--- a/src/frameaccountability/BadFramesTelemetryTable.js
+++ b/src/frameaccountability/BadFramesTelemetryTable.js
@@ -2,8 +2,8 @@ import TelemetryTable from 'openmct.tables.TelemetryTable';
 import TelemetryTableRow from 'openmct.tables.TelemetryTableRow';
 
 export default class BadFramesTelemetryTable extends TelemetryTable { 
-    constructor(domainObject, openmct, metadata = []) {
-        super(domainObject, openmct);
+    constructor(domainObject, openmct, options, metadata = []) {
+        super(domainObject, openmct, options);
 
         this.metadata = metadata;
         this.data = [];
diff --git a/src/frameaccountability/frameAccountabilityViewProvider.js b/src/frameaccountability/frameAccountabilityViewProvider.js
index ddb02fb..c3f427e 100644
--- a/src/frameaccountability/frameAccountabilityViewProvider.js
+++ b/src/frameaccountability/frameAccountabilityViewProvider.js
@@ -10,12 +10,13 @@ const FLAG_COLORS = {
 };
 
 export default class FrameAccountabilityViewProvider {
-    constructor(domainObject, openmct, expectedVcidList) {
+    constructor(domainObject, openmct, options) {
         this.domainObject = domainObject;
         this.keystring = openmct.objects.makeKeyString(this.domainObject.identifier);
         this.openmct = openmct;
         this.table = this.instantiateBadFramesTable();
-        this.expectedVcidList = expectedVcidList;
+        this.expectedVcidList = options.frameAccountabilityExpectedVcidList;
+        this.tablePerformanceOptions = options.tablePerformanceOptions;
         this._destroy = null;
     }
     instantiateBadFramesTable() {
@@ -28,7 +29,7 @@ export default class FrameAccountabilityViewProvider {
             type: 'vista.frameEvent'
         };
 
-        return new BadFramesTelemetryTable(domainObject, this.openmct);
+        return new BadFramesTelemetryTable(domainObject, this.openmct, this.tablePerformanceOptions);
     }
     show(element, isEditing, { renderWhenVisible }) {
         const componentDefinition = {
diff --git a/src/frameaccountability/plugin.js b/src/frameaccountability/plugin.js
index 1d32862..1fec378 100644
--- a/src/frameaccountability/plugin.js
+++ b/src/frameaccountability/plugin.js
@@ -1,7 +1,7 @@
 import FrameAccountabilityViewProvider from './frameAccountabilityViewProvider';
 import FrameAccountabilityCompositionPolicy from './frameAccountabilityCompositionPolicy';
 
-export default function install(expectedVcidList) {
+export default function install(options) {
     return function FrameAccountabilityPlugin(openmct) {
 
         openmct.types.addType('vista.frameaccountability', {
@@ -28,7 +28,7 @@ export default function install(expectedVcidList) {
                 return domainObject.type === 'vista.frameaccountability';
             },
             view(domainObject) {
-                return new FrameAccountabilityViewProvider(domainObject, openmct, expectedVcidList);
+                return new FrameAccountabilityViewProvider(domainObject, openmct, options);
             }
         });
 
diff --git a/src/framesummary/FrameWatchTable.js b/src/framesummary/FrameWatchTable.js
index c42874e..be2f037 100644
--- a/src/framesummary/FrameWatchTable.js
+++ b/src/framesummary/FrameWatchTable.js
@@ -8,8 +8,8 @@ import Types from '../types/types.js';
 
 
 export default class FrameWatchTable extends TelemetryTable {
-    constructor(domainObject, openmct, type) {
-        super(domainObject, openmct);
+    constructor(domainObject, openmct, options, type) {
+        super(domainObject, openmct, options);
 
         this.type = type;
         this.config = config[this.type];
diff --git a/src/framesummary/FrameWatchTableConfiguration.js b/src/framesummary/FrameWatchTableConfiguration.js
index 92e7758..03b6d47 100644
--- a/src/framesummary/FrameWatchTableConfiguration.js
+++ b/src/framesummary/FrameWatchTableConfiguration.js
@@ -3,8 +3,8 @@ import { config } from './config';
 import FrameWatchColumn from './FrameWatchColumn';
 
 export default class FrameWatchTableConfiguration extends TelemetryTableConfiguration {
-    constructor(domainObject, openmct, type) {
-        super(domainObject, openmct);
+    constructor(domainObject, openmct, options, type) {
+        super(domainObject, openmct, options);
 
         this.config = config[type];
         this.columns = this.config.columns.map(column => new FrameWatchColumn(column.key, column.title));
diff --git a/src/framesummary/FrameWatchViewProvider.js b/src/framesummary/FrameWatchViewProvider.js
index f6de64d..bdcec5d 100644
--- a/src/framesummary/FrameWatchViewProvider.js
+++ b/src/framesummary/FrameWatchViewProvider.js
@@ -4,8 +4,9 @@ import FrameWatchViewComponent from './components/FrameWatchViewComponent.vue';
 import { FRAME_WATCH_TYPE } from './config';
 
 export default class FrameWatchViewProvider {
-    constructor(openmct, key, name, type = FRAME_WATCH_TYPE) {
+    constructor(openmct, key, name, options, type = FRAME_WATCH_TYPE) {
         this.openmct = openmct;
+        this.options = options;
 
         this.key = key;
         this.name = name;
@@ -21,7 +22,7 @@ export default class FrameWatchViewProvider {
         let component;
         let _destroy = null;
       
-        const table = new FrameWatchTable(domainObject, this.openmct, this.type);
+        const table = new FrameWatchTable(domainObject, this.openmct, this.options, this.type);
 
         const view = {
             show: function (element, editMode, { renderWhenVisible }) {
diff --git a/src/framesummary/plugin.js b/src/framesummary/plugin.js
index 7b56c17..426193a 100644
--- a/src/framesummary/plugin.js
+++ b/src/framesummary/plugin.js
@@ -2,7 +2,7 @@ import FrameWatchViewProvider from './FrameWatchViewProvider';
 import FrameWatchConfigurationViewProvider from './FrameWatchConfigurationViewProvider';
 import { ENCODING_WATCH_TYPE, FRAME_WATCH_TYPE } from './config';
 
-export default function FrameWatchViewPlugin() {
+export default function FrameWatchViewPlugin(options) {
     return function install(openmct) {
         openmct.types.addType(ENCODING_WATCH_TYPE, {
             name: "Encoding Watch View",
@@ -30,6 +30,7 @@ export default function FrameWatchViewPlugin() {
             openmct,
             'vista.frameWatchViewProvider',
             'Frame Watch View',
+            options,
             FRAME_WATCH_TYPE
         ));
 
@@ -37,6 +38,7 @@ export default function FrameWatchViewPlugin() {
             openmct,
             'vista.encodingWatchViewProvider',
             'Encoding Watch View',
+            options,
             ENCODING_WATCH_TYPE
         ));
 
@@ -44,6 +46,7 @@ export default function FrameWatchViewPlugin() {
             openmct,
             'vista.encodingWatchConfigurationViewProvider',
             'Config',
+            options,
             ENCODING_WATCH_TYPE
         ));
 
@@ -51,6 +54,7 @@ export default function FrameWatchViewPlugin() {
             openmct,
             'vista.frameWatchConfigurationViewProvider',
             'Config',
+            options,
             FRAME_WATCH_TYPE
         ));
 
diff --git a/src/messagesView/MessagesTable.js b/src/messagesView/MessagesTable.js
index 3eb1efd..9175e25 100644
--- a/src/messagesView/MessagesTable.js
+++ b/src/messagesView/MessagesTable.js
@@ -1,9 +1,5 @@
 import TelemetryTable from 'openmct.tables.TelemetryTable'
 export default class MessagesTable extends TelemetryTable {
-    constructor(domainObject, openmct){
-        super(domainObject, openmct);
-    }
-
     initialize() {
         this.filterObserver = this.openmct.objects.observe(
             this.domainObject,
diff --git a/src/multipleHistoricalSessions/plugin.js b/src/multipleHistoricalSessions/plugin.js
index 0d24234..d7760ce 100644
--- a/src/multipleHistoricalSessions/plugin.js
+++ b/src/multipleHistoricalSessions/plugin.js
@@ -3,7 +3,7 @@ import HistoricalSessionIndicator from './indicator/historicalSessionIndicator.v
 import SessionTable from './sessionTable/SessionTable';
 import HistoricalSessionMetadata from './HistoricalSessionMetadata';
 
-export default function HistoricalSessionsPlugin() {
+export default function HistoricalSessionsPlugin(options) {
     return function install(openmct) {
         const renderWhenVisible = func => {
             window.requestAnimationFrame(func);
@@ -22,6 +22,7 @@ export default function HistoricalSessionsPlugin() {
         const table = new SessionTable(
             domainObject,
             openmct,
+            options,
             HistoricalSessionMetadata
         );
         const objectPath = [ domainObject ];
diff --git a/src/multipleHistoricalSessions/sessionTable/SessionTable.js b/src/multipleHistoricalSessions/sessionTable/SessionTable.js
index 597cc73..7bf951f 100644
--- a/src/multipleHistoricalSessions/sessionTable/SessionTable.js
+++ b/src/multipleHistoricalSessions/sessionTable/SessionTable.js
@@ -2,8 +2,8 @@ import TelemetryTable from 'openmct.tables.TelemetryTable';
 import TelemetryTableRow from 'openmct.tables.TelemetryTableRow';
 
 export default class SessionTable extends TelemetryTable { 
-    constructor(domainObject, openmct, metadata) {
-        super(domainObject, openmct);
+    constructor(domainObject, openmct, options, metadata) {
+        super(domainObject, openmct, options);
 
         this.metadata = metadata;
         this.data = [];
diff --git a/src/packetSummary/PacketSummaryTable.js b/src/packetSummary/PacketSummaryTable.js
index 7ee4bd1..a4ea06f 100644
--- a/src/packetSummary/PacketSummaryTable.js
+++ b/src/packetSummary/PacketSummaryTable.js
@@ -3,10 +3,6 @@ import PacketSummaryRowCollection from './PacketSummaryRowCollection';
 import PacketSummaryRow from './PacketSummaryRow';
 
 export default class PacketSummaryTable extends TelemetryTable {
-    constructor(domainObject, openmct) {
-        super(domainObject, openmct);
-    }
-
     initialize() {
         if (this.isDatasetNode()) {
             this.addTelemetryObject(this.domainObject);
diff --git a/src/product-status/DataProductInspectorViewProvider.js b/src/product-status/DataProductInspectorViewProvider.js
index d7f582c..8e22d6b 100644
--- a/src/product-status/DataProductInspectorViewProvider.js
+++ b/src/product-status/DataProductInspectorViewProvider.js
@@ -3,8 +3,9 @@ import TelemetryTableConfiguration from 'openmct.tables.TelemetryTableConfigurat
 import DataProductAutoclear from './data-product-autoclear.vue';
 
 export default class DataProductViewProvider {
-  constructor(openmct) {
+  constructor(openmct, options) {
     this.openmct = openmct;
+    this.options = options;
 
     this.key = 'vista.dataProducts-configuration';
     this.name = 'Autoclear';
@@ -20,13 +21,13 @@ export default class DataProductViewProvider {
     let _destroy = null;
 
     const domainObject = selection[0][0].context.item;
-    const tableConfiguration = new TelemetryTableConfiguration(domainObject, this.openmct);
+    const tableConfiguration = new TelemetryTableConfiguration(domainObject, openmct, this.options);
 
     return {
       show: function (element) {
         const componentDefinition = {
           provide: {
-            openmct: this.openmct,
+            openmct,
             tableConfiguration
           },
           components: {
diff --git a/src/product-status/DataProductTable.js b/src/product-status/DataProductTable.js
index d8b21d8..33dfe83 100644
--- a/src/product-status/DataProductTable.js
+++ b/src/product-status/DataProductTable.js
@@ -8,8 +8,8 @@ import DataProductRowCollection from './DataProductRowCollection';
 import _ from 'lodash';
 
 export default class DataProductTable extends TelemetryTable {
-  constructor(domainObject, openmct) {
-    super(domainObject, openmct);
+  constructor(domainObject, openmct, options) {
+    super(domainObject, openmct, options);
 
     this.setAutoClearTimeout = this.setAutoClearTimeout.bind(this);
     this.autoClearTimeoutObserver = this.openmct.objects.observe(this.domainObject,
@@ -28,7 +28,7 @@ export default class DataProductTable extends TelemetryTable {
   }
 
   createTableRowCollections() {
-    this.tableRows = new DataProductRowCollection.default(this.openmct);
+    this.tableRows = new DataProductRowCollection(this.openmct);
 
     //Fetch any persisted default sort
     let sortOptions = this.configuration.getConfiguration().sortOptions;
diff --git a/src/product-status/DataProductViewProvider.js b/src/product-status/DataProductViewProvider.js
index 88e59c4..fa400ed 100644
--- a/src/product-status/DataProductViewProvider.js
+++ b/src/product-status/DataProductViewProvider.js
@@ -3,8 +3,10 @@ import TableComponent from 'openmct.tables.components.Table';
 import DataProductTable from './DataProductTable.js';
 
 export default class DataProductViewProvider {
-    constructor(openmct) {
+    constructor(openmct, options) {
         this.openmct = openmct;
+        this.options = options;
+
         this.key = 'vista.productStatus';
         this.name = 'Data Product View';
         this.cssClass = 'icon-tabular-realtime';
@@ -15,12 +17,11 @@ export default class DataProductViewProvider {
     }
 
     view(domainObject, objectPath) {
-
         let component;
         let _destroy = null;
 
         const openmct = this.openmct;
-        const table = new DataProductTable(domainObject, openmct);
+        const table = new DataProductTable(domainObject, openmct, this.options);
         const markingProp = {
             enable: true,
             useAlternateControlBar: false,
diff --git a/src/product-status/plugin.js b/src/product-status/plugin.js
index 339b4a4..76c8e0e 100644
--- a/src/product-status/plugin.js
+++ b/src/product-status/plugin.js
@@ -7,7 +7,7 @@ import TXTDownloadCell from './TXTDownloadCell.js';
 import VistaTableConfigurationProvider from '../tables/VistaTableConfigurationProvider.js';
 import DataProductViewActions from './DataProductViewActions.js';
 
-export default function install() {
+export default function install(options) {
     return function ProductStatusPlugin(openmct) {
         openmct.types.addType('vista.dataProductsView', {
             name: "Data Product View",
@@ -18,13 +18,14 @@ export default function install() {
                 domainObject.composition = [];
             }
         });
-        openmct.objectViews.addProvider(new DataProductViewProvider(openmct));
-        openmct.inspectorViews.addProvider(new DataProductInspectorViewProvider(openmct));
+        openmct.objectViews.addProvider(new DataProductViewProvider(openmct, options));
+        openmct.inspectorViews.addProvider(new DataProductInspectorViewProvider(openmct, options));
 
         openmct.inspectorViews.addProvider(new VistaTableConfigurationProvider(
             'vista.data-products-configuration', 
             'Config',
-            'vista.dataProductsView'
+            'vista.dataProductsView',
+            options
         ));
 
         // Suppress new views via monkey-patching (for now)
diff --git a/src/tables/VistaTableConfigurationProvider.js b/src/tables/VistaTableConfigurationProvider.js
index 3f611a1..fbd5471 100644
--- a/src/tables/VistaTableConfigurationProvider.js
+++ b/src/tables/VistaTableConfigurationProvider.js
@@ -4,7 +4,9 @@ import TableConfigurationComponent from 'openmct.tables.components.TableConfigur
 import mount from 'utils/mountVueComponent';
 
 export default class VistaTableConfigurationProvider {
-  constructor (key, name, type) {
+  constructor (key, name, type, options) {
+    this.options = options;
+
     this.key = key;
     this.name = name;
     this.type = type;
@@ -20,7 +22,7 @@ export default class VistaTableConfigurationProvider {
     let _destroy = null;
 
     const domainObject = selection[0][0].context.item;
-    const tableConfiguration = new TelemetryTableConfiguration(domainObject, openmct);
+    const tableConfiguration = new TelemetryTableConfiguration(domainObject, openmct, this.options);
 
     return {
       show: function (element) {

From 98973c8fa2bc7f11ee3a90a56edb05efb3f748a0 Mon Sep 17 00:00:00 2001
From: David Tsay <3614296+davetsay@users.noreply.github.com>
Date: Mon, 29 Jul 2024 10:55:03 -0700
Subject: [PATCH 41/49] add back development overlay message

---
 .webpack/webpack.dev.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/.webpack/webpack.dev.js b/.webpack/webpack.dev.js
index 124ccfa..e6b86e6 100644
--- a/.webpack/webpack.dev.js
+++ b/.webpack/webpack.dev.js
@@ -67,8 +67,7 @@ module.exports = merge(common, {
         }],
         client: {
             progress: true,
-            // overlay: true
-            overlay: false
+            overlay: true
         },
         proxy: {
             '/mcws-test': {

From ca8b22834cae4a22cd84e8cec5311b8e72d665df Mon Sep 17 00:00:00 2001
From: David Tsay <3614296+davetsay@users.noreply.github.com>
Date: Mon, 29 Jul 2024 10:59:09 -0700
Subject: [PATCH 42/49] comment out dev mode configuration

---
 config.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/config.js b/config.js
index 9167c6c..fcb2bd3 100644
--- a/config.js
+++ b/config.js
@@ -502,8 +502,8 @@
          * they do!
          */
         assetPath: 'node_modules/openmct/dist',
-        proxyUrl: 'http://localhost:8080/',
-        useDeveloperStorage: true
+        // proxyUrl: 'http://localhost:8080/',
+        // useDeveloperStorage: true
     };
 
     window.openmctMCWSConfig = openmctMCWSConfig;

From aeee3dfcfcb3d06f16787308fe7e850973bf351e Mon Sep 17 00:00:00 2001
From: David Tsay <3614296+davetsay@users.noreply.github.com>
Date: Mon, 29 Jul 2024 12:36:50 -0700
Subject: [PATCH 43/49] add newline to EOF

---
 .../channelTablePlugin/CellFormatConfigurationComponent.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/channelTable/channelTablePlugin/CellFormatConfigurationComponent.vue b/src/channelTable/channelTablePlugin/CellFormatConfigurationComponent.vue
index 1d89413..7dfec4c 100644
--- a/src/channelTable/channelTablePlugin/CellFormatConfigurationComponent.vue
+++ b/src/channelTable/channelTablePlugin/CellFormatConfigurationComponent.vue
@@ -47,4 +47,4 @@ export default {
     this.openmct.editor.off('isEditing', this.toggleEdit);
   }
 }
-</script>
\ No newline at end of file
+</script>

From 0c3ece9d32a5783a5abf998f4c9a45d52e36f6a7 Mon Sep 17 00:00:00 2001
From: David Tsay <3614296+davetsay@users.noreply.github.com>
Date: Mon, 29 Jul 2024 13:01:50 -0700
Subject: [PATCH 44/49] fix naming issue

---
 .../ImportExportWithDatasets/importWithDatasetsModifier.js      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/actionModifiers/ImportExportWithDatasets/importWithDatasetsModifier.js b/src/actionModifiers/ImportExportWithDatasets/importWithDatasetsModifier.js
index 3dacf8b..545f1eb 100644
--- a/src/actionModifiers/ImportExportWithDatasets/importWithDatasetsModifier.js
+++ b/src/actionModifiers/ImportExportWithDatasets/importWithDatasetsModifier.js
@@ -171,7 +171,7 @@ function importWithDatasetsModifier(openmct) {
         datasets = undefined;
         referencedDatasets = undefined;
         component = undefined;
-        destroyForm = undefined;
+        _destroy = undefined;
     }
 
     function getReferencedDatasetsFromImport(json) {

From 382d423cd3233c567e5114314068e862d524d92b Mon Sep 17 00:00:00 2001
From: David Tsay <3614296+davetsay@users.noreply.github.com>
Date: Mon, 29 Jul 2024 13:08:07 -0700
Subject: [PATCH 45/49] revert change

---
 src/framesummary/FrameWatchConfigurationViewProvider.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/framesummary/FrameWatchConfigurationViewProvider.js b/src/framesummary/FrameWatchConfigurationViewProvider.js
index 95b575b..1d7ce60 100644
--- a/src/framesummary/FrameWatchConfigurationViewProvider.js
+++ b/src/framesummary/FrameWatchConfigurationViewProvider.js
@@ -22,7 +22,7 @@ export default class FrameWatchConfigurationViewProvider {
 
     view(selection) {
         const domainObject = selection[0][0].context.item;
-        const tableConfiguration = new FrameWatchTableConfiguration(domainObject, this.openmct, this.type);
+        const tableConfiguration = new FrameWatchTableConfiguration(domainObject, openmct, this.type);
 
         return {
             show: function (element) {

From 9244cbae973c1f46fbbfc7ad3d6ddd499c128388 Mon Sep 17 00:00:00 2001
From: David Tsay <3614296+davetsay@users.noreply.github.com>
Date: Mon, 29 Jul 2024 13:29:48 -0700
Subject: [PATCH 46/49] remove unnecessary constructor

---
 src/lib/HistoricalContextTableRow.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/lib/HistoricalContextTableRow.js b/src/lib/HistoricalContextTableRow.js
index 0337fb2..c26df86 100644
--- a/src/lib/HistoricalContextTableRow.js
+++ b/src/lib/HistoricalContextTableRow.js
@@ -1,10 +1,6 @@
 import TelemetryTableRow from 'openmct.tables.TelemetryTableRow';
 
 export default class HistoricalContextTableRow extends TelemetryTableRow {
-  constructor(datum, columns, objectKeyString, limitEvaluator) {
-    super(datum, columns, objectKeyString, limitEvaluator);
-  }
-
   getContextMenuActions() {
     return ['viewHistoricalData'];
   }

From 04d6a71d420a48828a975da5b2515ed045ca7ad5 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Mon, 29 Jul 2024 13:56:31 -0700
Subject: [PATCH 47/49] pass table performance options to message tables

---
 src/messagesView/MessagesViewProvider.js | 5 +++--
 src/messagesView/plugin.js               | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/messagesView/MessagesViewProvider.js b/src/messagesView/MessagesViewProvider.js
index 258d293..a8bd5e3 100644
--- a/src/messagesView/MessagesViewProvider.js
+++ b/src/messagesView/MessagesViewProvider.js
@@ -3,8 +3,9 @@ import TableComponent from 'openmct.tables.components.Table';
 import mount from 'utils/mountVueComponent';
 
 export default class MessagesViewProvider {
-    constructor(openmct) {
+    constructor(openmct, options) {
         this.openmct = openmct;
+        this.options = options;
 
         this.key = 'vista.messagesView';
         this.name = 'Messages View';
@@ -19,7 +20,7 @@ export default class MessagesViewProvider {
         let component;
         let _destroy = null;
 
-        const table = new MessagesTable(domainObject, openmct);
+        const table = new MessagesTable(domainObject, openmct, this.options);
         const markingProp = {
             enable: true,
             useAlternateControlBar: false,
diff --git a/src/messagesView/plugin.js b/src/messagesView/plugin.js
index ae39d86..07ed294 100644
--- a/src/messagesView/plugin.js
+++ b/src/messagesView/plugin.js
@@ -3,7 +3,7 @@ import VistaTableConfigurationProvider from '../tables/VistaTableConfigurationPr
 
 export default function MessagesViewPlugin(options) {
     return function install(openmct) {
-        openmct.objectViews.addProvider(new MessagesViewProvider(openmct));
+        openmct.objectViews.addProvider(new MessagesViewProvider(openmct, options));
         openmct.types.addType('vista.messagesView', {
             name: "Messages View",
             description: "Drag and drop a message node into this view to show a filterable table of messages",
@@ -20,7 +20,8 @@ export default function MessagesViewPlugin(options) {
             new VistaTableConfigurationProvider(
                 'vista.messages-view-configuration', 
                 'Config',
-                'vista.messagesView'
+                'vista.messagesView',
+                options
             )
         );
 

From 05d41bcafae460edaebcbcf7f1980ea67cc5111a Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Mon, 29 Jul 2024 14:01:58 -0700
Subject: [PATCH 48/49] pass table performance options to packet summary table

---
 src/packetSummary/PacketSummaryViewProvider.js | 5 +++--
 src/packetSummary/plugin.js                    | 7 ++++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/packetSummary/PacketSummaryViewProvider.js b/src/packetSummary/PacketSummaryViewProvider.js
index 500c7f1..75a4407 100644
--- a/src/packetSummary/PacketSummaryViewProvider.js
+++ b/src/packetSummary/PacketSummaryViewProvider.js
@@ -3,8 +3,9 @@ import PacketSummaryTable from './PacketSummaryTable.js';
 import PacketSummaryViewComponent from './components/PacketSummaryViewComponent.vue';
 
 export default class ProductSummaryViewProvider {
-    constructor(openmct) {
+    constructor(openmct, options) {
         this.openmct = openmct;
+        this.options = options;
 
         this.key = 'vista.packetSummaryViewProvider';
         this.name = 'Packet Summary View';
@@ -19,7 +20,7 @@ export default class ProductSummaryViewProvider {
         let component;
         let _destroy = null;
 
-        const table = new PacketSummaryTable(domainObject, openmct);
+        const table = new PacketSummaryTable(domainObject, openmct, this.options);
 
         const view = {
             show: function (element, editMode, { renderWhenVisible }) {
diff --git a/src/packetSummary/plugin.js b/src/packetSummary/plugin.js
index 55e6fe9..5c41d68 100644
--- a/src/packetSummary/plugin.js
+++ b/src/packetSummary/plugin.js
@@ -1,7 +1,7 @@
 import PacketSummaryViewProvider from './PacketSummaryViewProvider';
 import VistaTableConfigurationProvider from '../tables/VistaTableConfigurationProvider.js';
 
-export default function PacketSummaryPlugin() {
+export default function PacketSummaryPlugin(options) {
     return function install(openmct) {
         openmct.types.addType('vista.packetSummaryView', {
             name: "Packet Summary View",
@@ -14,7 +14,7 @@ export default function PacketSummaryPlugin() {
             }
         });
 
-        openmct.objectViews.addProvider(new PacketSummaryViewProvider(openmct));
+        openmct.objectViews.addProvider(new PacketSummaryViewProvider(openmct, options));
 
         const wrappedGet = openmct.objectViews.get;
         openmct.objectViews.get = function (domainObject) {
@@ -33,7 +33,8 @@ export default function PacketSummaryPlugin() {
         openmct.inspectorViews.addProvider(new VistaTableConfigurationProvider(
             'vista.packet-summary-configuration', 
             'Config',
-            'vista.packetSummaryView'
+            'vista.packetSummaryView',
+            options
         ));
     }
 };

From a74d48afa047421e6d3cd02d110501c69bd82529 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@gmail.com>
Date: Tue, 30 Jul 2024 15:42:16 -0700
Subject: [PATCH 49/49] use vue 3 component mounting

---
 src/venues/VenueService.js | 33 ++++++++++++++++++++++++---------
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/venues/VenueService.js b/src/venues/VenueService.js
index 477582d..94d2e81 100644
--- a/src/venues/VenueService.js
+++ b/src/venues/VenueService.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import mount from 'utils/mountVueComponent';
 import sessionService from '../services/session/SessionService';
 import VenueDialogComponent from './components/VenueDialogComponent.vue';
 import Venue from './Venue';
@@ -8,6 +8,8 @@ class VenueService {
         this.venues = configuration.venues;
         this.openmct = openmct;
         this.selectionPromise = null;
+
+        this._destroy = null;
     }
 
     async getSelectedVenue() {
@@ -22,13 +24,13 @@ class VenueService {
         this.selectionPromise = new Promise((resolve, reject) => {
             this.resolveSelection = resolve;
             this.rejectSelection = reject;
-            const VenueDialogComponent = this.createVenueDialogElement();
+            const element = this.createVenueDialogElement();
             this.overlay = this.openmct.overlays.overlay({
-                element: VenueDialogComponent.$mount().$el,
+                element,
                 size: 'small',
                 dismissable: false,
                 onDestroy: () => {
-                    VenueDialogComponent.$destroy();
+                    this._destroy();
                 }
             });
         }).finally(() => this.overlay.dismiss());
@@ -36,24 +38,37 @@ class VenueService {
         return this.selectionPromise;
     }
 
-    createVenueDialogElement() {
+    createVenueDialogElement(element) {
         const self = this;
-        const VenueDialogVueComponent = new Vue({
+
+        const componentDefinition = {
             provide: {
                 venueService: self
             },
+            template: `<VenueDialogComponent @submit="handleSubmit" />`,
             components: {
                 VenueDialogComponent
             },
-            template: `<VenueDialogComponent @submit="handleSubmit" />`,
             methods: {
                 handleSubmit(isActive, selectedSession, selectedVenue) {
                     self.handleDialogSubmit(isActive, selectedSession, selectedVenue);
                 }
             }
-        });
+        };
+
+        const componentOptions = {
+            element
+        };
+
+        const {
+            componentInstance,
+            destroy,
+            el
+        } = mount(componentDefinition, componentOptions);
+
+        this._destroy = destroy;
 
-        return VenueDialogVueComponent;
+        return el;
     }
 
     async handleDialogSubmit(isActive, selectedSession, selectedVenue) {