[OGUI-1767] Runs mode object tree smart refresh + header refactor (#3066)

mariscalromeroalejandro · web-flow · commit 6571ec07b5ff · 2025-09-19T17:50:49.000+02:00
This PR provides with a smart refresh in which the objects tree list is refreshed only if new paths need to be listed. It also includes a refactor of the headers for a better styling.
diff --git a/QualityControl/public/common/filters/filterViews.js b/QualityControl/public/common/filters/filterViews.js
@@ -62,6 +62,8 @@ export function filtersPanel(filterModel, viewModel) {
     runNumber,
     runStatus,
     isVisible,
+    lastRefresh,
+    ONGOING_RUN_INTERVAL_MS: refreshRate,
   } = filterModel;
   const onInputCallback = setFilterValue.bind(filterModel);
   const onChangeCallback = setFilterValue.bind(filterModel);
@@ -84,10 +86,7 @@ export function filtersPanel(filterModel, viewModel) {
         ...filtersList.map((filter) =>
           createFilterElement(filter, filterMap, onInputCallback, onEnterCallback, onChangeCallback)),
       ]),
-      isRunModeActivated && runStatusPanel(
-        runNumber,
-        runStatus,
-      ),
+      isRunModeActivated && runStatusPanel({ runNumber, runStatus, lastRefresh, refreshRate }),
     ],
   );
 };
diff --git a/QualityControl/public/common/filters/model/FilterModel.js b/QualityControl/public/common/filters/model/FilterModel.js
@@ -38,6 +38,7 @@ export default class FilterModel extends Observable {
     this._runNumber = null;
     this._runStatus = RemoteData.notAsked();
     this._isRunModeActivated = false;
+    this._lastRefresh = null;
 
     this.ONGOING_RUN_INTERVAL_MS = 15000;
   }
@@ -122,6 +123,8 @@ export default class FilterModel extends Observable {
       this._manageRunsModeInterval(baseViewModel);
     }
     baseViewModel.triggerFilter();
