[OGUI-1924] Fix incorrectly called disable auto scroll

InfoLogger/package.json

@@ -29,7 +29,7 @@
   },
   "main": "index.js",
   "dependencies": {
-    "@aliceo2/web-ui": "2.12.0",
+    "@aliceo2/web-ui": "2.11.1",
     "mariadb": "3.5.4"
   },
   "devDependencies": {

InfoLogger/public/log/Log.js

@@ -547,11 +547,13 @@ export default class Log extends Observable {
   }
 
   /**
-   * Empty the list of all logs, reset stats, clear query mode request if any
-   * and close the inspector panel
+   * Empty the list of all logs, reset stats, clear query mode request if any,
+   * deselect the current log and close the inspector panel
    */
   empty() {
     this.list = [];
+    this.item = null;
+    this.autoScrollToItem = false;
     this.limitReached = null;
     this.model.inspectorEnabled = false;
     this.resetStats();
@@ -575,12 +577,19 @@ export default class Log extends Observable {
   }
 
   /**
-   * Set auto-scroll for live mode and notify the UI
+   * Set auto-scroll for live mode and optionally notify the UI
    * @param {boolean} enabled - whether auto-scroll should be enabled
+   * @param {boolean} notify - whether to notify the UI if there is a change
    */
-  setAutoScrollLive(enabled) {
+  setAutoScrollLive(enabled, notify = true) {
+    if (this.autoScrollLive === enabled) {
+      return;
+    }
     this.autoScrollLive = enabled;
-    this.notify();
+
+    if (notify) {
+      this.notify();
+    }
   }
 
   /**

InfoLogger/public/log/commandLogs.js

@@ -42,7 +42,7 @@ const LIVE_BUTTON_TYPES_BY_MODE = {
 export const commandLogs = (model) => [
   userActionsDropdown(model),
   h('', interactionModesGroupButton(model)),
-  h('', h('button.btn', { onclick: () => model.log.empty(), style: 'font-weight: bold' }, 'Clear')),
+  h('', h('button.btn', { id: 'clear-button', onclick: () => model.log.empty(), style: 'font-weight: bold' }, 'Clear')),
   h('.btn-group', [
     h('button.btn', {
       disabled: !model.log.list.length,
@@ -80,16 +80,16 @@ export const commandLogs = (model) => [
  * @returns {vnode} - the view of the interaction mode buttons
  */
 const interactionModesGroupButton = (model) => {
-  const { frameworkInfo, log } = model;
+  const { frameworkInfo } = model;
 
   return frameworkInfo.match({
     NotAsked: () => h('button.btn', { disabled: true }, ''),
     Loading: () => h('button.btn', { disabled: true, className: 'loading' }, 'Loading'),
     Failure: () => null,
     Success: () =>
       h('.btn-group', [
-        queryButton(log),
-        liveButton(log),
+        queryButton(model.log),
+        liveButton(model.log),
       ]),
   });
 };

InfoLogger/public/log/tableLogsContent.js

@@ -198,35 +198,72 @@ const linkToWikiErrors = (errcode) => h('a', {
 const tableContainerHooks = (model) => ({
 
   /**
-   * Hook. Listen to events needed for handling scrolling like window size change
-   * And set scroll change handler to internal state of dom element
+   * Hook. Listen to scroll and window size changes to keep the model's viewport in sync
    * @param {vnode} vnode - the vnode of the element
    */
   oncreate(vnode) {
+    const container = vnode.dom;
+
     /**
-     * THis handler allow to notify model of element scrolling change (.tableLogsContent)
+     * Current scroll position, cancels negative position due to Safari bounce scrolling
+     * @returns {number} scrollTop clamped to 0
      */
-    const onTableScroll = () => {
-      const container = vnode.dom;
+    const getScrollTop = () => Math.max(container.scrollTop, 0);
+
+    /**
+     * Update the viewport size and scroll position in the model
+     * @param {number} scrollTop - current scroll position
+     */
+    const updateViewport = (scrollTop = getScrollTop()) => {
       const { height } = container.getBoundingClientRect();
-      const scrollTop = Math.max(container.scrollTop, 0); // cancel negative position due to Safari bounce scrolling
-      if (container.scrollTop < model.log.scrollTop) {
-        model.log.setAutoScrollLive(false); // stop auto-scrolling if user scrolls up
-      }
       model.log.setScrollTop(scrollTop, height);
     };
 
-    // call the function when scrolling is updated
-    vnode.dom.addEventListener('scroll', onTableScroll);
-    model.log.dom.table = vnode.dom;
-    // setup window size listener - view needs redraw for smart scrolling
-    window.addEventListener('resize', onTableScroll);
+    /**
+     * Whether the viewport is at the bottom of the table, <=1 tolerates fractional heights
+     * @param {number} scrollTop - current scroll position
+     * @returns {boolean} true if at the bottom
+     */
+    const isAtBottom = (scrollTop) => container.scrollHeight - scrollTop - container.clientHeight <= 1;
+
+    /**
+     * Disable auto-scroll when the user performs an action that creates an up scroll event, then update the viewport.
+     * Needed as well as onTableWheel as onTableWheel doesn't cover all cases of user-initiated scrolls.
+     * However unlike wheel listeners, scroll events are not processed immediately.
+     * The user can scroll up but the autoScroll manager can get executed before the scroll listener
+     * and will put the viewport back at the bottom before the scroll listener has a chance to react.
+     */
+    const onTableScroll = () => {
+      const scrollTop = getScrollTop();
+      if (scrollTop < model.log.scrollTop && !isAtBottom(scrollTop)) {
+        model.log.setAutoScrollLive(false, false);
+      }
+      updateViewport(scrollTop);
+    };
 
-    // remember this function for later (destroy)
-    vnode.dom.onTableScroll = onTableScroll;
+    /**
+     * Disable auto-scroll as soon as the user wheels up.
+     * onTableScroll can miss them if an incoming log pushes the scroll to the bottom before the check runs.
+     * @param {WheelEvent} e - the wheel event
+     */
+    const onTableWheel = (e) => {
+      if (e.deltaY < 0 && !e.ctrlKey && !e.metaKey && getScrollTop() > 0) {
+        model.log.setAutoScrollLive(false, false);
+      }
+    };
+
+    const listeners = new AbortController();
+    const { signal } = listeners;
+
+    container.addEventListener('scroll', onTableScroll, { signal });
+    container.addEventListener('wheel', onTableWheel, { signal, passive: true });
+    // setup window size listener - view needs redraw for smart scrolling
+    window.addEventListener('resize', () => updateViewport(), { signal });
+    container.listeners = listeners;
+    model.log.dom.table = container;
 
     // call the function once on next frame when we know sizes
-    onTableScroll();
+    updateViewport();
   },
 
   /**
@@ -242,8 +279,7 @@ const tableContainerHooks = (model) => ({
    * @param {vnode} vnode - the vnode of the element
    */
   ondestroy(vnode) {
-    vnode.dom.removeEventListener('scroll', vnode.dom.onTableScroll);
-    window.removeEventListener('resize', vnode.dom.onTableScroll);
+    vnode.dom.listeners.abort();
   },
 });
 

InfoLogger/test/mocha-index.js

@@ -115,6 +115,7 @@ describe('InfoLogger', function () {
   require('./public/status-bar-mocha');
   require('./public/zoom.mocha');
   require('./public/log-context-menu-mocha');
+  require('./public/auto-scroll-mocha');
 
   after(async () => {
     await browser.close();