From a4a733a24abbfc4d2bebf9973d4de9c30eb7a880 Mon Sep 17 00:00:00 2001
From: saba-ja <saba.janamian.663@my.csun.edu>
Date: Wed, 30 Jun 2021 06:36:07 -0700
Subject: [PATCH 01/15] saba-ja: fix filter box margin

---
 src/fprime_gds/flask/static/css/fpstyle.css | 6 ++++++
 src/fprime_gds/flask/static/index.html      | 4 ++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/fprime_gds/flask/static/css/fpstyle.css b/src/fprime_gds/flask/static/css/fpstyle.css
index 735bf3d2..e66cae65 100644
--- a/src/fprime_gds/flask/static/css/fpstyle.css
+++ b/src/fprime_gds/flask/static/css/fpstyle.css
@@ -73,6 +73,12 @@ body, .fp-full-height {
     display: flex;
     flex-direction: column;
 }
+.fp-flex-repeater-margin {
+    margin-top: 1em;
+}
+.fp-filter-box {
+    margin-bottom: 1em;
+}
 .fp-flex-header {
     flex-grow: 0;
 }
diff --git a/src/fprime_gds/flask/static/index.html b/src/fprime_gds/flask/static/index.html
index 2d6ac97e..3fb165f2 100644
--- a/src/fprime_gds/flask/static/index.html
+++ b/src/fprime_gds/flask/static/index.html
@@ -397,9 +397,9 @@ <h2>File Downlink</h2>
             5. File downlink progress and download (uses file-row template)
             -->
             <template id="fp-table-template">
-                <div class="fp-flex-repeater">
+                <div class="fp-flex-repeater fp-flex-repeater-margin">
                     <div class="row fp-flex-header no-gutters justify-content-end" v-if="!compact">
-                        <div class="mx-1">Filters:</div>
+                        <div class="mx-1 fp-filter-box">Filters:</div>
                         <div class="ml-1 col-4">
                             <v-select id="fp-table-filter" :clearable="true" :searchable="true" :taggable="true"
                                       :no-drop="true" :options="[]" :multiple="true"

From 94f36637b9dc6f8d55cd014de167aab4240f24d1 Mon Sep 17 00:00:00 2001
From: saba-ja <saba.janamian.663@my.csun.edu>
Date: Wed, 30 Jun 2021 10:26:58 -0700
Subject: [PATCH 02/15] saba-ja: add style for auto scroll events

---
 src/fprime_gds/flask/static/css/fpstyle.css | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/fprime_gds/flask/static/css/fpstyle.css b/src/fprime_gds/flask/static/css/fpstyle.css
index e66cae65..5ea8e16a 100644
--- a/src/fprime_gds/flask/static/css/fpstyle.css
+++ b/src/fprime_gds/flask/static/css/fpstyle.css
@@ -171,3 +171,11 @@ table td:last-child {
     background: black;
     border-radius: 5px;
 }
+
+/**
+* Style related to Events page
+**/
+.fp-auto-increment {
+    background-color: #28a745 !important;
+    color: #fff !important;
+}
\ No newline at end of file

From 1b4585c669a77340717e4fb03e9ca231a2706baf Mon Sep 17 00:00:00 2001
From: saba-ja <saba.janamian.663@my.csun.edu>
Date: Wed, 30 Jun 2021 10:29:53 -0700
Subject: [PATCH 03/15] saba-ja: added lazy loading to Events table

---
 src/fprime_gds/flask/static/index.html        |  24 ++-
 .../flask/static/js/vue-support/event.js      | 156 +++++++++++++++++-
 2 files changed, 174 insertions(+), 6 deletions(-)

diff --git a/src/fprime_gds/flask/static/index.html b/src/fprime_gds/flask/static/index.html
index 3fb165f2..4ed5fe13 100644
--- a/src/fprime_gds/flask/static/index.html
+++ b/src/fprime_gds/flask/static/index.html
@@ -237,6 +237,24 @@ <h5 class="mb-1">{{calculateCommandTime + " " + command.template.mnemonic }}</h5
                     <div class="fp-flex-header">
                         <h2>Events</h2>
                     </div>
+                    <div class="row justify-content-end no-gutters">
+                        <div class="col-sm-4">
+                            <div class="input-group mb-3">
+                                <div class="input-group-prepend">
+                                    <button class="btn btn-secondary" type="button" v-on:click="offsetToFirst">First</button>
+                                    <button class="btn btn-secondary" type="button" v-on:click="offsetToPrev">&lt;</button>
+                                    <span class="input-group-text" v-bind:class="{ 'fp-auto-increment': isAutoUpdate }">
+                                        {{ eventsStartOffset }} - {{ eventsEndOffset }}
+                                    </span>
+                                </div>
+                                <input type="text" class="form-control" v-model="totalEventsSize" disabled>
+                                <div class="input-group-append">
+                                    <button class="btn btn-secondary" type="button" v-on:click="offsetToNext">&gt;</button>
+                                    <button class="btn btn-secondary" type="button" v-on:click="offsetToLast">Last</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                     <fp-table :header-columns="['Event Time', 'Event Id', 'Event Name', 'Event Severity', 'Event Description']"
                         :items="componentEvents"
                         :item-to-columns="columnify"
@@ -248,6 +266,10 @@ <h2>Events</h2>
                         :filter-text="filterText"
                         :initial-views="itemsShown"
                         :compact="compact"
+                        :totalEventsSize="updateTotalEventsSize"
+                        :eventsStartOffset="eventsStartOffset"
+                        :eventsEndOffset="eventsEndOffset"
+                        :isAutoUpdate="isAutoUpdate"
                     ></fp-table>
                 </div>
             </template>
@@ -408,7 +430,7 @@ <h2>File Downlink</h2>
                         </div>
                     </div>
                     <div class="fp-scroll-container">
