From de7fd5057c966bc3c809be5651011ced3add5ef6 Mon Sep 17 00:00:00 2001
From: hriday-panchasara <hriday.panchasara@ericsson.com>
Date: Thu, 23 Dec 2021 10:29:40 -0600
Subject: [PATCH] Set keyboard focus on graph/table when selecting an analysis
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fixes #414

When clicking on an analysis in the Available Analysis list, the analysis
is scrolled into view and given keyboard focus. When clicking on an analysis
title in the trace tab, keyboard focus should be the analysis' graph/chart region.
If a View that is already open is selected in the sidebar, the View's title area
should pulse to temporarily bring attention to the View panel. 

Signed-off-by: hriday-panchasara <hriday.panchasara@ericsson.com>
---
 .../components/abstract-output-component.tsx  | 12 ++++++++---
 .../components/datatree-output-component.tsx  | 19 ++++++++++++++++--
 .../src/components/null-output-component.tsx  |  5 +++++
 .../src/components/table-output-component.tsx | 20 +++++++++++++++++--
 .../components/timegraph-output-component.tsx | 16 ++++++++++++---
 .../components/trace-context-component.tsx    |  2 +-
 .../utils/timegraph-container-component.tsx   |  2 +-
 .../src/components/xy-output-component.tsx    | 18 +++++++++++++++--
 .../trace-explorer-views-widget.tsx           |  2 --
 .../style/output-components-style.css         |  9 ++++++++-
 .../viewer-prototype/package.json             |  3 ++-
 .../src/browser/trace-viewer/trace-viewer.tsx | 20 +++++++++++++++++--
 yarn.lock                                     |  5 +++++
 13 files changed, 113 insertions(+), 20 deletions(-)

diff --git a/packages/react-components/src/components/abstract-output-component.tsx b/packages/react-components/src/components/abstract-output-component.tsx
index 47e5c421f..0f529d345 100644
--- a/packages/react-components/src/components/abstract-output-component.tsx
+++ b/packages/react-components/src/components/abstract-output-component.tsx
@@ -63,7 +63,8 @@ export abstract class AbstractOutputComponent<P extends AbstractOutputProps, S e
         const localStyle = Object.assign({}, this.props.style);
         localStyle.width = this.props.widthWPBugWorkaround;
         return <div style={localStyle}
-            id={this.props.outputDescriptor.id}
+            id={this.props.traceId + this.props.outputDescriptor.id}
+            tabIndex={-1}
             className={'output-container ' + this.props.className}
             onMouseUp={this.props.onMouseUp}
             onMouseDown={this.props.onMouseDown}
@@ -71,7 +72,11 @@ export abstract class AbstractOutputComponent<P extends AbstractOutputProps, S e
             onTouchEnd={this.props.onTouchEnd}
             data-tip=''
             data-for="tooltip-component">
-            <div className='widget-handle' style={{ width: this.props.style.handleWidth, height: this.props.style.height }}>
+            <div
+                id={this.props.traceId + this.props.outputDescriptor.id + 'handle'}
+                className='widget-handle'
+                style={{ width: this.props.style.handleWidth, height: this.props.style.height }}
+            >
                 {this.renderTitleBar()}
             </div>
             <div className='main-output-container' ref={this.mainOutputContainer}
@@ -88,7 +93,7 @@ export abstract class AbstractOutputComponent<P extends AbstractOutputProps, S e
             <button className='remove-component-button' onClick={this.closeComponent}>
                 <FontAwesomeIcon icon={faTimes} />
             </button>
-            <div className='title-bar-label' title={outputName}>
+            <div className='title-bar-label' title={outputName} onClick={() => this.setFocus()}>
                 {outputName}
             </div>
         </React.Fragment>;
@@ -120,6 +125,7 @@ export abstract class AbstractOutputComponent<P extends AbstractOutputProps, S e
 
         return this.renderMainArea();
     }
+    abstract setFocus(): void;
 
     abstract renderMainArea(): React.ReactNode;
 
diff --git a/packages/react-components/src/components/datatree-output-component.tsx b/packages/react-components/src/components/datatree-output-component.tsx
index 9d09c4602..cdbd349fc 100644
--- a/packages/react-components/src/components/datatree-output-component.tsx
+++ b/packages/react-components/src/components/datatree-output-component.tsx
@@ -81,7 +81,11 @@ export class DataTreeOutputComponent extends AbstractOutputComponent<AbstractOut
         this.onToggleCollapse = this.onToggleCollapse.bind(this);
         this.onOrderChange = this.onOrderChange.bind(this);
         return this.state.xyTree.length
