Skip to content

Commit cd87e77

Browse files
hcourdenthcourdent
authored
Doc eval & schedule error handler (windmill-labs#285)
* Doc eval & schedule error handler * putting forward Schedule error handler
1 parent 1f94232 commit cd87e77

27 files changed

+108
-64
lines changed

‎docs/apps/0_app_editor/index.mdx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -112,10 +112,10 @@ On the left panel of the editor, you can see the list of outputs of the app. The
112112

113113
You can perform the following actions with the outputs:
114114

115-
- Search for an output
116-
- Edit the output's ID
117-
- Select a component to view its outputs
118-
- Connect an input to an output
115+
- Search for an output.
116+
- Edit the output's ID.
117+
- Select a component to view its outputs.
118+
- [Connect an input to an output](../2_outputs.md#connecting-inputs).
119119

120120
#### Learn more
121121

‎docs/apps/2_outputs.md

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ A background runnable is a script or flow that runs in the background and can be
6565

6666
### Connecting inputs
6767

68-
Inputs can be connected to any outputs. When connecting, you can click on the output to connect the input to the output. Note that you can select nested outputs, objects and arrays.
68+
Inputs can be connected to any outputs. When connecting, you can click on the output to connect the input to it. The data source will change to [eval](./3_app-runnable-panel.mdx#evals). Note that you can select nested outputs, objects and arrays.
6969

7070
<video
7171
className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
@@ -75,15 +75,17 @@ Inputs can be connected to any outputs. When connecting, you can click on the ou
7575
src="/videos/app-connections.mp4"
7676
/>
7777

78+
<br/>
79+
7880
Here are the steps to connect an input to an output:
7981

80-
- Click on the component input you want to connect to an output
81-
- Click the right arrow to open the connection menu
82-
- You can now navigate you app, without running any scripts
83-
- When you hover a component, the corresponding outputs are highlighted in orange
84-
- If you click on a component, the output will be pinned and stays open
85-
- You can now click on the output you want to connect to the input
86-
- The input is now connected to the output
82+
- Click on the component input you want to connect to an output.
83+
- Click the right arrow to open the connection menu.
84+
- You can navigate you app, without running any scripts.
85+
- When you hover a component, the corresponding outputs are highlighted in orange.
86+
- If you click on a component, the output will be pinned and stays open.
87+
- You can now click on the output you want to connect to the input.
88+
- The input is now connected to the output through an eval.
8789

8890
### Editing the id of a component
8991

‎docs/apps/3_app-runnable-panel.mdx

Lines changed: 40 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Runnable Guide
22

3+
Windmill Apps can be powered by code, with scripts linked to components, background runnables that are not linked to a component but run in the background, frontend scripts that can be used to manipulate the client app state, and evals.
4+
35
## Overview
46

57
On the bottom of the app editor, you can find the runnable editor. It allows you to create, edit, or manage the scripts or flows linked to components (runnables) and background runnables.
@@ -15,36 +17,23 @@ When a runnable is selected, the runnable editor is displayed. It is composed of
1517

1618
- **Header**: The header of the runnable editor. It contains:
1719

18-
- An editable name
20+
- An editable name.
1921
- The status of the runnable can either be valid, invalid depending on the LSP response.
20-
- A delete button
22+
- A delete button.
2123
- A format button: Formats the code of the runnable. It's also triggered when you save the runnable.
2224
- A run button: Runs the runnable.
2325

2426
- **Runnable editor**: The code editor of the runnable.
2527

26-
:::tip Auto-complete code with AI
27-
28-
Note that you can have [AI suggest code on Windmill](../code_editor/ai_generation.md):
29-
30-
<br />
31-
32-
<video
33-
className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
34-
controls
35-
src="/videos/codeium_example.mp4"
36-
/>
37-
38-
:::
39-
4028
## Types of runnables
4129

42-
There are 4 types of runnables:
30+
There are 5 types of runnables:
4331

44-
- Inline scripts: Scripts that are defined on the app editor, linked to a component.
45-
- Workspace/Hub: Runnables (scripts; flows) linked to a component, but defined in the workspace or the Hub.
46-
- Background runnables: Runnables that are not linked to a component, but run in the background.
47-
- Frontend scripts: Scripts that can be used to manipulate the client app state. They can either be linked to a component or be a background runnable. If they are a background runnable, they are not executed unless manually set to run when the app starts or reloads.
32+
- **Inline scripts**: Scripts that are defined on the app editor, linked to a component.
33+
- **Workspace/Hub**: Runnables (scripts; flows) linked to a component, but defined in the workspace or the Hub.
34+
- **Background runnables**: Runnables that are not linked to a component, but run in the background.
35+
- **Frontend scripts**: Scripts that can be used to manipulate the client app state. They can either be linked to a component or be a background runnable. If they are a background runnable, they are not executed unless manually set to run when the app starts or reloads.
36+
- **Evals**: Evals are used to connect data sources to other components or parameters. They are only evaluated on changes to the outputs that have been identified.
4837

4938
They provide interactivity to your app.
5039

@@ -57,6 +46,36 @@ They can be either attached to a component or detached.
5746

5847
Background runnables are scripts that are executed in the background. They are not attached to any component.
5948

49+
## Evals
50+
51+
Evals are used to [connect data sources](./2_outputs.md#connecting-inputs) to other components or parameters.
52+
53+
<video
54+
className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
55+
autoPlay
56+
loop
57+
controls
58+
src="/videos/app-connections.mp4"
59+
/>
60+
<br/>
61+
62+
Windmill parses your eval and frontend scripts using the swc parser compiled to wasm to extract any references to outputs.
63+
It allows Windmill to suggest dependencies for frontend scripts.
64+
65+
<video
66+
className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
67+
controls
68+
src="/videos/eval_1.mp4"
69+
/>
70+
71+
<br/>
72+
73+
Evals are only evaluated on changes to the outputs that have been identified.
74+
75+
Clicking on the dedicated link, evals can be "transformed to a frontend script".
76+
77+
![App Runnables panel](../assets/apps/0_app_editor/eval_to_frontend.png)
78+
6079
## Creating a runnable
6180

6281
There are several ways to create runnables:

‎docs/apps/4_app_configuration-settings/1_app_component_library.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ The app components library is located on the right-hand side of the app editor.
66

77
Components can be configured in two ways:
88

9-
- **Inputs**: inputs can be connected to an output or computed using a runnable.
9+
- **Inputs**: inputs can be [connected to an output](../2_outputs.md#connecting-inputs) or computed using a runnable.
1010

1111
- e.g. `Table` component has an input that can be connected to an output or computed using a runnable, which is an array of objects.
1212
<br/>

‎docs/apps/4_app_configuration-settings/2_app_runnable_triggers.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ Two types of runnables can be configured to recompute on any input change:
6060
- **Backend background runnables**: Background runnable that are executed on the server.
6161
- **Component runnables used as data sources**: Runnables attached to a component and used as the component's data source.
6262

63-
Inputs of runnables that are either connected to an output or evaluated can trigger a recompute. These are displayed in the `Change on value` section.
63+
Inputs of runnables that are either connected to an output or [evaluated](../3_app-runnable-panel.mdx#evals) can trigger a recompute. These are displayed in the `Change on value` section.
6464

6565
### Manual Dependencies
6666

‎docs/apps/4_app_configuration-settings/3_app_component_configuration.md renamed to ‎docs/apps/4_app_configuration-settings/3_app_component_configuration.mdx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -36,32 +36,32 @@ Depending of the type of the data source, the input will be different. For examp
3636
title="Component Library"
3737
description="Find out the type of the data source of a component in the component library."
3838
href="/docs/apps/app_configuration-settings/app_component_library"
39+
color="orange"
3940
/>
4041
</div>
4142

4243
### Connected data source
4344

44-
The data source can be connected to any outputs.
45+
The data source can be [connected to any outputs](../2_outputs.md#connecting-inputs).
4546

46-
![Disconnected data source](../../assets/apps/inputs/disconnected-data-source.png.webp)
47-
![Connected data source](../../assets/apps/inputs/connected-data-source.png.webp)
47+
![Static data source](../../assets/apps/0_app_editor/connect_component.png)
4848

4949
#### Learn more
5050

5151
<div class="grid grid-cols-2 gap-2 my-4">
5252
<DocCard
5353
title="How to connect inputs to outputs"
5454
description="Learn how to connect inputs to outputs."
55-
href="/docs/apps/app_configuration-settings/app_component_library"
55+
href="/docs/apps/outputs#connecting-inputs"
56+
color="orange"
5657
/>
5758
</div>
5859

5960
### Runnable data source
6061

6162
We can also use the result of a runnable as a data source.
6263

63-
![Runnable data source](../../assets/apps/inputs/undefined-runnable-data-source.png.webp)
64-
![Runnable data source](../../assets/apps/inputs/defined-runnable-data-source.png.webp)
64+
![Runnable data source](../../assets/apps/inputs/defined-runnable-data-source.png)
6565

6666
#### Learn more
6767

@@ -70,6 +70,7 @@ We can also use the result of a runnable as a data source.
7070
title="Runnable triggers"
7171
description="Learn how to configure the triggers of the runnable."
7272
href="/docs/apps/app_configuration-settings/app_runnable_triggers"
73+
color="orange"
7374
/>
7475
</div>
7576

@@ -95,15 +96,13 @@ export async function main(mode: 'editor' | 'preview', name: string) {
9596

9697
The type of the input will be `select` with the values `editor` and `preview`, and the type of the input `name` will be `string`.
9798

98-
![Runnable inputs](../../assets/apps/inputs/static-runnable-input.png.webp)
99-
![Runnable inputs](../../assets/apps/inputs/connected-runnable-input.png.webp)
100-
![Runnable inputs](../../assets/apps/inputs/eval-runnable-input.png.webp)
99+
![Component configuration](../../assets/apps/inputs/runnable_inputs.png)
101100

102101
## Component configuration
103102

104103
Each component has a configuration section. This section contains all the configuration of the component.
105104

106-
![Component configuration](../../assets/apps/inputs/component-configuration.png.webp)
105+
![Component configuration](../../assets/apps/inputs/component-configuration.png)
107106

108107
#### Learn more
109108

@@ -112,5 +111,6 @@ Each component has a configuration section. This section contains all the config
112111
title="Component Library"
113112
description="Find out the configuration of each component in the component library."
114113
href="/docs/apps/app_configuration-settings/app_component_library"
114+
color="orange"
115115
/>
116116
</div>

‎docs/apps/4_app_configuration-settings/4_app_styling.md

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -48,19 +48,15 @@ On the right-side menu, pick `Global styling` and go on a component to define pr
4848

4949
<br/>
5050

51-
:::tip Configure manually and replicate pre-set styling
51+
### Configure manually and replicate pre-set styling
5252

5353
Styling on a component level can be replicated to all the components of the same class from the Rich Editor.
5454

5555
Just click on `Copy style to global CSS`.
5656

57-
<br/>
58-
5957
<video
6058
className="border-2 rounded-xl object-cover w-full h-full dark:border-gray-800"
6159
autoPlay
6260
controls
6361
src="/videos/copy_style_global_css.mp4"
6462
/>
65-
66-
:::

‎docs/apps/4_app_configuration-settings/index.mdx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,18 @@ The right panel is divided into three tabs:
1010
title="Component Library"
1111
description="Search and insert components into the app."
1212
href="/docs/apps/app_configuration-settings/app_component_library"
13+
color="orange"
1314
/>
1415
<DocCard
1516
title="Component Configuration"
1617
description="Configure the selected component or runnable."
1718
href="/docs/apps/app_configuration-settings/app_component_configuration"
19+
color="orange"
1820
/>
1921
<DocCard
2022
title="Global Styling"
2123
description="Configure the global styling of the app."
2224
href="/docs/apps/app_configuration-settings/app_styling#global-styling"
25+
color="orange"
2326
/>
2427
</div>

‎docs/apps/6_app_deployment.mdx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,6 @@ Apps can be saved as draft before being published.
1212
title="Draft and Deploy"
1313
description="Learn how to draft and deploy apps."
1414
href="/docs/core_concepts/draft_and_deploy"
15+
color="orange"
1516
/>
1617
</div>

‎docs/assets/apps/0_app_editor/connect_component.png

27.6 KB
Loading

0 commit comments

Comments
 (0)