Merge pull request #21 from agduncan94/release/0.1.1

Release/0.1.1
LincolnSteinLab · Aug 16, 2019 · d94e38f · d94e38f
2 parents 80f0a15 + 6b75b80
commit d94e38f
Show file tree

Hide file tree

Showing 20 changed files with 700 additions and 108 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# GDC JBrowse Plugin - Faceted Search and New Store Classes
+# GDC JBrowse Plugin
 A plugin for [JBrowse](https://jbrowse.org/) for viewing [GDC](https://gdc.cancer.gov/) data. For any bugs, issues, or feature recommendations please create an issue through GitHub.
 
 # Installation and Setup
@@ -9,8 +9,8 @@ Quick setup of JBrowse - https://github.com/GMOD/jbrowse/#install-jbrowse-from-g
 See [JBrowse - Installing Plugins](https://jbrowse.org/docs/plugins.html) for a general approach to installing plugins.
 
 For installing gdc-viewer plugin:
-1) Copy the gdc-viewer folder into the JBrowse `plugins` directory.
-2) Add 'gdc-viewer' to the array of plugins in the `jbrowse_conf.json`.
+1. Copy the gdc-viewer folder into the JBrowse `plugins` directory.
+2. Add 'gdc-viewer' to the array of plugins in the `jbrowse_conf.json`.
 
 ## 3. Install Reference Sequence Data
 Now setup the reference sequence used. GDC requires the GRCh38 Human reference files, which can be found at http://ftp.ensembl.org/pub/release-94/fasta/homo_sapiens/dna/. You'll want to download the files of the form `Homo_sapiens.GRCh38.dna.chromosome.1.fa.gz`.
@@ -33,13 +33,13 @@ Note that you can specify multiple fast in one command by doing `--fasta fasta1.
 ## 4. Adding new tracks
 We have some basic example tracks in `data/tracks.conf`. You can also add new tracks by using the GDC dialog accessible within JBrowse. These are present in the menu under `GDC`.
 
-### A. Explore GDC
+### A. Explore cases, genes and mutations
 This dialog is similar to the Exploration section of the GDC data portal. As you apply facets on the left-hand side, updated results will be shown on the right side. You can create donor specific SSM, Gene, and CNV tracks, along with GDC-wide SSM, Gene and CNV tracks.
 
-### B. View GDC Projects
+### B. Explore Projects
 This dialog shows the projects present on the GDC Data Portal. You can add SSM, Gene, and CNV tracks for each project.
 
-### C. View GDC Primary Sites
+### C. Explore Primary Sites
 This dialog shows the primary sites present on the GDC Data Portal. You can add SSM, Gene, and CNV tracks for each primary site.
 
 ## 5. Run JBrowse
@@ -115,7 +115,7 @@ Example Track:
 ```
 [tracks.GDC_SSM]
 storeClass=gdc-viewer/Store/SeqFeature/SimpleSomaticMutations
-type=JBrowse/View/Track/CanvasVariants
+type=gdc-viewer/View/Track/CanvasVariants
 key=GDC SSM
 metadata.datatype=SSM
 unsafePopup=true
