Sandbox interactive content

[mikera]

It would be good if the sandbox could render content in an interactive mode, where certain commands become clickable buttons. This could be used to implement simple text games and tutorials.

Requirements

• Custom renderer should detect results which are of type Syntax have have the metadata :interactive true
• Custom rendering should interpret the value within the Syntax object as content to be displayed.
• A facility to execute a command embedded in the content as a new instruction in the sandbox

Content of the value maybe:

• A String -> render as plain text (\n becomes a line break)
• A Vector -> Render each element in turn
• A Map -> Interpret as special content e.g. {:option "foo" :cmd "(do (something))"} should be rendered as a button that executes the code (do (something)) in the sandbox when clicked.

Example Syntax Object

• Metadata = {:interactive true}
• Value = ["Press the button " {:option "OK" :cmd "(do-ok-command)"} " to continue"]

[helins]

When I discussed that kind of ideas with @pedrorgirardi, quite a while ago, I figured a flexible way to achieve that kind of UI capabilities would be to emulate hiccup:

(syntax ["What do you do?"
         [:button {:command '(do (foo))}
                  "Do foo"]
         [:button {:command '(do (bar))}
                  "Do bar"]]
        {:interactive? true})

Hiccup is really easy to process, especially with the recent Clojure utils I wrote for cell interop. And it is a lot easier to write for users than nesting syntax objects. There are way more things we will want to implement besides button. Code blocks for instance, since tutorials are a strong use case for this issue.

Since convex-web uses Re-frame, it is a matter of the server converting that kind of hiccup cells to actual Clojure hiccup that can be easily shared using Transit. CLJS cient is then in charge of rendering it.

HIccup convention is a tuple: [Type-keyword Optional-attribute-map Children]

[pedrorgirardi]

We have an initial version of this live on convex.world now.

I will work on an interactive tutorial documenting interactive tutorial :)

The syntax is very much like your example above @helins:

(syntax 

  [:button {:action :query :source '(inc 10)} 
    "Increment 10"]

  {:interactive? true})

[mikera]

@pedrorgirardi there seem to be some issues with error handling, e.g. I tried:

(syntax ["Foo" "Bar"] {:interactive? true})

and got

:clojure.spec.alpha/invalid

I think default behaviour should be to print elements in their normal string representation?

Also important to support the above (vectors of items) directly to make it easy to compose pieces of output

[pedrorgirardi]

I'm deploying a new version fixing an edit action bug.

I'm not sure the syntax sugar [element*] is good idea. If the user simply does ["Hello" [:button ...] ...] what's the orientation? We can assume horizontal, but I would suggest making it explicit:

;; Horizontal layout
[:h-box "Foo" "Bar"]

;; Vertical layout
[:v-box "Foo" "Bar"]

We already have these two layout widgets.

I need to check the error handling, it shouldn't show :clojure.spec.alpha/invalid.

[pedrorgirardi]

I implemented your suggestion @mikera (it's hard to see because the syntax was already rendered):

And for error handling; when there's an error, we could handle the error with a tutorial:

Just need to work on a proper documentation 😓

[mikera]

I think it may be better if any output successfully renders. If people want validation / hints you can always add a {:debug true} flag to the metadata?

[pedrorgirardi]

The screenshot wasn't clear, but the help tutorial above is only when you are in interactive mode and you input an invalid interactive mode syntax.

Below is an example of invalid interactive syntax:

(syntax
  {:a 1}
  {:interactive? true})

For these cases, the "error message" is actually an interactive tutorial - a documentation of the Interactive Sandbox.

[mikera]

The point I am trying to make it that there shouldn't really be any "invalid syntax". Everything should get displayed somehow. Let's discuss on Discord if easier but basically the "default" rendering should just be str

[helins]

I was curious about the status. Do you feel happy with the current implementation, is it described anywhere?

[pedrorgirardi]

Hi @helins .

I've made this video showing some possible use cases for the interactive Sandbox: https://youtu.be/Ffx5qlLaAiQ

I would like to record another video showing how to create these UIs, and I need to improve the documentation too.

There's a draft for the documentation here https://github.com/Convex-Dev/convex-web/blob/develop/doc/interactive-sandbox.md