### Clone and Build igv.js

Source: https://github.com/igvteam/igv.js/blob/master/README.md

Standard procedure to clone the repository, install dependencies, and build the project. This is a prerequisite for development and running examples.

```bash
git clone https://github.com/igvteam/igv.js.git
cd igv.js
npm install
npm run build
```

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

### Build IGV.js Project

Source: https://github.com/igvteam/igv.js/blob/master/examples/readme.txt

Run this command from the root directory of the IGV.js project to build it. This is required before running any examples.

```bash
npm run build
```

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

### Load Reference Genome and Track with Data URIs

Source: https://github.com/igvteam/igv.js/blob/master/dev/datauri/dataURI_pacbio.html

This example shows how to initialize IGV.js with a reference genome and a track, both specified using data URIs. This is useful for self-contained examples or when external file hosting is not feasible.

```javascript
import igv from "../../js/index.js"

const igvDiv = document.getElementById("igvDiv")

const options = {
  locus: "chr12:22,422,015-22,429,415",
  reference: {
    fastaURL: "data:application/gzip;base64,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" 
  },
  tracks: [
    {
      label: "PB",
      url: "data:application/gzip;base64,H4sIBAAAAAAA/wYAQkMCAIICXZI9b9NQFIYPhDZ1UIEBBhbkhYEh9j33+2YhtBUtqA2FSqUVQpWTuE1QHJckAyyw8QsQDEgsIMTCD0CqBBNCiKUgwcDAb2BBYkE4/ohusGRZz318zr3ntRcurR3hJYD6ypKz2aihJ5yNa7VWHA/a3X4wCiv19WXnylKtNwic9Ub6SF4jHlaD3n4ncBZXx2tu0Ovu9V2/E0eh34qaVZR+dKflDzvBIGz7g3A3HIT9Vjj0O3tM7/TjoDca+t1+O7yXrCUN0nWvH++MhbcbDEeBu7JMiEDu509vvxlFXjOI3OpllzLC3erIRelWb7jVfXdYqW9cdzYatVZngM5qo0a5NkJySm1BxgYZU0b9ZzAzgmgppw3Na6gSjBjbsNQgZ5Izqm3DU0MU4UzhlBGZQWMQ9VQ3OTaGMKYZF7ZQY6EZFYpztIVOBWEq2X2qwoyF0BKVRGkJmgVD0TBB7c1pGozkyYVS2SLNhUtFjNHMFmmvJC7UXNoTZqEYTY0Qwt4jy8QQijwxlsgi0SiYplMVaSKoiCbCKFukiaAwSVBG2adKE0n6I9OS2ZOb7CNqZrhCe8C1VEgh7f5bWX9JOEl+Iktsp0MrShVHUTkLADPJPY4cZj98OzGbAwHvyZ9yQQjnFubnCqLw5vmviWPw+uThbEEcHt0KJiTgzOLpCUm4MGrOFKQg6Pw+VpCG87ufJmTgVPyglB+Mwv3HcXEwSqB883upIISfBx+PFkThZVQuyhiU3x8ez4HDs7ubBQj4Ov+lkoOEH1e9AhSI6KGTg4bPL17N5WDg9sHFAtbgbX2S2xa8+7ta1GzDU90t/QM8NlyZkgQAAB+LCAQAAAAAAP8GAEJDAgBTNe2cv27lyNbdeXoMTFwEgabDIgiosm9a13M1DkkQEAMn9wMMOfLgswELDgz4H6CYBAHxDfQI8ht04AeQnTrpR1DupMPr32JrH22WTr+AQc50H51zyPqza+21195V6j9Op+KXoige/+e/Pv2rv//b4n/886L4X/+hKP7+dv3v/1gU/+nL719++8uXP3+7+RfX13/987ffvnz565///stvv/3LL3/8/vv177//tl1f/rj+y/Vvf73+7fcv11/++sdf/vxvX/78z7/9w8319R/X//Dbn9d//cuX6+KffSqKV/or+fP09vqYvV7xp+HPM3/qt88Df+7evr/hz7V7//nt9dfTj/v184Nrs357Ru9v39q6Kd7v/ey+ixfatdfX0358n7O+XlybN+61f2szvfV9676z98G1c+XsU7+9hrf2S/f+Jrv/3rVjc27evq+zefanH2Oyz+sL95otgMj52e9vr89vfT0VH8fu1yq3v28nuLHfvb3/nH2er8FV1u7X7Pu8HxtPbrMXN199LuyENxv6521cL9nama0/u9fmbTzWTnTPP7n7fLuGpce3+2/d54b90vVz7+xpWLt199RujXJ8fnXPbrY47du2+5+ydq1Pu+/B5nT6MWbzZ/NT7982F2vf92+fmy1zvzC8+8/NJn6eZivDs62vX2971uZobdyd3p/163np+Uu21to9ZLzg/dHGY2OL7vub7Lv7rM+r7PXuQvu2vqF49wXzvefTR1t4bPm1fM7aNP/+mT967mqKn/vfXXa/2d3GcFPsMWGc/5C1Y+P79dMPG+pzxYBvrj3Ppbaer282f3bte8w9vdno9vRuS4/1+7d+/Fp5HjSbm33UTuNtfXr3NY/du588n9s379cw9lB8tG9dvOPz4c03PZ95HjZ7fc/sZ+17X/Jc5dci9xEby1P23FPxbpN8jql4jwXfbA0/7edka+J5ZsOqW7twoX0bp2HcXn
```

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

