83dbcadd73270e8b652fb4b5537235ca5727c7fa hiram Mon Dec 8 16:22:38 2025 -0800 fix the toga click code to use a simple local hideToggle class refs #35776 diff --git src/hg/hgc/togaClick.c src/hg/hgc/togaClick.c index 123f3246292..f446ec6bb5b 100644 --- src/hg/hgc/togaClick.c +++ src/hg/hgc/togaClick.c @@ -323,178 +323,170 @@ char startBuf[16], endBuf[16]; bigBedIntervalToRow(bb, chrom, startBuf, endBuf, fields, bbi->fieldCount); break; } printf("<h3>Projection v2 %s</h3>\n", item); struct togaDataBB *info = togaDataBBLoad(&fields[11], bbi->fieldCount); // Bogdan: why 11? 0-11 are bed-like fields likely printf("<B>Reference transcript: </B>%s<BR>", info->ref_link); printf("<B>Genomic locus in reference: </B>%s<BR>\n", info->ref_region); printf("<B>Genomic locus in query: </B>%s<BR>\n", info->query_region); printf("<B>Projection classification: </B>%s<BR>\n", info->status); printf("<B>Probability that query locus is orthologous: </B>%s<BR>\n", info->chain_score); // list of chain features (for orthology classification) -printf("<a data-toggle=\"collapse\" href=\"#collapseChain\">Show features used for ortholog probability</a>\n"); -printf("<div id=\"collapseChain\" class=\"panel-collapse collapse\">\n"); -printf("<ul>\n"); +printf("<span class='hideToggle' data-target='collapseChain' style='cursor: pointer;'>Show features used for ortholog probability:</span>\n"); +printf("<div id='collapseChain' style='display: none;'>\n"); +printf("<p><ul>\n"); printf("<li>Synteny (log10 value): %s</li>\n", info->chain_synteny); printf("<li>Global CDS fraction: %s</li>\n", info->chain_gl_cds_fract); printf("<li>Local CDS fraction: %s</li>\n", info->chain_loc_cds_fract); printf("<li>Local intron fraction: %s</li>\n", info->chain_intron_cov); printf("<li>Local CDS coverage: %s</li>\n", info->chain_exon_cov); printf("<li>Flank fraction: %s</li>\n", info->chain_flank); -printf("</ul>\n"); +printf("</ul></p>\n"); -printf("<br>\n<b>Feature description:</b>\n"); +printf("<p>\n<b>Feature description:</b>\n"); printf("For each projection (one reference transcript and one overlapping chain),\n"); printf("TOGA computes the following features by intersecting the reference coordinates of aligning\n"); printf("blocks in the chain with different gene parts (coding exons, UTR (untranslated region) exons, introns)\n"); -printf("and the respective intergenic regions.\n<br>\n"); +printf("and the respective intergenic regions.\n</p>\n"); -printf("We define the following variables:\n<ul>\n"); +printf("<p>We define the following variables:\n<ul>\n"); printf("<li>c: number of reference bases in the intersection between chain blocks and coding exons of the gene under consideration.</li>\n"); printf("<li>C: number of reference bases in the intersection between chain blocks and coding exons of all genes. </li>\n"); printf("<li>a: number of reference bases in the intersection between chain blocks and coding exons and introns of the gene under consideration. </li>\n"); printf("<li>A: number of reference bases in the intersection between chain blocks and coding exons and introns of all genes and the intersection\n"); printf("between chain blocks and intergenic regions (excludes UTRs). </li>\n"); printf("<li>f: number of reference bases in chain blocks overlapping the 10 kb flanks of the gene under consideration.\n"); printf("Alignment blocks overlapping exons of another gene that is located in these 10 kb flanks are ignored. </li>\n"); printf("<li>i: number of reference bases in the intersection between chain blocks and introns of the gene under consideration. </li>\n"); printf("<li>CDS (coding sequence): length of the coding region of the gene under consideration. </li>\n"); printf("<li>I: sum of all intron lengths of the gene under consideration. </li>\n"); -printf("</ul>\n"); -printf("Using these variables, TOGA computes the following features:\n"); +printf("</ul></p>\n"); +printf("<p>Using these variables, TOGA computes the following features:\n"); printf("<ul>\n"); printf("<li>"global CDS fraction" as C / A. Chains with a high value have alignments that largely overlap coding exons,"); printf("which is a hallmark of paralogous or processed pseudogene chains. In contrast, chains with a low value also align many "); printf("intronic and intergenic regions, which is a hallmark of orthologous chains. </li>\n"); printf("<li>"local CDS fraction" as c / a. Orthologous chains tend to have a lower value, as intronic "); printf("regions partially align. This feature is not computed for single-exon genes. </li>\n"); printf("<li>"local intron fraction" as i / I. Orthologous chains tend to have a higher value."); printf("This feature is not computed for single-exon genes. </li>\n"); printf("<li>"flank fraction" as f / 20,000. Orthologous chains tend to have higher values,"); printf("as flanking intergenic regions partially align. This feature is important to detect orthologous loci of single-exon genes. </li>\n"); printf("<li>"synteny" as log10 of the number of genes, whose coding exons overlap by at least one base aligning"); printf("blocks of this chain. Orthologous chains tend to cover several genes located in a conserved order, resulting in higher synteny values. </li>\n"); printf("<li>"local CDS coverage" as c / CDS, which is only used for single-exon genes. </li>\n"); -printf("</ul>\n"); +printf("</ul></p>\n"); -printf("</ul>\n</div>\n"); +printf("</div>\n"); printf("<hr style='margin-bottom:-0.5em;color:black;'>\n"); // show inact mut plot printf("<h4>Visualization of inactivating mutations on exon-intron structure</h4>\n"); printf("%s\n", info->svg_line); printf("<BR>Exons shown in grey are missing (often overlap assembly gaps).\nExons shown in"); printf(" red or blue are deleted or do not align at all.\nRed indicates that the exon deletion "); printf("shifts the reading frame, while blue indicates that exon deletion(s) are framepreserving.<br>\n"); // GLP features -printf("<a data-toggle=\"collapse\" href=\"#collapseGLP\">Show features used for transcript classification</a>\n"); -printf("<div id=\"collapseGLP\" class=\"panel-collapse collapse\">\n"); -printf("<ul>\n"); +printf("<span class='hideToggle data-target='collapseGLP' style='cursor: pointer;'>Show features used for transcript classification</span>\n"); +printf("<div id='collapseGLP' style='display: none;'>\n"); +printf("<p><ul>\n"); printf("<li>Percent intact, ignoring missing sequence: %s</li>\n", info->perc_intact_ign_M); printf("<li>Percent intact, treating missing as intact sequence: %s</li>\n", info->perc_intact_int_M); printf("<li>Proportion of intact codons: %s</li>\n", info->intact_codon_prop); printf("<li>Percent of CDS not covered by this chain (0 unless the chain covers only a part of the gene): %s</li>\n", info->ouf_prop); if (sameWord(info->mid_intact, ONE_)) { printf("<li>Middle 80 percent of CDS intact: %s</li>\n", YES_); } else { printf("<li>Middle 80 percent of CDS intact: %s</li>\n", NO_); } if (sameWord(info->mid_pres, ONE_)) { printf("<li>Middle 80 percent of CDS present: %s</li>\n", YES_); } else { printf("<li>Middle 80 percent of CDS present: %s</li>\n", NO_); } if (info->numExonsMutated != NULL && info->percentExonsMutated != NULL) { printf("<li>Number of exons with inactivating mutations: %s (%s%% of the present exons; threshold is 20%%)</li>\n", info->numExonsMutated, info->percentExonsMutated); } -printf("</ul>\n</div>\n"); +printf("</ul></p>\n</div>\n"); printf("<hr style='margin-bottom:-0.5em;color:black;'>\n"); printf("<h4>Predicted protein sequence</h4>\n"); -printf("<a data-toggle=\"collapse\" href=\"#collapseProt\">Show protein sequence of query</a>\n"); -printf("<div id=\"collapseProt\" class=\"panel-collapse collapse\">\n"); -// printf("<TT>{protein seq of the query without dashes or other things. Should end with *}\n"); -printf("<TT>"); +printf("<span class='hideToggle' data-target='collapseProt' style='cursor: pointer;'>Show protein sequence of query</span>\n"); +printf("<div id='collapseProt' style='display: none;'>\n"); +printf("<p><TT>"); HLprintQueryProtSeqForAli(info->prot_alignment); -printf("\n</TT>\n</div><BR>\n"); +printf("\n</TT></p>\n</div><BR>\n"); if (info->protseqFrameCorrected != NULL) { - printf("<a data-toggle=\"collapse\" href=\"#collapseProtFrameCorrected\">Show frame-corrected protein sequence of query (potential frameshifts are masked)</a>\n"); - printf("<div id=\"collapseProtFrameCorrected\" class=\"panel-collapse collapse\">\n"); - printf("<TT>"); + printf("<span class='hideToggle' data-target='collapseProtFrameCorrected' style='cursor: pointer;'>Show frame-corrected protein sequence of query (potential frameshifts are masked)</span>\n"); + printf("<div id='collapseProtFrameCorrected' style='display: none;'>\n"); + printf("<p><TT>"); print_with_newlines(info->protseqFrameCorrected); - printf("\n</TT>\n</div>\n"); + printf("\n</TT></p>\n</div>\n"); } if (info->CDSseq != NULL) { printf("<hr style='margin-bottom:-0.5em;color:black;'>\n"); printf("<h4>Predicted coding (DNA) sequence</h4>\n"); - printf("<a data-toggle=\"collapse\" href=\"#collapseCDS\">Show coding sequence of query</a>\n"); - printf("<div id=\"collapseCDS\" class=\"panel-collapse collapse\">\n"); - printf("<TT>"); + printf("<span class='hideToggle' data-target='collapseCDS' style='cursor: pointer;'>Show coding sequence of query</span>\n"); + printf("<div id='collapseCDS' style='display: none;'>\n"); + printf("<p><TT>"); print_with_newlines(info->CDSseq); - printf("\n</TT>\n</div>\n"); + printf("\n</TT></p>\n</div>\n"); } // and show protein sequence printf("<hr style='margin-bottom:-0.5em;color:black;'>\n"); printf("<h4>Protein sequence alignment</h4>\n"); -printf("<a data-toggle=\"collapse\" href=\"#collapseProtAli\">Show alignment between reference and query</a>\n"); -printf("<div id=\"collapseProtAli\" class=\"panel-collapse collapse\">\n"); -printf("<TT>%s</TT>\n", info->prot_alignment); -printf("</div>\n"); +printf("<span class='hideToggle' data-target='collapseProtAli' style='cursor: pointer;'>Show alignment between reference and query</span>\n"); +printf("<div id='collapseProtAli' style='display: none;'>\n"); +printf("<p><TT>%s</TT>\n", info->prot_alignment); +printf("</p></div>\n"); // show inactivating mutations if required printf("<hr style='margin-bottom:-0.5em;color:black;'>\n"); printf("<h4>List of inactivating mutations</h4>\n"); -printf("<a data-toggle=\"collapse\" href=\"#collapseMuts\">Show inactivating mutations</a>\n"); -printf("<div id=\"collapseMuts\" class=\"panel-collapse collapse\">\n"); -printf("<table border = \"1\" width = \"640\">\n"); // init table +printf("<span class='hideToggle' data-target='collapseMuts' style='cursor: pointer;'>Show inactivating mutations</span>\n"); +printf("<div id='collapseMuts' style='display: none;'>\n"); +printf("<p><table border = \"1\" width = \"640\">\n"); // init table printf("<tr><th>Exon number</th><th>Codon number</th><th>Mutation class</th><th>Mutation</th><th>Treated as inactivating</th><th>Mutation ID</th>\n"); printf("</tr>\n"); printf("%s\n", info->inact_mut_html_table); -printf("</table>\n"); +printf("</table></p>\n"); printf("</div>\n\n"); // show exons data printf("<hr style='margin-bottom:-0.5em;color:black;'>\n"); printf("<h4>Exon alignments</h4>\n"); -printf("<a data-toggle=\"collapse\" href=\"#collapseExons\">Show exon sequences and features</a>\n"); -printf("<div id=\"collapseExons\" class=\"panel-collapse collapse\">\n"); -// printf("%s\n", info->exon_ali_string); -printf("%s\n", info->exon_ali_html); +printf("<span class='hideToggle' data-target'collapseExons' style='cursor: pointer;'>Show exon sequences and features</span>\n"); +printf("<div id='collapseExons' style='display: none;'>\n"); +printf("<p>%s</p>\n", info->exon_ali_html); printf("<hr style='margin-bottom:-0.5em;color:black;'>\n"); printf("</div>\n<BR><BR>\n"); -// TODO: check whether I need this -hPrintf("<link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css\">"); -hPrintf("<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>"); -hPrintf("<script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js\"></script>"); - - printTrackHtml(tdb); // and do I need this? } void doHillerLabTOGAGene(char *database, struct trackDb *tdb, char *item, char *table_name) /* Put up TOGA Gene track info. */ { //int start = cartInt(cart, "o"); char headerTitle[512]; char suffix[512]; strcpy(suffix, table_name); extractHLTOGAsuffix(suffix); safef(headerTitle, sizeof(headerTitle), "%s", item); genericHeader(tdb, headerTitle); printf("<h2>TOGA gene annotation</h2>\n"); @@ -531,40 +523,40 @@ sqlSafef(query, sizeof(query), "select * from %s where transcript='%s'", togaDataTableName, item); sr = sqlGetResult(conn, query); if ((row = sqlNextRow(sr)) != NULL) { info = togaDataLoad(row); // parse sql output // fill HTML template: printf("<B>Reference transcript: </B><A HREF=\"http://www.ensembl.org/Homo_sapiens/transview?transcript=%s\" target=_blank>%s</A><BR>", info->ref_trans_id, info->ref_trans_id); printf("<B>Genomic locus in reference: </B>%s<BR>\n", info->ref_region); printf("<B>Genomic locus in query: </B>%s<BR>\n", info->query_region); printf("<B>Projection classification: </B>%s<BR>\n", info->status); printf("<B>Probability that query locus is orthologous: </B>%s<BR>\n", info->chain_score); // list of chain features (for orthology classification) - printf("<a data-toggle=\"collapse\" href=\"#collapseChain\">Show features used for ortholog probability</a>\n"); - printf("<div id=\"collapseChain\" class=\"panel-collapse collapse\">\n"); - printf("<ul>\n"); + printf("<span class='hideToggle' data-target='collapseChain' style='cursor: pointer;'>Show features used for ortholog probability</span>\n"); + printf("<div id='collapseChain' style='display: none;'"); + printf("<p><ul>\n"); printf("<li>Synteny (log10 value): %s</li>\n", info->chain_synteny); printf("<li>Global CDS fraction: %s</li>\n", info->chain_gl_cds_fract); printf("<li>Local CDS fraction: %s</li>\n", info->chain_loc_cds_fract); printf("<li>Local intron fraction: %s</li>\n", info->chain_intron_cov); printf("<li>Local CDS coverage: %s</li>\n", info->chain_exon_cov); printf("<li>Flank fraction: %s</li>\n", info->chain_flank); - printf("</ul>\n"); + printf("</ul></p>\n"); printf("<br>\n<b>Feature description:</b>\n"); printf("For each projection (one reference transcript and one overlapping chain),\n"); printf("TOGA computes the following features by intersecting the reference coordinates of aligning\n"); printf("blocks in the chain with different gene parts (coding exons, UTR (untranslated region) exons, introns)\n"); printf("and the respective intergenic regions.\n<br>\n"); printf("We define the following variables:\n<ul>\n"); printf("<li>c: number of reference bases in the intersection between chain blocks and coding exons of the gene under consideration.</li>\n"); printf("<li>C: number of reference bases in the intersection between chain blocks and coding exons of all genes. </li>\n"); printf("<li>a: number of reference bases in the intersection between chain blocks and coding exons and introns of the gene under consideration. </li>\n"); printf("<li>A: number of reference bases in the intersection between chain blocks and coding exons and introns of all genes and the intersection\n"); printf("between chain blocks and intergenic regions (excludes UTRs). </li>\n"); printf("<li>f: number of reference bases in chain blocks overlapping the 10 kb flanks of the gene under consideration.\n"); printf("Alignment blocks overlapping exons of another gene that is located in these 10 kb flanks are ignored. </li>\n"); @@ -588,70 +580,70 @@ printf("<li>"local CDS coverage" as c / CDS, which is only used for single-exon genes. </li>\n"); printf("</ul>\n"); printf("</ul>\n</div>\n<BR>\n"); htmlHorizontalLine(); // show inact mut plot printf("<h4>Visualization of inactivating mutations on exon-intron structure</h4>\n"); printf("%s<BR>\n", info->svg_line); printf("<BR>Exons shown in grey are missing (often overlap assembly gaps).\nExons shown in"); printf(" red or blue are deleted or do not align at all.\nRed indicates that the exon deletion "); printf("shifts the reading frame, while blue indicates that exon deletion(s) are framepreserving.<br>\n"); // GLP features - printf("<a data-toggle=\"collapse\" href=\"#collapseGLP\">Show features used for transcript classification</a>\n"); - printf("<div id=\"collapseGLP\" class=\"panel-collapse collapse\">\n"); - printf("<ul>\n"); + printf("<span class='hideToggle' data-target='collapseGLP' style='cursor: pointer;'>Show features used for transcript classification</span>\n"); + printf("<div id='collapseGLP' style='display:none;'>\n"); + printf("<p><ul>\n"); printf("<li>Percent intact, ignoring missing sequence: %s</li>\n", info->perc_intact_ign_M); printf("<li>Percent intact, treating missing as intact sequence: %s</li>\n", info->perc_intact_int_M); printf("<li>Proportion of intact codons: %s</li>\n", info->intact_codon_prop); printf("<li>Percent of CDS not covered by this chain (0 unless the chain covers only a part of the gene): %s</li>\n", info->ouf_prop); if (sameWord(info->mid_intact, ONE_)) { printf("<li>Middle 80 percent of CDS intact: %s</li>\n", YES_); } else { printf("<li>Middle 80 percent of CDS intact: %s</li>\n", NO_); } if (sameWord(info->mid_pres, ONE_)) { printf("<li>Middle 80 percent of CDS present: %s</li>\n", YES_); } else { printf("<li>Middle 80 percent of CDS present: %s</li>\n", NO_); } - printf("</ul>\n</div>\n<BR>\n"); + printf("</ul></p>\n</div>\n<BR>\n"); printf("<HR ALIGN=\"CENTER\"><h4>Query protein sequence</h4><BR>"); - printf("<a data-toggle=\"collapse\" href=\"#collapseProt\">Show protein sequence of query</a>\n"); - printf("<div id=\"collapseProt\" class=\"panel-collapse collapse\">\n"); - printf("<TT>{protein seq of the query without dashes or other things. Should end with *}\n"); - printf("<BR>\n</TT>\n</div>\n"); + printf("<span class='hideToggle' data-target='collapseProt' style='cursor: pointer;'>Show protein sequence of query</span>\n"); + printf("<div id='collapseProt' style='display:none;'>\n"); + printf("<p><TT>{protein seq of the query without dashes or other things. Should end with *}\n"); + printf("<BR>\n</TT></p>\n</div>\n"); // and show protein sequence htmlHorizontalLine(); printf("<h4>Protein sequence alignment</h4><BR>\n"); - printf("<a data-toggle=\"collapse\" href=\"#collapseProtAli\">Show alignment between reference and query</a>\n"); + printf("<span class='hideToggle' data-target='collapseProtAli' style='cursor: pointer;'>Show alignment between reference and query</span>\n"); printf("<div id=\"collapseProtAli\" class=\"panel-collapse collapse\">\n"); - printf("<TT>%s</TT><BR>\n", info->prot_alignment); + printf("<p><TT>%s</TT></p><BR>\n", info->prot_alignment); printf("</div>\n<BR><BR>\n"); // do not forget to free toga data struct togaDataFree(&info); } else { // no data found, need to report this - printf("Not found data for %s\n", item); + printf("<h3>No found data for %s</h3>\n", item); } sqlFreeResult(&sr); } // show inactivating mutations if required printf("<h4>List of inactivating mutations</h4><BR>\n"); if (hTableExists(database, togaInactMutTableName)) { char query[256]; struct sqlResult *sr = NULL; char **row; sqlSafef(query, sizeof(query), "select * from %s where transcript='%s'", togaInactMutTableName, item); sr = sqlGetResult(conn, query); printf("<a data-toggle=\"collapse\" href=\"#collapseMuts\">Show inactivating mutations</a>\n");