Skip to content

Frontend prototype: clickable AST/ASR node navigation#129

Open
amritamishra01 wants to merge 4 commits intolfortran:mainfrom
amritamishra01:feat-interactive-ast-asr
Open

Frontend prototype: clickable AST/ASR node navigation#129
amritamishra01 wants to merge 4 commits intolfortran:mainfrom
amritamishra01:feat-interactive-ast-asr

Conversation

@amritamishra01
Copy link
Contributor

This PR implements a frontend prototype for AST/ASR node → source navigation in the playground.

1.Wrapped selected AST nodes (Declaration, Subroutine) with data-line metadata.

2.Added click handler in ResultBox to extract line numbers.

3.Exposed jumpToLine API from the Editor to enable external navigation.

This currently uses hardcoded line numbers for demonstration. The next step would be integrating real location metadata from the backend serializer.

Closes #17

prototype2.mp4

@ubaidsk
Copy link
Member

ubaidsk commented Feb 24, 2026

@certik I am travelling and would be unable to look into this. Would you be able to take a look, please?

@amritamishra01
Copy link
Contributor Author

amritamishra01 commented Feb 24, 2026

@certik I am travelling and would be unable to look into this. Would you be able to take a look, please?

Hi @ubaidsk, thanks for the note.
@certik and I have been discussing this on Zulip and refining the span-highlighting implementation there. I’ll incorporate the feedback and keep the PR updated.

@amritamishra01
Copy link
Contributor Author

I’ve pushed the latest updates.
Here is a short demo showing full multi-line span highlighting working as expected.

Please let me know if anything else should be refined.

video1.mp4

lfortran_funcs.emit_ast_from_source = function (source_code) {
try { return compiler_funcs.emit_ast_from_source(source_code); }
catch (e) { console.log(e); myPrint(e + "\nERROR: AST could not be generated from the code"); return 0; }
catch (e) { myPrint(e + "\nERROR: AST could not be generated from the code"); return 0; }
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
catch (e) { myPrint(e + "\nERROR: AST could not be generated from the code"); return 0; }
catch (e) { CustomPrint(e + "\nERROR: AST could not be generated from the code"); return 0; }

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

here and elsewhere ^^

return compiler_funcs.emit_wasm_from_source(source_code);
}
catch (e) {
console.log(e);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

let's not remove these.

pages/index.js Outdated
Comment on lines +139 to +155
// Demo 1: Tag "Declaration" covering the integer parameter line (Line 2)
let finalOutput = htmlOutput.replace("Declaration",
`<span
data-start-line="2" data-start-col="5"
data-end-line="2" data-end-col="73"
style="color: #1890ff; cursor: pointer; font-weight: bold; text-decoration: underline;"
>Declaration</span>`
);

// Demo 2: Tag "Subroutine" covering the subroutine definition (Line 9)
finalOutput = finalOutput.replace("Subroutine",
`<span
data-start-line="9" data-start-col="9"
data-end-line="12" data-end-col="23"
style="color: #1890ff; cursor: pointer; font-weight: bold; text-decoration: underline;"
>Subroutine</span>`
);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see the sense of it. finalOutput gets overwritten.

Copy link
Member

@Pranavchiku Pranavchiku left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is solid PR, thank you @amritamishra01! Left a few comments.

@amritamishra01
Copy link
Contributor Author

Hi @Pranavchiku ,
Thanks a lot for the review! I’ve addressed the comments and pushed the updates — please take another look when you get a chance.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

AST/ASR views: allow to click on the node to show position in the code

3 participants