### Install @gmod/cram Package

Source: https://github.com/igvteam/igv.js/blob/master/js/cram/updating_cram-bundle.md

Run this command in the igv.js root directory to install the latest version of the @gmod/cram package.

```bash
npm install
```

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

### Create IGV Browser with Cursor Tracking Guide

Source: https://github.com/igvteam/igv.js/blob/master/dev/api/setCustomCursorGuideMouseHandler.html

Initializes an IGV.js browser instance with the cursor tracking guide enabled and sets a custom mouse handler for it. This handler logs the base pair and interpolant values.

```javascript
import igv from "../../js/index.js"
import {StringUtils} from "../../node_modules/igv-utils/src/index.js"

const numberFormatter = StringUtils.numberFormatter

let browser;

(async () => {
    const options = {
        genome: "hg19",
        // locus: [ 'egfr', 'myc' ],
        locus: "myc",
        showAllChromosomes: true,
        showCursorTrackingGuide: true,
        tracks: [
            {
                name: 'SEG - Breast',
                url: 'https://www.dropbox.com/s/lka7ixgin5ne5xl/Breast.seg?dl=0'
            }
        ]
    }
    browser = await igv.createBrowser(document.getElementById('igvDiv'), options)

    browser.setCustomCursorGuideMouseHandler(({bp, interpolant}) => {
        console.log(`base-pair ${numberFormatter(bp)} interpolant ${interpolant.toFixed(3)} `)
    })
})()
```

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

### Processing SAM/BAM with HTSJDK Example

Source: https://github.com/igvteam/igv.js/blob/master/test/data/bam/long_cigar/00README.txt

This Java example demonstrates how to use HTSJDK to process a SAM file and output a BAM file, with support for long CIGAR strings.

```java
java -cp htsjdk.jar htsjdk.samtools.example.PrintReadsExample cigar-64k.sam.gz true out.bam
```

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

### QTL Data Example

Source: https://github.com/igvteam/igv.js/blob/master/dev/qtl/custom_qtl.html

This is an example of QTL data in CSV format, showing the header and several data rows. It is used to illustrate the custom parsing options.

```csv
rsID,chr,pos,A1,A2,ENSG,geneSym,TSS,beta,se,t,p
rs376835509,10,65030,C,A,ENSG00000015171,ZMYND11,180405,1.64981083e-02,7.19706854e-03,2.29233725e+00,2.22757220e-02
rs72635988,10,69083,C,T,ENSG00000015171,ZMYND11,180405,-5.32386509e-04,8.55454429e-03,-6.22343507e-02,9.50399582e-01
rs185642176,10,90127,T,C,ENSG00000015171,ZMYND11,180405,2.89466393e-02,1.24029050e-02,2.33385963e+00,1.99745306e-02
rs184120752,10,94263,A,C,ENSG00000015171,ZMYND11,180405,-1.14917373e-02,1.66314256e-02,-6.90965259e-01,4.89888748e-01
```

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

