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.