@@ -138,7 +138,7 @@ Example Track:
 ```
 [tracks.GDC_CNV]
 storeClass=gdc-viewer/Store/SeqFeature/CNVs
-type=JBrowse/View/Track/Wiggle/XYPlot
+type=gdc-viewer/View/Track/Wiggle/XYPlot
 key=GDC CNV
 metadata.datatype=CNV
 autoscale=local
@@ -155,4 +155,12 @@ filters={"op":"=","content":{"field":"cnv_change","value":["Gain"]}}
 You can set the max number of CNVs to return with the `size` field. It defaults to 500.
 You can view case specific CNVs by setting the `case` field.
 
-Note: You can also use a density plot for the copy number data. Simply change the type from `JBrowse/View/Track/Wiggle/XYPlot` to `JBrowse/View/Track/Wiggle/Density.`
+Note: You can also use a density plot for the copy number data. Simply change the type from `JBrowse/View/Track/Wiggle/XYPlot` to `JBrowse/View/Track/Wiggle/Density.`
+
+# Export Types
+The following export types are supported by both GDC Genes and SSMs. To export, select `Save track data` in the track dropdown. Note that not all track information is carried over to the exported file.
+* BED
+* GFF3
+* Sequin Table
+* CSV
+* Track Config
diff --git a/data/tracks.conf b/data/tracks.conf
@@ -1,22 +1,22 @@
 [tracks.GDC_SSM]
 storeClass=gdc-viewer/Store/SeqFeature/SimpleSomaticMutations
-type=JBrowse/View/Track/CanvasVariants
+type=gdc-viewer/View/Track/CanvasVariants
 key=GDC SSM
 metadata.datatype=SSM
 unsafePopup=true
 fmtDetailValue_projects=function(value) { return "<div id='projects-gdc-" + value +  "'>Loading...</div>";}
 
 [tracks.GDC_Genes]
 storeClass=gdc-viewer/Store/SeqFeature/Genes
-type=JBrowse/View/Track/CanvasVariants
+type=gdc-viewer/View/Track/CanvasVariants
 key=GDC Genes
 metadata.datatype=Gene
 unsafePopup=true
 fmtDetailValue_projects=function(value) { return "<div id='projects-gdc-" + value +  "'>Loading...</div>";}
 
 [tracks.GDC_CNV]
 storeClass=gdc-viewer/Store/SeqFeature/CNVs
-type=JBrowse/View/Track/Wiggle/XYPlot
+type=gdc-viewer/View/Track/Wiggle/XYPlot
 key=GDC CNV
 metadata.datatype=CNV
 autoscale=local

diff --git a/gdc-viewer/css/main.css b/gdc-viewer/css/main.css
@@ -10,6 +10,11 @@ table.results-table td {
     padding: .2rem .4rem;
 }
 
+table.results-table th {
+    border: 1px solid #b3b3b3;
+    padding: .2rem .4rem;
+}
+
 table.results-table tr:nth-child(odd) {
     background-color: #f2f2f2;
 }
@@ -91,4 +96,69 @@ table.results-table tr:nth-child(odd) {
 
 .dijitContentPane.dijitAccordionContainer-child.dijitAccordionContainer-dijitContentPane {
     width: 100% !important;
+}
+
+.popup-dialog {
+    width: 80% !important;
+}
+
+.value_container.projects {
+    width: 100% !important;
+}
+
+.value.projects {
+    width: 100% !important;
+    padding: 0 !important;
+}
+
+.value_container.mutation_consequences {
+    width: 100% !important;
+}
+
+.value.mutation_consequences {
+    width: 100% !important;
+    padding: 0 !important;
+}
+
+.value_container.annotations {
+    width: 100% !important;
+}
+
+.value.annotations {
+    width: 100% !important;
+    padding: 0 !important;
+}
+
+.value_container.feature_sequence {
+    width: 100% !important;
+}
+
+.value.feature_sequence {
+    width: 100% !important;
+    padding: 0 !important;
+}
+
+.popup-table {
+    width: 100% !important;
+    padding-left: 1em !important;
+    padding-right:1em !important;
+    padding-top: 0.3em !important;
+}
+
+.popup-table-header {
+    border: 1px solid #b3b3b3 !important;
+    padding: .2rem .2rem !important;
+}
+
+.popup-table-td {
+    border: 1px solid #e6e6e6 !important;
+    padding: .2rem .2rem !important;
+}
+
+.feature-detail {
+    width: 100% !important;
+}
+
+.fastaView > .fasta {
+    width: 80% !important;
 }
diff --git a/gdc-viewer/js/Model/GeneFeature.js b/gdc-viewer/js/Model/GeneFeature.js
@@ -101,41 +101,49 @@ get: function(name) {
  */
 createProjectTable: function(response) {
     var thisB = this;
-    var thStyle = 'border: 1px solid #e6e6e6; padding: .2rem .2rem;';
     var headerRow = `
         <tr style=\"background-color: #f2f2f2\">
-            <th style="${thStyle}">Project</th>
-            <th style="${thStyle}">Disease Type</th>
-            <th style="${thStyle}">Site</th>
-            <th style="${thStyle}"># SSM Affected Cases</th> 
-            <th style="${thStyle}"># CNV Gains</th>
-            <th style="${thStyle}"># CNV Losses</th>
+            <th class="popup-table-header">Project</th>
+            <th class="popup-table-header">Disease Type</th>
+            <th class="popup-table-header">Site</th>
+            <th class="popup-table-header"># SSM Affected Cases</th> 
+            <th class="popup-table-header"># CNV Gains</th>
+            <th class="popup-table-header"># CNV Losses</th>
         </tr>
     `;
 
-    var table = '<table style="width: 560px; border-collapse: \'collapse\'; border-spacing: 0;">' + headerRow;
+    var table = '<table class="popup-table" style="border-collapse: \'collapse\'; border-spacing: 0;">' + headerRow;
 
     var count = 0;
-    for (project of response.data.viewer.explore.cases.filtered.project__project_id.buckets) {
+    var projects = response.data.viewer.explore.cases.filtered.project__project_id.buckets;
+    for (project of projects) {
         var trStyle = '';
         if (count % 2 != 0) {
             trStyle = 'style=\"background-color: #f2f2f2\"';
         }
         var projectInfo = thisB.projects.find(x => x.node.project_id === project.key);
         var row = `<tr ${trStyle}>
