From a4d2290274941eeac92e5529899695f04d5e1a4e Mon Sep 17 00:00:00 2001
From: Jamie V <jamie.j.vigliotta@nasa.gov>
Date: Thu, 29 Sep 2022 20:13:33 -0700
Subject: [PATCH] adding dynamce class for scrolling the embeds wrapper based
 on need

---
 .../notebook/components/NotebookEntry.vue     | 42 ++++++++++++++++++-
 1 file changed, 41 insertions(+), 1 deletion(-)

diff --git a/src/plugins/notebook/components/NotebookEntry.vue b/src/plugins/notebook/components/NotebookEntry.vue
index b10ad35ea8..dbcae32e45 100644
--- a/src/plugins/notebook/components/NotebookEntry.vue
+++ b/src/plugins/notebook/components/NotebookEntry.vue
@@ -91,9 +91,14 @@
                 @tags-updated="timestampAndUpdate"
             />
 
-            <div class="c-snapshots c-ne__embeds-wrapper">
+            <div
+                ref="embedsWrapper"
+                class="c-snapshots c-ne__embeds-wrapper"
+                :class="{ scrollClass: enableEmbedsWrapperScroll }"
+            >
                 <NotebookEmbed
                     v-for="embed in entry.embeds"
+                    ref="embeds"
                     :key="embed.id"
                     :embed="embed"
                     :is-locked="isLocked"
@@ -145,6 +150,8 @@ import TextHighlight from '../../../utils/textHighlight/TextHighlight.vue';
 import { createNewEmbed } from '../utils/notebook-entries';
 import { saveNotebookImageDomainObject, updateNamespaceOfDomainObject } from '../utils/notebook-image';
 
+import _ from 'lodash';
+
 import Moment from 'moment';
 
 const UNKNOWN_USER = 'Unknown';
@@ -200,6 +207,11 @@ export default {
             }
         }
     },
+    data() {
+        return {
+            enableEmbedsWrapperScroll: false
+        };
+    },
     computed: {
         createdOnDate() {
             return this.formatTime(this.entry.createdOn, 'YYYY-MM-DD');
@@ -236,8 +248,21 @@ export default {
         }
     },
     mounted() {
+        this.manageEmbedLayout = _.debounce(this.manageEmbedLayout, 400);
+
+        if (this.$refs.embedsWrapper) {
+            this.embedsWrapperResizeObserver = new ResizeObserver(this.manageEmbedLayout);
+            this.embedsWrapperResizeObserver.observe(this.$refs.embedsWrapper);
+        }
+
+        this.manageEmbedLayout();
         this.dropOnEntry = this.dropOnEntry.bind(this);
     },
+    beforeDestroy() {
+        if (this.embedsWrapperResizeObserver) {
+            this.embedsWrapperResizeObserver.unobserve(this.$refs.embedsWrapper);
+        }
+    },
     methods: {
         async addNewEmbed(objectPath) {
             const bounds = this.openmct.time.bounds();
@@ -249,6 +274,8 @@ export default {
             };
             const newEmbed = await createNewEmbed(snapshotMeta);
             this.entry.embeds.push(newEmbed);
+
+            this.manageEmbedLayout();
         },
         cancelEditMode(event) {
             const isEditing = this.openmct.editor.isEditing();
@@ -269,6 +296,17 @@ export default {
         deleteEntry() {
             this.$emit('deleteEntry', this.entry.id);
         },
+        manageEmbedLayout() {
+            if (this.$refs.embeds) {
+                const embedsWrapperLength = this.$refs.embedsWrapper.clientWidth;
+                const embedsTotalWidth = this.$refs.embeds.reduce((total, embed) => {
+                    return embed.$el.clientWidth + total;
+                }, 0);
+
+                this.enableEmbedsWrapperScroll = embedsTotalWidth > embedsWrapperLength;
+            }
+
+        },
         async dropOnEntry($event) {
             $event.stopImmediatePropagation();
 
@@ -326,6 +364,8 @@ export default {
             this.entry.embeds.splice(embedPosition, 1);
 
             this.timestampAndUpdate();
+
+            this.manageEmbedLayout();
         },
         updateEmbed(newEmbed) {
             this.entry.embeds.some(e => {