npm package: @senx/discovery-code
Description: Discovery Code Editor
Author: SenX
Latest version: 0.0.44

# Discovery Code

[![npm version](https://badge.fury.io/js/%40senx%2Fdiscovery-code.svg)](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).

<img src="https://warp10.io/assets/img/materials/logo_warp10.png" width="400" alt="Warp 10">

- [Licence Apache 2](./LICENSE.md)
- [Contribute](./CONTRIBUTING.md)

## Usage

### In a Web Environment

#### With NPM/Yarn

    $ npm install @senx/discovery-code

#### With CDN

```html
<script nomodule src="https://cdn.jsdelivr.net/npm/@senx/discovery-code/dist/discovery-code/discovery-code.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@senx/discovery-code/dist/discovery-code/discovery-code.esm.js"></script>
```

#### Usage

```html

<html lang="en">
<head>
    <title>Test</title>
</head>
<body>
<div style="width: 100%; min-height: calc(100vh - 280px);overflow: hidden;">
  <discovery-code-editor url="https://sandbox.senx.io/api/v0/exec"
                         debug="true" show-dataviz="false"
                         id="editor"
                         show-execute="true" debug
                         show-result="true" config='{}'
                         display-messages="true" initial-size="400">
    NEWGTS 'v' STORE
    0 10 <%
    'ts' STORE
    $v NOW $ts STU * - NaN NaN NaN RAND ADDVALUE DROP
    %> FOR
    $v
  </discovery-code-editor>


</div>
<script nomodule src="https://cdn.jsdelivr.net/npm/@senx/discovery-code/dist/discovery-code/discovery-code.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@senx/discovery-code/dist/discovery-code/discovery-code.esm.js"></script>
</body>
</html>
```


## 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<any>` |
| `discoveryCodeChanged`    |             | `CustomEvent<any>` |
| `discoveryCodeDataviz`    |             | `CustomEvent<any>` |
| `discoveryCodeError`      |             | `CustomEvent<any>` |
| `discoveryCodeLoaded`     |             | `CustomEvent<any>` |
| `discoveryCodeRef`        |             | `CustomEvent<any>` |
| `discoveryCodeResult`     |             | `CustomEvent<any>` |
| `discoveryCodeReview`     |             | `CustomEvent<any>` |
| `discoveryCodeSize`       |             | `CustomEvent<any>` |
| `discoveryCodeStatus`     |             | `CustomEvent<any>` |


## Methods

### `abort(session?: string) => Promise<void>`



#### Returns

Type: `Promise<void>`



### `execute(session?: string) => Promise<void>`



#### Returns

Type: `Promise<void>`



### `highlight(line: number) => Promise<void>`



#### Returns

Type: `Promise<void>`



### `resize(initial: boolean) => Promise<void>`



#### Returns

Type: `Promise<void>`

----------------------------------------------

## 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`   |