onco-grid

// onco-grid-creation.js
const OncoGrid = require('omicschart-onco-grid');

export default function getGrid(params) {
    var grid = new window.OncoGrid(params);
    return grid;
}

// your-plot-page.js
const donors = [
    { id: 123 },
    { id: 234 },
    ...
];
const genes = [
    { id: 'MYC', symbol: 'MYC' },
    { id: 'A1CF', symbol: 'A1CF' },
    ...
];

// id could be 'gain', 'loss', 'SNV'
// type could be 'cnv', 'mutation'
// type = 'cnv' means id in ('gain', 'loss')
// type = 'mutation' means id = 'SNV'
const observations = [
    { id: 'gain', donorId: 'some-patient-id', geneId: 'MYC', type: 'cnv', ids: [ 'some ids of samples/observations', 'id2' ] },
    { id: 'loss', donorId: 'some-patient-id', geneId: 'MYC', type: 'cnv', ids: [ 'some ids of samples/observations', 'id2' ] },
    { id: 'SNV', donorId: 'some-patient-id', geneId: 'MYC', type: 'mutation', ids: [ 'some ids of samples/observations', 'id2' ] },
    ...
];
const params = {
    element: '#grid-div',
    donors: donors,
    genes: genes,
    observations: observations,
    height: 450,
    width: 600,
    heatMap: false
};
getGrid(params).render();
...
// then in return jsx somewhere on your page
<div className="card">
    <div id="grid-div">
    </div>
</div>
...