-            ? <div className='scrollable' style={{ height: this.props.style.height, width: this.getMainAreaWidth() }}>
+            ?   <div
+                    tabIndex={0}
+                    id={this.props.traceId + this.props.outputDescriptor.id + 'focusContainer'}
+                    className='scrollable' style={{ height: this.props.style.height, width: this.getMainAreaWidth() }}
+                >
                 <EntryTree
                     entries={this.state.xyTree}
                     showCheckboxes={false}
@@ -94,6 +98,7 @@ export class DataTreeOutputComponent extends AbstractOutputComponent<AbstractOut
             : undefined
             ;
     }
+
     renderMainArea(): React.ReactNode {
         return <React.Fragment>
             {this.state.outputStatus === ResponseStatus.COMPLETED ?
@@ -102,13 +107,22 @@ export class DataTreeOutputComponent extends AbstractOutputComponent<AbstractOut
                 >
                     {this.renderTree()}
                 </div> :
-                <div className='analysis-running-main-area'>
+                <div tabIndex={0} id={this.props.traceId + this.props.outputDescriptor.id + 'focusContainer'} className='analysis-running-main-area'>
                     <i className='fa fa-refresh fa-spin' style={{ marginRight: '5px' }} />
                     <span>Analysis running</span>
                 </div>
             }
         </React.Fragment>;
     }
+
+    setFocus(): void {
+        if (document.getElementById(this.props.traceId + this.props.outputDescriptor.id + 'focusContainer')) {
+            document.getElementById(this.props.traceId + this.props.outputDescriptor.id + 'focusContainer')?.focus();
+        } else {
+            document.getElementById(this.props.traceId + this.props.outputDescriptor.id)?.focus();
+        }
+    }
+
     private onToggleCollapse(id: number, nodes: TreeNode[]) {
         let newList = [...this.state.collapsedNodes];
 
@@ -122,6 +136,7 @@ export class DataTreeOutputComponent extends AbstractOutputComponent<AbstractOut
         const orderedIds = getAllExpandedNodeIds(nodes, newList);
         this.setState({collapsedNodes: newList, orderedNodes: orderedIds});
     }
+
     private onOrderChange(ids: number[]) {
         this.setState({orderedNodes: ids});
     }
diff --git a/packages/react-components/src/components/null-output-component.tsx b/packages/react-components/src/components/null-output-component.tsx
index 9eb6cfc99..c1cf50c59 100644
--- a/packages/react-components/src/components/null-output-component.tsx
+++ b/packages/react-components/src/components/null-output-component.tsx
@@ -11,6 +11,7 @@ export class NullOutputComponent extends AbstractOutputComponent<NullOutputProps
     constructor(props: NullOutputProps) {
         super(props);
     }
+
     renderMainArea(): React.ReactNode {
         const treeWidth = Math.min(this.getMainAreaWidth(), this.props.style.sashOffset + this.props.style.sashWidth);
         const chartWidth = this.getMainAreaWidth() - treeWidth;
@@ -29,4 +30,8 @@ export class NullOutputComponent extends AbstractOutputComponent<NullOutputProps
     resultsAreEmpty(): boolean {
         return true;
     }
+
+    setFocus(): void {
+        return;
+    }
   }
diff --git a/packages/react-components/src/components/table-output-component.tsx b/packages/react-components/src/components/table-output-component.tsx
index 3a2bd898f..82e93d51b 100644
--- a/packages/react-components/src/components/table-output-component.tsx
+++ b/packages/react-components/src/components/table-output-component.tsx
@@ -88,16 +88,18 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
                 params.successCallback(rowsThisPage, this.props.nbEvents);
             }
         };
-
         this.onEventClick = this.onEventClick.bind(this);
         this.onModelUpdated = this.onModelUpdated.bind(this);
         this.onKeyDown = this.onKeyDown.bind(this);
         this.searchEvents = this.searchEvents.bind(this);
         this.findMatchedEvent = this.findMatchedEvent.bind(this);