-                        <div class="fp-scrollable">
+                        <div class="fp-scrollable" id="fp-scrollable-id">
                             <table  class="sortable table table-bordered table-hover">
                                 <thead>
                                     <tr v-if="!compact">
diff --git a/src/fprime_gds/flask/static/js/vue-support/event.js b/src/fprime_gds/flask/static/js/vue-support/event.js
index 15f03271..d1d0d57b 100644
--- a/src/fprime_gds/flask/static/js/vue-support/event.js
+++ b/src/fprime_gds/flask/static/js/vue-support/event.js
@@ -59,7 +59,13 @@ Vue.component("event-list", {
         return {
             // NOTE: Events/command lists shared across all component instances
             "events": _datastore.events,
-            "eventsOffset": 0,
+            "totalEventsSize": _datastore.events.length,
+            "eventsStartOffset": 0,
+            "eventsEndOffset": 20,
+            "eventOffsetSize": 20,
+            "scrollOffsetSize": 5,
+            "isAutoUpdate": false,
+            "scrollableElm": null,
             "commands": _datastore.commands
         };
     },
@@ -121,7 +127,9 @@ Vue.component("event-list", {
          * irrecoverable.
          */
         clearEvents() {
-            this.eventsOffset = this.events.length;
+            this.eventsStartOffset = this.events.length;
+            this.eventsEndOffset = this.events.length + this.eventOffsetSize;
+            this.isAutoUpdate = false;
         },
         /**
          * Returns if the given item should be hidden in the data table; by
@@ -133,6 +141,127 @@ Vue.component("event-list", {
          */
         isItemHidden(item) {
             return listExistsAndItemNameNotInList(this.itemsShown, item);
+        },
+        /**
+         * TBD
+         */
+        onScroll() {
+            let elmH = this.scrollableElm.scrollHeight;
+            let elmT = Math.abs(this.scrollableElm.scrollTop);
+            let elmC = this.scrollableElm.clientHeight;
+            console.log(elmH, elmT, elmC);
+            let isAtBottom = (elmH - elmT) === elmC && elmT !== 0;
+            // Turn off auto scrolling
+            this.isAutoUpdate = false;
+            
+            if (isAtBottom) {
+                // Scrollbar reached to the bottom
+                this.updateNextOffsetRange(this.scrollOffsetSize);
+            } else if (this.scrollableElm.scrollTop === 0) {
+                // Scrollbar reached to the top
+                this.updatePrevOffsetRange(this.scrollOffsetSize);
+            }
+        },
+        /**
+         * TBD
+         */
+         offsetToFirst() {
+            if (!this.isScrollable()) {
+                return;
+            }
+            this.eventsStartOffset = 0;
+            this.eventsEndOffset = this.eventOffsetSize;
+            this.scrollableElm.scrollTop = 0;
+            this.isAutoUpdate = false;
+         },
+        /**
+        * TBD
+        */
+        offsetToLast() {
+            if (!this.isScrollable()) {
+                return;
+            }
+            this.eventsStartOffset = this.events.length - this.eventOffsetSize;
+            this.eventsEndOffset = this.events.length;
+            this.scrollableElm.scrollTop = this.scrollableElm.scrollHeight - this.scrollableElm.clientHeight;
+            this.isAutoUpdate = true;
+        },
+        /**
+        * TBD
+        */
+        offsetToPrev() {
+            if (!this.isScrollable()) {
+                return;
+            }
+            this.isAutoUpdate = false;
+            this.updatePrevOffsetRange(this.scrollOffsetSize);
+        },
+        /**
+        * TBD
+        */
+        offsetToNext() {
+            if (!this.isScrollable()) {
+                return;
+            }
+            this.isAutoUpdate = false;
+            this.updateNextOffsetRange(this.scrollOffsetSize);
+        },
+        /**
+        * TBD
+        */
+        updateAutoOffsetRange() {
+            if ((this.isAutoUpdate) && 
+                (this.eventsEndOffset < this.events.length) &&
+                (this.events.length - this.eventOffsetSize) > 0) {
+                    this.eventsStartOffset = this.events.length - this.eventOffsetSize;
+                    this.eventsEndOffset = this.events.length;
+            } 
+        },
+        /**
+         * TBD
+         */
+        updateNextOffsetRange(offset) {
+            if ((this.eventsEndOffset + offset) >= this.events.length) {
+                // Will not add more since we are at the end of the list
+                this.eventsEndOffset = this.events.length;
+                this.eventsStartOffset = this.eventsEndOffset - this.eventOffsetSize;
+                this.scrollableElm.scrollTop = this.getScrollBottomLimit();
+                // Turn on auto scrolling
+                this.isAutoUpdate = true;
+            } else if ((this.eventsEndOffset+offset) < this.events.length) {
+                this.eventsStartOffset += offset;
+                this.eventsEndOffset += offset;
+                let scrollbarTop = this.getScrollBottomLimit() - 20;
+                this.scrollableElm.scrollTop = scrollbarTop > 0 ? scrollbarTop : 0;
+                // Turn off auto scrolling
+                this.isAutoUpdate = false;
+            } else {
+                // Should not get here
+            }
+        },
+        updatePrevOffsetRange(offset) {
+            if ((this.eventsStartOffset - offset) > 0) {
+                this.eventsStartOffset -= offset;
+                this.eventsEndOffset -= offset;
+                // Keep scrollbar down if there are more items to load
+                this.scrollableElm.scrollTop = 20;
+                // Turn off auto scrolling
+                this.isAutoUpdate = false;
+            } else {
+                // Will not subtract more since we are at the start of the list
+                this.eventsStartOffset = 0;
+                this.eventsEndOffset = this.eventOffsetSize;
+                // Move scrollbar to the top
+                this.scrollableElm.scrollTop = 0;
+                // Turn off auto scrolling
+                this.isAutoUpdate = false;
+            }
+        },
+        isScrollable() {
+            return this.events.length - this.eventOffsetSize > 0;
+        },
+        getScrollBottomLimit() {
+            return this.scrollableElm.scrollHeight - this.scrollableElm.clientHeight;
         }
     },
     computed: {
@@ -143,7 +272,24 @@ Vue.component("event-list", {
          * @return {Array} The list of event items this instance can show
          */
         componentEvents() {
-            return this.events.slice(this.eventsOffset);
-        }
-    }
+            this.updateAutoOffsetRange();
+            return this.events.slice(this.eventsStartOffset, this.eventsEndOffset);
+        },
+        /**
+         * TBD
+         */
+         updateTotalEventsSize() {
+            this.totalEventsSize = this.events.length;
+        },
+    },
+        mounted: function() {
+            this.$nextTick(function() {
+                this.scrollableElm = this.$el.querySelector("#fp-scrollable-id");
+                this.scrollableElm.addEventListener('scroll', this.onScroll, true);
+                this.onScroll(); // needed for initial loading on page
+            });
+        },
+        beforeDestroy: function() {
+            this.scrollableElm.removeEventListener('scroll', this.onScroll);
+        },
 });