### Create a Browser with Custom Options

Source: https://github.com/igvteam/igv.js/blob/master/dev/misc/reports.html

This example shows how to create an IGV.js browser with more advanced configuration options, including custom track loading and feature highlighting.

```javascript
var options = {
    genome: "mm10",
    tracks: [
        {
            name: "Genes",
            url: "/data/genes.bed",
            displayMode: "EXPANDED"
        }
    ],
    roi: [
        {
            chr: "chr1",
            start: 100000,
            end: 150000,
            name: "Region of Interest"
        }
    ]
};

var browser = igv.createBrowser("#browserContainer", options);
```

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

### Initialize IGV.js Browser with Options

Source: https://github.com/igvteam/igv.js/blob/master/dev/misc/interactive-filtering.html

Creates an IGV.js browser instance with specified genome, locus, and track configurations. This is the initial setup for displaying genomic data.

```javascript
import igv from "../../js/index.js"
const options = {
  genome: "hg19",
  locus: "19:11,199,138-11,245,496",
  tracks: [
    {
      name: "Phase 3 WGS variants",
      type: "variant",
      format: "vcf",
      visibilityWindow: 3000000,
      url: "https://s3.amazonaws.com/1000genomes/release/20130502/ALL.wgs.phase3_shapeit2_mvncall_integrated_v5b.20130502.sites.vcf.gz",
      indexURL: "https://s3.amazonaws.com/1000genomes/release/20130502/ALL.wgs.phase3_shapeit2_mvncall_integrated_v5b.20130502.sites.vcf.gz.tbi"
    }
  ]
}
var igvDiv = document.getElementById("igvDiv")
window.igv = igv
const browser = await igv.createBrowser(igvDiv, options)
window.igvBrowser = browser
```

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

### Create Multiple IGV Browsers

Source: https://github.com/igvteam/igv.js/blob/master/dev/misc/multiple-browsers.html

Initializes four IGV browser instances with distinct configurations for genomes, loci, and tracks. This example showcases creating browsers in parallel using async/await.

```javascript
const config_a = {
  genome: "hg19",
  locus: 'egfr',
  tracks: [
    { "url": "https://s3.amazonaws.com/igv.org.demo/GBM-TP.seg.gz", "indexed": false, "isLog": true, "name": "GBM Copy # (TCGA Broad GDAC)" }
  ]
}
const config_b = {
  genome: "hg19",
  locus: 'myc',
  tracks: [
    { "url": "https://www.encodeproject.org/files/ENCFF356YES/@@download/ENCFF356YES.bigWig", "name": "ctcf bigwig" }
  ]
};

(async () => {
  const ba = await igv.createBrowser(document.getElementById("ba"), config_a)
  const bb = await igv.createBrowser(document.getElementById("bb"), config_b)
  const bc = await igv.createBrowser(document.getElementById("bc"), config_a)
  const bd = await igv.createBrowser(document.getElementById("bd"), config_b)

  // [ ba, bb, bc, bd ].forEach(browser => browser.alert.present(`ALERT: ${ browser.namespace }`))
})()
```

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

### Create CNVpytor Track Browser

Source: https://github.com/igvteam/igv.js/blob/master/dev/cnvpytor/cnvpytorTrackIndexed.html

Example of creating an IGV.js browser with a CNVpytor indexed track. Ensure the igv.js library is imported.

```javascript
import igv from "../../js/index.js"

const options = {
    genome: "hg19",
    locus: "chr16",
    tracks: [
        {
            type: "cnvpytor",
            name: "HepG2 Pytor indexed",
            indexed: true,
            url: "https://igv-genepattern-org.s3.amazonaws.com/test/hdf5/HepG2_WGS.indexed.pytor"
        }
    ]
}

igv.createBrowser(document.getElementById('igvDiv'), options)
```

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

### Loading PacBio Data from a Data URI

Source: https://github.com/igvteam/igv.js/blob/master/dev/datauri/dataURI_pacbio.html