+        this.checkFocus = this.checkFocus.bind(this);
     }
 
     renderMainArea(): React.ReactNode {
-        return <div id='events-table'
+        return <div id={this.props.traceId + this.props.outputDescriptor.id + 'focusContainer'}
+            tabIndex={-1}
+            onFocus={event=>this.checkFocus(event)}
             className={this.props.backgroundTheme === 'light' ? 'ag-theme-balham' : 'ag-theme-balham-dark'}
             style={{ height: this.props.style.height, width: this.props.widthWPBugWorkaround }}>
             <AgGridReact
@@ -127,6 +129,20 @@ export class TableOutputComponent extends AbstractOutputComponent<TableOutputPro
         this.props.unitController.onSelectionRangeChange(range => { this.handleTimeSelectionChange(range); });
     }
 
+    private checkFocus(event: React.FocusEvent<HTMLDivElement, Element>): void {
+        if (!event.currentTarget?.contains(event.relatedTarget as Node)) {
+            this.setFocus();
+        }
+    }
+
+    setFocus(): void {
+        if (document.getElementById(this.props.traceId + this.props.outputDescriptor.id + 'focusContainer')) {
+            document.getElementById(this.props.traceId + this.props.outputDescriptor.id + 'focusContainer')?.focus();
+        } else {
+            document.getElementById(this.props.traceId + this.props.outputDescriptor.id)?.focus();
+        }
+    }
+
     componentWillUnmount(): void {
         // TODO: replace with removing the handler from unit controller
         // See timeline-chart issue #98
diff --git a/packages/react-components/src/components/timegraph-output-component.tsx b/packages/react-components/src/components/timegraph-output-component.tsx
index 13ff46e98..64d5788a8 100644
--- a/packages/react-components/src/components/timegraph-output-component.tsx
+++ b/packages/react-components/src/components/timegraph-output-component.tsx
@@ -300,7 +300,9 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
         // TODO Show header, when we can have entries in-line with timeline-chart
         return <>
             <div ref={this.timeGraphTreeRef} className='scrollable' onScroll={() => this.synchronizeTreeScroll()}
-                style={{ height: parseInt(this.props.style.height.toString()) - this.getMarkersLayerHeight() }}>
+                style={{ height: parseInt(this.props.style.height.toString()) - this.getMarkersLayerHeight() }}
+                tabIndex={0}
+                >
                 <EntryTree
                     collapsedNodes={this.state.collapsedNodes}
                     showFilter={false}
@@ -447,7 +449,7 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
         return <ReactTimeGraphContainer
             options={
                 {
-                    id: 'timegraph-chart',
+                    id: this.props.traceId + this.props.outputDescriptor.id + 'focusContainer',
                     height: parseInt(this.props.style.height.toString()) - this.getMarkersLayerHeight(),
                     width: this.getChartWidth(),
                     backgroundColor: this.props.style.chartBackgroundColor,
@@ -458,7 +460,7 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
             addWidgetResizeHandler={this.props.addWidgetResizeHandler}
             removeWidgetResizeHandler={this.props.removeWidgetResizeHandler}
             unitController={this.props.unitController}
-            id='timegraph-chart'
+            id={this.props.traceId + this.props.outputDescriptor.id + 'focusContainer'}
             layers={[
                 grid, this.chartLayer, selectionRange, this.chartCursors, this.arrowLayer, this.rangeEventsLayer
             ]}
@@ -466,6 +468,14 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
         </ReactTimeGraphContainer>;
     }
 
+    setFocus(): void {
+        if (document.getElementById(this.props.traceId + this.props.outputDescriptor.id + 'focusContainer')) {
+            document.getElementById(this.props.traceId + this.props.outputDescriptor.id + 'focusContainer')?.focus();
+        } else {
+            document.getElementById(this.props.traceId + this.props.outputDescriptor.id)?.focus();
+        }
+    }
+
     protected getVerticalScrollbar(): JSX.Element {
         return <ReactTimeGraphContainer
             id='vscroll'
diff --git a/packages/react-components/src/components/trace-context-component.tsx b/packages/react-components/src/components/trace-context-component.tsx
index b136e4f7e..534183c88 100644
--- a/packages/react-components/src/components/trace-context-component.tsx
+++ b/packages/react-components/src/components/trace-context-component.tsx
@@ -231,7 +231,7 @@ export class TraceContextComponent extends React.Component<TraceContextProps, Tr
     private scrollToBottom(): void {
         if (this.props.outputs.length) {
             const bottomOutputId = this.props.outputs[this.props.outputs.length - 1].id;
-            document.getElementById(bottomOutputId)?.scrollIntoView();
+            document.getElementById(this.state.experiment.UUID+bottomOutputId)?.focus();
         }
     }
 
diff --git a/packages/react-components/src/components/utils/timegraph-container-component.tsx b/packages/react-components/src/components/utils/timegraph-container-component.tsx
index 97b587000..0d3671793 100644
--- a/packages/react-components/src/components/utils/timegraph-container-component.tsx
+++ b/packages/react-components/src/components/utils/timegraph-container-component.tsx
@@ -54,7 +54,7 @@ export class ReactTimeGraphContainer extends React.Component<ReactTimeGraphConta
     }
 
     render(): JSX.Element {
-        return <canvas ref={ ref => this.ref = ref || undefined } onWheel={ e => e.preventDefault() } tabIndex={ 1 }></canvas>;
+        return <canvas ref={ ref => this.ref = ref || undefined } onWheel={ e => e.preventDefault() } tabIndex={ 0 }></canvas>;
     }
 
     private resize(): void {
diff --git a/packages/react-components/src/components/xy-output-component.tsx b/packages/react-components/src/components/xy-output-component.tsx
index 95c9ce50c..490d848ae 100644
--- a/packages/react-components/src/components/xy-output-component.tsx
+++ b/packages/react-components/src/components/xy-output-component.tsx
@@ -324,7 +324,10 @@ export class XYOutputComponent extends AbstractTreeOutputComponent<AbstractOutpu
         }
         return <React.Fragment>
             {this.state.outputStatus === ResponseStatus.COMPLETED ?
-                <div id='xy-main' tabIndex={0}
+                <div
+                    id={this.props.traceId + this.props.outputDescriptor.id + 'focusContainer'}
+                    className='xy-main'
+                    tabIndex={0}
                     onKeyDown={event => this.onKeyDown(event)}
                     onWheel={event => this.onWheel(event)}
                     onMouseMove={event => this.onMouseMove(event)}
@@ -336,7 +339,10 @@ export class XYOutputComponent extends AbstractTreeOutputComponent<AbstractOutpu
                 >
                     {this.chooseChart()}
                 </div> :
-                <div className='analysis-running'>
+                <div
+                    id={this.props.traceId + this.props.outputDescriptor.id + 'focusContainer'}
+                    className='analysis-running'
+                >
                     <i className='fa fa-refresh fa-spin' style={{ marginRight: '5px' }} />
                     <span>Analysis running</span>
                 </div>
@@ -374,6 +380,14 @@ export class XYOutputComponent extends AbstractTreeOutputComponent<AbstractOutpu
         });
     }
 
