From af912db7aa1406ea81287840f069c28965de3300 Mon Sep 17 00:00:00 2001
From: David Tsay <david.e.tsay@nasa.gov>
Date: Thu, 27 Feb 2025 10:01:53 -0800
Subject: [PATCH] working prototype for custom resizing swimlane height

---
 src/plugins/timeline/TimelineObjectView.vue |  2 +-
 src/plugins/timeline/TimelineViewLayout.vue | 14 ++++++--------
 src/utils/vue/useFlexContainers.js          |  3 ++-
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/plugins/timeline/TimelineObjectView.vue b/src/plugins/timeline/TimelineObjectView.vue
index c571e95396..c964d91f1a 100644
--- a/src/plugins/timeline/TimelineObjectView.vue
+++ b/src/plugins/timeline/TimelineObjectView.vue
@@ -82,7 +82,7 @@ export default {
   },
   computed: {
     sizeString() {
-      return `${this.size}px`;
+      return `${this.size}%`;
     }
   },
   watch: {
diff --git a/src/plugins/timeline/TimelineViewLayout.vue b/src/plugins/timeline/TimelineViewLayout.vue
index 7da2fc9913..c1f3157187 100644
--- a/src/plugins/timeline/TimelineViewLayout.vue
+++ b/src/plugins/timeline/TimelineViewLayout.vue
@@ -72,10 +72,9 @@
 
 <script>
 import _ from 'lodash';
-import { identifierEquals } from 'objectUtils';
 import { useDragResizer } from 'utils/vue/useDragResizer.js';
 import { useFlexContainers } from 'utils/vue/useFlexContainers.js';
-import { inject, onMounted, provide, ref } from 'vue';
+import { inject, provide, ref } from 'vue';
 
 import SwimLane from '@/ui/components/swim-lane/SwimLane.vue';
 import ResizeHandle from '@/ui/layout/ResizeHandle/ResizeHandle.vue';
@@ -132,9 +131,6 @@ export default {
 
     // Flex containers - Swimlane height
     const timelineHolder = ref(null);
-    onMounted(() => {
-      console.log(timelineHolder.value);
-    });
 
     const {
       addContainer,
@@ -149,10 +145,10 @@ export default {
 
     function getContainerSize(item) {
       const containerforItem = containers.value.find((container) =>
-        identifierEquals(container.domainObjectIdentifier, item.identifier)
+        openmct.objects.areIdsEqual(container.domainObjectIdentifier, item.domainObject.identifier)
       );
 
-      return containerforItem.size;
+      return containerforItem?.size;
     }
 
     return {
@@ -246,7 +242,9 @@ export default {
       };
 
       this.items.push(item);
-      this.addContainer(item);
+
+      const container = new Container(domainObject);
+      this.addContainer(container);
     },
     removeItem(identifier) {
       let index = this.items.findIndex((item) =>
diff --git a/src/utils/vue/useFlexContainers.js b/src/utils/vue/useFlexContainers.js
index 95e259ac6c..7e3df9c7c1 100644
--- a/src/utils/vue/useFlexContainers.js
+++ b/src/utils/vue/useFlexContainers.js
@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import { ref } from 'vue';
 
 export function useFlexContainers(element, { rowsLayout, minContainerSize = 5, callback }) {
@@ -72,7 +73,7 @@ export function useFlexContainers(element, { rowsLayout, minContainerSize = 5, c
       }
 
       // Resize oldItems to fit inside remaining space;
-      const oldItems = items.filter((item) => item !== newItem);
+      const oldItems = items.filter((item) => !_.isEqual(item, newItem));
       const remainingSize = 100 - newItem.size;
 
       oldItems.forEach((item) => {