-            <td style="${thStyle}"><a target="_blank"  href="https://portal.gdc.cancer.gov/projects/${project.key}">${project.key}</a></td>
-            <td style="${thStyle}">${thisB.printList(projectInfo.node.disease_type)}</td>
-            <td style="${thStyle}">${thisB.printList(projectInfo.node.primary_site)}</td>
-            <td style="${thStyle}">${thisB.getValueWithPercentage(project.doc_count, thisB.findProjectByKey(response.data.viewer.explore.cases.total.project__project_id.buckets, project.key))}</td>
-            <td style="${thStyle}">${thisB.getValueWithPercentage(thisB.findProjectByKey(response.data.viewer.explore.cases.gain.project__project_id.buckets, project.key), thisB.findProjectByKey(response.data.viewer.explore.cases.cnvTotal.project__project_id.buckets, project.key))}</td>
-            <td style="${thStyle}">${thisB.getValueWithPercentage(thisB.findProjectByKey(response.data.viewer.explore.cases.loss.project__project_id.buckets, project.key), thisB.findProjectByKey(response.data.viewer.explore.cases.cnvTotal.project__project_id.buckets, project.key))}</td>
+            <td class="popup-table-td"><a target="_blank"  href="https://portal.gdc.cancer.gov/projects/${project.key}">${project.key}</a></td>
+            <td class="popup-table-td">${thisB.printList(projectInfo.node.disease_type)}</td>
+            <td class="popup-table-td">${thisB.printList(projectInfo.node.primary_site)}</td>
+            <td class="popup-table-td">${thisB.getValueWithPercentage(project.doc_count, thisB.findProjectByKey(response.data.viewer.explore.cases.total.project__project_id.buckets, project.key))}</td>
+            <td class="popup-table-td">${thisB.getValueWithPercentage(thisB.findProjectByKey(response.data.viewer.explore.cases.gain.project__project_id.buckets, project.key), thisB.findProjectByKey(response.data.viewer.explore.cases.cnvTotal.project__project_id.buckets, project.key))}</td>
+            <td class="popup-table-td">${thisB.getValueWithPercentage(thisB.findProjectByKey(response.data.viewer.explore.cases.loss.project__project_id.buckets, project.key), thisB.findProjectByKey(response.data.viewer.explore.cases.cnvTotal.project__project_id.buckets, project.key))}</td>
             </tr>
         `;
 
         table += row;
         count++;
     }
 
+    if (projects.length == 0) {
+        table += `
+            <tr class="dc-popup-table-header">
+                <td colspan="6" class="popup-table-td" style="text-align: center;">No projects found</td>
+            </tr>
+        `;
+    }
+
     table += '</table>';
     return table;
 },

diff --git a/gdc-viewer/js/Model/SSMFeature.js b/gdc-viewer/js/Model/SSMFeature.js
@@ -95,37 +95,45 @@ get: function(name) {
  */
 createProjectTable: function(response) {
     var thisB = this;
-    var thStyle = 'border: 1px solid #e6e6e6; padding: .2rem .2rem;';
     var headerRow = `
-        <tr style=\"background-color: #f2f2f2\">
-            <th style="${thStyle}">Project</th>
-            <th style="${thStyle}">Disease Type</th>
-            <th style="${thStyle}">Site</th>
-            <th style="${thStyle}"># SSM Affected Cases</th> 
+        <tr style=\"background-color: #f2f2f2;\">
+            <th class="popup-table-header">Project</th>
+            <th class="popup-table-header">Disease Type</th>
+            <th class="popup-table-header">Site</th>
+            <th class="popup-table-header"># SSM Affected Cases</th>
         </tr>
     `;
 
-    var table = '<table style="width: 560px; border-collapse: \'collapse\'; border-spacing: 0;">' + headerRow;
+    var table = '<table class="popup-table" style="border-collapse: \'collapse\'; border-spacing: 0;">' + headerRow;
 
     var count = 0;
-    for (project of response.data.viewer.explore.cases.filtered.project__project_id.buckets) {
+    var projects = response.data.viewer.explore.cases.filtered.project__project_id.buckets;
+    for (project of projects) {
         var trStyle = '';
         if (count % 2 != 0) {
             trStyle = 'style=\"background-color: #f2f2f2\"';
         }
         var projectInfo = thisB.projects.find(x => x.node.project_id === project.key);
         var row = `<tr ${trStyle}>