+    setFocus(): void {
+        if (document.getElementById(this.props.traceId + this.props.outputDescriptor.id + 'focusContainer')) {
+            document.getElementById(this.props.traceId + this.props.outputDescriptor.id + 'focusContainer')?.focus();
+        } else {
+            document.getElementById(this.props.traceId + this.props.outputDescriptor.id)?.focus();
+        }
+    }
+
     private afterChartDraw(chart: Chart) {
         const ctx = chart.ctx;
         if (ctx) {
diff --git a/packages/react-components/src/trace-explorer/trace-explorer-views-widget.tsx b/packages/react-components/src/trace-explorer/trace-explorer-views-widget.tsx
index dfc21e60d..f04ac9a22 100644
--- a/packages/react-components/src/trace-explorer/trace-explorer-views-widget.tsx
+++ b/packages/react-components/src/trace-explorer/trace-explorer-views-widget.tsx
@@ -126,9 +126,7 @@ export class ReactAvailableViewsWidget extends React.Component<ReactAvailableVie
         const outputs = this.state.availableOutputDescriptors;
 
         if (outputs && this._selectedExperiment) {
-            signalManager().fireExperimentSelectedSignal(this._selectedExperiment);
             signalManager().fireOutputAddedSignal(new OutputAddedSignalPayload(outputs[index], this._selectedExperiment));
-
         }
     }
 
diff --git a/packages/react-components/style/output-components-style.css b/packages/react-components/style/output-components-style.css
index d198600ec..5f90a0a21 100644
--- a/packages/react-components/style/output-components-style.css
+++ b/packages/react-components/style/output-components-style.css
@@ -2,9 +2,14 @@
 /* Main container*/
 .output-container {
     display: flex;
+    position: relative;
     color: var(--theia-ui-font-color0)
 }
 
+.output-container:focus {
+    outline: none;
+}
+
 .widget-handle {
     background-color: var(--theia-layout-color4);
     display: grid;
@@ -38,6 +43,8 @@
 .main-output-container {
     display: flex;
     overflow: hidden;
+    position: relative;
+    z-index: -1;
 }
 
 .output-component-tree {
@@ -67,7 +74,7 @@
     display: flex;
 }
 
-#xy-main {
+.xy-main {
     width: 100%;
     display: flex;
 }
diff --git a/theia-extensions/viewer-prototype/package.json b/theia-extensions/viewer-prototype/package.json
index 125db67d9..dc2c529bd 100644
--- a/theia-extensions/viewer-prototype/package.json
+++ b/theia-extensions/viewer-prototype/package.json
@@ -20,7 +20,8 @@
     "@theia/filesystem": "1.19.0",
     "traceviewer-base": "0.1.0",
     "traceviewer-react-components": "0.1.0",
-    "tree-kill": "latest"
+    "tree-kill": "latest",
+    "animate.css": "^4.1.1"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^3.4.0",
diff --git a/theia-extensions/viewer-prototype/src/browser/trace-viewer/trace-viewer.tsx b/theia-extensions/viewer-prototype/src/browser/trace-viewer/trace-viewer.tsx
index 53451722f..81bd14bd5 100644
--- a/theia-extensions/viewer-prototype/src/browser/trace-viewer/trace-viewer.tsx
+++ b/theia-extensions/viewer-prototype/src/browser/trace-viewer/trace-viewer.tsx
@@ -2,7 +2,6 @@ import { DisposableCollection, MessageService, Path } from '@theia/core';
 import { ApplicationShell, Message, StatusBar, WidgetManager } from '@theia/core/lib/browser';
 import { ReactWidget } from '@theia/core/lib/browser/widgets/react-widget';
 import { inject, injectable, postConstruct } from 'inversify';
-import * as React from 'react';
 import { OutputDescriptor } from 'tsp-typescript-client/lib/models/output-descriptor';
 import { Trace } from 'tsp-typescript-client/lib/models/trace';
 import { TspClient } from 'tsp-typescript-client/lib/protocol/tsp-client';
@@ -20,6 +19,8 @@ import { TraceExplorerContribution } from '../trace-explorer/trace-explorer-cont
 import { MarkerSet } from 'tsp-typescript-client/lib/models/markerset';
 import { BackendFileService } from '../../common/backend-file-service';
 import { CancellationTokenSource } from '@theia/core';
+import * as React from 'react';
+import 'animate.css';
 
 export const TraceViewerWidgetOptions = Symbol('TraceViewerWidgetOptions');
 export interface TraceViewerWidgetOptions {
@@ -316,7 +317,22 @@ export class TraceViewerWidget extends ReactWidget {
                 await this.fetchAnnotationCategories(output);
                 this.update();
             } else {
-                document.getElementById(exist.id)?.scrollIntoView();
+                const traceId = this.openedExperiment.UUID;
+                if (document.getElementById(traceId + exist.id + 'focusContainer')) {
+                    document.getElementById(traceId + exist.id + 'focusContainer')?.focus();
+                } else {
+                    document.getElementById(traceId + exist.id)?.focus();
+                }
+
+                await new Promise(resolve => {
+                    const titleHandle = document.getElementById(traceId + exist.id + 'handle');
+                    titleHandle?.classList.add('animate__animated', 'animate__pulse');
+                    titleHandle?.addEventListener('animationend', event => {
+                        event.stopPropagation();
+                        titleHandle?.classList.remove('animate__animated', 'animate__pulse');
+                        resolve('Animation ended');
+                    }, {once: true});
+                });
             }
         }
     }
diff --git a/yarn.lock b/yarn.lock
index dca7f9359..09764914a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4556,6 +4556,11 @@ alphanum-sort@^1.0.1, alphanum-sort@^1.0.2:
   resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
   integrity sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=
 
+animate.css@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/animate.css/-/animate.css-4.1.1.tgz#614ec5a81131d7e4dc362a58143f7406abd68075"
+  integrity sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==
+
 anser@^2.0.1:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/anser/-/anser-2.1.0.tgz#a7309c9f29886f19af56cb30c79fc60ea483944e"