Use alignment composable to adjust left margin and width of time syst…

…em axis

src/plugins/plan/components/ActivityTimeline.vue

@@ -161,14 +161,20 @@ export default {
   },
   computed: {
     alignmentStyle() {
-      const leftOffset = this.alignmentData.multiple ? 2 * AXES_PADDING : AXES_PADDING;
+      let leftOffset = 0;
+      if (this.alignmentData.leftWidth) {
+        leftOffset = this.alignmentData.multiple ? 2 * AXES_PADDING : AXES_PADDING;
+      }
       return {
         marginLeft: `${this.alignmentData.leftWidth + leftOffset}px`
       };
     },
     svgWidth() {
       // Reduce the width by left axis width, then take off the right yaxis width as well
-      const leftOffset = this.alignmentData.multiple ? 2 * AXES_PADDING : AXES_PADDING;
+      let leftOffset = 0;
+      if (this.alignmentData.leftWidth) {
+        leftOffset = this.alignmentData.multiple ? 2 * AXES_PADDING : AXES_PADDING;
+      }
       const rightOffset = this.alignmentData.rightWidth ? AXES_PADDING : 0;
       return (
         this.width -

src/plugins/timeline/TimelineViewLayout.vue

@@ -71,14 +71,14 @@
     TimelineAxis,
     SwimLane
   },
-  inject: ['openmct', 'domainObject', 'composition', 'objectPath'],
+  inject: ['openmct', 'domainObject', 'path', 'composition'],
   setup() {
     const domainObject = inject('domainObject');
-    const objectPath = inject('objectPath');
+    const path = inject('path');
     const openmct = inject('openmct');
     const { alignment: alignmentData, reset: resetAlignment } = useAlignment(
       domainObject,
-      objectPath,
+      path,
       openmct
     );
 
@@ -94,7 +94,7 @@
     };
   },
   beforeUnmount() {
     this.resetAlignment();
     this.composition.off('add', this.addItem);
     this.composition.off('remove', this.removeItem);
     this.composition.off('reorder', this.reorder);
@@ -120,7 +120,7 @@
     addItem(domainObject) {
       let type = this.openmct.types.get(domainObject.type) || unknownObjectType;
       let keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
-      let objectPath = [domainObject].concat(this.objectPath.slice());
+      let objectPath = [domainObject].concat(this.path.slice());
       let rowCount = 0;
       if (domainObject.type === 'plan') {
         const planData = getValidatedData(domainObject);
@@ -210,7 +210,7 @@
     setTimeContext() {
       this.stopFollowingTimeContext();
 
-      this.timeContext = this.openmct.time.getContextForView(this.objectPath);
+      this.timeContext = this.openmct.time.getContextForView(this.path);
       this.getTimeSystems();
       this.updateViewBounds();
       this.timeContext.on('boundsChanged', this.updateViewBounds);

src/plugins/timeline/TimelineViewProvider.js

@@ -51,8 +51,8 @@ export default function TimelineViewProvider(openmct) {
               provide: {
                 openmct,
                 domainObject,
-                composition: openmct.composition.get(domainObject),
-                objectPath
+                path: objectPath,
+                composition: openmct.composition.get(domainObject)
               },
               template: '<timeline-view-layout></timeline-view-layout>'
             },

src/ui/components/TimeSystemAxis.vue

@@ -26,13 +26,16 @@
 </template>
 
 <script>
+const AXES_PADDING = 20;
+
 import { axisTop } from 'd3-axis';
 import { scaleLinear, scaleUtc } from 'd3-scale';
 import { select } from 'd3-selection';
-import { onMounted, ref } from 'vue';
+import { inject, onMounted, ref } from 'vue';
 
 import utcMultiTimeFormat from '@/plugins/timeConductor/utcMultiTimeFormat';
 
+import { useAlignment } from '../composables/alignmentContext';
 import { useResizeObserver } from '../composables/resize';
 
 //TODO: UI direction needed for the following property values
@@ -42,7 +45,7 @@
 //This offset needs to be re-considered
 
 export default {
-  inject: ['openmct', 'domainObject'],
+  inject: ['openmct', 'domainObject', 'path'],
   props: {
     bounds: {
       type: Object,
@@ -67,12 +70,6 @@
       default() {
         return 'svg';
       }
-    },
-    offset: {
-      type: Number,
-      default() {
-        return 0;
-      }
     }
   },
   setup() {
@@ -81,16 +78,43 @@
     onMounted(() => {
       startObserving(axisHolder.value);
     });
+
+    const domainObject = inject('domainObject');
+    const path = inject('path');
+    const openmct = inject('openmct');
+    const { alignment: alignmentData } = useAlignment(domainObject, path, openmct);
+
     return {
       axisHolder,
-      containerSize
+      containerSize,
+      alignmentData
     };
   },
   watch: {
+    alignmentData: {
+      handler() {
+        let leftOffset = 0;
+        if (this.alignmentData.leftWidth) {
+          leftOffset = this.alignmentData.multiple ? 2 * AXES_PADDING : AXES_PADDING;
+        }
+        this.svgElement.attr(
+          'style',
+          `margin-left: ${this.alignmentData.leftWidth + leftOffset}px`
+        );
+
+        const rightOffset = this.alignmentData.rightWidth ? AXES_PADDING : 0;
+        this.alignmentOffset =
+          this.alignmentData.leftWidth + leftOffset + this.alignmentData.rightWidth + rightOffset;
+        this.setDimensions();
+      },
+      deep: true
+    },
     bounds(newBounds) {
+      this.setDimensions();
       this.drawAxis(newBounds, this.timeSystem);
     },
     timeSystem(newTimeSystem) {
+      this.setDimensions();
       this.drawAxis(this.bounds, newTimeSystem);
     },
     contentHeight() {
@@ -110,7 +134,7 @@
 
     this.container = select(this.axisHolder);
     this.svgElement = this.container.append('svg:svg');
-    // draw x axis with labels. CSS is used to position them.
+    // draw x-axis with labels. CSS is used to position them.
     this.axisElement = this.svgElement
       .append('g')
       .attr('class', 'axis')
@@ -126,7 +150,7 @@
   },
   methods: {
     resize() {
-      if (this.axisHolder.clientWidth !== this.width) {
+      if (this.axisHolder.clientWidth - this.alignmentOffset !== this.width) {
         this.setDimensions();
         this.drawAxis(this.bounds, this.timeSystem);
         this.updateNowMarker();
@@ -139,12 +163,11 @@
         nowMarker.style.height = this.contentHeight + 'px';
         const nowTimeStamp = this.openmct.time.now();
         const now = this.xScale(nowTimeStamp);
-        nowMarker.style.left = now + this.offset + 'px';
+        nowMarker.style.left = now + 'px';
       }
     },
     setDimensions() {
-      this.width = this.axisHolder.clientWidth;
-      this.offsetWidth = this.width - this.offset;
+      this.width = this.axisHolder.clientWidth - (this.alignmentOffset ?? 0);
 
       this.height = Math.round(this.axisHolder.getBoundingClientRect().height);
 
@@ -180,16 +203,16 @@
         this.xScale.domain([bounds.start, bounds.end]);
       }
 
-      this.xScale.range([PADDING, this.offsetWidth - PADDING * 2]);
+      this.xScale.range([PADDING, this.width - PADDING * 2]);
     },
     setAxis() {
       this.xAxis = axisTop(this.xScale);
       this.xAxis.tickFormat(utcMultiTimeFormat);
 
       if (this.width > 1800) {
-        this.xAxis.ticks(this.offsetWidth / PIXELS_PER_TICK_WIDE);
+        this.xAxis.ticks(this.width / PIXELS_PER_TICK_WIDE);
       } else {
-        this.xAxis.ticks(this.offsetWidth / PIXELS_PER_TICK);
+        this.xAxis.ticks(this.width / PIXELS_PER_TICK);
       }
     }
   }

src/ui/components/timesystem-axis.scss

@@ -5,7 +5,6 @@
   svg {
     $lineC: rgba($colorBodyFg, 0.3) !important;
     text-rendering: geometricPrecision;
-    width: 100%;
     height: 100%;
 
     .domain {