[Time Strip] allow user to adjust width and height of swimlanes

src/plugins/events/components/events-view.scss

@@ -20,7 +20,6 @@
     &__container {
         // Holds event lines
         background-color: $colorPlotBg;
-        //box-shadow: inset $colorPlotAreaBorder 0 0 0 1px; // Using box-shadow instead of border to not affect box size
         position: absolute;
         top: $m; right: 0; bottom: $m; left: 0;
     }
@@ -80,7 +79,6 @@
 .c-timeline__event-line--extended {
     @include abs();
     width: $eventLineW;
-    opacity: 0.4;
 
     &.--hilite {
         opacity: 0.8;

src/plugins/flexibleLayout/components/ContainerComponent.vue

@@ -80,9 +80,10 @@
 </template>
 
 <script>
+import ResizeHandle from '@/ui/layout/ResizeHandle/ResizeHandle.vue';
+
 import DropHint from './DropHint.vue';
 import FrameComponent from './FrameComponent.vue';
-import ResizeHandle from './ResizeHandle.vue';
 
 const MIN_FRAME_SIZE = 5;
 

src/plugins/flexibleLayout/components/FlexibleLayout.vue

@@ -77,11 +77,12 @@
 </template>
 
 <script>
-import Container from '../utils/container.js';
-import Frame from '../utils/frame.js';
+import Container from '@/ui/layout/Container.js';
+import Frame from '@/ui/layout/Frame.js';
+import ResizeHandle from '@/ui/layout/ResizeHandle/ResizeHandle.vue';
+
 import ContainerComponent from './ContainerComponent.vue';
 import DropHint from './DropHint.vue';
-import ResizeHandle from './ResizeHandle.vue';
 
 const MIN_CONTAINER_SIZE = 5;
 

src/plugins/flexibleLayout/components/flexible-layout.scss

@@ -247,46 +247,17 @@
   }
 
   &__resize-handle {
-    $size: 2px;
+    $size: 1px;
     $margin: 3px;
     $marginHov: 0;
     $grippyThickness: $size + 6;
     $grippyLen: $grippyThickness * 2;
 
+    @include resizeHandleStyle($size, $margin);
+
     display: flex;
     flex-direction: column;
     flex: 0 0 ($margin * 2) + $size;
-
-    &:before {
-      // The visible resize line
-      background-color: $editUIColor;
-      content: '';
-      display: block;
-      flex: 1 1 auto;
-      min-height: $size;
-      min-width: $size;
-    }
-
-    &.vertical {
-      padding: $margin $size;
-      &:hover {
-        cursor: row-resize;
-      }
-    }
-
-    &.horizontal {
-      padding: $size $margin;
-      &:hover {
-        cursor: col-resize;
-      }
-    }
-
-    &:hover {
-      &:before {
-        // The visible resize line
-        background-color: $editUIColorHov;
-      }
-    }
   }
 
   // Hide the resize-handles in first and last c-fl-frame elements

src/plugins/flexibleLayout/plugin.js

@@ -20,9 +20,10 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+import Container from '@/ui/layout/Container.js';
+
 import FlexibleLayoutViewProvider from './flexibleLayoutViewProvider.js';
 import ToolBarProvider from './toolbarProvider.js';
-import Container from './utils/container.js';
 
 export default function plugin() {
   return function install(openmct) {

src/plugins/plan/components/PlanView.vue

@@ -23,7 +23,7 @@
 <template>
   <div ref="plan" class="c-plan c-timeline-holder">
     <template v-if="viewBounds && !options.compact">
-      <SwimLane>
+      <SwimLane class="c-swimlane__time-axis">
         <template #label>{{ timeSystem.name }}</template>
         <template #object>
           <TimelineAxis

src/plugins/timeline/Container.js

@@ -0,0 +1,17 @@
+class Container {
+  constructor(domainObject, size) {
+    this.domainObjectIdentifier = domainObject.identifier;
+    this.size = size;
+    this.scale = getContainerScale(domainObject);
+  }
+}
+
+function getContainerScale(domainObject) {
+  if (domainObject.type === 'telemetry.plot.stacked') {
+    return domainObject?.composition?.length;
+  }
+
+  return 1;
+}
+
+export default Container;

src/plugins/timeline/TimelineObjectView.vue

@@ -24,7 +24,6 @@
   <SwimLane
     :icon-class="item.type.definition.cssClass"
     :status="status"
-    :min-height="item.height"
     :show-ucontents="isPlanLikeObject(item.domainObject)"
     :span-rows-count="item.rowCount"
     :domain-object="item.domainObject"
@@ -33,6 +32,7 @@
     :hide-button="!item.isEventTelemetry"
     :button-click-on="enableExtendEventLines"
     :button-click-off="disableExtendEventLines"
+    :style="[{ 'flex-basis': sizeString }]"
   >
     <template #label>
       {{ item.domainObject.name }}
@@ -67,6 +67,10 @@
     extendedLinesBus: {
       type: Object,
       required: true
+    },
+    size: {
+      type: Number,
+      required: true
     }
   },
   data() {
@@ -76,6 +80,11 @@
       status: ''
     };
   },
+  computed: {
+    sizeString() {
+      return `${this.size}%`;
+    }
+  },
   watch: {
     item(newItem) {
       if (!this.context) {