The metric sqls in webui are not readable

[0xgouda]

The sqls of a specific metric inspected via the webui are very unreadable:

[Mazen050]

Hello @0xgouda , Would syntax highlighting fix this?

[pashagolub]

and a proper alignment might help

[Mazen050]

wouldnt alignment like indents be from the user?

[Mazen050]

looks like I misunderstood what alignment means here. it should be left aligned always.

For the syntax highlighting we would have to add a new dependency. we can use codemirror or something lighter like react-syntax-highlighter but I think since we might be open to adding syntax highlighting to the SQL textarea in the metric form I think we should go for codemirror since react-syntax-highlighter is for read only components and codemirror can work for both. Also something like monaco would be overkill so I didn't consider it.

Please let me know if this choice is agreeable. I won't work on this now tho since I don't want to overwhelm you guys.