[alpha] Introduce source code lookup from tooltips

Signed-off-by: Simon Delisle <simon.delisle@ericsson.com>
eclipse-cdt-cloud · Oct 8, 2019 · 87a061f · 87a061f
1 parent 2f69041
commit 87a061f
Show file tree

Hide file tree

Showing 4 changed files with 2,118 additions and 1,226 deletions.
diff --git a/viewer-prototype/package.json b/viewer-prototype/package.json
@@ -16,6 +16,7 @@
   ],
   "dependencies": {
     "@theia/core": "next",
+    "@theia/editor": "next",
     "chart.js": "^2.8.0",
     "react-chartjs-2": "^2.7.6",
     "ag-grid-community": "^20.2.0",
@@ -24,6 +25,7 @@
     "react-grid-layout": "^0.16.6",
     "react-virtualized": "^9.21.0",
     "tsp-typescript-client": "next",
+    "lodash": "^4.17.15",
     "@fortawesome/fontawesome-svg-core": "^1.2.17",
     "@fortawesome/free-solid-svg-icons": "^5.8.1",
     "@fortawesome/react-fontawesome": "^0.1.4",
@@ -36,6 +38,7 @@
     "@types/react-grid-layout": "^0.16.7",
     "@types/react-virtualized": "^9.21.1",
     "@types/react-modal": "^3.8.2",
+    "@types/lodash": "^4.14.142",
     "rimraf": "latest",
     "typescript": "latest"
   },

diff --git a/viewer-prototype/src/browser/style/trace-explorer.css b/viewer-prototype/src/browser/style/trace-explorer.css
@@ -149,4 +149,8 @@
     height: 100%;
     min-width: 10px;
     margin-left: 0px;
+}
+
+.source-code-tooltip {
+    text-decoration: underline;
 }
diff --git a/viewer-prototype/src/browser/trace-explorer/trace-explorer-widget.tsx b/viewer-prototype/src/browser/trace-explorer/trace-explorer-widget.tsx
@@ -10,6 +10,8 @@ import { faShareSquare, faCopy } from '@fortawesome/free-solid-svg-icons'
 import * as ReactModal from 'react-modal';
 import { Emitter } from '@theia/core';
 import { SignalManager } from '../../common/signal-manager';
+import { EditorManager, EditorOpenerOptions } from '@theia/editor/lib/browser';
+import URI from '@theia/core/lib/common/uri';
 
 export const TRACE_EXPLORER_ID = 'trace-explorer';
 export const TRACE_EXPLORER_LABEL = 'Trace Explorer';
@@ -53,6 +55,7 @@ export class TraceExplorerWidget extends ReactWidget {
 
     constructor(
         @inject(TraceManager) private traceManager: TraceManager,
+        @inject(EditorManager) protected readonly editorManager: EditorManager
     ) {
         super();
         this.id = TRACE_EXPLORER_ID;
@@ -101,14 +104,6 @@ export class TraceExplorerWidget extends ReactWidget {
             }
         }
 
-        const tooltipArray: string[] = [];
-        if (this.tooltip) {
-            const keys = Object.keys(this.tooltip);
-            keys.forEach(key => {
-                tooltipArray.push(key + ': ' + this.tooltip[key]);
-            });
-        }
-
         return <div className='trace-explorer-container'>
             <ReactModal isOpen={this.showShareDialog} onRequestClose={this.handleShareModalClose} ariaHideApp={false} className='sharing-modal' overlayClassName='sharing-overlay'>
                 {this.renderSharingModal()}
@@ -152,14 +147,81 @@ export class TraceExplorerWidget extends ReactWidget {
                     {'Time Graph Tooltip'}
                 </div>
                 <div className='trace-explorer-panel-content'>
-                    {tooltipArray.map((element) => {
-                        return <p key={element}>{element}</p>;
-                    })}
+                    {this.renderTooltip()}
                 </div>
             </div>
         </div>;
     }
 
+    private renderTooltip() {
+        this.handleSourcecodeLockup = this.handleSourcecodeLockup.bind(this);
+        const tooltipArray: any[] = [];
+        if (this.tooltip) {
+            const keys = Object.keys(this.tooltip);
+            keys.forEach(key => {
+                if (key === 'Source') {
+                    const sourceCodeInfo = this.tooltip[key];
+                    const matches = sourceCodeInfo.match('(.*):(\\d+)')
+                    let fileLocation;
+                    let line;
+                    if(matches && matches.length === 3) {
+                        fileLocation = matches[1];
+                        line = matches[2];
+                    } 
+                    tooltipArray.push(<p className='source-code-tooltip' key={key} onClick={this.handleSourcecodeLockup.bind(this, fileLocation, line)}>{key + ': ' + sourceCodeInfo}</p>);
+                } else {
+                    tooltipArray.push(<p key={key}>{key + ': ' + this.tooltip[key]}</p>);
+                }
+            });
+        }
+
+        return <React.Fragment>
+            {tooltipArray.map(element => {
+                return element;
+            })}
+        </React.Fragment>;
+    }
+
+    private handleSourcecodeLockup(fileLocation: string | undefined, line: string | undefined) {
+        if (fileLocation) {
+            const modeOpt: EditorOpenerOptions = {
+                mode: 'open'
+            };
+            let slectionOpt = {
+                selection: {
+                    start: {
+                        line: 0,
+                        character: 0
+                    },
+                    end: {
+                        line: 0,
+                        character: 0
+                    }
+                }
+            };
+            if (line) {
+                const lineNumber = parseInt(line);
+                slectionOpt = {
+                    selection: {
+                        start: {
+                            line: lineNumber,
+                            character: 0
+                        },
+                        end: {
+                            line: lineNumber,
+                            character: 0
+                        }
+                    }
+                };
+            }
+            const opts = {
+                ...modeOpt,
+                ...slectionOpt
+            }
+            this.editorManager.open(new URI(fileLocation), opts);
+        }
+    }
+
     private renderSharingModal() {
         if (this.sharingLink.length) {
             return <div className='sharing-container'>