This document introduces Spell, a new frontend interpreter for Zeppelin notebooks. Spell interpreters run in the browser rather than the backend, are written in JavaScript, and can be used as display systems. Examples of Spell interpreters demonstrated include ones for flowcharts, CSV data, JSON, and translation. The document provides instructions for creating new Spell interpreters, including how to define the interpret() method and configure options. It highlights some remaining issues to make Spell interpreters integrate better with Zeppelin's existing architecture.

1. Zeppelin Helium : Spell
1ambda
ZEPL
March 2, 2017

2. What is Spell?
Frontend interpreter runs on browser not in
backend.
pluggable
written in javascript
can be display system
available in 0.8.0-SNAPSHOT (ZEPPELIN #1940)
2

3. What?!

4. Background: Interpreter
4

5. Background: Interpreter (cont.)
Interpreter consumes paragraph text and
render output.
Each interpreter has magic. For example,
the markdown interpreter uses %markdown
%spark
println("Hello, Zeppelin!")
%markdown
## Hello, Zeppelin
5

6. Background: Display System
Display system renders result which already
translated by backend interpreters on browser
(Basic Display System: %html , %table , %angular )
%spark
val total = 195
println(s"%html <h3>result is ${total}</h3>")
// will be interpreted by spark interpreter
// `%html <h3>total value is 195<h3>`
Can we do better? (e.g %markdown display type)
6

7. Motivation: Spell
How can i pass variables from spark to markdown
in Zeppelin
Do we really need backend markdown interpreter?
(awesome js markdown library)
What if we implement %markdown as a frontend
interpreter?
Then, we can also use them as display system
because it runs on browser like %html
7

8. This is Spell
Frontend interpreter runs on browser not in
backend.
pluggable: can be installed / removed easily
(Helium Online Registry)
written in javascript: can utilise exisiting libraries
( owchart, sigmajs, vega, papaparse, ...)
can be display system as well (ZEPPELIN-2089)
8

9. DEMO
1. zeppelin- owchart-spell
2. zeppelin-csv-spell
3. zeppelin-json-spell
4. zeppelin-translator-spell

10. I wanna create my own spell
Doc: How to create new spell
Basic Examples
Published Spells
Con gurtion Support: #1982
Ideas: %slack , %sigma , %vega
10

11. DEMO
1. zeppelin-echo-spell
2. zeppelin-markdown-spell

12. Creating Spell: interpret()
every spell takes paragraph text (string)
returns SpellResult
spell-base.js
example: zeppelin-echo-spell
interpret(paragraphText) {
return new SpellResult(paragraphText)
}
12

13. Creating Spell: SpellResult
SpellResult(data, displayType)
displayType can be optional (default is %text )
import {
SpellBase,
SpellResult,
DefaultDisplayType,
} from 'zeppelin-spell';
interpret(paragraphText) {
const html = `<h2>${paragraphText}</h2>`
return new SpellResult(html, DefaultDisplayType.HTML)
}
13

14. Creating Spell: SpellResult (cont.)
SpellResult supports multiple results: add()
See also: Multiple paragraph results (PR #1658)
interpret(paragraphText) {
const html = '<h4>Hello</h4>'
const text = 'Spell'
return new SpellResult()
.add(html, DefaultDisplayType.HTML)
.add(text, DefaultDisplayType.TEXT /** optional */)
}
14

15. Creating Spell: SpellResult (cont.)
pass Promise for API call (async)
psss Function which takes elem id to draw DOM
default display types
data displayType example
String ALL (except %element ) markdown-spell
Promise ALL (except %element ) translator-spell
Function ELEMENT ( %element ) owchart-spell
15

16. Creating Spell: Con guration
Actually, interpret() takes con g as the second
argument
interpret(paragraphText, config) { ... }
De ne con g speci cation in package.json like
"config": {
"repeat": {
"type": "number",
"description": "How many times to repeat",
"defaultValue": 1
}
},
16

17. (unresolved) Helium, Spell Issues
we need your help
ZEPPELIN-2089: Use spell as display system with
backend interpreters
ZEPPELIN-2088: Evaluate helium bundles one by
one
ZEPPELIN-2122: Add execution time to
paragraphs executed by spell
Other Issues
17

18. References
Image: Zeppelin Interpreter Architecture
Resources
Slide: github.com/1ambda/talk/2017/ y-zeppelin
18

19. Thanks