Commit Graph

333 Commits

Author SHA1 Message Date
Ilya Bogdanov
cec115d25b
Snap CB position to pixel boundary (#8095)
* Snap CB position to pixel boundary

* Apply review comments
2023-10-18 14:33:45 +02:00
somebody1234
1fd3a037ad
Avoid relative imports whenever possible (#8074)
- 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
2023-10-16 15:56:24 +00:00
somebody1234
209f4deb3e
CodeMirror highlighting (#8075)
- 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.
2023-10-16 14:04:43 +00:00
Ilya Bogdanov
67bcf6ae07
ReactiveDb and ReactiveIndex (#8052)
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.
2023-10-16 13:35:16 +00:00
somebody1234
79d8354848
Fixed node icons and colors, derived from suggestions DB groups (#8031)
- 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
2023-10-13 00:54:06 +00:00
Adam Obuchowicz
0783618276
Interpreting CB input using AST. (#8022)
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.
2023-10-12 14:00:48 +00:00
Paweł Grabarz
bf76be6e6b
[GUI2] use DataView directly in generated parser code (#8028)
- 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`.
2023-10-11 21:28:29 +00:00
somebody1234
62019f6334
Filter visualization types based on node type (#8004)
- 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.
2023-10-11 15:27:03 +00:00
somebody1234
b64a7d392f
Node icons and colors (#7988)
Adds node icons and colors.

# Important Notes
None
2023-10-11 13:25:38 +00:00
Kaz Wesley
9fd1ab9092
Parser TS bindings (#7881)
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`.
2023-10-11 13:04:38 +00:00
somebody1234
8125200571
Read groups from LS (#7986)
- Closes #7928

# Important Notes
Instead of omitting color, a fallback color is generated using `colorFromString`.
2023-10-09 07:10:21 +00:00
Michael Mauderer
10a95e43d6
Add functionality to handle Expression Updates to GUI2 (#7982)
Implements #7783. Adds functionality to handle and store expression updates, as well as show the output type of node.



https://github.com/enso-org/enso/assets/1428930/31ffff78-ff2c-4e0b-bcde-ddc507cc0226
2023-10-09 05:55:12 +00:00
somebody1234
44f2f425c0
[gui2] Language Server binary protocol, and loading of visualization data (#7873)
- 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
2023-10-07 20:57:47 +00:00
Ilya Bogdanov
2cd3912402
Add automatic generation of missing group colors (#7902)
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
2023-10-04 11:24:10 +00:00
Paweł Grabarz
ad0c1bc188
[GUI2] Fix and add tests for delta format translation. (#7968)
Fixes #7967

The text updates should no longer be rejected after applying edits containing newlines. The tricky update translation logic was also covered with property-based unit tests.

https://github.com/enso-org/enso/assets/919491/0bfb6181-7244-4eff-8d72-5b1a4630b9a6
2023-10-04 10:53:54 +00:00
somebody1234
0228022809
Fix lint error when running compile-server (#7969) 2023-10-04 05:11:17 +02:00
somebody1234
7e7b0f8c43
Hotfix code editor focus (#7965)
This fixes not being able to click the code editor.
This is a regression introduced by:
- #7893

# Important Notes
None
2023-10-03 20:56:40 +00:00
Michał Wawrzyniec Urbańczyk
2d39e644b8
New GUI/IDE build script support (#7832)
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>
2023-10-03 20:07:20 +02:00
Michał Wawrzyniec Urbańczyk
8d8c0b62d6
Disable broken lints (#7961) 2023-10-03 19:30:24 +02:00
Adam Obuchowicz
608ff2da09
Loading suggestion db (#7940)
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>
2023-10-02 15:15:22 +02:00
Paweł Grabarz
af050f522b
[GUI2] Module contents editing and synchronization (#7938)
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.
2023-10-02 12:01:03 +00:00
somebody1234
b59e7c088e
[gui2] Shortcut manager + shortcuts for selecting nodes (#7893)
- 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
2023-10-02 09:03:47 +00:00
Adam Obuchowicz
cf16d32894
Create execution context on GUI2 start (#7894)
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.
2023-09-27 15:33:41 +00:00
Ilya Bogdanov
fbfaeb5530
Minor changes to the top bar styles (#7802)
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
2023-09-26 11:17:51 +00:00
Michael Mauderer
f8c4f9ec32
Add CodeEditor component to GUI2 (#7806)
Adds a new code editor to the new GUI prototype.


[Peek 2023-09-25 12-12.webm](https://github.com/enso-org/enso/assets/1428930/58a926de-1042-4f2b-8e2c-29da953816b0)

# Important Notes
Not yet hooked up to any integration.
2023-09-26 10:22:15 +00:00
somebody1234
0a70f2edf5
Vue visualizations (#7773)
- 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"
2023-09-26 08:14:56 +00:00
Paweł Grabarz
42a7cb2d23
[Gui2] Opening projects and language server connection (#7813)
# 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.
2023-09-22 03:43:25 +00:00
Adam Obuchowicz
c78291a153
Fitering entries in Vue IDE + suggestion database mock (#7804)
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.
2023-09-20 09:16:18 +00:00
somebody1234
e875781e29
Vue widgets (#7728)
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
2023-09-13 10:06:24 +00:00
Adam Obuchowicz
3c00cb400e
First iteration of Component Browser Panel in Vue (#7718)
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.
2023-09-08 09:57:02 +00:00
somebody1234
5ab74b5218
Vue project title, execution mode selector, and breadcrumbs (#7726)
- 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`.
2023-09-07 15:02:55 +00:00
Paweł Grabarz
9b0f551881
Gui2: integrate rust Enso parser (#7753) 2023-09-07 12:54:01 +00:00
Paweł Grabarz
82f634b7f8
Add Vue gui project (#7696)
Add a separate `gui2` project with Vue application. Does not modify any existing project files.

![image](https://github.com/enso-org/enso/assets/919491/c7a83521-bf83-4c6a-8d17-91c5eab1f827)

# Important Notes
Currently not integrated with existing build and testing system.
2023-09-04 22:27:33 +00:00