+    this._lastRefresh = Date.now();
+    this.notify();
   }
 
   /**
@@ -193,6 +196,7 @@ export default class FilterModel extends Observable {
     this.isRunModeActivated = false;
     this.runNumber = null;
     this.runStatus = RemoteData.notAsked();
+    this._lastRefresh = null;
     this.clearRunsModeInterval();
     this.notify();
   }
@@ -205,22 +209,26 @@ export default class FilterModel extends Observable {
    */
   async _manageRunsModeInterval(baseViewModel) {
     this.clearRunsModeInterval();
-    this._currentViewModel = baseViewModel;
+    const currentRunNumber = this.runNumber;
+    if (this.runStatus?.payload?.runStatus !== RunStatus.ONGOING) {
+      return;
+    }
     this._runsModeInterval = setInterval(async () => {
-      if (!this._currentViewModel) {
+      if (!baseViewModel) {
         return;
       }
       this.runStatus = RemoteData.loading();
       this.notify();
-      this.runStatus = await this.filterService.getRunStatus(this.runNumber);
+      this.runStatus = await this.filterService.getRunStatus(currentRunNumber);
       this.notify();
       this.runStatus.match({
         Success: (res) => {
           if (res?.runStatus !== RunStatus.ONGOING) {
             this.clearRunsModeInterval();
-          } else {
-            baseViewModel.triggerFilter();
           }
+          baseViewModel.triggerFilter();
+          this._lastRefresh = Date.now();
+          this.notify();
         },
         Other: () => this.clearRunsModeInterval(),
       });
@@ -236,7 +244,6 @@ export default class FilterModel extends Observable {
       clearInterval(this._runsModeInterval);
       this._runsModeInterval = null;
     }
-    this._currentViewModel = null;
   }
 
   /**
@@ -307,6 +314,14 @@ export default class FilterModel extends Observable {
     this._isRunModeActivated = value;
   }
 
+  get lastRefresh() {
+    return this._lastRefresh;
+  }
+
+  get runsModeInterval() {
+    return this._runsModeInterval;
+  }
+
   /**
    * Validates a run number for run mode.
    * @returns {{ isValid: boolean, title: string }} An object indicating
@@ -336,4 +351,19 @@ export default class FilterModel extends Observable {
     }
     return { isValid: true, title: 'Update filters' };
   };
+
+  /**
+   * Executes a generic check to determine if a refresh is required.
+   * @param {() => Promise<T>} fetchFn - Async function to fetch the data or object.
+   * @param {(RemoteData) => boolean} validateFn - Validates whether the fetched result means no refresh is needed.
+   * @returns {Promise<{ refreshNeeded: boolean, data: object | null }>}
+   */
+  async refreshCheck(fetchFn, validateFn) {
+    if (this._runsModeInterval) {
+      const data = await fetchFn();
+      const refreshNeeded = validateFn(data);
+      return { refreshNeeded, data };
+    }
+    return { refreshNeeded: true, data: null };
+  }
 }
diff --git a/QualityControl/public/common/filters/runMode/runStatusPanel.js b/QualityControl/public/common/filters/runMode/runStatusPanel.js
@@ -11,40 +11,71 @@
  * or submit itself to any jurisdiction.
  */
 
+import { RunStatus } from '../../../../../library/runStatus.enum.js';
+import { spinner } from '../../spinner.js';
 import { h } from '/js/src/index.js';
 
 /**
- * Render a run mode switch
- * @param {number} runNumber - The run number
- * @param {RunStatus} status - The run status
- * @returns {HTMLElement} - The rendered run status panel
+ * Creates and returns a run status panel element displaying the current run number,
+ * its status, the last refresh timestamp, and the refresh rate.
+ * @param {object} options Options for rendering the run status panel.
+ * @param {number} options.runNumber The current run number to display.
+ * @param {string} options.runStatus The status of the run (e.g., "running", "completed").
+ * @param {Date} options.lastRefresh Timestamp of the last refresh.
+ * @param {number} options.refreshRate - Refresh rate in milliseconds.
+ * @returns {vnode} The element representing the run status panel.
  */
-export const runStatusPanel = (runNumber, status) =>
-  status.match({
+export const runStatusPanel = ({ runNumber, runStatus, lastRefresh, refreshRate = 15000 }) => {
+  const runNumberPanel = h('span', { id: 'runNumberLabel' }, [
+    'Run ',
+    h('b', `#${runNumber}`),
+  ]);
+  const statusPanel = (runStatus) =>
+    runStatus
+      ? h(
+        `.badge.white.bg-${runStatus === RunStatus.ONGOING ? 'success' : 'gray-darker'}`,
+        { id: 'runStatusBadge' },
+        runStatus,
+      )
+      : h('span', spinner(1));
+  const formatDateTime = (dateStr) =>
+    new Date(dateStr).toLocaleString('en-GB'); // dd/mm/yyyy, hh:mm:ss
+
+  const lastUpdatePanel = (runStatus) => [
+    h(
+      'span.highlight',
+      { id: 'lastUpdate' },
+      `Last update: ${formatDateTime(lastRefresh)}`,
+    ),
+    runStatus === RunStatus.ONGOING &&
+      h(
+        'span',
+        { id: 'refreshInfo' },
+        ` - As run is ONGOING, will refresh every ${refreshRate / 1000} seconds`,
+      ),
+  ];
+
+  return runStatus.match({
     Loading: () =>
       h('.flex-row.g1.items-center.justify-center', [
-        h('b', { id: 'runNumberLabel' }, `#${runNumber}`),
-        h('.flex-row.g1', [
-          h('label', 'Status: '),
-          h('b.color-gray', 'Loading...'),
-        ]),
+        runNumberPanel,
+        statusPanel(null),
       ]),
 
-    Success: (res) =>
-      h('.flex-row.g1.items-center.justify-center', { id: 'runStatusPanel' }, [
-        h('b', { id: 'runNumberLabel' }, `#${runNumber}`),
-        h('.flex-row.g1', [
-          h('span', 'Status: '),
-          h(
-            `b.${
-              res?.runStatus === 'ONGOING' ? 'success' : 'gray'
-            }`,
-            {
-              id: 'runStatus',
-            },
-            res?.runStatus,
-          ),
+    Success: (res) => {
+      const runStatus = res?.runStatus;
+      const shouldShowTimestamp = runStatus === RunStatus.ONGOING || runStatus === RunStatus.ENDED;
+      return h('.flex-column', [
+        h('.flex-row.g1.items-center.justify-center', { id: 'runStatusPanel' }, [
+          runNumberPanel,
+          statusPanel(runStatus),
         ]),
-      ]),
+        shouldShowTimestamp && h(
+          '.flex-row.g1.items-center.justify-center.f7.gray-darker.text-center',
+          lastUpdatePanel(runStatus),
+        ),
+      ]);
+    },
     Other: () => null,
   });
+};
diff --git a/QualityControl/public/common/header.js b/QualityControl/public/common/header.js
@@ -30,18 +30,24 @@ import { filtersPanel } from './filters/filterViews.js';
  * @param {Model} model - root model of the application
  * @returns {vnode} - header element
  */
-export default (model) => h('.flex-col', [
-  h('.flex-row.p2.items-center', { id: 'qcg-header' }, [
-    commonHeader(model),
-    h('.flex-grow.flex-row', headerSpecific(model)),
-  ]),
-  filterSpecific(model),
-]);
+export default (model) => {
+  const specific = headerSpecific(model) || {};
+  const { centerCol, rightCol } = specific;
+
+  return h('.flex-col', [
+    h('.flex-row.p2.items-center', { id: 'qcg-header' }, [
+      commonHeader(model),
+      centerCol || h('.flex-grow'),
+      rightCol || h('.w-33'),
+    ]),
+    filterSpecific(model),
+  ]);
+};
 
 /**
  * Shows the page specific header (center and right side)
  * @param {Model} model - root model of the application
- * @returns {vnode} - virtual node element
+ * @returns {{centerCol: vnode, rightCol: vnode} | null}
  */
 const headerSpecific = (model) => {
   const { layoutListModel, filterModel, layout, object, page } = model;
diff --git a/QualityControl/public/layout/view/header.js b/QualityControl/public/layout/view/header.js
@@ -43,20 +43,19 @@ const toolbarViewMode = (layout, filterModel) => {
   const layoutItem = layout.item;
   const { isOfficial, owner_id, name } = layoutItem;
 
-  return [
-    h('.flex-grow.text-center', h('.header-layout', [tabViewLinks(layoutItem, layout)])),
-    h('.flex-grow.text-right', [
+  return {
+    centerCol: h('.flex-grow.text-center', [h('.header-layout', [tabViewLinks(layoutItem, layout)])]),
+    rightCol: h('.w-33.text-right.g2.flex-row.justify-end', [
       h('b.f4.items-center', [isOfficial ? iconBadge() : '', layoutItem.name]),
       ' ',
-      // Show group button edit/duplicate only for owner of the layout shown
       h('.btn-group', [
         filterPanelToggleButton(filterModel),
         newLayoutButton(layout),
         jsonExportButton(layoutItem, name),
         layout.ownsLayout(owner_id) && [editDropdown(layout), deleteButton(layout)],
       ]),
     ]),
-  ];
+  };
 };
 
 /**
@@ -92,8 +91,8 @@ const toolbarEditMode = (layout, filterModel) => {
     layout.item.name = e.target.value.trim();
   };
 
-  return [
-    h('.w-50.text-center', [
+  return {
+    centerCol: h('.flex-grow.text-center', [
       h('div', { class: 'header-layout' }, [
         h('span', editTabLinks(layout)),
         h('.btn-group', [
@@ -110,7 +109,7 @@ const toolbarEditMode = (layout, filterModel) => {
         ]),
       ]),
     ]),
-    h('.text-right.flex-grow', [
+    rightCol: h('.w-33.text-right.flex-row.justify-end', [
       h('input.form-control.form-inline', {
         type: 'text',
         value: layout.item.name,
@@ -122,7 +121,7 @@ const toolbarEditMode = (layout, filterModel) => {
         cancelButton(layout),
       ]),
     ]),
-  ];
+  };
 };
 
 /**
diff --git a/QualityControl/public/object/QCObject.js b/QualityControl/public/object/QCObject.js
@@ -168,16 +168,32 @@ export default class QCObject extends BaseViewModel {
     this.notify();
   }
 
+  /**
+   * Checks if the object list needs to be refreshed.
+   * @returns {Promise<{ refreshNeeded: boolean, data: object | null }>}
+   * whether a refresh is needed and the fetched data
+   */
+  checkIfListHasToBeRefreshed() {
+    const fetchFn = async () => await this.model.services.object.getObjects(true);
+    const validateFn = (result) => result.isSuccess() && result.payload.paths?.length !== this.list?.length;
+    return this.model.filterModel.refreshCheck(fetchFn, validateFn);
+  }
+
   /**
    * Ask server for all available objects, fills `tree` of objects
    * @returns {undefined}
    */
   async loadList() {
+    const { refreshNeeded, data } = await this.checkIfListHasToBeRefreshed();
+    if (!refreshNeeded) {
+      this.notify();
+      return;
+    }
     this.objectsRemote = RemoteData.loading();
     this.notify();
     this.queryingObjects = true;
     let offlineObjects = [];
-    const result = await this.model.services.object.getObjects(this.model.filterModel.isRunModeActivated);
+    const result = data ?? await this.model.services.object.getObjects(this.model.filterModel.isRunModeActivated);
 
     if (result.isSuccess()) {
       offlineObjects = this.model.filterModel.isRunModeActivated ? result.payload.paths : result.payload;
@@ -539,7 +555,7 @@ export default class QCObject extends BaseViewModel {
    */
   async triggerFilter() {
     // don't clear selected object refreshing in run mode
-    if (!this.model.filterModel.isRunModeActivated) {
+    if (!this.model.filterModel.isRunModeActivated || !this.model.filterModel.runsModeInterval) {
       this.selected = null;
     }
     this.loadList();
diff --git a/QualityControl/public/object/objectTreeHeader.js b/QualityControl/public/object/objectTreeHeader.js
@@ -21,7 +21,7 @@ import { filterPanelToggleButton } from '../common/filters/filterViews.js';
  * by name.
  * @param {QcObject} qcObject - Model that manages the QCObject state.
  * @param {FilterModel} filterModel - The model handeling the filter state
- * @returns {vnode} - virtual node element
+ * @returns {{centerCol: vnode, rightCol: vnode} | null} - object with vnode elements
  */
 export default function objectTreeHeader(qcObject, filterModel) {
   if (!qcObject.currentList) {
@@ -32,13 +32,14 @@ export default function objectTreeHeader(qcObject, filterModel) {
     ? `${qcObject.searchResult.length} found of ${qcObject.currentList.length}`
     : `${qcObject.currentList.length} items`;
 
-  return [
-    h('.w-33.text-center.flex-grow.flex-row.justify-center.items-center', [
+  return {
+    centerCol: h('.flex-grow.text-center.flex-row.justify-center.items-center', [
       h('b.f4', 'Objects'),
       ' ',
       qcObject.objectsRemote.isSuccess() && h('span', `(${howMany})`),
     ]),
-    h('.flex-row.items-center.g2.justify-end', [
+
+    rightCol: h('.w-33.flex-row.items-center.g2.justify-end', [
       filterModel.isRunModeActivated ? null : filterPanelToggleButton(filterModel),
       ' ',
       h('.dropdown', {
@@ -71,7 +72,7 @@ export default function objectTreeHeader(qcObject, filterModel) {
       }),
       ' ',
     ]),
-  ];
+  };
 }
 
 /**
diff --git a/QualityControl/public/pages/aboutView/components/aboutViewHeader.js b/QualityControl/public/pages/aboutView/components/aboutViewHeader.js
@@ -18,10 +18,7 @@ import { h } from '/js/src/index.js';
  * Shows header of Framework Information
  * @returns {vnode} - virtual node element
  */
-export default () => [
-  h(
-    '.w-50.flex-row.justify-center',
-    h('b.f4.ph2', 'About'),
-  ),
-  h('.flex-grow'),
-];
+export default () => ({
+  centerCol: h('.flex-row.justify-center.flex-grow', [h('b.f4.ph2', 'About')]),
+  rightCol: h('.w-33'),
+});
diff --git a/QualityControl/public/pages/layoutListView/components/LayoutListHeader.js b/QualityControl/public/pages/layoutListView/components/LayoutListHeader.js
diff --git a/QualityControl/public/pages/objectView/components/header.js b/QualityControl/public/pages/objectView/components/header.js
diff --git a/QualityControl/test/public/features/runMode.test.js b/QualityControl/test/public/features/runMode.test.js
