add comps manager

src/plugins/DeviceClassifier/src/DeviceMatchers.js

@@ -28,7 +28,6 @@
  *
  * For internal use by the mobile support bundle.
  *
- * @memberof src/plugins/DeviceClassifier
  * @private
  */
 

src/plugins/LADTable/LADTableConfiguration.js

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import EventEmitter from 'EventEmitter';
+import { EventEmitter } from 'eventemitter3';
 import { markRaw } from 'vue';
 export default class LADTableConfiguration extends EventEmitter {
   constructor(domainObject, openmct) {

src/plugins/activityStates/activityStatesInterceptor.js

@@ -24,7 +24,7 @@ import { ACTIVITY_STATES_KEY } from './createActivityStatesIdentifier.js';
 
 /**
  * @typedef {Object} ActivityStatesInterceptorOptions
- * @property {import('../../api/objects/ObjectAPI').Identifier} identifier the {namespace, key} to use for the activity states object.
+ * @property {import('openmct').Identifier} identifier the {namespace, key} to use for the activity states object.
  * @property {string} name The name of the activity states model.
  * @property {number} priority the priority of the interceptor. By default, it is low.
  */

src/plugins/charts/bar/pluginSpec.js

@@ -21,7 +21,7 @@
  *****************************************************************************/
 
 // import BarGraph from './BarGraphPlot.vue';
-import EventEmitter from 'EventEmitter';
+import { EventEmitter } from 'eventemitter3';
 import { createOpenMct, resetApplicationState } from 'utils/testing';
 import { nextTick } from 'vue';
 

src/plugins/charts/scatter/pluginSpec.js

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import EventEmitter from 'EventEmitter';
+import { EventEmitter } from 'eventemitter3';
 import { createOpenMct, resetApplicationState } from 'utils/testing';
 import { nextTick } from 'vue';
 

src/plugins/clock/pluginSpec.js

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import EventEmitter from 'EventEmitter';
+import { EventEmitter } from 'eventemitter3';
 import { createOpenMct, resetApplicationState } from 'utils/testing';
 import { nextTick } from 'vue';
 

src/plugins/comps/CompsManager.js

@@ -0,0 +1,50 @@
+import { EventEmitter } from 'eventemitter3';
+
+export default class CompsManager extends EventEmitter {
+  #openmct;
+  #domainObject;
+  #telemetryObjects = {};
+  #telemetryCollections = {};
+
+  constructor(openmct, domainObject) {
+    super();
+    this.#openmct = openmct;
+    this.#domainObject = domainObject;
+  }
+
+  #removeTelemetryObject(telemetryObject) {
+    const keyString = this.#openmct.objects.makeKeyString(telemetryObject.identifier);
+    delete this.#telemetryObjects[keyString];
+    this.#telemetryCollections[keyString]?.destroy();
+    delete this.#telemetryCollections[keyString];
+  }
+
+  telemetryProcessor(telemetryObjects) {
+    console.debug('Telemetry Processor', telemetryObjects);
+  }
+
+  clearData() {
+    console.debug('Clear Data');
+  }
+
+  #addTelemetryObject(telemetryObject) {
+    const keyString = this.#openmct.objects.makeKeyString(telemetryObject.identifier);
+    this.#telemetryObjects[keyString] = telemetryObject;
+    this.#telemetryCollections[keyString] =
+      this.#openmct.telemetry.requestCollection(telemetryObject);
+
+    this.#telemetryCollections[keyString].on('add', this.telemetryProcessor);
+    this.#telemetryCollections[keyString].on('clear', this.clearData);
+    this.#telemetryCollections[keyString].load();
+  }
+
+  static getCompsManager(domainObject, openmct, compsManagerPool) {
+    const id = openmct.objects.makeKeyString(domainObject.identifier);
+
+    if (!compsManagerPool[id]) {
+      compsManagerPool[id] = new CompsManager(domainObject, this.openmct);
+    }
+
+    return compsManagerPool[id];
+  }
+}

src/plugins/comps/CompsTelemetryProvider.js

