OpenFn / OpenFn/lightning

Inspector: improve code assist UX

Open
#2,627 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

DevX
Dominant language
Elixir
Stars
296
Forks
86
Avg merge
1d 13h
Merged PRs (30d)
50

Description

User story

The UX for code assist in Monaco in the inspector is bad, actually. This issue is a little wishlist of features/improvements that we might get to one day.

Image

  • Typescript Signatures appear at the top of the prompts, but they are not particularly helpful for our users
  • We force ALL common exports into the global namespace so that they appear - but most adaptors do not export all common functions
  • We show JSdoc comments, badly formatted, and with lots of annotations that don't help the user.
  • We should show the first line of description to the right of the suggestion (sometimes it'll show a ts signature there - not useful)
  • It can be kinda hard and fiddly to get docs for the parameters
  • When a function is inserted, we should also insert the opening bracket, so that the code assist is instantly in the right place
  • You can open a small suggestion prompt with ctrl-space. To get the details panel on the right, you have to ctrl + space again. This is annoying and intuitive. I'd like to work out a better way to show some help for this
Notes

Editing the appearance of the code assist is hard. We might have to switch off all default language features and develop our own custom suggestions (I'm worried about what this might mean for stuff like object properties).

The ideal solution would be to take the default suggestions and customise them - removing stuff that isn't @public for example, or updating descriptions.

This might be useful hack to this end:

const x = editor.getContribution('editor.contrib.suggestController')

This gets the suggestion controller component right outta Monaco. You can then inspect it in the debugger and trace through all sorts of interesting things, including a couple of callbacks.

So far I haven't found the exact callbacks I think we need, but I wanted to record the find.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by inspecting Monaco's suggestion controller through editor.getContribution('editor.contrib.suggestController') and compare its behavior with the listed code-assist UX problems. Done means the agreed suggestion presentation, documentation access, insertion behavior, and prompt interaction improvements are implemented and verified.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
developer-experience, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.