Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
1 task
karlhorky opened this issue Oct 3, 2024 · 4 comments
Open
1 task
Labels
enhancement New feature or request

Comments

@karlhorky
Copy link

karlhorky commented Oct 3, 2024

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

@karlhorky karlhorky added the enhancement New feature or request label Oct 3, 2024
@karlhorky karlhorky changed the title Suggestion: On code cursor movement, highlight matching AST part Suggestion: On code cursor movement, expand + highlight matching AST part Oct 3, 2024
@nzakas
Copy link
Member

nzakas commented Oct 3, 2024

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
Copy link
Member

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
Copy link
Member

nzakas commented Oct 4, 2024

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
Copy link
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants