[OGUI-561] browse object tree with key arrows

QualityControl/public/Model.js

@@ -28,6 +28,8 @@ import { buildQueryParametersString } from './common/buildQueryParametersString.
 import AboutViewModel from './pages/aboutView/AboutViewModel.js';
 import LayoutListModel from './pages/layoutListView/model/LayoutListModel.js';
 import { RequestFields } from './common/RequestFields.enum.js';
+import { KeyCodesEnum } from '../common/enums/keyCodes.enum.js';
+
 import FilterModel from './common/filters/model/FilterModel.js';
 
 /**
@@ -129,16 +131,25 @@ 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;
-
     // Delete key + layout page + object select => delete this object
-    if (code === 8 &&
+    if (code === KeyCodesEnum.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 (code === KeyCodesEnum.ESC && this.isImportVisible) {
       this.layout.resetImport();
     }
+    if (this.router.params.page === 'objectTree') {
+      const searchActive = Boolean(this.object.searchInput?.trim());
+      // Search navigation
+      if (searchActive) {
+        this.object.handleKeyboardNavigationSearchResults(code);
+      } else {
+        // Tree navigation
+        this.object.tree.handleKeyboardNavigation(code, (selectedObject) => this.object.select(selectedObject));
+      }
+    }
   }
 
   /**
@@ -276,7 +287,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,16 @@
+/**
+ * @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_ROW_HEIGHT = 33.6;
+export const OBJECT_LIST_SIDE_ROW_HEIGHT = 29.4;

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

@@ -0,0 +1,28 @@
+/**
+ * @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.
+ */
+
+/**
+ * Key codes enumeration for keyboard events
+ * @enum {number}
+ * @readonly
+ */
+export const KeyCodesEnum = Object.freeze({
+  UP: 38,
+  DOWN: 40,
+  LEFT: 37,
+  RIGHT: 39,
+  ENTER: 13,
+  DELETE: 8,
+  ESC: 27,
+});

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

@@ -20,5 +20,5 @@
 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_NODES: 'object-tree-open-nodes',
+  OBJECT_TREE_OPEN_BRANCH_STATE: 'object-tree-open-branch-state',
 });