-            <td style="${thStyle}"><a target="_blank"  href="https://portal.gdc.cancer.gov/projects/${project.key}">${project.key}</a></td>
-            <td style="${thStyle}">${thisB.printList(projectInfo.node.disease_type)}</td>
-            <td style="${thStyle}">${thisB.printList(projectInfo.node.primary_site)}</td>
-            <td style="${thStyle}">${thisB.getValueWithPercentage(project.doc_count, thisB.findProjectByKey(response.data.viewer.explore.cases.total.project__project_id.buckets, project.key))}</td>
+            <td class="popup-table-td"><a target="_blank"  href="https://portal.gdc.cancer.gov/projects/${project.key}">${project.key}</a></td>
+            <td class="popup-table-td">${thisB.printList(projectInfo.node.disease_type)}</td>
+            <td class="popup-table-td">${thisB.printList(projectInfo.node.primary_site)}</td>
+            <td class="popup-table-td">${thisB.getValueWithPercentage(project.doc_count, thisB.findProjectByKey(response.data.viewer.explore.cases.total.project__project_id.buckets, project.key))}</td>
             </tr>
         `;
 
         table += row;
         count++;
     }
 
+    if (projects.length == 0) {
+        table += `
+            <tr class="dc-popup-table-header">
+                <td colspan="4" class="popup-table-td" style="text-align: center;">No projects found</td>
+            </tr>
+        `;
+    }
+
     table += '</table>';
     return table;
 },

diff --git a/gdc-viewer/js/Store/SeqFeature/BaseSeqFeature.js b/gdc-viewer/js/Store/SeqFeature/BaseSeqFeature.js
@@ -40,7 +40,7 @@ function(
          * @return {string} a tag
          */
         createLinkWithId: function(link, id) {
-            return id ? "<a href='" + link + id + "' target='_blank'>" + id + "</a>" : "n/a";
+            return this.valueIsDefined(id) ? "<a href='" + link + id + "' target='_blank'>" + id + "</a>" : "n/a";
         },
 
         /**
@@ -51,7 +51,7 @@ function(
          * @return {string} a tag
          */
         createLinkWithIdAndName: function(link, id, name) {
-            return id ? "<a href='" + link + id + "' target='_blank'>" + name + "</a>" : "n/a";
+            return this.valueIsDefined(id) ? "<a href='" + link + id + "' target='_blank'>" + name + "</a>" : "n/a";
         },
 
         /**
@@ -60,7 +60,16 @@ function(
          * @return {string} pretty text
          */
         prettyText: function(text) {
-            return text && text !== null && text !== undefined ? text : 'n/a';
+            if (text && text !== null && text !== undefined && typeof text !== 'undefined') {
+                if (Array.isArray(text)) {
+                    return text.join(', ');
+                } else if (typeof text == 'number') {
+                    return text;
+                } else {
+                    return text.toString();
+                }
+            }
+            return 'n/a';
         },
 
         /**
@@ -112,5 +121,13 @@ function(
                 resolve({'getMetadata': function() {}});
             });
         },
+
+        /**
+         * True if value is defined, false otherwise
+         * @param {*} value 
+         */
+        valueIsDefined: function(value) {
+            return value && value !== null && value !== undefined && typeof value !== 'undefined' && value.length > 0;
+        }
     });
 });
diff --git a/gdc-viewer/js/Store/SeqFeature/Genes.js b/gdc-viewer/js/Store/SeqFeature/Genes.js
@@ -69,19 +69,20 @@ function(
             geneFeature = {
                 id: gene.gene_id,
                 data: {
+                    'entity_name': gene.gene_id,
                     'start': thisB.prettyText(gene.gene_start),
                     'end': thisB.prettyText(gene.gene_end),
                     'strand': thisB.prettyText(gene.gene_strand),
                     'type': 'Gene',
+                    'gene description': thisB.prettyText(gene.description),
                     'about': {
                         'biotype': thisB.prettyText(gene.biotype),
                         'gene name': thisB.prettyText(gene.name),
                         'id': thisB.prettyText(gene.gene_id),
                         'symbol': thisB.prettyText(gene.symbol),
                         'synonyms': thisB.prettyText(gene.synonyms)
                     },
-                    'gene description': thisB.prettyText(gene.description),
-                    'external references': {
+                    'references': {
                         'ncbi gene': thisB.createLinkWithId(NCBI_LINK, gene.external_db_ids.entrez_gene),
                         'uniprotkb swiss-prot': thisB.createLinkWithId(UNI_LINK, gene.external_db_ids.uniprotkb_swissprot),
                         'hgnc': thisB.createLinkWithId(HGNC_LINK, gene.external_db_ids.hgnc),