Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mycql/yapv
A library for creating plasmid feature maps with zero external dependencies.
https://github.com/mycql/yapv
canvas dna molbio plasmid svg synbio viewer
Last synced: about 1 month ago
JSON representation
A library for creating plasmid feature maps with zero external dependencies.
- Host: GitHub
- URL: https://github.com/mycql/yapv
- Owner: mycql
- License: mit
- Created: 2018-05-12T08:22:26.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-02T20:09:48.000Z (almost 2 years ago)
- Last Synced: 2024-09-28T08:41:55.113Z (about 2 months ago)
- Topics: canvas, dna, molbio, plasmid, svg, synbio, viewer
- Language: TypeScript
- Homepage: https://mycql.github.io/yapv
- Size: 1.77 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# YAPV
## **Y**et **A**nother **P**lasmid **V**iewer
[](https://travis-ci.com/mycql/yapv)
[](https://lerna.js.org/)
[](https://badge.fury.io/js/%40yapv%2Fcore)
### What is it?
YAPV is a library for building views for plasmid maps with no external dependencies and is framework agnostic. Plasmid maps are a common way to represent [vectors](https://en.wikipedia.org/wiki/Vector_%28molecular_biology%29). You can read more about that [here](https://bitesizebio.com/43119/the-beginners-guide-to-reading-plasmid-maps/) or [here](https://pediaa.com/how-to-read-a-plasmid-map/).
They usually look like this:
### Getting Started
YAPV is composed of renderer implementations as modules. You choose which renderer you want to use.
#### With Node and NPM
```shell
npm install @yapv/core
# and install any of the renderers
npm install @yapv/svg
# OR
npm install @yapv/canvas
```
```javascript
import YAPV from '@yapv/core';
import SVG from '@yapv/svg';
import Canvas from '@yapv/canvas';
```
#### Directly off html
UMD:
```html
// and use any of the renderers
// OR
```
ES Modules:
```html
// and use any of the renderers
// OR
```
#### With Deno
```javascript
import YAPV from "https://unpkg.com/@yapv/[email protected]/lib/index.esm.js"
import SVG from "https://unpkg.com/@yapv/[email protected]/lib/index.esm.js"
import Canvas from "https://unpkg.com/@yapv/[email protected]/lib/index.esm.js"
```
For [deno](https://deno.land), since this is a web project that manipulates the DOM, make sure you let the deno compiler know via tsconfig.json.
```json
"compilerOptions": {
"lib": ["DOM", "DOM.Iterable", "ES6"]
}
```
### How do I use it? Show me the code!
```typescript
const data = { ... }
const workspace = document.querySelector('#workspace');
// Attaches the viewer to the HTML element with the specified selector
const plasmidViewer = YAPV.create(workspace);
// Use the renderer implementation. Here, we use the SVG based renderer
plasmidViewer.use(SVG.circular);
// Draw it!
plasmidViewer.draw(data);
// We can swap that out, and draw again!
plasmidViewer.use(Canvas.circular);
plasmidViewer.draw(data);
```
The 'data' instance is a JS object that conforms to the schema specified [here](./packages/core/src/schema.json). There are several [sample files](./examples/data) you can use as a reference.
If you're familiar with TypeScript, the data and properties are also defined [here](./packages/core/src/models.ts).
### Want to report a bug or request a feature?
Please feel free to file an [issue](https://github.com/mycql/yapv/issues). We'll try our best to find time and sort it out. ^_^
### Want to contribute to YAPV?
Well that's great! Please see our [CONTRIBUTING.md](./CONTRIBUTING.md) to get started with setting up the repo.
### How is this repo structured?
The YAPV repo is managed as a [monorepo](https://en.wikipedia.org/wiki/Monorepo) that is composed of several renderer implementation packages.
### License
[MIT](./LICENSE)