Skip to content

Commit ae892d5

Browse files
authored
add gifs (#16)
1 parent 352bb32 commit ae892d5

File tree

10 files changed

+33
-15
lines changed

10 files changed

+33
-15
lines changed

docs/3-manual/README.md

Lines changed: 33 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,10 @@ Right click on the canvas, then click "python". This will create a python pod at
3939

4040
<!-- Instead, use this syntax. However, the markdown file cannot be viewed with images on GitHub anymore. -->
4141

42-
<img src={require("./assets/right-click.png").default} alt="Right Click Menu" width="300"/>
42+
<!-- <img src={require("./assets/right-click.png").default} alt="Right Click Menu" width="300"/> -->
43+
44+
<!-- ![right-click](./assets/right-click.gif) -->
45+
![create-pod](./assets/create-pod.gif)
4346

4447
### Pod toolbar
4548

@@ -53,16 +56,11 @@ Option 1: There's a grab icon on the toolbar. Drag on it will move the pod.
5356

5457
Option 2: You can also drag to select one or more pod and move them at once.
5558

56-
<img src={require("./assets/select.png").default} alt="" width="300"/>
57-
58-
Special note for scope: if you want to "drag-to-select" a scope, you need to drag from outside into it. If you drag inside a scope, only inner nodes will be selected.
59+
<!-- <img src={require("./assets/select.png").default} alt="" width="300"/> -->
5960

60-
### Resizing a pod
61-
62-
You can resize the width of a pod by dragging at its right edge. The height is
63-
automatically adjusted based on content.
61+
![move](./assets/move.gif)
6462

65-
A scope can be resized in all directions on all edges.
63+
Special note for scope: if you want to "drag-to-select" a scope, you need to drag from outside into it. If you drag inside a scope, only inner nodes will be selected.
6664

6765
### Deleting a pod
6866

@@ -107,7 +105,9 @@ You can also use `shift-enter` keyboard shortcut to trigger the code execution.
107105

108106
Unlike Jupyter, you can safely close the page while the pod is running. The results will be continuely populated in the cloud.
109107

110-
<img src={require("./assets/run.png").default} alt="" width="300"/>
108+
<!-- <img src={require("./assets/run.png").default} alt="" width="300"/> -->
109+
110+
![run](./assets/run.gif)
111111

112112
If the result output is too long, it will be folded. You can expand it using the
113113
button on the top-right of the result area.
@@ -131,7 +131,9 @@ The drag-to-select behavior on scope is slightly different. You have to drag
131131
from outside of a scope to select the scope. Dragging inside the scope will
132132
select nodes in the scope.
133133

134-
<img src={require("./assets/create-scope.png").default} alt="" width="300"/>
134+
<!-- <img src={require("./assets/create-scope.png").default} alt="" width="300"/> -->
135+
136+
![create-scope](./assets/create-scope.gif)
135137

136138
### Removing a scope
137139

@@ -165,7 +167,9 @@ To actually move a pod into a scope, you can first move it in place, then click
165167

166168
To move a pod out of a scope, you can first move it out then click the "change scope" button on the toolbar.
167169

168-
### Run a scope with topological order
170+
![change scope](./assets/changescope.gif)
171+
172+
### Run all pods in a scope
169173

170174
You can run a scope by clicking the run button on the toolbar. The execution
171175
order is the topological order w.r.t. the def-use edges and manual edges. That
@@ -181,14 +185,14 @@ First of all, scopes are separated. The function `foo` in one scope is different
181185
from the `foo` in another. A function is only visible inside the scope
182186
(including its children).
183187

184-
<img src={require("./assets/scope-separate.png").default} alt="" width="300"/>
188+
<img src={require("./assets/scope-separate.png").default} alt="" width="600"/>
185189

186190
Second, you can export a function out into its parent. This is the use case
187191
where inner scope implements some lower-level functions, and expose a public API
188192
to higher level. You can mark a pod as public by clicking on the "toggle public"
189193
button. The pod will be visually marked "public".
190194

191-
<img src={require("./assets/public.png").default} alt="" width="300"/>
195+
<img src={require("./assets/public.png").default} alt="" width="600"/>
192196

193197
## Edge
194198

@@ -197,7 +201,9 @@ button. The pod will be visually marked "public".
197201
There's a edge icon in a pod's toolbar. Drag on it and drop onto another pod
198202
will create an edge. This edge can be used to mark the execution order. For example, you can draw edges of a chain of pods and run the chain to simulate a Jupyter notebook.
199203

200-
<img src={require("./assets/draw-edge.png").default} alt="" width="300"/>
204+
<!-- <img src={require("./assets/draw-edge.png").default} alt="" width="300"/> -->
205+
206+
![draw edge](./assets/draw-edge.gif)
201207

202208
### Def-use visualization
203209

@@ -211,6 +217,15 @@ The def-use edges are only visualized inside the scope to avoid cluttering the v
211217

212218
## Other
213219

220+
### Resizing a pod or scope
221+
222+
You can resize the width of a pod by dragging at its right edge. The height is
223+
automatically adjusted based on content.
224+
225+
A scope can be resized in all directions on all edges.
226+
227+
![resize](./assets/resize.gif)
228+
214229
### Rich text pod (markdown)
215230

216231
You can create a rich text pod by right clicking on the canvas and selecting
@@ -223,6 +238,9 @@ can write notes and documents in this editor.
223238

224239
Right click on the Canvas and select "Import", then choose your jupyter notebook file. The notebook will be imported into a scope and layout horizontally.
225240

241+
<!-- <img src={require("./assets/markdown.png").default} alt=""/> -->
242+
![import](./assets/import.gif)
243+
226244
### (Best?) Practices to order the pods
227245

228246
- Put logical related code pods into a scope

docs/3-manual/assets/changescope.gif

1.07 MB
Loading

docs/3-manual/assets/create-pod.gif

931 KB
Loading

docs/3-manual/assets/create-scope.gif

832 KB
Loading

docs/3-manual/assets/draw-edge.gif

280 KB
Loading

docs/3-manual/assets/import.gif

1.32 MB
Loading

docs/3-manual/assets/move.gif

678 KB
Loading

docs/3-manual/assets/resize.gif

625 KB
Loading

docs/3-manual/assets/right-click.gif

433 KB
Loading

docs/3-manual/assets/run.gif

636 KB
Loading

0 commit comments

Comments
 (0)