How is typeScript translated to JavaScript?

[BinhangYuan]

If I understand correctly, tensorboard was developed by Polymer and Typescript where Polymer handles the rendering and typescript handles complicated computations.

I am confused about how the typeScript file is "automatically" translated to javascript. For example, in a HTML file (say tf-histogram-dashboard.html) which includes the Polymer code, it usually includes a XXX.js (here categorizationUtils.js in line 141) file, where XXX.ts (categorizationUtils.ts) file locates there actually. I am confused about how bazel works this out.

Is there any documentation about how to write the bazel BUILD file for tensorboard if I would like to add a self-designed visualization in tensorboard?

Any suggestion is highly appreciated!

[chihuahua]

We like it when folks extend TensorBoard (with visualizations and other functionality). The standard way to do that is to build a TensorBoard plugin. They reside in the plugins directory. Documentation for creating plugins has been written (but as of today, not yet submitted into the repo).

Issue #130 follows another individual's effort to contribute a plugin to TensorBoard.

As for your original question, we use the ts_web_library rule, which encapsulates some complex logic that goes into creating the final HTML output. For instance, it uses its own vulcanization script.

If you give us more details on what you seek to build, we can provide more input. Thank you!

[wchargin]

Often an example is helpful: here is the BUILD file for the histogram dashboard, which includes a histogramCore.ts TypeScript file. (Please ignore the rule with name = "demo"; only the top rule is relevant.)

[wchargin]

I'm closing this because I think that we've answered your question, but please feel free to reopen if you'd like additional clarification.

(Thanks for your interest, and also please feel free to ask more questions like this!)

[BinhangYuan]

Hi @chihuahua, thanks for providing this helpful documentation. Actually, I am Ph.D. student working on data visualization, I am targeting at building some viz for deep learning on top of tensorflow in order to publish on TVCG or InfoVis. The very first idea, I got right now, is to improve t-SNE in order to track the change of embedding for the features in different layers during the flow of the CNN. However, this is research so I am not sure if it will work at this moment.

Actually, I am wondering how the open source community works. I think you suggest in another post about code review and merge decisions. I am wondering how exactly that works out.

Again, thanks for your help!

[BinhangYuan]

Hi @wchargin , thanks for you reply.

I am still confused about how this works out. Point out this example is helpful!. Let us see the tf-histogram-loader.html file in the same directory.

in line 91, it has:

import {backendToVz} from "./histogramCore.js";

My questions is that: here it import a .js file while there actually is a .ts file, histogramCore.ts, locating in the path, so how the compiler figure work which file to refer automatically?

Thanks for your help again!

BTW, it seems like "you cannot re-open your own issues if a repo collaborator closed them" https://stackoverflow.com/questions/21333654/how-to-re-open-an-issue-in-github

[wchargin]

My questions is that: here it import a .js file while there actually is a .ts file, histogramCore.js, locating in the path, so how the compiler figure work which file to refer automatically?

Heh, I take your point. That's a bit confusing.

The practical answer is, "don't worry about it": the build system abstracts over this for you, and everything will continue to Just Work if you follow the patterns that you see in existing files (like the histogram dashboard). But in case you're curious, here's what's going on, as far as I understand it.

You write histogramCore.ts in TypeScript. Then, the ts_web_library rule uses the TypeScript compiler to compile histogramCore.ts into histogramCore.js, which is an ES6 file. In particular, it contains both browser-supported ES6 features (classes, etc.) and ES6 module features (imports, exports). Other files will want to import this compiled JavaScript file, so they use the .js extension instead of the .ts extension. Eventually, the Vulcanizer/closure compiler resolve all the imports and create the final bundle.

(Maybe @jart thinks there is something to add?)

you cannot re-open your own issues if a repo collaborator closed them

Well, that's unfortunate. But you can keep commenting as we're doing now, so I suppose there's no problem with that. Thanks for letting me know :-)

[BinhangYuan]

Hi @wchargin ! Great, thanks for your answer! It is very helpful!