Time conductor refactor

src/api/time/IndependentTimeContext.js

@@ -321,8 +321,16 @@
       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) {

src/api/time/TimeAPI.js

@@ -134,30 +134,30 @@
 
   /**
    * 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 {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);
     };
   }
 

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'
       };
     }
 

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) {

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,13 @@ export default {
       }
     }
   },
-  emits: ['clock-updated'],
-  data() {
-    const activeClock = this.getActiveClock();
-
-    return {
-      selectedClock: activeClock ? this.getClockMetadata(activeClock) : undefined,
-      clocks: []
-    };
+  computed: {
+    selectedClock() {
+      return this.getClockMetadata(this.clock);
+    }
   },
   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);
+    this.clocks = this.getAllClockMetadata(this.configuration.menuOptions);
   },
   methods: {
     showClocksMenu() {
@@ -86,52 +68,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);
     }
   }
 };