This example demonstrates how to load PacBio data directly from a Data URI. Ensure the Data URI is correctly formatted and contains valid PacBio data.

```javascript
var dataURI = "data:application/vnd.pacbio.bam+json;base64,eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKK92w7wPyIB_Z_3j03j9wz1fW9o_j_fQ";

var options = {
    genome: "hg19",
    locus: "chr1:10000-20000",
    dataURIs: [dataURI]
};

IGV.createBrowser(document.getElementById("igv-div"), options);
```

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

### Write PacBio Data URI

Source: https://github.com/igvteam/igv.js/blob/master/dev/datauri/dataURI_pacbio.html

Example of writing PacBio sequencing data to a Data URI. This allows for embedding data directly within other documents or applications.

```javascript
function writeDataUri(data) {
  // Implementation to write data to a URI
  const uri = "data:application/octet-stream;base64," + btoa(data);
  console.log('Generated Data URI:', uri);
  return uri;
}
```

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

### Read PacBio Data URI

Source: https://github.com/igvteam/igv.js/blob/master/dev/datauri/dataURI_pacbio.html

Example of reading PacBio sequencing data from a Data URI. This is useful for accessing data stored in a compact, self-contained format.

```javascript
function readDataUri(uri) {
  // Implementation to read data from a URI
  console.log('Reading data from URI:', uri);
  // ... actual data reading logic ...
  return "data";
}
```

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

### Create CNVpytor Track Browser

Source: https://github.com/igvteam/igv.js/blob/master/dev/cnvpytor/cnvpytorTrackNoIndex.html

Example of creating an IGV.js browser with a CNVpytor track. Ensure the CNVpytor data URL is correctly specified. Loading may take several minutes.

```javascript
import igv from "../../js/index.js"

const options = {
  genome: "hg19",
  locus: "chr16",
  tracks: [
    {
      type: "cnvpytor",
      name: "HepG2 Pytor",
      url: "https://storage.googleapis.com/cnvpytor_data/HepG2_WGS.pytor"
    }
  ]
}

igv.createBrowser(document.getElementById('igvDiv'), options)
```

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

### Generating a Data URI for PacBio Data

Source: https://github.com/igvteam/igv.js/blob/master/dev/datauri/dataURI_pacbio.html

Example of how to create a Data URI from PacBio sequencing data. This can be used to embed data within HTML or JavaScript files.

```javascript
function createPacBioDataUri(pacBioData) {
  const jsonData = JSON.stringify(pacBioData);
  const base64Data = btoa(jsonData);
  return `data:application/json;base64,${base64Data}`;
}

const myPacBioData = {
  sequence: 'ATGCATGC',
  quality: 'JJJJJJJJ'
};

const dataUri = createPacBioDataUri(myPacBioData);
console.log('Generated Data URI:', dataUri);
```

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

### Reading PacBio Data with Data URI

Source: https://github.com/igvteam/igv.js/blob/master/dev/datauri/dataURI_pacbio.html

Example of reading PacBio sequencing data directly from a Data URI. This is useful for embedding small datasets or for testing purposes.

```javascript
function readPacBioDataUri(dataUri) {
  // In a real scenario, you would parse the dataUri and load the PacBio data.
  // This is a placeholder for the actual data loading logic.
  console.log('Loading PacBio data from:', dataUri);
  // Example: return fetch(dataUri).then(response => response.json());
  return Promise.resolve({ sequence: 'AGCTAGCT', quality: 'IIIIIIII' }); // Mock data
}

const pacBioDataUri = 'data:application/json;base64,eyJzZXF1ZW5jZSI6IkFHQ1RBR1NUQSIsImNvbXBsZW1lbnQiOiJUQ1BHVEdDQVQifQ==';
readPacBioDataUri(pacBioDataUri).then(data => {
  console.log('PacBio data loaded:', data);
});
```

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

### Configure IGV.js with a PacBio BAM Data URI

Source: https://github.com/igvteam/igv.js/blob/master/dev/datauri/dataURI_pacbio.html

Example of how to configure IGV.js to load PacBio BAM data directly from a Data URI. This bypasses the need for a separate file URL.

