🏠 back to Observable

Feature - row numbered code blocks


#1

Surprised this hasn’t come up to this forum till now.

Take a look at this notebook for example

https://beta.observablehq.com/d/a34c4faedcce7b1a - we know, on which row is an error occurring, but it’s hard to find (unless if you ctrl+f find error text)

Would be a nice and useful addition

P.S. I know how to fix this particular case, but it’s for problem representation


#2

This is an interesting corner. I suspect the reason why line numbering hasn’t come up much is because we built error indications into Observable that show the little red error caret inline, on the correct line and usually also the character position. So with few exceptions, there isn’t the need to track down a line by number.

The thing about line numbers in this case is that they wouldn’t directly point to the error: the GraphQL template tag calculates line numbers versus the template string itself - so if const query = is on the second line, the line numbers it reports will be off by 1. I suspect that the best long term solution (though not the simple one) would be to implement this as a cell type / preprocessor type, so that GraphQL query parsing can happen at a lower level and report line numbers (and, maybe, have fancy syntax highlighting). That way we can provide the same kind of inline & line-level error information as we do for JavaScript syntax errors, and avoid adding a configuration option or another default UI element with line numbers.


#3

In the case, when reported line numbers will be off from 1 , we can do simple math I guess (query start line number + reported line number)

Other alternative would be adding line numbers only, when cell has fired error, and hiding it when cell’s value successfully resolved


#4

I was wondering about that, because I haven’t seen that caret in quite a while. Is it limited to certain types of errors? Perhaps someone could share a notebook and screenshot so that I can try to replicate it on my end?