diff --git a/docs/3-manual/README.md b/docs/3-manual/README.md index df4baf2..423b8d2 100644 --- a/docs/3-manual/README.md +++ b/docs/3-manual/README.md @@ -39,7 +39,10 @@ Right click on the canvas, then click "python". This will create a python pod at -Right Click Menu + + + +![create-pod](./assets/create-pod.gif) ### Pod toolbar @@ -53,16 +56,11 @@ Option 1: There's a grab icon on the toolbar. Drag on it will move the pod. Option 2: You can also drag to select one or more pod and move them at once. - - -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. + -### Resizing a pod - -You can resize the width of a pod by dragging at its right edge. The height is -automatically adjusted based on content. +![move](./assets/move.gif) -A scope can be resized in all directions on all edges. +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. ### Deleting a pod @@ -107,7 +105,9 @@ You can also use `shift-enter` keyboard shortcut to trigger the code execution. Unlike Jupyter, you can safely close the page while the pod is running. The results will be continuely populated in the cloud. - + + +![run](./assets/run.gif) If the result output is too long, it will be folded. You can expand it using the 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 from outside of a scope to select the scope. Dragging inside the scope will select nodes in the scope. - + + +![create-scope](./assets/create-scope.gif) ### Removing a scope @@ -165,7 +167,9 @@ To actually move a pod into a scope, you can first move it in place, then click To move a pod out of a scope, you can first move it out then click the "change scope" button on the toolbar. -### Run a scope with topological order +![change scope](./assets/changescope.gif) + +### Run all pods in a scope You can run a scope by clicking the run button on the toolbar. The execution 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 from the `foo` in another. A function is only visible inside the scope (including its children). - + Second, you can export a function out into its parent. This is the use case where inner scope implements some lower-level functions, and expose a public API to higher level. You can mark a pod as public by clicking on the "toggle public" button. The pod will be visually marked "public". - + ## Edge @@ -197,7 +201,9 @@ button. The pod will be visually marked "public". There's a edge icon in a pod's toolbar. Drag on it and drop onto another pod 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. - + + +![draw edge](./assets/draw-edge.gif) ### Def-use visualization @@ -211,6 +217,15 @@ The def-use edges are only visualized inside the scope to avoid cluttering the v ## Other +### Resizing a pod or scope + +You can resize the width of a pod by dragging at its right edge. The height is +automatically adjusted based on content. + +A scope can be resized in all directions on all edges. + +![resize](./assets/resize.gif) + ### Rich text pod (markdown) 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. 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. + +![import](./assets/import.gif) + ### (Best?) Practices to order the pods - Put logical related code pods into a scope diff --git a/docs/3-manual/assets/changescope.gif b/docs/3-manual/assets/changescope.gif new file mode 100644 index 0000000..4f2558f Binary files /dev/null and b/docs/3-manual/assets/changescope.gif differ diff --git a/docs/3-manual/assets/create-pod.gif b/docs/3-manual/assets/create-pod.gif new file mode 100644 index 0000000..caa34da Binary files /dev/null and b/docs/3-manual/assets/create-pod.gif differ diff --git a/docs/3-manual/assets/create-scope.gif b/docs/3-manual/assets/create-scope.gif new file mode 100644 index 0000000..e73a998 Binary files /dev/null and b/docs/3-manual/assets/create-scope.gif differ diff --git a/docs/3-manual/assets/draw-edge.gif b/docs/3-manual/assets/draw-edge.gif new file mode 100644 index 0000000..3bc8527 Binary files /dev/null and b/docs/3-manual/assets/draw-edge.gif differ diff --git a/docs/3-manual/assets/import.gif b/docs/3-manual/assets/import.gif new file mode 100644 index 0000000..8602b47 Binary files /dev/null and b/docs/3-manual/assets/import.gif differ diff --git a/docs/3-manual/assets/move.gif b/docs/3-manual/assets/move.gif new file mode 100644 index 0000000..2a590b0 Binary files /dev/null and b/docs/3-manual/assets/move.gif differ diff --git a/docs/3-manual/assets/resize.gif b/docs/3-manual/assets/resize.gif new file mode 100644 index 0000000..be056e8 Binary files /dev/null and b/docs/3-manual/assets/resize.gif differ diff --git a/docs/3-manual/assets/right-click.gif b/docs/3-manual/assets/right-click.gif new file mode 100644 index 0000000..6d0a13e Binary files /dev/null and b/docs/3-manual/assets/right-click.gif differ diff --git a/docs/3-manual/assets/run.gif b/docs/3-manual/assets/run.gif new file mode 100644 index 0000000..d52b1a5 Binary files /dev/null and b/docs/3-manual/assets/run.gif differ