https://github.com/nanoporetech/plasmid-map

Plasmid map visualisations for Metrichor reports
https://github.com/nanoporetech/plasmid-map

Last synced: about 2 months ago
JSON representation

Plasmid map visualisations for Metrichor reports

• Host: GitHub
• URL: https://github.com/nanoporetech/plasmid-map
• Owner: nanoporetech
• License: mit
• Created: 2021-08-09T08:22:15.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2022-07-11T14:37:28.000Z (almost 3 years ago)
• Last Synced: 2025-04-06T08:02:15.558Z (about 2 months ago)
• Language: TypeScript
• Size: 663 KB
• Stars: 6
• Watchers: 16
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: readme.md
  • Changelog: changelog.md
  • License: LICENSE

Awesome Lists containing this project

README

        

# Plasmid visualisation

We have recreated the VIXIS plasmid map (http://angularplasmid.vixis.com/) as a reusable web component for all modern web frameworks.

![Plasmid DEMO](https://raw.githubusercontent.com/nanoporetech/plasmid-map/master/demo.png?token=AAL7PCSSFV57LBDQYKHSBMLBDIXVI)

## Using this component

There are three strategies we recommend for using the `@metrichor/plasmid` web component built with Stencil.

### Script tag

- Put a script tag similar to this `` in the head of your index.html

- Then you can use the element anywhere in your template, JSX, html etc

### Node Modules

- Run `npm install @metrichor/plasmid --save`

- Put a script tag similar to this `` in the head of your index.html

- Then you can use the element anywhere in your template, JSX, html etc

### In a stencil-starter app

- Run `npm install @metrichor/plasmid --save`

- Add an import to the npm packages `import @metrichor/plasmid;`

- Then you can use the element anywhere in your template, JSX, html etc

## Visualising Plasmid data

To use the Plasmid map visualisation in your HTML you will need to create a [plasmid-map](./src/components/plasmid-map/readme.md) tag and appropriate nested tags

See [examples](examples/all.html)