@@ -29,45 +29,6 @@ export default class CompsTelemetryProvider {
 
   constructor(openmct) {
     this.#openmct = openmct;
-    this.#loadComposition();
-    this.#startSharedWorker();
-  }
-
-  async #loadComposition() {
-    this.#composition = this.#openmct.composition.get(this.domainObject);
-    if (this.#composition) {
-      await this.#composition.load();
-      // load all of our telemetry objects
-      this.#composition.forEach(this.#addTelemetryObject);
-
-      this.#composition.on('add', this.#addTelemetryObject);
-      this.#composition.on('remove', this.#removeTelemetryObject);
-    }
-  }
-
-  destroy() {
-    this.#composition.off('add', this.#addTelemetryObject);
-    this.#composition.off('remove', this.removeTelemetryObject);
-  }
-
-  #addTelemetryObject(telemetryObject) {
-    const keyString = this.#openmct.objects.makeKeyString(telemetryObject.identifier);
-    this.#telemetryObjects[keyString] = telemetryObject;
-    this.#telemetryCollections[keyString] =
-      this.#openmct.telemetry.requestCollection(telemetryObject);
-
-    this.#telemetryCollections[keyString].on('add', this.#telemetryProcessor);
-    this.#telemetryCollections[keyString].on('clear', this.#clearData);
-    this.#telemetryCollections[keyString].load();
-  }
-
-  #telemetryProcessor(telemetryObjects) {
-    console.debug('📡 Processing telemetry:', telemetryObjects);
-  }
-
-  #clearData() {
-    // clear data
-    console.debug('🆑 Clearing data');
   }
 
   #removeTelemetryObject(telemetryObject) {

src/plugins/comps/CompsViewProvider.js

