Genomics Reporting Viewer

!build
!publish
!npm version
!npm license

Components for displaying FHIR genomic reports complying to the FHIR Genomics Reporting Implementation Guide.

Install

- Run npm install @molit/genomics-reporting-viewer --save

Usage

$3

- Add the following to your
- Angular: main.ts
- React: index.js
- Vue: main.js

``js
import { applyPolyfills, defineCustomElements } from '@molit/genomics-reporting-viewer/loader';

applyPolyfills().then(() => {
// Surrounding defineCustomElemnts() with applyPolyfills() is only needed if older browsers are targeted
defineCustomElements();
});
`
- Only in Angular: In your app.module.ts add the following

`js
import {CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';

@NgModule({
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
`
- Then you can use the element anywhere in your template, JSX, html etc

$3

#### Script tag

- Add the script tag to the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc

#### Node Modules
- Run npm install @molit/genomics-reporting-viewer --save
- Add the script tag to the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc

Need more information? Check out the StencilJS Framework Integration Guide.

Components

| Name | Description | Example | Example Component |
| ------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- | ------- | ----------------- |
| genomics-report | Displays the given FHIR genomic report.
Depends on genetic-variants. | | :link: |
| genetic-variants | Displays the given genetic variant as a table.
Used by genomics-report. | ` | :link: |

Demo

Example Projects showcasing the usage of @molit/genomics-reporting-viewer

HTML

Vue.js

----------------------------------------------