Add code search link for events where source line is present

PiperOrigin-RevId: 682470445

plugin/trace_viewer/tf_trace_viewer/tf-trace-viewer.html

@@ -466,6 +466,8 @@
       _useNewBackend: {type: Boolean, value: false},
       // The rect being hovered (represents a trace event).
       _hoverRect: {type: Object, value: null},
+      _codeSearchUrl: {type: String, value: ''},
+      _changelist: {type: String, value: ''},
     },
 
     ready: function() {
@@ -593,6 +595,21 @@
       }
     },
 
+    createCodeSearchLink: function(text) {
+      // source code format: file/path/to/file.bar:line_number
+      sourceLineSplit = text.split(':');
+      if (sourceLineSplit.length < 1) return;
+      filePath = text.split(':')[0] || '';
+      if (sourceLineSplit.length > 1)
+        lineNumber = text.split(':')[1] || '';
+      url = this._codeSearchUrl.replace("{filePath}", filePath);
+      url = url.replace("{lineNumber}", lineNumber);
+      url = url.replace("{changelist}", this._changelist);
+      const codeSearchLinkElement = document.createElement('div');
+      codeSearchLinkElement.innerHTML = `Code Search: <a href="${url}" target="_blank">${text}</a>`;
+      this._eventDetails.appendChild(codeSearchLinkElement);
+    },
+
     createCrossToolLink: function(toolName, toolLabel, params, text) {
       const toolLink =
             new URL(`${window.location.origin}/${toolName}/${this._sessionId}`);
@@ -688,13 +705,18 @@
             // Add Roofline Model link per event selection
             const rooflineText = `see op level analysis for ${hloOp}`;
             this.createCrossToolLink("roofline_model", "Roofline Model", {"roofline_op_name": hloOp}, rooflineText);
+            if (event.args?.source && this._codeSearchUrl)
+              this.createCodeSearchLink(event.args?.source);
           } else {
             // Add crosslink form trace viewer to graph viewer
             // per event selection for tensorboard profiler
             const params = {hloOp, hloModule};
             this.createCrossToolLinkOss("graph_viewer", "Graph Viewer", params, graphViewText);
           }
         }
+        if ('Source code' === event.parentContainer.name && event.title && this._codeSearchUrl) {
+          this.createCodeSearchLink(event.title);
+        }
         // For `TfrtModelRun` event, add links to the associated MLIR graphs.
         if (this._sessionId && event.title.includes("TfrtModelRun")) {
           // First link is for TF MLIR.
@@ -1319,6 +1341,7 @@
         }
         startUpdateModel = performance.now();
         const jsonData = JSON.parse(data);
+        this._codeSearchUrl = jsonData['codeSearchURL'];
         if (!this._model /* first load */) {
           this._collapseBigProcessTracks(jsonData);
           if (!this._isOss) {
@@ -1451,6 +1474,8 @@
         const fullTimespan = jsonData['fullTimespan'];
         this._fullBounds = {min: fullTimespan[0], max: fullTimespan[1]};
         this._tasks = jsonData['tasks'];
+        if (this._tasks && this._tasks.length > 0)
+          this._changelist = this._tasks[0]['changelist'];
       } else {
         // Delete fields to prevent traceviewer from accumulating them.
         delete jsonData['metadata'];