From eeb4f995a4fc08ba6584b3305f8813575694bc89 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Mon, 15 Apr 2024 15:52:35 -0700
Subject: [PATCH 01/71] add missing licensing comment

---
 src/plugins/timeConductor/TimePopupFixed.vue  | 22 +++++++++++++++++++
 .../timeConductor/TimePopupRealtime.vue       | 22 +++++++++++++++++++
 2 files changed, 44 insertions(+)

diff --git a/src/plugins/timeConductor/TimePopupFixed.vue b/src/plugins/timeConductor/TimePopupFixed.vue
index ba70402aa27..25ca2c198dd 100644
--- a/src/plugins/timeConductor/TimePopupFixed.vue
+++ b/src/plugins/timeConductor/TimePopupFixed.vue
@@ -1,3 +1,25 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
 <template>
   <form ref="fixedDeltaInput">
     <div class="c-tc-input-popup__input-grid">
diff --git a/src/plugins/timeConductor/TimePopupRealtime.vue b/src/plugins/timeConductor/TimePopupRealtime.vue
index 2e8915f8491..8b3327d0f4e 100644
--- a/src/plugins/timeConductor/TimePopupRealtime.vue
+++ b/src/plugins/timeConductor/TimePopupRealtime.vue
@@ -1,3 +1,25 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
 <template>
   <form ref="deltaInput">
     <div class="c-tc-input-popup__input-grid">

From 31be2cba3d3611a511478ef7de027cf53ed8f23a Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Mon, 15 Apr 2024 16:04:48 -0700
Subject: [PATCH 02/71] use vue component naming convention

---
 src/plugins/timeConductor/ConductorInputsFixed.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugins/timeConductor/ConductorInputsFixed.vue b/src/plugins/timeConductor/ConductorInputsFixed.vue
index beec6271083..8911b91817e 100644
--- a/src/plugins/timeConductor/ConductorInputsFixed.vue
+++ b/src/plugins/timeConductor/ConductorInputsFixed.vue
@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-  <time-popup-fixed
+  <TimePopupFixed
     v-if="readOnly === false"
     :input-bounds="bounds"
     :input-time-system="timeSystem"

From c8f8a098f2649cc8d4518edd4dc657f93d02d727 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Mon, 15 Apr 2024 18:22:58 -0700
Subject: [PATCH 03/71] script, template, style

---
 .../timeConductor/ConductorComponent.vue      | 105 +++++++++---------
 1 file changed, 53 insertions(+), 52 deletions(-)

diff --git a/src/plugins/timeConductor/ConductorComponent.vue b/src/plugins/timeConductor/ConductorComponent.vue
index 8d0af59d2ca..459e566cecb 100644
--- a/src/plugins/timeConductor/ConductorComponent.vue
+++ b/src/plugins/timeConductor/ConductorComponent.vue
@@ -19,58 +19,6 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<template>
-  <div
-    ref="timeConductorOptionsHolder"
-    class="c-compact-tc is-expanded"
-    :class="[
-      { 'is-zooming': isZooming },
-      { 'is-panning': isPanning },
-      { 'alt-pressed': altPressed },
-      isFixed ? 'is-fixed-mode' : 'is-realtime-mode'
-    ]"
-  >
-    <ConductorModeIcon class="c-conductor__mode-icon" />
-    <div class="c-compact-tc__setting-value u-fade-truncate">
-      <conductor-mode :mode="mode" :read-only="true" />
-      <conductor-clock :read-only="true" />
-      <conductor-time-system :read-only="true" />
-    </div>
-    <conductor-inputs-fixed v-if="isFixed" :input-bounds="viewBounds" :read-only="true" />
-    <conductor-inputs-realtime v-else :input-bounds="viewBounds" :read-only="true" />
-    <conductor-axis
-      v-if="isFixed"
-      class="c-conductor__ticks"
-      :view-bounds="viewBounds"
-      :is-fixed="isFixed"
-      :alt-pressed="altPressed"
-      @end-pan="endPan"
-      @end-zoom="endZoom"
-      @pan-axis="pan"
-      @zoom-axis="zoom"
-    />
-    <div
-      role="button"
-      class="c-not-button c-not-button--compact c-compact-tc__gear icon-gear"
-      aria-label="Time Conductor Settings"
-    ></div>
-
-    <conductor-pop-up
-      v-if="showConductorPopup"
-      ref="conductorPopup"
-      :bottom="false"
-      :position-x="positionX"
-      :position-y="positionY"
-      :is-fixed="isFixed"
-      @popup-loaded="initializePopup"
-      @mode-updated="saveMode"
-      @clock-updated="saveClock"
-      @fixed-bounds-updated="saveFixedBounds"
-      @clock-offsets-updated="saveClockOffsets"
-      @dismiss="clearPopup"
-    />
-  </div>
-</template>
 
 <script>
 import _ from 'lodash';
@@ -259,3 +207,56 @@ export default {
   }
 };
 </script>
+
+<template>
+  <div
+    ref="timeConductorOptionsHolder"
+    class="c-compact-tc is-expanded"
+    :class="[
+      { 'is-zooming': isZooming },
+      { 'is-panning': isPanning },
+      { 'alt-pressed': altPressed },
+      isFixed ? 'is-fixed-mode' : 'is-realtime-mode'
+    ]"
+  >
+    <ConductorModeIcon class="c-conductor__mode-icon" />
+    <div class="c-compact-tc__setting-value u-fade-truncate">
+      <conductor-mode :mode="mode" :read-only="true" />
+      <conductor-clock :read-only="true" />
+      <conductor-time-system :read-only="true" />
+    </div>
+    <conductor-inputs-fixed v-if="isFixed" :input-bounds="viewBounds" :read-only="true" />
+    <conductor-inputs-realtime v-else :input-bounds="viewBounds" :read-only="true" />
+    <conductor-axis
+      v-if="isFixed"
+      class="c-conductor__ticks"
+      :view-bounds="viewBounds"
+      :is-fixed="isFixed"
+      :alt-pressed="altPressed"
+      @end-pan="endPan"
+      @end-zoom="endZoom"
+      @pan-axis="pan"
+      @zoom-axis="zoom"
+    />
+    <div
+      role="button"
+      class="c-not-button c-not-button--compact c-compact-tc__gear icon-gear"
+      aria-label="Time Conductor Settings"
+    ></div>
+
+    <conductor-pop-up
+      v-if="showConductorPopup"
+      ref="conductorPopup"
+      :bottom="false"
+      :position-x="positionX"
+      :position-y="positionY"
+      :is-fixed="isFixed"
+      @popup-loaded="initializePopup"
+      @mode-updated="saveMode"
+      @clock-updated="saveClock"
+      @fixed-bounds-updated="saveFixedBounds"
+      @clock-offsets-updated="saveClockOffsets"
+      @dismiss="clearPopup"
+    />
+  </div>
+</template>

From f56a8a1f5d8b3a1c7d6a3928dcfbbe5a577c4f9d Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Mon, 15 Apr 2024 19:43:22 -0700
Subject: [PATCH 04/71] Revert "script, template, style"

This reverts commit c8f8a098f2649cc8d4518edd4dc657f93d02d727.
---
 .../timeConductor/ConductorComponent.vue      | 105 +++++++++---------
 1 file changed, 52 insertions(+), 53 deletions(-)

diff --git a/src/plugins/timeConductor/ConductorComponent.vue b/src/plugins/timeConductor/ConductorComponent.vue
index 459e566cecb..8d0af59d2ca 100644
--- a/src/plugins/timeConductor/ConductorComponent.vue
+++ b/src/plugins/timeConductor/ConductorComponent.vue
@@ -19,6 +19,58 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
+<template>
+  <div
+    ref="timeConductorOptionsHolder"
+    class="c-compact-tc is-expanded"
+    :class="[
+      { 'is-zooming': isZooming },
+      { 'is-panning': isPanning },
+      { 'alt-pressed': altPressed },
+      isFixed ? 'is-fixed-mode' : 'is-realtime-mode'
+    ]"
+  >
+    <ConductorModeIcon class="c-conductor__mode-icon" />
+    <div class="c-compact-tc__setting-value u-fade-truncate">
+      <conductor-mode :mode="mode" :read-only="true" />
+      <conductor-clock :read-only="true" />
+      <conductor-time-system :read-only="true" />
+    </div>
+    <conductor-inputs-fixed v-if="isFixed" :input-bounds="viewBounds" :read-only="true" />
+    <conductor-inputs-realtime v-else :input-bounds="viewBounds" :read-only="true" />
+    <conductor-axis
+      v-if="isFixed"
+      class="c-conductor__ticks"
+      :view-bounds="viewBounds"
+      :is-fixed="isFixed"
+      :alt-pressed="altPressed"
+      @end-pan="endPan"
+      @end-zoom="endZoom"
+      @pan-axis="pan"
+      @zoom-axis="zoom"
+    />
+    <div
+      role="button"
+      class="c-not-button c-not-button--compact c-compact-tc__gear icon-gear"
+      aria-label="Time Conductor Settings"
+    ></div>
+
+    <conductor-pop-up
+      v-if="showConductorPopup"
+      ref="conductorPopup"
+      :bottom="false"
+      :position-x="positionX"
+      :position-y="positionY"
+      :is-fixed="isFixed"
+      @popup-loaded="initializePopup"
+      @mode-updated="saveMode"
+      @clock-updated="saveClock"
+      @fixed-bounds-updated="saveFixedBounds"
+      @clock-offsets-updated="saveClockOffsets"
+      @dismiss="clearPopup"
+    />
+  </div>
+</template>
 
 <script>
 import _ from 'lodash';
@@ -207,56 +259,3 @@ export default {
   }
 };
 </script>
-
-<template>
-  <div
-    ref="timeConductorOptionsHolder"
-    class="c-compact-tc is-expanded"
-    :class="[
-      { 'is-zooming': isZooming },
-      { 'is-panning': isPanning },
-      { 'alt-pressed': altPressed },
-      isFixed ? 'is-fixed-mode' : 'is-realtime-mode'
-    ]"
-  >
-    <ConductorModeIcon class="c-conductor__mode-icon" />
-    <div class="c-compact-tc__setting-value u-fade-truncate">
-      <conductor-mode :mode="mode" :read-only="true" />
-      <conductor-clock :read-only="true" />
-      <conductor-time-system :read-only="true" />
-    </div>
-    <conductor-inputs-fixed v-if="isFixed" :input-bounds="viewBounds" :read-only="true" />
-    <conductor-inputs-realtime v-else :input-bounds="viewBounds" :read-only="true" />
-    <conductor-axis
-      v-if="isFixed"
-      class="c-conductor__ticks"
-      :view-bounds="viewBounds"
-      :is-fixed="isFixed"
-      :alt-pressed="altPressed"
-      @end-pan="endPan"
-      @end-zoom="endZoom"
-      @pan-axis="pan"
-      @zoom-axis="zoom"
-    />
-    <div
-      role="button"
-      class="c-not-button c-not-button--compact c-compact-tc__gear icon-gear"
-      aria-label="Time Conductor Settings"
-    ></div>
-
-    <conductor-pop-up
-      v-if="showConductorPopup"
-      ref="conductorPopup"
-      :bottom="false"
-      :position-x="positionX"
-      :position-y="positionY"
-      :is-fixed="isFixed"
-      @popup-loaded="initializePopup"
-      @mode-updated="saveMode"
-      @clock-updated="saveClock"
-      @fixed-bounds-updated="saveFixedBounds"
-      @clock-offsets-updated="saveClockOffsets"
-      @dismiss="clearPopup"
-    />
-  </div>
-</template>

From ff605a0a0db9f0013acce3928f4cf17af72027d3 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Tue, 16 Apr 2024 16:44:32 -0700
Subject: [PATCH 05/71] create useTimeSystem composable

---
 src/plugins/timeConductor/ConductorComponent.vue | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/plugins/timeConductor/ConductorComponent.vue b/src/plugins/timeConductor/ConductorComponent.vue
index 8d0af59d2ca..7c0ae34149a 100644
--- a/src/plugins/timeConductor/ConductorComponent.vue
+++ b/src/plugins/timeConductor/ConductorComponent.vue
@@ -74,6 +74,7 @@
 
 <script>
 import _ from 'lodash';
+import { inject, onMounted, provide } from 'vue';
 
 import {
   FIXED_MODE_KEY,
@@ -90,7 +91,7 @@ import ConductorModeIcon from './ConductorModeIcon.vue';
 import ConductorPopUp from './ConductorPopUp.vue';
 import conductorPopUpManager from './conductorPopUpManager.js';
 import ConductorTimeSystem from './ConductorTimeSystem.vue';
-
+import { useTimeSystem } from './useTimeSystem.js';
 const DEFAULT_DURATION_FORMATTER = 'duration';
 
 export default {
@@ -106,6 +107,16 @@ export default {
   },
   mixins: [conductorPopUpManager],
   inject: ['openmct', 'configuration'],
+  setup() {
+    const openmct = inject('openmct');
+    const { observeTimeSystem, timeSystemKey } = useTimeSystem(openmct);
+
+    onMounted(() => observeTimeSystem());
+
+    provide('timeSystemKey', timeSystemKey);
+
+    return { timeSystemKey };
+  },
   data() {
     const isFixed = this.openmct.time.isFixed();
     const bounds = this.openmct.time.getBounds();

From eeda4c62fcfd188de68a30b03eb799c000e35bb7 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Wed, 17 Apr 2024 10:46:34 -0700
Subject: [PATCH 06/71] forgot to push useTimeSystem

---
 .../timeConductor/ConductorComponent.vue      |  1 +
 src/plugins/timeConductor/useTimeSystem.js    | 47 +++++++++++++++++++
 2 files changed, 48 insertions(+)
 create mode 100644 src/plugins/timeConductor/useTimeSystem.js

diff --git a/src/plugins/timeConductor/ConductorComponent.vue b/src/plugins/timeConductor/ConductorComponent.vue
index 7c0ae34149a..46ffe5bcf65 100644
--- a/src/plugins/timeConductor/ConductorComponent.vue
+++ b/src/plugins/timeConductor/ConductorComponent.vue
@@ -92,6 +92,7 @@ import ConductorPopUp from './ConductorPopUp.vue';
 import conductorPopUpManager from './conductorPopUpManager.js';
 import ConductorTimeSystem from './ConductorTimeSystem.vue';
 import { useTimeSystem } from './useTimeSystem.js';
+
 const DEFAULT_DURATION_FORMATTER = 'duration';
 
 export default {
diff --git a/src/plugins/timeConductor/useTimeSystem.js b/src/plugins/timeConductor/useTimeSystem.js
new file mode 100644
index 00000000000..e52b623461b
--- /dev/null
+++ b/src/plugins/timeConductor/useTimeSystem.js
@@ -0,0 +1,47 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { onBeforeUnmount, ref } from 'vue';
+
+export function useTimeSystem(openmct, options) {
+  let stopObservingTimeSystem;
+
+  const currentTimeSystem = openmct.time.getTimeSystem();
+
+  const timeSystemKey = ref(currentTimeSystem.key);
+
+  onBeforeUnmount(() => stopObservingTimeSystem?.());
+
+  function observeTimeSystem() {
+    openmct.time.on('timeSystemChanged', updateTimeSystem);
+    stopObservingTimeSystem = () => openmct.time.off('timeSystem', updateTimeSystem);
+  }
+
+  function updateTimeSystem(timeSystem) {
+    timeSystemKey.value = timeSystem.key;
+  }
+
+  return {
+    observeTimeSystem,
+    timeSystemKey
+  };
+}

From d0a77637c0c82e65a6a70089912030bd3b3d2751 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Wed, 17 Apr 2024 11:22:31 -0700
Subject: [PATCH 07/71] extend useTimeSystem to return reactive formatters

---
 src/plugins/timeConductor/useTimeSystem.js | 34 +++++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/plugins/timeConductor/useTimeSystem.js b/src/plugins/timeConductor/useTimeSystem.js
index e52b623461b..982f8480088 100644
--- a/src/plugins/timeConductor/useTimeSystem.js
+++ b/src/plugins/timeConductor/useTimeSystem.js
@@ -22,12 +22,31 @@
 
 import { onBeforeUnmount, ref } from 'vue';
 
+const DEFAULT_DURATION_FORMATTER = 'duration';
+
+/**
+ * Provides a reactive destructuring of the component's current time system,
+ * as well as a function to observe and update the time system,
+ * which automatically stops observing when the component is unmounted.
+ *
+ * @param {OpenMCT} openmct the Open MCT API
+ * @returns {{
+ *   observeTimeSystem: () => void,
+ *   timeSystemKey: import('vue').Ref<string>,
+ *   timeSystemFormatter: import('vue').Ref<() => void>,
+ *   timeSystemDurationFormatter: import('vue').Ref<() => void>
+ * }}
+ */
 export function useTimeSystem(openmct, options) {
   let stopObservingTimeSystem;
 
   const currentTimeSystem = openmct.time.getTimeSystem();
 
   const timeSystemKey = ref(currentTimeSystem.key);
+  const timeSystemFormatter = ref(getFormatter(openmct, currentTimeSystem.timeFormat));
+  const timeSystemDurationFormatter = ref(
+    getFormatter(openmct, currentTimeSystem.durationFormat || DEFAULT_DURATION_FORMATTER)
+  );
 
   onBeforeUnmount(() => stopObservingTimeSystem?.());
 
@@ -38,10 +57,23 @@ export function useTimeSystem(openmct, options) {
 
   function updateTimeSystem(timeSystem) {
     timeSystemKey.value = timeSystem.key;
+    timeSystemFormatter.value = getFormatter(openmct, timeSystem.timeFormat);
+    timeSystemDurationFormatter.value = getFormatter(
+      openmct,
+      timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER
+    );
   }
 
   return {
     observeTimeSystem,
-    timeSystemKey
+    timeSystemKey,
+    timeSystemFormatter,
+    timeSystemDurationFormatter
   };
 }
+
+function getFormatter(openmct, key) {
+  return openmct.telemetry.getValueFormatter({
+    format: key
+  }).formatter;
+}

From a11fcc3231f072731a3ae0c155e4ed7471ddb27d Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Wed, 17 Apr 2024 11:32:10 -0700
Subject: [PATCH 08/71] return reactive isUTCBased

---
 src/plugins/timeConductor/useTimeSystem.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/plugins/timeConductor/useTimeSystem.js b/src/plugins/timeConductor/useTimeSystem.js
index 982f8480088..2b97d2b3078 100644
--- a/src/plugins/timeConductor/useTimeSystem.js
+++ b/src/plugins/timeConductor/useTimeSystem.js
@@ -34,7 +34,8 @@ const DEFAULT_DURATION_FORMATTER = 'duration';
  *   observeTimeSystem: () => void,
  *   timeSystemKey: import('vue').Ref<string>,
  *   timeSystemFormatter: import('vue').Ref<() => void>,
- *   timeSystemDurationFormatter: import('vue').Ref<() => void>
+ *   timeSystemDurationFormatter: import('vue').Ref<() => void>,
+ *   isTimeSystemUTCBased: import('vue').Ref<boolean>
  * }}
  */
 export function useTimeSystem(openmct, options) {
@@ -47,6 +48,7 @@ export function useTimeSystem(openmct, options) {
   const timeSystemDurationFormatter = ref(
     getFormatter(openmct, currentTimeSystem.durationFormat || DEFAULT_DURATION_FORMATTER)
   );
+  const isTimeSystemUTCBased = ref(currentTimeSystem.isUTCBased);
 
   onBeforeUnmount(() => stopObservingTimeSystem?.());
 
@@ -62,13 +64,15 @@ export function useTimeSystem(openmct, options) {
       openmct,
       timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER
     );
+    isTimeSystemUTCBased.value = timeSystem.isUTCBased;
   }
 
   return {
     observeTimeSystem,
     timeSystemKey,
     timeSystemFormatter,
-    timeSystemDurationFormatter
+    timeSystemDurationFormatter,
+    isTimeSystemUTCBased
   };
 }
 

From 5adc86c71e401e2c134d2132270d286eda74b026 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Wed, 17 Apr 2024 14:16:25 -0700
Subject: [PATCH 09/71] add useTimeMode composable fix listener in
 useTimeSystem

---
 src/plugins/timeConductor/useTimeMode.js   | 66 ++++++++++++++++++++++
 src/plugins/timeConductor/useTimeSystem.js |  4 +-
 2 files changed, 68 insertions(+), 2 deletions(-)
 create mode 100644 src/plugins/timeConductor/useTimeMode.js

diff --git a/src/plugins/timeConductor/useTimeMode.js b/src/plugins/timeConductor/useTimeMode.js
new file mode 100644
index 00000000000..8ac76b770c3
--- /dev/null
+++ b/src/plugins/timeConductor/useTimeMode.js
@@ -0,0 +1,66 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { computed, onBeforeUnmount, ref } from 'vue';
+
+import {
+  FIXED_MODE_KEY,
+  REALTIME_MODE_KEY,
+  TIME_CONTEXT_EVENTS
+} from '../../api/time/constants.js';
+
+/**
+ * Provides reactive `isFixedTimeMode` and `isRealTimeMode`,
+ * as well as a function to observe and update the component's time mode,
+ * which automatically stops observing when the component is unmounted.
+ *
+ * @param {OpenMCT} openmct the Open MCT API
+ * @returns {{
+ *   observeTimeMode: () => void,
+ *   isFixedTimeMode: import('vue').Ref<boolean>,
+ *   isRealTimeMode: import('vue').Ref<boolean>
+ * }}
+ */
+export function useTimeMode(openmct, options) {
+  let stopObservingTimeMode;
+
+  const timeMode = ref(openmct.time.getMode());
+  const isFixedTimeMode = computed(() => timeMode.value === FIXED_MODE_KEY);
+  const isRealTimeMode = computed(() => timeMode.value === REALTIME_MODE_KEY);
+
+  onBeforeUnmount(() => stopObservingTimeMode?.());
+
+  function observeTimeMode() {
+    openmct.time.on(TIME_CONTEXT_EVENTS.modeChanged, updateTimeMode);
+    stopObservingTimeMode = () => openmct.time.off(TIME_CONTEXT_EVENTS.modeChanged, updateTimeMode);
+  }
+
+  function updateTimeMode(_timeMode) {
+    timeMode.value = _timeMode;
+  }
+
+  return {
+    observeTimeMode,
+    isFixedTimeMode,
+    isRealTimeMode
+  };
+}
diff --git a/src/plugins/timeConductor/useTimeSystem.js b/src/plugins/timeConductor/useTimeSystem.js
index 2b97d2b3078..6092376f841 100644
--- a/src/plugins/timeConductor/useTimeSystem.js
+++ b/src/plugins/timeConductor/useTimeSystem.js
@@ -26,7 +26,7 @@ const DEFAULT_DURATION_FORMATTER = 'duration';
 
 /**
  * Provides a reactive destructuring of the component's current time system,
- * as well as a function to observe and update the time system,
+ * as well as a function to observe and update the component's time system,
  * which automatically stops observing when the component is unmounted.
  *
  * @param {OpenMCT} openmct the Open MCT API
@@ -54,7 +54,7 @@ export function useTimeSystem(openmct, options) {
 
   function observeTimeSystem() {
     openmct.time.on('timeSystemChanged', updateTimeSystem);
-    stopObservingTimeSystem = () => openmct.time.off('timeSystem', updateTimeSystem);
+    stopObservingTimeSystem = () => openmct.time.off('timeSystemChanged', updateTimeSystem);
   }
 
   function updateTimeSystem(timeSystem) {

From 15126fd5505eb0097e66919956b95980a9a4e12e Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Wed, 17 Apr 2024 16:12:36 -0700
Subject: [PATCH 10/71] add useTimeBounds composable

---
 src/plugins/timeConductor/useTimeBounds.js | 64 ++++++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 src/plugins/timeConductor/useTimeBounds.js

diff --git a/src/plugins/timeConductor/useTimeBounds.js b/src/plugins/timeConductor/useTimeBounds.js
new file mode 100644
index 00000000000..0c267b69c8b
--- /dev/null
+++ b/src/plugins/timeConductor/useTimeBounds.js
@@ -0,0 +1,64 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { onBeforeUnmount, ref, shallowRef } from 'vue';
+
+import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
+import throttle from '../../utils/throttle.js';
+
+/**
+ * Provides reactive `bounds` and `offsets`,
+ * as well as a function to observe when bounds and update the component's time mode,
+ * which automatically stops observing when the component is unmounted.
+ *
+ * @param {OpenMCT} openmct the Open MCT API
+ * @returns {{
+ *   observeTimeBounds: () => void,
+ *   bounds: import('vue').Ref<object>,
+ *   isTick: import('vue').Ref<boolean>
+ * }}
+ */
+export function useTimeBounds(openmct, options) {
+  let stopObservingTimeBounds;
+
+  const bounds = shallowRef(openmct.time.getBounds());
+  const isTick = ref(false);
+
+  onBeforeUnmount(() => stopObservingTimeBounds?.());
+
+  function observeTimeBounds(milliseconds = 300) {
+    openmct.time.on(TIME_CONTEXT_EVENTS.boundsChanged, throttle(updateTimeBounds), milliseconds);
+    stopObservingTimeBounds = () =>
+      openmct.time.off(TIME_CONTEXT_EVENTS.boundsChanged, throttle(updateTimeBounds), milliseconds);
+  }
+
+  function updateTimeBounds(_timeBounds, _isTick) {
+    bounds.value = _timeBounds;
+    isTick.value = _isTick;
+  }
+
+  return {
+    observeTimeBounds,
+    isTick,
+    bounds
+  };
+}

From e624821ab178c62992ba8635a08adb4ec48cf5c2 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Wed, 17 Apr 2024 17:15:40 -0700
Subject: [PATCH 11/71] add useClockOffsets composable documentation update to
 useTimeBounds

---
 src/plugins/timeConductor/useClockOffsets.js | 59 ++++++++++++++++++++
 src/plugins/timeConductor/useTimeBounds.js   |  4 +-
 2 files changed, 61 insertions(+), 2 deletions(-)
 create mode 100644 src/plugins/timeConductor/useClockOffsets.js

diff --git a/src/plugins/timeConductor/useClockOffsets.js b/src/plugins/timeConductor/useClockOffsets.js
new file mode 100644
index 00000000000..9f02a23b0a6
--- /dev/null
+++ b/src/plugins/timeConductor/useClockOffsets.js
@@ -0,0 +1,59 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { onBeforeUnmount, shallowRef } from 'vue';
+
+import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
+
+/**
+ * Provides reactive `offsets`,
+ * as well as a function to observe and update offsets changes,
+ * which automatically stops observing when the component is unmounted.
+ *
+ * @param {OpenMCT} openmct the Open MCT API
+ * @returns {{
+ *   observeClockOffsets: () => void,
+ *   offsets: import('vue').Ref<object>,
+ * }}
+ */
+export function useClockOffsets(openmct, options) {
+  let stopObservingClockOffsets;
+
+  const offsets = shallowRef(openmct.time.getClockOffsets());
+
+  onBeforeUnmount(() => stopObservingClockOffsets?.());
+
+  function observeClockOffsets() {
+    openmct.time.on(TIME_CONTEXT_EVENTS.clockOffsetsChanged, updateClockOffsets);
+    stopObservingClockOffsets = () =>
+      openmct.time.off(TIME_CONTEXT_EVENTS.clockOffsetsChanged, updateClockOffsets);
+  }
+
+  function updateClockOffsets(_offsets) {
+    offsets.value = _offsets;
+  }
+
+  return {
+    observeClockOffsets,
+    offsets
+  };
+}
diff --git a/src/plugins/timeConductor/useTimeBounds.js b/src/plugins/timeConductor/useTimeBounds.js
index 0c267b69c8b..4a5b5c9078a 100644
--- a/src/plugins/timeConductor/useTimeBounds.js
+++ b/src/plugins/timeConductor/useTimeBounds.js
@@ -26,8 +26,8 @@ import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
 import throttle from '../../utils/throttle.js';
 
 /**
- * Provides reactive `bounds` and `offsets`,
- * as well as a function to observe when bounds and update the component's time mode,
+ * Provides reactive `bounds`,
+ * as well as a function to observe and update bounds changes,
  * which automatically stops observing when the component is unmounted.
  *
  * @param {OpenMCT} openmct the Open MCT API

From 00c9d2920b3de474f784145c92ebc800cf83e9f1 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Fri, 19 Apr 2024 15:28:17 -0700
Subject: [PATCH 12/71] WIP change replication in time api calls to use
 composables many things broken will need refactor to account for independent
 time conductor

---
 src/plugins/timeConductor/ConductorAxis.vue   |  23 +--
 .../timeConductor/ConductorComponent.vue      | 162 +++++++-----------
 .../timeConductor/ConductorInputsFixed.vue    |   7 -
 src/plugins/timeConductor/ConductorMode.vue   |  19 +-
 src/plugins/timeConductor/ConductorPopUp.vue  |  20 +--
 src/plugins/timeConductor/DatePicker.vue      |   4 -
 src/plugins/timeConductor/TimePopupFixed.vue  | 117 ++++---------
 src/plugins/timeConductor/useTimeMode.js      |   2 +
 8 files changed, 113 insertions(+), 241 deletions(-)

diff --git a/src/plugins/timeConductor/ConductorAxis.vue b/src/plugins/timeConductor/ConductorAxis.vue
index bc824d08a1b..688973799af 100644
--- a/src/plugins/timeConductor/ConductorAxis.vue
+++ b/src/plugins/timeConductor/ConductorAxis.vue
@@ -41,21 +41,16 @@ import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
 import utcMultiTimeFormat from './utcMultiTimeFormat.js';
 
 const PADDING = 1;
-const DEFAULT_DURATION_FORMATTER = 'duration';
 const PIXELS_PER_TICK = 100;
 const PIXELS_PER_TICK_WIDE = 200;
 
 export default {
-  inject: ['openmct'],
+  inject: ['openmct', 'isFixedTimeMode'],
   props: {
     viewBounds: {
       type: Object,
       required: true
     },
-    isFixed: {
-      type: Boolean,
-      required: true
-    },
     altPressed: {
       type: Boolean,
       required: true
@@ -198,22 +193,8 @@ export default {
       this.axisElement.call(this.xAxis);
       this.setScale();
     },
-    getActiveFormatter() {
-      let timeSystem = this.openmct.time.getTimeSystem();
-
-      if (this.isFixed) {
-        return this.getFormatter(timeSystem.timeFormat);
-      } else {
-        return this.getFormatter(timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER);
-      }
-    },
-    getFormatter(key) {
-      return this.openmct.telemetry.getValueFormatter({
-        format: key
-      }).formatter;
-    },
     dragStart($event) {
-      if (this.isFixed) {
+      if (this.isFixedTimeMode) {
         this.dragStartX = $event.clientX;
 
         if (this.altPressed) {
diff --git a/src/plugins/timeConductor/ConductorComponent.vue b/src/plugins/timeConductor/ConductorComponent.vue
index 46ffe5bcf65..3d111b40029 100644
--- a/src/plugins/timeConductor/ConductorComponent.vue
+++ b/src/plugins/timeConductor/ConductorComponent.vue
@@ -27,22 +27,21 @@
       { 'is-zooming': isZooming },
       { 'is-panning': isPanning },
       { 'alt-pressed': altPressed },
-      isFixed ? 'is-fixed-mode' : 'is-realtime-mode'
+      isFixedTimeMode ? 'is-fixed-mode' : 'is-realtime-mode'
     ]"
   >
     <ConductorModeIcon class="c-conductor__mode-icon" />
     <div class="c-compact-tc__setting-value u-fade-truncate">
-      <conductor-mode :mode="mode" :read-only="true" />
+      <conductor-mode :read-only="true" />
       <conductor-clock :read-only="true" />
       <conductor-time-system :read-only="true" />
     </div>
-    <conductor-inputs-fixed v-if="isFixed" :input-bounds="viewBounds" :read-only="true" />
+    <conductor-inputs-fixed v-if="isFixedTimeMode" :input-bounds="viewBounds" :read-only="true" />
     <conductor-inputs-realtime v-else :input-bounds="viewBounds" :read-only="true" />
     <conductor-axis
-      v-if="isFixed"
+      v-if="isFixedTimeMode"
       class="c-conductor__ticks"
       :view-bounds="viewBounds"
-      :is-fixed="isFixed"
       :alt-pressed="altPressed"
       @end-pan="endPan"
       @end-zoom="endZoom"
@@ -61,9 +60,7 @@
       :bottom="false"
       :position-x="positionX"
       :position-y="positionY"
-      :is-fixed="isFixed"
       @popup-loaded="initializePopup"
-      @mode-updated="saveMode"
       @clock-updated="saveClock"
       @fixed-bounds-updated="saveFixedBounds"
       @clock-offsets-updated="saveClockOffsets"
@@ -73,15 +70,9 @@
 </template>
 
 <script>
-import _ from 'lodash';
 import { inject, onMounted, provide } from 'vue';
 
-import {
-  FIXED_MODE_KEY,
-  MODES,
-  REALTIME_MODE_KEY,
-  TIME_CONTEXT_EVENTS
-} from '../../api/time/constants.js';
+import { FIXED_MODE_KEY, REALTIME_MODE_KEY } from '../../api/time/constants.js';
 import ConductorAxis from './ConductorAxis.vue';
 import ConductorClock from './ConductorClock.vue';
 import ConductorInputsFixed from './ConductorInputsFixed.vue';
@@ -91,10 +82,11 @@ import ConductorModeIcon from './ConductorModeIcon.vue';
 import ConductorPopUp from './ConductorPopUp.vue';
 import conductorPopUpManager from './conductorPopUpManager.js';
 import ConductorTimeSystem from './ConductorTimeSystem.vue';
+import { useClockOffsets } from './useClockOffsets.js';
+import { useTimeBounds } from './useTimeBounds.js';
+import { useTimeMode } from './useTimeMode.js';
 import { useTimeSystem } from './useTimeSystem.js';
 
-const DEFAULT_DURATION_FORMATTER = 'duration';
-
 export default {
   components: {
     ConductorTimeSystem,
@@ -110,46 +102,47 @@ export default {
   inject: ['openmct', 'configuration'],
   setup() {
     const openmct = inject('openmct');
-    const { observeTimeSystem, timeSystemKey } = useTimeSystem(openmct);
+    const { observeTimeSystem, timeSystemFormatter, timeSystemDurationFormatter } = useTimeSystem(openmct);
+    const { observeTimeMode, timeMode, isFixedTimeMode, isRealTimeMode } = useTimeMode(openmct);
+    const { observeTimeBounds, bounds, isTick } = useTimeBounds(openmct);
+    const { observeClockOffsets, offsets } = useClockOffsets(openmct);
 
-    onMounted(() => observeTimeSystem());
+    onMounted(() => {
+      observeTimeSystem();
+      observeTimeMode();
+      observeTimeBounds();
+      observeClockOffsets();
+    });
 
-    provide('timeSystemKey', timeSystemKey);
+    provide('timeSystemFormatter', timeSystemFormatter);
+    provide('timeSystemDurationFormatter', timeSystemDurationFormatter);
+    provide('timeMode', timeMode);
+    provide('isFixedTimeMode', isFixedTimeMode);
+    provide('isRealTimeMode', isRealTimeMode);
+    provide('bounds', bounds);
+    provide('isTick', isTick);
+    provide('offsets', offsets);
 
-    return { timeSystemKey };
+    return {
+      timeSystemFormatter,
+      timeSystemDurationFormatter,
+      isFixedTimeMode,
+      isRealTimeMode,
+      bounds,
+      isTick
+    };
   },
   data() {
-    const isFixed = this.openmct.time.isFixed();
-    const bounds = this.openmct.time.getBounds();
-    const offsets = this.openmct.time.getClockOffsets();
-    const timeSystem = this.openmct.time.getTimeSystem();
-    const timeFormatter = this.getFormatter(timeSystem.timeFormat);
-    const durationFormatter = this.getFormatter(
-      timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER
-    );
 
     return {
-      timeSystem,
-      timeFormatter,
-      durationFormatter,
-      offsets: {
-        start: offsets && durationFormatter.format(Math.abs(offsets.start)),
-        end: offsets && durationFormatter.format(Math.abs(offsets.end))
-      },
-      bounds: {
-        start: bounds.start,
-        end: bounds.end
-      },
-      formattedBounds: {
-        start: timeFormatter.format(bounds.start),
-        end: timeFormatter.format(bounds.end)
-      },
+      // offsets: {
+      //   start: offsets && this.durationFormatter.format(Math.abs(offsets.start)),
+      //   end: offsets && this.durationFormatter.format(Math.abs(offsets.end))
+      // },
       viewBounds: {
-        start: bounds.start,
-        end: bounds.end
+        start: this.bounds.start,
+        end: this.bounds.end
       },
-      isFixed,
-      isUTCBased: timeSystem.isUTCBased,
       showDatePicker: false,
       showConductorPopup: false,
       altPressed: false,
@@ -158,38 +151,33 @@ export default {
     };
   },
   computed: {
+    formattedBounds() {
+      return {
+        start: this.timeSystemFormatter.format(this.bounds.start),
+        end: this.timeSystemFormatter.format(this.bounds.end)
+      };
+    },
     mode() {
-      return this.isFixed ? FIXED_MODE_KEY : REALTIME_MODE_KEY;
+      return this.isFixedTimeMode ? FIXED_MODE_KEY : REALTIME_MODE_KEY;
+    }
+  },
+  watch: {
+    bounds: {
+      handler() {
+        this.setViewBounds(this.bounds);
+      },
+      deep: true
     }
   },
   mounted() {
     document.addEventListener('keydown', this.handleKeyDown);
     document.addEventListener('keyup', this.handleKeyUp);
-
-    this.setTimeSystem(this.copy(this.openmct.time.getTimeSystem()));
-
-    this.openmct.time.on(TIME_CONTEXT_EVENTS.boundsChanged, _.throttle(this.handleNewBounds, 300));
-    this.openmct.time.on(TIME_CONTEXT_EVENTS.timeSystemChanged, this.setTimeSystem);
-    this.openmct.time.on(TIME_CONTEXT_EVENTS.modeChanged, this.setMode);
   },
   beforeUnmount() {
     document.removeEventListener('keydown', this.handleKeyDown);
     document.removeEventListener('keyup', this.handleKeyUp);
-
-    this.openmct.time.off(TIME_CONTEXT_EVENTS.boundsChanged, _.throttle(this.handleNewBounds, 300));
-    this.openmct.time.off(TIME_CONTEXT_EVENTS.timeSystemChanged, this.setTimeSystem);
-    this.openmct.time.off(TIME_CONTEXT_EVENTS.modeChanged, this.setMode);
   },
   methods: {
-    handleNewBounds(bounds, isTick) {
-      if (this.openmct.time.isRealTime() || !isTick) {
-        this.setBounds(bounds);
-        this.setViewFromBounds(bounds);
-      }
-    },
-    setBounds(bounds) {
-      this.bounds = bounds;
-    },
     handleKeyDown(event) {
       if (event.key === 'Alt') {
         this.altPressed = true;
@@ -202,7 +190,7 @@ export default {
     },
     pan(bounds) {
       this.isPanning = true;
-      this.setViewFromBounds(bounds);
+      this.setViewBounds(bounds);
     },
     endPan(bounds) {
       this.isPanning = false;
@@ -224,49 +212,23 @@ export default {
       if (bounds) {
         this.openmct.time.setBounds(bounds);
       } else {
-        this.setViewFromBounds(this.bounds);
+        this.setViewBounds(this.bounds);
       }
     },
-    setTimeSystem(timeSystem) {
-      this.timeSystem = timeSystem;
-      this.timeFormatter = this.getFormatter(timeSystem.timeFormat);
-      this.durationFormatter = this.getFormatter(
-        timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER
-      );
-      this.isUTCBased = timeSystem.isUTCBased;
-    },
-    setMode() {
-      this.isFixed = this.openmct.time.isFixed();
-    },
-    setViewFromBounds(bounds) {
-      this.formattedBounds.start = this.timeFormatter.format(bounds.start);
-      this.formattedBounds.end = this.timeFormatter.format(bounds.end);
+    setViewBounds(bounds) {
+      // this.formattedBounds.start = this.timeFormatter.format(bounds.start);
+      // this.formattedBounds.end = this.timeFormatter.format(bounds.end);
       this.viewBounds.start = bounds.start;
       this.viewBounds.end = bounds.end;
     },
-    getFormatter(key) {
-      return this.openmct.telemetry.getValueFormatter({
-        format: key
-      }).formatter;
-    },
-    getBoundsForMode(mode) {
-      const isRealTime = mode === MODES.realtime;
-      return isRealTime ? this.openmct.time.getClockOffsets() : this.openmct.time.getBounds();
-    },
     saveFixedBounds(bounds) {
-      this.openmct.time.setBounds(bounds);
+      // this.openmct.time.setBounds(bounds);
     },
     saveClockOffsets(offsets) {
-      this.openmct.time.setClockOffsets(offsets);
+      // this.openmct.time.setClockOffsets(offsets);
     },
     saveClock(clockOptions) {
       this.openmct.time.setClock(clockOptions.clockKey);
-    },
-    saveMode(mode) {
-      this.openmct.time.setMode(mode, this.getBoundsForMode(mode));
-    },
-    copy(object) {
-      return JSON.parse(JSON.stringify(object));
     }
   }
 };
diff --git a/src/plugins/timeConductor/ConductorInputsFixed.vue b/src/plugins/timeConductor/ConductorInputsFixed.vue
index 8911b91817e..cabf1f54a04 100644
--- a/src/plugins/timeConductor/ConductorInputsFixed.vue
+++ b/src/plugins/timeConductor/ConductorInputsFixed.vue
@@ -25,7 +25,6 @@
     :input-bounds="bounds"
     :input-time-system="timeSystem"
     @focus="$event.target.select()"
-    @update="setBoundsFromView"
     @dismiss="dismiss"
   />
   <div v-else class="c-compact-tc__setting-wrapper">
@@ -166,12 +165,6 @@ export default {
         format: key
       }).formatter;
     },
-    setBoundsFromView(bounds) {
-      this.$emit('bounds-updated', {
-        start: bounds.start,
-        end: bounds.end
-      });
-    },
     dismiss() {
       this.$emit('dismiss-inputs-fixed');
     }
diff --git a/src/plugins/timeConductor/ConductorMode.vue b/src/plugins/timeConductor/ConductorMode.vue
index e198406fc5f..ea482b1d313 100644
--- a/src/plugins/timeConductor/ConductorMode.vue
+++ b/src/plugins/timeConductor/ConductorMode.vue
@@ -43,13 +43,12 @@
 </template>
 
 <script>
+import { FIXED_MODE_KEY } from '../../api/time/constants';
 import modeMixin from './mode-mixin.js';
 
-const TEST_IDS = true;
-
 export default {
   mixins: [modeMixin],
-  inject: ['openmct', 'configuration'],
+  inject: ['openmct', 'configuration', 'bounds', 'offsets', 'isFixedTimeMode'],
   props: {
     mode: {
       type: String,
@@ -69,14 +68,14 @@ export default {
     const mode = this.openmct.time.getMode();
 
     return {
-      selectedMode: this.getModeMetadata(mode, TEST_IDS),
+      selectedMode: this.getModeMetadata(mode),
       modes: []
     };
   },
   watch: {
     mode: {
-      handler(newMode) {
-        this.setViewFromMode(newMode);
+      handler(mode) {
+        this.setMode(mode, this.getBoundsForMode(mode));
       }
     }
   },
@@ -97,12 +96,14 @@ export default {
       this.dismiss = this.openmct.menus.showSuperMenu(x, y, this.modes, menuOptions);
     },
     setViewFromMode(mode) {
-      this.selectedMode = this.getModeMetadata(mode, TEST_IDS);
+      this.selectedMode = this.getModeMetadata(mode);
     },
     setMode(mode) {
+      this.openmct.time.setMode(mode);
       this.setViewFromMode(mode);
-
-      this.$emit('mode-updated', mode);
+    },
+    getBoundsForMode(mode) {
+      return mode === FIXED_MODE_KEY ? this.bounds : this.offsets;
     }
   }
 };
diff --git a/src/plugins/timeConductor/ConductorPopUp.vue b/src/plugins/timeConductor/ConductorPopUp.vue
index 739db4be77d..062a319b2c4 100644
--- a/src/plugins/timeConductor/ConductorPopUp.vue
+++ b/src/plugins/timeConductor/ConductorPopUp.vue
@@ -13,7 +13,6 @@
         class="c-conductor__mode-select"
         title="Sets the Time Conductor's mode."
         :button-css-class="'c-icon-button'"
-        @mode-updated="saveMode"
       />
       <IndependentClock
         v-if="isIndependent"
@@ -45,7 +44,7 @@
       />
     </div>
     <conductor-inputs-fixed
-      v-if="isFixed"
+      v-if="isFixedTimeMode"
       :input-bounds="bounds"
       :object-path="objectPath"
       @bounds-updated="saveFixedBounds"
@@ -88,7 +87,8 @@ export default {
     configuration: {
       from: 'configuration',
       default: undefined
-    }
+    },
+    isFixedTimeMode: 'isFixedTimeMode'
   },
   props: {
     positionX: {
@@ -99,10 +99,6 @@ export default {
       type: Number,
       required: true
     },
-    isFixed: {
-      type: Boolean,
-      required: true
-    },
     isIndependent: {
       type: Boolean,
       default() {
@@ -135,7 +131,6 @@ export default {
     'fixed-bounds-updated',
     'clock-offsets-updated',
     'clock-updated',
-    'mode-updated',
     'independent-mode-updated'
   ],
   data() {
@@ -164,7 +159,7 @@ export default {
     },
     popupClasses() {
       const value = this.bottom ? 'c-tc-input-popup--bottom ' : '';
-      const mode = this.isFixed ? 'fixed-mode' : 'realtime-mode';
+      const mode = this.isFixedTimeMode ? 'fixed-mode' : 'realtime-mode';
       const independentClass = this.isIndependent ? 'itc-popout ' : '';
 
       return `${independentClass}${value}c-tc-input-popup--${mode}`;
@@ -215,12 +210,12 @@ export default {
       this.timeContext.off(TIME_CONTEXT_EVENTS.boundsChanged, this.setBounds);
     },
     setViewFromClock() {
-      this.bounds = this.isFixed
+      this.bounds = this.isFixedTimeMode
         ? this.timeContext.getBounds()
         : this.openmct.time.getClockOffsets();
     },
     setBounds(bounds, isTick) {
-      if (this.isFixed || !isTick) {
+      if (this.isFixedTimeMode || !isTick) {
         this.bounds = bounds;
       }
     },
@@ -233,9 +228,6 @@ export default {
     saveClock(clockOptions) {
       this.$emit('clock-updated', clockOptions);
     },
-    saveMode(mode) {
-      this.$emit('mode-updated', mode);
-    },
     saveIndependentMode(mode) {
       this.$emit('independent-mode-updated', mode);
     },
diff --git a/src/plugins/timeConductor/DatePicker.vue b/src/plugins/timeConductor/DatePicker.vue
index 7bf97c1ca4d..1aa47890d08 100644
--- a/src/plugins/timeConductor/DatePicker.vue
+++ b/src/plugins/timeConductor/DatePicker.vue
@@ -107,10 +107,6 @@ export default {
       type: String,
       default: undefined
     },
-    formatter: {
-      type: Object,
-      required: true
-    },
     bottom: {
       type: Boolean,
       default() {
diff --git a/src/plugins/timeConductor/TimePopupFixed.vue b/src/plugins/timeConductor/TimePopupFixed.vue
index 25ca2c198dd..3046b9eb9e9 100644
--- a/src/plugins/timeConductor/TimePopupFixed.vue
+++ b/src/plugins/timeConductor/TimePopupFixed.vue
@@ -41,11 +41,10 @@
           aria-label="Start date"
           @change="validateAllBounds('startDate')"
         />
-        <date-picker
-          v-if="isUTCBased"
+        <DatePicker
+          v-if="isTimeSystemUTCBased"
           class="c-ctrl-wrapper--menus-right"
           :default-date-time="formattedBounds.start"
-          :formatter="timeFormatter"
           @date-selected="startDateSelected"
         />
       </div>
@@ -78,11 +77,10 @@
           aria-label="End date"
           @change="validateAllBounds('endDate')"
         />
-        <date-picker
-          v-if="isUTCBased"
+        <DatePicker
+          v-if="isTimeSystemUTCBased"
           class="c-ctrl-wrapper--menus-left"
           :default-date-time="formattedBounds.end"
-          :formatter="timeFormatter"
           @date-selected="endDateSelected"
         />
       </div>
@@ -118,78 +116,37 @@
 </template>
 
 <script>
-import _ from 'lodash';
-
 import DatePicker from './DatePicker.vue';
 
-const DEFAULT_DURATION_FORMATTER = 'duration';
-
 export default {
   components: {
     DatePicker
   },
-  inject: ['openmct'],
-  props: {
-    inputBounds: {
-      type: Object,
-      required: true
-    },
-    inputTimeSystem: {
-      type: Object,
-      required: true
-    }
-  },
+  inject: ['openmct', 'isTimeSystemUTCBased', 'timeSystemFormatter', 'timeSystemDurationFormatter', 'bounds'],
   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();
-
     return {
-      timeFormatter,
-      durationFormatter,
-      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))
-      },
-      isUTCBased: timeSystem.isUTCBased,
+      formattedBounds: {},
       isDisabled: false
     };
   },
   watch: {
-    inputBounds: {
-      handler(newBounds) {
-        this.handleNewBounds(newBounds);
-      },
-      deep: true
-    },
-    inputTimeSystem: {
-      handler(newTimeSystem) {
-        this.setTimeSystem(newTimeSystem);
+    bounds: {
+      handler() {
+        this.handleNewBounds();
       },
       deep: true
     }
   },
-  mounted() {
-    this.handleNewBounds = _.throttle(this.handleNewBounds, 300);
-    this.setTimeSystem(JSON.parse(JSON.stringify(this.openmct.time.getTimeSystem())));
+  created() {
+    this.setViewFromBounds();
   },
   beforeUnmount() {
     this.clearAllValidation();
   },
   methods: {
-    handleNewBounds(bounds) {
-      this.setBounds(bounds);
-      this.setViewFromBounds(bounds);
+    handleNewBounds() {
+      this.setViewFromBounds();
     },
     clearAllValidation() {
       [this.$refs.startDate, this.$refs.endDate].forEach(this.clearValidationForInput);
@@ -198,38 +155,26 @@ export default {
       input.setCustomValidity('');
       input.title = '';
     },
-    setBounds(bounds) {
-      this.bounds = bounds;
-    },
-    setViewFromBounds(bounds) {
-      this.formattedBounds.start = this.timeFormatter.format(bounds.start).split(' ')[0];
-      this.formattedBounds.end = this.timeFormatter.format(bounds.end).split(' ')[0];
-      this.formattedBounds.startTime = this.durationFormatter.format(Math.abs(bounds.start));
-      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
-      );
-      this.isUTCBased = timeSystem.isUTCBased;
-    },
-    getFormatter(key) {
-      return this.openmct.telemetry.getValueFormatter({
-        format: key
-      }).formatter;
+    setViewFromBounds() {
+      const formattedBounds = {};
+
+      formattedBounds.start = this.timeSystemFormatter.format(this.bounds.start).split(' ')[0];
+      formattedBounds.end = this.timeSystemFormatter.format(this.bounds.end).split(' ')[0];
+      formattedBounds.startTime = this.timeSystemDurationFormatter.format(Math.abs(this.bounds.start));
+      formattedBounds.endTime = this.timeSystemDurationFormatter.format(Math.abs(this.bounds.end));
+
+      this.formattedBounds = formattedBounds;
     },
     setBoundsFromView(dismiss) {
       if (this.$refs.fixedDeltaInput.checkValidity()) {
-        let start = this.timeFormatter.parse(
+        let start = this.timeSystemFormatter.parse(
           `${this.formattedBounds.start} ${this.formattedBounds.startTime}`
         );
-        let end = this.timeFormatter.parse(
+        let end = this.timeSystemFormatter.parse(
           `${this.formattedBounds.end} ${this.formattedBounds.endTime}`
         );
 
-        this.$emit('update', {
+        this.openmct.time.setBounds({
           start: start,
           end: end
         });
@@ -263,10 +208,10 @@ export default {
 
       return [this.$refs.startDate, this.$refs.endDate].every((input) => {
         let boundsValues = {
-          start: this.timeFormatter.parse(
+          start: this.timeSystemFormatter.parse(
             `${this.formattedBounds.start} ${this.formattedBounds.startTime}`
           ),
-          end: this.timeFormatter.parse(
+          end: this.timeSystemFormatter.parse(
             `${this.formattedBounds.end} ${this.formattedBounds.endTime}`
           )
         };
@@ -274,7 +219,7 @@ export default {
         // const limit = this.getBoundsLimit();
         const limit = false;
 
-        if (this.timeSystem.isUTCBased && limit && boundsValues.end - boundsValues.start > limit) {
+        if (this.isTimeSystemUTCBased && limit && boundsValues.end - boundsValues.start > limit) {
           if (input === currentInput) {
             validationResult = {
               valid: false,
@@ -300,7 +245,7 @@ export default {
           input === this.$refs.startDate
             ? `${this.formattedBounds.start} ${this.formattedBounds.startTime}`
             : `${this.formattedBounds.end} ${this.formattedBounds.endTime}`;
-        if (!this.timeFormatter.validate(formattedDate)) {
+        if (!this.timeSystemFormatter.validate(formattedDate)) {
           validationResult = {
             valid: false,
             message: 'Invalid date'
@@ -335,11 +280,11 @@ export default {
       return validationResult.valid;
     },
     startDateSelected(date) {
-      this.formattedBounds.start = this.timeFormatter.format(date).split(' ')[0];
+      this.formattedBounds.start = this.timeSystemFormatter.format(date).split(' ')[0];
       this.validateAllBounds('startDate');
     },
     endDateSelected(date) {
-      this.formattedBounds.end = this.timeFormatter.format(date).split(' ')[0];
+      this.formattedBounds.end = this.timeSystemFormatter.format(date).split(' ')[0];
       this.validateAllBounds('endDate');
     },
     hide($event) {
diff --git a/src/plugins/timeConductor/useTimeMode.js b/src/plugins/timeConductor/useTimeMode.js
index 8ac76b770c3..f046b63e9bf 100644
--- a/src/plugins/timeConductor/useTimeMode.js
+++ b/src/plugins/timeConductor/useTimeMode.js
@@ -36,6 +36,7 @@ import {
  * @param {OpenMCT} openmct the Open MCT API
  * @returns {{
  *   observeTimeMode: () => void,
+ *   timeMode: import('vue').Ref<string>,
  *   isFixedTimeMode: import('vue').Ref<boolean>,
  *   isRealTimeMode: import('vue').Ref<boolean>
  * }}
@@ -60,6 +61,7 @@ export function useTimeMode(openmct, options) {
 
   return {
     observeTimeMode,
+    timeMode,
     isFixedTimeMode,
     isRealTimeMode
   };

From 2c559457f036f7ed3f952daf04cc76e4b5fd2911 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Fri, 19 Apr 2024 15:28:32 -0700
Subject: [PATCH 13/71] missed file in commit

---
 src/plugins/timeConductor/ConductorComponent.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/plugins/timeConductor/ConductorComponent.vue b/src/plugins/timeConductor/ConductorComponent.vue
index 3d111b40029..aa515c2c703 100644
--- a/src/plugins/timeConductor/ConductorComponent.vue
+++ b/src/plugins/timeConductor/ConductorComponent.vue
@@ -102,7 +102,8 @@ export default {
   inject: ['openmct', 'configuration'],
   setup() {
     const openmct = inject('openmct');
-    const { observeTimeSystem, timeSystemFormatter, timeSystemDurationFormatter } = useTimeSystem(openmct);
+    const { observeTimeSystem, timeSystemFormatter, timeSystemDurationFormatter } =
+      useTimeSystem(openmct);
     const { observeTimeMode, timeMode, isFixedTimeMode, isRealTimeMode } = useTimeMode(openmct);
     const { observeTimeBounds, bounds, isTick } = useTimeBounds(openmct);
     const { observeClockOffsets, offsets } = useClockOffsets(openmct);
@@ -133,7 +134,6 @@ export default {
     };
   },
   data() {
-
     return {
       // offsets: {
       //   start: offsets && this.durationFormatter.format(Math.abs(offsets.start)),

From 4f37d955eb05e65c222c3aa73a616545aecbb460 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Wed, 1 May 2024 12:06:08 -0700
Subject: [PATCH 14/71] use composables for conductor mode

---
 .../timeConductor/ConductorComponent.vue      | 20 ++++++--
 src/plugins/timeConductor/ConductorMode.vue   | 50 +++++++------------
 src/plugins/timeConductor/useTimeMode.js      | 31 ++++++++++++
 3 files changed, 67 insertions(+), 34 deletions(-)

diff --git a/src/plugins/timeConductor/ConductorComponent.vue b/src/plugins/timeConductor/ConductorComponent.vue
index aa515c2c703..df8ec451b71 100644
--- a/src/plugins/timeConductor/ConductorComponent.vue
+++ b/src/plugins/timeConductor/ConductorComponent.vue
@@ -102,9 +102,20 @@ export default {
   inject: ['openmct', 'configuration'],
   setup() {
     const openmct = inject('openmct');
-    const { observeTimeSystem, timeSystemFormatter, timeSystemDurationFormatter } =
-      useTimeSystem(openmct);
-    const { observeTimeMode, timeMode, isFixedTimeMode, isRealTimeMode } = useTimeMode(openmct);
+    const {
+      observeTimeSystem,
+      timeSystemFormatter,
+      timeSystemDurationFormatter,
+      isTimeSystemUTCBased
+    } = useTimeSystem(openmct);
+    const {
+      observeTimeMode,
+      timeMode,
+      isFixedTimeMode,
+      isRealTimeMode,
+      getAllModeMetadata,
+      getModeMetadata
+    } = useTimeMode(openmct);
     const { observeTimeBounds, bounds, isTick } = useTimeBounds(openmct);
     const { observeClockOffsets, offsets } = useClockOffsets(openmct);
 
@@ -117,9 +128,12 @@ export default {
 
     provide('timeSystemFormatter', timeSystemFormatter);
     provide('timeSystemDurationFormatter', timeSystemDurationFormatter);
+    provide('isTimeSystemUTCBased', isTimeSystemUTCBased);
     provide('timeMode', timeMode);
     provide('isFixedTimeMode', isFixedTimeMode);
     provide('isRealTimeMode', isRealTimeMode);
+    provide('getAllModeMetadata', getAllModeMetadata);
+    provide('getModeMetadata', getModeMetadata);
     provide('bounds', bounds);
     provide('isTick', isTick);
     provide('offsets', offsets);
diff --git a/src/plugins/timeConductor/ConductorMode.vue b/src/plugins/timeConductor/ConductorMode.vue
index ea482b1d313..d2fab3fdc86 100644
--- a/src/plugins/timeConductor/ConductorMode.vue
+++ b/src/plugins/timeConductor/ConductorMode.vue
@@ -23,8 +23,8 @@
   <div v-if="readOnly === false" ref="modeButton" class="c-tc-input-popup__options">
     <div class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left">
       <button
-        class="c-button--menu js-mode-button"
-        :class="[buttonCssClass, selectedMode.cssClass]"
+        class="c-button--menu js-mode-button c-icon-button"
+        :class="selectedMode.cssClass"
         aria-label="Time Conductor Mode Menu"
         @click.prevent.stop="showModesMenu"
       >
@@ -43,19 +43,18 @@
 </template>
 
 <script>
-import { FIXED_MODE_KEY } from '../../api/time/constants';
-import modeMixin from './mode-mixin.js';
-
 export default {
-  mixins: [modeMixin],
-  inject: ['openmct', 'configuration', 'bounds', 'offsets', 'isFixedTimeMode'],
+  inject: [
+    'openmct',
+    'configuration',
+    'bounds',
+    'offsets',
+    'timeMode',
+    'isFixedTimeMode',
+    'getAllModeMetadata',
+    'getModeMetadata'
+  ],
   props: {
-    mode: {
-      type: String,
-      default() {
-        return undefined;
-      }
-    },
     readOnly: {
       type: Boolean,
       default() {
@@ -63,24 +62,20 @@ export default {
       }
     }
   },
-  emits: ['mode-updated'],
   data() {
-    const mode = this.openmct.time.getMode();
-
     return {
-      selectedMode: this.getModeMetadata(mode),
-      modes: []
+      selectedMode: this.getModeMetadata(this.timeMode)
     };
   },
   watch: {
-    mode: {
-      handler(mode) {
-        this.setMode(mode, this.getBoundsForMode(mode));
+    timeMode: {
+      handler() {
+        this.setView();
       }
     }
   },
   mounted() {
-    this.loadModes();
+    this.modes = this.getAllModeMetadata();
   },
   methods: {
     showModesMenu() {
@@ -95,15 +90,8 @@ export default {
 
       this.dismiss = this.openmct.menus.showSuperMenu(x, y, this.modes, menuOptions);
     },
-    setViewFromMode(mode) {
-      this.selectedMode = this.getModeMetadata(mode);
-    },
-    setMode(mode) {
-      this.openmct.time.setMode(mode);
-      this.setViewFromMode(mode);
-    },
-    getBoundsForMode(mode) {
-      return mode === FIXED_MODE_KEY ? this.bounds : this.offsets;
+    setView() {
+      this.selectedMode = this.getModeMetadata(this.timeMode);
     }
   }
 };
diff --git a/src/plugins/timeConductor/useTimeMode.js b/src/plugins/timeConductor/useTimeMode.js
index f046b63e9bf..33c6489ba2b 100644
--- a/src/plugins/timeConductor/useTimeMode.js
+++ b/src/plugins/timeConductor/useTimeMode.js
@@ -55,6 +55,35 @@ export function useTimeMode(openmct, options) {
     stopObservingTimeMode = () => openmct.time.off(TIME_CONTEXT_EVENTS.modeChanged, updateTimeMode);
   }
 
+  function getAllModeMetadata() {
+    return [FIXED_MODE_KEY, REALTIME_MODE_KEY].map(getModeMetadata);
+  }
+
+  function getModeMetadata(key) {
+    const fixedModeMetadata = {
+      key: FIXED_MODE_KEY,
+      name: 'Fixed Timespan',
+      description: 'Query and explore data that falls between two fixed datetimes.',
+      cssClass: 'icon-tabular',
+      onItemClicked: () => setTimeMode(key)
+    };
+
+    const realTimeModeMetadata = {
+      key: REALTIME_MODE_KEY,
+      name: 'Real-Time',
+      description:
+        'Monitor streaming data in real-time. The Time Conductor and displays will automatically advance themselves based on the active clock.',
+      cssClass: 'icon-clock',
+      onItemClicked: () => setTimeMode(key)
+    };
+
+    return key === FIXED_MODE_KEY ? fixedModeMetadata : realTimeModeMetadata;
+  }
+
+  function setTimeMode(_timeMode) {
+    openmct.time.setMode(_timeMode);
+  }
+
   function updateTimeMode(_timeMode) {
     timeMode.value = _timeMode;
   }
@@ -62,6 +91,8 @@ export function useTimeMode(openmct, options) {
   return {
     observeTimeMode,
     timeMode,
+    getAllModeMetadata,
+    getModeMetadata,
     isFixedTimeMode,
     isRealTimeMode
   };

From 3788a132c44671bbf9bd7c76e6e77528f04456ec Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Mon, 13 May 2024 18:06:58 -0700
Subject: [PATCH 15/71] create useClock composable code clean up

---
 src/plugins/timeConductor/ConductorClock.vue  |  78 +---------
 .../timeConductor/ConductorComponent.vue      |  31 +---
 .../timeConductor/ConductorHistory.vue        |  12 +-
 src/plugins/timeConductor/ConductorPopUp.vue  |  19 +--
 .../timeConductor/ConductorTimeSystem.vue     |  10 +-
 src/plugins/timeConductor/clock-mixin.js      |   9 --
 .../independent/IndependentClock.vue          |   2 +-
 .../independent/IndependentMode.vue           |   2 +-
 src/plugins/timeConductor/mode-mixin.js       |   9 --
 src/plugins/timeConductor/useClock.js         | 141 ++++++++++++++++++
 10 files changed, 161 insertions(+), 152 deletions(-)
 create mode 100644 src/plugins/timeConductor/useClock.js

diff --git a/src/plugins/timeConductor/ConductorClock.vue b/src/plugins/timeConductor/ConductorClock.vue
index 23f29d48951..db162167c62 100644
--- a/src/plugins/timeConductor/ConductorClock.vue
+++ b/src/plugins/timeConductor/ConductorClock.vue
@@ -23,8 +23,8 @@
   <div v-if="readOnly === false" ref="clockButton" class="c-tc-input-popup__options">
     <div class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left">
       <button
-        class="c-button--menu js-clock-button"
-        :class="[buttonCssClass, selectedClock.cssClass]"
+        class="c-button--menu js-clock-button c-icon-button"
+        :class="selectedClock.cssClass"
         aria-label="Time Conductor Clock Menu"
         @click.prevent.stop="showClocksMenu"
       >
@@ -38,18 +38,8 @@
 </template>
 
 <script>
-import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
-import clockMixin from './clock-mixin.js';
-
 export default {
-  mixins: [clockMixin],
-  inject: {
-    openmct: 'openmct',
-    configuration: {
-      from: 'configuration',
-      default: undefined
-    }
-  },
+  inject: ['openmct', 'configuration', 'clock', 'getAllClockMetadata', 'getClockMetadata'],
   props: {
     readOnly: {
       type: Boolean,
@@ -58,21 +48,15 @@ export default {
       }
     }
   },
-  emits: ['clock-updated'],
   data() {
-    const activeClock = this.getActiveClock();
-
     return {
-      selectedClock: activeClock ? this.getClockMetadata(activeClock) : undefined,
-      clocks: []
+      clocks: this.getAllClockMetadata(this.configuration.menuOptions)
     };
   },
-  mounted() {
-    this.loadClocks(this.configuration.menuOptions);
-    this.openmct.time.on(TIME_CONTEXT_EVENTS.clockChanged, this.setViewFromClock);
-  },
-  unmounted() {
-    this.openmct.time.off(TIME_CONTEXT_EVENTS.clockChanged, this.setViewFromClock);
+  computed: {
+    selectedClock() {
+      return this.getClockMetadata(this.clock);
+    }
   },
   methods: {
     showClocksMenu() {
@@ -86,52 +70,6 @@ export default {
       };
 
       this.dismiss = this.openmct.menus.showSuperMenu(x, y, this.clocks, menuOptions);
-    },
-    setClock(clockKey) {
-      const option = {
-        clockKey
-      };
-      let configuration = this.getMatchingConfig({
-        clock: clockKey,
-        timeSystem: this.openmct.time.getTimeSystem().key
-      });
-
-      if (configuration === undefined) {
-        configuration = this.getMatchingConfig({
-          clock: clockKey
-        });
-
-        option.timeSystem = configuration.timeSystem;
-        option.bounds = configuration.bounds;
-
-        // this.openmct.time.setTimeSystem(configuration.timeSystem, configuration.bounds);
-      }
-
-      const offsets = this.openmct.time.getClockOffsets() ?? configuration.clockOffsets;
-      option.offsets = offsets;
-
-      this.$emit('clock-updated', option);
-    },
-    getMatchingConfig(options) {
-      const matchers = {
-        clock(config) {
-          return options.clock === config.clock;
-        },
-        timeSystem(config) {
-          return options.timeSystem === config.timeSystem;
-        }
-      };
-
-      function configMatches(config) {
-        return Object.keys(options).reduce((match, option) => {
-          return match && matchers[option](config);
-        }, true);
-      }
-
-      return this.configuration.menuOptions.filter(configMatches)[0];
-    },
-    setViewFromClock(clock) {
-      this.selectedClock = this.getClockMetadata(clock);
     }
   }
 };
diff --git a/src/plugins/timeConductor/ConductorComponent.vue b/src/plugins/timeConductor/ConductorComponent.vue
index df8ec451b71..614438586f6 100644
--- a/src/plugins/timeConductor/ConductorComponent.vue
+++ b/src/plugins/timeConductor/ConductorComponent.vue
@@ -61,9 +61,6 @@
       :position-x="positionX"
       :position-y="positionY"
       @popup-loaded="initializePopup"
-      @clock-updated="saveClock"
-      @fixed-bounds-updated="saveFixedBounds"
-      @clock-offsets-updated="saveClockOffsets"
       @dismiss="clearPopup"
     />
   </div>
@@ -72,7 +69,6 @@
 <script>
 import { inject, onMounted, provide } from 'vue';
 
-import { FIXED_MODE_KEY, REALTIME_MODE_KEY } from '../../api/time/constants.js';
 import ConductorAxis from './ConductorAxis.vue';
 import ConductorClock from './ConductorClock.vue';
 import ConductorInputsFixed from './ConductorInputsFixed.vue';
@@ -82,6 +78,7 @@ import ConductorModeIcon from './ConductorModeIcon.vue';
 import ConductorPopUp from './ConductorPopUp.vue';
 import conductorPopUpManager from './conductorPopUpManager.js';
 import ConductorTimeSystem from './ConductorTimeSystem.vue';
+import { useClock } from './useClock.js';
 import { useClockOffsets } from './useClockOffsets.js';
 import { useTimeBounds } from './useTimeBounds.js';
 import { useTimeMode } from './useTimeMode.js';
@@ -117,12 +114,14 @@ export default {
       getModeMetadata
     } = useTimeMode(openmct);
     const { observeTimeBounds, bounds, isTick } = useTimeBounds(openmct);
+    const { observeClock, clock, getAllClockMetadata, getClockMetadata } = useClock(openmct);
     const { observeClockOffsets, offsets } = useClockOffsets(openmct);
 
     onMounted(() => {
       observeTimeSystem();
       observeTimeMode();
       observeTimeBounds();
+      observeClock();
       observeClockOffsets();
     });
 
@@ -137,22 +136,18 @@ export default {
     provide('bounds', bounds);
     provide('isTick', isTick);
     provide('offsets', offsets);
+    provide('clock', clock);
+    provide('getAllClockMetadata', getAllClockMetadata);
+    provide('getClockMetadata', getClockMetadata);
 
     return {
       timeSystemFormatter,
-      timeSystemDurationFormatter,
       isFixedTimeMode,
-      isRealTimeMode,
-      bounds,
-      isTick
+      bounds
     };
   },
   data() {
     return {
-      // offsets: {
-      //   start: offsets && this.durationFormatter.format(Math.abs(offsets.start)),
-      //   end: offsets && this.durationFormatter.format(Math.abs(offsets.end))
-      // },
       viewBounds: {
         start: this.bounds.start,
         end: this.bounds.end
@@ -170,9 +165,6 @@ export default {
         start: this.timeSystemFormatter.format(this.bounds.start),
         end: this.timeSystemFormatter.format(this.bounds.end)
       };
-    },
-    mode() {
-      return this.isFixedTimeMode ? FIXED_MODE_KEY : REALTIME_MODE_KEY;
     }
   },
   watch: {
@@ -234,15 +226,6 @@ export default {
       // this.formattedBounds.end = this.timeFormatter.format(bounds.end);
       this.viewBounds.start = bounds.start;
       this.viewBounds.end = bounds.end;
-    },
-    saveFixedBounds(bounds) {
-      // this.openmct.time.setBounds(bounds);
-    },
-    saveClockOffsets(offsets) {
-      // this.openmct.time.setClockOffsets(offsets);
-    },
-    saveClock(clockOptions) {
-      this.openmct.time.setClock(clockOptions.clockKey);
     }
   }
 };
diff --git a/src/plugins/timeConductor/ConductorHistory.vue b/src/plugins/timeConductor/ConductorHistory.vue
index b7764fb5c03..cb215065c39 100644
--- a/src/plugins/timeConductor/ConductorHistory.vue
+++ b/src/plugins/timeConductor/ConductorHistory.vue
@@ -24,8 +24,7 @@
     <div class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left">
       <button
         aria-label="Time Conductor History"
-        class="c-button--menu c-history-button icon-history"
-        :class="buttonCssClass"
+        class="c-button--menu c-history-button icon-history c-icon-button"
         @click.prevent.stop="showHistoryMenu"
       >
         <span class="c-button__label">History</span>
@@ -47,15 +46,6 @@ import UTCTimeFormat from '../utcTimeSystem/UTCTimeFormat.js';
 
 export default {
   inject: ['openmct', 'configuration'],
-  props: {
-    buttonCssClass: {
-      type: String,
-      required: false,
-      default() {
-        return '';
-      }
-    }
-  },
   data() {
     const mode = this.openmct.time.getMode();
 
diff --git a/src/plugins/timeConductor/ConductorPopUp.vue b/src/plugins/timeConductor/ConductorPopUp.vue
index 062a319b2c4..b89bb8c221a 100644
--- a/src/plugins/timeConductor/ConductorPopUp.vue
+++ b/src/plugins/timeConductor/ConductorPopUp.vue
@@ -12,35 +12,29 @@
         v-else
         class="c-conductor__mode-select"
         title="Sets the Time Conductor's mode."
-        :button-css-class="'c-icon-button'"
       />
       <IndependentClock
         v-if="isIndependent"
         class="c-conductor__mode-select"
         title="Sets the Time Conductor's clock."
         :clock="timeOptionClock"
-        :button-css-class="'c-icon-button'"
         @independent-clock-updated="saveIndependentClock"
       />
       <ConductorClock
         v-else
         class="c-conductor__mode-select"
         title="Sets the Time Conductor's clock."
-        :button-css-class="'c-icon-button'"
-        @clock-updated="saveClock"
       />
       <!-- TODO: Time system and history must work even with ITC later -->
       <ConductorTimeSystem
         v-if="!isIndependent"
         class="c-conductor__time-system-select"
         title="Sets the Time Conductor's time system."
-        :button-css-class="'c-icon-button'"
       />
       <ConductorHistory
         v-if="!isIndependent"
         class="c-conductor__history-select"
         title="Select and apply previously entered time intervals."
-        :button-css-class="'c-icon-button'"
       />
     </div>
     <conductor-inputs-fixed
@@ -82,14 +76,7 @@ export default {
     ConductorInputsFixed,
     ConductorInputsRealtime
   },
-  inject: {
-    openmct: 'openmct',
-    configuration: {
-      from: 'configuration',
-      default: undefined
-    },
-    isFixedTimeMode: 'isFixedTimeMode'
-  },
+  inject: ['openmct', 'configuration', 'isFixedTimeMode'],
   props: {
     positionX: {
       type: Number,
@@ -130,7 +117,6 @@ export default {
     'independent-clock-updated',
     'fixed-bounds-updated',
     'clock-offsets-updated',
-    'clock-updated',
     'independent-mode-updated'
   ],
   data() {
@@ -225,9 +211,6 @@ export default {
     saveClockOffsets(offsets) {
       this.$emit('clock-offsets-updated', offsets);
     },
-    saveClock(clockOptions) {
-      this.$emit('clock-updated', clockOptions);
-    },
     saveIndependentMode(mode) {
       this.$emit('independent-mode-updated', mode);
     },
diff --git a/src/plugins/timeConductor/ConductorTimeSystem.vue b/src/plugins/timeConductor/ConductorTimeSystem.vue
index 4023249fcb4..08225e90516 100644
--- a/src/plugins/timeConductor/ConductorTimeSystem.vue
+++ b/src/plugins/timeConductor/ConductorTimeSystem.vue
@@ -26,8 +26,7 @@
     class="c-ctrl-wrapper c-ctrl-wrapper--menus-up"
   >
     <button
-      class="c-button--menu c-time-system-button"
-      :class="[buttonCssClass]"
+      class="c-button--menu c-time-system-button c-icon-button"
       aria-label="Time Conductor Time System"
       @click.prevent.stop="showTimeSystemMenu"
     >
@@ -50,13 +49,6 @@ import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
 export default {
   inject: ['openmct', 'configuration'],
   props: {
-    buttonCssClass: {
-      type: String,
-      required: false,
-      default() {
-        return '';
-      }
-    },
     readOnly: {
       type: Boolean,
       default() {
diff --git a/src/plugins/timeConductor/clock-mixin.js b/src/plugins/timeConductor/clock-mixin.js
index 32da96c7adc..37ba0259548 100644
--- a/src/plugins/timeConductor/clock-mixin.js
+++ b/src/plugins/timeConductor/clock-mixin.js
@@ -1,13 +1,4 @@
 export default {
-  props: {
-    buttonCssClass: {
-      type: String,
-      required: false,
-      default() {
-        return '';
-      }
-    }
-  },
   methods: {
     loadClocks(menuOptions) {
       let clocks;
diff --git a/src/plugins/timeConductor/independent/IndependentClock.vue b/src/plugins/timeConductor/independent/IndependentClock.vue
index 79e532c84d4..7ec8a044951 100644
--- a/src/plugins/timeConductor/independent/IndependentClock.vue
+++ b/src/plugins/timeConductor/independent/IndependentClock.vue
@@ -25,7 +25,7 @@
       <button
         v-if="selectedClock"
         class="c-icon-button c-button--menu js-clock-button"
-        :class="[buttonCssClass, selectedClock.cssClass]"
+        :class="selectedClock.cssClass"
         aria-label="Independent Time Conductor Clock Menu"
         @click.prevent.stop="showClocksMenu"
       >
diff --git a/src/plugins/timeConductor/independent/IndependentMode.vue b/src/plugins/timeConductor/independent/IndependentMode.vue
index fe599a12e24..c203d848fca 100644
--- a/src/plugins/timeConductor/independent/IndependentMode.vue
+++ b/src/plugins/timeConductor/independent/IndependentMode.vue
@@ -24,7 +24,7 @@
     <div class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left">
       <button
         class="c-icon-button c-button--menu js-mode-button"
-        :class="[buttonCssClass, selectedMode.cssClass]"
+        :class="selectedMode.cssClass"
         aria-label="Independent Time Conductor Mode Menu"
         @click.prevent.stop="showModesMenu"
       >
diff --git a/src/plugins/timeConductor/mode-mixin.js b/src/plugins/timeConductor/mode-mixin.js
index f8dc37db647..110b49f8cc9 100644
--- a/src/plugins/timeConductor/mode-mixin.js
+++ b/src/plugins/timeConductor/mode-mixin.js
@@ -1,15 +1,6 @@
 import { FIXED_MODE_KEY, REALTIME_MODE_KEY } from '../../api/time/constants.js';
 
 export default {
-  props: {
-    buttonCssClass: {
-      type: String,
-      required: false,
-      default() {
-        return '';
-      }
-    }
-  },
   methods: {
     loadModes() {
       this.modes = [FIXED_MODE_KEY, REALTIME_MODE_KEY].map(this.getModeMetadata);
diff --git a/src/plugins/timeConductor/useClock.js b/src/plugins/timeConductor/useClock.js
new file mode 100644
index 00000000000..df1dde14ee4
--- /dev/null
+++ b/src/plugins/timeConductor/useClock.js
@@ -0,0 +1,141 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { onBeforeUnmount, ref } from 'vue';
+
+/**
+ * Provides reactive TODO,
+ * as well as a function to observe and update the component's clock,
+ * which automatically stops observing when the component is unmounted.
+ *
+ * @param {OpenMCT} openmct the Open MCT API
+ * @returns {{
+ *   observeClock: () => void,
+ *   timeMode: import('vue').Ref<string>,
+ *   isFixedTimeMode: import('vue').Ref<boolean>,
+ *   isRealTimeMode: import('vue').Ref<boolean>
+ * }}
+ */
+export function useClock(openmct, options) {
+  let stopObservingClock;
+
+  const clock = ref(openmct.time.getClock());
+
+  onBeforeUnmount(() => stopObservingClock?.());
+
+  function observeClock() {
+    openmct.time.on(TIME_CONTEXT_EVENTS.clockChanged, updateClock);
+    stopObservingClock = () => openmct.time.off(TIME_CONTEXT_EVENTS.clockChanged, updateClock);
+  }
+
+  function getAllClockMetadata(menuOptions) {
+    const clocks = menuOptions
+      ? menuOptions
+          .map((menuOption) => menuOption.clock)
+          .filter((key, index, array) => key !== undefined && array.indexOf(key) === index)
+          .map((clockKey) => openmct.time.getAllClocks().find((_clock) => _clock.key === clockKey))
+      : openmct.time.getAllClocks();
+
+    const clockMetadata = clocks.map(getClockMetadata);
+
+    return clockMetadata;
+  }
+
+  function getClockMetadata(_clock) {
+    if (_clock === undefined) {
+      return;
+    }
+
+    const clockMetadata = {
+      key: _clock.key,
+      name: _clock.name,
+      description: 'Uses the system clock as the current time basis. ' + _clock.description,
+      cssClass: _clock.cssClass || 'icon-clock',
+      onItemClicked: () => setClock(_clock.key)
+    };
+
+    return clockMetadata;
+  }
+
+  function setClock(key) {
+    openmct.time.setClock(key);
+  }
+
+  function updateClock(_clock) {
+    clock.value = _clock;
+  }
+
+  /**
+   * TODO: bring this back. we lost this in the last refactor.
+   * changing clock requires a timesystem check.
+   * 
+  function setClockWithOptions() {
+    const option = {
+      clockKey
+    };
+    let configuration = this.getMatchingConfig({
+      clock: clockKey,
+      timeSystem: this.openmct.time.getTimeSystem().key
+    });
+
+    if (configuration === undefined) {
+      configuration = this.getMatchingConfig({
+        clock: clockKey
+      });
+
+      option.timeSystem = configuration.timeSystem;
+      option.bounds = configuration.bounds;
+
+      // this.openmct.time.setTimeSystem(configuration.timeSystem, configuration.bounds);
+    }
+
+    const offsets = this.openmct.time.getClockOffsets() ?? configuration.clockOffsets;
+    option.offsets = offsets;
+  }
+
+  function getMatchingConfig(options) {
+    const matchers = {
+      clock(config) {
+        return options.clock === config.clock;
+      },
+      timeSystem(config) {
+        return options.timeSystem === config.timeSystem;
+      }
+    };
+
+    function configMatches(config) {
+      return Object.keys(options).reduce((match, option) => {
+        return match && matchers[option](config);
+      }, true);
+    }
+
+    return this.configuration.menuOptions.filter(configMatches)[0];
+  }
+  */
+
+  return {
+    observeClock,
+    clock,
+    getAllClockMetadata,
+    getClockMetadata
+  };
+}

From 23e12fa0d188ef648c2d771e2b9ebe91e4878504 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Tue, 14 May 2024 15:35:37 -0700
Subject: [PATCH 16/71] whoops. mistook prettier red squiggly for code not used
 red squiggly.

---
 src/plugins/timeConductor/useClock.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/plugins/timeConductor/useClock.js b/src/plugins/timeConductor/useClock.js
index df1dde14ee4..864d9b289a2 100644
--- a/src/plugins/timeConductor/useClock.js
+++ b/src/plugins/timeConductor/useClock.js
@@ -22,6 +22,8 @@
 
 import { onBeforeUnmount, ref } from 'vue';
 
+import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
+
 /**
  * Provides reactive TODO,
  * as well as a function to observe and update the component's clock,

From bd1c7d9da0013442573b2035468c24ab7dac5bca Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Tue, 14 May 2024 15:35:58 -0700
Subject: [PATCH 17/71] vue naming convention

---
 src/ui/components/ObjectFrame.vue | 2 +-
 src/ui/layout/BrowseBar.vue       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ui/components/ObjectFrame.vue b/src/ui/components/ObjectFrame.vue
index 177f9d5d1f1..3e496b7b5d5 100644
--- a/src/ui/components/ObjectFrame.vue
+++ b/src/ui/components/ObjectFrame.vue
@@ -64,7 +64,7 @@
         :aria-label="`${ariaLabel} Controls`"
       >
         <div v-if="supportsIndependentTime" class="c-conductor-holder--compact">
-          <independent-time-conductor :domain-object="domainObject" :object-path="objectPath" />
+          <IndependentTimeConductor :domain-object="domainObject" :object-path="objectPath" />
         </div>
         <NotebookMenuSwitcher
           v-if="notebookEnabled"
diff --git a/src/ui/layout/BrowseBar.vue b/src/ui/layout/BrowseBar.vue
index 315122b93d3..76b75bbaf3a 100644
--- a/src/ui/layout/BrowseBar.vue
+++ b/src/ui/layout/BrowseBar.vue
@@ -53,7 +53,7 @@
         v-if="supportsIndependentTime"
         class="c-conductor-holder--compact l-shell__main-independent-time-conductor"
       >
-        <independent-time-conductor
+        <IndependentTimeConductor
           :domain-object="domainObject"
           :object-path="openmct.router.path"
         />

From 852ee74094bb5e8dab28ad748400c3888a07f3e6 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Thu, 16 May 2024 12:37:47 -0700
Subject: [PATCH 18/71] change composables to allow for timeContexts

---
 src/plugins/timeConductor/useClock.js        | 17 +++++++++--------
 src/plugins/timeConductor/useClockOffsets.js | 11 ++++++-----
 src/plugins/timeConductor/useTimeBounds.js   | 11 ++++++-----
 src/plugins/timeConductor/useTimeMode.js     | 11 ++++++-----
 src/plugins/timeConductor/useTimeSystem.js   |  9 +++++----
 5 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/src/plugins/timeConductor/useClock.js b/src/plugins/timeConductor/useClock.js
index 864d9b289a2..812f93dca80 100644
--- a/src/plugins/timeConductor/useClock.js
+++ b/src/plugins/timeConductor/useClock.js
@@ -29,7 +29,8 @@ import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
  * as well as a function to observe and update the component's clock,
  * which automatically stops observing when the component is unmounted.
  *
- * @param {OpenMCT} openmct the Open MCT API
+ * @param {OpenMCT} [openmct] the Open MCT API
+ * @param {TimeContext} [timeContext] the time context to use for time API clock events
  * @returns {{
  *   observeClock: () => void,
  *   timeMode: import('vue').Ref<string>,
@@ -37,16 +38,16 @@ import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
  *   isRealTimeMode: import('vue').Ref<boolean>
  * }}
  */
-export function useClock(openmct, options) {
+export function useClock(openmct, timeContext = openmct.time) {
   let stopObservingClock;
 
-  const clock = ref(openmct.time.getClock());
+  const clock = ref(timeContext.getClock());
 
   onBeforeUnmount(() => stopObservingClock?.());
 
   function observeClock() {
-    openmct.time.on(TIME_CONTEXT_EVENTS.clockChanged, updateClock);
-    stopObservingClock = () => openmct.time.off(TIME_CONTEXT_EVENTS.clockChanged, updateClock);
+    timeContext.on(TIME_CONTEXT_EVENTS.clockChanged, updateClock);
+    stopObservingClock = () => timeContext.off(TIME_CONTEXT_EVENTS.clockChanged, updateClock);
   }
 
   function getAllClockMetadata(menuOptions) {
@@ -54,8 +55,8 @@ export function useClock(openmct, options) {
       ? menuOptions
           .map((menuOption) => menuOption.clock)
           .filter((key, index, array) => key !== undefined && array.indexOf(key) === index)
-          .map((clockKey) => openmct.time.getAllClocks().find((_clock) => _clock.key === clockKey))
-      : openmct.time.getAllClocks();
+          .map((clockKey) => timeContext.getAllClocks().find((_clock) => _clock.key === clockKey))
+      : timeContext.getAllClocks();
 
     const clockMetadata = clocks.map(getClockMetadata);
 
@@ -79,7 +80,7 @@ export function useClock(openmct, options) {
   }
 
   function setClock(key) {
-    openmct.time.setClock(key);
+    timeContext.setClock(key);
   }
 
   function updateClock(_clock) {
diff --git a/src/plugins/timeConductor/useClockOffsets.js b/src/plugins/timeConductor/useClockOffsets.js
index 9f02a23b0a6..ac0a00085f2 100644
--- a/src/plugins/timeConductor/useClockOffsets.js
+++ b/src/plugins/timeConductor/useClockOffsets.js
@@ -29,23 +29,24 @@ import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
  * as well as a function to observe and update offsets changes,
  * which automatically stops observing when the component is unmounted.
  *
- * @param {OpenMCT} openmct the Open MCT API
+ * @param {OpenMCT} [openmct] the Open MCT API
+ * @param {TimeContext} [timeContext] the time context to use for time API clock offsets events
  * @returns {{
  *   observeClockOffsets: () => void,
  *   offsets: import('vue').Ref<object>,
  * }}
  */
-export function useClockOffsets(openmct, options) {
+export function useClockOffsets(openmct, timeContext = openmct.time) {
   let stopObservingClockOffsets;
 
-  const offsets = shallowRef(openmct.time.getClockOffsets());
+  const offsets = shallowRef(timeContext.getClockOffsets());
 
   onBeforeUnmount(() => stopObservingClockOffsets?.());
 
   function observeClockOffsets() {
-    openmct.time.on(TIME_CONTEXT_EVENTS.clockOffsetsChanged, updateClockOffsets);
+    timeContext.on(TIME_CONTEXT_EVENTS.clockOffsetsChanged, updateClockOffsets);
     stopObservingClockOffsets = () =>
-      openmct.time.off(TIME_CONTEXT_EVENTS.clockOffsetsChanged, updateClockOffsets);
+      timeContext.off(TIME_CONTEXT_EVENTS.clockOffsetsChanged, updateClockOffsets);
   }
 
   function updateClockOffsets(_offsets) {
diff --git a/src/plugins/timeConductor/useTimeBounds.js b/src/plugins/timeConductor/useTimeBounds.js
index 4a5b5c9078a..b32f92b0683 100644
--- a/src/plugins/timeConductor/useTimeBounds.js
+++ b/src/plugins/timeConductor/useTimeBounds.js
@@ -30,25 +30,26 @@ import throttle from '../../utils/throttle.js';
  * as well as a function to observe and update bounds changes,
  * which automatically stops observing when the component is unmounted.
  *
- * @param {OpenMCT} openmct the Open MCT API
+ * @param {OpenMCT} [openmct] the Open MCT API
+ * @param {TimeContext} [timeContext] the time context to use for time API bounds events
  * @returns {{
  *   observeTimeBounds: () => void,
  *   bounds: import('vue').Ref<object>,
  *   isTick: import('vue').Ref<boolean>
  * }}
  */
-export function useTimeBounds(openmct, options) {
+export function useTimeBounds(openmct, timeContext = openmct.time) {
   let stopObservingTimeBounds;
 
-  const bounds = shallowRef(openmct.time.getBounds());
+  const bounds = shallowRef(timeContext.getBounds());
   const isTick = ref(false);
 
   onBeforeUnmount(() => stopObservingTimeBounds?.());
 
   function observeTimeBounds(milliseconds = 300) {
-    openmct.time.on(TIME_CONTEXT_EVENTS.boundsChanged, throttle(updateTimeBounds), milliseconds);
+    timeContext.on(TIME_CONTEXT_EVENTS.boundsChanged, throttle(updateTimeBounds), milliseconds);
     stopObservingTimeBounds = () =>
-      openmct.time.off(TIME_CONTEXT_EVENTS.boundsChanged, throttle(updateTimeBounds), milliseconds);
+      timeContext.off(TIME_CONTEXT_EVENTS.boundsChanged, throttle(updateTimeBounds), milliseconds);
   }
 
   function updateTimeBounds(_timeBounds, _isTick) {
diff --git a/src/plugins/timeConductor/useTimeMode.js b/src/plugins/timeConductor/useTimeMode.js
index 33c6489ba2b..f591ba8246b 100644
--- a/src/plugins/timeConductor/useTimeMode.js
+++ b/src/plugins/timeConductor/useTimeMode.js
@@ -34,6 +34,7 @@ import {
  * which automatically stops observing when the component is unmounted.
  *
  * @param {OpenMCT} openmct the Open MCT API
+ * @param {TimeContext} [timeContext] the time context to use for time API mode events
  * @returns {{
  *   observeTimeMode: () => void,
  *   timeMode: import('vue').Ref<string>,
@@ -41,18 +42,18 @@ import {
  *   isRealTimeMode: import('vue').Ref<boolean>
  * }}
  */
-export function useTimeMode(openmct, options) {
+export function useTimeMode(openmct, timeContext = openmct.time) {
   let stopObservingTimeMode;
 
-  const timeMode = ref(openmct.time.getMode());
+  const timeMode = ref(timeContext.getMode());
   const isFixedTimeMode = computed(() => timeMode.value === FIXED_MODE_KEY);
   const isRealTimeMode = computed(() => timeMode.value === REALTIME_MODE_KEY);
 
   onBeforeUnmount(() => stopObservingTimeMode?.());
 
   function observeTimeMode() {
-    openmct.time.on(TIME_CONTEXT_EVENTS.modeChanged, updateTimeMode);
-    stopObservingTimeMode = () => openmct.time.off(TIME_CONTEXT_EVENTS.modeChanged, updateTimeMode);
+    timeContext.on(TIME_CONTEXT_EVENTS.modeChanged, updateTimeMode);
+    stopObservingTimeMode = () => timeContext.off(TIME_CONTEXT_EVENTS.modeChanged, updateTimeMode);
   }
 
   function getAllModeMetadata() {
@@ -81,7 +82,7 @@ export function useTimeMode(openmct, options) {
   }
 
   function setTimeMode(_timeMode) {
-    openmct.time.setMode(_timeMode);
+    timeContext.setMode(_timeMode);
   }
 
   function updateTimeMode(_timeMode) {
diff --git a/src/plugins/timeConductor/useTimeSystem.js b/src/plugins/timeConductor/useTimeSystem.js
index 6092376f841..547cf49c986 100644
--- a/src/plugins/timeConductor/useTimeSystem.js
+++ b/src/plugins/timeConductor/useTimeSystem.js
@@ -30,6 +30,7 @@ const DEFAULT_DURATION_FORMATTER = 'duration';
  * which automatically stops observing when the component is unmounted.
  *
  * @param {OpenMCT} openmct the Open MCT API
+ * @param {TimeContext} [timeContext] the time context to use for time API time system events
  * @returns {{
  *   observeTimeSystem: () => void,
  *   timeSystemKey: import('vue').Ref<string>,
@@ -38,10 +39,10 @@ const DEFAULT_DURATION_FORMATTER = 'duration';
  *   isTimeSystemUTCBased: import('vue').Ref<boolean>
  * }}
  */
-export function useTimeSystem(openmct, options) {
+export function useTimeSystem(openmct, timeContext = openmct.time) {
   let stopObservingTimeSystem;
 
-  const currentTimeSystem = openmct.time.getTimeSystem();
+  const currentTimeSystem = timeContext.getTimeSystem();
 
   const timeSystemKey = ref(currentTimeSystem.key);
   const timeSystemFormatter = ref(getFormatter(openmct, currentTimeSystem.timeFormat));
@@ -53,8 +54,8 @@ export function useTimeSystem(openmct, options) {
   onBeforeUnmount(() => stopObservingTimeSystem?.());
 
   function observeTimeSystem() {
-    openmct.time.on('timeSystemChanged', updateTimeSystem);
-    stopObservingTimeSystem = () => openmct.time.off('timeSystemChanged', updateTimeSystem);
+    timeContext.on('timeSystemChanged', updateTimeSystem);
+    stopObservingTimeSystem = () => timeContext.off('timeSystemChanged', updateTimeSystem);
   }
 
   function updateTimeSystem(timeSystem) {

From 11adbd283a274b759f47f4bac440191a8f192018 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Fri, 17 May 2024 16:13:50 -0700
Subject: [PATCH 19/71] change timeContexts to be reactive to objectPath
 reactivity fixes to composables

---
 .../timeConductor/ConductorComponent.vue      | 34 +++---------
 src/plugins/timeConductor/useClock.js         | 40 ++++++++------
 src/plugins/timeConductor/useClockOffsets.js  | 23 +++++---
 src/plugins/timeConductor/useTimeBounds.js    | 30 +++++++----
 src/plugins/timeConductor/useTimeContext.js   | 53 +++++++++++++++++++
 src/plugins/timeConductor/useTimeMode.js      | 30 +++++++----
 src/plugins/timeConductor/useTimeSystem.js    | 39 +++++++++-----
 7 files changed, 171 insertions(+), 78 deletions(-)
 create mode 100644 src/plugins/timeConductor/useTimeContext.js

diff --git a/src/plugins/timeConductor/ConductorComponent.vue b/src/plugins/timeConductor/ConductorComponent.vue
index 614438586f6..91f5408e673 100644
--- a/src/plugins/timeConductor/ConductorComponent.vue
+++ b/src/plugins/timeConductor/ConductorComponent.vue
@@ -67,7 +67,7 @@
 </template>
 
 <script>
-import { inject, onMounted, provide } from 'vue';
+import { inject, provide } from 'vue';
 
 import ConductorAxis from './ConductorAxis.vue';
 import ConductorClock from './ConductorClock.vue';
@@ -99,31 +99,13 @@ export default {
   inject: ['openmct', 'configuration'],
   setup() {
     const openmct = inject('openmct');
-    const {
-      observeTimeSystem,
-      timeSystemFormatter,
-      timeSystemDurationFormatter,
-      isTimeSystemUTCBased
-    } = useTimeSystem(openmct);
-    const {
-      observeTimeMode,
-      timeMode,
-      isFixedTimeMode,
-      isRealTimeMode,
-      getAllModeMetadata,
-      getModeMetadata
-    } = useTimeMode(openmct);
-    const { observeTimeBounds, bounds, isTick } = useTimeBounds(openmct);
-    const { observeClock, clock, getAllClockMetadata, getClockMetadata } = useClock(openmct);
-    const { observeClockOffsets, offsets } = useClockOffsets(openmct);
-
-    onMounted(() => {
-      observeTimeSystem();
-      observeTimeMode();
-      observeTimeBounds();
-      observeClock();
-      observeClockOffsets();
-    });
+    const { timeSystemFormatter, timeSystemDurationFormatter, isTimeSystemUTCBased } =
+      useTimeSystem(openmct);
+    const { timeMode, isFixedTimeMode, isRealTimeMode, getAllModeMetadata, getModeMetadata } =
+      useTimeMode(openmct);
+    const { bounds, isTick } = useTimeBounds(openmct);
+    const { clock, getAllClockMetadata, getClockMetadata } = useClock(openmct);
+    const { offsets } = useClockOffsets(openmct);
 
     provide('timeSystemFormatter', timeSystemFormatter);
     provide('timeSystemDurationFormatter', timeSystemDurationFormatter);
diff --git a/src/plugins/timeConductor/useClock.js b/src/plugins/timeConductor/useClock.js
index 812f93dca80..62b73157d72 100644
--- a/src/plugins/timeConductor/useClock.js
+++ b/src/plugins/timeConductor/useClock.js
@@ -20,34 +20,45 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import { onBeforeUnmount, ref } from 'vue';
+import { onBeforeUnmount, ref, watch } from 'vue';
 
 import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
+import { useTimeContext } from './useTimeContext.js';
 
 /**
- * Provides reactive TODO,
+ * Provides reactive `clock` which is reactive to a time context,
  * as well as a function to observe and update the component's clock,
  * which automatically stops observing when the component is unmounted.
  *
  * @param {OpenMCT} [openmct] the Open MCT API
- * @param {TimeContext} [timeContext] the time context to use for time API clock events
+ * @param {Array} objectPath The view's objectPath
  * @returns {{
- *   observeClock: () => void,
- *   timeMode: import('vue').Ref<string>,
- *   isFixedTimeMode: import('vue').Ref<boolean>,
- *   isRealTimeMode: import('vue').Ref<boolean>
+ *   clock: import('vue').Ref<string>,
+ *   getAllClockMetadata: () => Object,
+ *   getClockMetadata: () => Object
  * }}
  */
-export function useClock(openmct, timeContext = openmct.time) {
+export function useClock(openmct, objectPath) {
   let stopObservingClock;
 
-  const clock = ref(timeContext.getClock());
+  const { timeContext } = useTimeContext(openmct, objectPath);
+
+  const clock = ref(timeContext.value.getClock());
 
   onBeforeUnmount(() => stopObservingClock?.());
 
+  watch(
+    timeContext,
+    (newContext, oldContext) => {
+      oldContext?.value?.off(TIME_CONTEXT_EVENTS.clockChanged, updateClock);
+      observeClock();
+    },
+    { immediate: true }
+  );
+
   function observeClock() {
-    timeContext.on(TIME_CONTEXT_EVENTS.clockChanged, updateClock);
-    stopObservingClock = () => timeContext.off(TIME_CONTEXT_EVENTS.clockChanged, updateClock);
+    timeContext.value.on(TIME_CONTEXT_EVENTS.clockChanged, updateClock);
+    stopObservingClock = () => timeContext.value.off(TIME_CONTEXT_EVENTS.clockChanged, updateClock);
   }
 
   function getAllClockMetadata(menuOptions) {
@@ -55,8 +66,8 @@ export function useClock(openmct, timeContext = openmct.time) {
       ? menuOptions
           .map((menuOption) => menuOption.clock)
           .filter((key, index, array) => key !== undefined && array.indexOf(key) === index)
-          .map((clockKey) => timeContext.getAllClocks().find((_clock) => _clock.key === clockKey))
-      : timeContext.getAllClocks();
+          .map((clockKey) => timeContext.value.getAllClocks().find((_clock) => _clock.key === clockKey))
+      : timeContext.value.getAllClocks();
 
     const clockMetadata = clocks.map(getClockMetadata);
 
@@ -80,7 +91,7 @@ export function useClock(openmct, timeContext = openmct.time) {
   }
 
   function setClock(key) {
-    timeContext.setClock(key);
+    timeContext.value.setClock(key);
   }
 
   function updateClock(_clock) {
@@ -136,7 +147,6 @@ export function useClock(openmct, timeContext = openmct.time) {
   */
 
   return {
-    observeClock,
     clock,
     getAllClockMetadata,
     getClockMetadata
diff --git a/src/plugins/timeConductor/useClockOffsets.js b/src/plugins/timeConductor/useClockOffsets.js
index ac0a00085f2..fae8a678879 100644
--- a/src/plugins/timeConductor/useClockOffsets.js
+++ b/src/plugins/timeConductor/useClockOffsets.js
@@ -20,9 +20,10 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import { onBeforeUnmount, shallowRef } from 'vue';
+import { onBeforeUnmount, shallowRef, watch } from 'vue';
 
 import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
+import { useTimeContext } from './useTimeContext.js';
 
 /**
  * Provides reactive `offsets`,
@@ -36,17 +37,28 @@ import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
  *   offsets: import('vue').Ref<object>,
  * }}
  */
-export function useClockOffsets(openmct, timeContext = openmct.time) {
+export function useClockOffsets(openmct, objectPath) {
   let stopObservingClockOffsets;
 
-  const offsets = shallowRef(timeContext.getClockOffsets());
+  const { timeContext } = useTimeContext(openmct, objectPath);
+
+  const offsets = shallowRef(timeContext.value.getClockOffsets());
 
   onBeforeUnmount(() => stopObservingClockOffsets?.());
 
+  watch(
+    timeContext,
+    (newContext, oldContext) => {
+      oldContext?.value?.off(TIME_CONTEXT_EVENTS.clockOffsetsChanged, updateClockOffsets);
+      observeClockOffsets();
+    },
+    { immediate: true }
+  );
+
   function observeClockOffsets() {
-    timeContext.on(TIME_CONTEXT_EVENTS.clockOffsetsChanged, updateClockOffsets);
+    timeContext.value.on(TIME_CONTEXT_EVENTS.clockOffsetsChanged, updateClockOffsets);
     stopObservingClockOffsets = () =>
-      timeContext.off(TIME_CONTEXT_EVENTS.clockOffsetsChanged, updateClockOffsets);
+      timeContext.value.off(TIME_CONTEXT_EVENTS.clockOffsetsChanged, updateClockOffsets);
   }
 
   function updateClockOffsets(_offsets) {
@@ -54,7 +66,6 @@ export function useClockOffsets(openmct, timeContext = openmct.time) {
   }
 
   return {
-    observeClockOffsets,
     offsets
   };
 }
diff --git a/src/plugins/timeConductor/useTimeBounds.js b/src/plugins/timeConductor/useTimeBounds.js
index b32f92b0683..1315ce000cd 100644
--- a/src/plugins/timeConductor/useTimeBounds.js
+++ b/src/plugins/timeConductor/useTimeBounds.js
@@ -20,36 +20,49 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import { onBeforeUnmount, ref, shallowRef } from 'vue';
+import { onBeforeUnmount, ref, shallowRef, watch } from 'vue';
 
 import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
+import { useTimeContext } from './useTimeContext.js';
 import throttle from '../../utils/throttle.js';
 
+const THROTTLE_RATE = 300;
+
 /**
  * Provides reactive `bounds`,
  * as well as a function to observe and update bounds changes,
  * which automatically stops observing when the component is unmounted.
  *
  * @param {OpenMCT} [openmct] the Open MCT API
- * @param {TimeContext} [timeContext] the time context to use for time API bounds events
+ * @param {Array} objectPath The view's objectPath
  * @returns {{
- *   observeTimeBounds: () => void,
  *   bounds: import('vue').Ref<object>,
  *   isTick: import('vue').Ref<boolean>
  * }}
  */
-export function useTimeBounds(openmct, timeContext = openmct.time) {
+export function useTimeBounds(openmct, objectPath) {
   let stopObservingTimeBounds;
 
-  const bounds = shallowRef(timeContext.getBounds());
+  const { timeContext } = useTimeContext(openmct, objectPath);
+
+  const bounds = shallowRef(timeContext.value.getBounds());
   const isTick = ref(false);
 
   onBeforeUnmount(() => stopObservingTimeBounds?.());
 
-  function observeTimeBounds(milliseconds = 300) {
-    timeContext.on(TIME_CONTEXT_EVENTS.boundsChanged, throttle(updateTimeBounds), milliseconds);
+  watch(
+    timeContext,
+    (newContext, oldContext) => {
+      oldContext?.value?.off(TIME_CONTEXT_EVENTS.boundsChanged, throttle(updateTimeBounds, THROTTLE_RATE));
+      observeTimeBounds();
+    },
+    { immediate: true }
+  );
+
+  function observeTimeBounds() {
+    timeContext.value.on(TIME_CONTEXT_EVENTS.boundsChanged, throttle(updateTimeBounds, THROTTLE_RATE));
     stopObservingTimeBounds = () =>
-      timeContext.off(TIME_CONTEXT_EVENTS.boundsChanged, throttle(updateTimeBounds), milliseconds);
+      timeContext.value.off(TIME_CONTEXT_EVENTS.boundsChanged, throttle(updateTimeBounds, THROTTLE_RATE));
   }
 
   function updateTimeBounds(_timeBounds, _isTick) {
@@ -58,7 +71,6 @@ export function useTimeBounds(openmct, timeContext = openmct.time) {
   }
 
   return {
-    observeTimeBounds,
     isTick,
     bounds
   };
diff --git a/src/plugins/timeConductor/useTimeContext.js b/src/plugins/timeConductor/useTimeContext.js
new file mode 100644
index 00000000000..4edefc7c913
--- /dev/null
+++ b/src/plugins/timeConductor/useTimeContext.js
@@ -0,0 +1,53 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { shallowRef, toValue, watchEffect } from 'vue';
+
+/**
+ * @typedef {import('@/api/time/TimeContext.js').default} TimeContext
+ * @typedef {import('@/api/time/GlobalTimeContext.js').default} GlobalTimeContext
+ */
+
+/**
+ * Provides the reactive TimeContext
+ * for the view's objectPath,
+ * or the GlobalTimeContext if objectPath is undefined.
+ *
+ * @param {OpenMCT} openmct the Open MCT API
+ * @param {Array} objectPath The view's objectPath
+ * @returns {{
+ *   timeContext: TimeContext | GlobalTimeContext
+ * }}
+ */
+export function useTimeContext(openmct, objectPath) {
+  const timeContext = shallowRef(null);
+
+  watchEffect(() => getTimeContext());
+
+  function getTimeContext() {
+    const path = toValue(objectPath);
+
+    timeContext.value = path !== undefined ? openmct.time.getContextForView(path) : openmct.time;
+  }
+
+  return { timeContext };
+}
diff --git a/src/plugins/timeConductor/useTimeMode.js b/src/plugins/timeConductor/useTimeMode.js
index f591ba8246b..712288e8efc 100644
--- a/src/plugins/timeConductor/useTimeMode.js
+++ b/src/plugins/timeConductor/useTimeMode.js
@@ -20,40 +20,51 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import { computed, onBeforeUnmount, ref } from 'vue';
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
 
 import {
   FIXED_MODE_KEY,
   REALTIME_MODE_KEY,
   TIME_CONTEXT_EVENTS
 } from '../../api/time/constants.js';
+import { useTimeContext } from './useTimeContext.js';
 
 /**
- * Provides reactive `isFixedTimeMode` and `isRealTimeMode`,
+ * Provides reactive `timeMode` which is reactive to a time context,
  * as well as a function to observe and update the component's time mode,
  * which automatically stops observing when the component is unmounted.
  *
  * @param {OpenMCT} openmct the Open MCT API
- * @param {TimeContext} [timeContext] the time context to use for time API mode events
+ * @param {Array} objectPath The view's objectPath
  * @returns {{
- *   observeTimeMode: () => void,
  *   timeMode: import('vue').Ref<string>,
  *   isFixedTimeMode: import('vue').Ref<boolean>,
  *   isRealTimeMode: import('vue').Ref<boolean>
  * }}
  */
-export function useTimeMode(openmct, timeContext = openmct.time) {
+export function useTimeMode(openmct, objectPath) {
   let stopObservingTimeMode;
 
-  const timeMode = ref(timeContext.getMode());
+  const { timeContext } = useTimeContext(openmct, objectPath);
+
+  const timeMode = ref(timeContext.value.getMode());
   const isFixedTimeMode = computed(() => timeMode.value === FIXED_MODE_KEY);
   const isRealTimeMode = computed(() => timeMode.value === REALTIME_MODE_KEY);
 
   onBeforeUnmount(() => stopObservingTimeMode?.());
 
+  watch(
+    timeContext,
+    (newContext, oldContext) => {
+      oldContext?.value?.off(TIME_CONTEXT_EVENTS.modeChanged, updateTimeMode);
+      observeTimeMode();
+    },
+    { immediate: true }
+  );
+
   function observeTimeMode() {
-    timeContext.on(TIME_CONTEXT_EVENTS.modeChanged, updateTimeMode);
-    stopObservingTimeMode = () => timeContext.off(TIME_CONTEXT_EVENTS.modeChanged, updateTimeMode);
+    timeContext.value.on(TIME_CONTEXT_EVENTS.modeChanged, updateTimeMode);
+    stopObservingTimeMode = () => timeContext.value.off(TIME_CONTEXT_EVENTS.modeChanged, updateTimeMode);
   }
 
   function getAllModeMetadata() {
@@ -82,7 +93,7 @@ export function useTimeMode(openmct, timeContext = openmct.time) {
   }
 
   function setTimeMode(_timeMode) {
-    timeContext.setMode(_timeMode);
+    timeContext.value.setMode(_timeMode);
   }
 
   function updateTimeMode(_timeMode) {
@@ -90,7 +101,6 @@ export function useTimeMode(openmct, timeContext = openmct.time) {
   }
 
   return {
-    observeTimeMode,
     timeMode,
     getAllModeMetadata,
     getModeMetadata,
diff --git a/src/plugins/timeConductor/useTimeSystem.js b/src/plugins/timeConductor/useTimeSystem.js
index 547cf49c986..316a5fed900 100644
--- a/src/plugins/timeConductor/useTimeSystem.js
+++ b/src/plugins/timeConductor/useTimeSystem.js
@@ -20,42 +20,58 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import { onBeforeUnmount, ref } from 'vue';
+import { onBeforeUnmount, ref, watch } from 'vue';
+
+import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
+import { useTimeContext } from './useTimeContext.js';
 
 const DEFAULT_DURATION_FORMATTER = 'duration';
 
 /**
+ * TODO: could probably use a shallowRef for the timeSystem... and all the other components as well.
+ *
  * Provides a reactive destructuring of the component's current time system,
  * as well as a function to observe and update the component's time system,
  * which automatically stops observing when the component is unmounted.
  *
  * @param {OpenMCT} openmct the Open MCT API
- * @param {TimeContext} [timeContext] the time context to use for time API time system events
+ * @param {Array} objectPath The view's objectPath
  * @returns {{
- *   observeTimeSystem: () => void,
  *   timeSystemKey: import('vue').Ref<string>,
  *   timeSystemFormatter: import('vue').Ref<() => void>,
  *   timeSystemDurationFormatter: import('vue').Ref<() => void>,
  *   isTimeSystemUTCBased: import('vue').Ref<boolean>
  * }}
  */
-export function useTimeSystem(openmct, timeContext = openmct.time) {
+export function useTimeSystem(openmct, objectPath) {
   let stopObservingTimeSystem;
 
-  const currentTimeSystem = timeContext.getTimeSystem();
+  const { timeContext } = useTimeContext(openmct, objectPath);
+
+  const initialTimeSystem = timeContext.value.getTimeSystem();
 
-  const timeSystemKey = ref(currentTimeSystem.key);
-  const timeSystemFormatter = ref(getFormatter(openmct, currentTimeSystem.timeFormat));
+  const timeSystemKey = ref(initialTimeSystem.key);
+  const timeSystemFormatter = ref(getFormatter(openmct, initialTimeSystem.timeFormat));
   const timeSystemDurationFormatter = ref(
-    getFormatter(openmct, currentTimeSystem.durationFormat || DEFAULT_DURATION_FORMATTER)
+    getFormatter(openmct, initialTimeSystem.durationFormat || DEFAULT_DURATION_FORMATTER)
   );
-  const isTimeSystemUTCBased = ref(currentTimeSystem.isUTCBased);
+  const isTimeSystemUTCBased = ref(initialTimeSystem.isUTCBased);
 
   onBeforeUnmount(() => stopObservingTimeSystem?.());
 
+  watch(
+    timeContext,
+    (newContext, oldContext) => {
+      oldContext?.valu?.off(TIME_CONTEXT_EVENTS.timeSystemChanged, updateTimeSystem);
+      observeTimeSystem();
+    },
+    { immediate: true }
+  );
+
   function observeTimeSystem() {
-    timeContext.on('timeSystemChanged', updateTimeSystem);
-    stopObservingTimeSystem = () => timeContext.off('timeSystemChanged', updateTimeSystem);
+    timeContext.value.on(TIME_CONTEXT_EVENTS.timeSystemChanged, updateTimeSystem);
+    stopObservingTimeSystem = () =>
+      timeContext.value.off(TIME_CONTEXT_EVENTS.timeSystemChanged, updateTimeSystem);
   }
 
   function updateTimeSystem(timeSystem) {
@@ -69,7 +85,6 @@ export function useTimeSystem(openmct, timeContext = openmct.time) {
   }
 
   return {
-    observeTimeSystem,
     timeSystemKey,
     timeSystemFormatter,
     timeSystemDurationFormatter,

From 0776003f40785a847bd28fadd8c07956c1a23f0f Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Fri, 17 May 2024 17:12:38 -0700
Subject: [PATCH 20/71] reactivity and non fixes

---
 src/plugins/timeConductor/useClock.js        | 2 +-
 src/plugins/timeConductor/useClockOffsets.js | 2 +-
 src/plugins/timeConductor/useTimeBounds.js   | 2 +-
 src/plugins/timeConductor/useTimeMode.js     | 2 +-
 src/plugins/timeConductor/useTimeSystem.js   | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/plugins/timeConductor/useClock.js b/src/plugins/timeConductor/useClock.js
index 62b73157d72..78faf186ed1 100644
--- a/src/plugins/timeConductor/useClock.js
+++ b/src/plugins/timeConductor/useClock.js
@@ -50,7 +50,7 @@ export function useClock(openmct, objectPath) {
   watch(
     timeContext,
     (newContext, oldContext) => {
-      oldContext?.value?.off(TIME_CONTEXT_EVENTS.clockChanged, updateClock);
+      oldContext?.off(TIME_CONTEXT_EVENTS.clockChanged, updateClock);
       observeClock();
     },
     { immediate: true }
diff --git a/src/plugins/timeConductor/useClockOffsets.js b/src/plugins/timeConductor/useClockOffsets.js
index fae8a678879..2fb423dbf6e 100644
--- a/src/plugins/timeConductor/useClockOffsets.js
+++ b/src/plugins/timeConductor/useClockOffsets.js
@@ -49,7 +49,7 @@ export function useClockOffsets(openmct, objectPath) {
   watch(
     timeContext,
     (newContext, oldContext) => {
-      oldContext?.value?.off(TIME_CONTEXT_EVENTS.clockOffsetsChanged, updateClockOffsets);
+      oldContext?.off(TIME_CONTEXT_EVENTS.clockOffsetsChanged, updateClockOffsets);
       observeClockOffsets();
     },
     { immediate: true }
diff --git a/src/plugins/timeConductor/useTimeBounds.js b/src/plugins/timeConductor/useTimeBounds.js
index 1315ce000cd..54266d46351 100644
--- a/src/plugins/timeConductor/useTimeBounds.js
+++ b/src/plugins/timeConductor/useTimeBounds.js
@@ -53,7 +53,7 @@ export function useTimeBounds(openmct, objectPath) {
   watch(
     timeContext,
     (newContext, oldContext) => {
-      oldContext?.value?.off(TIME_CONTEXT_EVENTS.boundsChanged, throttle(updateTimeBounds, THROTTLE_RATE));
+      oldContext?.off(TIME_CONTEXT_EVENTS.boundsChanged, throttle(updateTimeBounds, THROTTLE_RATE));
       observeTimeBounds();
     },
     { immediate: true }
diff --git a/src/plugins/timeConductor/useTimeMode.js b/src/plugins/timeConductor/useTimeMode.js
index 712288e8efc..05d8dbfebaa 100644
--- a/src/plugins/timeConductor/useTimeMode.js
+++ b/src/plugins/timeConductor/useTimeMode.js
@@ -56,7 +56,7 @@ export function useTimeMode(openmct, objectPath) {
   watch(
     timeContext,
     (newContext, oldContext) => {
-      oldContext?.value?.off(TIME_CONTEXT_EVENTS.modeChanged, updateTimeMode);
+      oldContext?.off(TIME_CONTEXT_EVENTS.modeChanged, updateTimeMode);
       observeTimeMode();
     },
     { immediate: true }
diff --git a/src/plugins/timeConductor/useTimeSystem.js b/src/plugins/timeConductor/useTimeSystem.js
index 316a5fed900..99b6386c23c 100644
--- a/src/plugins/timeConductor/useTimeSystem.js
+++ b/src/plugins/timeConductor/useTimeSystem.js
@@ -62,7 +62,7 @@ export function useTimeSystem(openmct, objectPath) {
   watch(
     timeContext,
     (newContext, oldContext) => {
-      oldContext?.valu?.off(TIME_CONTEXT_EVENTS.timeSystemChanged, updateTimeSystem);
+      oldContext?.off(TIME_CONTEXT_EVENTS.timeSystemChanged, updateTimeSystem);
       observeTimeSystem();
     },
     { immediate: true }

From 5dba73e83cdb3fc7f9dd3a72807ead3ace3e0898 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Tue, 21 May 2024 11:26:41 -0700
Subject: [PATCH 21/71] use `shallowRef` for clock object

---
 src/plugins/timeConductor/useClock.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/plugins/timeConductor/useClock.js b/src/plugins/timeConductor/useClock.js
index 78faf186ed1..6f5c43fe059 100644
--- a/src/plugins/timeConductor/useClock.js
+++ b/src/plugins/timeConductor/useClock.js
@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import { onBeforeUnmount, ref, watch } from 'vue';
+import { onBeforeUnmount, shallowRef, watch } from 'vue';
 
 import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
 import { useTimeContext } from './useTimeContext.js';
@@ -43,7 +43,7 @@ export function useClock(openmct, objectPath) {
 
   const { timeContext } = useTimeContext(openmct, objectPath);
 
-  const clock = ref(timeContext.value.getClock());
+  const clock = shallowRef(timeContext.value.getClock());
 
   onBeforeUnmount(() => stopObservingClock?.());
 
@@ -66,7 +66,9 @@ export function useClock(openmct, objectPath) {
       ? menuOptions
           .map((menuOption) => menuOption.clock)
           .filter((key, index, array) => key !== undefined && array.indexOf(key) === index)
-          .map((clockKey) => timeContext.value.getAllClocks().find((_clock) => _clock.key === clockKey))
+          .map((clockKey) =>
+            timeContext.value.getAllClocks().find((_clock) => _clock.key === clockKey)
+          )
       : timeContext.value.getAllClocks();
 
     const clockMetadata = clocks.map(getClockMetadata);

From 1bb49ead0afc100fe5d15ea8b4c8355caf86fdaf Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Tue, 21 May 2024 17:34:18 -0700
Subject: [PATCH 22/71] WIP: get independent time contexts working again

---
 .../timeConductor/ConductorInputsRealtime.vue | 191 +++---------------
 .../independent/IndependentTimeConductor.vue  | 171 ++++++++++------
 2 files changed, 138 insertions(+), 224 deletions(-)

diff --git a/src/plugins/timeConductor/ConductorInputsRealtime.vue b/src/plugins/timeConductor/ConductorInputsRealtime.vue
index 5bcbd603975..927331990fd 100644
--- a/src/plugins/timeConductor/ConductorInputsRealtime.vue
+++ b/src/plugins/timeConductor/ConductorInputsRealtime.vue
@@ -22,29 +22,28 @@
 <template>
   <time-popup-realtime
     v-if="readOnly === false"
-    :offsets="offsets"
+    :offsets="formattedOffsets"
     @focus="$event.target.select()"
-    @update="timePopUpdate"
     @dismiss="dismiss"
   />
   <div v-else class="c-compact-tc__setting-wrapper">
     <div
       v-if="!compact"
       class="c-compact-tc__setting-value icon-minus u-fade-truncate--lg --no-sep"
-      :aria-label="`Start offset: ${offsets.start}`"
-      :title="`Start offset: ${offsets.start}`"
+      :aria-label="`Start offset: ${formattedOffsets.start}`"
+      :title="`Start offset: ${formattedOffsets.start}`"
     >
-      {{ offsets.start }}
+      {{ formattedOffsets.start }}
     </div>
     <div v-if="!compact" class="c-compact-tc__bounds__start-end-sep icon-arrows-right-left"></div>
     <div
       v-if="!compact"
       class="c-compact-tc__setting-value icon-plus u-fade-truncate--lg"
       :class="{ '--no-sep': compact }"
-      :aria-label="`End offset: ${offsets.end}`"
-      :title="`End offset: ${offsets.end}`"
+      :aria-label="`End offset: ${formattedOffsets.end}`"
+      :title="`End offset: ${formattedOffsets.end}`"
     >
-      {{ offsets.end }}
+      {{ formattedOffsets.end }}
     </div>
     <div
       class="c-compact-tc__setting-value icon-clock c-compact-tc__current-update u-fade-truncate--lg --no-sep"
@@ -58,18 +57,13 @@
 </template>
 
 <script>
-import _ from 'lodash';
-
-import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
 import TimePopupRealtime from './TimePopupRealtime.vue';
 
-const DEFAULT_DURATION_FORMATTER = 'duration';
-
 export default {
   components: {
     TimePopupRealtime
   },
-  inject: ['openmct'],
+  inject: ['openmct', 'bounds', 'clock', 'offsets', 'timeSystemKey', 'timeSystemFormatter', 'timeSystemDurationFormatter'],
   props: {
     objectPath: {
       type: Array,
@@ -77,12 +71,6 @@ export default {
         return [];
       }
     },
-    inputBounds: {
-      type: Object,
-      default() {
-        return undefined;
-      }
-    },
     readOnly: {
       type: Boolean,
       default() {
@@ -98,165 +86,46 @@ export default {
   },
   emits: ['offsets-updated', 'dismiss-inputs-realtime'],
   data() {
-    const timeSystem = this.openmct.time.getTimeSystem();
-    const durationFormatter = this.getFormatter(
-      timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER
-    );
-    const timeFormatter = this.getFormatter(timeSystem.timeFormat);
-    const bounds = this.bounds ?? this.openmct.time.getBounds();
-    const offsets = this.offsets ?? this.openmct.time.getClockOffsets();
-    const currentValue = this.openmct.time.getClock()?.currentValue();
-
     return {
       showTCInputStart: false,
       showTCInputEnd: false,
-      durationFormatter,
-      timeFormatter,
-      bounds: {
-        start: bounds.start,
-        end: bounds.end
-      },
-      offsets: {
-        start: offsets && durationFormatter.format(Math.abs(offsets.start)),
-        end: offsets && durationFormatter.format(Math.abs(offsets.end))
-      },
-      formattedBounds: {
-        start: timeFormatter.format(bounds.start),
-        end: timeFormatter.format(bounds.end)
-      },
-      currentValue,
-      formattedCurrentValue: timeFormatter.format(currentValue),
-      isUTCBased: timeSystem.isUTCBased
+      currentValue: this.clock.currentValue()
     };
   },
-  watch: {
-    objectPath: {
-      handler(newPath, oldPath) {
-        if (newPath === oldPath) {
-          return;
-        }
-
-        this.setTimeContext();
-      },
-      deep: true
-    },
-    inputBounds: {
-      handler(newBounds) {
-        this.handleNewBounds(newBounds);
-      },
-      deep: true
+  computed: {
+    formattedBounds() {
+      return {
+        start: this.timeSystemFormatter.format(this.bounds.start),
+        end: this.timeSystemFormatter.format(this.bounds.end)
+      };
+    },
+    formattedOffsets() {
+      return {
+        start: this.timeSystemDurationFormatter.format(Math.abs(this.offsets.start)),
+        end: this.timeSystemDurationFormatter.format(Math.abs(this.offsets.end))
+      };
+    },
+    formattedCurrentValue() {
+      return this.timeSystemFormatter.format(this.currentValue);
     }
   },
-  mounted() {
-    this.handleNewBounds = _.throttle(this.handleNewBounds, 300, {
-      leading: true,
-      trailing: false
-    });
-    this.setTimeSystem(this.copy(this.openmct.time.getTimeSystem()));
-    this.openmct.time.on(TIME_CONTEXT_EVENTS.timeSystemChanged, this.setTimeSystem);
-    this.setTimeContext();
-  },
-  beforeUnmount() {
-    this.openmct.time.off(TIME_CONTEXT_EVENTS.timeSystemChanged, this.setTimeSystem);
-    this.stopFollowingTime();
+  watch: {
+    bounds() {
+      console.log(this.formattedOffsets);
+      this.updateCurrentValue();
+    }
   },
   methods: {
-    followTime() {
-      const bounds = this.timeContext
-        ? this.timeContext.getBounds()
-        : this.openmct.time.getBounds();
-      const offsets = this.timeContext
-        ? this.timeContext.getClockOffsets()
-        : this.openmct.time.getClockOffsets();
-
-      this.handleNewBounds(bounds);
-      this.setViewFromOffsets(offsets);
-
-      if (this.timeContext) {
-        this.timeContext.on(TIME_CONTEXT_EVENTS.boundsChanged, this.handleNewBounds);
-        this.timeContext.on(TIME_CONTEXT_EVENTS.clockOffsetsChanged, this.setViewFromOffsets);
-      } else {
-        this.openmct.time.on(TIME_CONTEXT_EVENTS.boundsChanged, this.handleNewBounds);
-        this.openmct.time.on(TIME_CONTEXT_EVENTS.clockOffsetsChanged, this.setViewFromOffsets);
-      }
-    },
-    stopFollowingTime() {
-      if (this.timeContext) {
-        this.timeContext.off(TIME_CONTEXT_EVENTS.boundsChanged, this.handleNewBounds);
-        this.timeContext.off(TIME_CONTEXT_EVENTS.clockOffsetsChanged, this.setViewFromOffsets);
-      } else {
-        this.openmct.time.off(TIME_CONTEXT_EVENTS.boundsChanged, this.handleNewBounds);
-        this.openmct.time.off(TIME_CONTEXT_EVENTS.clockOffsetsChanged, this.setViewFromOffsets);
-      }
-    },
-    setTimeContext() {
-      this.stopFollowingTime();
-      this.timeContext = this.openmct.time.getContextForView(this.objectPath);
-      this.followTime();
-    },
-    handleNewBounds(bounds, isTick) {
-      if (this.timeContext.isRealTime() || !isTick) {
-        this.setBounds(bounds);
-        this.setViewFromBounds(bounds);
-        this.updateCurrentValue();
-      }
-    },
-    setViewFromOffsets(offsets) {
-      if (offsets) {
-        this.offsets.start = this.durationFormatter.format(Math.abs(offsets.start));
-        this.offsets.end = this.durationFormatter.format(Math.abs(offsets.end));
-      }
-    },
-    setBounds(bounds) {
-      this.bounds = bounds;
-    },
-    setViewFromBounds(bounds) {
-      this.formattedBounds.start = this.timeFormatter.format(bounds.start);
-      this.formattedBounds.end = this.timeFormatter.format(bounds.end);
-    },
     updateCurrentValue() {
-      const currentValue = this.timeContext.getClock().currentValue();
-
-      if (currentValue !== undefined) {
-        this.setCurrentValue(currentValue);
-      }
-    },
-    setCurrentValue(value) {
-      this.currentValue = value;
-      this.formattedCurrentValue = this.timeFormatter.format(value);
-    },
-    setTimeSystem(timeSystem) {
-      this.timeSystem = timeSystem;
-      this.timeFormatter = this.getFormatter(timeSystem.timeFormat);
-      this.durationFormatter = this.getFormatter(
-        timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER
-      );
-      this.isUTCBased = timeSystem.isUTCBased;
-    },
-    getFormatter(key) {
-      return this.openmct.telemetry.getValueFormatter({
-        format: key
-      }).formatter;
+      this.currentValue = this.clock.currentValue();
     },
     timePopUpdate({ start, end }) {
       this.offsets.start = [start.hours, start.minutes, start.seconds].join(':');
       this.offsets.end = [end.hours, end.minutes, end.seconds].join(':');
       this.setOffsetsFromView();
     },
-    setOffsetsFromView() {
-      let startOffset = 0 - this.durationFormatter.parse(this.offsets.start);
-      let endOffset = this.durationFormatter.parse(this.offsets.end);
-
-      this.$emit('offsets-updated', {
-        start: startOffset,
-        end: endOffset
-      });
-    },
     dismiss() {
       this.$emit('dismiss-inputs-realtime');
-    },
-    copy(object) {
-      return JSON.parse(JSON.stringify(object));
     }
   }
 };
diff --git a/src/plugins/timeConductor/independent/IndependentTimeConductor.vue b/src/plugins/timeConductor/independent/IndependentTimeConductor.vue
index 5ca91492a48..4d842238c7e 100644
--- a/src/plugins/timeConductor/independent/IndependentTimeConductor.vue
+++ b/src/plugins/timeConductor/independent/IndependentTimeConductor.vue
@@ -82,6 +82,8 @@
 </template>
 
 <script>
+import { inject, provide, watch } from 'vue';
+
 import ConductorModeIcon from '@/plugins/timeConductor/ConductorModeIcon.vue';
 
 import { FIXED_MODE_KEY, TIME_CONTEXT_EVENTS } from '../../../api/time/constants.js';
@@ -89,6 +91,12 @@ import ToggleSwitch from '../../../ui/components/ToggleSwitch.vue';
 import ConductorInputsFixed from '../ConductorInputsFixed.vue';
 import ConductorInputsRealtime from '../ConductorInputsRealtime.vue';
 import ConductorPopUp from '../ConductorPopUp.vue';
+import { useClock } from '../useClock.js';
+import { useClockOffsets } from '../useClockOffsets.js';
+import { useTimeBounds } from '../useTimeBounds.js';
+import { useTimeContext } from '../useTimeContext.js';
+import { useTimeMode } from '../useTimeMode.js';
+import { useTimeSystem } from '../useTimeSystem.js';
 import independentTimeConductorPopUpManager from './independentTimeConductorPopUpManager.js';
 
 export default {
@@ -100,13 +108,7 @@ export default {
     ToggleSwitch
   },
   mixins: [independentTimeConductorPopUpManager],
-  inject: {
-    openmct: 'openmct',
-    configuration: {
-      from: 'configuration',
-      default: undefined
-    }
-  },
+  inject: ['openmct'],
   props: {
     domainObject: {
       type: Object,
@@ -117,34 +119,71 @@ export default {
       required: true
     }
   },
-  emits: ['updated'],
+  setup(props) {
+    const openmct = inject('openmct');
+    const { timeContext } = useTimeContext(openmct, getReactiveObjectPath);
+
+    const { timeSystemFormatter, timeSystemDurationFormatter, isTimeSystemUTCBased } =
+      useTimeSystem(openmct, getReactiveObjectPath);
+    const { timeMode, isFixedTimeMode, isRealTimeMode, getAllModeMetadata, getModeMetadata } =
+      useTimeMode(openmct, getReactiveObjectPath);
+    const { bounds, isTick } = useTimeBounds(openmct, getReactiveObjectPath);
+    const { clock, getAllClockMetadata, getClockMetadata } = useClock(openmct, getReactiveObjectPath);
+    const { offsets } = useClockOffsets(openmct, getReactiveObjectPath);
+
+    watch(timeContext, () => {
+      console.log('context changed');
+    });
+
+    provide('timeContext', timeContext);
+    provide('timeSystemFormatter', timeSystemFormatter);
+    provide('timeSystemDurationFormatter', timeSystemDurationFormatter);
+    provide('isTimeSystemUTCBased', isTimeSystemUTCBased);
+    provide('timeMode', timeMode);
+    provide('isFixedTimeMode', isFixedTimeMode);
+    provide('isRealTimeMode', isRealTimeMode);
+    provide('getAllModeMetadata', getAllModeMetadata);
+    provide('getModeMetadata', getModeMetadata);
+    provide('bounds', bounds);
+    provide('isTick', isTick);
+    provide('offsets', offsets);
+    provide('clock', clock);
+    provide('getAllClockMetadata', getAllClockMetadata);
+    provide('getClockMetadata', getClockMetadata);
+
+    function getReactiveObjectPath() {
+      return props.objectPath;
+    }
+
+    return {
+      timeContext,
+      timeMode,
+      clock,
+      timeSystemFormatter,
+      isFixedTimeMode,
+      isRealTimeMode,
+      bounds
+    };
+  },
   data() {
-    const fixedOffsets = this.openmct.time.getBounds();
-    const clockOffsets = this.openmct.time.getClockOffsets();
-    const clock = this.openmct.time.getClock().key;
-    const mode = this.openmct.time.getMode();
     const timeOptions = this.domainObject.configuration.timeOptions ?? {
-      clockOffsets,
-      fixedOffsets
+      clockOffsets: this.clockOffsets,
+      bounds: this.bounds
     };
 
-    timeOptions.clock = timeOptions.clock ?? clock;
-    timeOptions.mode = timeOptions.mode ?? mode;
+    timeOptions.clock = timeOptions.clock ?? this.clock.key;
+    timeOptions.mode = timeOptions.mode ?? this.timeMode;
 
     // check for older configurations that stored a key
     if (timeOptions.mode.key) {
       timeOptions.mode = timeOptions.mode.key;
     }
 
-    const isFixed = timeOptions.mode === FIXED_MODE_KEY;
-
     return {
       timeOptions,
-      isFixed,
-      independentTCEnabled: this.domainObject.configuration.useIndependentTime === true,
       viewBounds: {
-        start: fixedOffsets.start,
-        end: fixedOffsets.end
+        start: this.bounds.start,
+        end: this.bounds.end
       }
     };
   },
@@ -153,10 +192,13 @@ export default {
       return `${this.independentTCEnabled ? 'Disable' : 'Enable'} Independent Time Conductor`;
     },
     showFixedInputs() {
-      return this.isFixed && this.independentTCEnabled;
+      return this.isFixedTimeMode && this.independentTCEnabled;
     },
     showRealtimeInputs() {
-      return !this.isFixed && this.independentTCEnabled;
+      return this.isRealTimeMode && this.independentTCEnabled;
+    },
+    independentTCEnabled() {
+      return this.domainObject.configuration.useIndependentTime === true;
     }
   },
   watch: {
@@ -165,9 +207,10 @@ export default {
         const key = this.openmct.objects.makeKeyString(domainObject.identifier);
         if (key !== this.keyString) {
           //domain object has changed
+          console.log(`TODO: THIS SHOULD NEVER HAPPEN!!! `);
           this.destroyIndependentTime();
 
-          this.independentTCEnabled = domainObject.configuration.useIndependentTime === true;
+          // this.independentTCEnabled = domainObject.configuration.useIndependentTime === true;
           this.timeOptions = domainObject.configuration.timeOptions ?? {
             clockOffsets: this.openmct.time.getClockOffsets(),
             fixedOffsets: this.openmct.time.getBounds()
@@ -189,12 +232,18 @@ export default {
       },
       deep: true
     },
-    objectPath: {
-      handler(newPath, oldPath) {
-        //domain object or view has probably changed
-        this.setTimeContext();
-      },
-      deep: true
+    // objectPath: {
+    //   handler(newPath, oldPath) {
+    //     //domain object or view has probably changed
+    //     this.setTimeContext();
+    //   },
+    //   deep: true
+    // }
+    clock(newClock) {
+      this.setTimeOptionsClock(newClock);
+    },
+    timeMode(newTimeMode) {
+      this.setTimeOptionsMode(newTimeMode);
     }
   },
   created() {
@@ -207,14 +256,18 @@ export default {
   methods: {
     initialize() {
       this.keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
-      this.setTimeContext();
+      // this.setTimeContext();
 
       if (this.independentTCEnabled) {
         this.registerIndependentTimeOffsets();
       }
     },
     toggleIndependentTC() {
-      this.independentTCEnabled = !this.independentTCEnabled;
+      this.openmct.objects.mutate(
+        this.domainObject,
+        'configuration.useIndependentTime',
+        !this.independentTCEnabled
+      );
 
       if (this.independentTCEnabled) {
         this.registerIndependentTimeOffsets();
@@ -222,26 +275,20 @@ export default {
         this.clearPopup();
         this.destroyIndependentTime();
       }
-
-      this.openmct.objects.mutate(
-        this.domainObject,
-        'configuration.useIndependentTime',
-        this.independentTCEnabled
-      );
     },
-    setTimeContext() {
-      if (this.timeContext) {
-        this.stopFollowingTimeContext();
-      }
+    // setTimeContext() {
+    //   if (this.timeContext) {
+    //     this.stopFollowingTimeContext();
+    //   }
 
-      this.timeContext = this.openmct.time.getContextForView(this.objectPath);
-      this.timeContext.on(TIME_CONTEXT_EVENTS.clockChanged, this.setTimeOptionsClock);
-      this.timeContext.on(TIME_CONTEXT_EVENTS.modeChanged, this.setTimeOptionsMode);
-    },
-    stopFollowingTimeContext() {
-      this.timeContext.off(TIME_CONTEXT_EVENTS.clockChanged, this.setTimeOptionsClock);
-      this.timeContext.off(TIME_CONTEXT_EVENTS.modeChanged, this.setTimeOptionsMode);
-    },
+    //   this.timeContext = this.openmct.time.getContextForView(this.objectPath);
+    //   this.timeContext.on(TIME_CONTEXT_EVENTS.clockChanged, this.setTimeOptionsClock);
+    //   this.timeContext.on(TIME_CONTEXT_EVENTS.modeChanged, this.setTimeOptionsMode);
+    // },
+    // stopFollowingTimeContext() {
+    //   this.timeContext.off(TIME_CONTEXT_EVENTS.clockChanged, this.setTimeOptionsClock);
+    //   this.timeContext.off(TIME_CONTEXT_EVENTS.modeChanged, this.setTimeOptionsMode);
+    // },
     setTimeOptionsClock(clock) {
       this.setTimeOptionsOffsets();
       this.timeOptions.clock = clock.key;
@@ -251,9 +298,8 @@ export default {
       this.timeOptions.mode = mode;
     },
     setTimeOptionsOffsets() {
-      this.timeOptions.clockOffsets =
-        this.timeOptions.clockOffsets ?? this.timeContext.getClockOffsets();
-      this.timeOptions.fixedOffsets = this.timeOptions.fixedOffsets ?? this.timeContext.getBounds();
+      this.timeOptions.clockOffsets = this.timeOptions.clockOffsets ?? this.clockOffsets;
+      this.timeOptions.fixedOffsets = this.timeOptions.fixedOffsets ?? this.bounds;
     },
     saveFixedBounds(bounds) {
       const newOptions = this.updateTimeOptionProperty({
@@ -287,31 +333,30 @@ export default {
       this.timeOptions = options;
 
       this.registerIndependentTimeOffsets();
-      this.$emit('updated', this.timeOptions); // no longer use this, but may be used elsewhere
       this.openmct.objects.mutate(this.domainObject, 'configuration.timeOptions', this.timeOptions);
     },
     registerIndependentTimeOffsets() {
-      const timeContext = this.openmct.time.getIndependentContext(this.keyString);
+      // const timeContext = this.openmct.time.getIndependentContext(this.keyString);
       let offsets;
 
-      if (this.isFixed) {
-        offsets = this.timeOptions.fixedOffsets ?? this.timeContext.getBounds();
+      if (this.isFixedTimeMode) {
+        offsets = this.timeOptions.fixedOffsets ?? this.bounds;
       } else {
-        offsets = this.timeOptions.clockOffsets ?? this.openmct.time.getClockOffsets();
+        offsets = this.timeOptions.clockOffsets ?? this.clockOffsets();
       }
 
-      if (!timeContext.hasOwnContext()) {
+      if (!this.timeContext.hasOwnContext()) {
         this.unregisterIndependentTime = this.openmct.time.addIndependentContext(
           this.keyString,
           offsets,
           this.isFixed ? undefined : this.timeOptions.clock
         );
       } else {
-        if (!this.isFixed) {
-          timeContext.setClock(this.timeOptions.clock);
+        if (this.isRealTimeMode) {
+          this.timeContext.setClock(this.timeOptions.clock);
         }
 
-        timeContext.setMode(this.timeOptions.mode, offsets);
+        this.timeContext.setMode(this.timeOptions.mode, offsets);
       }
     },
     destroyIndependentTime() {

From 9a577923d9e4c4efbed1fcd5ada2e1f25b9e149b Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Tue, 21 May 2024 17:34:42 -0700
Subject: [PATCH 23/71] vue component naming conventions

---
 src/plugins/timeConductor/ConductorComponent.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/plugins/timeConductor/ConductorComponent.vue b/src/plugins/timeConductor/ConductorComponent.vue
index 91f5408e673..b3d722ac7b2 100644
--- a/src/plugins/timeConductor/ConductorComponent.vue
+++ b/src/plugins/timeConductor/ConductorComponent.vue
@@ -32,13 +32,13 @@
   >
     <ConductorModeIcon class="c-conductor__mode-icon" />
     <div class="c-compact-tc__setting-value u-fade-truncate">
-      <conductor-mode :read-only="true" />
-      <conductor-clock :read-only="true" />
-      <conductor-time-system :read-only="true" />
+      <ConductorMode :read-only="true" />
+      <ConductorClock :read-only="true" />
+      <ConductorTimeSystem :read-only="true" />
     </div>
-    <conductor-inputs-fixed v-if="isFixedTimeMode" :input-bounds="viewBounds" :read-only="true" />
-    <conductor-inputs-realtime v-else :input-bounds="viewBounds" :read-only="true" />
-    <conductor-axis
+    <ConductorInputsFixed v-if="isFixedTimeMode" :input-bounds="viewBounds" :read-only="true" />
+    <ConductorInputsRealtime v-else :input-bounds="viewBounds" :read-only="true" />
+    <ConductorAxis
       v-if="isFixedTimeMode"
       class="c-conductor__ticks"
       :view-bounds="viewBounds"
@@ -54,7 +54,7 @@
       aria-label="Time Conductor Settings"
     ></div>
 
-    <conductor-pop-up
+    <ConductorPopUp
       v-if="showConductorPopup"
       ref="conductorPopup"
       :bottom="false"

From e479c913e5244c1b0dc719c3e9af196376ecb0d9 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Wed, 22 May 2024 12:09:23 -0700
Subject: [PATCH 24/71] WIP: mostly fixed independent time conductor

---
 .../independent/IndependentTimeConductor.vue  | 50 +++++++------------
 1 file changed, 17 insertions(+), 33 deletions(-)

diff --git a/src/plugins/timeConductor/independent/IndependentTimeConductor.vue b/src/plugins/timeConductor/independent/IndependentTimeConductor.vue
index 4d842238c7e..e83c9edfbf9 100644
--- a/src/plugins/timeConductor/independent/IndependentTimeConductor.vue
+++ b/src/plugins/timeConductor/independent/IndependentTimeConductor.vue
@@ -24,7 +24,7 @@
     ref="timeConductorOptionsHolder"
     class="c-compact-tc"
     :class="[
-      isFixed ? 'is-fixed-mode' : independentTCEnabled ? 'is-realtime-mode' : 'is-fixed-mode',
+      isFixedTimeMode ? 'is-fixed-mode' : independentTCEnabled ? 'is-realtime-mode' : 'is-fixed-mode',
       { 'is-expanded': independentTCEnabled }
     ]"
     aria-label="Independent Time Conductor Panel"
@@ -67,7 +67,7 @@
       :object-path="objectPath"
       :is-independent="true"
       :time-options="timeOptions"
-      :is-fixed="isFixed"
+      :is-fixed="isFixedTimeMode"
       :bottom="true"
       :position-x="positionX"
       :position-y="positionY"
@@ -86,7 +86,6 @@ import { inject, provide, watch } from 'vue';
 
 import ConductorModeIcon from '@/plugins/timeConductor/ConductorModeIcon.vue';
 
-import { FIXED_MODE_KEY, TIME_CONTEXT_EVENTS } from '../../../api/time/constants.js';
 import ToggleSwitch from '../../../ui/components/ToggleSwitch.vue';
 import ConductorInputsFixed from '../ConductorInputsFixed.vue';
 import ConductorInputsRealtime from '../ConductorInputsRealtime.vue';
@@ -162,12 +161,13 @@ export default {
       timeSystemFormatter,
       isFixedTimeMode,
       isRealTimeMode,
-      bounds
+      bounds,
+      offsets
     };
   },
   data() {
     const timeOptions = this.domainObject.configuration.timeOptions ?? {
-      clockOffsets: this.clockOffsets,
+      clockOffsets: this.offsets,
       bounds: this.bounds
     };
 
@@ -180,6 +180,7 @@ export default {
     }
 
     return {
+      independentTCEnabled: this.domainObject.configuration.useIndependentTime === true,
       timeOptions,
       viewBounds: {
         start: this.bounds.start,
@@ -196,9 +197,6 @@ export default {
     },
     showRealtimeInputs() {
       return this.isRealTimeMode && this.independentTCEnabled;
-    },
-    independentTCEnabled() {
-      return this.domainObject.configuration.useIndependentTime === true;
     }
   },
   watch: {
@@ -225,8 +223,6 @@ export default {
             this.timeOptions.mode = this.timeOptions.mode.key;
           }
 
-          this.isFixed = this.timeOptions.mode === FIXED_MODE_KEY;
-
           this.initialize();
         }
       },
@@ -250,7 +246,6 @@ export default {
     this.initialize();
   },
   beforeUnmount() {
-    this.stopFollowingTimeContext();
     this.destroyIndependentTime();
   },
   methods: {
@@ -263,11 +258,7 @@ export default {
       }
     },
     toggleIndependentTC() {
-      this.openmct.objects.mutate(
-        this.domainObject,
-        'configuration.useIndependentTime',
-        !this.independentTCEnabled
-      );
+      this.independentTCEnabled = !this.independentTCEnabled;
 
       if (this.independentTCEnabled) {
         this.registerIndependentTimeOffsets();
@@ -275,20 +266,14 @@ export default {
         this.clearPopup();
         this.destroyIndependentTime();
       }
+
+      // TODO this is mutating a prop
+      this.openmct.objects.mutate(
+        this.domainObject,
+        'configuration.useIndependentTime',
+        this.independentTCEnabled
+      );
     },
-    // setTimeContext() {
-    //   if (this.timeContext) {
-    //     this.stopFollowingTimeContext();
-    //   }
-
-    //   this.timeContext = this.openmct.time.getContextForView(this.objectPath);
-    //   this.timeContext.on(TIME_CONTEXT_EVENTS.clockChanged, this.setTimeOptionsClock);
-    //   this.timeContext.on(TIME_CONTEXT_EVENTS.modeChanged, this.setTimeOptionsMode);
-    // },
-    // stopFollowingTimeContext() {
-    //   this.timeContext.off(TIME_CONTEXT_EVENTS.clockChanged, this.setTimeOptionsClock);
-    //   this.timeContext.off(TIME_CONTEXT_EVENTS.modeChanged, this.setTimeOptionsMode);
-    // },
     setTimeOptionsClock(clock) {
       this.setTimeOptionsOffsets();
       this.timeOptions.clock = clock.key;
@@ -298,7 +283,7 @@ export default {
       this.timeOptions.mode = mode;
     },
     setTimeOptionsOffsets() {
-      this.timeOptions.clockOffsets = this.timeOptions.clockOffsets ?? this.clockOffsets;
+      this.timeOptions.clockOffsets = this.timeOptions.clockOffsets ?? this.offsets;
       this.timeOptions.fixedOffsets = this.timeOptions.fixedOffsets ?? this.bounds;
     },
     saveFixedBounds(bounds) {
@@ -315,7 +300,6 @@ export default {
       this.updateTimeOptions(newOptions);
     },
     saveMode(mode) {
-      this.isFixed = mode === FIXED_MODE_KEY;
       const newOptions = this.updateTimeOptionProperty({
         mode: mode
       });
@@ -342,14 +326,14 @@ export default {
       if (this.isFixedTimeMode) {
         offsets = this.timeOptions.fixedOffsets ?? this.bounds;
       } else {
-        offsets = this.timeOptions.clockOffsets ?? this.clockOffsets();
+        offsets = this.timeOptions.clockOffsets ?? this.offsets;
       }
 
       if (!this.timeContext.hasOwnContext()) {
         this.unregisterIndependentTime = this.openmct.time.addIndependentContext(
           this.keyString,
           offsets,
-          this.isFixed ? undefined : this.timeOptions.clock
+          this.isFixedTimeMode ? undefined : this.timeOptions.clock
         );
       } else {
         if (this.isRealTimeMode) {

From 9e56a22bd9e4faede5f93d4b449724c6ef4d6dbd Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Wed, 5 Jun 2024 16:29:48 -0700
Subject: [PATCH 25/71] provide timecontext even if its the global/timeapi for
 shared components

---
 src/plugins/timeConductor/ConductorComponent.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/plugins/timeConductor/ConductorComponent.vue b/src/plugins/timeConductor/ConductorComponent.vue
index b3d722ac7b2..bdf6ec3a487 100644
--- a/src/plugins/timeConductor/ConductorComponent.vue
+++ b/src/plugins/timeConductor/ConductorComponent.vue
@@ -81,6 +81,7 @@ import ConductorTimeSystem from './ConductorTimeSystem.vue';
 import { useClock } from './useClock.js';
 import { useClockOffsets } from './useClockOffsets.js';
 import { useTimeBounds } from './useTimeBounds.js';
+import { useTimeContext } from './useTimeContext.js';
 import { useTimeMode } from './useTimeMode.js';
 import { useTimeSystem } from './useTimeSystem.js';
 
@@ -97,8 +98,9 @@ export default {
   },
   mixins: [conductorPopUpManager],
   inject: ['openmct', 'configuration'],
-  setup() {
+  setup(props) {
     const openmct = inject('openmct');
+    const { timeContext } = useTimeContext(openmct, () => props.objectPath);
     const { timeSystemFormatter, timeSystemDurationFormatter, isTimeSystemUTCBased } =
       useTimeSystem(openmct);
     const { timeMode, isFixedTimeMode, isRealTimeMode, getAllModeMetadata, getModeMetadata } =
@@ -110,6 +112,7 @@ export default {
     provide('timeSystemFormatter', timeSystemFormatter);
     provide('timeSystemDurationFormatter', timeSystemDurationFormatter);
     provide('isTimeSystemUTCBased', isTimeSystemUTCBased);
+    provide('timeContext', timeContext);
     provide('timeMode', timeMode);
     provide('isFixedTimeMode', isFixedTimeMode);
     provide('isRealTimeMode', isRealTimeMode);

From 0168f92a23897a3d0dd0cbdfa494ae4dd4ba2022 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Thu, 6 Jun 2024 13:13:49 -0700
Subject: [PATCH 26/71] incorporate provided timecontext into independant time
 conductor components

---
 .../timeConductor/ConductorInputsRealtime.vue | 33 +++++---------
 .../timeConductor/TimePopupRealtime.vue       | 43 +++++++++++--------
 .../independent/IndependentMode.vue           | 36 +++++-----------
 .../independent/IndependentTimeConductor.vue  | 21 +++++----
 4 files changed, 56 insertions(+), 77 deletions(-)

diff --git a/src/plugins/timeConductor/ConductorInputsRealtime.vue b/src/plugins/timeConductor/ConductorInputsRealtime.vue
index 927331990fd..0c67813f637 100644
--- a/src/plugins/timeConductor/ConductorInputsRealtime.vue
+++ b/src/plugins/timeConductor/ConductorInputsRealtime.vue
@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-  <time-popup-realtime
+  <TimePopupRealtime
     v-if="readOnly === false"
     :offsets="formattedOffsets"
     @focus="$event.target.select()"
@@ -63,14 +63,15 @@ export default {
   components: {
     TimePopupRealtime
   },
-  inject: ['openmct', 'bounds', 'clock', 'offsets', 'timeSystemKey', 'timeSystemFormatter', 'timeSystemDurationFormatter'],
+  inject: [
+    'openmct',
+    'bounds',
+    'clock',
+    'offsets',
+    'timeSystemFormatter',
+    'timeSystemDurationFormatter'
+  ],
   props: {
-    objectPath: {
-      type: Array,
-      default() {
-        return [];
-      }
-    },
     readOnly: {
       type: Boolean,
       default() {
@@ -84,21 +85,13 @@ export default {
       }
     }
   },
-  emits: ['offsets-updated', 'dismiss-inputs-realtime'],
+  emits: ['dismiss-inputs-realtime'],
   data() {
     return {
-      showTCInputStart: false,
-      showTCInputEnd: false,
       currentValue: this.clock.currentValue()
     };
   },
   computed: {
-    formattedBounds() {
-      return {
-        start: this.timeSystemFormatter.format(this.bounds.start),
-        end: this.timeSystemFormatter.format(this.bounds.end)
-      };
-    },
     formattedOffsets() {
       return {
         start: this.timeSystemDurationFormatter.format(Math.abs(this.offsets.start)),
@@ -111,7 +104,6 @@ export default {
   },
   watch: {
     bounds() {
-      console.log(this.formattedOffsets);
       this.updateCurrentValue();
     }
   },
@@ -119,11 +111,6 @@ export default {
     updateCurrentValue() {
       this.currentValue = this.clock.currentValue();
     },
-    timePopUpdate({ start, end }) {
-      this.offsets.start = [start.hours, start.minutes, start.seconds].join(':');
-      this.offsets.end = [end.hours, end.minutes, end.seconds].join(':');
-      this.setOffsetsFromView();
-    },
     dismiss() {
       this.$emit('dismiss-inputs-realtime');
     }
diff --git a/src/plugins/timeConductor/TimePopupRealtime.vue b/src/plugins/timeConductor/TimePopupRealtime.vue
index 8b3327d0f4e..46f50a8061e 100644
--- a/src/plugins/timeConductor/TimePopupRealtime.vue
+++ b/src/plugins/timeConductor/TimePopupRealtime.vue
@@ -163,14 +163,17 @@
 </template>
 
 <script>
+import { nextTick } from 'vue';
+
 export default {
+  inject: ['timeContext', 'timeSystemDurationFormatter'],
   props: {
     offsets: {
       type: Object,
       required: true
     }
   },
-  emits: ['update', 'dismiss'],
+  emits: ['dismiss'],
   data() {
     return {
       startInputHrs: '00',
@@ -185,6 +188,7 @@ export default {
   watch: {
     offsets: {
       handler() {
+        console.log('REMOVE THIS');
         this.setOffsets();
       },
       deep: true
@@ -227,18 +231,23 @@ export default {
       this.isDisabled = disabled;
     },
     submit() {
-      this.$emit('update', {
-        start: {
-          hours: this.startInputHrs,
-          minutes: this.startInputMins,
-          seconds: this.startInputSecs
-        },
-        end: {
-          hours: this.endInputHrs,
-          minutes: this.endInputMins,
-          seconds: this.endInputSecs
-        }
-      });
+      const formattedStartOffset = [
+        this.startInputHrs,
+        this.startInputMins,
+        this.startInputSecs
+      ].join(':');
+      const formattedEndOffset = [this.endInputHrs, this.endInputMins, this.endInputSecs].join(':');
+
+      let startOffset = 0 - this.timeSystemDurationFormatter.parse(formattedStartOffset);
+      let endOffset = this.timeSystemDurationFormatter.parse(formattedEndOffset);
+
+      const offsets = {
+        start: startOffset,
+        end: endOffset
+      };
+
+      this.timeContext.setClockOffsets(offsets);
+
       this.$emit('dismiss');
     },
     hide($event) {
@@ -255,13 +264,13 @@ export default {
       this[ref] = cv.toString().padStart(2, '0');
       this.validate();
     },
-    setOffsets() {
+    async setOffsets() {
       [this.startInputHrs, this.startInputMins, this.startInputSecs] =
         this.offsets.start.split(':');
       [this.endInputHrs, this.endInputMins, this.endInputSecs] = this.offsets.end.split(':');
-      this.$nextTick(() => {
-        this.numberSelect('startInputHrs');
-      });
+
+      await nextTick();
+      this.numberSelect('startInputHrs');
     },
     numberSelect(input) {
       if (this.$refs[input] === undefined || this.$refs[input] === null) {
diff --git a/src/plugins/timeConductor/independent/IndependentMode.vue b/src/plugins/timeConductor/independent/IndependentMode.vue
index c203d848fca..cb1d37234c4 100644
--- a/src/plugins/timeConductor/independent/IndependentMode.vue
+++ b/src/plugins/timeConductor/independent/IndependentMode.vue
@@ -23,7 +23,7 @@
   <div ref="modeMenuButton" class="c-ctrl-wrapper c-ctrl-wrapper--menus-up">
     <div class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left">
       <button
-        class="c-icon-button c-button--menu js-mode-button"
+        class="c-button--menu js-mode-button c-icon-button"
         :class="selectedMode.cssClass"
         aria-label="Independent Time Conductor Mode Menu"
         @click.prevent.stop="showModesMenu"
@@ -35,19 +35,10 @@
 </template>
 
 <script>
-import toggleMixin from '../../../ui/mixins/toggle-mixin.js';
-import modeMixin from '../mode-mixin.js';
 
 export default {
-  mixins: [toggleMixin, modeMixin],
-  inject: ['openmct'],
+  inject: ['openmct', 'timeMode', 'getAllModeMetadata', 'getModeMetadata'],
   props: {
-    mode: {
-      type: String,
-      default() {
-        return undefined;
-      }
-    },
     enabled: {
       type: Boolean,
       default() {
@@ -55,27 +46,25 @@ export default {
       }
     }
   },
-  emits: ['independent-mode-updated'],
   data: function () {
     return {
-      selectedMode: this.getModeMetadata(this.mode),
-      modes: []
+      selectedMode: this.getModeMetadata(this.timeMode)
     };
   },
   watch: {
-    mode: {
-      handler(newMode) {
-        this.setViewFromMode(newMode);
+    timeMode: {
+      handler() {
+        this.setView();
       }
     },
     enabled(newValue, oldValue) {
       if (newValue !== undefined && newValue !== oldValue && newValue === true) {
-        this.setViewFromMode(this.mode);
+        this.setView();
       }
     }
   },
   mounted: function () {
-    this.loadModes();
+    this.modes = this.getAllModeMetadata();
   },
   methods: {
     showModesMenu() {
@@ -89,13 +78,8 @@ export default {
       };
       this.openmct.menus.showSuperMenu(x, y, this.modes, menuOptions);
     },
-    setViewFromMode(mode) {
-      this.selectedMode = this.getModeMetadata(mode);
-    },
-    setMode(mode) {
-      this.setViewFromMode(mode);
-
-      this.$emit('independent-mode-updated', mode);
+    setView() {
+      this.selectedMode = this.getModeMetadata(this.timeMode);
     }
   }
 };
diff --git a/src/plugins/timeConductor/independent/IndependentTimeConductor.vue b/src/plugins/timeConductor/independent/IndependentTimeConductor.vue
index e83c9edfbf9..202be4d13b8 100644
--- a/src/plugins/timeConductor/independent/IndependentTimeConductor.vue
+++ b/src/plugins/timeConductor/independent/IndependentTimeConductor.vue
@@ -181,11 +181,7 @@ export default {
 
     return {
       independentTCEnabled: this.domainObject.configuration.useIndependentTime === true,
-      timeOptions,
-      viewBounds: {
-        start: this.bounds.start,
-        end: this.bounds.end
-      }
+      timeOptions
     };
   },
   computed: {
@@ -236,10 +232,12 @@ export default {
     //   deep: true
     // }
     clock(newClock) {
-      this.setTimeOptionsClock(newClock);
+      console.log('watchclock');
+      this.saveClock(newClock);
     },
     timeMode(newTimeMode) {
-      this.setTimeOptionsMode(newTimeMode);
+      console.log('watchmode');
+      this.saveMode(newTimeMode);
     }
   },
   created() {
@@ -336,11 +334,12 @@ export default {
           this.isFixedTimeMode ? undefined : this.timeOptions.clock
         );
       } else {
-        if (this.isRealTimeMode) {
-          this.timeContext.setClock(this.timeOptions.clock);
-        }
+        console.log('removed code');
+        // if (this.isRealTimeMode) {
+        //   this.timeContext.setClock(this.timeOptions.clock);
+        // }
 
-        this.timeContext.setMode(this.timeOptions.mode, offsets);
+        // this.timeContext.setMode(this.timeOptions.mode, offsets);
       }
     },
     destroyIndependentTime() {

From a0299820edcd9e19e76e3ecddf5b49ed270407bb Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Thu, 6 Jun 2024 14:49:44 -0700
Subject: [PATCH 27/71] better jsdoc message

---
 src/api/time/TimeAPI.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/api/time/TimeAPI.js b/src/api/time/TimeAPI.js
index b85bafc1cab..9eb6ce764dc 100644
--- a/src/api/time/TimeAPI.js
+++ b/src/api/time/TimeAPI.js
@@ -137,7 +137,7 @@ class TimeAPI extends GlobalTimeContext {
    * Get or set an independent time context which follows the TimeAPI timeSystem,
    * but with different offsets for a given domain object
    * @param {string} key The identifier key of the domain object these offsets are set for
-   * @param {ClockOffsets | TimeConductorBounds} value This maintains a sliding time window of a fixed width that automatically updates
+   * @param {ClockOffsets | TimeConductorBounds} value either offsets if in realtime mode, or bounds if in fixed mode
    * @param {key | string} clockKey the real time clock key currently in use
    */
   addIndependentContext(key, value, clockKey) {

From 0254367cd5df387eeff4b4486c449886e672e9f6 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Thu, 6 Jun 2024 14:50:21 -0700
Subject: [PATCH 28/71] fix missing clock on independent time mode change

---
 src/api/time/IndependentTimeContext.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/api/time/IndependentTimeContext.js b/src/api/time/IndependentTimeContext.js
index 5f5b3b139b0..a1c8369e708 100644
--- a/src/api/time/IndependentTimeContext.js
+++ b/src/api/time/IndependentTimeContext.js
@@ -324,8 +324,16 @@ class IndependentTimeContext extends TimeContext {
       return this.upstreamTimeContext.setMode(...arguments);
     }
 
-    if (mode === MODES.realtime && this.activeClock === undefined) {
-      throw `Unknown clock. Has a clock been registered with 'addClock'?`;
+    if (mode === MODES.realtime) {
+      // TODO: This should probably happen up front in creating an independent time context
+      // TODO: not just in time every time setMode is called
+      if (this.activeClock === undefined) {
+        this.activeClock = this.globalTimeContext.getClock();
+      }
+
+      if (this.activeClock === undefined) {
+        throw `Unknown clock. Has a clock been registered with 'addClock'?`;
+      }
     }
 
     if (mode !== this.mode) {

From 0cbdbc6807ead43ec2dea1eff29b6ae890fc00e0 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Thu, 6 Jun 2024 16:17:12 -0700
Subject: [PATCH 29/71] switch to reactive formatter for zoom

---
 src/plugins/timeConductor/ConductorComponent.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/plugins/timeConductor/ConductorComponent.vue b/src/plugins/timeConductor/ConductorComponent.vue
index bdf6ec3a487..30ffe11a552 100644
--- a/src/plugins/timeConductor/ConductorComponent.vue
+++ b/src/plugins/timeConductor/ConductorComponent.vue
@@ -194,8 +194,8 @@ export default {
         this.isZooming = false;
       } else {
         this.isZooming = true;
-        this.formattedBounds.start = this.timeFormatter.format(bounds.start);
-        this.formattedBounds.end = this.timeFormatter.format(bounds.end);
+        this.formattedBounds.start = this.timeSystemFormatter.format(bounds.start);
+        this.formattedBounds.end = this.timeSystemFormatter.format(bounds.end);
       }
     },
     endZoom(bounds) {
@@ -207,8 +207,6 @@ export default {
       }
     },
     setViewBounds(bounds) {
-      // this.formattedBounds.start = this.timeFormatter.format(bounds.start);
-      // this.formattedBounds.end = this.timeFormatter.format(bounds.end);
       this.viewBounds.start = bounds.start;
       this.viewBounds.end = bounds.end;
     }

From f3493907a25bed353680687dc0e3bc7c829e6362 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Thu, 6 Jun 2024 16:57:40 -0700
Subject: [PATCH 30/71] use reactive timecontext in fixed inputs

---
 .../timeConductor/ConductorInputsFixed.vue    | 111 ++----------------
 src/plugins/timeConductor/TimePopupFixed.vue  |  13 +-
 2 files changed, 19 insertions(+), 105 deletions(-)

diff --git a/src/plugins/timeConductor/ConductorInputsFixed.vue b/src/plugins/timeConductor/ConductorInputsFixed.vue
index cabf1f54a04..f2b15b57964 100644
--- a/src/plugins/timeConductor/ConductorInputsFixed.vue
+++ b/src/plugins/timeConductor/ConductorInputsFixed.vue
@@ -20,13 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-  <TimePopupFixed
-    v-if="readOnly === false"
-    :input-bounds="bounds"
-    :input-time-system="timeSystem"
-    @focus="$event.target.select()"
-    @dismiss="dismiss"
-  />
+  <TimePopupFixed v-if="readOnly === false" @focus="$event.target.select()" @dismiss="dismiss" />
   <div v-else class="c-compact-tc__setting-wrapper">
     <div
       class="c-compact-tc__setting-value u-fade-truncate--lg --no-sep"
@@ -47,29 +41,14 @@
 </template>
 
 <script>
-import _ from 'lodash';
-
-import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
 import TimePopupFixed from './TimePopupFixed.vue';
 
 export default {
   components: {
     TimePopupFixed
   },
-  inject: ['openmct'],
+  inject: ['openmct', 'timeContext', 'bounds', 'timeSystemFormatter'],
   props: {
-    inputBounds: {
-      type: Object,
-      default() {
-        return undefined;
-      }
-    },
-    objectPath: {
-      type: Array,
-      default() {
-        return [];
-      }
-    },
     readOnly: {
       type: Boolean,
       default() {
@@ -83,88 +62,16 @@ export default {
       }
     }
   },
-  emits: ['bounds-updated', 'dismiss-inputs-fixed'],
-  data() {
-    const timeSystem = this.openmct.time.getTimeSystem();
-    const timeFormatter = this.getFormatter(timeSystem.timeFormat);
-    let bounds = this.inputBounds || this.openmct.time.getBounds();
-
-    return {
-      timeSystem,
-      timeFormatter,
-      bounds: {
-        start: bounds.start,
-        end: bounds.end
-      },
-      formattedBounds: {
-        start: timeFormatter.format(bounds.start),
-        end: timeFormatter.format(bounds.end)
-      },
-      isUTCBased: timeSystem.isUTCBased
-    };
-  },
-  watch: {
-    objectPath: {
-      handler(newPath, oldPath) {
-        if (newPath === oldPath) {
-          return;
-        }
-
-        this.setTimeContext();
-      },
-      deep: true
-    },
-    inputBounds: {
-      handler(newBounds) {
-        this.handleNewBounds(newBounds);
-      },
-      deep: true
+  emits: ['dismiss-inputs-fixed'],
+  computed: {
+    formattedBounds() {
+      return {
+        start: this.timeSystemFormatter.format(this.bounds.start),
+        end: this.timeSystemFormatter.format(this.bounds.end)
+      };
     }
   },
-  mounted() {
-    this.handleNewBounds = _.throttle(this.handleNewBounds, 300);
-    this.setTimeSystem(JSON.parse(JSON.stringify(this.openmct.time.getTimeSystem())));
-    this.openmct.time.on(TIME_CONTEXT_EVENTS.timeSystemChanged, this.setTimeSystem);
-    this.setTimeContext();
-  },
-  beforeUnmount() {
-    this.openmct.time.off(TIME_CONTEXT_EVENTS.timeSystemChanged, this.setTimeSystem);
-    this.stopFollowingTimeContext();
-  },
   methods: {
-    setTimeContext() {
-      this.stopFollowingTimeContext();
-      this.timeContext = this.openmct.time.getContextForView(this.objectPath);
-
-      this.handleNewBounds(this.timeContext.getBounds());
-      this.timeContext.on(TIME_CONTEXT_EVENTS.boundsChanged, this.handleNewBounds);
-    },
-    stopFollowingTimeContext() {
-      if (this.timeContext) {
-        this.timeContext.off(TIME_CONTEXT_EVENTS.boundsChanged, this.handleNewBounds);
-      }
-    },
-    handleNewBounds(bounds) {
-      this.setBounds(bounds);
-      this.setViewFromBounds(bounds);
-    },
-    setBounds(bounds) {
-      this.bounds = bounds;
-    },
-    setViewFromBounds(bounds) {
-      this.formattedBounds.start = this.timeFormatter.format(bounds.start);
-      this.formattedBounds.end = this.timeFormatter.format(bounds.end);
-    },
-    setTimeSystem(timeSystem) {
-      this.timeSystem = timeSystem;
-      this.timeFormatter = this.getFormatter(timeSystem.timeFormat);
-      this.isUTCBased = timeSystem.isUTCBased;
-    },
-    getFormatter(key) {
-      return this.openmct.telemetry.getValueFormatter({
-        format: key
-      }).formatter;
-    },
     dismiss() {
       this.$emit('dismiss-inputs-fixed');
     }
diff --git a/src/plugins/timeConductor/TimePopupFixed.vue b/src/plugins/timeConductor/TimePopupFixed.vue
index 3046b9eb9e9..4e828b028d0 100644
--- a/src/plugins/timeConductor/TimePopupFixed.vue
+++ b/src/plugins/timeConductor/TimePopupFixed.vue
@@ -122,7 +122,14 @@ export default {
   components: {
     DatePicker
   },
-  inject: ['openmct', 'isTimeSystemUTCBased', 'timeSystemFormatter', 'timeSystemDurationFormatter', 'bounds'],
+  inject: [
+    'openmct',
+    'isTimeSystemUTCBased',
+    'timeContext',
+    'timeSystemFormatter',
+    'timeSystemDurationFormatter',
+    'bounds'
+  ],
   emits: ['update', 'dismiss'],
   data() {
     return {
@@ -174,7 +181,7 @@ export default {
           `${this.formattedBounds.end} ${this.formattedBounds.endTime}`
         );
 
-        this.openmct.time.setBounds({
+        this.timeContext.setBounds({
           start: start,
           end: end
         });
@@ -228,7 +235,7 @@ export default {
           }
         } else {
           if (input === currentInput) {
-            validationResult = this.openmct.time.validateBounds(boundsValues);
+            validationResult = this.timeContext.validateBounds(boundsValues);
           }
         }
 

From 1aa30975e55fe272c1767f36c53287f8535f1899 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Mon, 10 Jun 2024 18:24:17 -0700
Subject: [PATCH 31/71] use reactive clock props cleanup unused variables

---
 src/plugins/timeConductor/ConductorClock.vue  |   8 +-
 src/plugins/timeConductor/ConductorMode.vue   |  11 +-
 src/plugins/timeConductor/ConductorPopUp.vue  | 116 +-----------------
 .../independent/IndependentClock.vue          |  56 ++-------
 .../independent/IndependentMode.vue           |   2 +-
 src/plugins/timeConductor/useClock.js         |   6 +-
 6 files changed, 18 insertions(+), 181 deletions(-)

diff --git a/src/plugins/timeConductor/ConductorClock.vue b/src/plugins/timeConductor/ConductorClock.vue
index db162167c62..f4321ff1337 100644
--- a/src/plugins/timeConductor/ConductorClock.vue
+++ b/src/plugins/timeConductor/ConductorClock.vue
@@ -48,16 +48,14 @@ export default {
       }
     }
   },
-  data() {
-    return {
-      clocks: this.getAllClockMetadata(this.configuration.menuOptions)
-    };
-  },
   computed: {
     selectedClock() {
       return this.getClockMetadata(this.clock);
     }
   },
+  mounted() {
+    this.clocks = this.getAllClockMetadata(this.configuration.menuOptions);
+  },
   methods: {
     showClocksMenu() {
       const elementBoundingClientRect = this.$refs.clockButton.getBoundingClientRect();
diff --git a/src/plugins/timeConductor/ConductorMode.vue b/src/plugins/timeConductor/ConductorMode.vue
index d2fab3fdc86..da631bc0f95 100644
--- a/src/plugins/timeConductor/ConductorMode.vue
+++ b/src/plugins/timeConductor/ConductorMode.vue
@@ -44,16 +44,7 @@
 
 <script>
 export default {
-  inject: [
-    'openmct',
-    'configuration',
-    'bounds',
-    'offsets',
-    'timeMode',
-    'isFixedTimeMode',
-    'getAllModeMetadata',
-    'getModeMetadata'
-  ],
+  inject: ['openmct', 'timeMode', 'getAllModeMetadata', 'getModeMetadata'],
   props: {
     readOnly: {
       type: Boolean,
diff --git a/src/plugins/timeConductor/ConductorPopUp.vue b/src/plugins/timeConductor/ConductorPopUp.vue
index b89bb8c221a..1086d7adff0 100644
--- a/src/plugins/timeConductor/ConductorPopUp.vue
+++ b/src/plugins/timeConductor/ConductorPopUp.vue
@@ -5,8 +5,6 @@
         v-if="isIndependent"
         class="c-conductor__mode-select"
         title="Sets the Time Conductor's mode."
-        :mode="timeOptionMode"
-        @independent-mode-updated="saveIndependentMode"
       />
       <ConductorMode
         v-else
@@ -17,8 +15,6 @@
         v-if="isIndependent"
         class="c-conductor__mode-select"
         title="Sets the Time Conductor's clock."
-        :clock="timeOptionClock"
-        @independent-clock-updated="saveIndependentClock"
       />
       <ConductorClock
         v-else
@@ -37,25 +33,12 @@
         title="Select and apply previously entered time intervals."
       />
     </div>
-    <conductor-inputs-fixed
-      v-if="isFixedTimeMode"
-      :input-bounds="bounds"
-      :object-path="objectPath"
-      @bounds-updated="saveFixedBounds"
-      @dismiss-inputs-fixed="dismiss"
-    />
-    <conductor-inputs-realtime
-      v-else
-      :input-bounds="bounds"
-      :object-path="objectPath"
-      @offsets-updated="saveClockOffsets"
-      @dismiss-inputs-realtime="dismiss"
-    />
+    <ConductorInputsFixed v-if="isFixedTimeMode" @dismiss-inputs-fixed="dismiss" />
+    <ConductorInputsRealtime v-else @dismiss-inputs-realtime="dismiss" />
   </div>
 </template>
 
 <script>
-import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
 import ConductorClock from './ConductorClock.vue';
 import ConductorHistory from './ConductorHistory.vue';
 import ConductorInputsFixed from './ConductorInputsFixed.vue';
@@ -92,45 +75,14 @@ export default {
         return false;
       }
     },
-    timeOptions: {
-      type: Object,
-      default() {
-        return undefined;
-      }
-    },
     bottom: {
       type: Boolean,
       default() {
         return false;
       }
-    },
-    objectPath: {
-      type: Array,
-      default() {
-        return [];
-      }
     }
   },
-  emits: [
-    'popup-loaded',
-    'dismiss',
-    'independent-clock-updated',
-    'fixed-bounds-updated',
-    'clock-offsets-updated',
-    'independent-mode-updated'
-  ],
-  data() {
-    const bounds = this.openmct.time.getBounds();
-    const timeSystem = this.openmct.time.getTimeSystem();
-
-    return {
-      timeSystem,
-      bounds: {
-        start: bounds.start,
-        end: bounds.end
-      }
-    };
-  },
+  emits: ['popup-loaded', 'dismiss'],
   computed: {
     position() {
       const position = {
@@ -149,74 +101,12 @@ export default {
       const independentClass = this.isIndependent ? 'itc-popout ' : '';
 
       return `${independentClass}${value}c-tc-input-popup--${mode}`;
-    },
-    timeOptionMode() {
-      return this.timeOptions?.mode;
-    },
-    timeOptionClock() {
-      return this.timeOptions?.clock;
-    }
-  },
-  watch: {
-    objectPath: {
-      handler(newPath, oldPath) {
-        //domain object or view has probably changed
-        if (newPath === oldPath) {
-          return;
-        }
-
-        this.setTimeContext();
-      },
-      deep: true
     }
   },
   mounted() {
     this.$emit('popup-loaded');
-    this.setTimeContext();
-  },
-  beforeUnmount() {
-    this.stopFollowingTimeContext();
   },
   methods: {
-    setTimeContext() {
-      if (this.timeContext) {
-        this.stopFollowingTimeContext();
-      }
-
-      this.timeContext = this.openmct.time.getContextForView(this.objectPath);
-
-      this.timeContext.on(TIME_CONTEXT_EVENTS.clockChanged, this.setViewFromClock);
-      this.timeContext.on(TIME_CONTEXT_EVENTS.boundsChanged, this.setBounds);
-
-      this.setViewFromClock(this.timeContext.getClock());
-      this.setBounds(this.timeContext.getBounds());
-    },
-    stopFollowingTimeContext() {
-      this.timeContext.off(TIME_CONTEXT_EVENTS.clockChanged, this.setViewFromClock);
-      this.timeContext.off(TIME_CONTEXT_EVENTS.boundsChanged, this.setBounds);
-    },
-    setViewFromClock() {
-      this.bounds = this.isFixedTimeMode
-        ? this.timeContext.getBounds()
-        : this.openmct.time.getClockOffsets();
-    },
-    setBounds(bounds, isTick) {
-      if (this.isFixedTimeMode || !isTick) {
-        this.bounds = bounds;
-      }
-    },
-    saveFixedBounds(bounds) {
-      this.$emit('fixed-bounds-updated', bounds);
-    },
-    saveClockOffsets(offsets) {
-      this.$emit('clock-offsets-updated', offsets);
-    },
-    saveIndependentMode(mode) {
-      this.$emit('independent-mode-updated', mode);
-    },
-    saveIndependentClock(clockKey) {
-      this.$emit('independent-clock-updated', clockKey);
-    },
     dismiss() {
       this.$emit('dismiss');
     }
diff --git a/src/plugins/timeConductor/independent/IndependentClock.vue b/src/plugins/timeConductor/independent/IndependentClock.vue
index 7ec8a044951..d940781c9fb 100644
--- a/src/plugins/timeConductor/independent/IndependentClock.vue
+++ b/src/plugins/timeConductor/independent/IndependentClock.vue
@@ -36,20 +36,9 @@
 </template>
 
 <script>
-import { TIME_CONTEXT_EVENTS } from '../../../api/time/constants.js';
-import toggleMixin from '../../../ui/mixins/toggle-mixin.js';
-import clockMixin from '../clock-mixin.js';
-
 export default {
-  mixins: [toggleMixin, clockMixin],
-  inject: ['openmct'],
+  inject: ['openmct', 'clock', 'getAllClockMetadata', 'getClockMetadata'],
   props: {
-    clock: {
-      type: String,
-      default() {
-        return undefined;
-      }
-    },
     enabled: {
       type: Boolean,
       default() {
@@ -57,33 +46,20 @@ export default {
       }
     }
   },
-  emits: ['independent-clock-updated'],
-  data() {
-    const activeClock = this.getActiveClock();
-
-    return {
-      selectedClock: activeClock ? this.getClockMetadata(activeClock) : undefined,
-      clocks: []
-    };
+  computed: {
+    selectedClock() {
+      return this.getClockMetadata(this.clock);
+    }
   },
   watch: {
-    clock(newClock, oldClock) {
-      this.setViewFromClock(newClock);
-    },
     enabled(newValue, oldValue) {
       if (newValue !== undefined && newValue !== oldValue && newValue === true) {
         this.setViewFromClock(this.clock);
       }
     }
   },
-  beforeUnmount() {
-    this.openmct.time.off(TIME_CONTEXT_EVENTS.clockChanged, this.setViewFromClock);
-  },
-  mounted: function () {
-    this.loadClocks();
-    this.setViewFromClock(this.clock);
-
-    this.openmct.time.on(TIME_CONTEXT_EVENTS.clockChanged, this.setViewFromClock);
+  mounted() {
+    this.clocks = this.getAllClockMetadata();
   },
   methods: {
     showClocksMenu() {
@@ -95,27 +71,11 @@ export default {
         menuClass: 'c-conductor__clock-menu c-super-menu--sm',
         placement: this.openmct.menus.menuPlacement.BOTTOM_RIGHT
       };
-      this.openmct.menus.showSuperMenu(x, y, this.clocks, menuOptions);
-    },
-    getMenuOptions() {
-      let currentGlobalClock = this.getActiveClock();
 
-      //Create copy of active clock so the time API does not get reactified.
-      currentGlobalClock = Object.assign(
-        {},
-        {
-          name: currentGlobalClock.name,
-          clock: currentGlobalClock.key,
-          timeSystem: this.openmct.time.getTimeSystem().key
-        }
-      );
-
-      return [currentGlobalClock];
+      this.openmct.menus.showSuperMenu(x, y, this.clocks, menuOptions);
     },
     setClock(clockKey) {
       this.setViewFromClock(clockKey);
-
-      this.$emit('independent-clock-updated', clockKey);
     },
     setViewFromClock(clockOrKey) {
       let clock = clockOrKey;
diff --git a/src/plugins/timeConductor/independent/IndependentMode.vue b/src/plugins/timeConductor/independent/IndependentMode.vue
index cb1d37234c4..88a959c118a 100644
--- a/src/plugins/timeConductor/independent/IndependentMode.vue
+++ b/src/plugins/timeConductor/independent/IndependentMode.vue
@@ -46,7 +46,7 @@ export default {
       }
     }
   },
-  data: function () {
+  data() {
     return {
       selectedMode: this.getModeMetadata(this.timeMode)
     };
diff --git a/src/plugins/timeConductor/useClock.js b/src/plugins/timeConductor/useClock.js
index 6f5c43fe059..a43ef0e983b 100644
--- a/src/plugins/timeConductor/useClock.js
+++ b/src/plugins/timeConductor/useClock.js
@@ -66,10 +66,8 @@ export function useClock(openmct, objectPath) {
       ? menuOptions
           .map((menuOption) => menuOption.clock)
           .filter((key, index, array) => key !== undefined && array.indexOf(key) === index)
-          .map((clockKey) =>
-            timeContext.value.getAllClocks().find((_clock) => _clock.key === clockKey)
-          )
-      : timeContext.value.getAllClocks();
+          .map((clockKey) => openmct.time.getAllClocks().find((_clock) => _clock.key === clockKey))
+      : openmct.time.getAllClocks();
 
     const clockMetadata = clocks.map(getClockMetadata);
 

From 1d77368c7ce19703656da36d995ab21e388f8880 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Wed, 3 Jul 2024 11:29:10 -0700
Subject: [PATCH 32/71] edit for clarity

---
 src/api/time/TimeAPI.js | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/api/time/TimeAPI.js b/src/api/time/TimeAPI.js
index 9eb6ce764dc..504c578a629 100644
--- a/src/api/time/TimeAPI.js
+++ b/src/api/time/TimeAPI.js
@@ -135,30 +135,30 @@ class TimeAPI extends GlobalTimeContext {
 
   /**
    * Get or set an independent time context which follows the TimeAPI timeSystem,
-   * but with different offsets for a given domain object
-   * @param {string} key The identifier key of the domain object these offsets are set for
-   * @param {ClockOffsets | TimeConductorBounds} value either offsets if in realtime mode, or bounds if in fixed mode
-   * @param {key | string} clockKey the real time clock key currently in use
+   * but with different bounds for a given domain object
+   * @param {string} keyString The keyString identifier of the domain object these offsets are set for
+   * @param {TimeConductorBounds | ClockOffsets} boundsOrOffsets either bounds if in fixed mode, or offsets if in realtime mode
+   * @param {string} clockKey the key for the real time clock to use
    */
-  addIndependentContext(key, value, clockKey) {
-    let timeContext = this.getIndependentContext(key);
+  addIndependentContext(keyString, boundsOrOffsets, clockKey) {
+    let timeContext = this.getIndependentContext(keyString);
 
     //stop following upstream time context since the view has it's own
     timeContext.resetContext();
 
     if (clockKey) {
       timeContext.setClock(clockKey);
-      timeContext.setMode(REALTIME_MODE_KEY, value);
+      timeContext.setMode(REALTIME_MODE_KEY, boundsOrOffsets);
     } else {
-      timeContext.setMode(FIXED_MODE_KEY, value);
+      timeContext.setMode(FIXED_MODE_KEY, boundsOrOffsets);
     }
 
     // Notify any nested views to update, pass in the viewKey so that particular view can skip getting an upstream context
-    this.emit('refreshContext', key);
+    this.emit('refreshContext', keyString);
 
     return () => {
       //follow any upstream time context
-      this.emit('removeOwnContext', key);
+      this.emit('removeOwnContext', keyString);
     };
   }
 

From 7ace3d00bed3d90a5c61811cc462dde5ce3b0eae Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Wed, 3 Jul 2024 11:32:59 -0700
Subject: [PATCH 33/71] remove unused injection

---
 src/plugins/timeConductor/ConductorPopUp.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugins/timeConductor/ConductorPopUp.vue b/src/plugins/timeConductor/ConductorPopUp.vue
index 1086d7adff0..9ba3243bb75 100644
--- a/src/plugins/timeConductor/ConductorPopUp.vue
+++ b/src/plugins/timeConductor/ConductorPopUp.vue
@@ -59,7 +59,7 @@ export default {
     ConductorInputsFixed,
     ConductorInputsRealtime
   },
-  inject: ['openmct', 'configuration', 'isFixedTimeMode'],
+  inject: ['openmct', 'isFixedTimeMode'],
   props: {
     positionX: {
       type: Number,

From f1cf12d4128e324faeda9f8eb949ad35ffa94b95 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Wed, 3 Jul 2024 11:33:18 -0700
Subject: [PATCH 34/71] change ITC to use composables

---
 .../independent/IndependentTimeConductor.vue  | 247 +++++++++---------
 1 file changed, 126 insertions(+), 121 deletions(-)

diff --git a/src/plugins/timeConductor/independent/IndependentTimeConductor.vue b/src/plugins/timeConductor/independent/IndependentTimeConductor.vue
index 202be4d13b8..a6e1c416f7f 100644
--- a/src/plugins/timeConductor/independent/IndependentTimeConductor.vue
+++ b/src/plugins/timeConductor/independent/IndependentTimeConductor.vue
@@ -42,7 +42,6 @@
     <ConductorInputsFixed
       v-if="showFixedInputs"
       class="c-compact-tc__bounds--fixed"
-      :object-path="objectPath"
       :read-only="true"
       :compact="true"
     />
@@ -50,7 +49,6 @@
     <ConductorInputsRealtime
       v-if="showRealtimeInputs"
       class="c-compact-tc__bounds--real-time"
-      :object-path="objectPath"
       :read-only="true"
       :compact="true"
     />
@@ -64,18 +62,11 @@
     <ConductorPopUp
       v-if="showConductorPopup"
       ref="conductorPopup"
-      :object-path="objectPath"
       :is-independent="true"
-      :time-options="timeOptions"
-      :is-fixed="isFixedTimeMode"
       :bottom="true"
       :position-x="positionX"
       :position-y="positionY"
       @popup-loaded="initializePopup"
-      @independent-mode-updated="saveMode"
-      @independent-clock-updated="saveClock"
-      @fixed-bounds-updated="saveFixedBounds"
-      @clock-offsets-updated="saveClockOffsets"
       @dismiss="clearPopup"
     />
   </div>
@@ -131,7 +122,19 @@ export default {
     const { offsets } = useClockOffsets(openmct, getReactiveObjectPath);
 
     watch(timeContext, () => {
-      console.log('context changed');
+      console.log('context changed setup');
+    });
+
+    watch(() => props.domainObject, () => {
+      console.log('domainObject changed setup');
+    });
+
+    watch(() => props.domainObject.configuration.useIndependentTime, () => {
+      console.log('domainObject configuration changed setup');
+    });
+
+    watch(() => props.objectPath, () => {
+      console.log('objectPath changed setup');
     });
 
     provide('timeContext', timeContext);
@@ -162,29 +165,33 @@ export default {
       isFixedTimeMode,
       isRealTimeMode,
       bounds,
+      isTick,
       offsets
     };
   },
   data() {
-    const timeOptions = this.domainObject.configuration.timeOptions ?? {
-      clockOffsets: this.offsets,
-      bounds: this.bounds
-    };
-
-    timeOptions.clock = timeOptions.clock ?? this.clock.key;
-    timeOptions.mode = timeOptions.mode ?? this.timeMode;
-
-    // check for older configurations that stored a key
-    if (timeOptions.mode.key) {
-      timeOptions.mode = timeOptions.mode.key;
-    }
-
     return {
+      keyString: this.openmct.objects.makeKeyString(this.domainObject.identifier),
       independentTCEnabled: this.domainObject.configuration.useIndependentTime === true,
-      timeOptions
     };
   },
   computed: {
+    myKeyString() {
+      const identifier = this.domainObject.identifier;
+      return this.openmct.objects.makeKeyString(identifier);
+    },
+    do() {
+      console.log(this.objectPath[0]);
+      return this.objectPath[0];
+    },
+    // itcEnabled() {
+    //   console.log(`itcEnabled: ${this.domainObject.configuration.useIndependentTime === true}`);
+    //   return this.domainObject.configuration.useIndependentTime === true;
+    // },
+    configuration() {
+      console.log('why does this not fire when watch domainObject fires?');
+      return this.domainObject.configuration && {};
+    },
     toggleTitle() {
       return `${this.independentTCEnabled ? 'Disable' : 'Enable'} Independent Time Conductor`;
     },
@@ -196,129 +203,135 @@ export default {
     }
   },
   watch: {
-    domainObject: {
-      handler(domainObject) {
-        const key = this.openmct.objects.makeKeyString(domainObject.identifier);
-        if (key !== this.keyString) {
-          //domain object has changed
-          console.log(`TODO: THIS SHOULD NEVER HAPPEN!!! `);
-          this.destroyIndependentTime();
-
-          // this.independentTCEnabled = domainObject.configuration.useIndependentTime === true;
-          this.timeOptions = domainObject.configuration.timeOptions ?? {
-            clockOffsets: this.openmct.time.getClockOffsets(),
-            fixedOffsets: this.openmct.time.getBounds()
-          };
-
-          // these may not be set due to older configurations
-          this.timeOptions.clock = this.timeOptions.clock ?? this.openmct.time.getClock().key;
-          this.timeOptions.mode = this.timeOptions.mode ?? this.openmct.time.getMode();
-
-          // check for older configurations that stored a key
-          if (this.timeOptions.mode.key) {
-            this.timeOptions.mode = this.timeOptions.mode.key;
-          }
-
-          this.initialize();
-        }
-      },
-      deep: true
+    myKeyString() {
+      console.log(`object changed`);
     },
-    // objectPath: {
-    //   handler(newPath, oldPath) {
-    //     //domain object or view has probably changed
-    //     this.setTimeContext();
-    //   },
-    //   deep: true
-    // }
-    clock(newClock) {
-      console.log('watchclock');
-      this.saveClock(newClock);
+    timeContext() {
+      const keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
+
+      if (keyString !== this.keyString) {
+        //domain object in object view has changed (via tree navigation)
+        this.unregisterIndependentTimeContext?.();
+        this.keyString = keyString;
+
+        this.independentTCEnabled = this.domainObject.configuration.useIndependentTime === true;
+
+        this.setTimeOptions();
+
+        this.initialize();
+      }
     },
-    timeMode(newTimeMode) {
-      console.log('watchmode');
-      this.saveMode(newTimeMode);
+    independentTCEnabled() {
+      this.handleIndependentTimeConductorChange();
+    },
+    clock() {
+      this.saveClock();
+    },
+    timeMode() {
+      this.saveMode();
+    },
+    clockOffsets() {
+      this.saveClockOffsets();
+    },
+    bounds() {
+      if (this.isTick === false) {
+        this.saveFixedBounds();
+      }
     }
   },
   created() {
+    // this.initialize();
+  },
+  mounted() {
+    this.setTimeOptions();
+
     this.initialize();
   },
   beforeUnmount() {
-    this.destroyIndependentTime();
+    this.unregisterIndependentTimeContext?.();
   },
   methods: {
     initialize() {
-      this.keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
-      // this.setTimeContext();
-
       if (this.independentTCEnabled) {
-        this.registerIndependentTimeOffsets();
+        this.registerIndependentTimeContext();
       }
     },
-    toggleIndependentTC() {
-      this.independentTCEnabled = !this.independentTCEnabled;
-
+    handleIndependentTimeConductorChange() {
       if (this.independentTCEnabled) {
-        this.registerIndependentTimeOffsets();
+        this.registerIndependentTimeContext();
       } else {
         this.clearPopup();
-        this.destroyIndependentTime();
+        this.unregisterIndependentTimeContext?.();
       }
+    },
+    toggleIndependentTC() {
+      this.independentTCEnabled = !this.independentTCEnabled;
 
-      // TODO this is mutating a prop
       this.openmct.objects.mutate(
         this.domainObject,
         'configuration.useIndependentTime',
         this.independentTCEnabled
       );
     },
-    setTimeOptionsClock(clock) {
-      this.setTimeOptionsOffsets();
-      this.timeOptions.clock = clock.key;
+    setTimeOptions() {
+      this.timeOptions = this.domainObject.configuration.timeOptions ?? {
+        clockOffsets: this.offsets,
+        fixedOffsets: this.bounds
+      };
+
+      if (!this.timeOptions.clock) {
+        // can remove openmct.time.getClock() if timeContexts have clock in fixed time
+        this.timeOptions.clock = this.clock?.key ?? this.openmct.time.getClock().key;
+      }
+
+      if (!this.timeOptions.mode) {
+        this.timeOptions.mode = this.timeMode;
+      }
+
+      // check for older configurations that stored a key
+      if (this.timeOptions.mode.key) {
+        this.timeOptions.mode = this.timeOptions.mode.key;
+      }
     },
-    setTimeOptionsMode(mode) {
-      this.setTimeOptionsOffsets();
-      this.timeOptions.mode = mode;
+    saveFixedBounds() {
+      this.timeOptions.fixedOffsets = this.bounds;
+      this.updateTimeOptions();
     },
-    setTimeOptionsOffsets() {
-      this.timeOptions.clockOffsets = this.timeOptions.clockOffsets ?? this.offsets;
-      this.timeOptions.fixedOffsets = this.timeOptions.fixedOffsets ?? this.bounds;
+    saveClockOffsets() {
+      this.timeOptions.clockOffsets = this.offsets;
+      this.updateTimeOptions();
     },
-    saveFixedBounds(bounds) {
-      const newOptions = this.updateTimeOptionProperty({
-        fixedOffsets: bounds
-      });
-      this.updateTimeOptions(newOptions);
+    saveMode() {
+      this.timeOptions.mode = this.timeMode;
+      this.updateTimeOptions();
     },
-    saveClockOffsets(offsets) {
-      const newOptions = this.updateTimeOptionProperty({
-        clockOffsets: offsets
-      });
-
-      this.updateTimeOptions(newOptions);
+    saveClock() {
+      this.timeOptions.clock = this.clock.key;
+      this.updateTimeOptions();
     },
-    saveMode(mode) {
-      const newOptions = this.updateTimeOptionProperty({
-        mode: mode
-      });
-
-      this.updateTimeOptions(newOptions);
+    updateTimeOptions() {
+      this.registerIndependentTimeContext();
+      this.openmct.objects.mutate(this.domainObject, 'configuration.timeOptions', this.timeOptions);
     },
-    saveClock(clock) {
-      const newOptions = this.updateTimeOptionProperty({
-        clock
-      });
+    registerIndependentTimeContext() {
+      const bounds = this.timeOptions.fixedOffsets ?? this.bounds;
+      const offsets = this.timeOptions.clockOffsets ?? this.offsets;
+      const clockKey = this.timeOptions.clock?.key || this.clock.key;
 
-      this.updateTimeOptions(newOptions);
-    },
-    updateTimeOptions(options) {
-      this.timeOptions = options;
+      const independentTimeContextBoundsOrOffsets = this.isFixedTimeMode ? bounds : offsets;
+      const independentTimeContextClockKey = this.isFixedTimeMode ? undefined : clockKey;
 
-      this.registerIndependentTimeOffsets();
-      this.openmct.objects.mutate(this.domainObject, 'configuration.timeOptions', this.timeOptions);
+      if (!this.timeContext.hasOwnContext()) {
+        this.unregisterIndependentTimeContext = this.openmct.time.addIndependentContext(
+          this.keyString,
+          independentTimeContextBoundsOrOffsets,
+          independentTimeContextClockKey
+        );
+      }
     },
     registerIndependentTimeOffsets() {
       // const timeContext = this.openmct.time.getIndependentContext(this.keyString);
+      const clockKey = this.timeOptions.clock?.key || this.clock.key;
       let offsets;
 
       if (this.isFixedTimeMode) {
@@ -328,10 +341,10 @@ export default {
       }
 
       if (!this.timeContext.hasOwnContext()) {
-        this.unregisterIndependentTime = this.openmct.time.addIndependentContext(
+        this.unregisterIndependentTimeContext = this.openmct.time.addIndependentContext(
           this.keyString,
           offsets,
-          this.isFixedTimeMode ? undefined : this.timeOptions.clock
+          this.isFixedTimeMode ? undefined : clockKey
         );
       } else {
         console.log('removed code');
@@ -341,14 +354,6 @@ export default {
 
         // this.timeContext.setMode(this.timeOptions.mode, offsets);
       }
-    },
-    destroyIndependentTime() {
-      if (this.unregisterIndependentTime) {
-        this.unregisterIndependentTime();
-      }
-    },
-    updateTimeOptionProperty(option) {
-      return Object.assign({}, this.timeOptions, option);
     }
   }
 };

From b3c99aef80b821fbcfa5ab6a34e15b6d596dec8a Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Wed, 3 Jul 2024 11:33:36 -0700
Subject: [PATCH 35/71] update to use composables

---
 src/plugins/timeConductor/TimePopupFixed.vue | 89 +++++++++++---------
 1 file changed, 48 insertions(+), 41 deletions(-)

diff --git a/src/plugins/timeConductor/TimePopupFixed.vue b/src/plugins/timeConductor/TimePopupFixed.vue
index 4e828b028d0..db4b52fe97a 100644
--- a/src/plugins/timeConductor/TimePopupFixed.vue
+++ b/src/plugins/timeConductor/TimePopupFixed.vue
@@ -31,9 +31,15 @@
       <div
         class="pr-time-input pr-time-input--date pr-time-input--input-and-button pr-time-input-start-date"
       >
+        <DatePicker
+          v-if="canSplitDateTime"
+          class="c-ctrl-wrapper--menus-right"
+          :default-date-time="formattedBounds.startDate"
+          @date-selected="startDateSelected"
+        />
         <input
           ref="startDate"
-          v-model="formattedBounds.start"
+          v-model="formattedBounds.startDate"
           class="c-input--datetime"
           type="text"
           autocorrect="off"
@@ -41,12 +47,6 @@
           aria-label="Start date"
           @change="validateAllBounds('startDate')"
         />
-        <DatePicker
-          v-if="isTimeSystemUTCBased"
-          class="c-ctrl-wrapper--menus-right"
-          :default-date-time="formattedBounds.start"
-          @date-selected="startDateSelected"
-        />
       </div>
 
       <div class="pr-time-input pr-time-input--time pr-time-input-start-time">
@@ -67,9 +67,15 @@
       <div
         class="pr-time-input pr-time-input--date pr-time-input--input-and-button pr-time-input-end-date"
       >
+        <DatePicker
+          v-if="canSplitDateTime"
+          class="c-ctrl-wrapper--menus-left"
+          :default-date-time="formattedBounds.endDate"
+          @date-selected="endDateSelected"
+        />
         <input
           ref="endDate"
-          v-model="formattedBounds.end"
+          v-model="formattedBounds.endDate"
           class="c-input--datetime"
           type="text"
           autocorrect="off"
@@ -77,12 +83,6 @@
           aria-label="End date"
           @change="validateAllBounds('endDate')"
         />
-        <DatePicker
-          v-if="isTimeSystemUTCBased"
-          class="c-ctrl-wrapper--menus-left"
-          :default-date-time="formattedBounds.end"
-          @date-selected="endDateSelected"
-        />
       </div>
 
       <div class="pr-time-input pr-time-input--time pr-time-input-end-time">
@@ -137,24 +137,30 @@ export default {
       isDisabled: false
     };
   },
+  computed: {
+    canSplitDateTime() {
+      return Boolean(
+        this.isTimeSystemUTCBased &&
+        this.timeSystemFormatter?.getDelimiter
+      );
+    }
+  },
   watch: {
     bounds: {
       handler() {
-        this.handleNewBounds();
-      },
-      deep: true
+        console.log(this.bounds);
+        this.setViewFromBounds();
+      }
     }
   },
-  created() {
+  mounted() {
+    this.delimiter = this.timeSystemFormatter.getDelimiter?.();
     this.setViewFromBounds();
   },
   beforeUnmount() {
     this.clearAllValidation();
   },
   methods: {
-    handleNewBounds() {
-      this.setViewFromBounds();
-    },
     clearAllValidation() {
       [this.$refs.startDate, this.$refs.endDate].forEach(this.clearValidationForInput);
     },
@@ -163,27 +169,28 @@ export default {
       input.title = '';
     },
     setViewFromBounds() {
-      const formattedBounds = {};
+      const formattedStartBounds = this.timeSystemFormatter.format(this.bounds.start);
+      const formattedEndBounds = this.timeSystemFormatter.format(this.bounds.end);
 
-      formattedBounds.start = this.timeSystemFormatter.format(this.bounds.start).split(' ')[0];
-      formattedBounds.end = this.timeSystemFormatter.format(this.bounds.end).split(' ')[0];
-      formattedBounds.startTime = this.timeSystemDurationFormatter.format(Math.abs(this.bounds.start));
-      formattedBounds.endTime = this.timeSystemDurationFormatter.format(Math.abs(this.bounds.end));
-
-      this.formattedBounds = formattedBounds;
+      this.formattedBounds = {
+        startDate: formattedStartBounds.split(this.delimiter)[0],
+        startTime: formattedStartBounds.split(this.delimiter)[1],
+        endDate: formattedEndBounds.split(this.delimiter)[0],
+        endTime: formattedEndBounds.split(this.delimiter)[1]
+      };
     },
     setBoundsFromView(dismiss) {
       if (this.$refs.fixedDeltaInput.checkValidity()) {
-        let start = this.timeSystemFormatter.parse(
-          `${this.formattedBounds.start} ${this.formattedBounds.startTime}`
+        const start = this.timeSystemFormatter.parse(
+          `${this.formattedBounds.startDate}${this.delimiter}${this.formattedBounds.startTime}`
         );
-        let end = this.timeSystemFormatter.parse(
-          `${this.formattedBounds.end} ${this.formattedBounds.endTime}`
+        const end = this.timeSystemFormatter.parse(
+          `${this.formattedBounds.endDate}${this.delimiter}${this.formattedBounds.endTime}`
         );
 
         this.timeContext.setBounds({
-          start: start,
-          end: end
+          start,
+          end
         });
       }
 
@@ -214,12 +221,12 @@ export default {
       const currentInput = this.$refs[ref];
 
       return [this.$refs.startDate, this.$refs.endDate].every((input) => {
-        let boundsValues = {
+        const boundsValues = {
           start: this.timeSystemFormatter.parse(
-            `${this.formattedBounds.start} ${this.formattedBounds.startTime}`
+            `${this.formattedBounds.startDate}${this.delimiter}${this.formattedBounds.startTime}`
           ),
           end: this.timeSystemFormatter.parse(
-            `${this.formattedBounds.end} ${this.formattedBounds.endTime}`
+            `${this.formattedBounds.endDate}${this.delimiter}${this.formattedBounds.endTime}`
           )
         };
         //TODO: Do we need limits here? We have conductor limits disabled right now
@@ -250,8 +257,8 @@ export default {
       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}`;
+            ? `${this.formattedBounds.startDate}${this.delimiter}${this.formattedBounds.startTime}`
+            : `${this.formattedBounds.endDate}${this.delimiter}${this.formattedBounds.endTime}`;
         if (!this.timeSystemFormatter.validate(formattedDate)) {
           validationResult = {
             valid: false,
@@ -287,11 +294,11 @@ export default {
       return validationResult.valid;
     },
     startDateSelected(date) {
-      this.formattedBounds.start = this.timeSystemFormatter.format(date).split(' ')[0];
+      this.formattedBounds.startDate = this.timeSystemFormatter.format(date).split(this.delimiter)[0];
       this.validateAllBounds('startDate');
     },
     endDateSelected(date) {
-      this.formattedBounds.end = this.timeSystemFormatter.format(date).split(' ')[0];
+      this.formattedBounds.endDate = this.timeSystemFormatter.format(date).split(this.delimiter)[0];
       this.validateAllBounds('endDate');
     },
     hide($event) {

From fbf145c2401acb60cd057c0b7a375496c68a457c Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Wed, 3 Jul 2024 11:35:05 -0700
Subject: [PATCH 36/71] rename because need both datetime and time inputs

---
 .../timeConductor/{TimePopupFixed.vue => DateTimePopupFixed.vue}  | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/plugins/timeConductor/{TimePopupFixed.vue => DateTimePopupFixed.vue} (100%)

diff --git a/src/plugins/timeConductor/TimePopupFixed.vue b/src/plugins/timeConductor/DateTimePopupFixed.vue
similarity index 100%
rename from src/plugins/timeConductor/TimePopupFixed.vue
rename to src/plugins/timeConductor/DateTimePopupFixed.vue

From eb314a6fabe40dce4bccbe78a885ab376de8a05d Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Wed, 10 Jul 2024 18:22:01 -0700
Subject: [PATCH 37/71] make message universal to all timeSystems

---
 src/api/time/TimeContext.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/api/time/TimeContext.js b/src/api/time/TimeContext.js
index c4583e47a26..dcdc2367b55 100644
--- a/src/api/time/TimeContext.js
+++ b/src/api/time/TimeContext.js
@@ -196,7 +196,7 @@ class TimeContext extends EventEmitter {
     } else if (bounds.start > bounds.end) {
       return {
         valid: false,
-        message: 'Specified start date exceeds end bound'
+        message: 'Start bound exceeds end bound'
       };
     }
 

From 9924f531289873b798b8885d56f65d08d8d025e0 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Wed, 10 Jul 2024 18:25:31 -0700
Subject: [PATCH 38/71] only change time options if independent conductor
 enabled re-use timeContext across composables

---
 .../timeConductor/ConductorComponent.vue      | 12 +++----
 .../independent/IndependentTimeConductor.vue  | 36 +++++++++++++------
 src/plugins/timeConductor/useClock.js         |  5 +--
 src/plugins/timeConductor/useClockOffsets.js  |  5 +--
 src/plugins/timeConductor/useTimeBounds.js    |  5 +--
 src/plugins/timeConductor/useTimeMode.js      |  5 +--
 src/plugins/timeConductor/useTimeSystem.js    |  5 +--
 7 files changed, 36 insertions(+), 37 deletions(-)

diff --git a/src/plugins/timeConductor/ConductorComponent.vue b/src/plugins/timeConductor/ConductorComponent.vue
index 30ffe11a552..c4b08df3e90 100644
--- a/src/plugins/timeConductor/ConductorComponent.vue
+++ b/src/plugins/timeConductor/ConductorComponent.vue
@@ -100,14 +100,14 @@ export default {
   inject: ['openmct', 'configuration'],
   setup(props) {
     const openmct = inject('openmct');
-    const { timeContext } = useTimeContext(openmct, () => props.objectPath);
+    const { timeContext } = useTimeContext(openmct);
     const { timeSystemFormatter, timeSystemDurationFormatter, isTimeSystemUTCBased } =
-      useTimeSystem(openmct);
+      useTimeSystem(openmct, timeContext);
     const { timeMode, isFixedTimeMode, isRealTimeMode, getAllModeMetadata, getModeMetadata } =
-      useTimeMode(openmct);
-    const { bounds, isTick } = useTimeBounds(openmct);
-    const { clock, getAllClockMetadata, getClockMetadata } = useClock(openmct);
-    const { offsets } = useClockOffsets(openmct);
+      useTimeMode(openmct, timeContext);
+    const { bounds, isTick } = useTimeBounds(openmct, timeContext);
+    const { clock, getAllClockMetadata, getClockMetadata } = useClock(openmct, timeContext);
+    const { offsets } = useClockOffsets(openmct, timeContext);
 
     provide('timeSystemFormatter', timeSystemFormatter);
     provide('timeSystemDurationFormatter', timeSystemDurationFormatter);
diff --git a/src/plugins/timeConductor/independent/IndependentTimeConductor.vue b/src/plugins/timeConductor/independent/IndependentTimeConductor.vue
index a6e1c416f7f..e5af12e5637 100644
--- a/src/plugins/timeConductor/independent/IndependentTimeConductor.vue
+++ b/src/plugins/timeConductor/independent/IndependentTimeConductor.vue
@@ -111,15 +111,15 @@ export default {
   },
   setup(props) {
     const openmct = inject('openmct');
-    const { timeContext } = useTimeContext(openmct, getReactiveObjectPath);
+    const { timeContext } = useTimeContext(openmct, () => props.objectPath);
 
     const { timeSystemFormatter, timeSystemDurationFormatter, isTimeSystemUTCBased } =
-      useTimeSystem(openmct, getReactiveObjectPath);
+      useTimeSystem(openmct, timeContext);
     const { timeMode, isFixedTimeMode, isRealTimeMode, getAllModeMetadata, getModeMetadata } =
-      useTimeMode(openmct, getReactiveObjectPath);
-    const { bounds, isTick } = useTimeBounds(openmct, getReactiveObjectPath);
-    const { clock, getAllClockMetadata, getClockMetadata } = useClock(openmct, getReactiveObjectPath);
-    const { offsets } = useClockOffsets(openmct, getReactiveObjectPath);
+      useTimeMode(openmct, timeContext);
+    const { bounds, isTick } = useTimeBounds(openmct, timeContext);
+    const { clock, getAllClockMetadata, getClockMetadata } = useClock(openmct, timeContext);
+    const { offsets } = useClockOffsets(openmct, timeContext);
 
     watch(timeContext, () => {
       console.log('context changed setup');
@@ -225,16 +225,22 @@ export default {
       this.handleIndependentTimeConductorChange();
     },
     clock() {
-      this.saveClock();
+      if (this.independentTCEnabled) {
+        this.saveClock();
+      }
     },
     timeMode() {
-      this.saveMode();
+      if (this.independentTCEnabled) {
+        this.saveMode();
+      }
     },
     clockOffsets() {
-      this.saveClockOffsets();
+      if (this.independentTCEnabled) {
+        this.saveClockOffsets();
+      }
     },
     bounds() {
-      if (this.isTick === false) {
+      if (this.independentTCEnabled && this.isTick === false) {
         this.saveFixedBounds();
       }
     }
@@ -321,12 +327,20 @@ export default {
       const independentTimeContextBoundsOrOffsets = this.isFixedTimeMode ? bounds : offsets;
       const independentTimeContextClockKey = this.isFixedTimeMode ? undefined : clockKey;
 
-      if (!this.timeContext.hasOwnContext()) {
+      const independentTimeContext = this.openmct.time.getIndependentContext(this.keyString);
+
+      if (!independentTimeContext.hasOwnContext()) {
         this.unregisterIndependentTimeContext = this.openmct.time.addIndependentContext(
           this.keyString,
           independentTimeContextBoundsOrOffsets,
           independentTimeContextClockKey
         );
+      } else {
+        if (this.isRealTimeMode) {
+          independentTimeContext.setClock(this.timeOptions.clock);
+        }
+
+        independentTimeContext.setMode(this.timeOptions.mode, independentTimeContextBoundsOrOffsets);
       }
     },
     registerIndependentTimeOffsets() {
diff --git a/src/plugins/timeConductor/useClock.js b/src/plugins/timeConductor/useClock.js
index a43ef0e983b..247d28507a7 100644
--- a/src/plugins/timeConductor/useClock.js
+++ b/src/plugins/timeConductor/useClock.js
@@ -23,7 +23,6 @@
 import { onBeforeUnmount, shallowRef, watch } from 'vue';
 
 import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
-import { useTimeContext } from './useTimeContext.js';
 
 /**
  * Provides reactive `clock` which is reactive to a time context,
@@ -38,11 +37,9 @@ import { useTimeContext } from './useTimeContext.js';
  *   getClockMetadata: () => Object
  * }}
  */
-export function useClock(openmct, objectPath) {
+export function useClock(openmct, timeContext) {
   let stopObservingClock;
 
-  const { timeContext } = useTimeContext(openmct, objectPath);
-
   const clock = shallowRef(timeContext.value.getClock());
 
   onBeforeUnmount(() => stopObservingClock?.());
diff --git a/src/plugins/timeConductor/useClockOffsets.js b/src/plugins/timeConductor/useClockOffsets.js
index 2fb423dbf6e..9fca3b2cd06 100644
--- a/src/plugins/timeConductor/useClockOffsets.js
+++ b/src/plugins/timeConductor/useClockOffsets.js
@@ -23,7 +23,6 @@
 import { onBeforeUnmount, shallowRef, watch } from 'vue';
 
 import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
-import { useTimeContext } from './useTimeContext.js';
 
 /**
  * Provides reactive `offsets`,
@@ -37,11 +36,9 @@ import { useTimeContext } from './useTimeContext.js';
  *   offsets: import('vue').Ref<object>,
  * }}
  */
-export function useClockOffsets(openmct, objectPath) {
+export function useClockOffsets(openmct, timeContext) {
   let stopObservingClockOffsets;
 
-  const { timeContext } = useTimeContext(openmct, objectPath);
-
   const offsets = shallowRef(timeContext.value.getClockOffsets());
 
   onBeforeUnmount(() => stopObservingClockOffsets?.());
diff --git a/src/plugins/timeConductor/useTimeBounds.js b/src/plugins/timeConductor/useTimeBounds.js
index 54266d46351..e5239a876e1 100644
--- a/src/plugins/timeConductor/useTimeBounds.js
+++ b/src/plugins/timeConductor/useTimeBounds.js
@@ -23,7 +23,6 @@
 import { onBeforeUnmount, ref, shallowRef, watch } from 'vue';
 
 import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
-import { useTimeContext } from './useTimeContext.js';
 import throttle from '../../utils/throttle.js';
 
 const THROTTLE_RATE = 300;
@@ -40,11 +39,9 @@ const THROTTLE_RATE = 300;
  *   isTick: import('vue').Ref<boolean>
  * }}
  */
-export function useTimeBounds(openmct, objectPath) {
+export function useTimeBounds(openmct, timeContext) {
   let stopObservingTimeBounds;
 
-  const { timeContext } = useTimeContext(openmct, objectPath);
-
   const bounds = shallowRef(timeContext.value.getBounds());
   const isTick = ref(false);
 
diff --git a/src/plugins/timeConductor/useTimeMode.js b/src/plugins/timeConductor/useTimeMode.js
index 05d8dbfebaa..02d8587a6e1 100644
--- a/src/plugins/timeConductor/useTimeMode.js
+++ b/src/plugins/timeConductor/useTimeMode.js
@@ -27,7 +27,6 @@ import {
   REALTIME_MODE_KEY,
   TIME_CONTEXT_EVENTS
 } from '../../api/time/constants.js';
-import { useTimeContext } from './useTimeContext.js';
 
 /**
  * Provides reactive `timeMode` which is reactive to a time context,
@@ -42,11 +41,9 @@ import { useTimeContext } from './useTimeContext.js';
  *   isRealTimeMode: import('vue').Ref<boolean>
  * }}
  */
-export function useTimeMode(openmct, objectPath) {
+export function useTimeMode(openmct, timeContext) {
   let stopObservingTimeMode;
 
-  const { timeContext } = useTimeContext(openmct, objectPath);
-
   const timeMode = ref(timeContext.value.getMode());
   const isFixedTimeMode = computed(() => timeMode.value === FIXED_MODE_KEY);
   const isRealTimeMode = computed(() => timeMode.value === REALTIME_MODE_KEY);
diff --git a/src/plugins/timeConductor/useTimeSystem.js b/src/plugins/timeConductor/useTimeSystem.js
index 99b6386c23c..c381b03696d 100644
--- a/src/plugins/timeConductor/useTimeSystem.js
+++ b/src/plugins/timeConductor/useTimeSystem.js
@@ -23,7 +23,6 @@
 import { onBeforeUnmount, ref, watch } from 'vue';
 
 import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
-import { useTimeContext } from './useTimeContext.js';
 
 const DEFAULT_DURATION_FORMATTER = 'duration';
 
@@ -43,11 +42,9 @@ const DEFAULT_DURATION_FORMATTER = 'duration';
  *   isTimeSystemUTCBased: import('vue').Ref<boolean>
  * }}
  */
-export function useTimeSystem(openmct, objectPath) {
+export function useTimeSystem(openmct, timeContext) {
   let stopObservingTimeSystem;
 
-  const { timeContext } = useTimeContext(openmct, objectPath);
-
   const initialTimeSystem = timeContext.value.getTimeSystem();
 
   const timeSystemKey = ref(initialTimeSystem.key);

From 9065158ac97810ba542c9b2fdcc4673d7dc4d0f7 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Wed, 10 Jul 2024 18:26:30 -0700
Subject: [PATCH 39/71] make date time only for supporting time systems

---
 .../timeConductor/ConductorInputsFixed.vue    |  10 +-
 .../timeConductor/DateTimePopupFixed.vue      |  15 +-
 src/plugins/timeConductor/TimePopupFixed.vue  | 244 ++++++++++++++++++
 3 files changed, 258 insertions(+), 11 deletions(-)
 create mode 100644 src/plugins/timeConductor/TimePopupFixed.vue

diff --git a/src/plugins/timeConductor/ConductorInputsFixed.vue b/src/plugins/timeConductor/ConductorInputsFixed.vue
index f2b15b57964..83699265e76 100644
--- a/src/plugins/timeConductor/ConductorInputsFixed.vue
+++ b/src/plugins/timeConductor/ConductorInputsFixed.vue
@@ -20,7 +20,8 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-  <TimePopupFixed v-if="readOnly === false" @focus="$event.target.select()" @dismiss="dismiss" />
+  <DateTimePopupFixed v-if="delimiter && !readOnly" :delimiter="delimiter" @focus="$event.target.select()" @dismiss="dismiss" />
+  <TimePopupFixed v-else-if="!readOnly" @focus="$event.target.select()" @dismiss="dismiss" />
   <div v-else class="c-compact-tc__setting-wrapper">
     <div
       class="c-compact-tc__setting-value u-fade-truncate--lg --no-sep"
@@ -42,10 +43,12 @@
 
 <script>
 import TimePopupFixed from './TimePopupFixed.vue';
+import DateTimePopupFixed from './DateTimePopupFixed.vue';
 
 export default {
   components: {
-    TimePopupFixed
+    TimePopupFixed,
+    DateTimePopupFixed
   },
   inject: ['openmct', 'timeContext', 'bounds', 'timeSystemFormatter'],
   props: {
@@ -64,6 +67,9 @@ export default {
   },
   emits: ['dismiss-inputs-fixed'],
   computed: {
+    delimiter() {
+      return this.timeSystemFormatter.getDelimiter?.();
+    },
     formattedBounds() {
       return {
         start: this.timeSystemFormatter.format(this.bounds.start),
diff --git a/src/plugins/timeConductor/DateTimePopupFixed.vue b/src/plugins/timeConductor/DateTimePopupFixed.vue
index db4b52fe97a..2834fc2e554 100644
--- a/src/plugins/timeConductor/DateTimePopupFixed.vue
+++ b/src/plugins/timeConductor/DateTimePopupFixed.vue
@@ -122,6 +122,12 @@ export default {
   components: {
     DatePicker
   },
+  props: {
+    delimiter: {
+      type: String,
+      required: true
+    }
+  },
   inject: [
     'openmct',
     'isTimeSystemUTCBased',
@@ -137,14 +143,6 @@ export default {
       isDisabled: false
     };
   },
-  computed: {
-    canSplitDateTime() {
-      return Boolean(
-        this.isTimeSystemUTCBased &&
-        this.timeSystemFormatter?.getDelimiter
-      );
-    }
-  },
   watch: {
     bounds: {
       handler() {
@@ -154,7 +152,6 @@ export default {
     }
   },
   mounted() {
-    this.delimiter = this.timeSystemFormatter.getDelimiter?.();
     this.setViewFromBounds();
   },
   beforeUnmount() {
diff --git a/src/plugins/timeConductor/TimePopupFixed.vue b/src/plugins/timeConductor/TimePopupFixed.vue
new file mode 100644
index 00000000000..af2e693f69f
--- /dev/null
+++ b/src/plugins/timeConductor/TimePopupFixed.vue
@@ -0,0 +1,244 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <form ref="fixedDeltaInput">
+    <div class="c-tc-input-popup__input-grid">
+      <div class="pr-time-label pr-time-label-start-date">Start</div>
+      <div class="pr-time-label pr-time-label-start-time"></div>
+      <div class="pr-time-label pr-time-label-end-date">End</div>
+      <div class="pr-time-label pr-time-label-end-time"></div>
+
+      <div class="pr-time-input pr-time-input--time pr-time-input-start-date">
+        <input
+          ref="startTime"
+          v-model="formattedBounds.start"
+          class="c-input--datetime"
+          type="text"
+          autocorrect="off"
+          spellcheck="false"
+          aria-label="Start time"
+          @change="validateAllBounds('startTime')"
+        />
+      </div>
+
+      <div class="pr-time-input pr-time-input__start-end-sep icon-arrows-right-left"></div>
+
+      <div class="pr-time-input pr-time-input--time pr-time-input-end-date">
+        <input
+          ref="endTime"
+          v-model="formattedBounds.end"
+          class="c-input--datetime"
+          type="text"
+          autocorrect="off"
+          spellcheck="false"
+          aria-label="End time"
+          @change="validateAllBounds('endTime')"
+        />
+      </div>
+
+      <div class="pr-time-input pr-time-input--buttons">
+        <button
+          class="c-button c-button--major icon-check"
+          :disabled="isDisabled"
+          aria-label="Submit time bounds"
+          @click.prevent="submit"
+        ></button>
+        <button
+          class="c-button icon-x"
+          aria-label="Discard changes and close time popup"
+          @click.prevent="hide"
+        ></button>
+      </div>
+    </div>
+  </form>
+</template>
+
+<script>
+export default {
+  inject: [
+    'openmct',
+    'isTimeSystemUTCBased',
+    'timeContext',
+    'timeSystemFormatter',
+    'timeSystemDurationFormatter',
+    'bounds'
+  ],
+  emits: ['update', 'dismiss'],
+  data() {
+    return {
+      formattedBounds: {},
+      isDisabled: false
+    };
+  },
+  computed: {
+
+  },
+  watch: {
+    bounds: {
+      handler() {
+        console.log(this.bounds);
+        this.setViewFromBounds();
+      }
+    }
+  },
+  mounted() {
+    this.setViewFromBounds();
+  },
+  beforeUnmount() {
+    this.clearAllValidation();
+  },
+  methods: {
+    clearAllValidation() {
+      [this.$refs.startTime, this.$refs.endTime].forEach(this.clearValidationForInput);
+    },
+    clearValidationForInput(input) {
+      input.setCustomValidity('');
+      input.title = '';
+    },
+    setViewFromBounds() {
+      const start = this.timeSystemFormatter.format(this.bounds.start);
+      const end = this.timeSystemFormatter.format(this.bounds.end);
+
+      this.formattedBounds = {
+        start,
+        end
+      };
+    },
+    setBoundsFromView(dismiss) {
+      if (this.$refs.fixedDeltaInput.checkValidity()) {
+        const start = this.timeSystemFormatter.parse(this.formattedBounds.start);
+        const end = this.timeSystemFormatter.parse(this.formattedBounds.end);
+
+        this.timeContext.setBounds({
+          start,
+          end
+        });
+      }
+
+      if (dismiss) {
+        this.$emit('dismiss');
+
+        return false;
+      }
+    },
+    submit() {
+      this.validateAllBounds('startDate');
+      this.validateAllBounds('endDate');
+      this.submitForm(!this.isDisabled);
+    },
+    submitForm(dismiss) {
+      // Allow Vue model to catch up to user input.
+      // Submitting form will cause validation messages to display (but only if triggered by button click)
+      this.$nextTick(() => this.setBoundsFromView(dismiss));
+    },
+    validateAllBounds(ref) {
+      if (!this.areBoundsFormatsValid()) {
+        return false;
+      }
+
+      let validationResult = {
+        valid: true
+      };
+      const currentInput = this.$refs[ref];
+
+      return [this.$refs.startTime, this.$refs.endTime].every((input) => {
+        const start = this.timeSystemFormatter.parse(this.formattedBounds.start);
+        const end = this.timeSystemFormatter.parse(this.formattedBounds.end);
+
+        const bounds = {
+          start,
+          end
+        };
+
+        //TODO: Do we need limits here? We have conductor limits disabled right now
+        // const limit = this.getBoundsLimit();
+        const limit = false;
+
+        if (this.isTimeSystemUTCBased && limit && bounds.end - bounds.start > limit) {
+          if (input === currentInput) {
+            validationResult = {
+              valid: false,
+              message: 'Start and end difference exceeds allowable limit'
+            };
+          }
+        } else {
+          if (input === currentInput) {
+            validationResult = this.timeContext.validateBounds(bounds);
+          }
+        }
+
+        return this.handleValidationResults(input, validationResult);
+      });
+    },
+    areBoundsFormatsValid() {
+      let validationResult = {
+        valid: true
+      };
+
+      return [this.$refs.startTime, this.$refs.endTime].every((input) => {
+        const formattedBounds =
+          input === this.$refs.startTime
+            ? this.formattedBounds.start
+            : this.formattedBounds.end;
+        if (!this.timeSystemFormatter.validate(formattedBounds)) {
+          validationResult = {
+            valid: false,
+            message: 'Invalid date'
+          };
+        }
+
+        return this.handleValidationResults(input, validationResult);
+      });
+    },
+    getBoundsLimit() {
+      const configuration = this.configuration.menuOptions
+        .filter((option) => option.timeSystem === this.timeSystem.key)
+        .find((option) => option.limit);
+
+      const limit = configuration ? configuration.limit : undefined;
+
+      return limit;
+    },
+    handleValidationResults(input, validationResult) {
+      if (validationResult.valid !== true) {
+        input.setCustomValidity(validationResult.message);
+        input.title = validationResult.message;
+        this.isDisabled = true;
+      } else {
+        input.setCustomValidity('');
+        input.title = '';
+        this.isDisabled = false;
+      }
+
+      this.$refs.fixedDeltaInput.reportValidity();
+
+      return validationResult.valid;
+    },
+    hide($event) {
+      if ($event.target.className.indexOf('c-button icon-x') > -1) {
+        this.$emit('dismiss');
+      }
+    }
+  }
+};
+</script>

From e2092a7b17dc3895bd1aab80e9fbbe8eaa10673d Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Fri, 12 Jul 2024 15:46:07 -0700
Subject: [PATCH 40/71] fix css for bounds single inputs

---
 .../timeConductor/DateTimePopupFixed.vue      |  2 +-
 src/plugins/timeConductor/TimePopupFixed.vue  | 10 +++---
 .../timeConductor/TimePopupRealtime.vue       |  2 +-
 src/plugins/timeConductor/conductor.scss      | 35 +++++++++++++++----
 4 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/src/plugins/timeConductor/DateTimePopupFixed.vue b/src/plugins/timeConductor/DateTimePopupFixed.vue
index 2834fc2e554..fe2e598e862 100644
--- a/src/plugins/timeConductor/DateTimePopupFixed.vue
+++ b/src/plugins/timeConductor/DateTimePopupFixed.vue
@@ -22,7 +22,7 @@
 
 <template>
   <form ref="fixedDeltaInput">
-    <div class="c-tc-input-popup__input-grid">
+    <div class="c-tc-input-popup__input-grid-utc">
       <div class="pr-time-label pr-time-label-start-date"><em>Start</em> Date</div>
       <div class="pr-time-label pr-time-label-start-time">Time</div>
       <div class="pr-time-label pr-time-label-end-date"><em>End</em> Date</div>
diff --git a/src/plugins/timeConductor/TimePopupFixed.vue b/src/plugins/timeConductor/TimePopupFixed.vue
index af2e693f69f..876367a840f 100644
--- a/src/plugins/timeConductor/TimePopupFixed.vue
+++ b/src/plugins/timeConductor/TimePopupFixed.vue
@@ -23,12 +23,10 @@
 <template>
   <form ref="fixedDeltaInput">
     <div class="c-tc-input-popup__input-grid">
-      <div class="pr-time-label pr-time-label-start-date">Start</div>
-      <div class="pr-time-label pr-time-label-start-time"></div>
-      <div class="pr-time-label pr-time-label-end-date">End</div>
-      <div class="pr-time-label pr-time-label-end-time"></div>
+      <div class="pr-time-label pr-time-label-start-time">Start</div>
+      <div class="pr-time-label pr-time-label-end-time">End</div>
 
-      <div class="pr-time-input pr-time-input--time pr-time-input-start-date">
+      <div class="pr-time-input pr-time-input-start">
         <input
           ref="startTime"
           v-model="formattedBounds.start"
@@ -43,7 +41,7 @@
 
       <div class="pr-time-input pr-time-input__start-end-sep icon-arrows-right-left"></div>
 
-      <div class="pr-time-input pr-time-input--time pr-time-input-end-date">
+      <div class="pr-time-input pr-time-input-end">
         <input
           ref="endTime"
           v-model="formattedBounds.end"
diff --git a/src/plugins/timeConductor/TimePopupRealtime.vue b/src/plugins/timeConductor/TimePopupRealtime.vue
index 46f50a8061e..28c316e2659 100644
--- a/src/plugins/timeConductor/TimePopupRealtime.vue
+++ b/src/plugins/timeConductor/TimePopupRealtime.vue
@@ -22,7 +22,7 @@
 
 <template>
   <form ref="deltaInput">
-    <div class="c-tc-input-popup__input-grid">
+    <div class="c-tc-input-popup__input-grid-utc">
       <div class="pr-time-label icon-minus pr-time-label-minus-hrs">Hrs</div>
       <div class="pr-time-label pr-time-label-minus-mins">Mins</div>
       <div class="pr-time-label pr-time-label-minus-secs">Secs</div>
diff --git a/src/plugins/timeConductor/conductor.scss b/src/plugins/timeConductor/conductor.scss
index f914cfdf7a1..f05ee3dada1 100644
--- a/src/plugins/timeConductor/conductor.scss
+++ b/src/plugins/timeConductor/conductor.scss
@@ -629,7 +629,6 @@
         }
         &-label-end-time{
             grid-area: eTime;
-
         }
         &-input-end-date{
             grid-area: eDateInput;
@@ -641,6 +640,14 @@
             grid-area: blank;
         }
 
+        // FIXED TIME MODE non utc
+        &-input-start{
+            grid-area: sInput;
+        }
+        &-input-end{
+            grid-area: eInput;
+        }
+
         //REAL TIME MODE
         &-label-minus-hrs{
             grid-area: labelMinusHrs;
@@ -691,14 +698,20 @@
     }
 
     &--fixed-mode {
-        .c-tc-input-popup__input-grid {
+        .c-tc-input-popup__input-grid-utc {
             grid-template-columns: 1fr 1fr 1fr 1fr 1fr 2fr;
             grid-template-areas: 
                "sDate sTime . eDate eTime ."
                "sDateInput sTimeInput arrowIcon eDateInput eTimeInput buttons";
         }
+        .c-tc-input-popup__input-grid {
+            grid-template-columns: 1fr 1fr 1fr 2fr;
+            grid-template-areas: 
+               "sTime . eTime ."
+               "sInput arrowIcon eInput buttons";
+        }
         @include phonePortrait(){ 
-            .c-tc-input-popup__input-grid {
+            .c-tc-input-popup__input-grid-utc {
                 grid-template-columns: repeat(2, max-content) 1fr;
                 grid-template-areas:
                     "sDate sTime ."
@@ -708,19 +721,29 @@
                 padding: 2px; 
                 overflow: hidden;
             }
+            .c-tc-input-popup__input-grid {
+              grid-template-columns: repeat(2, max-content) 1fr;
+              grid-template-areas:
+                  "sTime ."
+                  "sInput ."
+                  "eTime ."
+                  "eInput buttons";
+              padding: 2px; 
+              overflow: hidden;
+          }
         }
 
     }
 
     &--realtime-mode {
-        .c-tc-input-popup__input-grid {
+        .c-tc-input-popup__input-grid, .c-tc-input-popup__input-grid-utc {
             grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr;
             grid-template-areas:
                 "labelMinusHrs labelMinusMins labelMinusSecs . labelPlusHrs labelPlusMins labelPlusSecs ."
                 "inputMinusHrs inputMinusMins inputMinusSecs arrowIcon inputPlusHrs inputPlusMins inputPlusSecs buttons";
         }
         @include phonePortrait(){ 
-            .c-tc-input-popup__input-grid {
+            .c-tc-input-popup__input-grid, .c-tc-input-popup__input-grid-utc {
                 grid-template-columns: repeat(3, max-content) 1fr;
                 grid-template-areas:
                     "labelMinusHrs labelMinusMins labelMinusSecs ."
@@ -733,7 +756,7 @@
         }
     }
 
-    &__input-grid {
+    &__input-grid, &__input-grid-utc {
         display: grid;
         grid-row-gap: $interiorMargin;
         grid-column-gap: $interiorMarginSm;

From 3922ade19fbf91728eeda3ab1e973c264b85f0f1 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Fri, 12 Jul 2024 15:46:38 -0700
Subject: [PATCH 41/71] time formats can specify date/time delimiters

---
 src/plugins/utcTimeSystem/UTCTimeFormat.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/plugins/utcTimeSystem/UTCTimeFormat.js b/src/plugins/utcTimeSystem/UTCTimeFormat.js
index 331d833750e..5b05c45166c 100644
--- a/src/plugins/utcTimeSystem/UTCTimeFormat.js
+++ b/src/plugins/utcTimeSystem/UTCTimeFormat.js
@@ -33,12 +33,13 @@ import moment from 'moment';
 export default class UTCTimeFormat {
   constructor() {
     this.key = 'utc';
-    this.DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss.SSS';
+    this.DATE_DELIMITER = ' ';
+    this.DATE_FORMAT = `YYYY-MM-DD${this.DATE_DELIMITER}HH:mm:ss.SSS`;
     this.DATE_FORMATS = {
       PRECISION_DEFAULT: this.DATE_FORMAT,
       PRECISION_DEFAULT_WITH_ZULU: this.DATE_FORMAT + 'Z',
-      PRECISION_SECONDS: 'YYYY-MM-DD HH:mm:ss',
-      PRECISION_MINUTES: 'YYYY-MM-DD HH:mm',
+      PRECISION_SECONDS: `YYYY-MM-DD${this.DATE_DELIMITER}HH:mm:ss`,
+      PRECISION_MINUTES: `YYYY-MM-DD${this.DATE_DELIMITER}HH:mm`,
       PRECISION_DAYS: 'YYYY-MM-DD',
       PRECISION_SECONDS_TIME_ONLY: 'HH:mm:ss',
       PRECISION_MINUTES_TIME_ONLY: 'HH:mm'
@@ -86,4 +87,8 @@ export default class UTCTimeFormat {
   validate(text) {
     return moment.utc(text, Object.values(this.DATE_FORMATS), true).isValid();
   }
+
+  getDelimiter() {
+    return this.DATE_DELIMITER;
+  }
 }

From 5037254989ef7a1c95e3b5b8d2b3806454ad65b9 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Wed, 21 Aug 2024 15:23:51 -0700
Subject: [PATCH 42/71] move history out of form remove unused gear icon remove
 debugging code

---
 .../timeConductor/ConductorComponent.vue      | 13 +++--
 .../timeConductor/ConductorHistory.vue        |  6 +-
 src/plugins/timeConductor/ConductorPopUp.vue  |  7 ---
 .../independent/IndependentTimeConductor.vue  | 55 ++++++-------------
 4 files changed, 25 insertions(+), 56 deletions(-)

diff --git a/src/plugins/timeConductor/ConductorComponent.vue b/src/plugins/timeConductor/ConductorComponent.vue
index c4b08df3e90..3285a41a6da 100644
--- a/src/plugins/timeConductor/ConductorComponent.vue
+++ b/src/plugins/timeConductor/ConductorComponent.vue
@@ -48,12 +48,11 @@
       @pan-axis="pan"
       @zoom-axis="zoom"
     />
-    <div
-      role="button"
-      class="c-not-button c-not-button--compact c-compact-tc__gear icon-gear"
-      aria-label="Time Conductor Settings"
-    ></div>
-
+    <ConductorHistory
+      v-if="!isIndependent"
+      class="c-conductor__history-select"
+      title="Select and apply previously entered time intervals."
+    />
     <ConductorPopUp
       v-if="showConductorPopup"
       ref="conductorPopup"
@@ -71,6 +70,7 @@ import { inject, provide } from 'vue';
 
 import ConductorAxis from './ConductorAxis.vue';
 import ConductorClock from './ConductorClock.vue';
+import ConductorHistory from './ConductorHistory.vue';
 import ConductorInputsFixed from './ConductorInputsFixed.vue';
 import ConductorInputsRealtime from './ConductorInputsRealtime.vue';
 import ConductorMode from './ConductorMode.vue';
@@ -90,6 +90,7 @@ export default {
     ConductorTimeSystem,
     ConductorClock,
     ConductorMode,
+    ConductorHistory,
     ConductorInputsRealtime,
     ConductorInputsFixed,
     ConductorAxis,
diff --git a/src/plugins/timeConductor/ConductorHistory.vue b/src/plugins/timeConductor/ConductorHistory.vue
index cb215065c39..c7fd4063cf9 100644
--- a/src/plugins/timeConductor/ConductorHistory.vue
+++ b/src/plugins/timeConductor/ConductorHistory.vue
@@ -24,11 +24,9 @@
     <div class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left">
       <button
         aria-label="Time Conductor History"
-        class="c-button--menu c-history-button icon-history c-icon-button"
+        class="c-button--minor c-history-button icon-history c-icon-button"
         @click.prevent.stop="showHistoryMenu"
-      >
-        <span class="c-button__label">History</span>
-      </button>
+      />
     </div>
   </div>
 </template>
diff --git a/src/plugins/timeConductor/ConductorPopUp.vue b/src/plugins/timeConductor/ConductorPopUp.vue
index 9ba3243bb75..e545ad8b93c 100644
--- a/src/plugins/timeConductor/ConductorPopUp.vue
+++ b/src/plugins/timeConductor/ConductorPopUp.vue
@@ -27,11 +27,6 @@
         class="c-conductor__time-system-select"
         title="Sets the Time Conductor's time system."
       />
-      <ConductorHistory
-        v-if="!isIndependent"
-        class="c-conductor__history-select"
-        title="Select and apply previously entered time intervals."
-      />
     </div>
     <ConductorInputsFixed v-if="isFixedTimeMode" @dismiss-inputs-fixed="dismiss" />
     <ConductorInputsRealtime v-else @dismiss-inputs-realtime="dismiss" />
@@ -40,7 +35,6 @@
 
 <script>
 import ConductorClock from './ConductorClock.vue';
-import ConductorHistory from './ConductorHistory.vue';
 import ConductorInputsFixed from './ConductorInputsFixed.vue';
 import ConductorInputsRealtime from './ConductorInputsRealtime.vue';
 import ConductorMode from './ConductorMode.vue';
@@ -55,7 +49,6 @@ export default {
     IndependentMode,
     IndependentClock,
     ConductorTimeSystem,
-    ConductorHistory,
     ConductorInputsFixed,
     ConductorInputsRealtime
   },
diff --git a/src/plugins/timeConductor/independent/IndependentTimeConductor.vue b/src/plugins/timeConductor/independent/IndependentTimeConductor.vue
index e5af12e5637..e208d057c1b 100644
--- a/src/plugins/timeConductor/independent/IndependentTimeConductor.vue
+++ b/src/plugins/timeConductor/independent/IndependentTimeConductor.vue
@@ -52,12 +52,6 @@
       :read-only="true"
       :compact="true"
     />
-    <div
-      v-if="independentTCEnabled"
-      role="button"
-      class="c-not-button c-not-button--compact c-compact-tc__gear icon-gear"
-      aria-label="Independent Time Conductor Settings"
-    ></div>
 
     <ConductorPopUp
       v-if="showConductorPopup"
@@ -73,7 +67,7 @@
 </template>
 
 <script>
-import { inject, provide, watch } from 'vue';
+import { inject, provide, toRaw } from 'vue';
 
 import ConductorModeIcon from '@/plugins/timeConductor/ConductorModeIcon.vue';
 
@@ -121,22 +115,6 @@ export default {
     const { clock, getAllClockMetadata, getClockMetadata } = useClock(openmct, timeContext);
     const { offsets } = useClockOffsets(openmct, timeContext);
 
-    watch(timeContext, () => {
-      console.log('context changed setup');
-    });
-
-    watch(() => props.domainObject, () => {
-      console.log('domainObject changed setup');
-    });
-
-    watch(() => props.domainObject.configuration.useIndependentTime, () => {
-      console.log('domainObject configuration changed setup');
-    });
-
-    watch(() => props.objectPath, () => {
-      console.log('objectPath changed setup');
-    });
-
     provide('timeContext', timeContext);
     provide('timeSystemFormatter', timeSystemFormatter);
     provide('timeSystemDurationFormatter', timeSystemDurationFormatter);
@@ -153,10 +131,6 @@ export default {
     provide('getAllClockMetadata', getAllClockMetadata);
     provide('getClockMetadata', getClockMetadata);
 
-    function getReactiveObjectPath() {
-      return props.objectPath;
-    }
-
     return {
       timeContext,
       timeMode,
@@ -172,7 +146,7 @@ export default {
   data() {
     return {
       keyString: this.openmct.objects.makeKeyString(this.domainObject.identifier),
-      independentTCEnabled: this.domainObject.configuration.useIndependentTime === true,
+      independentTCEnabled: this.domainObject.configuration.useIndependentTime === true
     };
   },
   computed: {
@@ -280,10 +254,13 @@ export default {
       );
     },
     setTimeOptions() {
-      this.timeOptions = this.domainObject.configuration.timeOptions ?? {
-        clockOffsets: this.offsets,
-        fixedOffsets: this.bounds
-      };
+      this.timeOptions = toRaw(this.domainObject.configuration.timeOptions);
+      if (!this.timeOptions) {
+        this.timeOptions = {
+          clockOffsets: this.offsets,
+          fixedOffsets: this.bounds
+        };
+      }
 
       if (!this.timeOptions.clock) {
         // can remove openmct.time.getClock() if timeContexts have clock in fixed time
@@ -312,7 +289,7 @@ export default {
       this.updateTimeOptions();
     },
     saveClock() {
-      this.timeOptions.clock = this.clock.key;
+      this.timeOptions.clock = this.clock?.key;
       this.updateTimeOptions();
     },
     updateTimeOptions() {
@@ -322,7 +299,7 @@ export default {
     registerIndependentTimeContext() {
       const bounds = this.timeOptions.fixedOffsets ?? this.bounds;
       const offsets = this.timeOptions.clockOffsets ?? this.offsets;
-      const clockKey = this.timeOptions.clock?.key || this.clock.key;
+      const clockKey = this.timeOptions.clock || this.clock.key;
 
       const independentTimeContextBoundsOrOffsets = this.isFixedTimeMode ? bounds : offsets;
       const independentTimeContextClockKey = this.isFixedTimeMode ? undefined : clockKey;
@@ -336,16 +313,16 @@ export default {
           independentTimeContextClockKey
         );
       } else {
-        if (this.isRealTimeMode) {
-          independentTimeContext.setClock(this.timeOptions.clock);
-        }
+        // if (this.isRealTimeMode) {
+        //   independentTimeContext.setClock(this.timeOptions.clock);
+        // }
 
-        independentTimeContext.setMode(this.timeOptions.mode, independentTimeContextBoundsOrOffsets);
+        // independentTimeContext.setMode(this.timeOptions.mode, independentTimeContextBoundsOrOffsets);
       }
     },
     registerIndependentTimeOffsets() {
       // const timeContext = this.openmct.time.getIndependentContext(this.keyString);
-      const clockKey = this.timeOptions.clock?.key || this.clock.key;
+      const clockKey = this.timeOptions.clock || this.clock.key;
       let offsets;
 
       if (this.isFixedTimeMode) {

From 6db96dfdd2508266e4844b306c1ef5314827209f Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Wed, 21 Aug 2024 16:39:50 -0700
Subject: [PATCH 43/71] handle toggle independent time

---
 .../timeConductor/independent/IndependentTimeConductor.vue    | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/plugins/timeConductor/independent/IndependentTimeConductor.vue b/src/plugins/timeConductor/independent/IndependentTimeConductor.vue
index e208d057c1b..9e36fee5970 100644
--- a/src/plugins/timeConductor/independent/IndependentTimeConductor.vue
+++ b/src/plugins/timeConductor/independent/IndependentTimeConductor.vue
@@ -180,6 +180,9 @@ export default {
     myKeyString() {
       console.log(`object changed`);
     },
+    independentTCEnabled() {
+      this.handleIndependentTimeConductorChange();
+    },
     timeContext() {
       const keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
 
@@ -252,6 +255,7 @@ export default {
         'configuration.useIndependentTime',
         this.independentTCEnabled
       );
+
     },
     setTimeOptions() {
       this.timeOptions = toRaw(this.domainObject.configuration.timeOptions);

From 211272c201721e7a710514d57429196061aa6520 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Thu, 22 Aug 2024 11:45:33 -0700
Subject: [PATCH 44/71] v-if logic one component up

---
 src/plugins/timeConductor/DateTimePopupFixed.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/plugins/timeConductor/DateTimePopupFixed.vue b/src/plugins/timeConductor/DateTimePopupFixed.vue
index fe2e598e862..3b58b3255ed 100644
--- a/src/plugins/timeConductor/DateTimePopupFixed.vue
+++ b/src/plugins/timeConductor/DateTimePopupFixed.vue
@@ -32,7 +32,6 @@
         class="pr-time-input pr-time-input--date pr-time-input--input-and-button pr-time-input-start-date"
       >
         <DatePicker
-          v-if="canSplitDateTime"
           class="c-ctrl-wrapper--menus-right"
           :default-date-time="formattedBounds.startDate"
           @date-selected="startDateSelected"
@@ -68,7 +67,6 @@
         class="pr-time-input pr-time-input--date pr-time-input--input-and-button pr-time-input-end-date"
       >
         <DatePicker
-          v-if="canSplitDateTime"
           class="c-ctrl-wrapper--menus-left"
           :default-date-time="formattedBounds.endDate"
           @date-selected="endDateSelected"

From 140184e6a8b5d54cf4f76db17ee7bdb71a8319dc Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Thu, 14 Nov 2024 12:07:37 -0800
Subject: [PATCH 45/71] add back date selector

---
 src/plugins/timeConductor/TimePopupFixed.vue | 21 ++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/plugins/timeConductor/TimePopupFixed.vue b/src/plugins/timeConductor/TimePopupFixed.vue
index 1d3fb3edf16..3b487c0a0d8 100644
--- a/src/plugins/timeConductor/TimePopupFixed.vue
+++ b/src/plugins/timeConductor/TimePopupFixed.vue
@@ -37,6 +37,12 @@
           aria-label="Start time"
           @input="validateAllBounds('startTime')"
         />
+        <DatePicker
+          v-if="isTimeSystemUTCBased"
+          class="c-ctrl-wrapper--menus-left"
+          :default-date-time="formattedBounds.start"
+          @date-selected="dateSelected($event, 'start')"
+        />
       </div>
 
       <div class="pr-time-input pr-time-input__start-end-sep icon-arrows-right-left"></div>
@@ -52,6 +58,12 @@
           aria-label="End time"
           @input="validateAllBounds('endTime')"
         />
+        <DatePicker
+          v-if="isTimeSystemUTCBased"
+          class="c-ctrl-wrapper--menus-left"
+          :default-date-time="formattedBounds.end"
+          @date-selected="dateSelected($event, 'end')"
+        />
       </div>
 
       <div class="pr-time-input pr-time-input--buttons">
@@ -72,7 +84,12 @@
 </template>
 
 <script>
+import DatePicker from './DatePicker.vue';
+
 export default {
+  components: {
+    DatePicker
+  },
   inject: [
     'openmct',
     'isTimeSystemUTCBased',
@@ -235,6 +252,10 @@ export default {
       if ($event.target.className.indexOf('c-button icon-x') > -1) {
         this.$emit('dismiss');
       }
+    },
+    dateSelected(date, refName) {
+      this.formattedBounds[refName] = this.timeSystemFormatter.format(date);
+      this.validateInput(refName);
     }
   }
 };

From 9b1c26cb98d0a21fb02a0b335d41610fe8163854 Mon Sep 17 00:00:00 2001
From: Jamie V <jamie.j.vigliotta@nasa.gov>
Date: Mon, 4 Aug 2025 15:41:23 -0700
Subject: [PATCH 46/71] source maps

---
 .webpack/webpack.prod.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.webpack/webpack.prod.mjs b/.webpack/webpack.prod.mjs
index f0656b67e09..0b2e7921517 100644
--- a/.webpack/webpack.prod.mjs
+++ b/.webpack/webpack.prod.mjs
@@ -15,5 +15,5 @@ export default merge(common, {
       __OPENMCT_ROOT_RELATIVE__: '""'
     })
   ],
-  devtool: 'source-map'
+  devtool: 'eval-source-map'
 });

From cf19a15b4e31495aa50f6ff6cdb073879fdb0b8c Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Tue, 5 Aug 2025 09:02:38 -0700
Subject: [PATCH 47/71] fix datetime fixed validation

---
 .../timeConductor/DateTimePopupFixed.vue      | 58 ++++++++++---------
 1 file changed, 30 insertions(+), 28 deletions(-)

diff --git a/src/plugins/timeConductor/DateTimePopupFixed.vue b/src/plugins/timeConductor/DateTimePopupFixed.vue
index bd96279726e..16420988b81 100644
--- a/src/plugins/timeConductor/DateTimePopupFixed.vue
+++ b/src/plugins/timeConductor/DateTimePopupFixed.vue
@@ -105,7 +105,7 @@
           class="c-button c-button--major icon-check"
           :disabled="hasInputValidityError"
           aria-label="Submit time bounds"
-          @click.prevent="submit"
+          @click.prevent="submitForm"
         ></button>
         <button
           class="c-button icon-x"
@@ -124,12 +124,6 @@ export default {
   components: {
     DatePicker
   },
-  props: {
-    delimiter: {
-      type: String,
-      required: true
-    }
-  },
   inject: [
     'openmct',
     'isTimeSystemUTCBased',
@@ -138,6 +132,12 @@ export default {
     'timeSystemDurationFormatter',
     'bounds'
   ],
+  props: {
+    delimiter: {
+      type: String,
+      required: true
+    }
+  },
   emits: ['update', 'dismiss'],
   data() {
     return {
@@ -154,6 +154,19 @@ export default {
       }
     };
   },
+  computed: {
+    hasInputValidityError() {
+      return Object.values(this.inputValidityMap).some((inputValidity) => !inputValidity.valid);
+    },
+    hasLogicalValidationErrors() {
+      return Object.values(this.logicalValidityMap).some(
+        (logicalValidity) => !logicalValidity.valid
+      );
+    },
+    isValid() {
+      return !this.hasInputValidityError && !this.hasLogicalValidationErrors;
+    }
+  },
   watch: {
     bounds: {
       handler() {
@@ -167,27 +180,13 @@ export default {
   beforeUnmount() {
     this.clearAllValidation();
   },
-  computed: {
-    hasInputValidityError() {
-      return Object.values(this.inputValidityMap).some((inputValidity) => !inputValidity.valid);
-    }
-  },
-  hasLogicalValidationErrors() {
-    return Object.values(this.logicalValidityMap).some((logicalValidity) => !logicalValidity.valid);
-  },
-  isValid() {
-    return !this.hasInputValidityError && !this.hasLogicalValidationErrors;
-  },
   methods: {
     setViewFromBounds() {
-      const formattedStartBounds = this.timeSystemFormatter.format(this.bounds.start);
-      const formattedEndBounds = this.timeSystemFormatter.format(this.bounds.end);
-
       this.formattedBounds = {
-        startDate: formattedStartBounds.split(this.delimiter)[0],
-        startTime: formattedStartBounds.split(this.delimiter)[1],
-        endDate: formattedEndBounds.split(this.delimiter)[0],
-        endTime: formattedEndBounds.split(this.delimiter)[1]
+        startDate: this.timeSystemFormatter.format(this.bounds.start).split(this.delimiter)[0],
+        startTime: this.timeSystemDurationFormatter.format(Math.abs(this.bounds.start)),
+        endDate: this.timeSystemFormatter.format(this.bounds.end).split(this.delimiter)[0],
+        endTime: this.timeSystemDurationFormatter.format(Math.abs(this.bounds.end))
       };
     },
     setBoundsFromView(dismiss) {
@@ -220,7 +219,7 @@ export default {
       input.setCustomValidity('');
       input.title = '';
     },
-    submit() {
+    submitForm() {
       this.validateLimit();
       this.reportValidity('limit');
       this.validateBounds();
@@ -233,7 +232,8 @@ export default {
     validateInput(refName) {
       this.clearAllValidation();
       const inputType = refName.includes('Date') ? 'Date' : 'Time';
-      const formatter = inputType === 'Date' ? this.timeSystemFormatter : this.timeSystemDurationFormatter;
+      const formatter =
+        inputType === 'Date' ? this.timeSystemFormatter : this.timeSystemDurationFormatter;
       const validationResult = formatter.validate(this.formattedBounds[refName])
         ? { valid: true }
         : { valid: false, message: `Invalid ${inputType}` };
@@ -289,7 +289,9 @@ export default {
       return this.$refs.startDate;
     },
     startDateSelected(date) {
-      this.formattedBounds.startDate = this.timeSystemFormatter.format(date).split(this.delimiter)[0];
+      this.formattedBounds.startDate = this.timeSystemFormatter
+        .format(date)
+        .split(this.delimiter)[0];
       this.validateInput('startDate');
       this.reportValidity('startDate');
     },

From 8a20c7fd6b8225f73953ec731a6464ba254bfbea Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Tue, 5 Aug 2025 09:12:08 -0700
Subject: [PATCH 48/71] combine time composables into one lint fix

---
 .../timeConductor/ConductorComponent.vue      | 32 +++++-----
 .../timeConductor/ConductorInputsFixed.vue    |  7 ++-
 .../independent/IndependentMode.vue           |  1 -
 .../independent/IndependentTimeConductor.vue  | 11 ++--
 src/plugins/timeConductor/useTime.js          | 59 +++++++++++++++++++
 5 files changed, 88 insertions(+), 22 deletions(-)
 create mode 100644 src/plugins/timeConductor/useTime.js

diff --git a/src/plugins/timeConductor/ConductorComponent.vue b/src/plugins/timeConductor/ConductorComponent.vue
index 3285a41a6da..aba94b4a4f8 100644
--- a/src/plugins/timeConductor/ConductorComponent.vue
+++ b/src/plugins/timeConductor/ConductorComponent.vue
@@ -78,12 +78,7 @@ import ConductorModeIcon from './ConductorModeIcon.vue';
 import ConductorPopUp from './ConductorPopUp.vue';
 import conductorPopUpManager from './conductorPopUpManager.js';
 import ConductorTimeSystem from './ConductorTimeSystem.vue';
-import { useClock } from './useClock.js';
-import { useClockOffsets } from './useClockOffsets.js';
-import { useTimeBounds } from './useTimeBounds.js';
-import { useTimeContext } from './useTimeContext.js';
-import { useTimeMode } from './useTimeMode.js';
-import { useTimeSystem } from './useTimeSystem.js';
+import { useTime } from './useTime.js';
 
 export default {
   components: {
@@ -101,14 +96,23 @@ export default {
   inject: ['openmct', 'configuration'],
   setup(props) {
     const openmct = inject('openmct');
-    const { timeContext } = useTimeContext(openmct);
-    const { timeSystemFormatter, timeSystemDurationFormatter, isTimeSystemUTCBased } =
-      useTimeSystem(openmct, timeContext);
-    const { timeMode, isFixedTimeMode, isRealTimeMode, getAllModeMetadata, getModeMetadata } =
-      useTimeMode(openmct, timeContext);
-    const { bounds, isTick } = useTimeBounds(openmct, timeContext);
-    const { clock, getAllClockMetadata, getClockMetadata } = useClock(openmct, timeContext);
-    const { offsets } = useClockOffsets(openmct, timeContext);
+    const {
+      timeContext,
+      timeSystemFormatter,
+      timeSystemDurationFormatter,
+      isTimeSystemUTCBased,
+      timeMode,
+      isFixedTimeMode,
+      isRealTimeMode,
+      getAllModeMetadata,
+      getModeMetadata,
+      bounds,
+      isTick,
+      offsets,
+      clock,
+      getAllClockMetadata,
+      getClockMetadata
+    } = useTime(openmct);
 
     provide('timeSystemFormatter', timeSystemFormatter);
     provide('timeSystemDurationFormatter', timeSystemDurationFormatter);
diff --git a/src/plugins/timeConductor/ConductorInputsFixed.vue b/src/plugins/timeConductor/ConductorInputsFixed.vue
index d49fb28763a..e0c09b2f1ec 100644
--- a/src/plugins/timeConductor/ConductorInputsFixed.vue
+++ b/src/plugins/timeConductor/ConductorInputsFixed.vue
@@ -20,7 +20,12 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-  <DateTimePopupFixed v-if="delimiter && !readOnly" :delimiter="delimiter" @focus="$event.target.select()" @dismiss="dismiss" />
+  <DateTimePopupFixed
+    v-if="delimiter && !readOnly"
+    :delimiter="delimiter"
+    @focus="$event.target.select()"
+    @dismiss="dismiss"
+  />
   <TimePopupFixed v-else-if="!readOnly" @focus="$event.target.select()" @dismiss="dismiss" />
   <div v-else class="c-compact-tc__setting-wrapper">
     <div
diff --git a/src/plugins/timeConductor/independent/IndependentMode.vue b/src/plugins/timeConductor/independent/IndependentMode.vue
index 88a959c118a..c951c77cb30 100644
--- a/src/plugins/timeConductor/independent/IndependentMode.vue
+++ b/src/plugins/timeConductor/independent/IndependentMode.vue
@@ -35,7 +35,6 @@
 </template>
 
 <script>
-
 export default {
   inject: ['openmct', 'timeMode', 'getAllModeMetadata', 'getModeMetadata'],
   props: {
diff --git a/src/plugins/timeConductor/independent/IndependentTimeConductor.vue b/src/plugins/timeConductor/independent/IndependentTimeConductor.vue
index 9e36fee5970..38720ce1df8 100644
--- a/src/plugins/timeConductor/independent/IndependentTimeConductor.vue
+++ b/src/plugins/timeConductor/independent/IndependentTimeConductor.vue
@@ -24,7 +24,11 @@
     ref="timeConductorOptionsHolder"
     class="c-compact-tc"
     :class="[
-      isFixedTimeMode ? 'is-fixed-mode' : independentTCEnabled ? 'is-realtime-mode' : 'is-fixed-mode',
+      isFixedTimeMode
+        ? 'is-fixed-mode'
+        : independentTCEnabled
+          ? 'is-realtime-mode'
+          : 'is-fixed-mode',
       { 'is-expanded': independentTCEnabled }
     ]"
     aria-label="Independent Time Conductor Panel"
@@ -198,9 +202,6 @@ export default {
         this.initialize();
       }
     },
-    independentTCEnabled() {
-      this.handleIndependentTimeConductorChange();
-    },
     clock() {
       if (this.independentTCEnabled) {
         this.saveClock();
@@ -255,7 +256,6 @@ export default {
         'configuration.useIndependentTime',
         this.independentTCEnabled
       );
-
     },
     setTimeOptions() {
       this.timeOptions = toRaw(this.domainObject.configuration.timeOptions);
@@ -320,7 +320,6 @@ export default {
         // if (this.isRealTimeMode) {
         //   independentTimeContext.setClock(this.timeOptions.clock);
         // }
-
         // independentTimeContext.setMode(this.timeOptions.mode, independentTimeContextBoundsOrOffsets);
       }
     },
diff --git a/src/plugins/timeConductor/useTime.js b/src/plugins/timeConductor/useTime.js
new file mode 100644
index 00000000000..430059062d4
--- /dev/null
+++ b/src/plugins/timeConductor/useTime.js
@@ -0,0 +1,59 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { useClock } from './useClock.js';
+import { useClockOffsets } from './useClockOffsets.js';
+import { useTimeBounds } from './useTimeBounds.js';
+import { useTimeContext } from './useTimeContext.js';
+import { useTimeMode } from './useTimeMode.js';
+import { useTimeSystem } from './useTimeSystem.js';
+
+export function useTime(openmct, objectPath) {
+  const { timeContext } = useTimeContext(openmct, objectPath);
+  const { timeSystemFormatter, timeSystemDurationFormatter, isTimeSystemUTCBased } = useTimeSystem(
+    openmct,
+    timeContext
+  );
+  const { timeMode, isFixedTimeMode, isRealTimeMode, getAllModeMetadata, getModeMetadata } =
+    useTimeMode(openmct, timeContext);
+  const { bounds, isTick } = useTimeBounds(openmct, timeContext);
+  const { clock, getAllClockMetadata, getClockMetadata } = useClock(openmct, timeContext);
+  const { offsets } = useClockOffsets(openmct, timeContext);
+
+  return {
+    timeContext,
+    timeSystemFormatter,
+    timeSystemDurationFormatter,
+    isTimeSystemUTCBased,
+    timeMode,
+    isFixedTimeMode,
+    isRealTimeMode,
+    getAllModeMetadata,
+    getModeMetadata,
+    bounds,
+    isTick,
+    offsets,
+    clock,
+    getAllClockMetadata,
+    getClockMetadata
+  };
+}

From fde43508f40021438d0211d211a461421f7d2b87 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Tue, 5 Aug 2025 11:43:02 -0700
Subject: [PATCH 49/71] fix single datetime fixed input validation clean up
 shouldDismiss modal behavior

---
 .../timeConductor/DateTimePopupFixed.vue      |  10 +-
 src/plugins/timeConductor/TimePopupFixed.vue  | 150 +++++++-----------
 2 files changed, 66 insertions(+), 94 deletions(-)

diff --git a/src/plugins/timeConductor/DateTimePopupFixed.vue b/src/plugins/timeConductor/DateTimePopupFixed.vue
index 16420988b81..9c1e87a1501 100644
--- a/src/plugins/timeConductor/DateTimePopupFixed.vue
+++ b/src/plugins/timeConductor/DateTimePopupFixed.vue
@@ -105,7 +105,7 @@
           class="c-button c-button--major icon-check"
           :disabled="hasInputValidityError"
           aria-label="Submit time bounds"
-          @click.prevent="submitForm"
+          @click.prevent="submitForm(true)"
         ></button>
         <button
           class="c-button icon-x"
@@ -189,7 +189,7 @@ export default {
         endTime: this.timeSystemDurationFormatter.format(Math.abs(this.bounds.end))
       };
     },
-    setBoundsFromView(dismiss) {
+    setBoundsFromView(shouldDismiss) {
       if (this.$refs.fixedDeltaInput.checkValidity()) {
         const start = this.timeSystemFormatter.parse(
           `${this.formattedBounds.startDate}${this.delimiter}${this.formattedBounds.startTime}`
@@ -204,7 +204,7 @@ export default {
         });
       }
 
-      if (dismiss) {
+      if (shouldDismiss) {
         this.$emit('dismiss');
 
         return false;
@@ -219,14 +219,14 @@ export default {
       input.setCustomValidity('');
       input.title = '';
     },
-    submitForm() {
+    submitForm(shouldDismiss) {
       this.validateLimit();
       this.reportValidity('limit');
       this.validateBounds();
       this.reportValidity('bounds');
 
       if (this.isValid) {
-        this.setBoundsFromView(true);
+        this.setBoundsFromView(shouldDismiss);
       }
     },
     validateInput(refName) {
diff --git a/src/plugins/timeConductor/TimePopupFixed.vue b/src/plugins/timeConductor/TimePopupFixed.vue
index 4d33b22e7b2..4884bfea4ee 100644
--- a/src/plugins/timeConductor/TimePopupFixed.vue
+++ b/src/plugins/timeConductor/TimePopupFixed.vue
@@ -28,14 +28,15 @@
 
       <div class="pr-time-input pr-time-input-start">
         <input
-          ref="startTime"
+          ref="start"
           v-model="formattedBounds.start"
           class="c-input--datetime"
           type="text"
           autocorrect="off"
           spellcheck="false"
           aria-label="Start time"
-          @input="validateAllBounds('startTime')"
+          @input="validateInput('start')"
+          @change="reportValidity('start')"
         />
         <DatePicker
           v-if="isTimeSystemUTCBased"
@@ -49,14 +50,15 @@
 
       <div class="pr-time-input pr-time-input-end">
         <input
-          ref="endTime"
+          ref="end"
           v-model="formattedBounds.end"
           class="c-input--datetime"
           type="text"
           autocorrect="off"
           spellcheck="false"
           aria-label="End time"
-          @input="validateAllBounds('endTime')"
+          @input="validateInput('end')"
+          @change="reportValidity('end')"
         />
         <DatePicker
           v-if="isTimeSystemUTCBased"
@@ -71,7 +73,7 @@
           class="c-button c-button--major icon-check"
           :disabled="hasInputValidityError"
           aria-label="Submit time bounds"
-          @click.prevent="handleFormSubmission(true)"
+          @click.prevent="submitForm(true)"
         ></button>
         <button
           class="c-button icon-x"
@@ -102,16 +104,30 @@ export default {
   data() {
     return {
       formattedBounds: {},
-      isDisabled: false
+      inputValidityMap: {
+        start: { valid: true },
+        end: { valid: true }
+      },
+      logicalValidityMap: {
+        limit: { valid: true },
+        bounds: { valid: true }
+      }
     };
   },
   computed: {
-
+    hasInputValidityError() {
+      return Object.values(this.inputValidityMap).some((validity) => !validity.valid);
+    },
+    hasLogicalValidationErrors() {
+      return Object.values(this.logicalValidityMap).some((validity) => !validity.valid);
+    },
+    isValid() {
+      return !this.hasInputValidityError && !this.hasLogicalValidationErrors;
+    }
   },
   watch: {
     bounds: {
       handler() {
-        console.log(this.bounds);
         this.setViewFromBounds();
       }
     }
@@ -123,15 +139,6 @@ export default {
     this.clearAllValidation();
   },
   methods: {
-    clearAllValidation() {
-      [this.$refs.startTime, this.$refs.endTime].forEach(this.clearValidationForInput);
-    },
-    clearValidationForInput(input) {
-      if (input) {
-        input.setCustomValidity('');
-        input.title = '';
-      }
-    },
     setViewFromBounds() {
       const start = this.timeSystemFormatter.format(this.bounds.start);
       const end = this.timeSystemFormatter.format(this.bounds.end);
@@ -141,7 +148,7 @@ export default {
         end
       };
     },
-    setBoundsFromView(dismiss) {
+    setBoundsFromView(shouldDismiss) {
       if (this.$refs.fixedDeltaInput.checkValidity()) {
         const start = this.timeSystemFormatter.parse(this.formattedBounds.start);
         const end = this.timeSystemFormatter.parse(this.formattedBounds.end);
@@ -152,7 +159,7 @@ export default {
         });
       }
 
-      if (dismiss) {
+      if (shouldDismiss) {
         this.$emit('dismiss');
         return false;
       }
@@ -166,7 +173,7 @@ export default {
       input.setCustomValidity('');
       input.title = '';
     },
-    handleFormSubmission(shouldDismiss) {
+    submitForm(shouldDismiss) {
       this.validateLimit();
       this.reportValidity('limit');
       this.validateBounds();
@@ -176,76 +183,40 @@ export default {
         this.setBoundsFromView(shouldDismiss);
       }
     },
-    validateAllBounds(ref) {
-      this.isDisabled = false;
-
-      if (!this.areBoundsFormatsValid()) {
-        this.isDisabled = true;
-        return false;
-      }
-
-      let validationResult = { valid: true };
-      const currentInput = this.$refs[ref];
-
-      return [this.$refs.startTime, this.$refs.endTime].every((input) => {
-        const start = this.timeSystemFormatter.parse(this.formattedBounds.start);
-        const end = this.timeSystemFormatter.parse(this.formattedBounds.end);
-
-        const bounds = {
-          start,
-          end
-        };
-
-        //TODO: Do we need limits here? We have conductor limits disabled right now
-        // const limit = this.getBoundsLimit();
-        const limit = false;
+    validateInput(refName) {
+      this.clearAllValidation();
+      const validationResult = this.timeSystemFormatter.validate(this.formattedBounds[refName])
+        ? { valid: true }
+        : { valid: false, message: 'Invalid Date' };
 
-        if (this.isTimeSystemUTCBased && limit && bounds.end - bounds.start > limit) {
-          if (input === currentInput) {
-            validationResult = {
-              valid: false,
-              message: 'Start and end difference exceeds allowable limit'
-            };
-          }
-        } else {
-          if (input === currentInput) {
-            validationResult = this.timeContext.validateBounds(bounds);
-          }
-        }
-
-        return this.handleValidationResults(input, validationResult);
-      });
+      this.inputValidityMap[refName] = validationResult;
     },
-    areBoundsFormatsValid() {
-      let validationResult = {
-        valid: true
+    validateBounds() {
+      const bounds = {
+        start: this.timeSystemFormatter.parse(this.formattedBounds.start),
+        end: this.timeSystemFormatter.parse(this.formattedBounds.end)
       };
 
-      return [this.$refs.startTime, this.$refs.endTime].every((input) => {
-        const formattedBounds =
-          input === this.$refs.startTime
-            ? this.formattedBounds.start
-            : this.formattedBounds.end;
-        if (!this.timeSystemFormatter.validate(formattedBounds)) {
-          validationResult = {
-            valid: false,
-            message: 'Invalid date'
-          };
-        }
-
-        return this.handleValidationResults(input, validationResult);
-      });
+      this.logicalValidityMap.bounds = this.openmct.time.validateBounds(bounds);
     },
-    getBoundsLimit() {
-      const configuration = this.configuration.menuOptions
-        .filter((option) => option.timeSystem === this.timeSystem.key)
-        .find((option) => option.limit);
-
-      const limit = configuration ? configuration.limit : undefined;
-
-      return limit;
+    validateLimit(bounds) {
+      const limit = this.configuration?.menuOptions
+        ?.filter((option) => option.timeSystem === this.timeSystemKey)
+        ?.find((option) => option.limit)?.limit;
+
+      if (this.isUTCBased && limit && bounds.end - bounds.start > limit) {
+        this.logicalValidityMap.limit = {
+          valid: false,
+          message: 'Start and end difference exceeds allowable limit'
+        };
+      } else {
+        this.logicalValidityMap.limit = { valid: true };
+      }
     },
-    handleValidationResults(input, validationResult) {
+    reportValidity(refName) {
+      const input = this.getInput(refName);
+      const validationResult = this.inputValidityMap[refName] ?? this.logicalValidityMap[refName];
+
       if (validationResult.valid !== true) {
         input.setCustomValidity(validationResult.message);
         input.title = validationResult.message;
@@ -262,16 +233,17 @@ export default {
         return this.$refs[refName];
       }
 
-      return this.$refs.startDate;
+      return this.$refs.start;
+    },
+    dateSelected(date, refName) {
+      this.formattedBounds[refName] = this.timeSystemFormatter.format(date);
+      this.validateInput(refName);
+      this.reportValidity(refName);
     },
     hide($event) {
       if ($event.target.className.indexOf('c-button icon-x') > -1) {
         this.$emit('dismiss');
       }
-    },
-    dateSelected(date, refName) {
-      this.formattedBounds[refName] = this.timeSystemFormatter.format(date);
-      this.validateInput(refName);
     }
   }
 };

From 749dde721957326e864dce21e28bd15c71010511 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Tue, 5 Aug 2025 11:43:18 -0700
Subject: [PATCH 50/71] correct jsdocs

---
 src/plugins/timeConductor/useTimeBounds.js | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/plugins/timeConductor/useTimeBounds.js b/src/plugins/timeConductor/useTimeBounds.js
index e5239a876e1..a88597c7d6b 100644
--- a/src/plugins/timeConductor/useTimeBounds.js
+++ b/src/plugins/timeConductor/useTimeBounds.js
@@ -26,6 +26,9 @@ import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
 import throttle from '../../utils/throttle.js';
 
 const THROTTLE_RATE = 300;
+/**
+ * @typedef {import('@/api/time/TimeContext.js').default} TimeContext
+ */
 
 /**
  * Provides reactive `bounds`,
@@ -33,7 +36,7 @@ const THROTTLE_RATE = 300;
  * which automatically stops observing when the component is unmounted.
  *
  * @param {OpenMCT} [openmct] the Open MCT API
- * @param {Array} objectPath The view's objectPath
+ * @param {TimeContext} timeContext The view's timeContext
  * @returns {{
  *   bounds: import('vue').Ref<object>,
  *   isTick: import('vue').Ref<boolean>
@@ -57,9 +60,15 @@ export function useTimeBounds(openmct, timeContext) {
   );
 
   function observeTimeBounds() {
-    timeContext.value.on(TIME_CONTEXT_EVENTS.boundsChanged, throttle(updateTimeBounds, THROTTLE_RATE));
+    timeContext.value.on(
+      TIME_CONTEXT_EVENTS.boundsChanged,
+      throttle(updateTimeBounds, THROTTLE_RATE)
+    );
     stopObservingTimeBounds = () =>
-      timeContext.value.off(TIME_CONTEXT_EVENTS.boundsChanged, throttle(updateTimeBounds, THROTTLE_RATE));
+      timeContext.value.off(
+        TIME_CONTEXT_EVENTS.boundsChanged,
+        throttle(updateTimeBounds, THROTTLE_RATE)
+      );
   }
 
   function updateTimeBounds(_timeBounds, _isTick) {

From 3c2ad272deac2520410a129b35d6b61a06d071aa Mon Sep 17 00:00:00 2001
From: Jamie V <jamie.j.vigliotta@nasa.gov>
Date: Wed, 6 Aug 2025 18:27:36 -0700
Subject: [PATCH 51/71] debug

---
 src/plugins/plot/axis/XAxis.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugins/plot/axis/XAxis.vue b/src/plugins/plot/axis/XAxis.vue
index ceb58503312..d35bedb624b 100644
--- a/src/plugins/plot/axis/XAxis.vue
+++ b/src/plugins/plot/axis/XAxis.vue
@@ -132,7 +132,7 @@ export default {
           };
         });
       }
-
+      console.log('xKeyOptions', this.xKeyOptions, 'this.xAxis', this.xAxis);
       this.xAxisLabel = this.xAxis.get('label');
       this.selectedXKeyOptionKey =
         this.xKeyOptions.length > 0 ? this.getXKeyOption(xAxisKey).key : xAxisKey;

From 7c3ede1a168d964ec1bccdca92651ff4d0fc1924 Mon Sep 17 00:00:00 2001
From: Jamie V <jamie.j.vigliotta@nasa.gov>
Date: Mon, 11 Aug 2025 14:15:48 -0700
Subject: [PATCH 52/71] debuggin

---
 src/plugins/plot/axis/XAxis.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugins/plot/axis/XAxis.vue b/src/plugins/plot/axis/XAxis.vue
index ceb58503312..d35bedb624b 100644
--- a/src/plugins/plot/axis/XAxis.vue
+++ b/src/plugins/plot/axis/XAxis.vue
@@ -132,7 +132,7 @@ export default {
           };
         });
       }
-
+      console.log('xKeyOptions', this.xKeyOptions, 'this.xAxis', this.xAxis);
       this.xAxisLabel = this.xAxis.get('label');
       this.selectedXKeyOptionKey =
         this.xKeyOptions.length > 0 ? this.getXKeyOption(xAxisKey).key : xAxisKey;

From 48bfcdb1c95b86c8a3d24fecbc803255054b8f62 Mon Sep 17 00:00:00 2001
From: Jamie V <jamie.j.vigliotta@nasa.gov>
Date: Thu, 28 Aug 2025 16:24:55 -0700
Subject: [PATCH 53/71] adding the correlation telemetry plugin

---
 .../correlationTelemetryPlugin/plugin.js      | 228 ++++++++++++++++++
 src/plugins/plugins.js                        |   2 +
 2 files changed, 230 insertions(+)
 create mode 100644 src/plugins/correlationTelemetryPlugin/plugin.js

diff --git a/src/plugins/correlationTelemetryPlugin/plugin.js b/src/plugins/correlationTelemetryPlugin/plugin.js
new file mode 100644
index 00000000000..a1857fd1560
--- /dev/null
+++ b/src/plugins/correlationTelemetryPlugin/plugin.js
@@ -0,0 +1,228 @@
+const CORRELATOR_TYPE = 'telemetry.correlator';
+
+export default function CorrelationTelemetryPlugin(openmct) {
+  // eslint-disable-next-line no-shadow
+  return function install(openmct) {
+    function getTelemetryObject(idString) {
+      return openmct.objects.get(idString);
+    }
+
+    function getTelemetry(object, options) {
+      return openmct.telemetry.request(object, options);
+    }
+
+    openmct.types.addType(CORRELATOR_TYPE, {
+      name: 'Correlation Telemetry',
+      description: `Combines telemetry from multiple sources to produce telemetry correlated by timestamp with a given time tolerance.`,
+      cssClass: 'icon-object',
+      creatable: true,
+      initialize: function (obj) {
+        obj.telemetry = {};
+      },
+      form: [
+        {
+          key: 'xSource',
+          name: 'X Axis Source',
+          control: 'locator',
+          required: true,
+          cssClass: 'grows'
+        },
+        {
+          key: 'ySource',
+          name: 'Y Axis Source',
+          control: 'locator',
+          required: true,
+          cssClass: 'grows'
+        }
+      ]
+    });
+
+    openmct.telemetry.addProvider({
+      supportsMetadata: function (domainObject) {
+        return domainObject.type === CORRELATOR_TYPE;
+      },
+      getMetadata: function (domainObject) {
+        let metadata = {};
+        metadata.values = openmct.time.getAllTimeSystems().map(function (timeSystem, i) {
+          return {
+            name: timeSystem.name,
+            key: timeSystem.key,
+            source: timeSystem.source,
+            format: timeSystem.timeFormat,
+            hints: { domain: i }
+          };
+        });
+        metadata.values.push({
+          name: 'X',
+          key: 'x',
+          source: 'x',
+          hints: { xSource: 1, range: 1 }
+        });
+        metadata.values.push({
+          name: 'Y',
+          key: 'y',
+          source: 'y',
+          hints: { ySource: 1, range: 2 }
+        });
+        return metadata;
+      },
+      supportsRequest: function (domainObject) {
+        return domainObject.type === CORRELATOR_TYPE;
+      },
+      request: function (domainObject, options) {
+        let telemResults = {};
+        let telemObject;
+
+        const xSourceIdentifier = openmct.objects.makeKeyString(domainObject.xSource[0].identifier);
+        let xPromise = getTelemetryObject(xSourceIdentifier)
+          .then((object) => {
+            telemObject = object;
+            return getTelemetry(object, options);
+          })
+          .then((data) => {
+            let source = 'x';
+            telemResults[source] = {
+              object: telemObject
+            };
+            let metadata = openmct.telemetry.getMetadata(telemObject);
+            let valueMeta = metadata.valuesForHints(['range'])[0];
+            telemResults[source].coorelatorFormat = openmct.telemetry.getValueFormatter(valueMeta);
+            telemResults[source].coorelatorFormat = openmct.telemetry.getValueFormatter(valueMeta);
+            telemResults[source].timestampFormat = openmct.telemetry.getValueFormatter(
+              metadata.value(options.domain)
+            );
+            telemResults[source].data = data;
+          });
+
+        const ySourceIdentifier = openmct.objects.makeKeyString(domainObject.ySource[0].identifier);
+        let yPromise = getTelemetryObject(ySourceIdentifier)
+          .then((object) => {
+            telemObject = object;
+            return getTelemetry(object, options);
+          })
+          .then((data) => {
+            let source = 'y';
+            telemResults[source] = {
+              object: telemObject
+            };
+            let metadata = openmct.telemetry.getMetadata(telemObject);
+            let valueMeta = metadata.valuesForHints(['range'])[0];
+            telemResults[source].coorelatorFormat = openmct.telemetry.getValueFormatter(valueMeta);
+            telemResults[source].coorelatorFormat = openmct.telemetry.getValueFormatter(valueMeta);
+            telemResults[source].timestampFormat = openmct.telemetry.getValueFormatter(
+              metadata.value(options.domain)
+            );
+            telemResults[source].data = data;
+          });
+
+        return Promise.all([xPromise, yPromise]).then(function () {
+          let results = [];
+          let xByTime = telemResults.x.data.reduce(function (m, datum) {
+            m[telemResults.x.timestampFormat.parse(datum)] =
+              telemResults.x.coorelatorFormat.parse(datum);
+            return m;
+          }, {});
+          telemResults.y.data.forEach(function (datum) {
+            let timestamp = telemResults.y.timestampFormat.parse(datum);
+            if (xByTime[timestamp] !== undefined) {
+              let resultDatum = {
+                x: xByTime[timestamp],
+                y: telemResults.y.coorelatorFormat.parse(datum)
+              };
+              resultDatum[options.domain] = timestamp;
+              results.push(resultDatum);
+            }
+          });
+          return results;
+        });
+      },
+      supportsSubscribe: function (domainObject) {
+        return domainObject.type === CORRELATOR_TYPE;
+      },
+      subscribe: function (domainObject, callback) {
+        let telem = {};
+        let done = false;
+        let unsubscribes = [];
+
+        function sendUpdate() {
+          if (done) {
+            return;
+          }
+          if (!telem.y.latest || !telem.x.latest) {
+            return;
+          }
+          if (telem.y.latestTimestamp !== telem.x.latestTimestamp) {
+            return;
+          }
+          let datum = {
+            x: telem.x.coorelatorFormat.parse(telem.x.latest),
+            y: telem.y.coorelatorFormat.parse(telem.y.latest)
+          };
+          datum[openmct.time.timeSystem().key] = Math.max(
+            telem.x.latestTimestamp,
+            telem.y.latestTimestamp
+          );
+          delete telem.x.latest;
+          delete telem.y.latest;
+          delete telem.x.latestTimestamp;
+          delete telem.y.latestTimestamp;
+          callback(datum);
+        }
+
+        const xSourceIdentifier = openmct.objects.makeKeyString(domainObject.xSource[0].identifier);
+        getTelemetryObject(xSourceIdentifier).then(function (xObject) {
+          if (done) {
+            return;
+          }
+          telem.x = {
+            object: xObject
+          };
+          let metadata = openmct.telemetry.getMetadata(xObject);
+          let valueMeta = metadata.valuesForHints(['range'])[0];
+          telem.x.coorelatorFormat = openmct.telemetry.getValueFormatter(valueMeta);
+          telem.x.timestampFormat = openmct.telemetry.getValueFormatter(
+            metadata.value(openmct.time.timeSystem().key)
+          );
+          unsubscribes.push(
+            openmct.telemetry.subscribe(xObject, function (datum) {
+              telem.x.latest = datum;
+              telem.x.latestTimestamp = telem.x.timestampFormat.parse(datum);
+              requestAnimationFrame(sendUpdate);
+            })
+          );
+        });
+
+        const ySourceIdentifier = openmct.objects.makeKeyString(domainObject.ySource[0].identifier);
+        getTelemetryObject(ySourceIdentifier).then(function (yObject) {
+          if (done) {
+            return;
+          }
+          telem.y = {
+            object: yObject
+          };
+          let metadata = openmct.telemetry.getMetadata(yObject);
+          let valueMeta = metadata.valuesForHints(['range'])[0];
+          telem.y.coorelatorFormat = openmct.telemetry.getValueFormatter(valueMeta);
+          telem.y.timestampFormat = openmct.telemetry.getValueFormatter(
+            metadata.value(openmct.time.timeSystem().key)
+          );
+          unsubscribes.push(
+            openmct.telemetry.subscribe(yObject, function (datum) {
+              telem.y.latest = datum;
+              telem.y.latestTimestamp = telem.y.timestampFormat.parse(datum);
+              requestAnimationFrame(sendUpdate);
+            })
+          );
+        });
+
+        return function unsubscribe() {
+          done = true;
+          unsubscribes.forEach(function (u) {
+            u();
+          });
+          unsubscribes = undefined;
+        };
+      }
+    });
+  };
+}
diff --git a/src/plugins/plugins.js b/src/plugins/plugins.js
index 3bb2af20aac..964bcbbb5d7 100644
--- a/src/plugins/plugins.js
+++ b/src/plugins/plugins.js
@@ -34,6 +34,7 @@ import ClearData from './clearData/plugin.js';
 import Clock from './clock/plugin.js';
 import ConditionPlugin from './condition/plugin.js';
 import ConditionWidgetPlugin from './conditionWidget/plugin.js';
+import CorrelationTelemetryPlugin from './correlationTelemetryPlugin/plugin.js';
 import CouchDBSearchFolder from './CouchDBSearchFolder/plugin.js';
 import DefaultRootName from './defaultRootName/plugin.js';
 import DeviceClassifier from './DeviceClassifier/plugin.js';
@@ -176,5 +177,6 @@ plugins.Gauge = GaugePlugin;
 plugins.Timelist = TimeList;
 plugins.InspectorViews = InspectorViews;
 plugins.InspectorDataVisualization = InspectorDataVisualization;
+plugins.CorrelationTelemetry = CorrelationTelemetryPlugin;
 
 export default plugins;

From fc0059fcabfbebaa5a690aac2dce132a88788c6c Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Wed, 3 Sep 2025 15:48:48 -0700
Subject: [PATCH 54/71] this v-if is not in use

---
 src/plugins/timeConductor/ConductorComponent.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/plugins/timeConductor/ConductorComponent.vue b/src/plugins/timeConductor/ConductorComponent.vue
index aba94b4a4f8..f8df48370fd 100644
--- a/src/plugins/timeConductor/ConductorComponent.vue
+++ b/src/plugins/timeConductor/ConductorComponent.vue
@@ -49,7 +49,6 @@
       @zoom-axis="zoom"
     />
     <ConductorHistory
-      v-if="!isIndependent"
       class="c-conductor__history-select"
       title="Select and apply previously entered time intervals."
     />

From 4fda26de6a50819f25297e3bfd9babc84e9de3ef Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Thu, 4 Sep 2025 12:09:00 -0700
Subject: [PATCH 55/71] optional `formatDate` method can be defined to split
 date and time refine `UTCTimeFormat`'s `format` method and valid formats

---
 .../timeConductor/ConductorInputsFixed.vue    |  9 ++--
 .../timeConductor/DateTimePopupFixed.vue      | 50 ++++++++-----------
 src/plugins/utcTimeSystem/UTCTimeFormat.js    | 39 +++++++++------
 3 files changed, 49 insertions(+), 49 deletions(-)

diff --git a/src/plugins/timeConductor/ConductorInputsFixed.vue b/src/plugins/timeConductor/ConductorInputsFixed.vue
index e0c09b2f1ec..6ac85eb8fb8 100644
--- a/src/plugins/timeConductor/ConductorInputsFixed.vue
+++ b/src/plugins/timeConductor/ConductorInputsFixed.vue
@@ -21,8 +21,7 @@
 -->
 <template>
   <DateTimePopupFixed
-    v-if="delimiter && !readOnly"
-    :delimiter="delimiter"
+    v-if="shouldUseSplitDateTimeInputs && !readOnly"
     @focus="$event.target.select()"
     @dismiss="dismiss"
   />
@@ -47,8 +46,8 @@
 </template>
 
 <script>
-import TimePopupFixed from './TimePopupFixed.vue';
 import DateTimePopupFixed from './DateTimePopupFixed.vue';
+import TimePopupFixed from './TimePopupFixed.vue';
 
 export default {
   components: {
@@ -72,8 +71,8 @@ export default {
   },
   emits: ['dismiss-inputs-fixed'],
   computed: {
-    delimiter() {
-      return this.timeSystemFormatter.getDelimiter?.();
+    shouldUseSplitDateTimeInputs() {
+      return Boolean(this.timeSystemFormatter.getDateFormat);
     },
     formattedBounds() {
       return {
diff --git a/src/plugins/timeConductor/DateTimePopupFixed.vue b/src/plugins/timeConductor/DateTimePopupFixed.vue
index 9c1e87a1501..da3f6bc6030 100644
--- a/src/plugins/timeConductor/DateTimePopupFixed.vue
+++ b/src/plugins/timeConductor/DateTimePopupFixed.vue
@@ -132,12 +132,6 @@ export default {
     'timeSystemDurationFormatter',
     'bounds'
   ],
-  props: {
-    delimiter: {
-      type: String,
-      required: true
-    }
-  },
   emits: ['update', 'dismiss'],
   data() {
     return {
@@ -183,25 +177,23 @@ export default {
   methods: {
     setViewFromBounds() {
       this.formattedBounds = {
-        startDate: this.timeSystemFormatter.format(this.bounds.start).split(this.delimiter)[0],
+        startDate: this.timeSystemFormatter.formatDate(this.bounds.start),
         startTime: this.timeSystemDurationFormatter.format(Math.abs(this.bounds.start)),
-        endDate: this.timeSystemFormatter.format(this.bounds.end).split(this.delimiter)[0],
+        endDate: this.timeSystemFormatter.formatDate(this.bounds.end),
         endTime: this.timeSystemDurationFormatter.format(Math.abs(this.bounds.end))
       };
     },
     setBoundsFromView(shouldDismiss) {
       if (this.$refs.fixedDeltaInput.checkValidity()) {
-        const start = this.timeSystemFormatter.parse(
-          `${this.formattedBounds.startDate}${this.delimiter}${this.formattedBounds.startTime}`
-        );
-        const end = this.timeSystemFormatter.parse(
-          `${this.formattedBounds.endDate}${this.delimiter}${this.formattedBounds.endTime}`
-        );
+        const start =
+          this.timeSystemFormatter.parse(this.formattedBounds.startDate) +
+          this.timeSystemDurationFormatter.parse(this.formattedBounds.startTime);
+        const end =
+          this.timeSystemFormatter.parse(this.formattedBounds.endDate) +
+          this.timeSystemDurationFormatter.parse(this.formattedBounds.endTime);
 
-        this.timeContext.setBounds({
-          start,
-          end
-        });
+        const bounds = { start, end };
+        this.timeContext.setBounds(bounds);
       }
 
       if (shouldDismiss) {
@@ -241,14 +233,14 @@ export default {
       this.inputValidityMap[refName] = validationResult;
     },
     validateBounds() {
-      const bounds = {
-        start: this.timeSystemFormatter.parse(
-          `${this.formattedBounds.startDate}${this.delimiter}${this.formattedBounds.startTime}`
-        ),
-        end: this.timeSystemFormatter.parse(
-          `${this.formattedBounds.endDate}${this.delimiter}${this.formattedBounds.endTime}`
-        )
-      };
+      const start =
+        this.timeSystemFormatter.parse(this.formattedBounds.startDate) +
+        this.timeSystemDurationFormatter.parse(this.formattedBounds.startTime);
+      const end =
+        this.timeSystemFormatter.parse(this.formattedBounds.endDate) +
+        this.timeSystemDurationFormatter.parse(this.formattedBounds.endTime);
+
+      const bounds = { start, end };
 
       this.logicalValidityMap.bounds = this.openmct.time.validateBounds(bounds);
     },
@@ -289,14 +281,12 @@ export default {
       return this.$refs.startDate;
     },
     startDateSelected(date) {
-      this.formattedBounds.startDate = this.timeSystemFormatter
-        .format(date)
-        .split(this.delimiter)[0];
+      this.formattedBounds.startDate = this.timeSystemFormatter.formatDate(date);
       this.validateInput('startDate');
       this.reportValidity('startDate');
     },
     endDateSelected(date) {
-      this.formattedBounds.endDate = this.timeSystemFormatter.format(date).split(this.delimiter)[0];
+      this.formattedBounds.endDate = this.timeSystemFormatter.formatDate(date);
       this.validateInput('endDate');
       this.reportValidity('endDate');
     },
diff --git a/src/plugins/utcTimeSystem/UTCTimeFormat.js b/src/plugins/utcTimeSystem/UTCTimeFormat.js
index ed158912a53..0dde49c1c50 100644
--- a/src/plugins/utcTimeSystem/UTCTimeFormat.js
+++ b/src/plugins/utcTimeSystem/UTCTimeFormat.js
@@ -32,13 +32,13 @@ import moment from 'moment';
 export default class UTCTimeFormat {
   constructor() {
     this.key = 'utc';
-    this.DATE_DELIMITER = ' ';
-    this.DATE_FORMAT = `YYYY-MM-DD${this.DATE_DELIMITER}HH:mm:ss.SSS`;
+    this.DATE_FORMAT = `YYYY-MM-DD HH:mm:ss.SSS`;
     this.DATE_FORMATS = {
       PRECISION_DEFAULT: this.DATE_FORMAT,
-      PRECISION_DEFAULT_WITH_ZULU: this.DATE_FORMAT + 'Z',
-      PRECISION_SECONDS: `YYYY-MM-DD${this.DATE_DELIMITER}HH:mm:ss`,
-      PRECISION_MINUTES: `YYYY-MM-DD${this.DATE_DELIMITER}HH:mm`,
+      PRECISION_DEFAULT_WITH_ZULU: `${this.DATE_FORMAT}Z`,
+      PRECISION_DEFAULT_WITH_ZULU_MOMENT: `${this.DATE_FORMAT}[Z]`,
+      PRECISION_SECONDS: `YYYY-MM-DD HH:mm:ss`,
+      PRECISION_MINUTES: `YYYY-MM-DD HH:mm`,
       PRECISION_DAYS: 'YYYY-MM-DD',
       PRECISION_SECONDS_TIME_ONLY: 'HH:mm:ss',
       PRECISION_MINUTES_TIME_ONLY: 'HH:mm'
@@ -55,6 +55,7 @@ export default class UTCTimeFormat {
 
   /**
    * @param {number} value The value to format.
+   * @param {string} formatString The format string to use for formatting.
    * @returns {string} the formatted date(s). If multiple values were requested, then an array of
    * formatted values will be returned. Where a value could not be formatted, `undefined` will be returned at its position
    * in the array.
@@ -67,15 +68,29 @@ export default class UTCTimeFormat {
         throw 'Invalid format requested from UTC Time Formatter ';
       }
 
-      let format = formatString || this.DATE_FORMATS.PRECISION_DEFAULT;
+      const format = formatString || this.DATE_FORMATS.PRECISION_DEFAULT_WITH_ZULU_MOMENT;
 
-      return utc.format(format) + (formatString ? '' : 'Z');
-    } else {
-      return value;
+      return utc.format(format);
     }
   }
 
-  parse(text) {
+  /**
+   * Optional formatting method that allows for splitting date and time into separate inputs
+   * Allows for easier manipulation of date or time
+   * @param {number} value The value to format.
+   * @returns {string} the formatted date.
+   */
+  formatDate(value) {
+    return this.format(value, this.DATE_FORMATS.PRECISION_DAYS);
+  }
+
+  /**
+   * @param {number|string} text The text to parse.
+   * @param {string} formatString The format string to use for parsing.
+   * @returns {number} the value parsed from the text.
+   * If the text is a number, it is returned as is.
+   */
+  parse(text, formatString) {
     if (typeof text === 'number') {
       return text;
     }
@@ -86,8 +101,4 @@ export default class UTCTimeFormat {
   validate(text) {
     return moment.utc(text, Object.values(this.DATE_FORMATS), true).isValid();
   }
-
-  getDelimiter() {
-    return this.DATE_DELIMITER;
-  }
 }

From 0a2a7192af75824c11c287ccef58184ded5aec5b Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Thu, 4 Sep 2025 17:40:19 -0700
Subject: [PATCH 56/71] fix split date time inputs test

---
 src/plugins/timeConductor/ConductorInputsFixed.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugins/timeConductor/ConductorInputsFixed.vue b/src/plugins/timeConductor/ConductorInputsFixed.vue
index 6ac85eb8fb8..5d72fda0fb7 100644
--- a/src/plugins/timeConductor/ConductorInputsFixed.vue
+++ b/src/plugins/timeConductor/ConductorInputsFixed.vue
@@ -72,7 +72,7 @@ export default {
   emits: ['dismiss-inputs-fixed'],
   computed: {
     shouldUseSplitDateTimeInputs() {
-      return Boolean(this.timeSystemFormatter.getDateFormat);
+      return Boolean(this.timeSystemFormatter.formatDate);
     },
     formattedBounds() {
       return {

From 7bccaf94914d9cc7997529c167a8fc5f4dc65a45 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Thu, 4 Sep 2025 17:41:17 -0700
Subject: [PATCH 57/71] copy and paste into split date time inputs

---
 .../timeConductor/DateTimePopupFixed.vue      | 47 +++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/src/plugins/timeConductor/DateTimePopupFixed.vue b/src/plugins/timeConductor/DateTimePopupFixed.vue
index da3f6bc6030..861697e3e7c 100644
--- a/src/plugins/timeConductor/DateTimePopupFixed.vue
+++ b/src/plugins/timeConductor/DateTimePopupFixed.vue
@@ -46,6 +46,8 @@
           aria-label="Start date"
           @input="validateInput('startDate')"
           @change="reportValidity('startDate')"
+          @copy.prevent.stop="copyToClipboard('start')"
+          @paste.prevent.stop="pasteFromClipboard('start')"
         />
       </div>
 
@@ -60,6 +62,8 @@
           aria-label="Start time"
           @input="validateInput('startTime')"
           @change="reportValidity('startTime')"
+          @copy.prevent.stop="copyToClipboard('start')"
+          @paste.prevent.stop="pasteFromClipboard('start')"
         />
       </div>
 
@@ -83,6 +87,8 @@
           aria-label="End date"
           @input="validateInput('endDate')"
           @change="reportValidity('endDate')"
+          @copy.prevent.stop="copyToClipboard('end')"
+          @paste.prevent.stop="pasteFromClipboard('end')"
         />
       </div>
 
@@ -97,6 +103,8 @@
           aria-label="End time"
           @input="validateInput('endTime')"
           @change="reportValidity('endTime')"
+          @copy.prevent.stop="copyToClipboard('end')"
+          @paste.prevent.stop="pasteFromClipboard('end')"
         />
       </div>
 
@@ -175,6 +183,45 @@ export default {
     this.clearAllValidation();
   },
   methods: {
+    async copyToClipboard(startOrEnd) {
+      if (startOrEnd !== 'start' && startOrEnd !== 'end') {
+        console.warn('Invalid startOrEnd value');
+        return;
+      }
+
+      const bound =
+        this.timeSystemFormatter.parse(this.formattedBounds.startDate) +
+        this.timeSystemDurationFormatter.parse(this.formattedBounds.startTime);
+      const timeStampString = this.timeSystemFormatter.format(bound);
+
+      try {
+        await navigator.clipboard.writeText(timeStampString);
+      } catch (err) {
+        this.openmct.notifications.error('Failed to copy timestamp to clipboard');
+        console.error(err);
+      }
+    },
+    async pasteFromClipboard(startOrEnd) {
+      if (startOrEnd !== 'start' && startOrEnd !== 'end') {
+        console.warn('Invalid startOrEnd value');
+        return;
+      }
+
+      let timeStampString;
+      try {
+        timeStampString = await navigator.clipboard.readText();
+      } catch (err) {
+        this.openmct.notifications.error('Failed to get timestamp from clipboard');
+        console.error(err);
+        return;
+      }
+
+      const bound = this.timeSystemFormatter.parse(timeStampString);
+      this.formattedBounds[`${startOrEnd}Date`] = this.timeSystemFormatter.formatDate(bound);
+      this.formattedBounds[`${startOrEnd}Time`] = this.timeSystemDurationFormatter.format(
+        Math.abs(bound)
+      );
+    },
     setViewFromBounds() {
       this.formattedBounds = {
         startDate: this.timeSystemFormatter.formatDate(this.bounds.start),

From d2f6730e0ff053c074513ed7f1ae63d63ab460fa Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Mon, 8 Sep 2025 13:24:46 -0700
Subject: [PATCH 58/71] fix validation and reporting of inputs on paste

---
 .../timeConductor/DateTimePopupFixed.vue      | 65 ++++++++++++-------
 1 file changed, 43 insertions(+), 22 deletions(-)

diff --git a/src/plugins/timeConductor/DateTimePopupFixed.vue b/src/plugins/timeConductor/DateTimePopupFixed.vue
index 861697e3e7c..387e8ed8020 100644
--- a/src/plugins/timeConductor/DateTimePopupFixed.vue
+++ b/src/plugins/timeConductor/DateTimePopupFixed.vue
@@ -190,8 +190,8 @@ export default {
       }
 
       const bound =
-        this.timeSystemFormatter.parse(this.formattedBounds.startDate) +
-        this.timeSystemDurationFormatter.parse(this.formattedBounds.startTime);
+        this.timeSystemFormatter.parse(this.formattedBounds[`${startOrEnd}Date`]) +
+        this.timeSystemDurationFormatter.parse(this.formattedBounds[`${startOrEnd}Time`]);
       const timeStampString = this.timeSystemFormatter.format(bound);
 
       try {
@@ -216,11 +216,19 @@ export default {
         return;
       }
 
+      if (!this.timeSystemFormatter.validate(timeStampString)) {
+        this.openmct.notifications.warn(`"${timeStampString}" is not a valid timestamp format`);
+        return;
+      }
+
       const bound = this.timeSystemFormatter.parse(timeStampString);
       this.formattedBounds[`${startOrEnd}Date`] = this.timeSystemFormatter.formatDate(bound);
       this.formattedBounds[`${startOrEnd}Time`] = this.timeSystemDurationFormatter.format(
         Math.abs(bound)
       );
+
+      this.validateInput([`${startOrEnd}Date`, `${startOrEnd}Time`]);
+      this.reportValidity([`${startOrEnd}Date`, `${startOrEnd}Time`]);
     },
     setViewFromBounds() {
       this.formattedBounds = {
@@ -268,16 +276,23 @@ export default {
         this.setBoundsFromView(shouldDismiss);
       }
     },
-    validateInput(refName) {
+    validateInput(refNames) {
+      if (!Array.isArray(refNames)) {
+        refNames = [refNames];
+      }
+
       this.clearAllValidation();
-      const inputType = refName.includes('Date') ? 'Date' : 'Time';
-      const formatter =
-        inputType === 'Date' ? this.timeSystemFormatter : this.timeSystemDurationFormatter;
-      const validationResult = formatter.validate(this.formattedBounds[refName])
-        ? { valid: true }
-        : { valid: false, message: `Invalid ${inputType}` };
-
-      this.inputValidityMap[refName] = validationResult;
+
+      refNames.forEach((refName) => {
+        const inputType = refName.includes('Date') ? 'Date' : 'Time';
+        const formatter =
+          inputType === 'Date' ? this.timeSystemFormatter : this.timeSystemDurationFormatter;
+        const validationResult = formatter.validate(this.formattedBounds[refName])
+          ? { valid: true }
+          : { valid: false, message: `Invalid ${inputType}` };
+
+        this.inputValidityMap[refName] = validationResult;
+      });
     },
     validateBounds() {
       const start =
@@ -305,19 +320,25 @@ export default {
         this.logicalValidityMap.limit = { valid: true };
       }
     },
-    reportValidity(refName) {
-      const input = this.getInput(refName);
-      const validationResult = this.inputValidityMap[refName] ?? this.logicalValidityMap[refName];
-
-      if (validationResult.valid !== true) {
-        input.setCustomValidity(validationResult.message);
-        input.title = validationResult.message;
-        this.hasLogicalValidationErrors = true;
-      } else {
-        input.setCustomValidity('');
-        input.title = '';
+    reportValidity(refNames) {
+      if (!Array.isArray(refNames)) {
+        refNames = [refNames];
       }
 
+      refNames.forEach((refName) => {
+        const input = this.getInput(refName);
+        const validationResult = this.inputValidityMap[refName] ?? this.logicalValidityMap[refName];
+
+        if (validationResult.valid !== true) {
+          input.setCustomValidity(validationResult.message);
+          input.title = validationResult.message;
+          this.hasLogicalValidationErrors = true;
+        } else {
+          input.setCustomValidity('');
+          input.title = '';
+        }
+      });
+
       this.$refs.fixedDeltaInput.reportValidity();
     },
     getInput(refName) {

From a8f39f5b18ba3e4848127921e368702c79c039ed Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Mon, 8 Sep 2025 13:25:50 -0700
Subject: [PATCH 59/71] validate against same start and end fixed time bounds
 alter verbiage for validation of offsets to match that of bounds

---
 src/api/time/TimeContext.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/api/time/TimeContext.js b/src/api/time/TimeContext.js
index 731daacc308..c7e8726d1eb 100644
--- a/src/api/time/TimeContext.js
+++ b/src/api/time/TimeContext.js
@@ -193,10 +193,10 @@ class TimeContext extends EventEmitter {
         valid: false,
         message: 'Start and end must be specified as integer values'
       };
-    } else if (bounds.start > bounds.end) {
+    } else if (bounds.start >= bounds.end) {
       return {
         valid: false,
-        message: 'Start bound exceeds end bound'
+        message: 'Start bound must be less than end bound'
       };
     }
 
@@ -261,7 +261,7 @@ class TimeContext extends EventEmitter {
     } else if (offsets.start >= offsets.end) {
       return {
         valid: false,
-        message: 'Specified start offset must be < end offset'
+        message: 'Start offset must be less than end offset'
       };
     }
 

From f74ee904c4bb9d2e671de08b1f43e4d417381519 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Tue, 9 Sep 2025 14:45:44 -0700
Subject: [PATCH 60/71] better jsdocs

---
 src/plugins/timeConductor/useClock.js        |  6 ++--
 src/plugins/timeConductor/useClockOffsets.js | 11 ++++---
 src/plugins/timeConductor/useTime.js         | 33 ++++++++++++++++++++
 src/plugins/timeConductor/useTimeBounds.js   |  8 ++---
 src/plugins/timeConductor/useTimeContext.js  |  8 ++---
 src/plugins/timeConductor/useTimeMode.js     | 15 ++++++---
 src/plugins/timeConductor/useTimeSystem.js   | 14 +++++----
 7 files changed, 70 insertions(+), 25 deletions(-)

diff --git a/src/plugins/timeConductor/useClock.js b/src/plugins/timeConductor/useClock.js
index 247d28507a7..8df819c116f 100644
--- a/src/plugins/timeConductor/useClock.js
+++ b/src/plugins/timeConductor/useClock.js
@@ -29,10 +29,10 @@ import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
  * as well as a function to observe and update the component's clock,
  * which automatically stops observing when the component is unmounted.
  *
- * @param {OpenMCT} [openmct] the Open MCT API
- * @param {Array} objectPath The view's objectPath
+ * @param {import('openmct').OpenMCT} openmct - The Open MCT API
+ * @param {import('src/api/time/TimeContext.js').default} timeContext - the time context
  * @returns {{
- *   clock: import('vue').Ref<string>,
+ *   clock: import('vue').Ref<import('src/api/time/TimeContext.js').Clock>,
  *   getAllClockMetadata: () => Object,
  *   getClockMetadata: () => Object
  * }}
diff --git a/src/plugins/timeConductor/useClockOffsets.js b/src/plugins/timeConductor/useClockOffsets.js
index 9fca3b2cd06..5bdd5fda7c0 100644
--- a/src/plugins/timeConductor/useClockOffsets.js
+++ b/src/plugins/timeConductor/useClockOffsets.js
@@ -24,16 +24,19 @@ import { onBeforeUnmount, shallowRef, watch } from 'vue';
 
 import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
 
+/**
+ * @typedef {import('src/api/time/TimeContext.js').ClockOffsets} ClockOffsets
+ */
+
 /**
  * Provides reactive `offsets`,
  * as well as a function to observe and update offsets changes,
  * which automatically stops observing when the component is unmounted.
  *
- * @param {OpenMCT} [openmct] the Open MCT API
- * @param {TimeContext} [timeContext] the time context to use for time API clock offsets events
+ * @param {import('openmct').OpenMCT} openmct - The Open MCT API
+ * @param {import('src/api/time/TimeContext.js').default} timeContext - The time context
  * @returns {{
- *   observeClockOffsets: () => void,
- *   offsets: import('vue').Ref<object>,
+ *   offsets: import('vue').Ref<ClockOffsets>,
  * }}
  */
 export function useClockOffsets(openmct, timeContext) {
diff --git a/src/plugins/timeConductor/useTime.js b/src/plugins/timeConductor/useTime.js
index 430059062d4..90b9c0344ba 100644
--- a/src/plugins/timeConductor/useTime.js
+++ b/src/plugins/timeConductor/useTime.js
@@ -27,6 +27,39 @@ import { useTimeContext } from './useTimeContext.js';
 import { useTimeMode } from './useTimeMode.js';
 import { useTimeSystem } from './useTimeSystem.js';
 
+/**
+ * @typedef {import('src/api/time/TimeContext.js').default} TimeContext
+ * @typedef {import('src/api/time/GlobalTimeContext.js').default} GlobalTimeContext
+ * @typedef {import('src/api/telemetry/TelemetryValueFormatter.js').default} TelemetryValueFormatter
+ * @typedef {import('src/api/time/TimeContext.js').Mode} Mode
+ * @typedef {import('src/api/time/TimeContext.js').Clock} Clock
+ * @typedef {import('src/api/time/TimeContext.js').ClockOffsets} ClockOffsets
+ * @typedef {import('src/api/time/TimeContext.js').Bounds} Bounds
+ */
+
+/**
+ * Provides a reactive interface to the time context based on the current object path
+ *
+ * @param {import('openmct').OpenMCT} openmct - The Open MCT API
+ * @param {import('openmct').ObjectPath} objectPath - The path of the object
+ * @returns {{
+ *   timeContext: TimeContext | GlobalTimeContext,
+ *   timeSystemFormatter: import('vue').Ref<TelemetryValueFormatter>,
+ *   timeSystemDurationFormatter: import('vue').Ref<TelemetryValueFormatter>,
+ *   isTimeSystemUTCBased: import('vue').Ref<boolean>,
+ *   timeMode: import('vue').Ref<Mode>,
+ *   isFixedTimeMode: import('vue').Ref<boolean>,
+ *   isRealTimeMode: import('vue').Ref<boolean>,
+ *   getAllModeMetadata: import('vue').Ref<() => void>,
+ *   getModeMetadata: import('vue').Ref<() => void>,
+ *   bounds: import('vue').Ref<Bounds>,
+ *   isTick: import('vue').Ref<boolean>,
+ *   offsets: import('vue').Ref<ClockOffsets>,
+ *   clock: import('vue').Ref<Clock>,
+ *   getAllClockMetadata: import('vue').Ref<() => void>,
+ *   getClockMetadata: import('vue').Ref<() => void>
+ * }}
+ */
 export function useTime(openmct, objectPath) {
   const { timeContext } = useTimeContext(openmct, objectPath);
   const { timeSystemFormatter, timeSystemDurationFormatter, isTimeSystemUTCBased } = useTimeSystem(
diff --git a/src/plugins/timeConductor/useTimeBounds.js b/src/plugins/timeConductor/useTimeBounds.js
index a88597c7d6b..2d7861939c1 100644
--- a/src/plugins/timeConductor/useTimeBounds.js
+++ b/src/plugins/timeConductor/useTimeBounds.js
@@ -27,7 +27,7 @@ import throttle from '../../utils/throttle.js';
 
 const THROTTLE_RATE = 300;
 /**
- * @typedef {import('@/api/time/TimeContext.js').default} TimeContext
+ * @typedef {import('src/api/time/TimeContext.js').Bounds} Bounds
  */
 
 /**
@@ -35,10 +35,10 @@ const THROTTLE_RATE = 300;
  * as well as a function to observe and update bounds changes,
  * which automatically stops observing when the component is unmounted.
  *
- * @param {OpenMCT} [openmct] the Open MCT API
- * @param {TimeContext} timeContext The view's timeContext
+ * @param {import('openmct').OpenMCT} openmct - The Open MCT API
+ * @param {import('src/api/time/TimeContext.js').default} timeContext - the time context
  * @returns {{
- *   bounds: import('vue').Ref<object>,
+ *   bounds: import('vue').Ref<Bounds>,
  *   isTick: import('vue').Ref<boolean>
  * }}
  */
diff --git a/src/plugins/timeConductor/useTimeContext.js b/src/plugins/timeConductor/useTimeContext.js
index 4edefc7c913..ec5941ffe36 100644
--- a/src/plugins/timeConductor/useTimeContext.js
+++ b/src/plugins/timeConductor/useTimeContext.js
@@ -23,8 +23,8 @@
 import { shallowRef, toValue, watchEffect } from 'vue';
 
 /**
- * @typedef {import('@/api/time/TimeContext.js').default} TimeContext
- * @typedef {import('@/api/time/GlobalTimeContext.js').default} GlobalTimeContext
+ * @typedef {import('src/api/time/TimeContext.js').default} TimeContext
+ * @typedef {import('src/api/time/GlobalTimeContext.js').default} GlobalTimeContext
  */
 
 /**
@@ -32,8 +32,8 @@ import { shallowRef, toValue, watchEffect } from 'vue';
  * for the view's objectPath,
  * or the GlobalTimeContext if objectPath is undefined.
  *
- * @param {OpenMCT} openmct the Open MCT API
- * @param {Array} objectPath The view's objectPath
+ * @param {import('openmct').OpenMCT} openmct - The Open MCT API
+ * @param {import('openmct').ObjectPath} objectPath - The path of the object
  * @returns {{
  *   timeContext: TimeContext | GlobalTimeContext
  * }}
diff --git a/src/plugins/timeConductor/useTimeMode.js b/src/plugins/timeConductor/useTimeMode.js
index 02d8587a6e1..d9f6b3a847d 100644
--- a/src/plugins/timeConductor/useTimeMode.js
+++ b/src/plugins/timeConductor/useTimeMode.js
@@ -28,15 +28,21 @@ import {
   TIME_CONTEXT_EVENTS
 } from '../../api/time/constants.js';
 
+/**
+ * @typedef {import('src/api/time/TimeContext.js').Mode} Mode
+ */
+
 /**
  * Provides reactive `timeMode` which is reactive to a time context,
  * as well as a function to observe and update the component's time mode,
  * which automatically stops observing when the component is unmounted.
  *
- * @param {OpenMCT} openmct the Open MCT API
- * @param {Array} objectPath The view's objectPath
+ * @param {import('openmct').OpenMCT} openmct - The Open MCT API
+ * @param {import('src/api/time/TimeContext.js').default} timeContext - The time context
  * @returns {{
- *   timeMode: import('vue').Ref<string>,
+ *   timeMode: import('vue').Ref<Mode>,
+ *   getAllModeMetadata: import('vue').Ref<() => void>,
+ *   getModeMetadata: import('vue').Ref<() => void>,
  *   isFixedTimeMode: import('vue').Ref<boolean>,
  *   isRealTimeMode: import('vue').Ref<boolean>
  * }}
@@ -61,7 +67,8 @@ export function useTimeMode(openmct, timeContext) {
 
   function observeTimeMode() {
     timeContext.value.on(TIME_CONTEXT_EVENTS.modeChanged, updateTimeMode);
-    stopObservingTimeMode = () => timeContext.value.off(TIME_CONTEXT_EVENTS.modeChanged, updateTimeMode);
+    stopObservingTimeMode = () =>
+      timeContext.value.off(TIME_CONTEXT_EVENTS.modeChanged, updateTimeMode);
   }
 
   function getAllModeMetadata() {
diff --git a/src/plugins/timeConductor/useTimeSystem.js b/src/plugins/timeConductor/useTimeSystem.js
index c381b03696d..4d4df5d4559 100644
--- a/src/plugins/timeConductor/useTimeSystem.js
+++ b/src/plugins/timeConductor/useTimeSystem.js
@@ -27,18 +27,20 @@ import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
 const DEFAULT_DURATION_FORMATTER = 'duration';
 
 /**
- * TODO: could probably use a shallowRef for the timeSystem... and all the other components as well.
- *
+ * @typedef {import('src/api/telemetry/TelemetryValueFormatter.js').default} TelemetryValueFormatter
+ */
+
+/**
  * Provides a reactive destructuring of the component's current time system,
  * as well as a function to observe and update the component's time system,
  * which automatically stops observing when the component is unmounted.
  *
- * @param {OpenMCT} openmct the Open MCT API
- * @param {Array} objectPath The view's objectPath
+ * @param {import('openmct').OpenMCT} openmct - The Open MCT API
+ * @param {import('src/api/time/TimeContext.js').default} timeContext - The time context
  * @returns {{
  *   timeSystemKey: import('vue').Ref<string>,
- *   timeSystemFormatter: import('vue').Ref<() => void>,
- *   timeSystemDurationFormatter: import('vue').Ref<() => void>,
+ *   timeSystemFormatter: import('vue').Ref<TelemetryValueFormatter>,
+ *   timeSystemDurationFormatter: import('vue').Ref<TelemetryValueFormatter>,
  *   isTimeSystemUTCBased: import('vue').Ref<boolean>
  * }}
  */

From 5127bcd6e0f7091ef774678504b3fade5bb08965 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Wed, 10 Sep 2025 11:46:01 -0700
Subject: [PATCH 61/71] remove deprecated file

---
 src/plugins/timeConductor/mode-mixin.js | 42 -------------------------
 1 file changed, 42 deletions(-)
 delete mode 100644 src/plugins/timeConductor/mode-mixin.js

diff --git a/src/plugins/timeConductor/mode-mixin.js b/src/plugins/timeConductor/mode-mixin.js
deleted file mode 100644
index 110b49f8cc9..00000000000
--- a/src/plugins/timeConductor/mode-mixin.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import { FIXED_MODE_KEY, REALTIME_MODE_KEY } from '../../api/time/constants.js';
-
-export default {
-  methods: {
-    loadModes() {
-      this.modes = [FIXED_MODE_KEY, REALTIME_MODE_KEY].map(this.getModeMetadata);
-    },
-    getModeMetadata(mode, testIds = false) {
-      let modeOptions;
-      const key = mode;
-
-      if (key === FIXED_MODE_KEY) {
-        modeOptions = {
-          key,
-          name: 'Fixed Timespan',
-          description: 'Query and explore data that falls between two fixed datetimes.',
-          cssClass: 'icon-tabular',
-          onItemClicked: () => this.setMode(key)
-        };
-
-        if (testIds) {
-          modeOptions.testId = 'conductor-modeOption-fixed';
-        }
-      } else {
-        modeOptions = {
-          key,
-          name: 'Real-Time',
-          description:
-            'Monitor streaming data in real-time. The Time Conductor and displays will automatically advance themselves based on the active clock.',
-          cssClass: 'icon-clock',
-          onItemClicked: () => this.setMode(key)
-        };
-
-        if (testIds) {
-          modeOptions.testId = 'conductor-modeOption-realtime';
-        }
-      }
-
-      return modeOptions;
-    }
-  }
-};

From 6d7ba83b1ff6ea8b4fcabd0e310d0ee8baf8abec Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Wed, 10 Sep 2025 11:53:00 -0700
Subject: [PATCH 62/71] vue component name linting

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

diff --git a/src/plugins/timeConductor/plugin.js b/src/plugins/timeConductor/plugin.js
index a8a9acbd78f..92d2b1adb8d 100644
--- a/src/plugins/timeConductor/plugin.js
+++ b/src/plugins/timeConductor/plugin.js
@@ -111,7 +111,7 @@ function mountComponent(openmct, configuration) {
       openmct: openmct,
       configuration: configuration
     },
-    template: '<conductor />'
+    template: '<Conductor />'
   };
   openmct.layout.conductorComponent = markRaw(conductorApp);
 }

From 3cdb4453c0755549bad508c23dffd98a6933b1c8 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Thu, 11 Sep 2025 09:30:11 -0700
Subject: [PATCH 63/71] fix e2e test label locator

---
 e2e/appActions.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/e2e/appActions.js b/e2e/appActions.js
index 105854b4cc7..6d94b1dc022 100644
--- a/e2e/appActions.js
+++ b/e2e/appActions.js
@@ -560,7 +560,7 @@ async function setFixedIndependentTimeConductorBounds(page, { start, end }) {
   await page.getByLabel('Enable Independent Time Conductor').click();
 
   // Bring up the time conductor popup
-  await page.getByLabel('Independent Time Conductor Settings').click();
+  await page.getByLabel('Independent Time Conductor Panel').click();
   await expect(page.getByLabel('Time Conductor Options')).toBeInViewport();
   await _setTimeBounds(page, start, end);
 

From 65947d794bbabcd557399b3c2aff606ce42ad200 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Thu, 11 Sep 2025 16:24:23 -0700
Subject: [PATCH 64/71] more specific locator

---
 .../plugins/notebook/notebookSnapshots.e2e.spec.js     | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/e2e/tests/functional/plugins/notebook/notebookSnapshots.e2e.spec.js b/e2e/tests/functional/plugins/notebook/notebookSnapshots.e2e.spec.js
index 8369012c7c5..6018b3f9b32 100644
--- a/e2e/tests/functional/plugins/notebook/notebookSnapshots.e2e.spec.js
+++ b/e2e/tests/functional/plugins/notebook/notebookSnapshots.e2e.spec.js
@@ -104,8 +104,9 @@ test.describe('Snapshot Container tests', () => {
     await page.locator('.ptro-crp-el').click();
     await page.locator('.ptro-text-tool-input').fill('...is there life on mars?');
     // When working with Painterro, we need to check that the Apply button is hidden after clicking
-    await page.getByTitle('Apply').click();
-    await expect(page.getByTitle('Apply')).toBeHidden();
+    const painterroApplyButton = page.locator('.ptro-text-tool-buttons').getByTitle('Apply');
+    await painterroApplyButton.click();
+    await expect(painterroApplyButton).toBeHidden();
 
     // Save and exit annotation window
     await page.getByRole('button', { name: 'Save' }).click();
@@ -130,8 +131,9 @@ test.describe('Snapshot Container tests', () => {
     await page.locator('.ptro-crp-el').click();
     await page.locator('.ptro-text-tool-input').fill('...is there life on mars?');
     // When working with Painterro, we need to check that the Apply button is hidden after clicking
-    await page.getByTitle('Apply').click();
-    await expect(page.getByTitle('Apply')).toBeHidden();
+    const painterroApplyButton = page.locator('.ptro-text-tool-buttons').getByTitle('Apply');
+    await painterroApplyButton.click();
+    await expect(painterroApplyButton).toBeHidden();
 
     // Save and exit annotation window
     await page.getByRole('button', { name: 'Save' }).click();

From bf9e32833b3896c2c2466c4e9c1689da4ee2b562 Mon Sep 17 00:00:00 2001
From: Jamie V <jamie.j.vigliotta@nasa.gov>
Date: Thu, 18 Sep 2025 15:41:02 -0700
Subject: [PATCH 65/71] pull parent from object path for locator field if it
 does not exist

---
 src/api/forms/components/controls/LocatorField.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/api/forms/components/controls/LocatorField.vue b/src/api/forms/components/controls/LocatorField.vue
index 7dc159a6dc2..bfa573f9342 100644
--- a/src/api/forms/components/controls/LocatorField.vue
+++ b/src/api/forms/components/controls/LocatorField.vue
@@ -23,7 +23,7 @@
 <template>
   <MctTree
     :is-selector-tree="true"
-    :initial-selection="model.parent"
+    :initial-selection="initialSelection"
     @tree-item-selection="handleItemSelection"
   />
 </template>
@@ -43,6 +43,11 @@ export default {
     }
   },
   emits: ['on-change'],
+  computed: {
+    initialSelection() {
+      return this.model.parent || this.model.value?.[1];
+    }
+  },
   methods: {
     handleItemSelection(item) {
       const data = {

From fe0c414c5d87743ca75eadd1eb1e163e26b5b0c9 Mon Sep 17 00:00:00 2001
From: Jamie V <jamie.j.vigliotta@nasa.gov>
Date: Thu, 18 Sep 2025 15:44:40 -0700
Subject: [PATCH 66/71] more gooder

---
 src/api/forms/components/controls/LocatorField.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/api/forms/components/controls/LocatorField.vue b/src/api/forms/components/controls/LocatorField.vue
index bfa573f9342..192b42e71ac 100644
--- a/src/api/forms/components/controls/LocatorField.vue
+++ b/src/api/forms/components/controls/LocatorField.vue
@@ -45,7 +45,7 @@ export default {
   emits: ['on-change'],
   computed: {
     initialSelection() {
-      return this.model.parent || this.model.value?.[1];
+      return this.model.parent || this.model.value?.[0];
     }
   },
   methods: {

From f59749690d27241517a7d3f71b2359ca231a8406 Mon Sep 17 00:00:00 2001
From: Jamie V <jamie.j.vigliotta@nasa.gov>
Date: Thu, 18 Sep 2025 15:53:38 -0700
Subject: [PATCH 67/71] debuggin correlation telem plugin

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

diff --git a/src/plugins/correlationTelemetryPlugin/plugin.js b/src/plugins/correlationTelemetryPlugin/plugin.js
index a1857fd1560..9917d1b6620 100644
--- a/src/plugins/correlationTelemetryPlugin/plugin.js
+++ b/src/plugins/correlationTelemetryPlugin/plugin.js
@@ -42,6 +42,7 @@ export default function CorrelationTelemetryPlugin(openmct) {
         return domainObject.type === CORRELATOR_TYPE;
       },
       getMetadata: function (domainObject) {
+        console.log('getMetadata', domainObject);
         let metadata = {};
         metadata.values = openmct.time.getAllTimeSystems().map(function (timeSystem, i) {
           return {

From 00c3d0cbe8c0513824f7de4b6ba379e6f83830a1 Mon Sep 17 00:00:00 2001
From: Jamie V <jamie.j.vigliotta@nasa.gov>
Date: Thu, 18 Sep 2025 16:04:51 -0700
Subject: [PATCH 68/71] add domainObject names to the metadata names

---
 src/plugins/correlationTelemetryPlugin/plugin.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/plugins/correlationTelemetryPlugin/plugin.js b/src/plugins/correlationTelemetryPlugin/plugin.js
index 9917d1b6620..00eba4eed28 100644
--- a/src/plugins/correlationTelemetryPlugin/plugin.js
+++ b/src/plugins/correlationTelemetryPlugin/plugin.js
@@ -54,13 +54,13 @@ export default function CorrelationTelemetryPlugin(openmct) {
           };
         });
         metadata.values.push({
-          name: 'X',
+          name: domainObject.xSource?.[0]?.name || 'X',
           key: 'x',
           source: 'x',
           hints: { xSource: 1, range: 1 }
         });
         metadata.values.push({
-          name: 'Y',
+          name: domainObject.ySource?.[0]?.name || 'Y',
           key: 'y',
           source: 'y',
           hints: { ySource: 1, range: 2 }

From 40ca29d023e7234735f5dcde7b3007ba0d83389a Mon Sep 17 00:00:00 2001
From: Jamie V <jamie.j.vigliotta@nasa.gov>
Date: Thu, 18 Sep 2025 16:15:37 -0700
Subject: [PATCH 69/71] trying to fix a weird issue crashing the browser (maybe
 a change watch) in tables, not plots, but in scatter plots as well

---
 src/plugins/correlationTelemetryPlugin/plugin.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/plugins/correlationTelemetryPlugin/plugin.js b/src/plugins/correlationTelemetryPlugin/plugin.js
index 00eba4eed28..1af29847ccb 100644
--- a/src/plugins/correlationTelemetryPlugin/plugin.js
+++ b/src/plugins/correlationTelemetryPlugin/plugin.js
@@ -1,4 +1,6 @@
 const CORRELATOR_TYPE = 'telemetry.correlator';
+let defaultXSourceName = 'X';
+let defaultYSourceName = 'Y';
 
 export default function CorrelationTelemetryPlugin(openmct) {
   // eslint-disable-next-line no-shadow
@@ -43,6 +45,12 @@ export default function CorrelationTelemetryPlugin(openmct) {
       },
       getMetadata: function (domainObject) {
         console.log('getMetadata', domainObject);
+        if (domainObject.xSource?.[0]?.name !== defaultXSourceName) {
+          defaultXSourceName = domainObject.xSource?.[0]?.name;
+        }
+        if (domainObject.ySource?.[0]?.name !== defaultYSourceName) {
+          defaultYSourceName = domainObject.ySource?.[0]?.name;
+        }
         let metadata = {};
         metadata.values = openmct.time.getAllTimeSystems().map(function (timeSystem, i) {
           return {
@@ -54,13 +62,13 @@ export default function CorrelationTelemetryPlugin(openmct) {
           };
         });
         metadata.values.push({
-          name: domainObject.xSource?.[0]?.name || 'X',
+          name: defaultXSourceName,
           key: 'x',
           source: 'x',
           hints: { xSource: 1, range: 1 }
         });
         metadata.values.push({
-          name: domainObject.ySource?.[0]?.name || 'Y',
+          name: defaultYSourceName,
           key: 'y',
           source: 'y',
           hints: { ySource: 1, range: 2 }

From 2c8a305cde84654a489afb4e479154251db73e3f Mon Sep 17 00:00:00 2001
From: Jamie V <jamie.j.vigliotta@nasa.gov>
Date: Thu, 18 Sep 2025 16:32:13 -0700
Subject: [PATCH 70/71] trying to fix a weird issue crashing the browser (maybe
 a change watch) in tables, not plots, but in scatter plots as well

---
 src/plugins/charts/scatter/ScatterPlotView.vue         | 4 ++--
 src/plugins/charts/scatter/ScatterPlotWithUnderlay.vue | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/plugins/charts/scatter/ScatterPlotView.vue b/src/plugins/charts/scatter/ScatterPlotView.vue
index 95b623ecac1..b3084c3ca62 100644
--- a/src/plugins/charts/scatter/ScatterPlotView.vue
+++ b/src/plugins/charts/scatter/ScatterPlotView.vue
@@ -57,8 +57,8 @@ export default {
       const yAxisUnit = yAxisMetadata.units ? `(${yAxisMetadata.units})` : '';
 
       return {
-        xAxisTitle: `${xAxisMetadata.name || ''} ${xAxisUnit}`,
-        yAxisTitle: `${yAxisMetadata.name || ''} ${yAxisUnit}`
+        xAxisTitle: `${xAxis || ''} ${xAxisUnit}`,
+        yAxisTitle: `${yAxis || ''} ${yAxisUnit}`
       };
     }
   },
diff --git a/src/plugins/charts/scatter/ScatterPlotWithUnderlay.vue b/src/plugins/charts/scatter/ScatterPlotWithUnderlay.vue
index 66b56ac06d1..1e34cf35c68 100644
--- a/src/plugins/charts/scatter/ScatterPlotWithUnderlay.vue
+++ b/src/plugins/charts/scatter/ScatterPlotWithUnderlay.vue
@@ -89,6 +89,7 @@ export default {
     data: {
       immediate: false,
       handler() {
+        console.log('data changed', this.data);
         this.updateData();
       },
       deep: true

From d86c247e75ca44925fbe0d0f8e830edf79360113 Mon Sep 17 00:00:00 2001
From: Jamie V <jamie.j.vigliotta@nasa.gov>
Date: Thu, 18 Sep 2025 16:35:17 -0700
Subject: [PATCH 71/71] no luck with metadata name of object will have to look
 at this another time

---
 .../charts/scatter/ScatterPlotWithUnderlay.vue      |  1 -
 src/plugins/correlationTelemetryPlugin/plugin.js    | 13 ++-----------
 2 files changed, 2 insertions(+), 12 deletions(-)

diff --git a/src/plugins/charts/scatter/ScatterPlotWithUnderlay.vue b/src/plugins/charts/scatter/ScatterPlotWithUnderlay.vue
index 1e34cf35c68..66b56ac06d1 100644
--- a/src/plugins/charts/scatter/ScatterPlotWithUnderlay.vue
+++ b/src/plugins/charts/scatter/ScatterPlotWithUnderlay.vue
@@ -89,7 +89,6 @@ export default {
     data: {
       immediate: false,
       handler() {
-        console.log('data changed', this.data);
         this.updateData();
       },
       deep: true
diff --git a/src/plugins/correlationTelemetryPlugin/plugin.js b/src/plugins/correlationTelemetryPlugin/plugin.js
index 1af29847ccb..a1857fd1560 100644
--- a/src/plugins/correlationTelemetryPlugin/plugin.js
+++ b/src/plugins/correlationTelemetryPlugin/plugin.js
@@ -1,6 +1,4 @@
 const CORRELATOR_TYPE = 'telemetry.correlator';
-let defaultXSourceName = 'X';
-let defaultYSourceName = 'Y';
 
 export default function CorrelationTelemetryPlugin(openmct) {
   // eslint-disable-next-line no-shadow
@@ -44,13 +42,6 @@ export default function CorrelationTelemetryPlugin(openmct) {
         return domainObject.type === CORRELATOR_TYPE;
       },
       getMetadata: function (domainObject) {
-        console.log('getMetadata', domainObject);
-        if (domainObject.xSource?.[0]?.name !== defaultXSourceName) {
-          defaultXSourceName = domainObject.xSource?.[0]?.name;
-        }
-        if (domainObject.ySource?.[0]?.name !== defaultYSourceName) {
-          defaultYSourceName = domainObject.ySource?.[0]?.name;
-        }
         let metadata = {};
         metadata.values = openmct.time.getAllTimeSystems().map(function (timeSystem, i) {
           return {
@@ -62,13 +53,13 @@ export default function CorrelationTelemetryPlugin(openmct) {
           };
         });
         metadata.values.push({
-          name: defaultXSourceName,
+          name: 'X',
           key: 'x',
           source: 'x',
           hints: { xSource: 1, range: 1 }
         });
         metadata.values.push({
-          name: defaultYSourceName,
+          name: 'Y',
           key: 'y',
           source: 'y',
           hints: { ySource: 1, range: 2 }