From 1e2b122208d755c547215fd30f3b024d601894b9 Mon Sep 17 00:00:00 2001
From: saba-ja <saba.janamian.663@my.csun.edu>
Date: Wed, 30 Jun 2021 10:59:56 -0700
Subject: [PATCH 04/15] saba-ja: added function descriptions

---
 .../flask/static/js/vue-support/event.js      | 94 +++++++++++--------
 1 file changed, 56 insertions(+), 38 deletions(-)

diff --git a/src/fprime_gds/flask/static/js/vue-support/event.js b/src/fprime_gds/flask/static/js/vue-support/event.js
index d1d0d57b..41315ebe 100644
--- a/src/fprime_gds/flask/static/js/vue-support/event.js
+++ b/src/fprime_gds/flask/static/js/vue-support/event.js
@@ -143,7 +143,9 @@ Vue.component("event-list", {
             return listExistsAndItemNameNotInList(this.itemsShown, item);
         },
         /**
-         * TBD
+         * Check if the scroll bar is at the bottom or at the top of the 
+         * scrollable div. If at the bottom of the page load the next group
+         * of events into table. If at the top load the previous group.
          */
         onScroll() {
             let elmH = this.scrollableElm.scrollHeight;
@@ -163,7 +165,7 @@ Vue.component("event-list", {
             }
         },
         /**
-         * TBD
+         * Jump to the top of the event list.
          */
          offsetToFirst() {
             if (!this.isScrollable()) {
@@ -175,7 +177,7 @@ Vue.component("event-list", {
             this.isAutoUpdate = false;
          },
         /**
-        * TBD
+        * Jump to the bottom of the event list.
         */
         offsetToLast() {
             if (!this.isScrollable()) {
@@ -187,7 +189,7 @@ Vue.component("event-list", {
             this.isAutoUpdate = true;
         },
         /**
-        * TBD
+        * Load previous group of events
         */
         offsetToPrev() {
             if (!this.isScrollable()) {
@@ -197,7 +199,7 @@ Vue.component("event-list", {
             this.updatePrevOffsetRange(this.scrollOffsetSize);
         },
         /**
-        * TBD
+        * Load next group of events
         */
         offsetToNext() {
             if (!this.isScrollable()) {
@@ -207,7 +209,8 @@ Vue.component("event-list", {
             this.updateNextOffsetRange(this.scrollOffsetSize);
         },
         /**
-        * TBD
+        * If auto update is enabled load the new events and remove old events
+        * in the given range.
         */
         updateAutoOffsetRange() {
             if ((this.isAutoUpdate) && 
@@ -218,28 +221,10 @@ Vue.component("event-list", {
             } 
         },
         /**
-         * TBD
+         * Utility function to load previous group of events
+         * @param {number} offset: specifies how much to move backward in the list
          */
-        updateNextOffsetRange(offset) {
-            if ((this.eventsEndOffset + offset) >= this.events.length) {
-                // Will not add more since we are at the end of the list
-                this.eventsEndOffset = this.events.length;
-                this.eventsStartOffset = this.eventsEndOffset - this.eventOffsetSize;
-                this.scrollableElm.scrollTop = this.getScrollBottomLimit();
-                // Turn on auto scrolling
-                this.isAutoUpdate = true;
-            } else if ((this.eventsEndOffset+offset) < this.events.length) {
-                this.eventsStartOffset += offset;
-                this.eventsEndOffset += offset;
-                let scrollbarTop = this.getScrollBottomLimit() - 20;
-                this.scrollableElm.scrollTop = scrollbarTop > 0 ? scrollbarTop : 0;
-                // Turn off auto scrolling
-                this.isAutoUpdate = false;
-            } else {
-                // Should not get here
-            }
-        },
-        updatePrevOffsetRange(offset) {
+         updatePrevOffsetRange(offset) {
             if ((this.eventsStartOffset - offset) > 0) {
                 this.eventsStartOffset -= offset;
                 this.eventsEndOffset -= offset;
@@ -257,9 +242,36 @@ Vue.component("event-list", {
                 this.isAutoUpdate = false;
             }
         },
+        /**
+         * Utility function to load next group of events
+         * @param {number} offset: specifies how much to move forward in the list
+         */
+        updateNextOffsetRange(offset) {
+            if ((this.eventsEndOffset + offset) >= this.events.length) {
+                // Will not add more since we are at the end of the list
+                this.eventsEndOffset = this.events.length;
+                this.eventsStartOffset = this.eventsEndOffset - this.eventOffsetSize;
+                this.scrollableElm.scrollTop = this.getScrollBottomLimit();
+                // Turn on auto scrolling since we are at the end of the list
+                this.isAutoUpdate = true;
+            } else if ((this.eventsEndOffset+offset) < this.events.length) {
+                this.eventsStartOffset += offset;
+                this.eventsEndOffset += offset;
+                let scrollbarTop = this.getScrollBottomLimit() - 20;
+                this.scrollableElm.scrollTop = scrollbarTop > 0 ? scrollbarTop : 0;
+                // Turn off auto scrolling
+                this.isAutoUpdate = false;
+            }
+        },
+        /**
+         * Utility function to check if enough events to start scrolling 
+         */
         isScrollable() {
             return this.events.length - this.eventOffsetSize > 0;
         },
+        /**
+         * Utility function to check for scrollbar bottom limit
+         */
         getScrollBottomLimit() {
             return this.scrollableElm.scrollHeight - this.scrollableElm.clientHeight;
         }
@@ -276,20 +288,26 @@ Vue.component("event-list", {
             return this.events.slice(this.eventsStartOffset, this.eventsEndOffset);
         },
         /**
-         * TBD
+         * Update the total number of events in the list
          */
          updateTotalEventsSize() {
             this.totalEventsSize = this.events.length;
         },
     },
-        mounted: function() {
-            this.$nextTick(function() {
-                this.scrollableElm = this.$el.querySelector("#fp-scrollable-id");
-                this.scrollableElm.addEventListener('scroll', this.onScroll, true);
-                this.onScroll(); // needed for initial loading on page
-            });
-        },
-        beforeDestroy: function() {
-            this.scrollableElm.removeEventListener('scroll', this.onScroll);
-        },
+    /**
+     * Add scroll event listener 
+     */
+    mounted: function() {
+        this.$nextTick(function() {
+            this.scrollableElm = this.$el.querySelector("#fp-scrollable-id");
+            this.scrollableElm.addEventListener('scroll', this.onScroll, true);
+            this.onScroll(); // needed for initial loading on page
+        });
+    },
+    /**
+     * Remove scroll event listener 
+     */
+    beforeDestroy: function() {
+        this.scrollableElm.removeEventListener('scroll', this.onScroll);
+    },
 });

From e7a33862eaec5e3d80bb7e1bbec2842a4de609b3 Mon Sep 17 00:00:00 2001
From: saba-ja <saba.janamian.663@my.csun.edu>
Date: Wed, 30 Jun 2021 11:16:41 -0700
Subject: [PATCH 05/15] saba-ja: increased buffer size

---
 .../flask/static/js/vue-support/event.js           | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/fprime_gds/flask/static/js/vue-support/event.js b/src/fprime_gds/flask/static/js/vue-support/event.js
index 41315ebe..24af8338 100644
--- a/src/fprime_gds/flask/static/js/vue-support/event.js
+++ b/src/fprime_gds/flask/static/js/vue-support/event.js
@@ -61,8 +61,8 @@ Vue.component("event-list", {
             "events": _datastore.events,
             "totalEventsSize": _datastore.events.length,
             "eventsStartOffset": 0,
-            "eventsEndOffset": 20,
-            "eventOffsetSize": 20,
+            "eventsEndOffset": 100,
+            "eventOffsetSize": 100,
             "scrollOffsetSize": 5,
             "isAutoUpdate": false,
             "scrollableElm": null,
@@ -151,11 +151,14 @@ Vue.component("event-list", {
             let elmH = this.scrollableElm.scrollHeight;
             let elmT = Math.abs(this.scrollableElm.scrollTop);
             let elmC = this.scrollableElm.clientHeight;
-            console.log(elmH, elmT, elmC);
-            let isAtBottom = (elmH - elmT) === elmC && elmT !== 0;
+            let isAtBottom = ((elmH - elmT) === elmC) && (elmT !== 0);
             // Turn off auto scrolling
             this.isAutoUpdate = false;
             
+            if (!this.isScrollable()) {
+                return;
+            }
+
             if (isAtBottom) {
                 // Scrollbar reached to the bottom
                 this.updateNextOffsetRange(this.scrollOffsetSize);
@@ -267,7 +270,8 @@ Vue.component("event-list", {
          * Utility function to check if enough events to start scrolling 
          */
         isScrollable() {
-            return this.events.length - this.eventOffsetSize > 0;
+            console.log("isScrollable? ", this.events.length - this.eventOffsetSize > 0);
+            return (this.events.length - this.eventOffsetSize > 0);
         },
         /**
          * Utility function to check for scrollbar bottom limit

From 8f5bb673178ccf467b22a457425636c463f7db07 Mon Sep 17 00:00:00 2001
From: saba-ja <saba.janamian.663@my.csun.edu>
Date: Wed, 30 Jun 2021 11:46:31 -0700
Subject: [PATCH 06/15] saba-ja: added stay at bottom during auto update

---
 .../flask/static/js/vue-support/event.js      | 28 +++++++++++++------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/fprime_gds/flask/static/js/vue-support/event.js b/src/fprime_gds/flask/static/js/vue-support/event.js
index 24af8338..46e4eafb 100644
--- a/src/fprime_gds/flask/static/js/vue-support/event.js
+++ b/src/fprime_gds/flask/static/js/vue-support/event.js
@@ -123,8 +123,8 @@ Vue.component("event-list", {
             return "evt-" + item.id + "-" + item.time.seconds + "-"+ item.time.microseconds;
         },
         /**
-         * A function to clear this events pane to remove events that have already been seen. Note: this action is
-         * irrecoverable.
+         * A function to clear this events pane by moving the offset to the end 
+         * of the list. User call see the previous EVRs again if scrolling back
          */
         clearEvents() {
             this.eventsStartOffset = this.events.length;
@@ -152,13 +152,14 @@ Vue.component("event-list", {
             let elmT = Math.abs(this.scrollableElm.scrollTop);
             let elmC = this.scrollableElm.clientHeight;
             let isAtBottom = ((elmH - elmT) === elmC) && (elmT !== 0);
-            // Turn off auto scrolling
-            this.isAutoUpdate = false;
             
             if (!this.isScrollable()) {
                 return;
             }
 
+            // Turn off auto scrolling
+            this.isAutoUpdate = false;
+
             if (isAtBottom) {
                 // Scrollbar reached to the bottom
                 this.updateNextOffsetRange(this.scrollOffsetSize);
@@ -171,25 +172,25 @@ Vue.component("event-list", {
          * Jump to the top of the event list.
          */
          offsetToFirst() {
+            this.scrollableElm.scrollTop = 0;
+            this.isAutoUpdate = false;
             if (!this.isScrollable()) {
                 return;
             }
             this.eventsStartOffset = 0;
             this.eventsEndOffset = this.eventOffsetSize;
-            this.scrollableElm.scrollTop = 0;
-            this.isAutoUpdate = false;
          },
         /**
         * Jump to the bottom of the event list.
         */
         offsetToLast() {
+            this.scrollableElm.scrollTop = this.scrollableElm.scrollHeight - this.scrollableElm.clientHeight;
+            this.isAutoUpdate = true;
             if (!this.isScrollable()) {
                 return;
             }
             this.eventsStartOffset = this.events.length - this.eventOffsetSize;
             this.eventsEndOffset = this.events.length;
-            this.scrollableElm.scrollTop = this.scrollableElm.scrollHeight - this.scrollableElm.clientHeight;
-            this.isAutoUpdate = true;
         },
         /**
         * Load previous group of events
@@ -223,6 +224,15 @@ Vue.component("event-list", {
                     this.eventsEndOffset = this.events.length;
             } 
         },
+        /**
+        * Utility function to keep the scroll bar at the bottom when auto scroll
+        * is enabled.
+        */
+        updateScrollPos() {
+            if (this.isAutoUpdate) {
+                this.scrollableElm.scrollTop = this.getScrollBottomLimit();
+            }
+        },
         /**
          * Utility function to load previous group of events
          * @param {number} offset: specifies how much to move backward in the list
@@ -270,7 +280,6 @@ Vue.component("event-list", {
          * Utility function to check if enough events to start scrolling 
          */
         isScrollable() {
-            console.log("isScrollable? ", this.events.length - this.eventOffsetSize > 0);
             return (this.events.length - this.eventOffsetSize > 0);
         },
         /**
@@ -289,6 +298,7 @@ Vue.component("event-list", {
          */
         componentEvents() {
             this.updateAutoOffsetRange();
+            this.updateScrollPos();
             return this.events.slice(this.eventsStartOffset, this.eventsEndOffset);
         },
         /**

From f47316c3958628161c10bbe244f58e38bdb27154 Mon Sep 17 00:00:00 2001
From: saba-ja <saba.janamian.663@my.csun.edu>
Date: Wed, 30 Jun 2021 12:11:13 -0700
Subject: [PATCH 07/15] saba-ja: disabled fw bw btns before scrolling is
 enabled

---
 src/fprime_gds/flask/static/index.html        |  5 +-
 .../flask/static/js/vue-support/event.js      | 46 ++++++++++---------
 2 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/src/fprime_gds/flask/static/index.html b/src/fprime_gds/flask/static/index.html
index 4ed5fe13..439db515 100644
--- a/src/fprime_gds/flask/static/index.html
+++ b/src/fprime_gds/flask/static/index.html
@@ -242,14 +242,14 @@ <h2>Events</h2>
                             <div class="input-group mb-3">
                                 <div class="input-group-prepend">
                                     <button class="btn btn-secondary" type="button" v-on:click="offsetToFirst">First</button>
-                                    <button class="btn btn-secondary" type="button" v-on:click="offsetToPrev">&lt;</button>
+                                    <button class="btn btn-secondary" type="button" v-on:click="offsetToPrev" v-bind:class="{ 'disabled': !scrollabilityStatus }">&lt;</button>
                                     <span class="input-group-text" v-bind:class="{ 'fp-auto-increment': isAutoUpdate }">
                                         {{ eventsStartOffset }} - {{ eventsEndOffset }}
                                     </span>
                                 </div>
                                 <input type="text" class="form-control" v-model="totalEventsSize" disabled>
                                 <div class="input-group-append">
-                                    <button class="btn btn-secondary" type="button" v-on:click="offsetToNext">&gt;</button>
+                                    <button class="btn btn-secondary" type="button" v-on:click="offsetToNext" v-bind:class="{ 'disabled': !scrollabilityStatus }">&gt;</button>
                                     <button class="btn btn-secondary" type="button" v-on:click="offsetToLast">Last</button>
                                 </div>
                             </div>
@@ -270,6 +270,7 @@ <h2>Events</h2>
                         :eventsStartOffset="eventsStartOffset"
                         :eventsEndOffset="eventsEndOffset"
                         :isAutoUpdate="isAutoUpdate"
+                        :scrollabilityStatus="scrollabilityStatus"
                     ></fp-table>
                 </div>
             </template>
diff --git a/src/fprime_gds/flask/static/js/vue-support/event.js b/src/fprime_gds/flask/static/js/vue-support/event.js
index 46e4eafb..bb160579 100644
--- a/src/fprime_gds/flask/static/js/vue-support/event.js
+++ b/src/fprime_gds/flask/static/js/vue-support/event.js
@@ -66,6 +66,7 @@ Vue.component("event-list", {
             "scrollOffsetSize": 5,
             "isAutoUpdate": false,
             "scrollableElm": null,
+            "scrollabilityStatus": false,
             "commands": _datastore.commands
         };
     },
@@ -171,18 +172,18 @@ Vue.component("event-list", {
         /**
          * Jump to the top of the event list.
          */
-         offsetToFirst() {
-            this.scrollableElm.scrollTop = 0;
-            this.isAutoUpdate = false;
-            if (!this.isScrollable()) {
-                return;
-            }
-            this.eventsStartOffset = 0;
-            this.eventsEndOffset = this.eventOffsetSize;
-         },
+        offsetToFirst() {
+        this.scrollableElm.scrollTop = 0;
+        this.isAutoUpdate = false;
+        if (!this.isScrollable()) {
+            return;
+        }
+        this.eventsStartOffset = 0;
+        this.eventsEndOffset = this.eventOffsetSize;
+        },
         /**
-        * Jump to the bottom of the event list.
-        */
+         * Jump to the bottom of the event list.
+         */
         offsetToLast() {
             this.scrollableElm.scrollTop = this.scrollableElm.scrollHeight - this.scrollableElm.clientHeight;
             this.isAutoUpdate = true;
@@ -193,8 +194,8 @@ Vue.component("event-list", {
             this.eventsEndOffset = this.events.length;
         },
         /**
-        * Load previous group of events
-        */
+         * Load previous group of events
+         */
         offsetToPrev() {
             if (!this.isScrollable()) {
                 return;
@@ -203,8 +204,8 @@ Vue.component("event-list", {
             this.updatePrevOffsetRange(this.scrollOffsetSize);
         },
         /**
-        * Load next group of events
-        */
+         * Load next group of events
+         */
         offsetToNext() {
             if (!this.isScrollable()) {
                 return;
@@ -213,9 +214,9 @@ Vue.component("event-list", {
             this.updateNextOffsetRange(this.scrollOffsetSize);
         },
         /**
-        * If auto update is enabled load the new events and remove old events
-        * in the given range.
-        */
+         * If auto update is enabled load the new events and remove old events
+         * in the given range.
+         */
         updateAutoOffsetRange() {
             if ((this.isAutoUpdate) && 
                 (this.eventsEndOffset < this.events.length) &&
@@ -225,9 +226,9 @@ Vue.component("event-list", {
             } 
         },
         /**
-        * Utility function to keep the scroll bar at the bottom when auto scroll
-        * is enabled.
-        */
+         * Utility function to keep the scroll bar at the bottom when auto scroll
+         * is enabled.
+         */
         updateScrollPos() {
             if (this.isAutoUpdate) {
                 this.scrollableElm.scrollTop = this.getScrollBottomLimit();
@@ -299,12 +300,13 @@ Vue.component("event-list", {
         componentEvents() {
             this.updateAutoOffsetRange();
             this.updateScrollPos();
+            this.scrollabilityStatus = this.isScrollable();
             return this.events.slice(this.eventsStartOffset, this.eventsEndOffset);
         },
         /**
          * Update the total number of events in the list
          */
-         updateTotalEventsSize() {
+        updateTotalEventsSize() {
             this.totalEventsSize = this.events.length;
         },
     },

From a303b02cdc9d5bc11160d4195b7965664ef2e8c0 Mon Sep 17 00:00:00 2001
From: saba-ja <saba.janamian.663@my.csun.edu>
Date: Wed, 30 Jun 2021 13:03:57 -0700
Subject: [PATCH 08/15] saba-ja: check for user scroll during buffering

---
 .../flask/static/js/vue-support/event.js      | 24 ++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/fprime_gds/flask/static/js/vue-support/event.js b/src/fprime_gds/flask/static/js/vue-support/event.js
index bb160579..52574ba0 100644
--- a/src/fprime_gds/flask/static/js/vue-support/event.js
+++ b/src/fprime_gds/flask/static/js/vue-support/event.js
@@ -67,6 +67,8 @@ Vue.component("event-list", {
             "isAutoUpdate": false,
             "scrollableElm": null,
             "scrollabilityStatus": false,
+            "currTime": 0,
+            "prevTime": 0,
             "commands": _datastore.commands
         };
     },
@@ -148,13 +150,17 @@ Vue.component("event-list", {
          * scrollable div. If at the bottom of the page load the next group
          * of events into table. If at the top load the previous group.
          */
-        onScroll() {
+        onScroll(e) {
             let elmH = this.scrollableElm.scrollHeight;
             let elmT = Math.abs(this.scrollableElm.scrollTop);
             let elmC = this.scrollableElm.clientHeight;
             let isAtBottom = ((elmH - elmT) === elmC) && (elmT !== 0);
             
             if (!this.isScrollable()) {
+                // Disabling auto update user scrolls
+                if (this.hasUserScrolled(e)) {
+                    this.isAutoUpdate = false;
+                }
                 return;
             }
 
@@ -288,6 +294,18 @@ Vue.component("event-list", {
          */
         getScrollBottomLimit() {
             return this.scrollableElm.scrollHeight - this.scrollableElm.clientHeight;
+        },
+        /**
+         * Check the timestamp of scroll event and if less than a certain 
+         * milisecond interval it is a user triggered scroll
+         */
+        hasUserScrolled(e) {
+            if (e === undefined) {
+                return false;
+            }
+            this.prevTime = this.currTime;
+            this.currTime = e.timeStamp;
+            return (this.currTime - this.prevTime) < 800;
         }
     },
     computed: {
@@ -314,10 +332,10 @@ Vue.component("event-list", {
      * Add scroll event listener 
      */
     mounted: function() {
-        this.$nextTick(function() {
+        this.$nextTick(function(e) {
             this.scrollableElm = this.$el.querySelector("#fp-scrollable-id");
             this.scrollableElm.addEventListener('scroll', this.onScroll, true);
-            this.onScroll(); // needed for initial loading on page
+            this.onScroll(e); // needed for initial loading on page
         });
     },
     /**

From 4319496987bdb665438032915f67d67601d1e036 Mon Sep 17 00:00:00 2001
From: saba-ja <saba.janamian.663@my.csun.edu>
Date: Wed, 30 Jun 2021 13:13:17 -0700
Subject: [PATCH 09/15] saba-ja: fixed typo and whitespaces

---
 src/fprime_gds/flask/static/css/fpstyle.css         | 2 +-
 src/fprime_gds/flask/static/js/vue-support/event.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/fprime_gds/flask/static/css/fpstyle.css b/src/fprime_gds/flask/static/css/fpstyle.css
index 5ea8e16a..7d68457e 100644
--- a/src/fprime_gds/flask/static/css/fpstyle.css
+++ b/src/fprime_gds/flask/static/css/fpstyle.css
@@ -178,4 +178,4 @@ table td:last-child {
 .fp-auto-increment {
     background-color: #28a745 !important;
     color: #fff !important;
-}
\ No newline at end of file
+}
diff --git a/src/fprime_gds/flask/static/js/vue-support/event.js b/src/fprime_gds/flask/static/js/vue-support/event.js
index 52574ba0..2c24fe3c 100644
--- a/src/fprime_gds/flask/static/js/vue-support/event.js
+++ b/src/fprime_gds/flask/static/js/vue-support/event.js
@@ -127,7 +127,7 @@ Vue.component("event-list", {
         },
         /**
          * A function to clear this events pane by moving the offset to the end 
-         * of the list. User call see the previous EVRs again if scrolling back
+         * of the list. User call see the previous events again if scrolling back
          */
         clearEvents() {
             this.eventsStartOffset = this.events.length;

From 6f242df29ff59929f3596c4448238961715342a8 Mon Sep 17 00:00:00 2001
From: saba-ja <saba.janamian.663@my.csun.edu>
Date: Wed, 30 Jun 2021 13:15:06 -0700
Subject: [PATCH 10/15] saba-ja: added lazy loading to event table

---
 src/fprime_gds/flask/static/js/vue-support/event.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/fprime_gds/flask/static/js/vue-support/event.js b/src/fprime_gds/flask/static/js/vue-support/event.js
index 2c24fe3c..bd2662fb 100644
--- a/src/fprime_gds/flask/static/js/vue-support/event.js
+++ b/src/fprime_gds/flask/static/js/vue-support/event.js
@@ -329,7 +329,7 @@ Vue.component("event-list", {
         },
     },
     /**
-     * Add scroll event listener 
+     * Add scroll event listener during mounting of element
      */
     mounted: function() {
         this.$nextTick(function(e) {

From 85146e53db9fb5613620512093f985ba60d53f18 Mon Sep 17 00:00:00 2001
From: saba-ja <saba.janamian.663@my.csun.edu>
Date: Wed, 30 Jun 2021 13:45:06 -0700
Subject: [PATCH 11/15] saba-ja: added lazy loading to event table

---
 src/fprime_gds/flask/static/index.html              | 6 +++---
 src/fprime_gds/flask/static/js/vue-support/event.js | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/fprime_gds/flask/static/index.html b/src/fprime_gds/flask/static/index.html
index 439db515..57d9808a 100644
--- a/src/fprime_gds/flask/static/index.html
+++ b/src/fprime_gds/flask/static/index.html
@@ -242,14 +242,14 @@ <h2>Events</h2>
                             <div class="input-group mb-3">
                                 <div class="input-group-prepend">
                                     <button class="btn btn-secondary" type="button" v-on:click="offsetToFirst">First</button>
-                                    <button class="btn btn-secondary" type="button" v-on:click="offsetToPrev" v-bind:class="{ 'disabled': !scrollabilityStatus }">&lt;</button>
+                                    <button class="btn btn-secondary" type="button" v-on:click="offsetToPrev" v-bind:class="{ 'disabled': !scrollStatus }">&lt;</button>
                                     <span class="input-group-text" v-bind:class="{ 'fp-auto-increment': isAutoUpdate }">
                                         {{ eventsStartOffset }} - {{ eventsEndOffset }}
                                     </span>
                                 </div>
                                 <input type="text" class="form-control" v-model="totalEventsSize" disabled>
                                 <div class="input-group-append">
-                                    <button class="btn btn-secondary" type="button" v-on:click="offsetToNext" v-bind:class="{ 'disabled': !scrollabilityStatus }">&gt;</button>
+                                    <button class="btn btn-secondary" type="button" v-on:click="offsetToNext" v-bind:class="{ 'disabled': !scrollStatus }">&gt;</button>
                                     <button class="btn btn-secondary" type="button" v-on:click="offsetToLast">Last</button>
                                 </div>
                             </div>
@@ -270,7 +270,7 @@ <h2>Events</h2>
                         :eventsStartOffset="eventsStartOffset"
                         :eventsEndOffset="eventsEndOffset"
                         :isAutoUpdate="isAutoUpdate"
-                        :scrollabilityStatus="scrollabilityStatus"
+                        :scrollStatus="scrollStatus"
                     ></fp-table>
                 </div>
             </template>
diff --git a/src/fprime_gds/flask/static/js/vue-support/event.js b/src/fprime_gds/flask/static/js/vue-support/event.js
index bd2662fb..5e84be8f 100644
--- a/src/fprime_gds/flask/static/js/vue-support/event.js
+++ b/src/fprime_gds/flask/static/js/vue-support/event.js
@@ -66,7 +66,7 @@ Vue.component("event-list", {
             "scrollOffsetSize": 5,
             "isAutoUpdate": false,
             "scrollableElm": null,
-            "scrollabilityStatus": false,
+            "scrollStatus": false,
             "currTime": 0,
             "prevTime": 0,
             "commands": _datastore.commands
@@ -297,7 +297,7 @@ Vue.component("event-list", {
         },
         /**
          * Check the timestamp of scroll event and if less than a certain 
-         * milisecond interval it is a user triggered scroll
+         * millisecond interval it is a user triggered scroll
          */
         hasUserScrolled(e) {
             if (e === undefined) {
@@ -318,7 +318,7 @@ Vue.component("event-list", {
         componentEvents() {
             this.updateAutoOffsetRange();
             this.updateScrollPos();
-            this.scrollabilityStatus = this.isScrollable();
+            this.scrollStatus = this.isScrollable();
             return this.events.slice(this.eventsStartOffset, this.eventsEndOffset);
         },
         /**

From 60b6cac11cf84db92e9728ac168e114dfb9f58e3 Mon Sep 17 00:00:00 2001
From: saba-ja <saba.janamian.663@my.csun.edu>
Date: Tue, 6 Jul 2021 08:02:55 -0700
Subject: [PATCH 12/15] saba-ja: added favicon, fix margin-top, updated
 .gitignore

---
 .gitignore                              |   1 +
 src/fprime_gds/flask/static/favicon.ico | Bin 0 -> 15406 bytes
 src/fprime_gds/flask/static/index.html  |   2 +-
 3 files changed, 2 insertions(+), 1 deletion(-)
 create mode 100644 src/fprime_gds/flask/static/favicon.ico

diff --git a/.gitignore b/.gitignore
index 1a2da736..2334f3dc 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
+.DS_Store
 docs/doxy/**
 *.log
 
diff --git a/src/fprime_gds/flask/static/favicon.ico b/src/fprime_gds/flask/static/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..39d4b3d989852aa2c25d23039d1ae93fea7198f8
GIT binary patch
literal 15406
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
YHkVD3zcHsY%o(<Pe}<nu;F=!zKX{c$t^fc4

literal 0
HcmV?d00001

diff --git a/src/fprime_gds/flask/static/index.html b/src/fprime_gds/flask/static/index.html
index 57d9808a..d15182d7 100644
--- a/src/fprime_gds/flask/static/index.html
+++ b/src/fprime_gds/flask/static/index.html
@@ -103,7 +103,7 @@
             <template id="dashboard-template">
                 <div class="fp-flex-repeater">
                     <div class="fp-flex-header">
-                        <div>
+                        <div class="mt-2">
                             <label for="config-file">Choose a Layout Configuration File:</label>
                             <input type="file"
                                    name="config-file"

From 59c90e596d7ddbe407ff840d16dcf2b86c0a02d0 Mon Sep 17 00:00:00 2001
From: saba-ja <saba.janamian.663@my.csun.edu>
Date: Tue, 6 Jul 2021 08:13:49 -0700
Subject: [PATCH 13/15] saba-ja: fixed filter box spacing

---
 src/fprime_gds/flask/static/css/fpstyle.css | 6 ------
 src/fprime_gds/flask/static/index.html      | 6 +++---
 2 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/src/fprime_gds/flask/static/css/fpstyle.css b/src/fprime_gds/flask/static/css/fpstyle.css
index 7d68457e..c3e1f724 100644
--- a/src/fprime_gds/flask/static/css/fpstyle.css
+++ b/src/fprime_gds/flask/static/css/fpstyle.css
@@ -73,12 +73,6 @@ body, .fp-full-height {
     display: flex;
     flex-direction: column;
 }
-.fp-flex-repeater-margin {
-    margin-top: 1em;
-}
-.fp-filter-box {
-    margin-bottom: 1em;
-}
 .fp-flex-header {
     flex-grow: 0;
 }
diff --git a/src/fprime_gds/flask/static/index.html b/src/fprime_gds/flask/static/index.html
index d15182d7..d6ddff66 100644
--- a/src/fprime_gds/flask/static/index.html
+++ b/src/fprime_gds/flask/static/index.html
@@ -420,10 +420,10 @@ <h2>File Downlink</h2>
             5. File downlink progress and download (uses file-row template)
             -->
             <template id="fp-table-template">
-                <div class="fp-flex-repeater fp-flex-repeater-margin">
+                <div class="fp-flex-repeater mt-2">
                     <div class="row fp-flex-header no-gutters justify-content-end" v-if="!compact">
-                        <div class="mx-1 fp-filter-box">Filters:</div>
-                        <div class="ml-1 col-4">
+                        <div class="mx-1">Filters:</div>
+                        <div class="ml-1 mb-2 col-4">
                             <v-select id="fp-table-filter" :clearable="true" :searchable="true" :taggable="true"
                                       :no-drop="true" :options="[]" :multiple="true"
                                       v-model="matching">

From ab04d4fc894d3cfcacd21e32bbdc5a02270c2e62 Mon Sep 17 00:00:00 2001
From: saba-ja <saba.janamian.663@my.csun.edu>
Date: Tue, 6 Jul 2021 09:19:33 -0700
Subject: [PATCH 14/15] saba-ja: exception to spellcheck picking css hex values

---
 .github/actions/spelling/expect.txt | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/actions/spelling/expect.txt b/.github/actions/spelling/expect.txt
index 6090574a..407ea602 100644
--- a/.github/actions/spelling/expect.txt
+++ b/.github/actions/spelling/expect.txt
@@ -192,6 +192,7 @@ fbuild
 fd
 FEEDNAME
 FFCC
+fff
 fieldset
 figcaption
 filemode

From 99e52afc22dcdedb8388808785755e8ffa9df3b2 Mon Sep 17 00:00:00 2001
From: saba-ja <saba.janamian.663@my.csun.edu>
Date: Tue, 6 Jul 2021 09:25:31 -0700
Subject: [PATCH 15/15] saba-ja: added .ico exception to spellcheck

---
 .github/actions/spelling/excludes.txt | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/actions/spelling/excludes.txt b/.github/actions/spelling/excludes.txt
index b28efcb7..ff53ad6b 100644
--- a/.github/actions/spelling/excludes.txt
+++ b/.github/actions/spelling/excludes.txt
@@ -39,3 +39,4 @@ ignore$
 \.xls$
 \.xlsx$
 \.xsd$
+\.ico$
\ No newline at end of file