```javascript
const igvOptions = {
  genome: 'hg19',
  locus: 'chr1:1000-2000',
  tracks: [
    {
      name: 'PacBio BAM',
      url: bamDataUri, // Use the Data URI created previously
      indexURL: '', // Index is often embedded or not needed for small files
      type: 'alignment',
      format: 'bam'
    }
  ]
};

IGV.createBrowser(document.getElementById('igv-container'), igvOptions);
```

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

### Load PacBio BAM via Data URI

Source: https://github.com/igvteam/igv.js/blob/master/dev/datauri/dataURI_pacbio.html

Example of loading a PacBio BAM file using a Data URI in IGV.js. This requires the BAM file content to be Base64 encoded.

```javascript
var xhr = new XMLHttpRequest();
var url = "/data/pacbio/HG00103.pacbio.bam";
xhr.open("GET", url, true);
xhr.responseType = "arraybuffer";
xhr.onload = function () {
    if (xhr.status === 200) {
        var bb = new Blob([xhr.response]);
        var reader = new FileReader();
        reader.onload = function (event) {
            var dataUri = event.target.result;
            var genome = "hg19";
            var options = {
                "genome": genome,
                "locus": "chr1:10000-11000",
                "dataURIs": {
                    "/data/pacbio/HG00103.pacbio.bam": dataUri
                }
            };
            igv.createBrowser(document.getElementById("igv-div"), options);
        };
        reader.readAsDataURL(bb);
    }
};
xhr.send();
```

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

### Get a Track by Name

Source: https://github.com/igvteam/igv.js/blob/master/dev/misc/reports.html

This example shows how to retrieve a track object from the browser using its name. This is useful for manipulating or removing specific tracks.

```javascript
var geneTrack = browser.getTrackByName("Genes");
if (geneTrack) {
    console.log("Found gene track:", geneTrack);
}
```

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

### Create IGV.js Browser with VCF and Sample Info

Source: https://github.com/igvteam/igv.js/blob/master/dev/sampleInfo/vcf.html

Initializes an IGV.js browser with a VCF track and sample information panel. Ensure the IGV.js library is imported.

```javascript
import igv from '../../js/index.js'

const config = {
    "genome": "hg38",
    "locus": "chr22:36,655,100-36,656,060",
    "sampleinfo": [
        {
            "url": "https://raw.githubusercontent.com/igvteam/igv-data/refs/heads/main/data/test/vcf/sampleinfo/integrated_call_samples.panel"
        }
    ],
    "tracks": [
        {
            "url": "https://raw.githubusercontent.com/igvteam/igv-data/refs/heads/main/data/test/vcf/sampleinfo/genotypes.vcf",
            "name": "1KG Genotypes",
            "order": 0,
            "format": "vcf",
            "type": "variant",
            "height": 250,
            "color": "rgb(0,0,150)"
        }
    ]
}

const browser = await igv.createBrowser(document.getElementById('myDiv'), config)
```

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

### Get Current Browser State

Source: https://github.com/igvteam/igv.js/blob/master/dev/misc/reports.html

This example shows how to retrieve the current state of the IGV.js browser, including the current locus and loaded tracks.

```javascript
var currentState = browser.getState();
console.log(currentState);
```

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

### Load, Clear, and Get ROIs with IGV.js

Source: https://github.com/igvteam/igv.js/blob/master/dev/roi/roi-api.html

This example demonstrates how to initialize an IGV.js browser with ROI functionality enabled, and then use buttons to load a predefined set of ROIs, clear all loaded ROIs, and retrieve and display user-defined ROIs. Ensure you have corresponding HTML elements with IDs 'myDiv', 'roi-load-button', 'roi-clear-button', 'roi-get-button', and 'user-defined-rois'.

