Making zoom for timeline sticky, and adaptively coalesce intervals to limit payload sizes

webui/src/App.vue

@@ -9,6 +9,7 @@ export default {
       refreshSeconds: 15,  // How often to refresh
       waterfallURL: 'http://localhost:2503',
       activeSegment: null,
+      maxDisplayIntervals: 500,
     }
   },
 
@@ -19,6 +20,10 @@ export default {
     updateRefreshInterval(interval) {
       this.refreshSeconds = interval;
     },
+    updateMaxDisplayIntervals(cnt) {
+      this.maxDisplayIntervals = cnt;
+    },
+
     setActiveSegment(segment) {
       this.activeSegment = segment;
     },
@@ -41,14 +46,17 @@ input { max-width: 25%; }
     <GlobalSettings
       :waterfallURL="waterfallURL"
       :refreshSeconds="refreshSeconds"
+      :maxDisplayIntervals="maxDisplayIntervals"
       @update-refresh-interval="(interval) => this.updateRefreshInterval(interval)"
       @update-waterfall-url="(url) => this.updateURL(url)"
+      @update-max-display-intervals="(cnt) => this.updateMaxDisplayIntervals(cnt)"
       />
   <br/>
   <div>
     <Timeline
       :waterfallURL="waterfallURL"
       :refreshSeconds="refreshSeconds"
+      :maxDisplayIntervals="maxDisplayIntervals"
       @update-active-segment="(segment) => this.setActiveSegment(segment)"
     />
   </div>

webui/src/components/GlobalSettings.vue

@@ -1,17 +1,21 @@
 <script>
 export default {
-  props: ['refreshSeconds', 'waterfallURL'],
+  props: ['refreshSeconds', 'waterfallURL', 'maxDisplayIntervals'],
   data() {
     return {
       interval: this.refreshSeconds,
       url: this.waterfallURL,
+      max_display_intervals: this.maxDisplayIntervals,
     };
   },
-  emits: ['update-refresh-interval', 'update-waterfall-url'],
+  emits: ['update-refresh-interval', 'update-waterfall-url', 'update-max-intervals'],
   computed: {
     validRefreshIntervals() {
       return [5, 10, 15, 30, 60, 300, 600];
     },
+    validDisplayIntervals() {
+      return [0, 100, 250, 500, 1000, 1500];
+    },
     isSelected(interval) {
       return (interval === this.refreshSeconds ? 'selected' : 'unselected');
     },
@@ -37,5 +41,17 @@ export default {
         </option>
       </select>
     </label>
+    <label>
+      Max Display Intervals
+      <select @change="$emit('update-max-display-intervals', max_display_intervals)" v-model="max_display_intervals">
+        <option v-for="cnt in validDisplayIntervals"
+                :key="cnt"
+                :value="cnt"
+                >
+                {{ cnt }} Segments
+        </option>
+      </select>
+    </label>
+
   </details>
 </template>

webui/src/components/Timeline.vue

@@ -16,7 +16,7 @@ const MIN_TIME="1970-01-01T00:00:00Z";
 const MAX_TIME="2099-01-01T00:00:00Z";
 
 export default {
-  props: ['waterfallURL', 'refreshSeconds'],
+  props: ['waterfallURL', 'refreshSeconds', 'maxDisplayIntervals'],
   data() {
     return {
       chart: null,
@@ -33,11 +33,15 @@ export default {
     waterfallURL() {
       this.fetchTimeline();
     },
+    maxDisplayIntervals() {
+      this.fetchTimeline();
+    },
+
   },
 
   methods: {
     async fetchTimeline() {
-      fetch(`${this.waterfallURL}/api/v1/details`, {
+      fetch(`${this.waterfallURL}/api/v1/details?max_intervals=${this.maxDisplayIntervals}`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json'