From 4f3fdcf5183fa4fe0f266a7925bf8a3cb49094bc Mon Sep 17 00:00:00 2001
From: E <psybuzz@users.noreply.github.com>
Date: Tue, 9 Mar 2021 02:59:38 -0800
Subject: [PATCH 1/3] graph: fix PNG download button

---
 .../plugins/graph/tf_graph/tf-graph-scene.ts  |  8 +++--
 .../plugins/graph/tf_graph/tf-graph.ts        |  5 ++-
 .../graph/tf_graph_app/tf-graph-app.ts        |  9 ++++-
 .../graph/tf_graph_board/tf-graph-board.ts    | 13 +++++--
 .../plugins/graph/tf_graph_common/minimap.ts  | 34 +++++--------------
 .../tf_graph_controls/tf-graph-controls.ts    | 17 ++++------
 .../tf_graph_dashboard/tf-graph-dashboard.ts  |  9 ++++-
 7 files changed, 51 insertions(+), 44 deletions(-)

diff --git a/tensorboard/plugins/graph/tf_graph/tf-graph-scene.ts b/tensorboard/plugins/graph/tf_graph/tf-graph-scene.ts
index 3f36dc7213b..9085516983b 100644
--- a/tensorboard/plugins/graph/tf_graph/tf-graph-scene.ts
+++ b/tensorboard/plugins/graph/tf_graph/tf-graph-scene.ts
@@ -27,6 +27,7 @@ import * as tf_graph_scene from '../tf_graph_common/scene';
 import * as tf_graph_scene_node from '../tf_graph_common/node';
 import * as tf_graph_util from '../tf_graph_common/util';
 import * as tf_graph_layout from '../tf_graph_common/layout';
+import * as tf_graph_minimap from '../tf_graph_common/minimap';
 import * as tf_graph_render from '../tf_graph_common/render';
 import {template} from './tf-graph-scene.html';
 
@@ -126,10 +127,8 @@ class TfGraphScene2
 
   /**
    * A minimap object to notify for zoom events.
-   * This property is a tf.scene.Minimap object.
    */
