DSL Design

[rainintime7]

Here I propose an object-based DSL (python-like), using an array as an example:

object:
array

atomic element (smallest element consisting of this object):
array element

atomic operation (smallest operation one can do on the element):
1. color
2. arrow (with text)
3. display value
4. index

	element.color()
	element.arrow()
	element.display_value()
	element.index()

method (encapsulated atomic operations):

array.init()
array.iterate() 
array.sort()
array.loop()
array.index()
array.select()

element operation + logical control:
the operations can work together with logical control (for/if/while)
examples:

	for i in range(len(array)):
		arr.select(i).color('blue').arrow('current_ele')

why we have both element operation and object method?
element operations have much better expressive abilities, but are code-heavy (think of algorithm-visualizer: https://algorithm-visualizer.org/)
object method is code-free but lack flexibility (users can only use the method encapsulated by us, think of visualgo: https://visualgo.net/en )
Therefore we provide both methods.

How to generate animaitons?
for method:
it will be excapsulated into method. The method will be translated into a series of execuable code. The code to generate animation will be plug in (like algo-visualizer but hidden from users)
for element operation:
Use explicit declaration to make animation, here is an example:

	X=array.init([1,2,3])
	newPage
	X=array.init([4,5,6])
# the animaiton will have 2 pages with [1,2,3] and [4,5,6]

example1:
// iterate and highlight the number can be divided by 3 in an array

X = array.init(size=5, generate = "x[i+1] = x[i] + 2")
for i in range(len(X)):
	newPage
	X.select(i).arrow('cur')
	if X.select(i) % 3 == 0:
		X.select(i).color('red')
# genarate a slides with 5 pages

example2:
// iterate an array

X = array.init(size=5, generate = "x[i+1] = x[i] + 2")
X.iterate()
# generate slides with 5 pages

[rainintime7]

here is syntax by idyll: https://idyll-lang.org/docs/components.
Personally I think they are more similar to html.

[rainintime7]

Penrose also uses object-based DSL. But if we consider a dynamic process, the complexity increases significantly.

[rainintime7]

the workflow to add a new object in this DSL:

1. define object, object element, atomic operation
2. define all method
3. write Parser and generate AST

[rainintime7]

the cons of such design:

1. for users it would be code-heavy when there is no existing method.
2. somehow it looks like we write a python-api to render mermaid. lack innovation.

[LittleAprilFool]

Yeah, I think this approach is too code-heavy. And looks like python. Could you provide an example of how a "penrose" approach or "idyll" approach would look like in our case? There are other templating languages that we can draw inspirations from, e.g., https://pugjs.org/language/filters.html

[LittleAprilFool]

visslides
page
array
@ 1 &blue&
@ 2
@ 3
matrix
@ 
1,2
3,4
@
page
array
@ 1
@ 2 &blue&
@ 3
@ 4
matrix
@
1,2,3
4,5,6
@
page
array
@ 1
@ 2 
@ 3 &blue&
@ 4
matrix
@ 
1,2,3
4,5,6
@
page
array
@ 1
@ 2 
@ 3 
@ 4 &blue&
matrix
@ 
1,2,3
4,5,6
@

visslides
a: [[1, 2, 3], [1, 2, 3, 4], *, *]
b: [[[1, 2], [3, 4]], [[1, 2, 3], [4, 5, 6]], *, *]
page p:[0, 4]
    array a[p]
        @ a[p][i] (p==i && arrow)
    matrix b[p]

[LittleAprilFool]

visslides: fib
  a: [[1, 1], [1, 1, 2], [1, 1, 2, 3], [1, 1, 2, 3, 5]]
  page p:[0, 4]
    array a[p]
      @ a[p][i] {p==i && arrow, p==i+1 && arrow, p==i+3 && color(green)}

[LittleAprilFool]

visslides: fib
  load algorithm: fib
  a: fib(4)
  page p:[0, 4]
    array a[p]
      @ a[p][i] {p==i && color(blue), p==i+1 && color(blue), p==i+3 && color(green)}

[LittleAprilFool]

visslides: fib
  load algorithm: fib
  a: fib(4)
  page p:[0, 4]
    array a[p]
      @ a[p][i] {p==i && color(blue), p==i+1 && color(blue), p==i+3 && color(green)}{index}{display_value}

[LittleAprilFool]

possible ideas: we can combine GUI manipulation with changes in code editor. e.g., in editing mode, the user can insert a new page by clicking a button, and it would copy the last page to the new page. They can then directly edit the rendered viz to change the value, or edit the code to change the value