@@ -27,11 +27,12 @@ import CompsView from './components/CompsView.vue';
 const DEFAULT_VIEW_PRIORITY = 100;
 
 export default class ConditionSetViewProvider {
-  constructor(openmct) {
+  constructor(openmct, compsManagerPool) {
     this.openmct = openmct;
     this.name = 'Comps View';
     this.key = 'comps.view';
     this.cssClass = 'icon-telemetry';
+    this.compsManagerPool = compsManagerPool;
   }
 
   canView(domainObject, objectPath) {
@@ -57,14 +58,15 @@ export default class ConditionSetViewProvider {
             provide: {
               openmct: this.openmct,
               domainObject,
-              objectPath
+              objectPath,
+              compsManagerPool: this.compsManagerPool
             },
             data() {
               return {
                 isEditing
               };
             },
-            template: '<comps :isEditing="isEditing"></comps>'
+            template: '<CompsView :isEditing="isEditing"></CompsView>'
           },
           {
             app: this.openmct.app,

src/plugins/comps/components/CompsView.vue

@@ -21,19 +21,45 @@
 -->
 
 <template>
-    <div class="u-contents"></div>
+  <div class="u-contents">This is the comps view</div>
 </template>
 
-<script>
-export default {
-    inject: ['openmct', 'domainObject'],
-    mounted() { },
-    beforeUnmount() {
-        if (this.unobserve) {
-            this.unobserve();
-        }
+<script setup>
+import { inject, onBeforeUnmount, onMounted } from 'vue';
 
-        this.openmct.time.off('tick', this.tick);
-    }
-};
+import CompsManager from '../CompsManager';
+
+const openmct = inject('openmct');
+const domainObject = inject('domainObject');
+const compsManagerPool = inject('compsManagerPool');
+const compsManager = CompsManager.getCompsManager(domainObject, openmct, compsManagerPool);
+const composition = openmct.composition.get(domainObject);
+
+onMounted(() => {
+  loadComposition();
+  console.debug('🚀 CompsView: onMounted with compsManager', compsManager);
+});
+
+async function loadComposition() {
+  if (composition) {
+    composition.on('add', addTelemetryObject);
+    composition.on('remove', removeTelemetryObject);
+    await composition.load();
+  }
+}
+
+function addTelemetryObject(object) {
+  console.debug('📢 CompsView: addTelemetryObject', object);
+}
+
+function removeTelemetryObject(object) {
+  console.debug('❌ CompsView: removeTelemetryObject', object);
+}
+
+onBeforeUnmount(() => {
+  if (composition) {
+    composition.off('add', addTelemetryObject);
+    composition.off('remove', removeTelemetryObject);
+  }
+});
 </script>

src/plugins/comps/plugin.js

@@ -23,6 +23,8 @@ import CompsTelemetryProvider from './CompsTelemetryProvider.js';
 import CompsViewProvider from './CompsViewProvider.js';
 
 export default function CompsPlugin() {
+  const compsManagerPool = {};
+
   return function install(openmct) {
     openmct.types.addType('comps', {
       name: 'Comps',
@@ -40,7 +42,7 @@ export default function CompsPlugin() {
     openmct.composition.addPolicy((parent, child) => {
       return openmct.telemetry.isTelemetryObject(child);
     });
-    openmct.telemetry.addProvider(new CompsTelemetryProvider(openmct));
-    openmct.objectViews.addProvider(new CompsViewProvider(openmct));
+    openmct.telemetry.addProvider(new CompsTelemetryProvider(openmct, compsManagerPool));
+    openmct.objectViews.addProvider(new CompsViewProvider(openmct, compsManagerPool));
   };
 }

src/plugins/condition/Condition.js

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import EventEmitter from 'EventEmitter';
+import { EventEmitter } from 'eventemitter3';
 import { v4 as uuid } from 'uuid';
 
 import AllTelemetryCriterion from './criterion/AllTelemetryCriterion.js';

src/plugins/condition/ConditionManager.js

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import EventEmitter from 'EventEmitter';
+import { EventEmitter } from 'eventemitter3';
 import { v4 as uuid } from 'uuid';
 
 import Condition from './Condition.js';

src/plugins/condition/StyleRuleManager.js

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import EventEmitter from 'EventEmitter';
+import { EventEmitter } from 'eventemitter3';
 
 export default class StyleRuleManager extends EventEmitter {
   constructor(styleConfiguration, openmct, callback, suppressSubscriptionOnEdit) {

src/plugins/condition/criterion/TelemetryCriterion.js

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import EventEmitter from 'EventEmitter';
+import { EventEmitter } from 'eventemitter3';
 
 import StalenessUtils from '@/utils/staleness';
 

src/plugins/displayLayout/LayoutDrag.js

@@ -45,7 +45,6 @@
  * @param {number[]} dimFactor the dimensions factor
  * @param {number[]} the size of each grid element, in pixels
  * @constructor
- * @memberof platform/features/layout
  */
 export default function LayoutDrag(rawPosition, posFactor, dimFactor, gridSize) {
   this.rawPosition = rawPosition;

src/plugins/exportAsJSONAction/ExportAsJSONAction.js

@@ -108,7 +108,7 @@ class ExportAsJSONAction {
 
   /**
    * @private
-   * @param {import('../../api/objects/ObjectAPI').DomainObject} parent
+   * @param {import('openmct').DomainObject} parent
    */
   async #write(parent) {
     this.totalToExport++;

src/plugins/flexibleLayout/pluginSpec.js

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import EventEmitter from 'EventEmitter';
+import { EventEmitter } from 'eventemitter3';
 import { createOpenMct, resetApplicationState } from 'utils/testing';
 import { nextTick } from 'vue';
 

src/plugins/imagery/lib/eventHelpers.js

@@ -20,6 +20,9 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+/**
+ * @type {EventHelpers}
+ */
 const helperFunctions = {
   listenTo: function (object, event, callback, context) {
     if (!this._listeningTo) {
@@ -95,3 +98,8 @@ const helperFunctions = {
 };
 
 export default helperFunctions;
+/**
+ * @typedef {Object} EventHelpers
+ * @property {(object: any, event: string, callback: Function, context?: any) => void} listenTo
+ * @property {(object: any, event?: string, callback?: Function, context?: any) => void} stopListening
+ */

src/plugins/inspectorViews/styles/StylesManager.js

@@ -1,4 +1,4 @@
-import EventEmitter from 'EventEmitter';
+import { EventEmitter } from 'eventemitter3';
 
 const LOCAL_STORAGE_KEY = 'mct-saved-styles';
 const LIMIT = 20;

src/plugins/localTimeSystem/LocalTimeFormat.js

@@ -38,7 +38,6 @@ const DATE_FORMATS = [DATE_FORMAT, 'YYYY-MM-DD h:mm:ss a', 'YYYY-MM-DD h:mm a',
  *
  * @implements {Format}
  * @constructor
- * @memberof platform/commonUI/formats
  */
 export default function LocalTimeFormat() {
   this.key = 'local-format';

src/plugins/localTimeSystem/pluginSpec.js

@@ -61,7 +61,7 @@ describe('The local time', () => {
     });
 
     it('can be set to be the main time system', () => {
-      expect(openmct.time.timeSystem().key).toBe(LOCAL_SYSTEM_KEY);
+      expect(openmct.time.getTimeSystem().key).toBe(LOCAL_SYSTEM_KEY);
     });
 
     it('uses the local-format time format', () => {

src/plugins/notebook/snapshot-container.js

@@ -1,4 +1,4 @@
-import EventEmitter from 'EventEmitter';
+import { EventEmitter } from 'eventemitter3';
 
 import { EVENT_SNAPSHOTS_UPDATED } from './notebook-constants.js';
 const NOTEBOOK_SNAPSHOT_STORAGE = 'notebook-snapshot-storage';

src/plugins/persistence/couch/CouchDocument.js

@@ -27,7 +27,6 @@
  * metadata field which contains a subset of information found
  * in the model itself (to support search optimization with
  * CouchDB views.)
- * @memberof platform/persistence/couch
  * @constructor
  * @param {string} id the id under which to store this mode
  * @param {Object} model the model to store

src/plugins/plan/PlanViewConfiguration.js

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import EventEmitter from 'EventEmitter';
+import { EventEmitter } from 'eventemitter3';
 
 export const DEFAULT_CONFIGURATION = {
   clipActivityNames: false,

src/plugins/plan/inspector/components/PlanViewConfiguration.vue

@@ -77,7 +77,7 @@ export default {
   inject: ['openmct'],
   data() {
     const selection = this.openmct.selection.get();
-    /** @type {import('../../../api/objects/ObjectAPI').DomainObject}  */
+    /** @type {import('openmct').DomainObject}  */
     const domainObject = selection[0][0].context.item;
     const planViewConfiguration = markRaw(new PlanViewConfiguration(domainObject, this.openmct));
 

src/plugins/plot/configuration/Model.js

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import EventEmitter from 'eventemitter3';
+import { EventEmitter } from 'eventemitter3';
 import _ from 'lodash';
 
 import eventHelpers from '../lib/eventHelpers.js';

src/plugins/plot/configuration/PlotConfigurationModel.js

@@ -126,7 +126,7 @@ export default class PlotConfigurationModel extends Model {
   }
   /**
    * Retrieve the persisted series config for a given identifier.
-   * @param {import('./PlotSeries').Identifier} identifier
+   * @param {import('openmct').Identifier} identifier
    * @returns {import('./PlotSeries').PlotSeriesModelType=}
    */
   getPersistedSeriesConfig(identifier) {

src/plugins/plot/draw/Draw2D.js

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import EventEmitter from 'EventEmitter';
+import { EventEmitter } from 'eventemitter3';
 
 import eventHelpers from '../lib/eventHelpers.js';
 import { MARKER_SHAPES } from './MarkerShapes.js';
@@ -138,5 +138,4 @@ class Draw2D extends EventEmitter {
     }
   }
 }
-
 export default Draw2D;

src/plugins/plot/draw/DrawWebGL.js

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import EventEmitter from 'EventEmitter';
+import { EventEmitter } from 'eventemitter3';
 
 import eventHelpers from '../lib/eventHelpers.js';
 import { MARKER_SHAPES } from './MarkerShapes.js';
@@ -297,5 +297,4 @@ class DrawWebGL extends EventEmitter {
     }
   }
 }
-
 export default DrawWebGL;

src/plugins/plot/lib/eventHelpers.js

@@ -19,8 +19,10 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/*jscs:disable disallowDanglingUnderscores */
 
+/**
+ * @type {EventHelpers}
+ */
 const helperFunctions = {
   listenTo: function (object, event, callback, context) {
     if (!this._listeningTo) {
@@ -94,7 +96,7 @@ export default helperFunctions;
 
 /**
 @typedef {{
-    listenTo: (object: any, event: any, callback: any, context: any) => void
+    listenTo: (object: any, event: any, callback: any, context: any) => void,
     stopListening: (object: any, event: any, callback: any, context: any) => void
 }} EventHelpers
 */

src/plugins/plot/overlayPlot/pluginSpec.js

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import EventEmitter from 'EventEmitter';
+import { EventEmitter } from 'eventemitter3';
 import mount from 'utils/mount';
 import {
   createMouseEvent,

src/plugins/plot/pluginSpec.js

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import EventEmitter from 'EventEmitter';
+import { EventEmitter } from 'eventemitter3';
 import mount from 'utils/mount';
 import {
   createMouseEvent,

src/plugins/plot/stackedPlot/pluginSpec.js

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import EventEmitter from 'EventEmitter';
+import { EventEmitter } from 'eventemitter3';
 import mount from 'utils/mount';
 import {
   createMouseEvent,

src/plugins/plugins.js

@@ -88,6 +88,9 @@ import ViewLargeAction from './viewLargeAction/plugin.js';
 import WebPagePlugin from './webPage/plugin.js';
 import CompsPlugin from './comps/plugin.js';
 
+/**
+ * @type {Object}
+ */
 const plugins = {};
 
 plugins.example = {};

src/plugins/remoteClock/RemoteClock.js

@@ -149,8 +149,6 @@ export default class RemoteClock extends DefaultClock {
 
   /**
    * Waits for the clock to have a non-default tick value.
-   *
-   * @private
    */
   #waitForReady() {
     const waitForInitialTick = (resolve) => {

src/plugins/summaryWidget/src/Condition.js

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import EventEmitter from 'EventEmitter';
+import { EventEmitter } from 'eventemitter3';
 
 import * as templateHelpers from '../../../utils/template/templateHelpers.js';
 import conditionTemplate from '../res/conditionTemplate.html';

src/plugins/summaryWidget/src/ConditionManager.js

@@ -1,4 +1,4 @@
-import EventEmitter from 'EventEmitter';
+import { EventEmitter } from 'eventemitter3';
 import _ from 'lodash';
 import { makeKeyString } from 'objectUtils';
 

src/plugins/summaryWidget/src/Rule.js

@@ -1,4 +1,4 @@
-import EventEmitter from 'EventEmitter';
+import { EventEmitter } from 'eventemitter3';
 import _ from 'lodash';
 
 import * as templateHelpers from '../../../utils/template/templateHelpers.js';

src/plugins/summaryWidget/src/TestDataItem.js

@@ -1,4 +1,4 @@
-import EventEmitter from 'EventEmitter';
+import { EventEmitter } from 'eventemitter3';
 
 import * as templateHelpers from '../../../utils/template/templateHelpers.js';
 import itemTemplate from '../res/testDataItemTemplate.html';

src/plugins/summaryWidget/src/WidgetDnD.js

@@ -1,4 +1,4 @@
-import EventEmitter from 'EventEmitter';
+import { EventEmitter } from 'eventemitter3';
 
 import * as templateHelpers from '../../../utils/template/templateHelpers.js';
 import ruleImageTemplate from '../res/ruleImageTemplate.html';

src/plugins/summaryWidget/src/input/Palette.js

@@ -1,4 +1,4 @@
-import EventEmitter from 'EventEmitter';
+import { EventEmitter } from 'eventemitter3';
 
 import * as templateHelpers from '../../../../utils/template/templateHelpers.js';
 import paletteTemplate from '../../res/input/paletteTemplate.html';

src/plugins/summaryWidget/src/input/Select.js

@@ -1,4 +1,4 @@
-import EventEmitter from 'EventEmitter';
+import { EventEmitter } from 'eventemitter3';
 
 import * as templateHelpers from '../../../../utils/template/templateHelpers.js';
 import selectTemplate from '../../res/input/selectTemplate.html';

src/plugins/tabs/pluginSpec.js

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import EventEmitter from 'EventEmitter';
+import { EventEmitter } from 'eventemitter3';
 import { createOpenMct, resetApplicationState } from 'utils/testing';
 import { nextTick } from 'vue';
 

src/plugins/telemetryMean/src/MeanTelemetryProviderSpec.js

@@ -611,7 +611,7 @@ describe('The Mean Telemetry Provider', function () {
   }
 
   function createMockTimeApi() {
-    return jasmine.createSpyObj('timeApi', ['getTimeSystem']);
+    return jasmine.createSpyObj('timeApi', ['getTimeSystem', 'setTimeSystem']);
   }
 
   function setTimeSystemTo(timeSystemKey) {

src/plugins/telemetryTable/TelemetryTable.js

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import EventEmitter from 'EventEmitter';
+import { EventEmitter } from 'eventemitter3';
 import _ from 'lodash';
 
 import StalenessUtils from '../../utils/staleness.js';

src/plugins/telemetryTable/TelemetryTableConfiguration.js

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import EventEmitter from 'EventEmitter';
+import { EventEmitter } from 'eventemitter3';
 import _ from 'lodash';
 
 export default class TelemetryTableConfiguration extends EventEmitter {

src/plugins/telemetryTable/collections/TableRowCollection.js

@@ -19,7 +19,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-import EventEmitter from 'EventEmitter';
+import { EventEmitter } from 'eventemitter3';
 import _ from 'lodash';
 
 /**

src/plugins/timeConductor/ConductorInputsFixed.vue

@@ -32,7 +32,7 @@
     <div
       class="c-compact-tc__setting-value u-fade-truncate--lg --no-sep"
       :title="`Start bounds: ${formattedBounds.start}`"
-      aria-label="Start bounds"
+      :aria-label="`Start bounds: ${formattedBounds.start}`"
     >
       {{ formattedBounds.start }}
     </div>
@@ -40,7 +40,7 @@
     <div
       class="c-compact-tc__setting-value u-fade-truncate--lg --no-sep"
       :title="`End bounds: ${formattedBounds.end}`"
-      aria-label="End bounds"
+      :aria-label="`End bounds: ${formattedBounds.end}`"
     >
       {{ formattedBounds.end }}
     </div>

src/plugins/timeConductor/TimePopupFixed.vue

@@ -88,7 +88,7 @@
         <button
           class="c-button icon-x"
           aria-label="Discard changes and close time popup"
-          @click.prevent="handleFormSubmission(true)"
+          @click.prevent="hide"
         ></button>
       </div>
     </div>
@@ -119,25 +119,21 @@ export default {
   },
   emits: ['update', 'dismiss'],
   data() {
-    let timeSystem = this.openmct.time.getTimeSystem();
-    let durationFormatter = this.getFormatter(
-      timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER
-    );
-    let timeFormatter = this.getFormatter(timeSystem.timeFormat);
-    let bounds = this.bounds || this.openmct.time.getBounds();
+    const timeSystem = this.openmct.time.getTimeSystem();
+    const bounds = this.openmct.time.getBounds();
 
     return {
-      timeFormatter,
-      durationFormatter,
+      timeFormatter: this.getFormatter(timeSystem.timeFormat),
+      durationFormatter: this.getFormatter(timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER),
       bounds: {
         start: bounds.start,
         end: bounds.end
       },
       formattedBounds: {
-        start: timeFormatter.format(bounds.start).split(' ')[0],
-        end: timeFormatter.format(bounds.end).split(' ')[0],
-        startTime: durationFormatter.format(Math.abs(bounds.start)),
-        endTime: durationFormatter.format(Math.abs(bounds.end))
+        start: '',
+        end: '',
+        startTime: '',
+        endTime: ''
       },
       isUTCBased: timeSystem.isUTCBased,
       isDisabled: false
@@ -157,9 +153,12 @@ export default {
       deep: true
     }
   },
-  mounted() {
+  created() {
     this.handleNewBounds = _.throttle(this.handleNewBounds, 300);
+  },
+  mounted() {
     this.setTimeSystem(JSON.parse(JSON.stringify(this.openmct.time.getTimeSystem())));
+    this.setViewFromBounds(this.bounds);
   },
   beforeUnmount() {
     this.clearAllValidation();
@@ -173,8 +172,10 @@ export default {
       [this.$refs.startDate, this.$refs.endDate].forEach(this.clearValidationForInput);
     },
     clearValidationForInput(input) {
-      input.setCustomValidity('');
-      input.title = '';
+      if (input) {
+        input.setCustomValidity('');
+        input.title = '';
+      }
     },
     setBounds(bounds) {
       this.bounds = bounds;
@@ -186,7 +187,6 @@ export default {
       this.formattedBounds.endTime = this.durationFormatter.format(Math.abs(bounds.end));
     },
     setTimeSystem(timeSystem) {
-      this.timeSystem = timeSystem;
       this.timeFormatter = this.getFormatter(timeSystem.timeFormat);
       this.durationFormatter = this.getFormatter(
         timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER
@@ -207,39 +207,31 @@ export default {
           `${this.formattedBounds.end} ${this.formattedBounds.endTime}`
         );
 
-        this.$emit('update', {
-          start: start,
-          end: end
-        });
+        this.$emit('update', { start, end });
       }
 
       if (dismiss) {
         this.$emit('dismiss');
-
         return false;
       }
     },
     handleFormSubmission(shouldDismiss) {
-      // Validate bounds before submission
       this.validateAllBounds('startDate');
       this.validateAllBounds('endDate');
 
-      // Submit the form if it's valid
       if (!this.isDisabled) {
         this.setBoundsFromView(shouldDismiss);
       }
     },
     validateAllBounds(ref) {
-      this.isDisabled = false; // Reset isDisabled at the start of validation
+      this.isDisabled = false;
 
       if (!this.areBoundsFormatsValid()) {
         this.isDisabled = true;
         return false;
       }
 
-      let validationResult = {
-        valid: true
-      };
+      let validationResult = { valid: true };
       const currentInput = this.$refs[ref];
 
       return [this.$refs.startDate, this.$refs.endDate].every((input) => {
@@ -255,38 +247,30 @@ export default {
         // const limit = this.getBoundsLimit();
         const limit = false;
 
-        if (this.timeSystem.isUTCBased && limit && boundsValues.end - boundsValues.start > limit) {
+        if (this.isUTCBased && limit && boundsValues.end - boundsValues.start > limit) {
           if (input === currentInput) {
             validationResult = {
               valid: false,
               message: 'Start and end difference exceeds allowable limit'
             };
           }
-        } else {
-          if (input === currentInput) {
-            validationResult = this.openmct.time.validateBounds(boundsValues);
-          }
+        } else if (input === currentInput) {
+          validationResult = this.openmct.time.validateBounds(boundsValues);
         }
 
         return this.handleValidationResults(input, validationResult);
       });
     },
     areBoundsFormatsValid() {
-      let validationResult = {
-        valid: true
-      };
-
       return [this.$refs.startDate, this.$refs.endDate].every((input) => {
         const formattedDate =
           input === this.$refs.startDate
             ? `${this.formattedBounds.start} ${this.formattedBounds.startTime}`
             : `${this.formattedBounds.end} ${this.formattedBounds.endTime}`;
-        if (!this.timeFormatter.validate(formattedDate)) {
-          validationResult = {
-            valid: false,
-            message: 'Invalid date'
-          };
-        }
+
+        const validationResult = this.timeFormatter.validate(formattedDate)
+          ? { valid: true }
+          : { valid: false, message: 'Invalid date' };
 
         return this.handleValidationResults(input, validationResult);
       });

src/plugins/timeline/pluginSpec.js

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import EventEmitter from 'EventEmitter';
+import { EventEmitter } from 'eventemitter3';
 import { nextTick } from 'vue';
 
 import { createOpenMct, resetApplicationState } from '@/utils/testing';

src/plugins/timelist/pluginSpec.js

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import EventEmitter from 'EventEmitter';
+import { EventEmitter } from 'eventemitter3';
 import { createOpenMct, resetApplicationState } from 'utils/testing';
 import { nextTick } from 'vue';
 

src/plugins/timer/plugin.js

@@ -26,6 +26,7 @@ import StartTimerAction from './actions/StartTimerAction.js';
 import StopTimerAction from './actions/StopTimerAction.js';
 import TimerViewProvider from './TimerViewProvider.js';
 
+/** @type {OpenMCTPlugin} */
 export default function TimerPlugin() {
   return function install(openmct) {
     openmct.types.addType('timer', {

src/plugins/utcTimeSystem/DurationFormat.js

@@ -12,7 +12,6 @@ const DATE_FORMATS = [DATE_FORMAT];
  *
  * @implements {Format}
  * @constructor
- * @memberof platform/commonUI/formats
  */
 class DurationFormat {
   constructor() {

src/plugins/utcTimeSystem/UTCTimeFormat.js

@@ -28,7 +28,6 @@ import moment from 'moment';
  *
  * @implements {Format}
  * @constructor
- * @memberof platform/commonUI/formats
  */
 export default class UTCTimeFormat {
   constructor() {