# Discovery Code
[](https://badge.fury.io/js/%40senx%2Fdiscovery-code)
This [web components](https://fr.wikipedia.org/wiki/Composants_web) embed a WarpScript editor dedicated to [Warp 10](https://www.warp10.io).
- [Licence Apache 2](./LICENSE.md)
- [Contribute](./CONTRIBUTING.md)
## Usage
### In a Web Environment
#### With NPM/Yarn
$ npm install @senx/discovery-code
#### With CDN
```html
```
#### Usage
```html
Test
NEWGTS 'v' STORE
0 10 <%
'ts' STORE
$v NOW $ts STU * - NaN NaN NaN RAND ADDVALUE DROP
%> FOR
$v
```
## Properties
| Property | Attribute | Description | Type | Default |
|--------------------|---------------------|-------------|----------------------------------------------------------|----------------|
| `code` | `code` | | `string` | `''` |
| `config` | `config` | | `Config \| string` | `new Config()` |
| `debug` | `debug` | | `boolean` | `false` |
| `displayMessages` | `display-messages` | | `boolean` | `false` |
| `existingComments` | `existing-comments` | | `ReviewCommentEvent[] \| string` | `[]` |
| `heightLine` | `height-line` | | `number` | `undefined` |
| `heightPx` | `height-px` | | `number` | `undefined` |
| `imageTab` | `image-tab` | | `boolean` | `false` |
| `initialSize` | -- | | `{ w?: number; h?: number; name?: string; p?: number; }` | `undefined` |
| `language` | `language` | | `"flows" \| "warpscript"` | `'warpscript'` |
| `showDataviz` | `show-dataviz` | | `boolean` | `false` |
| `showExecute` | `show-execute` | | `boolean` | `false` |
| `showResult` | `show-result` | | `boolean` | `false` |
| `theme` | `theme` | | `"dark" \| "light"` | `'light'` |
| `url` | `url` | | `string` | `undefined` |
| `widthPx` | `width-px` | | `number` | `undefined` |
## Events
| Event | Description | Type |
|---------------------------|-------------|--------------------|
| `discoveryCodeBreakPoint` | | `CustomEvent` |
| `discoveryCodeChanged` | | `CustomEvent` |
| `discoveryCodeDataviz` | | `CustomEvent` |
| `discoveryCodeError` | | `CustomEvent` |
| `discoveryCodeLoaded` | | `CustomEvent` |
| `discoveryCodeRef` | | `CustomEvent` |
| `discoveryCodeResult` | | `CustomEvent` |
| `discoveryCodeReview` | | `CustomEvent` |
| `discoveryCodeSize` | | `CustomEvent` |
| `discoveryCodeStatus` | | `CustomEvent` |
## Methods
### `abort(session?: string) => Promise`
#### Returns
Type: `Promise`
### `execute(session?: string) => Promise`
#### Returns
Type: `Promise`
### `highlight(line: number) => Promise`
#### Returns
Type: `Promise`
### `resize(initial: boolean) => Promise`
#### Returns
Type: `Promise`
----------------------------------------------
## Data format
### Default config
```json
{
"buttons" : {
"class": ""
},
"execButton" : {
"class": "",
"label": "Execute"
},
"datavizButton" : {
"class": "",
"label": "Visualize"
},
"hover" : true,
"readOnly" : false,
"messageClass" : "",
"errorClass" : "",
"editor": {
"quickSuggestionsDelay": 10,
"quickSuggestions": true,
"tabSize": 2,
"minLineNumber": 10,
"enableDebug": false
}
}
```
## CSS vars
### Inherited from Discovery
| Name | Default value |
|------------------------------------|------------------|
| `--warp-view-button-font-size` | `1rem` |
| `--warp-view-button-border-color` | `#004eff` |
| `--warp-view-button-padding` | `.375rem .75rem` |
| `--warp-view-button-label-color` | `#ffffff` |
| `--warp-view-button-bg-color` | `#004eff` |
| `--warp-view-button-bg-color` | `#004eff` |
| `--warp-view-button-width` | `auto` |
| `--warp-view-button-border-radius` | `0.25rem` |
| `--warp-view-spinner-color` | `#004eff` |
### Specific
| Name | Default value |
|------------------------------------------|---------------|
| `--discovery-code-status-bar-font-color` | `#404040` |
| `--discovery-code-status-bar-background` | `#c0c0c0` |
| `--discovery-code-breakpoint-color` | `#dc3545` |
| `--discovery-code-selected-line-color` | `#00abc066` |