Commit Graph

53 Commits

Author SHA1 Message Date
Stijn ("stain") Seghers
0ed78f99af
Show spinner when opening/creating a project, take #2 (#6827)
* Remove unused code: project management in component browser

* Encapsulate internal FRP logic of project list

* Collapse some code paths

* Open project passed on command line through presenter

A project name or ID that is passed on the command line was initialised
in the controller setup, before the presenters and views are set up.
Now, we fully initialise the IDE before opening a project so we have
control over the view while a project is being opened.

* Show a spinner in all cases of opening a project

* Let root presenter open/close projects when switching projects

* Change spinner to make progress over a fixed period

* Resolve issues when Project Manager API isn't available

* Bump wasm size limit
2023-05-26 18:20:07 +02:00
Paweł Grabarz
4cbd5f45a1
Prevent incorrect application of list widget on incompatible expressions (#6771)
Refactored the logic behind selecting appropriate widgets for span tree nodes. Now the bulk of it is moved into widget methods. When a given widget type is reporting to be not compatible with the expression, it will not be used even if the configuration was overriden using an method argument annotation. In that case, the usual logic for automatically selecting the appropriate widget will kick in.

![image](https://github.com/enso-org/enso/assets/919491/6316e21e-c509-4cc4-a3a6-c482798894d0)
2023-05-24 12:30:40 +00:00
Stijn ("stain") Seghers
8e62ed60e9
Add dashboard button (#6474)
Closes #6399: Adding a button to the top bar in the project view to return to the dashboard.

Note that this just fires a DOM event (see #6399). To test it, you can add an event listener: `document.addEventListener('show-dashboard', console.log)`

https://user-images.githubusercontent.com/607786/235687669-ab04339f-0f07-439a-9cd3-59d96815edaa.mp4
2023-05-23 14:23:23 +00:00
Paweł Grabarz
dcdba8d1ac
Fix list editor panics during insertion (#6540)
# Important Notes
The mouse handling changes involve an unfortunate huge hack, where we enable mouse events on the mouse shape during box selection. That way we know for sure that no other shape will be able to receive mouse enter event. Then the list editor widget is modified to only actually respond to events when its background is hovered. We will definitely want a more proper way to handle mouse event contention, but it's definitely out of scope for current bugfixing.
2023-05-17 18:53:51 +00:00
Paweł Buchowski
10eeed1944
Revert "Show spinner when opening/creating a project (#6321)" (#6712)
This reverts commit 341f1275e0.
2023-05-16 22:53:59 +02:00
Stijn ("stain") Seghers
341f1275e0
Show spinner when opening/creating a project (#6321)
Closes #5505: A spinner with the Enso logo is now shown for most of the duration when opening and creating a project.

https://user-images.githubusercontent.com/607786/234019207-e34096c7-2cb3-4ae3-abd3-291fcaf43084.mp4

# Important Notes
There's still a tiny bit of lag between the end of the spinner and when the nodes pop up, but that seemed less trivial to me to work around.
2023-05-15 14:08:56 +00:00
Stijn ("stain") Seghers
069fcf3928
Show error pop-up when failing to rename a project (#6366)
Closes #5065: when a project can't be renamed, it now shows an error pop-up and stays in edit mode.

https://user-images.githubusercontent.com/607786/234025360-6761f7d6-c13c-479c-a0ba-8af5d81f6e87.mp4
2023-05-08 10:12:26 +00:00
Adam Obuchowicz
d6fa36d793
Finishing Vector Editor (#6470) 2023-05-02 11:24:20 +02:00
Paweł Grabarz
a00efb28f3
Widgets integrated with graph nodes (#6347)
Rewrites node input component. Now the input is composed of multiple widget components arranged in a tree of views with automatic layout. That allows creating complex UI elements on top of the node itself, and further widget positions will be automatically adapted to that. The tree roughly follow the span tree, as it is built by consuming its nodes and eagerly creating widgets from them. The tree is rebuilt every time the expression changes, but that rebuild process reuses as much previously created widgets as possible, and only updates their configuration as needed. Each widget type can have its own configuration options that can be passed to it from the parent, or assigned based on configuration received from the language server.

<img width="773" alt="image" src="https://user-images.githubusercontent.com/919491/233439310-9c39ea88-19bc-43da-9baf-1bb176e2724e.png">

# Important Notes
For now, all span-tree updates are sent over to the shared Frp endpoint of the whole tree, so there is no mechanism for intercepting them by the parent widgets. One idea would be to use existing bubbling/capturing events on widget display objects for that purpose, but I think existing implementation is simpler and more convenient, and we can always easily change that if we have a use for it.

There are some issues with performance due to much more display objects being created on the graph. Expect it to be a little worse, especially at initialization time.
2023-04-26 19:37:54 +00:00
Kaz Wesley
b3e54aeb54
Instance ordering (#6140) 2023-04-04 12:35:00 +02:00
Stijn ("stain") Seghers
0bdf44cba8
Use .node-version for pinning Node.js version (#6057)
Closes #6008: allowing Node.js to be used through Node version managers.
2023-03-23 12:00:08 +00:00
Paweł Buchowski
998d5999a3
Cognito auth 1/2 - extracted electron logic (#5793)
Provides functionality necessary for:
- opening URLs in the system browser (so that we can handle OAuth flows outside of the app)
- handling deep links to the application (so that the OAuth flows can return the user to the app)

### Important Notes

- Modifies `preload.ts` to expose the ability to open the system browser to the sandboxed parts of the app.
- Modifies `election-builder-config.ts` to register a deep link URL protocol scheme with the OS.
- Modifies the client's `index.ts` to register a handler for Electron `open-url` events
2023-03-09 16:02:28 +01:00
Michael Mauderer
38906b39da
Implement Lazy Text Visualisation. (#3910)
Implements [#183453466](https://www.pivotaltracker.com/story/show/183453466).

https://user-images.githubusercontent.com/1428930/203870063-dd9c3941-ce79-4ce9-a772-a2014e900b20.mp4

# Important Notes
* the best laziness is used for `Text` type, which makes use of its internal representation to send data
* any type will first compute its default string representation and then send the content of that lazy to the IDE
* special handling of files and their content will be implemented in the future
* size of the displayed text can be updated dynamically based on best effort information: if the backend does not yet know the full width/height of the text, it can update the IDE at any time and this will be handled gracefully by updating the scrollbar position and sizes.
2023-01-24 20:55:36 +00:00
Ilya Bogdanov
6b8d8e9270
Implement documentation IR (#4024)
[Task link](https://www.pivotaltracker.com/story/show/184012434)

This PR implements Intermediate Representation for our documentation. Later these data structures would be used to generate HTML and CSS for the documentation panel. For now, we display it in the debug scene.


https://user-images.githubusercontent.com/6566674/210674850-480a3e6e-76c3-4f34-a235-15c44dc9ec01.mp4

# Important Notes
- `suggestion-database` now lives in a separate crate
- also, two utility crates were introduced for the `notification` and `executor` modules of enso-gui
- documentation debug scene is moved to a separate crate
- All refactorings are done in the last two commits
2023-01-12 14:50:33 +00:00
Paweł Grabarz
fe1cf9a9ce
Basic dropdown widget integration (#4013)
Implements https://www.pivotaltracker.com/n/projects/2539304/stories/184023445

Added a dropdown widget to graph node for all span tree nodes that have tag values present. When an option is selected, the controller receives a partial expression update, which targets specific crumbs of the expression (similar to how edge endpoint updates work).


https://user-images.githubusercontent.com/919491/210219931-8ae418fd-3ac4-44a5-abea-9e670f15cdf9.mp4

# Important Notes
Right now the dropdown widget is recreated every time the node is edited, including a dropdown option being selected. This causes it to close every time. I wanted to get around that by diffing span trees, but I wasn't able to do it in useful way. Additionally, current implementation of node input expression view heavily relies on being reinitialized from scratch every time. This led to more necessary changes than I was comfortable with for this task. I believe it will be easier to implement it as part of more complete widget support, especially after dynamic data support, as we will have proper widget type information.
2023-01-11 14:32:25 +00:00
Ilya Bogdanov
37af06b14d
Integrate Tailwind framework (#3999)
[Task link](https://www.pivotaltracker.com/story/show/183992025)

This PR moves the documentation visualization into a separate crate and sets up the Tailwind CSS framework for this new crate.

We would use Tailwind to style our HTML documentation.


https://user-images.githubusercontent.com/6566674/208719213-85f78f7e-8dc2-45d5-95a1-db4baad1bda1.mp4
2022-12-23 14:20:24 +00:00
Paweł Grabarz
4042b5b237
Grid-view based dropdown component (#3985)
Implements https://www.pivotaltracker.com/n/projects/2539304/stories/184023380

Dropdown component. Planned to be used in nodes as a single and multiple selection widget, both for static and dynamically loaded values. Initial support is focused on static data, with limited support for dynamic sources. Notably, loading states are not supported yet. Full support for that is planned to be added later with widget lazy-loading.

- Supports single and multiple selections.
- Dedicated API for providing a static list of all entries.
- Range-based query API for dynamically loading data as it is scrolled (only basic support - will need more work for proper async lazy-loading).
- Internal entry cache and query batching to avoid querying data one by one (the batching for now is very basic, will have to be improved for proper lazy-loading).
- Automatic dropdown width adjustment based on the entry label lengths, up to a set max allowed value.
- Open and close animation.
- Keyboard support for focusing and selecting entries.

![image](https://user-images.githubusercontent.com/919491/207866293-de2e3fef-c93b-48cc-8253-11c186d223fd.png)

# Important Notes
Implementing the dropdown on top of grid-view have uncovered some assumptions around grid-view layers. It was assumed to always be a part of the component browser. Removing that assumption required a mechanism for propagating camera update information through layer tree. This is now implemented using a `camera_parent` layer field. Ideally each layer should simply have at most a single parent, and camera inheritance would follow that. That refactor turned out to be quite involved, so right now the simpler temporary solution is introduced in order to not delay this PR further.
2022-12-22 18:19:40 +00:00
Ilya Bogdanov
0e8616e8d7
Demo scene & DocSections in suggestion database (#3980)
[Task link](https://www.pivotaltracker.com/story/show/184000483)
[Task link](https://www.pivotaltracker.com/story/show/184012363)

This PR adds a new `documentation` demo scene that would be used while developing a new documentation panel.

Also, entries in the Suggestion database now store `DocSection`s provided by the engine, and we can mock them for testing purposes using the new `doc_section!` macro.

No changes in the documentation panel were made.


https://user-images.githubusercontent.com/6566674/207567074-5c5682df-a0e8-435c-b393-6f02b2969614.mp4
2022-12-20 11:35:36 +00:00
Galin Bajlekov
b2b60612d7
Numeric slider component enhancement (#3885)
This is an enhancement of the `Slider` component implemented in #3852. It adds the following features:
* Tooltips and precision change hints
* Selectable slider limit behaviors
* Textual slider value editing
* Vertical slider layout

#### Tooltips

An information tooltip can now be added to a slider, it is shown when the mouse hovers over the component. Additionally, a pop-up indicating the slider's precision appears when the slider's precision has been adjusted.

https://user-images.githubusercontent.com/117099775/206148098-3b4dc059-18aa-4200-9ee0-5d4382363810.mp4

#### Slider limits

The previous slider implementation clamped the adjusted value to the slider's minimum/maximum limits. Now the following behaviors are available:
* Hard limits: Clamp the value to a range within the slider's limits.
* Soft limits: The value can extend beyond the slider's limits. When this occurs, an overflow indicator will be displayed on the side of the limit that is exceeded.
* Adaptive limits: The value can extend beyond the slider's limits. When this occurs, the exceeded limit will temporarily be adjusted to double the slider's range. This will be performed iteratively until the value falls within the extended limits. When a limit is extended and the value is adjusted to fit a smaller range, the extended limit will be iteratively halved until only the necessary range is covered. The slider's extended limits will never shrink to a range smaller than the original range.

These behaviors can be set to the lower and upper limits of a slider independently.

https://user-images.githubusercontent.com/117099775/206148139-6149c91d-ef49-4e2d-97f6-71084f52591c.mp4

#### Textual editing

The slider's value can now be entered through a text input field. Double-click to edit the slider's current value. To confirm the edit press `enter`, or press `escape` to cancel the edit. If an invalid value is entered on confirmation the slider will revert to its value before the edit. The slider's precision will be adjusted based on the number of decimal places of the value entered.

https://user-images.githubusercontent.com/117099775/206148170-d3fa4c82-6e73-4b1c-9be9-cb99979f7b70.mp4

#### Vertical layout

The slider component now supports a vertical layout. In this case value adjustment is performed by a vertical mouse movement, and a horizontal movement adjusts the slider's precision. The slider's track now fills the component in a vertical direction, and the slider's label is displayed near the top end of the component.

https://user-images.githubusercontent.com/117099775/206148211-0f176aaf-bc1b-45e2-afd7-0d28391aafcb.mp4

#### Scroll bar mode

The slider component supports two indicator modes:
* `Track`: The component is filled with a colored bar from the lower limit (empty) to the upper limit (full) dependent on the slider's value.
* `Thumb`: The component contains a rounded indicator that moves along the slider from one end to the other, indicating the slider's value proportionally to the slider's limits. The width of the indicator is configurable.
In addition, the value text, text entry, and precision adjustment can be turned off to provide a scroll bar appearance when used with the `Thumb` indicator.

https://user-images.githubusercontent.com/117099775/206148261-ae291073-85e9-4082-9f91-39b65fecdc0f.mp4

#### Example scene shortcuts

The example scene contains two shortcuts in order to evaluate the dynamic addition and removal of the slider components:
* `CTRL+D` drops all the slider components that are added to the scene.
* `CTRL+A` adds a new set of example slider components to the scene.
2022-12-12 08:53:19 +00:00
Ilya Bogdanov
43b79e4569
Skip and Freeze macros in IDE (#3913)
[Task link](https://www.pivotaltracker.com/story/show/180886630).

This PR implements support for adding/removing skip and freeze macros on nodes by clicking on corresponding buttons.

This PR does not touch the parser and engine side, so `skip` and `freeze` macros return syntax errors.

https://user-images.githubusercontent.com/6566674/205052940-440553ae-1761-4452-927d-c3c39620e20a.mp4

# Important Notes
- `skip` and `freeze` macros are not working with the new parser. The code currently produces syntax errors. This would be fixed as a separate task {TBD link}
2022-12-06 14:48:28 +00:00
Ilya Bogdanov
410204a3d9
Update component browser design (#3935)
A continuation and replacement for #3832

This PR updates the design of the component browser to match the latest Figma design file.


<img width="588" alt="Screenshot 2022-12-02 at 16 52 51" src="https://user-images.githubusercontent.com/6566674/205297344-d8d46e68-8c46-4e5a-b7f5-5e23014df23f.png">


https://user-images.githubusercontent.com/6566674/205297307-659c633c-a977-4c9f-9903-db72958895b7.mp4

# Important Notes
- Invalid color of the section navigator highlight is caused by a regression [#183915546](https://www.pivotaltracker.com/story/show/183915546)
2022-12-05 17:43:27 +00:00
Nikita Pekin
bd455ffabd
feat(183557950): Add ProjectsGrid View for Cloud Dashboard (#3857)
This PR is a draft PR while I learn EnsoGL. The eventual goal is to implement the projects list portion of the cloud dashboard in this PR. This PR will implement part of https://www.pivotaltracker.com/n/projects/2539513/stories/183557950

### Important Notes

This PR is still really rough and contains a lot of hacks & hard-coded values. The FRP usage is also likely to be suboptimal and need fixing.
2022-12-04 05:41:56 +01:00
Michał Wawrzyniec Urbańczyk
e31e3ccefb
Bumping JS dependencies (#3901) 2022-11-28 11:31:57 +01:00
Galin Bajlekov
4ae2cb1e2a
Numeric slider component with variable precision (#3852)
This `Slider` component allows adjusting a numeric value with the mouse. The value is increased or decreased by clicking on the component and dragging it to the left or right.

The `Slider` has a configurable default value. `Ctrl`+clicking on the component resets its value to that default. When the value is moved away from the default, the value is printed in **bold**.

The `Slider` precision is increased or decreased by clicking the component and dragging upward or downward. This precision influences how quickly the value changes when the mouse moves horizontally, the steps in which the value is incremented or decremented, and the number of digits used to display the value. There is a margin around the component within which the precision is not changed. Beyond this margin, the precision is increased or decreased in powers of 10 (e.g. `0.1` -> `0.01` -> `0.001` when moving the mouse downwards, or `0.1` -> `1.0` -> `10.0` when moving the mouse upwards). The margin and distance between consecutive steps along the vertical axis are configurable.

The value of the `Slider` is limited to a configurable range, and cannot be adjusted beyond that range. A colored bar fills the component to indicate the current value within the range.

#### Video demonstration

https://user-images.githubusercontent.com/117099775/202244982-2f6f419d-7281-41f6-8607-7e492ad25b46.mp4

#### Future additions
This is the first iteration of the `Slider` component. Additional features are planned for the future:
* Textual editing of the value.
* Improved visual feedback on precision changes.
* Additional out-of-range behaviors.
2022-11-24 15:37:03 +00:00
Paweł Grabarz
94eff1192a
reduce compile time by making output label generation non-generic (#3848)
Split `HasOutputTypeLabel::output_type_label` method implementation non-generic part into a separate function. This significantly reduces compile time without risking any performance regressions. That function is currently only used for debug network visualization using graphviz, but still contributed a significant compilation time.

I've made a single attempt to profile the compiler itself, and it turned out that the compiler spent a significant amount of time trying to resolve `Pattern` implementation for closures in that method. Each of those also had to separately go through codegen and optimization. That happened for each node type in the codebase, per crate. Moving that into separate non-inline function removed all those unnecessary duplicates from. I also took this opportunity to rewrite that small piece of parsing to make it a bit cleaner.

The method of measurement is explained here: https://blog.rust-lang.org/inside-rust/2020/02/25/intro-rustc-self-profile.html
In this specific case, I've used `self-profile` to generate a profile for all crates, then used `crox` and [perfetto](https://ui.perfetto.dev/) to analyze the output.

This also shows a pattern to be aware of - using closures in generic context forces the compiler to make a separate closure type per each instantiation, even if that closure doesn't close on anything and could be a static function. This in effect forces even more instantiations or unnecessary type resolutions for all code paths that touch that closure. Using static functions or separating the non-generic part away in those cases would likely continue to help with compile times and file size.

## Comparison

The measurement was done on same machine under same environment, cleaning the build artifacts inbetween runs.

| | before |  after |
|-|-|-|
|total build time|5m 5.5s|3m 59.0s|
| `ide-view-graph-editor` crate build time| 85.68s | 49.73s |
| `ide-view-component-list-panel-grid` crate build time | 49.88s | 32.07s |
| `ide-view` crate build time | 29.05s | 17.5s |
| `enso_gui.wasm` file size before wasm-opt | 83.6 MB | 80.9 MB |
| `enso_gui.wasm` file size after wasm-opt | 67.3 MB | 65.3 MB |

![image](https://user-images.githubusercontent.com/919491/199633193-64dada16-eb22-4020-8d31-3f24661497aa.png)
2022-11-03 14:43:56 +00:00
Wojciech Daniło
61546a7ade
Wip/wdanilo/widgets 182746060 (#3678) 2022-10-04 04:51:27 +02:00
Ilya Bogdanov
0d74ab6124
Breadcrumbs integration (#3720)
[ci no changelog needed]
[Task link](https://www.pivotaltracker.com/story/show/182675703)

This PR implements the actual integration of the breadcrumbs panel with the component list panel. A special breadcrumbs controller (`controller::searcher::breadcrumbs`) is tracking the currently opened module with a list of its parents. The searcher presenter uses the API of the controller to sync the displayed list of breadcrumbs with the controller state.


https://user-images.githubusercontent.com/6566674/193064122-7d3fc4d6-9148-4ded-a73e-767ac9ac83f8.mp4

# Important Notes
- There is an `All` breadcrumb displayed at all times at the beginning of the list. It will be replaced with a section name as part of [Section Title on Component Browser's Breadcrumbs Panel](https://www.pivotaltracker.com/story/show/182610561) task.
- I changed the implementation of `project::main_module_id`, `project::QualifiedName::main_module`, and `API::main_module` so that they are logically connected which each other.
- I adjusted the Breadcrumbs View to avoid "appearance" animation glitches when opening new modules. `set_entries` was replaced with the `set_entries_from` endpoint.
2022-10-03 10:54:09 +00:00
Michael Mauderer
ff3c481601
Correct import handling when selecting items from the component browser #182634001 (#3708)
Implements [Task #182634001 ](https://www.pivotaltracker.com/story/show/182634001)

Handles adding and removing of imports for the visualization preview of suggestions.


https://user-images.githubusercontent.com/1428930/190930045-fcbd44b7-d3d8-4f20-a178-8542190b86de.mp4

# Important Notes
[ci no changelog needed]
2022-09-23 14:30:51 +00:00
Mateusz Czapliński
7dc971f4bb
GridView auto-scrolling when navigating with keyboard (#3687)
When a GridView is navigated using the keyboard, scroll it to display the newly selected entry.

https://www.pivotaltracker.com/story/show/182593635

#### Visuals

See below for a video demonstrating automatic scrolling of the GridView when arrow keys are pressed on the keyboard. The first video below shows the default scrolling behavior in a GridView without headers.

Note:
- When the Grid View is scrolled, the mouse hover highlight moves away from the mouse position. This is not a new regression, the behavior is the same in the `develop` branch (e.g. when scrolling using the mouse).



https://user-images.githubusercontent.com/273837/190183984-91f7808c-3606-43f8-bcda-ac4d5f84e00f.mov



The video below shows the behavior in a GridView with headers when the GridView is first scrolled to its top-left corner. The following guidance from the Design Doc is enabled and showcased:

> Users can change the selected component by pressing the arrow keys. The Focus does not move up if it does not have to (in most cases, the focus is located in the second row from the bottom). Instead, the component list scrolls down if there are enough entries.

https://user-images.githubusercontent.com/273837/189151546-e50aaf22-6f4d-41cb-809f-60038305745f.mov

The next video shows the behavior in the same GridView as in the previous example when the GridView is first scrolled away from any of its boundary entries. Notably, scrolling happens only when the selection is moved using the keyboard arrow keys, not when changing the selection using the mouse. This behavior is based on a discussion with @wdanilo on Discord.

https://user-images.githubusercontent.com/273837/189151974-d992be93-f61f-4e9f-9f4c-dfe260bbec5b.mov
2022-09-21 17:41:20 +00:00
Adam Obuchowicz
50c8ecc255
Component Browser Entry (#3718)
This PR contains an entry definition for Grid View to be used inside Component List Panel View. The Example grid view with the entry definition may be seen on new_component_list_panel_view debug scene.

https://user-images.githubusercontent.com/3919101/190663278-23c35ab0-f426-4001-8128-df7147aafb9e.mp4

# Important Notes
* The styling is not detailed yet due to time constraints (I want to move to integration this grid view to Component Panel List ASAP) and the fact that I could not get new mplus1 font working with text Area.
* Implementing this required adding a "contour offset" feature to the Grid View.
2022-09-21 14:10:16 +00:00
Michał Wawrzyniec Urbańczyk
10f45d7fd1
macOS Code Signing & Notarization (#3712)
This PR reenables code signing and notarization on macOS.

[ci no changelog needed]

# Important Notes
* electron-builder has been bumped, mostly to avoid missing Python issue. A workaround for a regression with Windows installer is provided as a patch.
2022-09-19 19:02:18 +00:00
Ilya Bogdanov
a771e40002
Component browser breadcrumbs (#3686)
[ci no changelog needed]

[Task link](https://www.pivotaltracker.com/story/show/181445628).

This PR implements a Breadcrumbs panel for the new component browser.
The Breadcrumbs is a horizontal list of text labels separated by a special icon and has an optional ellipsis icon at the end.
It is implemented using the new GridView component.

Video:

Demo of adding new breadcrumbs, scrolling behavior, and selecting breadcrumbs with the mouse.


https://user-images.githubusercontent.com/6566674/189199432-77807cef-00dc-4abe-b95c-b17a536f59f6.mp4

Demo of selecting breadcrumbs with keyboard shortcuts:


https://user-images.githubusercontent.com/6566674/189199603-53e55335-73ba-4ed7-8291-4455144c06aa.mp4

# Important Notes
- This PR implements an old interaction of the design of the component browser. The new design of the breadcrumbs can not be easily integrated into the current look of the component browser, so we would need to update styles later. It should be a relatively simple task. *The implementation uses color from the new design though. (but not fonts and sizes)*
- I found a bug in the grid view implementation that causes panics at runtime in some conditions. The reason is triggering FRP endpoints while constructing new entries. This issue is fixed in the PR.
2022-09-19 09:21:52 +00:00
Michael Mauderer
545e1d7ce9
Show Visualisation Preview when Selecting Item on Searcher (#3691)
Implements [#182634050](https://www.pivotaltracker.com/story/show/182634050).

Enables visualization previews for selections in the searcher.

Works for the old Searcher and the new Component Browser, but it was easier to show the examples for the old searcher, as the suggestions seem to be better/faster available currently (this will improve with the new implementation using better strings and the new GridView).

https://user-images.githubusercontent.com/1428930/188898560-fc4f412a-1529-49f7-9958-28bf5e01c001.mp4

Aborting an edit now also correctly reverts a node.


https://user-images.githubusercontent.com/1428930/188898549-ddd41294-2571-4e2e-b6d5-909cbf71de04.mp4
2022-09-16 16:05:40 +00:00
Dmitry Bushev
de0a231417
IDE uses new visualization API (#3661) 2022-09-01 15:33:46 +03:00
Wojciech Daniło
4b96b4887c
Better fonts support. (#3616) 2022-08-27 00:25:34 +02:00
Adam Obuchowicz
d4142cfee3
Grid View Headers (#3656) 2022-08-24 16:36:23 +02:00
Ilya Bogdanov
8c504bd4b0
Grid View with variable column widths (#3651)
[ci no changelog needed]
[Task link](https://www.pivotaltracker.com/story/show/182955595)

This PR implements variable column widths in the new Grid View component. We need this feature to quickly implement various parts of the UI, including the breadcrumbs panel of the component browser.

There are two ways to change the width of the specific column:
1. "From the outside", using the `set_column_width` endpoint of the Grid View
2. "From the inside", using the `override_column_width` endpoint of the EntryFrp.

Both ways work similarly, but the latter is helpful for our breadcrumbs implementation, as it allows for entry to decide on the width of the column by its content.

See the screencast with three grid views. The top-left one has every even column shrunk by GridView API. Every grid view has a second column extended by EntryFrp API.


https://user-images.githubusercontent.com/6566674/185060985-7b7df076-c659-41fa-977a-22875493f8d4.mp4
2022-08-23 13:28:00 +00:00
Mateusz Czapliński
3c12a8c0a2
Virtual Entries in Component Browser (#3621)
Add "text input" and "number input" virtual entries in the "Input" virtual component group in the Component Browser. The entries provide an easy way to put strings and numbers into a graph.

https://www.pivotaltracker.com/story/show/181870589

#### Visuals

See below for a video showing the "text input" and "number input" virtual entries in the "Input" component group in the "Favorites Data Science Tools" section of the Component Browser. Please note that the video also displays a few known issues that are present in the existing code and not introduced by this PR:

- "Opening the Component Browser 2nd or later time flashes its last contents from the previous time" - reported as [issue 15 in PR 3530](https://github.com/enso-org/enso/pull/3530#pullrequestreview-1035698205) (which is [expected](https://github.com/enso-org/enso/pull/3530#issuecomment-1187676313) to be fixed by https://www.pivotaltracker.com/story/show/182610422).
- The text of all the entries in the Component Browser does not show immediately, but the entries appear one by one instead (this is related to the performance of the current implementation of Component Browser and Text Area).
- Selection in the Component Browser can show half-way between entries - reported as https://www.pivotaltracker.com/story/show/182713338.

https://user-images.githubusercontent.com/273837/183472391-c14eeded-481f-492e-a1b8-b86f42faf0cd.mov

# Important Notes
- The virtual entries are not filtered by input type or return type. The filtering is expected to be implemented in https://www.pivotaltracker.com/story/show/182842444.
2022-08-17 13:28:07 +00:00
Mateusz Czapliński
c6835d2de7
Show custom icons in Component Browser (#3606)
Show custom icons in Component Browser for entries that have a non-empty `Icon` section in their docs with the section's body containing a name of a predefined icon.

https://www.pivotaltracker.com/story/show/182584336

#### Visuals

A screenshot of a couple custom icons in the Component Browser:

<img width="346" alt="Screenshot 2022-07-27 at 15 55 33" src="https://user-images.githubusercontent.com/273837/181265249-d57f861f-8095-4933-9ef6-e62644e11da3.png">

# Important Notes
- The PR assigns icon names to four items in the standard library, but only three of them are shown in the Component Browser because of [a parsing bug in the Engine](https://www.pivotaltracker.com/story/show/182781673).
- Icon names are assigned only to four items in the standard library because only two currently predefined icons match entries in the currently defined Virtual Component Groups. Adjusting the definitions of icons and Virtual Component Groups is covered by [a different task](https://www.pivotaltracker.com/story/show/182584311).
- A bug in the documentation of the Enso protocol message `DocSection` is fixed. A `text` field in the `Tag` interface is renamed to `body` (this is the field name used in Engine).
2022-08-01 13:41:04 +00:00
Adam Obuchowicz
7f8190e663
Grid view selection and hover (#3622)
This PR adds a new variant of selection, where the mouse-hovered entry is highlighted and may be selected by clicking.

In the video below, we have three grid views with slightly different settings:
* In the left-top corner, both hover and selection highlight is just a shape under the label. Such a grid view does not require additional layers (when compared to non-selectable grid view).
* In the left-bottom corner the hover is normal shape, but selection is a _masked layer_ which allows us to have different text color. This setting requires three more layers to render.
* In the right-top corner, both hover and selection are displayed in the masked layer, creating 6 additional layers.

https://user-images.githubusercontent.com/3919101/181514178-f243bfeb-f2dd-4507-adc3-5344ae0579b7.mp4
2022-08-01 10:54:42 +00:00
Dmitry Bushev
0701e762ea
Add Language Server benchmarking tool (#3578) 2022-07-22 14:12:52 +00:00
Ilya Bogdanov
987333e1d3
Component Browser Section Navigator (left bar) (#3553)
[ci no changelog needed]
[Task link](https://www.pivotaltracker.com/story/show/181433641)

This PR adds a left bar with section navigation buttons to the Searcher List Panel. The buttons are implemented as a list view with an adjusted style.

https://user-images.githubusercontent.com/6566674/179517378-dba00f41-d32e-4ffb-a4d9-3cd376b3e781.mp4
2022-07-20 06:35:26 +00:00
Adam Obuchowicz
7fa4e5e369
Grid View with Scrolling (#3588)
**Note**: This PR also contains content of previous Grid View PR. We decided to discard the previous, because this one did some refactoring of old one, and it's not a big addition.

Added a scrollable::GridView component, which just embeds the GridView in ScrollArea. Also, re-worked the idea of text layers.

https://user-images.githubusercontent.com/3919101/179020359-512ee127-c333-4f86-bff5-f1cb4154e03c.mp4
2022-07-19 08:39:23 +00:00
Adam Obuchowicz
b0d627a797
Component list panel integration (#3530)
This PR contains all work for finishing integration of first Component List Panel in the IDE:
* It adds a stub for the whole Component Browser View. The documentation panel is re-used from the old searcher.
* It has the presenter implementation, integrating the view with Hierarchical Component List from the controller.
* It extends the View API, so the integration is possible, making use of Component Group Set wrapper.
* The selection integration was also merged into this PR, because it depended on the API extension mentioned above. However, we should avoid such practice in the future.

https://user-images.githubusercontent.com/3919101/177816427-8c4285b4-8941-4048-a400-52f4acf77a9f.mp4

# Important Notes
There are some known issues, to-be-fixed in the future.
* The performance is bad. It should be improved with new text::Area, and the decent one shall come with [GridView inside component browser](https://www.pivotaltracker.com/story/show/182561072)
* There is no keyboard navigation. It should also be delivered with [GridView](https://www.pivotaltracker.com/story/show/182561072).
* The Favorites section is not [filtered out by node source type](https://www.pivotaltracker.com/story/show/182661634).
2022-07-14 12:00:52 +00:00
Kaz Wesley
bc66078251
Parser: Transpile Rust AST types to Java types (#3555)
Implement generation of Java AST types from the Rust AST type definitions, with support for deserializing in Java syntax trees created in Rust.

### New Libraries

#### `enso-reflect`

Implements a `#[derive(Reflect)]` macro to enable runtime analysis of datatypes. Macro interface includes helper attributes; **the Rust types and the `reflect` attributes applied to them fully determine the Java types** ultimately produced (by `enso-metamodel`). This is the most important API, as it is used in the subject crates (`enso-parser`, and dependencies with types used in the AST). [Module docs](https://github.com/enso-org/enso/blob/wip/kw/parser/ast-transpiler/lib/rust/reflect/macros/src/lib.rs).

#### `enso-metamodel`

Provides data models for data models in Rust/Java/Meta (a highly-abstracted language-independent model--I have referred to it before as the "generic representation", but that was an overloaded term).

The high-level interface consists of operations on data models, and between them. For example, the only operations needed by [the binary that drives datatype transpilation](https://github.com/enso-org/enso/blob/wip/kw/parser/ast-transpiler/lib/rust/parser/generate-java/src/main.rs) are: `rust::to_meta`, `java::from_meta`, `java::transform::optional_to_null`, `java::to_syntax`.

The low-level interface consists of direct usage of the datatypes; this is used by [the module that implements some serialization overrides](https://github.com/enso-org/enso/blob/wip/kw/parser/ast-transpiler/lib/rust/parser/generate-java/src/serialization.rs) (so that the Java interface to `Code` references can produce `String`s on demand based on serialized offset/length pairs). The serialization override mechanism is based on customizing, not replacing, the generated deserialization methods, so as to be as robust as possible to changes in the Rust source or in the transpilation process.

### Important Notes

- Rust/Java serialization is exhaustively tested for structural compatibility. A function [`metamodel::meta::serialization::testcases`](https://github.com/enso-org/enso/blob/wip/kw/parser/ast-transpiler/lib/rust/metamodel/src/meta/serialization.rs) uses `reflect`-derived data to generate serialized representations of ASTs to use as test cases. Its should-accept cases cover every type a tree can contain; it also produces a representative set of should-reject cases. A Rust `#[test]` confirms that these cases are accepted/rejected as expected, and generated Java tests (see Binaries below) check the generated Java deserialization code against the same test cases.
- Deserializing `Code` is untested. The mechanism is in place (in Rust, we serialize only the offset/length of the `Cow`; in Java, during deserialization we obtain a context object holding a buffer for all string data; the accessor generated in Java uses the buffer and the offset/length to return `String`s), but it will be easier to test once we have implemented actually parsing something and instantiating the `Cow`s with source code.
- `#[tagged_enum]` [now supports](https://github.com/enso-org/enso/blob/wip/kw/parser/ast-transpiler/lib/rust/shapely/macros/src/tagged_enum.rs#L36-L51) control over what is done with container-level attributes; they can be applied to the container and variants (default), only to the container, or only to variants.
- Generation of `sealed` classes is supported, but currently disabled by `TARGET_VERSION` in `metamodel::java::syntax` so that tests don't require Java 15 to run. (The same logic is run either way; there is a shallow difference in output.)

### Binaries

The `enso-parser-generate-java` crate defines several binaries:
- `enso-parser-generate-java`: Performs the transpilation; after integration, this will be invoked by the build script.
- `java-tests`: Generates the Java code that tests format deserialization; after integration this command will be invoked by the build script, and its Java output compiled and run during testing.
- `graph-rust`/`graph-meta`/`graph-java`: Produce GraphViz representations of data models in different typesystems; these are for developing and understanding model transformations. 

Until integration, a **script regenerates the Java and runs the format tests: `./tools/parser_generate_java.sh`**. The generated code can be browsed in `target/generated_java`.
2022-07-07 04:46:42 +02:00
Michael Mauderer
e6b7d5b8fc
List Panel View Part 2 (#3537)
Design, integration and bugfix update for the List Panel View.

![image](https://user-images.githubusercontent.com/1428930/175554745-c4887d55-a885-4299-878b-4727f09a7520.png)

![image](https://user-images.githubusercontent.com/1428930/175554906-837db815-948d-4407-8233-10a15e4198b3.png)

![image](https://user-images.githubusercontent.com/1428930/175555165-bcbe5138-8e5c-416e-886b-c72df361d743.png)


[ci no changelog needed]
2022-07-04 14:08:31 +00:00
Michał Wawrzyniec Urbańczyk
43a893cae6
Bump the build script (#3535) 2022-07-01 03:58:14 +02:00
Michael Mauderer
655793aa78
Component List Panel View (#3495) 2022-06-22 16:39:32 +01:00
Ilya Bogdanov
71b3a9f40a
New selection box implementation for component groups (#3520)
[Task link](https://www.pivotaltracker.com/story/show/182194574).
[ci no changelog needed]

This PR implements a new selection box that will replace an old (not really working) one in the component browser. The old selection box wasn't working well with the headers of the component groups, so we were forced to make a much harder implementation.

The new implementation duplicates some visual components and places them in a separate layer. Then, a rectangular mask cuts off everything that is not "selected". This way:
- We have more control over what the selected entries should look like.
- We can easily support the multi-layer structure of the component groups with headers.
- We avoid problems with nested masks that our renderer doesn't support at the moment.

To be more precise, we duplicate the following:
- Background of the component group becomes the "fill" of the selection.
- Entries text and icons - we can alter them easily.
- Header background and header text. By placing them in separate scene layers we ensure correct rendering order.

https://user-images.githubusercontent.com/6566674/173657899-1067f538-4329-44f9-9dc2-78c8a4708b5a.mp4

# Important Notes
- This PR implements the base of our future selection mechanism, selecting entries with a mouse and keyboard still has several issues that will be fixed in the future tasks.
- The scrolling behavior will also be improved in future tasks. Right we only restrict the selection box position so that it never leaves the borders of the component group.
- I added a new function to `add` shapes to new layers in a non-exclusive way (we had only `add_exclusive`) before. I have no idea how we didn't use this feature before even though we mention it a lot in the docs.
- The demo scene restricts the position of the selection box for one-column component groups but does not for the wide component group.
2022-06-15 14:21:30 +00:00
Kaz Wesley
a1bf0974ce
Better release build time; new maximum-performance production profile. (#3498)
### Pull Request Description

Using the new tooling (#3491), I investigated the **performance / compile-time tradeoff** of different codegen options for release mode builds. By scripting the testing procedure, I was able to explore many possible combinations of options, which is important because their interactions (on both application performance and build time) are complex. I found **two candidate profiles** that offer specific advantages over the current `release` settings (`baseline`):
- `thin16`: Supports incremental compiles in 1/3 the time of `baseline` in common cases. Application runs about 2% slower than `baseline`.
- `fat1-O4`: Application performs 13% better than `baseline`. Compile time is almost 3x `baseline`, and non-incremental.  
(See key in first chart for the settings defining these profiles.)

We can build faster or run faster, though not in the same build. Because the effect sizes are large enough to be impactful to developer and user experience, respectively, I think we should consider having it both ways. We could **split the `release` profile** into two profiles to serve different purposes:
- `release`: A profile that supports fast developer iteration, while offering realistic performance.
- `production`: A maximally-optimized profile, for nightly builds and actual releases.

Since `wasm-pack` doesn't currently support custom profiles (rustwasm/wasm-pack#1111), we can't use a Cargo profile for `production`; however, we can implement our own profile by overriding rustc flags.

### Performance details

![perf](https://user-images.githubusercontent.com/1047859/170788530-ab6d7910-5253-4a2b-b432-8bfa0b4735ba.png)

As you can see, `thin16` is slightly slower than `baseline`; `fat1-O4` is dramatically faster.

<details>
  <summary>Methodology (click to show)</summary>

I developed a procedure for benchmarking "whole application" performance, using the new "open project" workflow (which opens the IDE and loads a complex project), and some statistical analysis to account for variance. To gather this data:

Build the application with profiling:
`./run.sh ide build --profiling-level=debug`

Run the `open_project` workflow repeatedly:
`for i in $(seq 0 9); do dist/ide/linux-unpacked/enso --entry-point profile --workflow open_project --save-profile open_project_thin16_${i}.json; done`

For each profile recorded, take the new `total_self_time` output of the `intervals` tool; gather into CSV:
`echo $(for i in $(seq 0 9); do target/rust/debug/intervals < open_project_thin16_${i}.json | tail -n1 | awk '{print $2}'; do`
(Note that the output of intervals should not be considered stable; this command may need modification in the future. Eventually it would be nice to support formatted outputs...)

The data is ready to graph. I used the `boxplot` method of the [seaborn](https://seaborn.pydata.org/index.html) package, in order to show the distribution of data.
</details>

#### Build times
![thin16](https://user-images.githubusercontent.com/1047859/170788539-1578e41b-bc30-4f30-9b71-0b0181322fa5.png)

In the case of changing a file in `enso-prelude`, with the current `baseline` settings rebuilding takes over 3 minutes. With the `thin16` settings, the same rebuild completes in 40 seconds.

(To gather this data on different hardware or in the future, just run the new `bench-build.sh` script for each case to be measured.)
2022-06-11 00:09:54 +02:00