[OGUI-1853] Move actionables of objectTree in the table header (#3247)

AlexJanson · web-flow · commit 7501cfae17dd · 2026-01-15T15:23:10.000+01:00
As a user, it is difficult to see that object tree can be filtered by name. Thus, the search input text (from top right in header) should be moved in the table header in a nice UI and UX manner.

Moreover, the (collapse all tree button) should be moved also in the table header(right most).
Moreover, the sort by name buton should also become part of the header so that when the user clicks on the header Name column, to display a sort icon up, or down or nothing depending on what is currently being sorted.
See for example how Bookkeeping sorts by Title on page "Log Entries" (log-overview)
diff --git a/QualityControl/public/app.css b/QualityControl/public/app.css
@@ -193,6 +193,24 @@
   white-space: nowrap;
 }
 
+.sort-button {
+  .hover-icon {
+    display: none;
+    opacity: 0.6;
+  }
+
+  &:hover {
+    .current-icon {
+      display: none;
+    }
+
+    .hover-icon {
+      display: inline-block;
+      color: var(--color-gray-dark)
+    }
+  }
+}
+
 .drop-zone {
   position: absolute;
   height: 100%;
diff --git a/QualityControl/public/common/enums/columnSort.enum.js b/QualityControl/public/common/enums/columnSort.enum.js
@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2019-2020 CERN and copyright holders of ALICE O2.
+ * See http://alice-o2.web.cern.ch/copyright for details of the copyright holders.
+ * All rights not expressly granted are reserved.
+ *
+ * This software is distributed under the terms of the GNU General Public
+ * License v3 (GPL Version 3), copied verbatim in the file "COPYING".
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+/**
+ * Enumeration for sort directions
+ * @enum {number}
+ * @readonly
+ */
+export const SortDirectionsEnum = Object.freeze({
+  ASC: 1,
+  DESC: -1,
+});
diff --git a/QualityControl/public/common/sortButton.js b/QualityControl/public/common/sortButton.js
@@ -0,0 +1,81 @@
+/**
+ * @license
+ * Copyright 2019-2020 CERN and copyright holders of ALICE O2.
+ * See http://alice-o2.web.cern.ch/copyright for details of the copyright holders.
+ * All rights not expressly granted are reserved.
+ *
+ * This software is distributed under the terms of the GNU General Public
+ * License v3 (GPL Version 3), copied verbatim in the file "COPYING".
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+import { SortDirectionsEnum } from '../common/enums/columnSort.enum.js';
+import { h, iconCircleX, iconCaretBottom, iconCaretTop } from '/js/src/index.js';
+
+/**
+ * Get the icon for the sort direction.
+ * @param {SortDirectionsEnum} direction - direction of the sort.
+ * @returns {vnode} the correct icon related to the direction.
+ */
+const getSortIcon = (direction) => {
+  if (direction === SortDirectionsEnum.ASC) {
+    return iconCaretTop();
+  }
+  if (direction === SortDirectionsEnum.DESC) {
+    return iconCaretBottom();
+  }
+  return iconCircleX();
+};
+
+/**
+ * @callback SortClickCallback
+ * @param {string} label - The label of the column being sorted.
+ * @param {number} order - The next sort direction in the cycle.
+ * @param {vnode} icon - The VNode for the icon representing the next sort state.
+ * @returns {void}
+ */
+
+/**
+ * Renders a sortable table header button that cycles through sort states.
+ * Displays the current sort icon and a preview icon of the next state on hover.
+ * @param {object} props - The component properties.
+ * @param {number} props.order - The current sort direction value from SortDirectionsEnum.
+ * @param {object|undefined} props.icon - The VNode/element for the current active sort icon.
+ * @param {string} props.label - The display text for the column header.
+ * @param {SortClickCallback} props.onclick - Callback triggered on click.
+ * @param {Array<number>} [props.sortOptions] - Array of SortDirectionsEnum values defining the
+ * order of the sort cycle. Defaults to all enum values.
+ * @returns {object} A HyperScript VNode representing the sortable button.
+ */
+export const sortableTableHead = ({
+  order,
+  icon,
+  label,
+  onclick,
+  sortOptions = [...Object.values(SortDirectionsEnum)],
+}) => {
+  const currentIndex = sortOptions.indexOf(order);
+  const nextIndex = (currentIndex + 1) % sortOptions.length;
+  const nextSortOrder = sortOptions[nextIndex];
+  const hoverIcon = getSortIcon(nextSortOrder);
+
+  const directionLabel = Object.keys(SortDirectionsEnum).find((key) => SortDirectionsEnum[key] === nextSortOrder);
+
+  return h(
+    '.sort-button.cursor-pointer',
+    {
+      onclick: () => onclick(label, nextSortOrder, hoverIcon),
+      title: `Sort ${directionLabel} by ${label}`,
+    },
+    [
+      label,
+      h('span.icon-container.mh1', [
+        h('span.current-icon', [order != SortDirectionsEnum.NONE ? icon : undefined]),
+        h('span.hover-icon', [getSortIcon(nextSortOrder)]),
+      ]),
+    ],
+  );
+};
diff --git a/QualityControl/public/object/QCObject.js b/QualityControl/public/object/QCObject.js
@@ -12,7 +12,7 @@
  * or submit itself to any jurisdiction.
  */
 
-import { RemoteData, iconArrowTop, BrowserStorage } from '/js/src/index.js';
+import { RemoteData, iconCaretTop, BrowserStorage } from '/js/src/index.js';
 import ObjectTree from './ObjectTree.class.js';
 import { prettyFormatDate, setBrowserTabTitle } from './../common/utils.js';
 import { isObjectOfTypeChecker } from './../library/qcObject/utils.js';
@@ -46,8 +46,7 @@ export default class QCObject extends BaseViewModel {
       field: 'name',
       title: 'Name',
       order: 1,
-      icon: iconArrowTop(),
-      open: false,
+      icon: iconCaretTop(),
     };
 
     this.tree = new ObjectTree('database');
@@ -115,15 +114,6 @@ export default class QCObject extends BaseViewModel {
     this.notify();
   }
 
-  /**
-   * Toggle the display of the sort by dropdown
-   * @returns {undefined}
-   */
-  toggleSortDropdown() {
-    this.sortBy.open = !this.sortBy.open;
-    this.notify();
-  }
-
   /**
    * Computes the final list of objects to be seen by user depending on search input from user
    * If any of those changes, this method should be called to update the outputs.
@@ -189,7 +179,7 @@ export default class QCObject extends BaseViewModel {
 
     this._computeFilters();
 
-    this.sortBy = { field, title, order, icon, open: false };
+    this.sortBy = { field, title, order, icon };
     this.notify();
   }
 
@@ -252,8 +242,7 @@ export default class QCObject extends BaseViewModel {
       field: 'name',
       title: 'Name',
       order: 1,
-      icon: iconArrowTop(),
-      open: false,
+      icon: iconCaretTop(),
     };
     this._computeFilters();
 
diff --git a/QualityControl/public/object/objectTreeHeader.js b/QualityControl/public/object/objectTreeHeader.js
@@ -13,7 +13,6 @@
  */
 
 import { h } from '/js/src/index.js';
-import { iconCollapseUp, iconArrowBottom, iconArrowTop } from '/js/src/icons.js';
 import { filterPanelToggleButton } from '../common/filters/filterViews.js';
 
 /**
@@ -39,53 +38,9 @@ export default function objectTreeHeader(qcObject, filterModel) {
       qcObject.objectsRemote.isSuccess() && h('span', `(${howMany})`),
     ]),
 
-    rightCol: h('.w-25.flex-row.items-center.g2.justify-end', [
-      filterModel.isRunModeActivated ? null : filterPanelToggleButton(filterModel),
-      ' ',
-      h('.dropdown', {
-        id: 'sortTreeButton', title: 'Sort by', class: qcObject.sortBy.open ? 'dropdown-open' : '',
-      }, [
-        h('button.btn', {
-          title: 'Sort by',
-          onclick: () => qcObject.toggleSortDropdown(),
-        }, [qcObject.sortBy.title, ' ', qcObject.sortBy.icon]),
-        h('.dropdown-menu.text-left', [
-          sortMenuItem(qcObject, 'Name', 'Sort by name ASC', iconArrowTop(), 'name', 1),
-          sortMenuItem(qcObject, 'Name', 'Sort by name DESC', iconArrowBottom(), 'name', -1),
-
-        ]),
-      ]),
-      ' ',
-      h('button.btn', {
-        title: 'Close whole tree',
-        id: 'collapse-tree-button',
-        onclick: () => qcObject.tree.closeAll(),
-        disabled: Boolean(qcObject.searchInput),
-      }, iconCollapseUp()),
-      ' ',
-      h('input.form-control.form-inline.mh1.w-33', {
-        id: 'searchObjectTree',
-        placeholder: 'Search',
-        type: 'text',
-        value: qcObject.searchInput,
-        disabled: qcObject.queryingObjects ? true : false,
-        oninput: (e) => qcObject.search(e.target.value),
-      }),
-      ' ',
-    ]),
+    rightCol: h(
+      '.w-25.flex-row.items-center.g2.justify-end',
+      [filterModel.isRunModeActivated ? null : filterPanelToggleButton(filterModel)],
+    ),
   };
 }
-
-/**
- * Create a menu-item for sort-by dropdown
- * @param {QcObject} qcObject - Model that manages the QCObject state.
- * @param {string} shortTitle - title that gets displayed to the user
- * @param {string} title - title that gets displayed to the user on hover
- * @param {Icon} icon - svg icon to be used
- * @param {string} field - field by which sorting should happen
- * @param {number} order - {-1/1}/{DESC/ASC}
- * @returns {vnode} - virtual node element
- */
-const sortMenuItem = (qcObject, shortTitle, title, icon, field, order) => h('a.menu-item', {
-  title: title, style: 'white-space: nowrap;', onclick: () => qcObject.sortTree(shortTitle, field, order, icon),
-}, [shortTitle, ' ', icon]);
diff --git a/QualityControl/public/object/objectTreePage.js b/QualityControl/public/object/objectTreePage.js
@@ -12,14 +12,24 @@
  * or submit itself to any jurisdiction.
  */
 
-import { h, iconBarChart, iconCaretRight, iconResizeBoth, iconCaretBottom, iconCircleX } from '/js/src/index.js';
+import {
+  h,
+  iconCollapseUp,
+  iconBarChart,
+  iconCaretRight,
+  iconResizeBoth,
+  iconCaretBottom,
+  iconCircleX,
+} from '/js/src/index.js';
 import { spinner } from '../common/spinner.js';
 import { draw } from '../common/object/draw.js';
 import timestampSelectForm from './../common/timestampSelectForm.js';
 import virtualTable from './virtualTable.js';
 import { defaultRowAttributes, qcObjectInfoPanel } from '../common/object/objectInfoCard.js';
 import { downloadButton } from '../common/downloadButton.js';
 import { resizableDivider } from '../common/resizableDivider.js';
+import { SortDirectionsEnum } from '../common/enums/columnSort.enum.js';
+import { sortableTableHead } from '../common/sortButton.js';
 import { downloadRootImageButton } from '../common/downloadRootImageButton.js';
 
 /**
@@ -50,9 +60,15 @@ export default (model) => {
             const objectsLoaded = object.list;
             const objectsToDisplay = objectsLoaded.filter((qcObject) =>
               qcObject.name.toLowerCase().includes(searchInput.toLowerCase()));
-            return virtualTable(model, 'main', objectsToDisplay);
+            return h('.flex-column.flex-grow', [
+              actionablesHeaderGroup(model.object),
+              virtualTable(model, 'side', objectsToDisplay),
+            ]);
           }
-          return tableShow(model);
+          return h('', [
+            actionablesHeaderGroup(model.object),
+            tableShow(model),
+          ]);
         },
         Failure: () => null, // Notification is displayed
       })),
@@ -170,11 +186,75 @@ const statusBarRight = (model) => model.object.selected
  * @returns {vnode} - virtual node element
  */
 const tableShow = (model) =>
-  h('table.table.table-sm.text-no-select', [
-    h('thead', [h('tr', [h('th', 'Name')])]),
-    h('tbody', [treeRows(model)]),
+  h('table.table.table-sm.text-no-select', h('tbody', [treeRows(model)]));
+
+/**
+ * A composite header component for the actionables section.
+ * It groups the column sorting header and the functional toolbar (search/collapse).
+ * @param {QCObject} qcObject - The state object for Quality Control actionables.
+ * @returns {vnode} A virtual DOM node containing the grouped header elements.
+ */
+const actionablesHeaderGroup = (qcObject) => {
+  const {
+    order = SortDirectionsEnum.ASC,
+    icon = 'sort',
+  } = qcObject.sortBy || {};
+
+  return h('.bg-gray-light.pv2', [
+    sortableTableHead({
+      order,
+      icon,
+      label: 'Name',
+      sortOptions: [SortDirectionsEnum.ASC, SortDirectionsEnum.DESC],
+      onclick: (label, order, icon) => {
+        qcObject.sortTree(label, 'name', order, icon);
+      },
+    }),
+    actionablesContainer(qcObject),
+  ]);
+};
+
+/**
+ * A toolbar containing interactive controls for the object tree table,
+ * specifically the search input and the 'Collapse All' button.
+ * @param {QCObject} qcObject - The state object for managing tree interactions.
+ * @returns {vnode} A flex-row container with search and collapse actions.
+ */
+const actionablesContainer = (qcObject) =>
+  h('.flex-row.w-100', [
+    actionableSearchInput(qcObject),
+    actionableCollapseAll(qcObject),
   ]);
 
+/**
+ * A button to collapse all expanded nodes in the object tree table.
+ * Disabled when a search filter is active to prevent UI inconsistency.
+ * @param {QCObject} qcObject - The state object containing the tree controller.
+ * @returns {vnode} A button element with a collapse icon.
+ */
+const actionableCollapseAll = (qcObject) =>
+  h('button.btn.m2', {
+    title: 'Close whole tree',
+    onclick: () => qcObject.tree.closeAll(),
+    disabled: Boolean(qcObject.searchInput),
+    id: 'collapse-tree-button',
+  }, iconCollapseUp());
+
+/**
+ * A text input for filtering the object tree table based on user queries.
+ * @param {QCObject} qcObject - The state object managing search input and loading state.
+ * @returns {vnode} An input element for searching.
+ */
+const actionableSearchInput = (qcObject) =>
+  h('input.form-control.form-inline.mv2.mh3.flex-grow', {
+    id: 'searchObjectTree',
+    placeholder: 'Search',
+    type: 'text',
+    value: qcObject.searchInput,
+    disabled: qcObject.queryingObjects ? true : false,
+    oninput: (e) => qcObject.search(e.target.value),
+  });
+
 /**
  * Shows a list of lines <tr> of objects
  * @param {Model} model - root model of the application
diff --git a/QualityControl/test/public/features/filterTest.test.js b/QualityControl/test/public/features/filterTest.test.js
@@ -241,16 +241,15 @@ export const filterTests = async (url, page, timeout = 5000, testParent) => {
     );
 
     let rowCount = await page.evaluate(() => document.querySelectorAll('tr').length);
-    strictEqual(rowCount, 7);
+    strictEqual(rowCount, 6);
 
     const runNumber = '0';
     await page.locator('#runNumberFilter').fill(runNumber);
     await page.locator('#filterElement #triggerFilterButton').click();
-
-    await extendTree(3, 5);
+    await delay(100);
 
     rowCount = await page.evaluate(() => document.querySelectorAll('tr').length);
-    strictEqual(rowCount, 5); // Due to the filter there are two objects fewer.
+    strictEqual(rowCount, 4); // Due to the filter there are two objects fewer.
   });
 
   await testParent.test('ObjectTree infoPanel should show filtered object versions', { timeout }, async () => {
diff --git a/QualityControl/test/public/pages/object-tree.test.js b/QualityControl/test/public/pages/object-tree.test.js
