YAPV

Yet Another Plasmid Viewer

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. You can read more about that here or here.

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

npm install @yapv/core
# and install any of the renderers
npm install @yapv/svg
# OR
npm install @yapv/canvas

import YAPV from '@yapv/core';
import SVG from '@yapv/svg';
import Canvas from '@yapv/canvas';

Directly off html

UMD:

<script src="https://unpkg.com/@yapv/core@0.2.2/lib/index.umd.js" />
// and use any of the renderers
<script src="https://unpkg.com/@yapv/svg@0.2.2/lib/index.umd.js" />
// OR
<script src="https://unpkg.com/@yapv/canvas@0.2.2/lib/index.umd.js" />

ES Modules:

<script type="module" src="https://unpkg.com/@yapv/core@0.2.2/lib/index.esm.js" />
// and use any of the renderers
<script type="module" src="https://unpkg.com/@yapv/svg@0.2.2/lib/index.esm.js" />
// OR
<script type="module" src="https://unpkg.com/@yapv/canvas@0.2.2/lib/index.esm.js" />

With Deno

import YAPV from "https://unpkg.com/@yapv/core@0.2.2/lib/index.esm.js"
import SVG from "https://unpkg.com/@yapv/svg@0.2.2/lib/index.esm.js"
import Canvas from "https://unpkg.com/@yapv/svg@0.2.2/lib/index.esm.js"

For deno, since this is a web project that manipulates the DOM, make sure you let the deno compiler know via tsconfig.json.

"compilerOptions": {
  "lib": ["DOM", "DOM.Iterable", "ES6"]
}

How do I use it? Show me the code!

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. There are several sample files you can use as a reference.

If you're familiar with TypeScript, the data and properties are also defined here.

Want to report a bug or request a feature?

Please feel free to file an issue. 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 to get started with setting up the repo.

How is this repo structured?

The YAPV repo is managed as a monorepo that is composed of several renderer implementation packages.

License

MIT