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

| Name | Description | Example | Example Component | | ------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- | ------- | ----------------- | | genomics-report | Displays the given FHIR genomic report. Depends on genetic-variants. | <genomics-report fhir-base-url="https://fhir.molit.eu/fhir" id-genomics-report="3972" ></genomics-report> | :link: | | genetic-variants | Displays the given genetic variant as a table. Used by genomics-report. | <genetic-variants genetic-observations='[...]' type="snv" gv-title="SNVs"></genetic-variants> | :link: |

Demo

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

HTML

Vue.js