# mpilot-ui

> User interface for MPilot

Latest version **0.3.2** (published 2023-02-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install mpilot-ui
pnpm add mpilot-ui
yarn add mpilot-ui
bun add mpilot-ui
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.2 |
| Published | 2023-02-24 |
| First published | 2022-01-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 11 |
| Unpacked size | 1.5 MB |
| Known vulnerabilities | 0 (+7 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Conservation Biology Institute |
| Maintainers | nikmolnar |

## Links

- npm: https://www.npmjs.com/package/mpilot-ui
- Repository: https://github.com/consbio/mpilot-ui
- Homepage: https://github.com/consbio/mpilot-ui#readme
- Issues: https://github.com/consbio/mpilot-ui/issues
- npm.io page: https://npm.io/package/mpilot-ui

## Dependencies (11)

- [mpilot](https://npm.io/package/mpilot.md) ^0.3.1
- [svelte](https://npm.io/package/svelte.md) ^3.46.3
- [@turf/bbox](https://npm.io/package/@turf/bbox.md) ^6.5.0
- [@turf/union](https://npm.io/package/@turf/union.md) ^6.5.0
- [@turf/helpers](https://npm.io/package/@turf/helpers.md) ^6.5.0
- [@turf/intersect](https://npm.io/package/@turf/intersect.md) ^6.5.0
- [path-browserify](https://npm.io/package/path-browserify.md) ^1.0.1
- [@flatten-js/core](https://npm.io/package/@flatten-js/core.md) ^1.2.27
- [string-strip-html](https://npm.io/package/string-strip-html.md) ^9.0.5
- [@turf/bbox-polygon](https://npm.io/package/@turf/bbox-polygon.md) ^6.5.0
- [@turf/transform-translate](https://npm.io/package/@turf/transform-translate.md) ^6.5.0

## Recent versions

- 0.3.2 (latest) — 2023-02-24
- 0.3.0 — 2022-02-28
- 0.2.2 — 2022-02-25
- 0.2.1 — 2022-01-31
- 0.2.0 — 2022-01-31
- 0.1.1 — 2022-01-30

## README

# MPilot Model Viewer

Mpilot UI is a JavaScript library for visualizing MPilot models. MPilot UI is implemented using Svelte and provides a 
Svelte component, as well as a vanilla JavaScript API.

## Using with Svelte

You can use the `ModelDiagram` component to place a model visualization in your Svelte application. In order to do this,
you will first have to create a program object from model source.

```javascript
import { Program } from 'mpilot/lib'
const program = Program.fromSource(modelSource)  
```

With the program object, you can create the diagram in your Svelte component.

```sveltehtml
<script>
  import ModelDiagram from 'mpilot-ui/lib/components/ModelDiagram'
</script>

<ModelDiagram {program} />
```

In addition to `program`, the `ModelDiagram` component takes three other props that affect the visualization behavior.

**Props**

* `program` -- The MPilot program object
* `values` -- An object mapping nodes in the model to values (e.g., when the user clicks a location on a map). See 
below for the object format.
* `labels` -- An object mapping nodes in the model to custom labels. See below for the object format.
* `mode` -- The diagram mode. Can be either 'full' or 'narrow' (default). Narrow mode only shows part of the diagram at 
a time, adjusting which nodes are visible as the user explores the model.

**Values object schema**

```javascript
{
  '<node result name>': {
    value: '<numerical value>',
    label: '<value label>',
    color: '<value color>'
  }
}
```

**Labels object schema**

```javascript
{
  '<node result name>': '<label>'
}
```

## Using with vanilla JavaScript

TODO...

---
_Source: https://npm.io/package/mpilot-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._