Make TensorBoard work in raw sources mode

With this change we withdraw our support for the ECMA `import` keyword hitherto
mandated by certain tools. In doing so, TensorBoard compiles in seconds, rather
than taking a minute.

The ES6 `import` standard only defines / and ./ prefixed paths. All other paths
that exist are undefined. Since most tooling and early-adopter codebases rely
on the undefined behavior, the standard itself is mostly syntactic sugar (that
isn't even sweet.) The true problem is having a world where Closure, Node, and
web server namespaces coexist.

The ES6 `import` keyword makes JavaScript incompatible with web browsers. The
support added in Chrome 61 is not sufficient, as it only allows the `export`
keyword on functions and not variables. This is a point of view much different
from early-adopters, which raises concerns that the standard is unlikely to
gain a meaningful consensus.

The ES6 `import` keyword makes TypeScript incompatible with web browsers. This
keyword is not supported by the TypeScript compiler. All it can do is punt the
problem to rollup. However we can't use rollup since it doesn't support Closure
namespaces.

The only tool that supports all three of Web, Node, and Closure namespaces is
the Closure Compiler. Without it, ES6 TypeScript or JavaScript can't run in any
web browser.

But since the Closure Compiler was designed to create production builds for
google.com, it isn't very fast. Therefore it's unreasonable that developers on
a small project like TensorBoard should be expected to wait on this tool
whenever making one line changes in a development iteration cycle.

Since the Closure Tools were originally designed to be compatible with web
browsers in the absense of tooling, this change seeks to bring TensorBoard back
into accordance with those principles.

Author: jart

tensorboard/components/tf_backend/backend.ts

@@ -12,10 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {compareTagNames} from '../vz-sorting/sorting.js';
-import {RequestManager} from './requestManager.js';
-import {getRouter} from './router.js';
+namespace tf_backend {
 
 export type RunToTag = {
   [run: string]: string[];
@@ -44,13 +41,13 @@ export type DebuggerNumericsAlertReportResponse = DebuggerNumericsAlertReport[];
 export const TYPES = [];
 
 /** Given a RunToTag, return sorted array of all runs */
-export function getRuns(r: RunToTag): string[] {
-  return _.keys(r).sort(compareTagNames);
+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(compareTagNames);
+  return _.union.apply(null, _.values(r)).sort(vz_sorting.compareTagNames);
 }
 
 /**
@@ -61,7 +58,7 @@ export function getTags(r: RunToTag): string[] {
 export function filterTags(r: RunToTag, runs: string[]): string[] {
   let result = [];
   runs.forEach((x) => result = result.concat(r[x]));
-  return _.uniq(result).sort(compareTagNames);
+  return _.uniq(result).sort(vz_sorting.compareTagNames);
 }
 
 function timeToDate(x: number): Date {
@@ -91,9 +88,10 @@ function detupler<T, G>(xform: (x: T) => G): (t: TupleData<T>) => Datum & G {
   };
 };
 
-
 /**
  * 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

tensorboard/components/tf_backend/canceller.ts

@@ -12,6 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+namespace tf_backend {
 
 /**
  * A class that allows marking promises as cancelled.
@@ -63,3 +64,5 @@ export class Canceller {
     this.cancellationCount++;
   }
 }
+
+}  // namespace tf_backend

tensorboard/components/tf_backend/requestManager.ts

@@ -12,11 +12,13 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+namespace tf_backend {
 
 interface ResolveReject {
   resolve: Function;
   reject: Function;
 }
+
 /**
  * Manages many fetch requests. Launches up to nSimultaneousRequests
  * simultaneously, and maintains a LIFO queue of requests to process when
@@ -175,3 +177,5 @@ export class RequestManager {
     });
   }
 }
+
+}  // namespace tf_backend

tensorboard/components/tf_backend/router.ts

@@ -12,8 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {addParams} from './urlPathHelpers.js';
+namespace tf_backend {
 
 export interface Router {
   logdir: () => string;
@@ -76,3 +75,5 @@ export function setRouter(router: Router): void {
   }
   _router = router;
 }
+
+}  // namespace tf_backend

tensorboard/components/tf_backend/runsStore.ts

@@ -12,9 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {RequestManager} from './requestManager.js';
-import {getRouter} from './router.js';
+namespace tf_backend {
 
 let runs: string[] = [];
 
@@ -66,3 +64,5 @@ export function fetchRuns(): Promise<void> {
 export function getRuns(): string[] {
   return runs.slice();
 }
+
+}  // namespace tf_backend

tensorboard/components/tf_backend/test/BUILD

@@ -22,4 +22,3 @@ ts_web_library(
         "//tensorboard/components/tf_imports:webcomponentsjs",
     ],
 )
-

tensorboard/components/tf_backend/test/backendTests.ts

@@ -12,11 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {filterTags, getRuns, getTags, RunToTag, TYPES} from '../backend.js';
-import {RequestManager} from '../requestManager.js';
-import {createRouter, setRouter} from '../router.js';
-import {addParams} from '../urlPathHelpers.js';
+namespace tf_backend {
 
 describe('urlPathHelpers', () => {
   it('addParams leaves input untouched when there are no parameters', () => {
@@ -67,17 +63,19 @@ describe('backend tests', () => {
     };
     const empty1: RunToTag = {};
     const empty2: RunToTag = {run1: [], run2: []};
-    chai.assert.deepEqual(getRuns(r2t), ['a', 'run1', 'run2']);
+    chai.assert.deepEqual(getRunsNamed(r2t), ['a', 'run1', 'run2']);
     chai.assert.deepEqual(getTags(r2t), ['bar', 'foo', 'zod', 'zoink']);
     chai.assert.deepEqual(filterTags(r2t, ['run1', 'run2']), getTags(r2t));
     chai.assert.deepEqual(filterTags(r2t, ['run1']), ['bar', 'foo', 'zod']);
     chai.assert.deepEqual(
         filterTags(r2t, ['run2', 'a']), ['foo', 'zod', 'zoink']);
 
-    chai.assert.deepEqual(getRuns(empty1), []);
+    chai.assert.deepEqual(getRunsNamed(empty1), []);
     chai.assert.deepEqual(getTags(empty1), []);
 
-    chai.assert.deepEqual(getRuns(empty2), ['run1', 'run2']);
+    chai.assert.deepEqual(getRunsNamed(empty2), ['run1', 'run2']);
     chai.assert.deepEqual(getTags(empty2), []);
   });
 });
+
+}  // namespace tf_backend

tensorboard/components/tf_backend/test/requestManagerTests.ts

@@ -12,8 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-
-import {RequestManager, RequestNetworkError} from '../requestManager.js';
+namespace tf_backend {
 
 interface MockRequest {
   resolve: Function;
@@ -292,3 +291,5 @@ describe('backend', () => {
     });
   });
 });
+
+}  // namespace tf_backend

tensorboard/components/tf_backend/urlPathHelpers.ts

@@ -12,6 +12,8 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
+namespace tf_backend {
+
 /**
  * A query parameter value can either be a string or a list of strings.
  * A string `"foo"` is encoded as `key=foo`; a list `["foo", "bar"]` is
@@ -51,3 +53,5 @@ function _encodeURIComponent(x: string): string {
   // Replace parentheses for consistency with Python's urllib.urlencode.
   return encodeURIComponent(x).replace(/\(/g, '%28').replace(/\)/g, '%29');
 }
+
+}  // namespace tf_backend

tensorboard/components/tf_card_heading/BUILD

@@ -10,7 +10,7 @@ ts_web_library(
         "tf-card-heading.html",
         "tf-card-heading-style.html",
         "util.html",
-        "util.js",
+        "util.ts",
     ],
     path = "/tf-card-heading",
     visibility = ["//visibility:public"],