https://github.com/multimeric/vue-cwl
Visualizer of CWL (Common Workflow Language) workflows for Vue
https://github.com/multimeric/vue-cwl
bioinformatics
Last synced: 17 days ago
JSON representation
Visualizer of CWL (Common Workflow Language) workflows for Vue
- Host: GitHub
- URL: https://github.com/multimeric/vue-cwl
- Owner: multimeric
- License: gpl-3.0
- Created: 2018-02-15T05:47:53.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T17:47:43.000Z (over 3 years ago)
- Last Synced: 2025-03-21T05:23:38.594Z (about 1 year ago)
- Topics: bioinformatics
- Language: Vue
- Homepage: https://multimeric.github.io/vue-cwl/
- Size: 1.1 MB
- Stars: 30
- Watchers: 3
- Forks: 3
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue CWL
[](https://zenodo.org/badge/latestdoi/121595617)
Vue CWL provides a Vue component for the visualization of CWL (Common Workflow Language) workflows.
## Motivation
Vue CWL uses the fantastic [cwl-svg](https://github.com/rabix/cwl-svg) library behind the scenes, which you can also use directly.
However, you might want to use Vue CWL because:
* You can use it directly in your HTML application, without setting up a compiler. You don't even need to use npm!
* If you're using Vue elsewhere in your application, Vue CWL will be much easier to integrate.
## Installation (if using npm)
Install from npm:
```bash
npm install vue-cwl --save-dev
```
Or, if you want the latest development version, install from github:
```bash
npm install git+https://git@github.com/TMiguelT/vue-cwl.git --save-dev
```
## Integration
Vue CWL is exported as a UMD module, which means that you can either import it with a module loader,
or import it directly in the browser.
If using webpack and npm:
```javascript
import Vue from 'vue';
import Cwl from 'cwl-svg';
new Vue({
el: '#vue',
components: {
cwl: Cwl
}
})
```
You can now use the `` tag in your template:
```html
```
If using no bundler, you can include Vue and Vue CWL using something like `unpkg`:
```html
new Vue({
el: '#vue',
components: {
cwl: vueCwl.default
}
});
```
## Usage
Vue CWL components currently accept 4 props:
* `cwl`:
* type: Object
* default: null
* description: The JSON object representing the CWL workflow to render
* `cwlUrl`:
* type: String
* default: null
* description: A URL to request for the initial CWL object from. Used as an alternative to the "cwl" prop`
* `editingEnabled`:
* type: Boolean
* default: false
* description: True if the workflow is editable
* `plugins`:
* type: Array
* default: No plugins
* description: A list of CWL plugins to use in the CWL rendering
## Demo
An online demo of Vue CWL is available at
If you wish to build the demo yourself:
* Clone the repo
* Run `npm run demo`
* Then browse to in your web browser (or whatever URL the command
prints out)