Implementing most parts of the Documentation Panel in the new GUI.
Known issues:
- Links do not work (yet, covered by #7992)
- Some pages are entirely empty – I’m investigating. Missing doc sections likely cause this, so we probably want to add some placeholder.
- Tags do not look as in design. I tried implementing them correctly but didn't have enough time to finish everything. Some initial implementation is in place, though. I will create a separate task for them.
https://github.com/enso-org/enso/assets/6566674/a656ae78-5d4c-45f4-a0a5-e07fa573253e
[vokoscreenNG-2023-10-23_06-35-31.webm](https://github.com/enso-org/enso/assets/1047859/d8a5ffc5-4677-4264-a246-8def4418505a)
- Implement disconnected edges and edge interactions (#7864).
- Port edge layout from Rust.
- Implement output ports, hover extensions, backward-edge arrows, hover-splitting.
# Important Notes
- A new `currentInteraction` API supports mutually-exclusive interactions; this is used to cancel edge creation when the CB is opened. We can use it more generally to ensure only one major interaction is ongoing at a time.
- Remaining details to reach parity with gui1 edges: #8139
- Closes#8062
# Important Notes
- This PR uses a completely separate implementation from the regexes used for the existing filtering. AFAICT, this is unavoidable, since this needs to retrieve matched text.
- I've come across a couple minor bugs related to the Component Browser:
- When deleting text (backspacing), the full list of unfiltered entries momentarily reappear because the filtering is reset.
- Things like `h.m` match `HTTP_Method` - if this is not intentional, it seems like it might be more difficult to fix, unfortunately.
- Note that highlighting (I assume correctly?) *does not* highlight any part of `HTTP_Method`.
- Validate spans during existing lexer and parser unit tests, and in `enso_parser_debug`.
- Fix lost span info causing failures of updated tests.
# Important Notes
- [x] Output of `parse_all_enso_files.sh` is unchanged since before #7881 (modulo libs changes since then).
- When the parser encounters an input with the first line indented, it now creates a sub-block for lines at than indent level, and emits a syntax error (every indented block must have a parent).
- When the parser encounters a number with a base but no digits (e.g. `0x`), it now emits a `Number` with `None` in the digits field rather than a 0-length digits token.
Implements #8025: `LazyObject` now has a `visitChildren` method that observes each direct-child `LazyObject`. `childrenAstNodes` is now a simple function that flattens non-Tree nodes out of the hierarchy; `validateSpans` visits both `Tree`s and `Token`s the same way we would use the `ItemVisitor` Rust API.
- Change imports from `'./'` relative imports to `@/` or `shared/` whenever possible
- Imports in `shared/` and `ydoc-server` have been avoided for now in case they don't work with `@/` imports.
- Deduplicate `events.ts`, remove `useDocumentEvent` in favor of `useEvent(document,` (and same for `useDocumentEventConditional`
- Replace incorrect doc comments (`//*` and `///`) with correct doc comments (`/**`)
# Important Notes
None
- Closes#8041
- Integrates parser with CodeMirror
- Adds extensions builtin to CodeMirror
- Highlight text matching the selection
- Adds PoC CodeMirror extensions
- Basic syntax highlighting
- Code folding
- Hover tooltips
# Important Notes
As there is currently no way to get the corresponding node based on a position, the hover tooltip currently iterates through every node in `graphSotre.nodes`. This is potentially VERY SLOW and should be changed eventually, or disabled completely until an efficient implementation is possible.
SuggestionDb refactoring to facilitate documentation panel development and other features.
Now SuggestionDb uses `ReactiveDb` + `ReactiveIndex`es under the hood. There are no visual changes to the IDE. Everything still works the same.
You can now use two reactive indexes built on top of the SuggestionDb:
1. `db.nameToId` is a `QualifiedName→SuggestionId` relation. Reverse lookup allows you to get the qualified name by ID.
2. `db.parent` is a `SuggestionId→SuggestionId` relation, representing parent-children relations between entries. The rules are the following:
- If the `memberOf` field is present, it is used as a parent.
- Otherwise, a parent’s qualified name is used (through the `qnParent` function)
You can use reverse lookup to get the children of the entry.
You can easily add your own indexes if needed.
- Closes#8015
- Note that the (few) fallback icons are still present, as most CB entries are still missing icons. *However*, now the `iconName` from the libraries take priority over the fallback icon names.
- Also fixes a minor regression, where nodes pending execution were no longer faded out. This was introduced in #7988 because the wrong CSS variable was set.
# Important Notes
None
Fixes#7784
Instead of some heuristic, we now parse the CB's input and get the pattern and qualified name. Also we keep the "context" structure which may be used to apply suggestions properly.
# Important Notes
I created several helpers for AST. One of them is very hacky: we traverse AST tree by reading all getters in JS. Instead, we could generate it basing on schema.
- Removed `Cursor` and moved all accessors to standalone functions, reducing the generated code size significantly (especially after minification).
- Removed unnecessary `seek`s from everywhere. Now the offseting is part of each `read` implementation.
- Removed unnecessary differences between `read`s on abstract and concrete types. Now abstract types do the pointer access internally in their `read`.
- Closes#7925
# Important Notes
The type -> matching visualization lookup is populated using a `Promise`, so there is a race condition where the selector will incorrectly show the full list of visualizations if it is opened before the `Promise` resolves.
Generate TS bindings and lazy deserialization for the parser types.
# Important Notes
- The new API is imported into `ffi.ts`, but not yet used.
- I have tested the generated code in isolation, but cannot commit tests as we are not currently able to load WASM modules when running in `vitest`.
- Depends on #7773.
- Implements binary WebSocket protocol (data protocol)
- Performs some editor initialization (the bare minimum so that visualizations work)
- Adds event handlers to receive visualization data updates
# Important Notes
None
Closes#7823
We set fallback color for components without an assigned group, use a color defined in the group, or otherwise derive the color from the group name.
All group colors are available in the graph editor as CSS variables so that they can be dynamically edited and debugged via dev tools.
For deriving the color, we use [murmurhash](https://www.npmjs.com/package/murmurhash), which quickly produces sufficiently uniformly distributed 32-bit values and [oklch](https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl) colorspace. We will still have *some* hash collisions between different groups, but it shouldn't matter that much. I have also tried a few other hashes (namely `cybr53` and Java's string hashing), and the results were more or less similar.
`oklch` is rather a new thing in CSS, but it is available starting with Chrome 111, which is exactly the version we're using in Electron.
https://github.com/enso-org/enso/assets/6566674/7177f041-93e9-4536-b19f-6b67a2da8b7e
This PR adds support for the new Vue-based GUI (aka `gui2`).
The user-facing changes are primarily:
* support for `./run gui2` and `./run ide2` commands (that build just the new GUI and the whole IDE package with new GUI embedded — respectively);
* the top-level `test` and `lint` commands will now invoke the relevant commands on the new GUI
---------
Co-authored-by: Paweł Grabarz <frizi09@gmail.com>
PR adds initialization of suggestion db from the language sever (instead of fetching some mock). Also support for applying updates.
---------
Co-authored-by: Paweł Grabarz <frizi09@gmail.com>
Added bidirectional synchronization of module edits with language server. All document edits made by any of the Yjs peers are sent to language server to apply to the file. Any local file changes cause reload, which is synchronized back to Yjs by finding a diff.
- Closes#7874
- Chosen solution: Use the dashboard's shortcut manager to register keybinds and match mouse shortcuts
- Switch existing shortcuts to shortcut manager as well
- Switch visualizations to use the shortcut manager too
- Closes#7865
- Implements all shortcuts for node selection, *except* the arrow key shortcut
- Adds circle cursor selection brush
- The fade out from inactivity (which is present in the Rust source code) is currently missing
Other changes:
- Change everything to use `pointerdown` as appropriate, to ensure the event handlers are called in the right order
# Important Notes
The arrow key shortcut to navigate to the nearest node in that direction *has not* been implemented.
This may need discussion on how it should work
The implementation in general is pretty inefficient - this is intentional, performance can be optimized in the future
Because several tasks require execution context, this is a fast PR making one.
# Important Notes
* Changes in languageServer.ts and languageServerTypes.ts were directly ported from #7873
* We display warning about missing namespace, because the dashboard does not provide us any. Needs to be fixed at some point.
My first attempts to work with the `gui2` codebase. When looking at the IDE, I noticed that the top bar seems slightly off. I checked and confirmed that the sizes (heights) of some elements were not matching Figma.
Also, I tried using the `M PLUS 1` font, and it has a _completely_ different baseline than our previous one, effectively shifting all text down. I think we need to start using it as soon as possible, or else we will fix CSS rules everywhere.
I understand that the way I added the font is not the correct one, but I guess we can live with that until we properly include the files to the package.
Please forgive me, gods of Vue.js, @Frizi and @somebody1234, for this murder.
Before:
<img width="405" alt="Screenshot 2023-09-13 at 12 19 18 AM" src="https://github.com/enso-org/enso/assets/6566674/8ca81db8-1719-4761-97a1-741c2f76b45d">
After:
<img width="480" alt="Screenshot 2023-09-19 at 8 01 18 PM" src="https://github.com/enso-org/enso/assets/6566674/eb9783d3-0a34-4f1e-8afd-2f06a1b6db4f">
Dropdown animation:
https://github.com/enso-org/enso/assets/6566674/bab6baa9-23e3-4c2d-8494-1d464ba6902b
- Closes#7733
- Add infrastructure for defining custom visualizations
- Add all visualizations
# Important Notes
⚠️ Changes made:
- "Fit all" has been changed to always animate - this is because behavior was previously inconsistent:
- the scatterplot would always animate on "Fit all", but
- the histogram would never animate on "Fit all"
# Important Notes
- Binary LS endpoint is not yet handled.
- The parsing of provided source is not entirely correct, as each line (including imports) is treated as node. The usage of actual enso AST for nodes is not yet implemented.
- Modifications to the graph state are not yet synchronized back to the language server.
Fixes#7737
Added structures representing Suggestion Database entries. Currently, the db is loaded from a snapshot from the old GUI.
Added an input to CB and use it to filter components. The interpretation is simple: the input is split by the last dot, and the left part is considered a qualified name, and the right part is a function name written by the user so far. I rewrote the filtering algorithm designed by @jdunkerley, changing it a bit, so we support qualified names instead of just a type name.
https://github.com/enso-org/enso/assets/3919101/76a957f6-e53f-49ad-996c-398cd7112fc6
# Important Notes
* The component list is now sorted from "first to select" to "least interesting". The panel itself cares about putting the first on the bottom.
* The suggestion db snapshot is very big, so it's instead loaded from external server.
Adds widgets:
- Checkbox (with sorting)
- Numeric slider
- Dropdown (accepting a list of strings)
- Closes#7731
- Placeholder (underscore - has no actions)
# Important Notes
The widgets are currently added to every node, but are not synced with the yjs representation. This is intentional, as (afaict) the format for the AST representation is not yet finalized.
There are a number of design differences, for practical reasons:
- The dropdown now has a scrollbar.
- As a side effect, the sort button needed to be moved left, to avoid overlapping with the scrollbar.
- Note that it is *not* centered in the 8px horizontal padding. It is 4px wide, and has 1px left and 3px right padding: `.||||...`. (Note that the 8px horizontal padding from the design is retained.
- 4px of vertical padding has been inserted, so that there is *some* padding between the bubble for the selected item, and the outer dropdown container, when the first item is selected. Note that this is different to the 8px
- 16px of right margin has been inserted after every item. This is the same amount of padding that is added by the bubble. This means that the dropdown does not change in width when a long item is selected.
Design issues:
- The sort button for the dropdown overlaps the text
Updated the Component Browser stub from @Frizi's branch. Filled with some mocked data and implemented highlight and navigation.
https://github.com/enso-org/enso/assets/3919101/6af57413-bcb6-4402-9a4a-a992d58504ba
# Important Notes
Still missing the input panel, and obviously, the integration with anything will be a part of another task.
- Closes#7730. Adds top bar containing:
- Project title
- Execution mode selector (design/live)
- Navbar containing:
- Navigation previous/next button
- Breadcrumbs
# Important Notes
Icons are currently all separate files. This may need to be changed to a single svg containing individual icons in `defs` if(/when) that is merged into `develop`.