```javascript
import igv from "../../js/index.js"

const browser_config = {
    locus: "chr1:67,646,911-67,676,107",
    genome: "hg19",
    showROITable: true,
    tracks: [
        {
            name: 'Some Features',
            url: 'https://s3.amazonaws.com/igv.org.test/data/roi/some_features.bed',
            indexed: false,
        }
    ]
}

const roi_configs = [
    {
        color: "rgba(237,72,155,0.72)",
        features: [
            { chr: "chr1", start: 67655415, end: 67655611 },
            { chr: "chr1", start: 67664225, end: 67666281 }
        ]
    },
];

(async () => {
    const browser = await igv.createBrowser(document.getElementById('myDiv'), browser_config)

    document.getElementById("roi-load-button").addEventListener('click', () => browser.loadROI(roi_configs))
    document.getElementById("roi-clear-button").addEventListener('click', () => browser.clearROIs())
    document.getElementById("roi-get-button").addEventListener('click', async () => {
        const div = document.getElementById("user-defined-rois")
        div.innerHTML = ""
        const list = document.createElement("ul")
        div.appendChild(list)
        const rois = await browser.getUserDefinedROIs()
        if (rois) {
            for (let r of rois) {
                const li = document.createElement('li')
                li.innerText = `${r.chr}:${r.start + 1}-${r.end}`
                list.appendChild(li)
            }
        }
    })
})()
```

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

### Load Sample Information

Source: https://github.com/igvteam/igv.js/blob/master/dev/sampleInfo/sampleinfo-load.html

Sets up an event listener for a button that loads predefined sample information into the browser. This allows for programmatic enrichment of track data with metadata.

