@molit/genomics-reporting-viewer v1.0.21

Genomics Reporting Viewer

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

Install

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

Usage

Angular, React, Vue

• Add the following to your
  • Angular: main.ts
  • React: index.js
  • Vue: main.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

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

HTML/JavaScript

Script tag

• Add the script tag <script type="module" src="https://unpkg.com/@molit/genomics-reporting-viewer/dist/genomics-reporting-viewer/genomics-reporting-viewer.esm.js"></script> 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<script type='module' src="/node_modules/@molit/genomics-reporting-viewer/dist/genomics-reporting-viewer.esm.js"></script> 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

Demo

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

HTML

Vue.js