Add Prettier for linting frontend code

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": false,
+  "arrowParens": "always"
+}

.travis.yml

@@ -55,6 +55,7 @@ install:
   # TensorBoard deps.
   - pip install futures==3.1.1
   - pip install grpcio==1.6.3
+  - yarn install --ignore-engines
   # Uninstall older Travis numpy to avoid upgrade-in-place issues.
   - pip uninstall -y numpy
   - |
@@ -78,6 +79,8 @@ before_script:
   # Do a fail-fast check for Python syntax errors or undefined names.
   # Use the comment '# noqa: <error code>' to suppress.
   - flake8 . --count --select=E901,E999,F821,F822,F823 --show-source --statistics
+  # Lint frontend code
+  - yarn lint
   # Lint .yaml docs files. Use '# yamllint disable-line rule:foo' to suppress.
   - yamllint -c docs/.yamllint docs docs/.yamllint
   # Make sure that IPython notebooks have valid Markdown.

package.json

@@ -9,7 +9,9 @@
   "scripts": {
     "postinstall": "ngc -p angular-metadata.tsconfig.json",
     "build": "bazel build //...",
-    "test": "ibazel test //..."
+    "test": "ibazel test //...",
+    "lint": "prettier --check 'tensorboard/**/*.'{css,html,js,ts}",
+    "fix-lint": "prettier --write 'tensorboard/**/*.'{css,html,js,ts}"
   },
   "repository": {
     "type": "git",
@@ -35,6 +37,7 @@
     "@bazel/ibazel": "^0.10.3",
     "@bazel/typescript": "^0.34.0",
     "@types/node": "^12.6.8",
+    "prettier": "1.18.2",
     "typescript": "~3.4.5"
   },
   "dependencies": {

tensorboard/components/tensor_widget/tensor-widget.ts

@@ -13,7 +13,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 
-import {TensorWidget, TensorWidgetOptions, TensorView} from "./types";
+import {TensorWidget, TensorWidgetOptions, TensorView} from './types';
 
 /**
  * Create an instance of tensor widiget.
@@ -24,8 +24,11 @@ import {TensorWidget, TensorWidgetOptions, TensorView} from "./types";
  * @returns An instance of a single-tensor tensor widget.
  */
 export function tensorWidget(
-    rootElement: HTMLDivElement, tensor: TensorView,
-    options?: TensorWidgetOptions): TensorWidget {
+  rootElement: HTMLDivElement,
+  tensor: TensorView,
+  options?: TensorWidgetOptions
+): TensorWidget {
   throw new Error(
-       'tensorWidget() factory method has not been implemented yet.');
+    'tensorWidget() factory method has not been implemented yet.'
+  );
 }

tensorboard/components/tensor_widget/types.ts

