{"metadata":{"version":1,"view":"all"},"components":[{"type":"md","name":"md1","visible":true,"text":"\n### The JS component\n\n* The `js` component has a number of controls that allow you to perform common tasks and customize its behavior.\n\n* At the top of the component control panel is the `Run` button, which packages the code into a `function() { your-code-here }` and calls that function. \n\n* The `mode` option controls the parameters and behavior of the function and specifies what is done with the return value:\n - `default` - by default, the code is packaged into a function as is - no arguments, and nothing is done with the return value\n - `canvas` - in canvas mode, a `<canvas>` element is created and added to the output, and the function takes a `ctx` parameter that refers to the `CanvasRenderingContext2D`\n - `htmlgen` - in htmlgen mode, the function returns a text string which is then packaged into a `<div>` and added to the output\n\n* Two switches control when the code is run - by default, the code is only run when the `Run` button is clicked.\n - If the `runOnBlur` option is enabled, the code is run whenever focus leaves the editor - that is, the code runs immediately when you are done editing it.\n - If the `runOnLoad` option is enabled, the code is run at the beginning when the workbook loads.\n\n* The `display` option can be used to lessen the resource footprint of the component, if editing or display is unnecessary:\n - `codemirror` - by default, the code is displayed in an editable Codemirror widget\n - `readonly` - the code is displayed in a read-only `<pre>` tag\n - `summary` - the code is not displayed at all - rather, statistics regarding size, etc. are displayed\n\n* And finally, there are buttons to `Upload` and `Download` code files.\n","display":"codemirror","mode":"default","runOnBlur":true,"runOnLoad":true},{"type":"js","name":"js1","visible":true,"text":"","display":"codemirror","mode":"default","runOnBlur":false,"runOnLoad":false}]}