[OGUI-561] Browse object tree with key arrows (#3256)

* Add keyboard arrow navigation for object tree

Author: crashdance

QualityControl/public/Model.js

@@ -139,17 +139,36 @@ export default class Model extends Observable {
    */
   handleKeyboardDown(e) {
     // Console.log(`e.keyCode=${e.keyCode}, e.metaKey=${e.metaKey}, e.ctrlKey=${e.ctrlKey}, e.altKey=${e.altKey}`);
-    const code = e.keyCode;
-
+    const { key } = e;
     // Delete key + layout page + object select => delete this object
-    if (code === 8 &&
+    if (key === 'Delete' &&
       this.router.params.page === 'layoutShow' &&
       this.layout.editEnabled &&
       this.layout.editingTabObject) {
       this.layout.deleteTabObject(this.layout.editingTabObject);
-    } else if (code === 27 && this.isImportVisible) {
+    } else if (key === 'Escape' && this.isImportVisible) {
       this.layout.resetImport();
     }
+    if (
+      this.router.params.page === 'objectTree' &&
+      (
+        key === 'ArrowUp' ||
+        key === 'ArrowDown' ||
+        key === 'Enter' ||
+        key === 'ArrowLeft' ||
+        key === 'ArrowRight'
+      )
+    ) {
+      e.preventDefault(); // Prevent scrolling the page
+      const searchActive = Boolean(this.object.searchInput?.trim());
+      if (searchActive) {
+        // Search navigation
+        this.object.handleKeyboardNavigationSearchResults(key);
+      } else {
+        // Tree navigation
+        this.object.tree.handleKeyboardNavigation(key, (selectedObject) => this.object.select(selectedObject));
+      }
+    }
   }
 
   /**
@@ -288,7 +307,7 @@ export default class Model extends Observable {
 
   /**
    * Clear URL parameters and redirect to a certain page
-   * @param {*} pageName - name of the page to be redirected to
+   * @param {string} pageName - name of the page to be redirected to
    * @returns {undefined}
    */
   clearURL(pageName) {

QualityControl/public/app.css

@@ -26,6 +26,8 @@
 .object-selectable { cursor: pointer; text-decoration: none; }
 .object-selectable:hover { cursor: pointer; background-color: var(--color-gray-dark) !important; color: var(--color-gray-lighter); }
 
+.focused-node>th, .focused-node>td { background-color: var(--color-gray-dark); color: var(--color-white); }
+
 .layout-selectable { border: 0.0em solid var(--color-primary); transition: border 0.1s; }
 .layout-selected { border: 0.3em solid var(--color-primary); }
 .layout-edit-layer { cursor: move; opacity: 0; }

QualityControl/public/common/constants/ui.js

@@ -0,0 +1,15 @@
+/**
+ * @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.
+ */
+
+export const OBJECT_LIST_SIDE_ROW_HEIGHT = 29.4;

QualityControl/public/common/enums/storageKeys.enum.js

@@ -20,6 +20,6 @@
 export const StorageKeysEnum = Object.freeze({
   OBJECT_VIEW_LEFT_PANEL_WIDTH: 'object-view-left-panel-width',
   OBJECT_VIEW_INFO_VISIBILITY_SETTING: 'object-view-info-visibility-setting',
+  OBJECT_TREE_OPEN_BRANCH_STATE: 'object-tree-open-branch-state',
   NOTIFICATION_START_RUN_SETTING: 'notification-start-run-setting',
-  OBJECT_TREE_OPEN_NODES: 'object-tree-open-nodes',
 });