@haukeland-mgm/plateviewer v1.0.2

Description

This is a vue.js component for visualizing a (96 well) plate as found in many wet labs.

It uses the bulma framework for CSSing and layout, font awesome(font awesome.com) as a font to provide icons, and buefy for tooltips.

Usage / Development

Consider the app in the example directory app, and to get it up and running, run

npm install
npm run dev

This will install all dependencies for the example app, and run the app with hot-reload and whatnot for your viewing and development convenience.

Inputs (Props)

• numberOfRows (default: 8, type: int)
• numberOfColumns (default: 12, type: int)
• plateMapping: Object containing info, used for mapping and determining which wells are full, and displaying extra info as tooltips; e.g. ` { "id": "43210000", "placements": { "position": "A1", "sample": { "id": "6572411215" } }, { "position": "B1", "sample": { "id": "6573166189" } }, { "position": "C1", "sample": { "id": "6562071415" } }, { "position": "D1", "sample": { "id": "6562369215" } }, { "position": "E1", "sample": { "id": "6568433989" } }, { "position": "F1", "sample": { "id": "6571775089" } }, { "position": "G1", "sample": { "id": "6571773523" } }, { "position": "H1", "sample": { "id": "6571977289" } } }

**TODO** Specify what data can be passed, and how it will be displayed.