Add Events Table Shortcuts to the Keyboard Shortcuts Menu

Helps fix #742 Signed-off-by: hriday-panchasara <hriday.panchasara@ericsson.com>
eclipse-cdt-cloud · Sep 6, 2022 · 975f727 · 975f727
1 parent d610a9a
commit 975f727
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 1 deletion.
diff --git a/...ce-explorer-sub-widgets/trace-explorer-keyboard-shortcuts/charts-cheatsheet-component.tsx b/...ce-explorer-sub-widgets/trace-explorer-keyboard-shortcuts/charts-cheatsheet-component.tsx
@@ -6,6 +6,7 @@ import { Message } from '@theia/core/lib/browser/widgets/widget';
 import { EssentialShortcutsTable } from './essential-shortcuts-table';
 import { ZoomPanShortcutsTable } from './zoom-pan-shortcuts-table';
 import { TimeGraphShortcutsTable } from './time-graph-navigation-shortcuts-table';
+import { EventsTableShortcutsTable } from './events-table-shortcuts-table';
 import { SelectShortcutsTable } from './select-shortcuts-table';
 
 @injectable()
@@ -36,6 +37,7 @@ export class ChartShortcutsDialog extends ReactDialog<void> {
                 <EssentialShortcutsTable />
                 <ZoomPanShortcutsTable />
                 <TimeGraphShortcutsTable />
+                <EventsTableShortcutsTable />
                 <SelectShortcutsTable />
             </div>
         );

diff --git a/...e-explorer-sub-widgets/trace-explorer-keyboard-shortcuts/events-table-shortcuts-table.tsx b/...e-explorer-sub-widgets/trace-explorer-keyboard-shortcuts/events-table-shortcuts-table.tsx
@@ -0,0 +1,84 @@
+import * as React from 'react';
+
+export class EventsTableShortcutsTable extends React.Component {
+
+    render(): React.ReactNode {
+        return <React.Fragment>
+            <span className='shortcuts-table-header'>TABLE NAVIGATION</span>
+            <div className='shortcuts-table-row'>
+                <div className='shortcuts-table-column'>
+                    <table>
+                        <tbody>
+                            <tr>
+                                <td>Cell Navigation</td>
+                                <td className='monaco-keybinding shortcuts-table-keybinding'>
+                                    <span className='monaco-keybinding-key'><i className='fa fa-arrow-up' /></span>
+                                    <span className='monaco-keybinding-key'><i className='fa fa-arrow-down' /></span>
+                                    <span className='monaco-keybinding-key'><i className='fa fa-arrow-left' /></span>
+                                    <span className='monaco-keybinding-key'><i className='fa fa-arrow-right' /></span>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>Page Up</td>
+                                <td className='monaco-keybinding shortcuts-table-keybinding'>
+                                    <span className='monaco-keybinding-key'>Page Up</span>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>Page Down</td>
+                                <td className='monaco-keybinding shortcuts-table-keybinding'>
+                                    <span className='monaco-keybinding-key'>Page Down</span>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>Multi-select</td>
+                                <td className='monaco-keybinding shortcuts-table-keybinding'>
+                                    <span className='monaco-keybinding-key'>Shift</span>
+                                    <span className='monaco-keybinding-key'>Click</span>
+                                    <span className='monaco-keybinding-seperator'>or</span>
+                                    <span className='monaco-keybinding-key'>Shift</span>
+                                    <span className='monaco-keybinding-key'><i className='fa fa-arrow-up' /></span>
+                                    <span className='monaco-keybinding-key'><i className='fa fa-arrow-down' /></span>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div className='shortcuts-table-column'>
+                    <table>
+                        <tbody>
+                            <tr>
+                                <td>Deselect row(s)</td>
+                                <td className='monaco-keybinding shortcuts-table-keybinding'>
+                                    <span className='monaco-keybinding-key'>Ctrl</span>
+                                    <span className='monaco-keybinding-seperator'>or</span>
+                                    <span className='monaco-keybinding-key'>meta</span>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>Go to first row</td>
+                                <td className='monaco-keybinding shortcuts-table-keybinding'>
+                                    <span className='monaco-keybinding-key'>Home</span>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>Go to last row</td>
+                                <td className='monaco-keybinding shortcuts-table-keybinding'>
+                                    <span className='monaco-keybinding-key'>End</span>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>Select current row</td>
+                                <td className='monaco-keybinding shortcuts-table-keybinding'>
+                                    <span className='monaco-keybinding-key'>Click</span>
+                                    <span className='monaco-keybinding-seperator'>or</span>
+                                    <span className='monaco-keybinding-key'>Space</span>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </React.Fragment>;
+    }
+}
diff --git a/...xtensions/viewer-prototype/src/browser/trace-viewer/trace-viewer-toolbar-contribution.tsx b/...xtensions/viewer-prototype/src/browser/trace-viewer/trace-viewer-toolbar-contribution.tsx
@@ -137,7 +137,7 @@ export class TraceViewerToolbarContribution implements TabBarToolbarContribution
             isVisible: (w: Widget) => {
                 if (w instanceof TraceViewerWidget) {
                     const traceWidget = w as TraceViewerWidget;
-                    return traceWidget.isTimeRelatedChartOpened() || traceWidget.isTraceOverviewOpened();
+                    return traceWidget.isTimeRelatedChartOpened() || traceWidget.isTraceOverviewOpened() || traceWidget.isTableRelatedChartOpened();
                 }
                 return false;
             },

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
@@ -551,6 +551,11 @@ export class TraceViewerWidget extends ReactWidget implements StatefulWidget {
         return timeRelatedOutputs.length > 0;
     }
 
+    isTableRelatedChartOpened(): boolean {
+        const tableRelatedOutputs = this.outputDescriptors.filter(output => output.type === 'TABLE');
+        return tableRelatedOutputs.length > 0;
+    }
+
     isTraceOverviewOpened(): boolean {
         if (this.overviewOutputDescriptor){
             return true;