Implement JsonTracer HTML viewer

[dayo09]

What?

As mentioned in workshop 2023, let's find the way to show json trace files formatted in html file.

[ejjeong]

FYI https://github.com/Samsung/ONE-vscode/issues/1183#issuecomment-1229660526 this is the tool that I've mentioned offline :)

[dayo09]

Good it works well, thanks :-D

[dayo09]

How to view HTML in vscode?

• VSCode doesn't have built-in support for HTML preview.
• Microsoft/LivePreview extension supports html preview in vscode.
• [ ] TODO add the extension as a dependency after implementing the feature (?)

[dayo09]

Preview in microsoft/LivePreview

[dayo09]

How to embed?

I found briefly 2 possible ways to achieve our goal. IDK if either of them works yet.

(1) Use trace2html file

npm i traceviewer
./node_modules/traceviewer/tracing/bin/trace2html res/samples/traces/sample.timeline.json

• Not working, python version issue (Missing parentheses in call to 'print')

(2) Vulcanize the viewer

npm i traceviewer
./node_modules/traceviewer/tracing/bin/vulcanize_trace_viewer

• Not working, 'No module named 'py_vulcanize'' issue.

Issue: not enough packages in node_modules/traceviewer

• When I run python program in its original repository, it runs well.

# Printed path and python version
./tracing/bin/trace2html ../ONE-vscode/res/samples/traces/sample.timeline.json                                                              ✔  9161  12:15:22

3.9.12 (main, Apr  5 2022, 06:56:58) 
[GCC 7.5.0]
/home/dayo/git/catapult/tracing/third_party/symbols
/home/dayo/git/catapult/common/py_utils
/home/dayo/git/catapult/third_party/webapp2
/home/dayo/git/catapult/third_party/six
/home/dayo/git/catapult/third_party/Paste
/home/dayo/git/catapult/third_party/WebOb
/home/dayo/git/catapult/third_party/gae_ts_mon/gae_ts_mon/protobuf-3.20.0
/home/dayo/git/catapult/third_party/vinn
/home/dayo/git/catapult/common/py_vulcanize
/home/dayo/git/catapult
/home/dayo/git/catapult/tracing/bin
/home/dayo/anaconda3/lib/python39.zip
/home/dayo/anaconda3/lib/python3.9
/home/dayo/anaconda3/lib/python3.9/lib-dynload
/home/dayo/anaconda3/lib/python3.9/site-packages
/home/dayo/git/catapult/tracing
../ONE-vscode/res/samples/traces/sample.timeline.html

• When I run python program in installed node_modules, it doesn't work.
• It seems that not enough python packages are included in node packages.

# Printed path and python version
./tracing/bin/trace2html /home/dayo/git/ONE-vscode/res/samples/traces/sample.timeline.json 
3.8.16 (default, Mar  2 2023, 03:21:46) 
[GCC 11.2.0]
/home/dayo/git/ONE-vscode/node_modules/traceviewer/third_party/webapp2
/home/dayo/git/ONE-vscode/node_modules/traceviewer/third_party/six
/home/dayo/git/ONE-vscode/node_modules/traceviewer/third_party/Paste
/home/dayo/git/ONE-vscode/node_modules/traceviewer/third_party/WebOb
/home/dayo/git/ONE-vscode/node_modules/traceviewer/third_party/vinn
/home/dayo/git/ONE-vscode/node_modules/traceviewer/third_party/py_vulcanize
/home/dayo/git/ONE-vscode/node_modules/traceviewer
/home/dayo/git/ONE-vscode/node_modules/traceviewer/tracing/bin
/home/dayo/anaconda3/envs/py38/lib/python38.zip
/home/dayo/anaconda3/envs/py38/lib/python3.8
/home/dayo/anaconda3/envs/py38/lib/python3.8/lib-dynload
/home/dayo/.local/lib/python3.8/site-packages
/home/dayo/anaconda3/envs/py38/lib/python3.8/site-packages
/home/dayo/git/ONE-vscode/node_modules/traceviewer/tracing
Traceback (most recent call last):
  File "./tracing/bin/trace2html", line 13, in <module>
    from tracing_build import trace2html
  File "/home/dayo/git/ONE-vscode/node_modules/traceviewer/tracing/tracing_build/trace2html.py", line 22, in <module>
    from py_vulcanize import generate
ModuleNotFoundError: No module named 'py_vulcanize'

[dayo09]

Add catapult as a submodule

Why?

I tried to import only the related catapult directories. It exceeded 3000+ lines changes, as can be seen in this PR

For extensibility, it could be better to import the project as a submodule.

[dayo09]

https://github.com/microsoft/vscode-python-tools-extension-template

Let's investigate how to integrate python files.

• It uses nox to manage python env / dependencies.
• nox installs python libraries into bundle/libs. (I think bundling python libs are required for our project, too)