-  @property({type: Object})
-  minimap: object;
+  private minimap: tf_graph_minimap.Minimap;
 
   /*
    * Dictionary for easily stylizing nodes when state changes.
@@ -497,6 +496,9 @@ class TfGraphScene2
       }.bind(this)
     );
   }
+  getImageBlob(): Promise<Blob> {
+    return this.minimap.getImageBlob();
+  }
   isNodeSelected(n) {
     return n === this.selectedNode;
   }
diff --git a/tensorboard/plugins/graph/tf_graph/tf-graph.ts b/tensorboard/plugins/graph/tf_graph/tf-graph.ts
index 0a34082ac3b..836e8e15354 100644
--- a/tensorboard/plugins/graph/tf_graph/tf-graph.ts
+++ b/tensorboard/plugins/graph/tf_graph/tf-graph.ts
@@ -30,7 +30,7 @@ import {LegacyElementMixin} from '../../../components/polymer/legacy_element_mix
 import {ColorBy} from '../tf_graph_common/view_types';
 
 @customElement('tf-graph')
-class TfGraph extends LegacyElementMixin(PolymerElement) {
+export class TfGraph extends LegacyElementMixin(PolymerElement) {
   static readonly template = html`
     <style>
       .container {
@@ -332,6 +332,9 @@ class TfGraph extends LegacyElementMixin(PolymerElement) {
   fit() {
     (this.$.scene as any).fit();
   }
+  getImageBlob(): Promise<Blob> {
+    return (this.$.scene as TfGraphScene2).getImageBlob();
+  }
   _graphChanged() {
     if (!this.graphHierarchy) {
       return;
diff --git a/tensorboard/plugins/graph/tf_graph_app/tf-graph-app.ts b/tensorboard/plugins/graph/tf_graph_app/tf-graph-app.ts
index 7beb906368d..33a3cfe7576 100644
--- a/tensorboard/plugins/graph/tf_graph_app/tf-graph-app.ts
+++ b/tensorboard/plugins/graph/tf_graph_app/tf-graph-app.ts
@@ -16,6 +16,7 @@ import {PolymerElement, html} from '@polymer/polymer';
 import {customElement, property} from '@polymer/decorators';
 
 import '../tf_graph_board/tf-graph-board';
+import {TfGraphBoard} from '../tf_graph_board/tf-graph-board';
 import '../tf_graph_controls/tf-graph-controls';
 import '../tf_graph_loader/tf-graph-loader';
 import * as tf_graph_render from '../tf_graph_common/render';
@@ -98,6 +99,7 @@ class TfGraphApp extends LegacyElementMixin(PolymerElement) {
             on-fit-tap="_fit"
             trace-inputs="{{_traceInputs}}"
             auto-extract-nodes="{{_autoExtractNodes}}"
+            on-download-image-requested="_onDownloadImageRequested"
           ></tf-graph-controls>
           <tf-graph-loader
             id="loader"
@@ -199,6 +201,11 @@ class TfGraphApp extends LegacyElementMixin(PolymerElement) {
     }
   }
   _fit() {
-    (this.$$('#graphboard') as any).fit();
+    ((this.$$('#graphboard') as unknown) as TfGraphBoard).fit();
+  }
+  _onDownloadImageRequested(filename: string) {
+    ((this.$$('#graphboard') as unknown) as TfGraphBoard).downloadAsImage(
+      filename
+    );
   }
 }
diff --git a/tensorboard/plugins/graph/tf_graph_board/tf-graph-board.ts b/tensorboard/plugins/graph/tf_graph_board/tf-graph-board.ts
index 6b907214b27..8a116fc3852 100644
--- a/tensorboard/plugins/graph/tf_graph_board/tf-graph-board.ts
+++ b/tensorboard/plugins/graph/tf_graph_board/tf-graph-board.ts
@@ -18,6 +18,7 @@ import {customElement, observe, property} from '@polymer/decorators';
 import '../../../components/polymer/irons_and_papers';
 import '../tf_graph_info/tf-graph-info';
 import '../tf_graph/tf-graph';
+import {TfGraph} from '../tf_graph/tf-graph';
 import * as tf_graph from '../tf_graph_common/graph';
 import * as tf_graph_render from '../tf_graph_common/render';
 import {LegacyElementMixin} from '../../../components/polymer/legacy_element_mixin';
@@ -43,7 +44,7 @@ const maxGraphSizeToComputeTemplates = {
  * <tf-graph-board graph=[[graph]]></tf-graph-board>
  */
 @customElement('tf-graph-board')