```javascript
document.getElementById('loadSampleInfoButton').addEventListener('click', () => {
  browser.loadSampleInfo(sampleInfo)
});

const sampleInfo = {
  "TRIBE\_p\_TCGAaffx\_B1\_2\_GBM\_Nsp\_GenomeWideSNP\_6\_A01\_155716": {
    "Subtype": "Classical",
    "sil\_width": -0.135526414,
    "GENDER": "FEMALE",
    "KarnScore": 80,
    "AgeAtFirstDiagnosis": 45,
    "Secondary|or|Recurrent": "Rec",
    "Survival|(days)": 221,
    "VITALSTATUS": "DEAD",
    "Censured": 0,
    "MGMT\_methylated": "-",
    "%|Tumor|Nuclei": 97.5,
    "%|Necrosis": 0
  },
  "TRIBE\_p\_TCGAaffx\_B1\_2\_GBM\_Nsp\_GenomeWideSNP\_6\_A03\_155748": {
    "Subtype": "Neural",
    "sil\_width": -0.069669747,
    "GENDER": "MALE",
    "KarnScore": "NA",
    "AgeAtFirstDiagnosis": "NA",
    "Secondary|or|Recurrent": "No",
    "Survival|(days)": "NA",
    "VITALSTATUS": "DEAD",
    "Censured": 0,
    "MGMT\_methylated": "-",
    "%|Tumor|Nuclei": 97.5,
    "%|Necrosis": 5
  },
  "TRIBE\_p\_TCGAaffx\_B1\_2\_GBM\_Nsp\_GenomeWideSNP\_6\_A05\_155780": {
    "Subtype": "Proneural",
    "sil\_width": 0.207223343,
    "GENDER": "MALE",
    "KarnScore": 100,
    "AgeAtFirstDiagnosis": 50,
    "Secondary|or|Recurrent": "No",
    "Survival|(days)": 144,
    "VITALSTATUS": "DEAD",
    "Censured": 0,
    "MGMT\_methylated": "-",
    "%|Tumor|Nuclei": 100,
    "%|Necrosis": 12.5
  },
  "SHUNT\_p\_TCGA\_sigwga\_Affx\_Sty\_GenomeWideSNP\_6\_A03\_228722": {
    "Subtype": "Mesenchymal",
    "sil\_width": 0.343562936,
    "GENDER": "MALE",
    "KarnScore": "NA",
    "AgeAtFirstDiagnosis": 59,
    "Secondary|or|Recurrent": "No",
    "Survival|(days)": 345,
    "VITALSTATUS": "DEAD",
    "Censured": 0,
    "MGMT\_methylated": "-",
    "%|Tumor|Nuclei": 97.5,
    "%|Necrosis": 7.5
  },
  "TRIBE\_p\_TCGAaffx\_B1\_2\_GBM\_Nsp\_GenomeWideSNP\_6\_A07\_155812": {
    "Subtype": "Mesenchymal",
    "sil\_width": 0.170480132,
    "GENDER": "FEMALE",
    "KarnScore": 90,
    "AgeAtFirstDiagnosis": 56,
    "Secondary|or|Recurrent": "No",
    "Survival|(days)": 558,
    "VITALSTATUS": "DEAD",
    "Censured": 0,
    "MGMT\_methylated": "-",
    "%|Tumor|Nuclei": 100,
    "%|Necrosis": 7.5
  },
  "TRIBE\_p\_TCGAaffx\_B1\_2\_GBM\_Nsp\_GenomeWideSNP\_6\_A09\_155844": {
    "Subtype": "Proneural",
    "sil\_width": 0.01155373,
    "GENDER": "FEMALE",
    "KarnScore": 90,
    "AgeAtFirstDiagnosis": 42,
    "Secondary|or|Recurrent": "Rec",
    "Survival|(days)": 187,
    "VITALSTATUS": "DEAD",
    "Censured": 0,
    "MGMT\_methylated": "-",
    "%|Tumor|Nuclei": 100,
    "%|Necrosis": 7.5
  },
  "TRIBE\_p\_TCGAaffx\_B1\_2\_GBM\_Nsp\_GenomeWideSNP\_6\_A11\_155876": {
    "Subtype": "Classical",
    "sil\_width": 0.262354644,
    "GENDER": "FEMALE",
    "KarnScore": 90,
    "AgeAtFirstDiagnosis": 61,
    "Secondary|or|Recurrent": "No",
    "Survival|(days)": 322,
    "VITALSTATUS": "DEAD",
    "Censured": 0,
    "MGMT\_methylated": "-",
    "%|Tumor|Nuclei": 100,
    "%|Necrosis": 5
  },
  "TRIBE\_p\_TCGAaffx\_B1\_2\_GBM\_Nsp\_GenomeWideSNP\_6\_B03\_155750\_2": {
    "Subtype": "Proneural",
    "sil\_width": 0.421156343,
    "GENDER": "FEMALE",
    "KarnScore": 80,
    "AgeAtFirstDiagnosis": 22,
    "Secondary|or|Recurrent": "Sec",
    "Survival|(days)": 493,
    "VITALSTATUS": "DEAD",
    "Censured": 0,
    "MGMT\_methylated": "-",
    "%|Tumor|Nuclei": 100,
    "%|Necrosis": 5
  },
  "TRIBE\_p\_TCGAaffx\_B1\_2\_GBM\_Nsp\_GenomeWideSNP\_6\_B05\_155782": {
    "Subtype": "Proneural",
    "sil\_width": 0.276830393,
    "GENDER": "FEMALE",
    "KarnScore": 90,
    "AgeAtFirstDiagnosis": 19,
    "Secondary|or|Recurrent": "No",
    "Survival|(days)": 630,
    "VITALSTATUS": "DEAD",
    "Censured": 0,
    "MGMT\_methylated": "-",
    "%|Tumor|Nuclei": 100,
    "%|Necrosis": 2.5
  },
  "TRIBE\_p\_TCGAaffx\_B1\_2\_GBM\_Nsp\_GenomeWideSNP\_6\_B07\_155814": {
    "Subtype": "Proneural",
    "sil\_width": 0.4144512,
    "GENDER": "MALE",
    "KarnScore": 100,
    "AgeAtFirstDiagnosis": 26,
    "Secondary|or|Recurrent": "No",
    "Survival|(days)": 2512,
    "VITALSTATUS": "DEAD",
    "Censured": 0,
    "MGMT\_methylated": "-",
    "%|Tumor|Nuclei": 100,
    "%|Necrosis": 2.5
  },
  "SHUNT\_p\_TCGA\_sigwga\_Affx\_Sty\_GenomeWideSNP\_6\_A06\_228770": {
    "Subtype": "Classical",
    "sil\_width": -0.066561833,
    "GENDER": "MALE",
    "KarnScore": "NA",
    "AgeAtFirstDiagnosis": 50,
    "Secondary|or|Recurrent": "No",
    "Survival|(days)": 627,
    "VITALSTATUS": "DEAD",
    "Censured": 0,
    "MGMT\_methylated": "-"
  }
}
```