Request for Error Annotations

[tbuenger]

I'm using your awesome code editor for an interactive SQL browser. In case of query errors I get back from the server, I'd love to highlight them in the editor (in the side bar with an icon, and a tooltip with the error message).

How could I achieve that?

[bouzidanas]

Interesting application. I think there might be a way to do it but I have to look into it. The underlying Ace Editor has an error display system but it might not be accessible via the code editor function arguments in Streamlit. If this is the case, then I would have to add the ability to the custom component.

[nchammas]

Looking at the notes here (referenced in the docs for this component), it looks like there is an annotations property for this purpose:

annotations to show in the editor i.e. [{ row: 0, column: 2, type: 'error', text: 'Some error.'}], displayed in the gutter

Just for reference, I tried passing this in to the existing editor_props parameter but it didn't work.

code_editor(
    ...
    editor_props={
        "annotations": [
            {
                "row": 1,
                "column": 11,
                "text": "Use '-' instead of '+'",
                "type": "error",  # Can be 'error', 'warning', or 'info'
            },
        ],
        "showGutter": True,
    },
)

[bouzidanas]

Thanks for responding @nchammas. It has reminded me to look into this. Your suggestion is very close. If you provide the annotations to the props argument instead of editor_props, it will work!