-class TfGraphBoard extends LegacyElementMixin(PolymerElement) {
+export class TfGraphBoard extends LegacyElementMixin(PolymerElement) {
   static readonly template = html`
     <style>
       ::host {
@@ -293,7 +294,15 @@ class TfGraphBoard extends LegacyElementMixin(PolymerElement) {
   @property({type: Object})
   handleEdgeSelected: object;
   fit() {
-    (this.$.graph as any).fit();
+    ((this.$.graph as unknown) as TfGraph).fit();
+  }
+  async downloadAsImage(filename: string) {
+    const blob = await ((this.$.graph as unknown) as TfGraph).getImageBlob();
+    const element = document.createElement('a');
+    element.href = URL.createObjectURL(blob);
+    element.download = filename;
+    element.click();
+    URL.revokeObjectURL(element.href);
   }
   /** True if the progress is not complete yet (< 100 %). */
   _isNotComplete(progress) {
diff --git a/tensorboard/plugins/graph/tf_graph_common/minimap.ts b/tensorboard/plugins/graph/tf_graph_common/minimap.ts
index 4fc29d28f96..2adceaa1076 100644
--- a/tensorboard/plugins/graph/tf_graph_common/minimap.ts
+++ b/tensorboard/plugins/graph/tf_graph_common/minimap.ts
@@ -22,7 +22,6 @@ export class Minimap {
   private canvas: HTMLCanvasElement;
   /** A buffer canvas used for temporary drawing to avoid flickering. */
   private canvasBuffer: HTMLCanvasElement;
-  private download: HTMLLinkElement;
   private downloadCanvas: HTMLCanvasElement;
   /** The minimap svg used for holding the viewpoint rectangle. */
   private minimapSvg: SVGSVGElement;
@@ -141,6 +140,14 @@ export class Minimap {
       d3.zoomIdentity.translate(mainX, mainY).scale(this.scaleMain)
     );
   }
+  /**
+   * Takes a snapshot of the graph's image as a Blob.
+   */
+  getImageBlob(): Promise<Blob> {
+    return new Promise<Blob>((resolve) => {
+      this.downloadCanvas.toBlob((blob) => resolve(blob), 'image/png');
+    });
+  }
   /**
    * Redraws the minimap. Should be called whenever the main svg
    * was updated (e.g. when a node was expanded).
@@ -159,31 +166,6 @@ export class Minimap {
       // detached from the dom.
       return;
     }
-    let $download = d3.select('#graphdownload');
-    this.download = <HTMLLinkElement>$download.node();
-    $download.on('click', (d) => {
-      // Revoke the old URL, if any. Then, generate a new URL.
-      URL.revokeObjectURL(this.download.href);
-      // We can't use the `HTMLCanvasElement.toBlob` API because it does
-      // not have a synchronous variant, and we need to update this href
-      // synchronously. Instead, we create a blob manually from the data
-      // URL.
-      const dataUrl = this.downloadCanvas.toDataURL('image/png');
-      const prefix = dataUrl.slice(0, dataUrl.indexOf(','));
-      if (!prefix.endsWith(';base64')) {
-        console.warn(
-          `non-base64 data URL (${prefix}); cannot use blob download`
-        );
-        (this.download as any).href = dataUrl;
-        return;
-      }
-      const data = atob(dataUrl.slice(dataUrl.indexOf(',') + 1));
-      const bytes = new Uint8Array(data.length).map((_, i) =>
-        data.charCodeAt(i)
-      );
-      const blob = new Blob([bytes], {type: 'image/png'});
-      (this.download as any).href = (URL as any).createObjectURL(blob);
-    });
     let $svg = d3.select(this.svg);
     // Read all the style rules in the document and embed them into the svg.
     // The svg needs to be self contained, i.e. all the style rules need to be
diff --git a/tensorboard/plugins/graph/tf_graph_controls/tf-graph-controls.ts b/tensorboard/plugins/graph/tf_graph_controls/tf-graph-controls.ts
index 7ae5cb28d31..417fe7fa1af 100644
--- a/tensorboard/plugins/graph/tf_graph_controls/tf-graph-controls.ts
+++ b/tensorboard/plugins/graph/tf_graph_controls/tf-graph-controls.ts
@@ -376,7 +376,6 @@ class TfGraphControls extends LegacyElementMixin(PolymerElement) {
           <iron-icon icon="file-download" class="button-icon"></iron-icon>
           <span class="button-text">Download PNG</span>
         </paper-button>
-        <a href="#" id="graphdownload" class="title" download="graph.png"></a>
       </div>
       <div class="control-holder runs">
         <div class="title">
@@ -1131,6 +1130,8 @@ class TfGraphControls extends LegacyElementMixin(PolymerElement) {
   })
   _legendOpened: boolean = true;
 
+  private _downloadFilename = '';
+
   _onGraphTypeChangedByUserGesture() {
     tf_graph_util.notifyDebugEvent({
       actionId: tb_debug.GraphDebugEventId.GRAPH_TYPE_CHANGED,
@@ -1315,7 +1316,7 @@ class TfGraphControls extends LegacyElementMixin(PolymerElement) {
     };
   }
   download() {
-    (this.$.graphdownload as HTMLElement).click();
+    this.fire('download-image-requested', this._downloadFilename);
   }
   _updateFileInput(e: Event) {
     const file = (e.target as HTMLInputElement).files[0];
@@ -1343,6 +1344,7 @@ class TfGraphControls extends LegacyElementMixin(PolymerElement) {
       // Select the first dataset by default.
       this._selectedRunIndex = 0;
     }
+    this._setDownloadFilename(this.datasets[this._selectedRunIndex]?.name);
   }
   _computeSelection(
     datasets: Dataset,
@@ -1369,9 +1371,7 @@ class TfGraphControls extends LegacyElementMixin(PolymerElement) {
     this._selectedTagIndex = 0;
     this._selectedGraphType = this._getDefaultSelectionType();
     this.traceInputs = false; // Set trace input to off-state.
-    this._setDownloadFilename(
-      this.datasets[runIndex] ? this.datasets[runIndex].name : ''
-    );
+    this._setDownloadFilename(this.datasets[runIndex]?.name);
   }
   _selectedTagIndexChanged(): void {
     this._selectedGraphType = this._getDefaultSelectionType();
@@ -1398,11 +1398,8 @@ class TfGraphControls extends LegacyElementMixin(PolymerElement) {
   _getFile() {
     (this.$$('#file') as HTMLElement).click();
   }
-  _setDownloadFilename(name: string) {
-    (this.$.graphdownload as HTMLElement).setAttribute(
-      'download',
-      name + '.png'
-    );
+  _setDownloadFilename(name?: string) {
+    this._downloadFilename = (name || 'graph') + '.png';
   }
   _statsNotNull(stats: tf_graph_proto.StepStats) {
     return stats !== null;
diff --git a/tensorboard/plugins/graph/tf_graph_dashboard/tf-graph-dashboard.ts b/tensorboard/plugins/graph/tf_graph_dashboard/tf-graph-dashboard.ts
index 0cb959f8950..1ed9ee85d1c 100644
--- a/tensorboard/plugins/graph/tf_graph_dashboard/tf-graph-dashboard.ts
+++ b/tensorboard/plugins/graph/tf_graph_dashboard/tf-graph-dashboard.ts
@@ -26,6 +26,7 @@ import * as vz_sorting from '../../../components/vz_sorting/sorting';
 import {LegacyElementMixin} from '../../../components/polymer/legacy_element_mixin';
 
 import '../tf_graph_board/tf-graph-board';
+import {TfGraphBoard} from '../tf_graph_board/tf-graph-board';
 import '../tf_graph_controls/tf-graph-controls';
 import '../tf_graph_loader/tf-graph-dashboard-loader';
 import * as tf_graph_op from '../tf_graph_common/op';
@@ -88,6 +89,7 @@ class TfGraphDashboard extends LegacyElementMixin(PolymerElement) {
         on-fit-tap="_fit"
         trace-inputs="{{_traceInputs}}"
         auto-extract-nodes="{{_autoExtractNodes}}"
+        on-download-image-requested="_onDownloadImageRequested"
       ></tf-graph-controls>
       <div
         class$="center [[_getGraphDisplayClassName(_selectedFile, _datasets)]]"
@@ -345,7 +347,12 @@ class TfGraphDashboard extends LegacyElementMixin(PolymerElement) {
     this._maybeFetchHealthPills();
   }
   _fit() {
-    (this.$$('#graphboard') as any).fit();
+    ((this.$$('#graphboard') as unknown) as TfGraphBoard).fit();
+  }
+  _onDownloadImageRequested(event: CustomEvent) {
+    ((this.$$('#graphboard') as unknown) as TfGraphBoard).downloadAsImage(
+      event.detail as string
+    );
   }
   _getGraphDisplayClassName(_selectedFile: any, _datasets: any[]) {
     const isDataValid = _selectedFile || _datasets.length;

From 23665548626a74d40f3290c5ce5d5be4cfe1df03 Mon Sep 17 00:00:00 2001
From: E <psybuzz@users.noreply.github.com>
Date: Wed, 10 Mar 2021 15:18:39 -0800
Subject: [PATCH 2/3] ac: fix sync

---
 tensorboard/plugins/graph/tf_graph/tf-graph.ts           | 4 ++--
 tensorboard/plugins/graph/tf_graph_app/tf-graph-app.ts   | 7 ++-----
 .../plugins/graph/tf_graph_board/tf-graph-board.ts       | 9 ++++-----
 tensorboard/plugins/graph/tf_graph_common/minimap.ts     | 4 +++-
 .../plugins/graph/tf_graph_controls/tf-graph-controls.ts | 2 +-
 .../graph/tf_graph_dashboard/tf-graph-dashboard.ts       | 7 ++-----
 6 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/tensorboard/plugins/graph/tf_graph/tf-graph.ts b/tensorboard/plugins/graph/tf_graph/tf-graph.ts
index 836e8e15354..8420c100645 100644
--- a/tensorboard/plugins/graph/tf_graph/tf-graph.ts
+++ b/tensorboard/plugins/graph/tf_graph/tf-graph.ts
@@ -30,7 +30,7 @@ import {LegacyElementMixin} from '../../../components/polymer/legacy_element_mix
 import {ColorBy} from '../tf_graph_common/view_types';
 
 @customElement('tf-graph')
-export class TfGraph extends LegacyElementMixin(PolymerElement) {
+class TfGraph extends LegacyElementMixin(PolymerElement) {
   static readonly template = html`
     <style>
       .container {
@@ -333,7 +333,7 @@ export class TfGraph extends LegacyElementMixin(PolymerElement) {
     (this.$.scene as any).fit();
   }
   getImageBlob(): Promise<Blob> {
-    return (this.$.scene as TfGraphScene2).getImageBlob();
+    return (this.$.scene as any).getImageBlob();
   }
   _graphChanged() {
     if (!this.graphHierarchy) {
diff --git a/tensorboard/plugins/graph/tf_graph_app/tf-graph-app.ts b/tensorboard/plugins/graph/tf_graph_app/tf-graph-app.ts
index 33a3cfe7576..54fb36d45c2 100644
--- a/tensorboard/plugins/graph/tf_graph_app/tf-graph-app.ts
+++ b/tensorboard/plugins/graph/tf_graph_app/tf-graph-app.ts
@@ -16,7 +16,6 @@ import {PolymerElement, html} from '@polymer/polymer';
 import {customElement, property} from '@polymer/decorators';
 
 import '../tf_graph_board/tf-graph-board';
-import {TfGraphBoard} from '../tf_graph_board/tf-graph-board';
 import '../tf_graph_controls/tf-graph-controls';
 import '../tf_graph_loader/tf-graph-loader';
 import * as tf_graph_render from '../tf_graph_common/render';
@@ -201,11 +200,9 @@ class TfGraphApp extends LegacyElementMixin(PolymerElement) {
     }
   }
   _fit() {
-    ((this.$$('#graphboard') as unknown) as TfGraphBoard).fit();
+    (this.$$('#graphboard') as any).fit();
   }
   _onDownloadImageRequested(filename: string) {
-    ((this.$$('#graphboard') as unknown) as TfGraphBoard).downloadAsImage(
-      filename
-    );
+    (this.$$('#graphboard') as any).downloadAsImage(filename);
   }
 }
diff --git a/tensorboard/plugins/graph/tf_graph_board/tf-graph-board.ts b/tensorboard/plugins/graph/tf_graph_board/tf-graph-board.ts
index 8a116fc3852..35f7e260fa4 100644
--- a/tensorboard/plugins/graph/tf_graph_board/tf-graph-board.ts
+++ b/tensorboard/plugins/graph/tf_graph_board/tf-graph-board.ts
@@ -18,7 +18,6 @@ import {customElement, observe, property} from '@polymer/decorators';
 import '../../../components/polymer/irons_and_papers';
 import '../tf_graph_info/tf-graph-info';
 import '../tf_graph/tf-graph';
-import {TfGraph} from '../tf_graph/tf-graph';
 import * as tf_graph from '../tf_graph_common/graph';
 import * as tf_graph_render from '../tf_graph_common/render';
 import {LegacyElementMixin} from '../../../components/polymer/legacy_element_mixin';
@@ -44,7 +43,7 @@ const maxGraphSizeToComputeTemplates = {
  * <tf-graph-board graph=[[graph]]></tf-graph-board>
  */
 @customElement('tf-graph-board')
-export class TfGraphBoard extends LegacyElementMixin(PolymerElement) {
+class TfGraphBoard extends LegacyElementMixin(PolymerElement) {
   static readonly template = html`
     <style>
       ::host {
@@ -294,12 +293,12 @@ export class TfGraphBoard extends LegacyElementMixin(PolymerElement) {
   @property({type: Object})
   handleEdgeSelected: object;
   fit() {
-    ((this.$.graph as unknown) as TfGraph).fit();
+    (this.$.graph as any).fit();
   }
   async downloadAsImage(filename: string) {
-    const blob = await ((this.$.graph as unknown) as TfGraph).getImageBlob();
+    const blob = await (this.$.graph as any).getImageBlob();
     const element = document.createElement('a');
-    element.href = URL.createObjectURL(blob);
+    (element as any).href = (URL as any).createObjectURL(blob);
     element.download = filename;
     element.click();
     URL.revokeObjectURL(element.href);
diff --git a/tensorboard/plugins/graph/tf_graph_common/minimap.ts b/tensorboard/plugins/graph/tf_graph_common/minimap.ts
index 2adceaa1076..a8ec6f0eb65 100644
--- a/tensorboard/plugins/graph/tf_graph_common/minimap.ts
+++ b/tensorboard/plugins/graph/tf_graph_common/minimap.ts
@@ -145,7 +145,9 @@ export class Minimap {
    */
   getImageBlob(): Promise<Blob> {
     return new Promise<Blob>((resolve) => {
-      this.downloadCanvas.toBlob((blob) => resolve(blob), 'image/png');
+      this.downloadCanvas.toBlob((blob) => {
+        resolve(blob);
+      }, 'image/png');
     });
   }
   /**
diff --git a/tensorboard/plugins/graph/tf_graph_controls/tf-graph-controls.ts b/tensorboard/plugins/graph/tf_graph_controls/tf-graph-controls.ts
index 417fe7fa1af..c9f3b115845 100644
--- a/tensorboard/plugins/graph/tf_graph_controls/tf-graph-controls.ts
+++ b/tensorboard/plugins/graph/tf_graph_controls/tf-graph-controls.ts
@@ -1130,7 +1130,7 @@ class TfGraphControls extends LegacyElementMixin(PolymerElement) {
   })
   _legendOpened: boolean = true;
 
-  private _downloadFilename = '';
+  _downloadFilename = '';
 
   _onGraphTypeChangedByUserGesture() {
     tf_graph_util.notifyDebugEvent({
diff --git a/tensorboard/plugins/graph/tf_graph_dashboard/tf-graph-dashboard.ts b/tensorboard/plugins/graph/tf_graph_dashboard/tf-graph-dashboard.ts
index 1ed9ee85d1c..e304896a2ef 100644
--- a/tensorboard/plugins/graph/tf_graph_dashboard/tf-graph-dashboard.ts
+++ b/tensorboard/plugins/graph/tf_graph_dashboard/tf-graph-dashboard.ts
@@ -26,7 +26,6 @@ import * as vz_sorting from '../../../components/vz_sorting/sorting';
 import {LegacyElementMixin} from '../../../components/polymer/legacy_element_mixin';
 
 import '../tf_graph_board/tf-graph-board';
-import {TfGraphBoard} from '../tf_graph_board/tf-graph-board';
 import '../tf_graph_controls/tf-graph-controls';
 import '../tf_graph_loader/tf-graph-dashboard-loader';
 import * as tf_graph_op from '../tf_graph_common/op';
@@ -347,12 +346,10 @@ class TfGraphDashboard extends LegacyElementMixin(PolymerElement) {
     this._maybeFetchHealthPills();
   }
   _fit() {
-    ((this.$$('#graphboard') as unknown) as TfGraphBoard).fit();
+    (this.$$('#graphboard') as any).fit();
   }
   _onDownloadImageRequested(event: CustomEvent) {
-    ((this.$$('#graphboard') as unknown) as TfGraphBoard).downloadAsImage(
-      event.detail as string
-    );
+    (this.$$('#graphboard') as any).downloadAsImage(event.detail as string);
   }
   _getGraphDisplayClassName(_selectedFile: any, _datasets: any[]) {
     const isDataValid = _selectedFile || _datasets.length;

From 04182474d465b5572ed742112d9c4cc124a2621e Mon Sep 17 00:00:00 2001
From: E <psybuzz@users.noreply.github.com>
Date: Wed, 10 Mar 2021 15:21:35 -0800
Subject: [PATCH 3/3] ac2

---
 .../plugins/graph/tf_graph_controls/tf-graph-controls.ts        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tensorboard/plugins/graph/tf_graph_controls/tf-graph-controls.ts b/tensorboard/plugins/graph/tf_graph_controls/tf-graph-controls.ts
index c9f3b115845..0a7db1a284f 100644
--- a/tensorboard/plugins/graph/tf_graph_controls/tf-graph-controls.ts
+++ b/tensorboard/plugins/graph/tf_graph_controls/tf-graph-controls.ts
@@ -1130,7 +1130,7 @@ class TfGraphControls extends LegacyElementMixin(PolymerElement) {
   })
   _legendOpened: boolean = true;
 
-  _downloadFilename = '';
+  _downloadFilename = 'graph.png';
 
   _onGraphTypeChangedByUserGesture() {
     tf_graph_util.notifyDebugEvent({