persist vertical swimlane height

src/plugins/timeline/TimelineViewLayout.vue

@@ -25,8 +25,8 @@
     <SwimLane
       v-for="timeSystemItem in timeSystems"
       :key="timeSystemItem.timeSystem.key"
-      :canShowResizeHandle="true"
-      :resizeHandleHeight="height"
+      :can-show-resize-handle="true"
+      :resize-handle-height="height"
       class="c-swimlane__time-axis"
     >
       <template #label>
@@ -139,12 +139,14 @@ export default {
 
     const {
       addContainer,
+      removeContainer,
+      reorderContainers,
       containers,
       startContainerResizing,
       containerResizing,
       endContainerResizing
     } = useFlexContainers(timelineHolder, {
-      containerClass: Container,
+      containers: domainObject.configuration.containers,
       rowsLayout: true,
       callback: mutateContainers
     });
@@ -158,12 +160,7 @@ export default {
     }
 
     function mutateContainers() {
-      if (
-        loadedComposition?.value?.length &&
-        loadedComposition?.value?.length === containers?.value?.length
-      ) {
-        openmct.objects.mutate(domainObject, 'configuration.containers', containers.value);
-      }
+      openmct.objects.mutate(domainObject, 'configuration.containers', containers.value);
     }
 
     return {
@@ -178,6 +175,8 @@ export default {
       loadedComposition,
       items,
       addContainer,
+      removeContainer,
+      reorderContainers,
       alignmentData,
       resetAlignment,
       startContainerResizing,
@@ -266,21 +265,24 @@ export default {
 
       this.items.push(item);
 
-      const containerSizeFromConfiguration = this.domainObject.configuration?.containers?.find(
-        (container) =>
+      if (
+        !this.containers.some((container) =>
           this.openmct.objects.areIdsEqual(
             container.domainObjectIdentifier,
-            domainObject.identifier
+            item.domainObject.identifier
           )
-      )?.size;
-      const container = new Container(domainObject, containerSizeFromConfiguration);
-      this.addContainer(container);
+        )
+      ) {
+        const container = new Container(domainObject);
+        this.addContainer(container);
+      }
     },
     removeItem(identifier) {
       let index = this.items.findIndex((item) =>
         this.openmct.objects.areIdsEqual(identifier, item.domainObject.identifier)
       );
       this.items.splice(index, 1);
+      this.removeContainer(index);
       delete this.extendedLinesPerKey[this.openmct.objects.makeKeyString(identifier)];
     },
     reorder(reorderPlan) {
@@ -288,6 +290,8 @@ export default {
       reorderPlan.forEach((reorderEvent) => {
         this.items[reorderEvent.newIndex] = oldItems[reorderEvent.oldIndex];
       });
+
+      this.reorderContainers(reorderPlan);
     },
     handleContentResize() {
       this.updateContentHeight();

src/utils/vue/useFlexContainers.js

@@ -16,8 +16,11 @@ import { ref } from 'vue';
  * @param {configuration} configuration object with configuration options
  * @returns
  */
-export function useFlexContainers(element, { rowsLayout, minContainerSize = 5, callback }) {
-  const containers = ref([]);
+export function useFlexContainers(
+  element,
+  { containers: existingContainers = [], rowsLayout, minContainerSize = 5, callback }
+) {
+  const containers = ref(existingContainers);
   const maxMoveSize = ref(null);
   let sizingContainers = 0;
 
@@ -35,6 +38,23 @@ export function useFlexContainers(element, { rowsLayout, minContainerSize = 5, c
     callback?.();
   }
 
+  function removeContainer(index) {
+    containers.value.splice(index, 1);
+    sizeToFill(containers.value);
+
+    callback?.();
+  }
+
+  function reorderContainers(reorderPlan) {
+    const oldContainers = containers.value.slice();
+
+    reorderPlan.forEach((reorderEvent) => {
+      containers.value[reorderEvent.newIndex] = oldContainers[reorderEvent.oldIndex];
+    });
+
+    callback?.();
+  }
+
   function startContainerResizing(index) {
     const beforeContainer = containers.value[index];
     const afterContainer = containers.value[index + 1];
@@ -52,7 +72,7 @@ export function useFlexContainers(element, { rowsLayout, minContainerSize = 5, c
   }
 
   function endContainerResizing() {
-    callback?.(containers.value);
+    callback?.();
   }
 
   function getElSize() {
@@ -101,15 +121,39 @@ export function useFlexContainers(element, { rowsLayout, minContainerSize = 5, c
         });
 
         // Ensure items add up to 100 in case of rounding error.
-        let total = items.reduce((t, item) => t + item.size, 0);
-        let excess = Math.round(100 - total);
+        const total = items.reduce((t, item) => t + item.size, 0);
+        const excess = Math.round(100 - total);
         oldItems[oldItems.length - 1].size += excess;
       }
     }
   }
 
+  /**
+   * Scales items proportionally so total is equal to 100.
+   * Assumes that an item was removed from array.
+   * @param {*} items
+   */
+  function sizeToFill(items) {
+    if (items.length === 0) {
+      return;
+    }
+
+    const oldTotal = items.reduce((total, item) => total + item.size, 0);
+    items.forEach((item) => {
+      const itemScale = item.scale || 1;
+      item.size = Math.round((item.size * itemScale * 100) / oldTotal);
+    });
+
+    // Ensure items add up to 100 in case of rounding error.
+    const total = items.reduce((t, item) => t + item.size, 0);
+    const excess = Math.round(100 - total);
+    items[items.length - 1].size += excess;
+  }
+
   return {
     addContainer,
+    removeContainer,
+    reorderContainers,
     containers,
     startContainerResizing,
     containerResizing,