Suggestion: On code cursor movement, expand + highlight matching AST part

[karlhorky]

First of all, amazing that ESLint Code Explorer exists 🙌 🚀 Any movement in this AST / static analysis tooling area is great to see ❤️ Very useful for rule and plugin authors.

What problem do you want to solve?

Currently, it is finicky to navigate through the AST sections on the right side.

What do you think is the correct solution?

What do you think about adopting the feature from AST explorer (see below) where changing the cursor position in the left pane causes the matching part of the AST in the right pane to be expanded and highlighted?

AST explorer feature video:

Screen.Recording.2024-10-03.at.15.32.14.mov

Participation

• I am willing to submit a pull request for this change.

Additional comments

No response

[nzakas]

I think this is a good idea, and definitely something I've been thinking about. We just didn't want to hold up the release waiting for it.

I'm not sure how difficult it would be to do this. Maybe @amareshsm or @harish-sethuraman have an idea?

[harish-sethuraman]

Yea we can consider implementing this feature but wanted to clarify a few doubts.

• we want the option where we can select on code editor and the right panel shows appropriate node information?
• do we want vice versa as well? where we click on the right panel's node info and the line in code editor is highlighted?
• do we want the option that enables these auto focus?

more of how this works from what I saw on astexplorer

1. when a click is performed on left panel the location of the cursor is marked
2. we manually walk through nodes and find if the node has start and end key in their range
3. if the node is inside this range then we mark the accordion to be open and then we recursively do the same operation until there are no further children

[nzakas]

Yea we can consider implementing this feature but wanted to clarify a few doubts.

* we want the option where we can select on code editor and the right panel shows appropriate node information?

Yes

* do we want vice versa as well? where we click on the right panel's node info and the line in code editor is highlighted?

Yes

* do we want the option that enables these auto focus?

That would require some changes to the design, so I'd say let's leave this off for now and address this as a separate enhancement later if people request to be able to disable this behavior.

[harish-sethuraman]

I'd like to take a shot at this. For this we'd need some improvements on the existing codebase for which I'll be sending PRs.

[nzakas]

@pkerschbaum you did such a good job with the ESQuery stuff, would you like to take a look at this? I think it would go along with that feature nicely.

[pkerschbaum]

Sure, can do, but I would like to have a) regression tests and b) more unified code first.
So I would suggest the following order, what do you think?

1. chore: avoid react linting errors (attempt #2) #85
2. ci: setup checks for update of branch main and for PRs #86
3. setup Storybook Testing (https://storybook.js.org/docs/writing-tests), write tests, run it in CI
4. refactor code to unify things (e.g. the accordions)
5. solve this issue Suggestion: On code cursor movement, expand + highlight matching AST part #64

I could do all that

[nzakas]

This sounds like an excellent plan. 👍

The codebase is in desperate need of refactoring.

[nzakas]

@pkerschbaum just checking in, do you still intend to work on this?

[pkerschbaum]

Yes I do, hope to get some time for this soon 👍

[xbinaryx]

I’ll work on this.