microsoft/typescript-analyze-trace

Support JSON output

Ikaer opened this issue · 4 comments

Ikaer commented

Hi!

First, thanks for this tool !
I've tried to use it on a very big project to find hot spots.
Here is an example of output:

Hot Spots
├─ Check file �[35md:\workspaces\xlefebvre\customer\royal\middleoffice\sparkowstudio\src\js\abtestingtabs\�[36mabtestdashboard.ts�[39m�[35m�[39m (2316ms)
│  └─ Check variable declaration from (line 164, char 11) to (line 164, char 51) (1909ms)
│     └─ Check expression from (line 164, char 21) to (line 164, char 51) (1909ms)
│        └─ Determine variance of type 13937 (1908ms)
│           ├─ Compare types 20107 and 20106 (1074ms)
│           │  └─ Compare types 20191 and 20190 (1064ms)
│           │     └─ Compare types 20197 and 20198 (1064ms)
│           │        └─ Determine variance of type 20192 (1064ms)
│           │           └─ Compare types 20200 and 20199 (1048ms)
│           │              └─ Compare types 20203 and 20202 (1048ms)
│           │                 └─ Compare types 20214 and 20213 (1047ms)
│           │                    └─ Determine variance of type 20208 (1046ms)
│           │                       └─ Compare types 24092 and 24091 (748ms)
│           │                          └─ Compare types 24290 and 24289 (708ms)
│           │                             └─ Check expression from (line 177, char 2) to (line 177, char 2) (708ms)
│           │                                └─ Determine variance of type 14841 (706ms)
│           │                                   └─ {"id":14841,"kind":"GenericType","name":"ButtonProperties","typeArguments":[14842,14843,14844,14845,14846,14847,14848,14849,14850,14851],"location":{"path":"�[35md:\workspaces\xlefebvre\customer\royal\middleoffice\sparkowstudio\src\js\components\elements\�[36mbutton.ts�[39m�[35m�[39m","line":20,"char":1}}
│           │                                      ├─ {"id":14842,"kind":"TypeParameter","name":"K","location":{"path":"�[35md:\workspaces\xlefebvre\customer\royal\middleoffice\sparkowstudio\src\js\components\elements\�[36mbutton.ts�[39m�[35m�[39m","line":20,"char":35}}
│           │                                      ├─ {"id":14843,"kind":"TypeParameter","name":"S","location":{"path":"�[35md:\workspaces\xlefebvre\customer\royal\middleoffice\sparkowstudio\src\js\components\elements\�[36mbutton.ts�[39m�[35m�[39m","line":20,"char":48}}
│           │                                      ├─ {"id":14844,"kind":"TypeParameter","name":"KText","location":{"path":"�[35md:\workspaces\xlefebvre\customer\royal\middleoffice\sparkowstudio\src\js\components\elements\�[36mbutton.ts�[39m�[35m�[39m","line":20,"char":61}}
│           │                                      ├─ {"id":14845,"kind":"TypeParameter","name":"SText","location":{"path":"�[35md:\workspaces\xlefebvre\customer\royal\middleoffice\sparkowstudio\src\js\components\elements\�[36mbutton.ts�[39m�[35m�[39m","line":20,"char":78}}
│           │                                      ├─ {"id":14846,"kind":"TypeParameter","name":"KIcon","location":{"path":"�[35md:\workspaces\xlefebvre\customer\royal\middleoffice\sparkowstudio\src\js\components\elements\�[36mbutton.ts�[39m�[35m�[39m","line":20,"char":95}}
│           │                                      ├─ {"id":14847,"kind":"TypeParameter","name":"SIcon","location":{"path":"�[35md:\workspaces\xlefebvre\customer\royal\middleoffice\sparkowstudio\src\js\components\elements\�[36mbutton.ts�[39m�[35m�[39m","line":20,"char":112}}
│           │                                      ├─ {"id":14848,"kind":"TypeParameter","name":"KImage","location":{"path":"�[35md:\workspaces\xlefebvre\customer\royal\middleoffice\sparkowstudio\src\js\components\elements\�[36mbutton.ts�[39m�[35m�[39m","line":20,"char":129}}
│           │                                      ├─ {"id":14849,"kind":"TypeParameter","name":"SImage","location":{"path":"�[35md:\workspaces\xlefebvre\customer\royal\middleoffice\sparkowstudio\src\js\components\elements\�[36mbutton.ts�[39m�[35m�[39m","line":20,"char":147}}
│           │                                      ├─ {"id":14850,"kind":"TypeParameter","name":"KAnimated","location":{"path":"�[35md:\workspaces\xlefebvre\customer\royal\middleoffice\sparkowstudio\src\js\components\elements\�[36mbutton.ts�[39m�[35m�[39m","line":20,"char":165}}
│           │                                      └─ {"id":14851,"kind":"TypeParameter","name":"SAnimated","location":{"path":"�[35md:\workspaces\xlefebvre\customer\royal\middleoffice\sparkowstudio\src\js\components\elements\�[36mbutton.ts�[39m�[35m�[39m","line":20,"char":186}}
│           └─ Compare types 35048 and 35047 (834ms)
│              └─ Compare types 35074 and 35073 (650ms)
│                 └─ Compare types 35077 and 35076 (650ms)
│                    └─ Compare types 35080 and 35079 (649ms)
│                       └─ Determine variance of type 14166 (648ms)
│                          └─ Compare types 35101 and 35100 (556ms)
│                             └─ Compare types 35132 and 35131 (546ms)
│                                └─ Compare types 35136 and 35134 (546ms)
│                                   └─ Compare types 35135 and 35133 (546ms)
│                                      └─ Compare types 35107 and 35102 (545ms)
│                                         └─ Determine variance of type 35081 (545ms)
│                                            └─ Compare types 36320 and 36319 (421ms)
│                                               └─ Compare types 36360 and 36356 (408ms)
│                                                  └─ Compare types 36357 and 36353 (295ms)
│                                                     └─ Determine variance of type 35199 (295ms)
│                                                        └─ Compare types 36397 and 36396 (225ms)
│                                                           └─ Compare types 36422 and 36421 (221ms)
│                                                              └─ Compare types 36435 and 36433 (220ms)
│                                                                 └─ Compare types 36434 and 36432 (220ms)
│                                                                    └─ Compare types 36407 and 36400 (218ms)
│                                                                       └─ Determine variance of type 36375 (218ms)
│                                                                          └─ {"id":36375,"kind":"GenericType","name":"HeaderProperties","typeArguments":[36376,36377,36378,36379,36380,36381,36382,36383,36384,36385],"location":{"path":"�[35md:\workspaces\xlefebvre\customer\royal\middleoffice\sparkowstudio\src\js\components\elements\�[36mheader.ts�[39m�[35m�[39m","line":20,"char":1}}
│                                                                             ├─ {"id":36376,"kind":"TypeParameter","name":"K","location":{"path":"�[35md:\workspaces\xlefebvre\customer\royal\middleoffice\sparkowstudio\src\js\components\elements\�[36mheader.ts�[39m�[35m�[39m","line":20,"char":35}}
│                                                                             ├─ {"id":36377,"kind":"TypeParameter","name":"S","location":{"path":"�[35md:\workspaces\xlefebvre\customer\royal\middleoffice\sparkowstudio\src\js\components\elements\�[36mheader.ts�[39m�[35m�[39m","line":20,"char":43}}
│                                                                             ├─ {"id":36378,"kind":"TypeParameter","name":"KSubHeader","location":{"path":"�[35md:\workspaces\xlefebvre\customer\royal\middleoffice\sparkowstudio\src\js\components\elements\�[36mheader.ts�[39m�[35m�[39m","line":20,"char":51}}
│                                                                             ├─ {"id":36379,"kind":"TypeParameter","name":"SSubHeader","location":{"path":"�[35md:\workspaces\xlefebvre\customer\royal\middleoffice\sparkowstudio\src\js\components\elements\�[36mheader.ts�[39m�[35m�[39m","line":20,"char":68}}
│                                                                             ├─ {"id":36380,"kind":"TypeParameter","name":"KIcon","location":{"path":"�[35md:\workspaces\xlefebvre\customer\royal\middleoffice\sparkowstudio\src\js\components\elements\�[36mheader.ts�[39m�[35m�[39m","line":20,"char":85}}
│                                                                             ├─ {"id":36381,"kind":"TypeParameter","name":"SIcon","location":{"path":"�[35md:\workspaces\xlefebvre\customer\royal\middleoffice\sparkowstudio\src\js\components\elements\�[36mheader.ts�[39m�[35m�[39m","line":20,"char":97}}
│                                                                             ├─ {"id":36382,"kind":"TypeParameter","name":"KImage","location":{"path":"�[35md:\workspaces\xlefebvre\customer\royal\middleoffice\sparkowstudio\src\js\components\elements\�[36mheader.ts�[39m�[35m�[39m","line":20,"char":109}}
│                                                                             ├─ {"id":36383,"kind":"TypeParameter","name":"SImage","location":{"path":"�[35md:\workspaces\xlefebvre\customer\royal\middleoffice\sparkowstudio\src\js\components\elements\�[36mheader.ts�[39m�[35m�[39m","line":20,"char":122}}
│                                                                             ├─ {"id":36384,"kind":"TypeParameter","name":"KText","location":{"path":"�[35md:\workspaces\xlefebvre\customer\royal\middleoffice\sparkowstudio\src\js\components\elements\�[36mheader.ts�[39m�[35m�[39m","line":20,"char":135}}
│                                                                             └─ {"id":36385,"kind":"TypeParameter","name":"SText","location":{"path":"�[35md:\workspaces\xlefebvre\customer\royal\middleoffice\sparkowstudio\src\js\components\elements\�[36mheader.ts�[39m�[35m�[39m","line":20,"char":147}}

To find the types in question, i'm using the command simplify-trace-types and search for type ids in generated file. But it's can of tedious to go back and forth between the two files.
Would it be possible to have an option for analyze-trace to inline type names ? and another maybe for their location ? (like it's already done for the leafs of the output).

Maybe something like this:
image

@Ikaer I wanted to do something like that, but I didn't get very far because a large percentage of types don't have names and the tree would be impossible to read if (e.g.) unions were expanded everywhere.

The real solution is to make the tree interactive, so that types can be expanded and/or previewed on-demand, but we haven't invested in that yet because it seemed like it made more sense to determine what was needed for analysis before locking in a UI. (Also, full disclosure, I'm bad at making UIs 😆.)

As an interim solution, it might be possible to print out a name for each type that has one (though, again, they tend to be the minority). I'll give that some thought.

Bonus tip: If you're planning to consume the output somewhere other than the console, you can use --no-color to get rid of the color region delimiters.

Ikaer commented

Thanks for the bonus tip!

Yeah. an UI would be great, but without getting too far, juste generate an HTML file for example with some inlined CSS and some javascript to make the treeview expandable would do the job.

Otherwise could we imagine having a parameter for analyze-trace to output JSON instead of plain text ? with both this json and the output of simplify-trace-types, it would be enough for me to make a batch to add the information I'm looking for.

I like it! How about I retitle this issue to "Support JSON output"?

Ikaer commented

that sounds good to me!