@@ -13,7 +13,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 
-import {BaseTensorHealthPill} from "./health-pill-types";
+import {BaseTensorHealthPill} from './health-pill-types';
 
 /** The basic specifications of a tensor. */
 export interface TensorSpec {
@@ -46,7 +46,7 @@ export interface TensorView {
    * being a non-negative integer.
    * @return The value of the element at the specified indices.
    */
-  get: (...indices: number[]) => Promise<boolean|number|string>;
+  get: (...indices: number[]) => Promise<boolean | number | string>;
 
   /**
    * Get a view of the underlying tensor with the specified
@@ -64,9 +64,18 @@ export interface TensorView {
  * tensor.
  */
 export type SlicedValues =
-    boolean|boolean[]|boolean[][]|boolean[][][]|
-    number|number[]|number[][]|number[][][]|
-    string|string[]|string[][]|string[][][];
+  | boolean
+  | boolean[]
+  | boolean[][]
+  | boolean[][][]
+  | number
+  | number[]
+  | number[][]
+  | number[][][]
+  | string
+  | string[]
+  | string[][]
+  | string[][][];
 
 /**
  * A data structure that keeps track of how an n-dimensional array (tensor)
@@ -100,7 +109,7 @@ export interface TensorViewSlicingSpec {
    * - The `dim` field is the 0-based dimension index.
    * - The `index` is the 0-based index for the selected slice.
    */
-  slicingDimsAndIndices: Array<{dim: number, index: number}>;
+  slicingDimsAndIndices: Array<{dim: number; index: number}>;
 
   /**
    * Which dimensions are used for viewing (i.e., rendered in the

tensorboard/components/tensorboard.html

@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <!--
 @license
 Copyright 2016 The TensorFlow Authors. All Rights Reserved.
@@ -16,14 +16,21 @@
 limitations under the License.
 -->
 
-<meta charset="utf-8">
+<meta charset="utf-8" />
 <title>TensorBoard</title>
-<link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMQAAADECAMAAAD3eH5ZAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAD/UExURfFlKfaELvFmKfNyK/67NvWALf68Nv69NvNxK/20NfyyNP22NfN0K/JrKvqhMv2zNf25Nf24Nf23NfeOL/yzNPyvNPJoKviWMPmeMfN1K/WBLfePL/FnKfeML/qlMvR7LPmcMfeLL/aJLvR5LPFoKfJuKvR3LP66NvywNPeNL/V/LfaILv21Nf26NfNzK/NvK/R6LPmaMfyxNPqfMvV+LfurM/iSMPmbMfJvKvmdMfumM/qiMvmZMfytNPJqKvysNPN2K/iYMPNwK/upM/JtKvJsKviVMPaHLvaGLvJpKvR8LPaKLvqkMvuqM/aFLvR4LPuoM/iTMPWDLfiRMPmYMXS0ngkAAALoSURBVHja7drnctpAFIbhFUISSKJ3MKYa0+y4xTW9937/15JkJhlTjhrSrHRmvuf/as6L0YLFCgEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMBJ6njenqspzgnPrsrGX9Zpi2tCrmnc6+dYNthVY5WpMmxQLWPdMsOuYVwzNj3ei2t3mQwaV43BJPDCS2NbJ5aEeuX/+9qcjQOtfFIkIkrvY2g4MVcmOBsFWbowKO/kNyj62gRpJcDaPBlxLr1B0zdG0C/8LzbJiJrshuvy1gzlA9+rD8mIkuyIJjFE3/dqnYwoSm7IUEPoD/wut8iIguSIDjlFxe/yfXL5vuSI21BTZLLhXoOILMO8Hxwa/L8bI0LfmUdhGowb2ZvT0e57pFNDgB06IlVyjmmIBl2T/nl9Rw6SD9GgSG/Q0uQkaW3XhmovKQ3eFQ4N2Uo9OQ1eFZsNerf7vP+rO4rhmY1Lg3vFVoP8+8BXg1sFnwbnCk4NThW8GuiKBDdkVVtTNFvNelVsNqTbyWnIOM2oeTRoyWvwmpJHg/ucXBrcJuXT4DwrpwZi2vy0VCx8YtXg/D2bU4OfiuQ3eFfE2KD4bfCqiLNB993gXsGlwa2CT4NzBacGIVQ6YsipQdh0xEdODUKjIxrSp88onZ8zbbFLg1DoiFO5BXvDGv2My9/JhUT8JUZTI0yDaNHLBzIbvqTDNYhUiVw/kdjQ1kM2CHFDPjKW+KzyRTF0g/ga9w9y+fANQpxvX8CU+Ny7FUWDeF3Y+g3lROIf4k0UDX9eCyvO531PyYhHga9zvPZJU5b73Y/eXj8Hv9D48n6HaF5LbcjRt8TZTtda5M1DfXnbkX1C0SHCFKzQB5Fe8op4GNGNHavvZESbVwT5r6W1xyuCPBY3Y9YgDqzknH/e3YfNzzuL30l0IebrZ5kKtuDIXt1n868ET6kf3/49tLvrCcZyF8Pu215dAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcPIbNrBhOaBXucoAAAAASUVORK5CYII=">
-<link rel="apple-touch-icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMQAAADECAMAAAD3eH5ZAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAD/UExURfFlKfaELvFmKfNyK/67NvWALf68Nv69NvNxK/20NfyyNP22NfN0K/JrKvqhMv2zNf25Nf24Nf23NfeOL/yzNPyvNPJoKviWMPmeMfN1K/WBLfePL/FnKfeML/qlMvR7LPmcMfeLL/aJLvR5LPFoKfJuKvR3LP66NvywNPeNL/V/LfaILv21Nf26NfNzK/NvK/R6LPmaMfyxNPqfMvV+LfurM/iSMPmbMfJvKvmdMfumM/qiMvmZMfytNPJqKvysNPN2K/iYMPNwK/upM/JtKvJsKviVMPaHLvaGLvJpKvR8LPaKLvqkMvuqM/aFLvR4LPuoM/iTMPWDLfiRMPmYMXS0ngkAAALoSURBVHja7drnctpAFIbhFUISSKJ3MKYa0+y4xTW9937/15JkJhlTjhrSrHRmvuf/as6L0YLFCgEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMBJ6njenqspzgnPrsrGX9Zpi2tCrmnc6+dYNthVY5WpMmxQLWPdMsOuYVwzNj3ei2t3mQwaV43BJPDCS2NbJ5aEeuX/+9qcjQOtfFIkIkrvY2g4MVcmOBsFWbowKO/kNyj62gRpJcDaPBlxLr1B0zdG0C/8LzbJiJrshuvy1gzlA9+rD8mIkuyIJjFE3/dqnYwoSm7IUEPoD/wut8iIguSIDjlFxe/yfXL5vuSI21BTZLLhXoOILMO8Hxwa/L8bI0LfmUdhGowb2ZvT0e57pFNDgB06IlVyjmmIBl2T/nl9Rw6SD9GgSG/Q0uQkaW3XhmovKQ3eFQ4N2Uo9OQ1eFZsNerf7vP+rO4rhmY1Lg3vFVoP8+8BXg1sFnwbnCk4NThW8GuiKBDdkVVtTNFvNelVsNqTbyWnIOM2oeTRoyWvwmpJHg/ucXBrcJuXT4DwrpwZi2vy0VCx8YtXg/D2bU4OfiuQ3eFfE2KD4bfCqiLNB993gXsGlwa2CT4NzBacGIVQ6YsipQdh0xEdODUKjIxrSp88onZ8zbbFLg1DoiFO5BXvDGv2My9/JhUT8JUZTI0yDaNHLBzIbvqTDNYhUiVw/kdjQ1kM2CHFDPjKW+KzyRTF0g/ga9w9y+fANQpxvX8CU+Ny7FUWDeF3Y+g3lROIf4k0UDX9eCyvO531PyYhHga9zvPZJU5b73Y/eXj8Hv9D48n6HaF5LbcjRt8TZTtda5M1DfXnbkX1C0SHCFKzQB5Fe8op4GNGNHavvZESbVwT5r6W1xyuCPBY3Y9YgDqzknH/e3YfNzzuL30l0IebrZ5kKtuDIXt1n868ET6kf3/49tLvrCcZyF8Pu215dAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcPIbNrBhOaBXucoAAAAASUVORK5CYII=">
-<link rel="import" href="analytics.html">
-<link rel="import" href="tf-imports/polymer.html">
-<link rel="import" href="tf-tensorboard/style.html">
-<link rel="import" href="tf-tensorboard/default-plugins.html">
-<link rel="import" href="tf-tensorboard/tf-tensorboard.html">
+<link
+  rel="shortcut icon"
+  href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMQAAADECAMAAAD3eH5ZAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAD/UExURfFlKfaELvFmKfNyK/67NvWALf68Nv69NvNxK/20NfyyNP22NfN0K/JrKvqhMv2zNf25Nf24Nf23NfeOL/yzNPyvNPJoKviWMPmeMfN1K/WBLfePL/FnKfeML/qlMvR7LPmcMfeLL/aJLvR5LPFoKfJuKvR3LP66NvywNPeNL/V/LfaILv21Nf26NfNzK/NvK/R6LPmaMfyxNPqfMvV+LfurM/iSMPmbMfJvKvmdMfumM/qiMvmZMfytNPJqKvysNPN2K/iYMPNwK/upM/JtKvJsKviVMPaHLvaGLvJpKvR8LPaKLvqkMvuqM/aFLvR4LPuoM/iTMPWDLfiRMPmYMXS0ngkAAALoSURBVHja7drnctpAFIbhFUISSKJ3MKYa0+y4xTW9937/15JkJhlTjhrSrHRmvuf/as6L0YLFCgEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMBJ6njenqspzgnPrsrGX9Zpi2tCrmnc6+dYNthVY5WpMmxQLWPdMsOuYVwzNj3ei2t3mQwaV43BJPDCS2NbJ5aEeuX/+9qcjQOtfFIkIkrvY2g4MVcmOBsFWbowKO/kNyj62gRpJcDaPBlxLr1B0zdG0C/8LzbJiJrshuvy1gzlA9+rD8mIkuyIJjFE3/dqnYwoSm7IUEPoD/wut8iIguSIDjlFxe/yfXL5vuSI21BTZLLhXoOILMO8Hxwa/L8bI0LfmUdhGowb2ZvT0e57pFNDgB06IlVyjmmIBl2T/nl9Rw6SD9GgSG/Q0uQkaW3XhmovKQ3eFQ4N2Uo9OQ1eFZsNerf7vP+rO4rhmY1Lg3vFVoP8+8BXg1sFnwbnCk4NThW8GuiKBDdkVVtTNFvNelVsNqTbyWnIOM2oeTRoyWvwmpJHg/ucXBrcJuXT4DwrpwZi2vy0VCx8YtXg/D2bU4OfiuQ3eFfE2KD4bfCqiLNB993gXsGlwa2CT4NzBacGIVQ6YsipQdh0xEdODUKjIxrSp88onZ8zbbFLg1DoiFO5BXvDGv2My9/JhUT8JUZTI0yDaNHLBzIbvqTDNYhUiVw/kdjQ1kM2CHFDPjKW+KzyRTF0g/ga9w9y+fANQpxvX8CU+Ny7FUWDeF3Y+g3lROIf4k0UDX9eCyvO531PyYhHga9zvPZJU5b73Y/eXj8Hv9D48n6HaF5LbcjRt8TZTtda5M1DfXnbkX1C0SHCFKzQB5Fe8op4GNGNHavvZESbVwT5r6W1xyuCPBY3Y9YgDqzknH/e3YfNzzuL30l0IebrZ5kKtuDIXt1n868ET6kf3/49tLvrCcZyF8Pu215dAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcPIbNrBhOaBXucoAAAAASUVORK5CYII="
+/>
+<link
+  rel="apple-touch-icon"
+  href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMQAAADECAMAAAD3eH5ZAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAD/UExURfFlKfaELvFmKfNyK/67NvWALf68Nv69NvNxK/20NfyyNP22NfN0K/JrKvqhMv2zNf25Nf24Nf23NfeOL/yzNPyvNPJoKviWMPmeMfN1K/WBLfePL/FnKfeML/qlMvR7LPmcMfeLL/aJLvR5LPFoKfJuKvR3LP66NvywNPeNL/V/LfaILv21Nf26NfNzK/NvK/R6LPmaMfyxNPqfMvV+LfurM/iSMPmbMfJvKvmdMfumM/qiMvmZMfytNPJqKvysNPN2K/iYMPNwK/upM/JtKvJsKviVMPaHLvaGLvJpKvR8LPaKLvqkMvuqM/aFLvR4LPuoM/iTMPWDLfiRMPmYMXS0ngkAAALoSURBVHja7drnctpAFIbhFUISSKJ3MKYa0+y4xTW9937/15JkJhlTjhrSrHRmvuf/as6L0YLFCgEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMBJ6njenqspzgnPrsrGX9Zpi2tCrmnc6+dYNthVY5WpMmxQLWPdMsOuYVwzNj3ei2t3mQwaV43BJPDCS2NbJ5aEeuX/+9qcjQOtfFIkIkrvY2g4MVcmOBsFWbowKO/kNyj62gRpJcDaPBlxLr1B0zdG0C/8LzbJiJrshuvy1gzlA9+rD8mIkuyIJjFE3/dqnYwoSm7IUEPoD/wut8iIguSIDjlFxe/yfXL5vuSI21BTZLLhXoOILMO8Hxwa/L8bI0LfmUdhGowb2ZvT0e57pFNDgB06IlVyjmmIBl2T/nl9Rw6SD9GgSG/Q0uQkaW3XhmovKQ3eFQ4N2Uo9OQ1eFZsNerf7vP+rO4rhmY1Lg3vFVoP8+8BXg1sFnwbnCk4NThW8GuiKBDdkVVtTNFvNelVsNqTbyWnIOM2oeTRoyWvwmpJHg/ucXBrcJuXT4DwrpwZi2vy0VCx8YtXg/D2bU4OfiuQ3eFfE2KD4bfCqiLNB993gXsGlwa2CT4NzBacGIVQ6YsipQdh0xEdODUKjIxrSp88onZ8zbbFLg1DoiFO5BXvDGv2My9/JhUT8JUZTI0yDaNHLBzIbvqTDNYhUiVw/kdjQ1kM2CHFDPjKW+KzyRTF0g/ga9w9y+fANQpxvX8CU+Ny7FUWDeF3Y+g3lROIf4k0UDX9eCyvO531PyYhHga9zvPZJU5b73Y/eXj8Hv9D48n6HaF5LbcjRt8TZTtda5M1DfXnbkX1C0SHCFKzQB5Fe8op4GNGNHavvZESbVwT5r6W1xyuCPBY3Y9YgDqzknH/e3YfNzzuL30l0IebrZ5kKtuDIXt1n868ET6kf3/49tLvrCcZyF8Pu215dAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcPIbNrBhOaBXucoAAAAASUVORK5CYII="
+/>
+<link rel="import" href="analytics.html" />
+<link rel="import" href="tf-imports/polymer.html" />
+<link rel="import" href="tf-tensorboard/style.html" />
+<link rel="import" href="tf-tensorboard/default-plugins.html" />
+<link rel="import" href="tf-tensorboard/tf-tensorboard.html" />
 <body>
-<tf-tensorboard use-hash brand="TensorBoard"></tf-tensorboard>
+  <tf-tensorboard use-hash brand="TensorBoard"></tf-tensorboard>
+</body>

tensorboard/components/tf_backend/backend.ts

@@ -13,85 +13,83 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 namespace tf_backend {
+  export type RunToTag = {
+    [run: string]: string[];
+  };
 
-export type RunToTag = {
-  [run: string]: string[];
-};
-
-export interface Datum {
-  wall_time: Date;
-  step: number;
-}
+  export interface Datum {
+    wall_time: Date;
+    step: number;
+  }
 
-// An object that encapsulates an alert issued by the debugger. This alert is
-// sent by debugging libraries after bad values (NaN, +/- Inf) are encountered.
-export interface DebuggerNumericsAlertReport {
-  device_name: string;
-  tensor_name: string;
-  first_timestamp: number;
-  nan_event_count: number;
-  neg_inf_event_count: number;
-  pos_inf_event_count: number;
-}
-// A DebuggerNumericsAlertReportResponse contains alerts issued by the debugger
-// in ascending order of timestamp. This helps the user identify for instance
-// when bad values first appeared in the model.
-export type DebuggerNumericsAlertReportResponse = DebuggerNumericsAlertReport[];
+  // An object that encapsulates an alert issued by the debugger. This alert is
+  // sent by debugging libraries after bad values (NaN, +/- Inf) are encountered.
+  export interface DebuggerNumericsAlertReport {
+    device_name: string;
+    tensor_name: string;
+    first_timestamp: number;
+    nan_event_count: number;
+    neg_inf_event_count: number;
+    pos_inf_event_count: number;
+  }
+  // A DebuggerNumericsAlertReportResponse contains alerts issued by the debugger
+  // in ascending order of timestamp. This helps the user identify for instance
+  // when bad values first appeared in the model.
+  export type DebuggerNumericsAlertReportResponse = DebuggerNumericsAlertReport[];
 
-export const TYPES = [];
+  export const TYPES = [];
 
-/** Given a RunToTag, return sorted array of all runs */
-export function getRunsNamed(r: RunToTag): string[] {
-  return _.keys(r).sort(vz_sorting.compareTagNames);
-}
+  /** Given a RunToTag, return sorted array of all runs */
+  export function getRunsNamed(r: RunToTag): string[] {
+    return _.keys(r).sort(vz_sorting.compareTagNames);
+  }
 
-/** Given a RunToTag, return array of all tags (sorted + dedup'd) */
-export function getTags(r: RunToTag): string[] {
-  return _.union.apply(null, _.values(r)).sort(vz_sorting.compareTagNames);
-}
+  /** Given a RunToTag, return array of all tags (sorted + dedup'd) */
+  export function getTags(r: RunToTag): string[] {
+    return _.union.apply(null, _.values(r)).sort(vz_sorting.compareTagNames);
+  }
 
-/**
- * Given a RunToTag and an array of runs, return every tag that appears for
- * at least one run.
- * Sorted, deduplicated.
- */
-export function filterTags(r: RunToTag, runs: string[]): string[] {
-  let result = [];
-  runs.forEach((x) => result = result.concat(r[x]));
-  return _.uniq(result).sort(vz_sorting.compareTagNames);
-}
+  /**
+   * Given a RunToTag and an array of runs, return every tag that appears for
+   * at least one run.
+   * Sorted, deduplicated.
+   */
+  export function filterTags(r: RunToTag, runs: string[]): string[] {
+    let result = [];
+    runs.forEach((x) => (result = result.concat(r[x])));
+    return _.uniq(result).sort(vz_sorting.compareTagNames);
+  }
 
-function timeToDate(x: number): Date {
-  return new Date(x * 1000);
-};
+  function timeToDate(x: number): Date {
+    return new Date(x * 1000);
+  }
 
-/**  Just a curryable map to make things cute and tidy. */
-function map<T, U>(f: (x: T) => U): (arr: T[]) => U[] {
-  return function(arr: T[]): U[] {
-    return arr.map(f);
-  };
-};
-
-/**
- * This is a higher order function that takes a function that transforms a
- * T into a G, and returns a function that takes TupleData<T>s and converts
- * them into the intersection of a G and a Datum.
- */
-function detupler<T, G>(xform: (x: T) => G): (t: TupleData<T>) => Datum & G {
-  return function(x: TupleData<T>): Datum & G {
-    // Create a G, assert it has type <G & Datum>
-    let obj = <G&Datum>xform(x[2]);
-    // ... patch in the properties of datum
-    obj.wall_time = timeToDate(x[0]);
-    obj.step = x[1];
-    return obj;
-  };
-};
+  /**  Just a curryable map to make things cute and tidy. */
+  function map<T, U>(f: (x: T) => U): (arr: T[]) => U[] {
+    return function(arr: T[]): U[] {
+      return arr.map(f);
+    };
+  }
 
-/**
- * The following interface (TupleData) describes how the data is sent
- * over from the backend.
- */
-type TupleData<T> = [number, number, T];  // wall_time, step
+  /**
+   * This is a higher order function that takes a function that transforms a
+   * T into a G, and returns a function that takes TupleData<T>s and converts
+   * them into the intersection of a G and a Datum.
+   */
+  function detupler<T, G>(xform: (x: T) => G): (t: TupleData<T>) => Datum & G {
+    return function(x: TupleData<T>): Datum & G {
+      // Create a G, assert it has type <G & Datum>
+      let obj = <G & Datum>xform(x[2]);
+      // ... patch in the properties of datum
+      obj.wall_time = timeToDate(x[0]);
+      obj.step = x[1];
+      return obj;
+    };
+  }
 
-}  // namespace tf_backend
+  /**
+   * The following interface (TupleData) describes how the data is sent
+   * over from the backend.
+   */
+  type TupleData<T> = [number, number, T]; // wall_time, step
+} // namespace tf_backend