fix(#6812): Align Plot and Plan X-Axes in Time Strips

src/plugins/plan/components/ActivityTimeline.vue

@@ -25,7 +25,7 @@
       {{ heading }}
     </template>
     <template #object>
-      <svg :height="height" :width="width">
+      <svg :height="height" :width="svgWidth" :style="alignmentStyle">
         <symbol id="activity-bar-bg" :height="rowHeight" width="2" preserveAspectRatio="none">
           <rect x="0" y="0" width="100%" height="100%" fill="currentColor" />
           <line
@@ -92,13 +92,17 @@
 </template>
 
 <script>
+import { inject } from 'vue';
+
 import SwimLane from '@/ui/components/swim-lane/SwimLane.vue';
 
+import { useAlignment } from '../../../ui/composables/alignmentContext';
+
 export default {
   components: {
     SwimLane
   },
-  inject: ['openmct', 'domainObject'],
+  inject: ['openmct', 'domainObject', 'path'],
   props: {
     activities: {
       type: Array,
@@ -136,11 +140,27 @@ export default {
     }
   },
   emits: ['activity-selected'],
+  setup() {
+    const domainObject = inject('domainObject');
+    const path = inject('path');
+    const openmct = inject('openmct');
+    const { alignment: alignmentData } = useAlignment(domainObject, path, openmct);
+
+    return { alignmentData };
+  },
   data() {
     return {
       lineHeight: 10
     };
   },
+  computed: {
+    alignmentStyle() {
+      return { marginLeft: `${this.alignmentData.leftWidth + 20}px` };
+    },
+    svgWidth() {
+      return this.width - this.alignmentData.leftWidth - 20;
+    }
+  },
   methods: {
     setSelectionForActivity(activity, event) {
       event.stopPropagation();

src/plugins/plot/MctPlot.vue

@@ -33,14 +33,9 @@
           v-for="(yAxis, index) in yAxesIds"
           :id="yAxis.id"
           :key="`yAxis-${yAxis.id}-${index}`"
-          :has-multiple-left-axes="hasMultipleLeftAxes"
           :position="yAxis.id > 2 ? 'right' : 'left'"
           :class="{ 'plot-yaxis-right': yAxis.id > 2 }"
-          :tick-width="yAxis.tickWidth"
-          :used-tick-width="plotFirstLeftTickWidth"
-          :plot-left-tick-width="yAxis.id > 2 ? yAxis.tickWidth : plotLeftTickWidth"
           @y-key-changed="setYAxisKey"
-          @plot-y-tick-width="onYTickWidthChange"
           @toggle-axis-visibility="toggleSeriesForYAxis"
         />
       </div>
@@ -66,7 +61,6 @@
             :axis-type="'yAxis'"
             :position="'bottom'"
             :axis-id="yAxis.id"
-            @plot-tick-width="onYTickWidthChange"
           />
 
           <div
@@ -178,9 +172,10 @@
 import Flatbush from 'flatbush';
 import _ from 'lodash';
 import { useEventBus } from 'utils/useEventBus';
-import { toRaw } from 'vue';
+import { inject, toRaw } from 'vue';
 
 import { MODES } from '../../api/time/constants';
+import { useAlignment } from '../../ui/composables/alignmentContext';
 import TagEditorClassNames from '../inspectorViews/annotations/tags/TagEditorClassNames.js';
 import XAxis from './axis/XAxis.vue';
 import YAxis from './axis/YAxis.vue';
@@ -223,16 +218,6 @@
         return false;
       }
     },
-    parentYTickWidth: {
-      type: Object,
-      default() {
-        return {
-          leftTickWidth: 0,
-          rightTickWidth: 0,
-          hasMultipleLeftAxes: false
-        };
-      }
-    },
     limitLineLabels: {
       type: Object,
       default() {
@@ -252,15 +237,21 @@
     'grid-lines',
     'loading-complete',
     'loading-updated',
-    'plot-y-tick-width',
     'highlights',
     'lock-highlight-point',
     'status-updated'
   ],
   setup() {
     const { EventBus } = useEventBus();
+
+    const domainObject = inject('domainObject');
+    const path = inject('path');
+    const openmct = inject('openmct');
+    const { alignment: alignmentData } = useAlignment(domainObject, path, openmct);
+
     return {
-      EventBus
+      EventBus,
+      alignmentData
     };
   },
   data() {
@@ -292,28 +283,20 @@
   },
   computed: {
     xAxisStyle() {
-      const rightAxis = this.yAxesIds.find((yAxis) => yAxis.id > 2);
-      const leftOffset = this.hasMultipleLeftAxes ? 2 * AXES_PADDING : AXES_PADDING;
+      const leftOffset = this.alignmentData.multiple ? 2 * AXES_PADDING : AXES_PADDING;
       let style = {
-        left: `${this.plotLeftTickWidth + leftOffset}px`
+        left: `${this.alignmentData.leftWidth + leftOffset}px`
       };
-      const parentRightAxisWidth = this.parentYTickWidth.rightTickWidth;
 
-      if (parentRightAxisWidth || rightAxis) {
-        style.right = `${(parentRightAxisWidth || rightAxis.tickWidth) + AXES_PADDING}px`;
+      if (this.alignmentData.rightWidth) {
+        style.right = `${this.alignmentData.rightWidth + AXES_PADDING}px`;
       }
 
       return style;
     },
     yAxesIds() {
       return this.yAxes.filter((yAxis) => yAxis.seriesCount > 0);
     },
-    hasMultipleLeftAxes() {
-      return (
-        this.parentYTickWidth.hasMultipleLeftAxes ||
-        this.yAxes.filter((yAxis) => yAxis.seriesCount > 0 && yAxis.id <= 2).length > 1
-      );
-    },
     isNestedWithinAStackedPlot() {
       const isNavigatedObject = this.openmct.router.isNavigatedObject(
         [this.domainObject].concat(this.path)
@@ -331,24 +314,6 @@
       // only allow annotations viewing/editing if plot is paused or in fixed time mode
       return this.isFrozen || !this.isRealTime;
     },
-    plotFirstLeftTickWidth() {
-      const firstYAxis = this.yAxes.find((yAxis) => yAxis.id === 1);
-
-      return firstYAxis ? firstYAxis.tickWidth : 0;
-    },
-    plotLeftTickWidth() {
-      let leftTickWidth = 0;
-      this.yAxes.forEach((yAxis) => {
-        if (yAxis.id > 2) {
-          return;
-        }
-
-        leftTickWidth = leftTickWidth + yAxis.tickWidth;
-      });
-      const parentLeftTickWidth = this.parentYTickWidth.leftTickWidth;
-
-      return parentLeftTickWidth || leftTickWidth;
-    },
     seriesDataLoaded() {
       return this.pending === 0 && this.loaded;
     }
@@ -381,17 +346,15 @@
     this.yAxes = [
       {
         id: this.config.yAxis.id,
-        seriesCount: 0,
-        tickWidth: 0
+        seriesCount: 0
       }
     ];
     if (this.config.additionalYAxes) {
       this.yAxes = this.yAxes.concat(
         this.config.additionalYAxes.map((yAxis) => {
           return {
             id: yAxis.id,
-            seriesCount: 0,
-            tickWidth: 0
+            seriesCount: 0
           };
         })
       );
@@ -605,14 +568,6 @@
     updateTicksAndSeriesForYAxis(newAxisId, oldAxisId) {
       this.updateAxisUsageCount(oldAxisId, -1);
       this.updateAxisUsageCount(newAxisId, 1);
-
-      const foundYAxis = this.yAxes.find((yAxis) => yAxis.id === oldAxisId);
-      if (foundYAxis.seriesCount === 0) {
-        this.onYTickWidthChange({
-          width: foundYAxis.tickWidth,
-          yAxisId: foundYAxis.id
-        });
-      }
     },
 
     updateAxisUsageCount(yAxisId, updateCountBy) {
@@ -1019,49 +974,6 @@
       }
     },
 
-    /**
-     * Aggregate widths of all left and right y axes and send them up to any parent plots
-     * @param {Object} tickWidthWithYAxisId - the width and yAxisId of the tick bar
-     * @param fromDifferentObject
-     */
-    onYTickWidthChange(tickWidthWithYAxisId, fromDifferentObject) {
-      const { width, yAxisId } = tickWidthWithYAxisId;
-      if (yAxisId) {
-        const index = this.yAxes.findIndex((yAxis) => yAxis.id === yAxisId);
-        if (fromDifferentObject) {
-          // Always accept tick width if it comes from a different object.
-          this.yAxes[index].tickWidth = width;
-        } else {
-          // Otherwise, only accept tick with if it's larger.
-          const newWidth = Math.max(width, this.yAxes[index].tickWidth);
-          if (width !== this.yAxes[index].tickWidth) {
-            this.yAxes[index].tickWidth = newWidth;
-          }
-        }
-
-        const id = this.openmct.objects.makeKeyString(this.domainObject.identifier);
-        const leftTickWidth = this.yAxes
-          .filter((yAxis) => yAxis.id < 3)
-          .reduce((previous, current) => {
-            return previous + current.tickWidth;
-          }, 0);
-        const rightTickWidth = this.yAxes
-          .filter((yAxis) => yAxis.id > 2)
-          .reduce((previous, current) => {
-            return previous + current.tickWidth;
-          }, 0);
-        this.$emit(
-          'plot-y-tick-width',
-          {
-            hasMultipleLeftAxes: this.hasMultipleLeftAxes,
-            leftTickWidth,
-            rightTickWidth
-          },
-          id
-        );
-      }
-    },
-
     toggleSeriesForYAxis({ id, visible }) {
       //if toggling to visible, re-fetch the data for the series that are part of this y Axis
       if (visible === true) {

src/plugins/plot/MctTicks.vue

@@ -73,14 +73,17 @@
 </template>
 
 <script>
+import { inject } from 'vue';
+
+import { useAlignment } from '../../ui/composables/alignmentContext';
 import configStore from './configuration/ConfigStore.js';
 import eventHelpers from './lib/eventHelpers.js';
 import { getFormattedTicks, getLogTicks, ticks } from './tickUtils.js';
 
 const SECONDARY_TICK_NUMBER = 2;
 
 export default {
-  inject: ['openmct', 'domainObject'],
+  inject: ['openmct', 'domainObject', 'path'],
   props: {
     axisType: {
       type: String,
@@ -111,6 +114,14 @@ export default {
     }
   },
   emits: ['plot-tick-width'],
+  setup() {
+    const domainObject = inject('domainObject');
+    const path = inject('path');
+    const openmct = inject('openmct');
+    const { update: updateAlignment } = useAlignment(domainObject, path, openmct);
+
+    return { updateAlignment };
+  },
   data() {
     return {
       ticks: []
@@ -279,6 +290,14 @@ export default {
               width: tickWidth,
               yAxisId: this.axisType === 'yAxis' ? this.axisId : ''
             });
+            if (this.axisType === 'yAxis') {
+              this.updateAlignment({
+                width: tickWidth,
+                yAxisId: this.axisId,
+                updateObjectPath: this.path
+              });
+            }
+
             this.shouldCheckWidth = false;
           }
         }

src/plugins/plot/PlotView.vue

@@ -45,14 +45,12 @@
         :init-cursor-guide="cursorGuide"
         :options="options"
         :limit-line-labels="limitLineLabelsProp"
-        :parent-y-tick-width="parentYTickWidth"
         :color-palette="colorPalette"
         @loading-updated="loadingUpdated"
         @status-updated="setStatus"
         @config-loaded="updateReady"
         @lock-highlight-point="lockHighlightPointUpdated"
         @highlights="highlightsUpdated"
-        @plot-y-tick-width="onYTickWidthChange"
         @cursor-guide="onCursorGuideChange"
         @grid-lines="onGridLinesChange"
       >
@@ -119,16 +117,6 @@ export default {
         return undefined;
       }
     },
-    parentYTickWidth: {
-      type: Object,
-      default() {
-        return {
-          leftTickWidth: 0,
-          rightTickWidth: 0,
-          hasMultipleLeftAxes: false
-        };
-      }
-    },
     hideLegend: {
       type: Boolean,
       default() {
@@ -142,7 +130,6 @@ export default {
     'grid-lines',
     'highlights',
     'config-loaded',
-    'plot-y-tick-width',
     'cursor-guide'
   ],
   data() {
@@ -261,9 +248,6 @@ export default {
       this.configReady = ready;
       this.$emit('config-loaded', ...arguments);
     },
-    onYTickWidthChange() {
-      this.$emit('plot-y-tick-width', ...arguments);
-    },
     onCursorGuideChange() {
       this.$emit('cursor-guide', ...arguments);
     },