Template: TSSDetailV4: Difference between revisions

Latest revision as of 16:00, 15 November 2024

Basic information about the TSS

TSS ID:	{{{tss_id}}}
Species:
Chr:

Start:
End:
Strand:

Source datasets

Protocol

TSS cluster detected^*

* The number of TSS cluster called data-sets (maximum 5)

cCREs annotation

Description:
Category:

* cCREs are candidates for cis regulatory elements generated from the subset of representative DNase hypersensitivity sites supported by either histone modifications or CTCF-binding data. Find more details here.

Gene and protein annotation

Nearest transcript id and distance:
GeneID:
HGNC/MGI_ID:
UniProt_ID:
Nearer transcript ids and distances:

Gene_name:
Gene_symbol:
Gene_synonyms:
Gene_source:

TATA-Box annotation

Distance to TSS:
Nearest PromoterID:
Entrez ID:
Nearest Unigene:
Nearest Refseq:
Nearest Ensembl:
Gene Name:
Gene Alias:
Gene Description:
Gene Type:
CpG%:
GC%:
TATA-Box(TBP)/Promoter/Homer Distance From Peak(sequence,strand,conservation):

@@ Line 72: / Line 72: @@
 	z-index: 100;
 }
+/* Transcript nameのためのCSS */
+  /* リストのスタイル */
+  .list-container {
+    position: relative;
+  }
+  /* リストを折りたたむスタイル */
+  .list-container ul {
+    margin-left: 0;
+    max-height: 1.5em;
+    overflow: hidden;
+    transition: max-height 1.0s ease; /* スムーズなトランジション */
+  }
+  .list-container ul li {
+    list-style-type: none; /* マーカーを非表示にする */
+  }
+  /* "view more..." ボタンのスタイル */
+  .view-toggle {
+    color: blue;
+    cursor: pointer;
+    font-size: 0.9em;
+    display: inline-block;
+    margin-top: 5px;
+  }
+  .view-toggle:hover {
+    text-decoration: underline;
+  }
+  /* 展開後のリストスタイル */
+  .expanded ul {
+    max-height: 100em; /* リストが収まるだけの十分な高さ */
+  }
 </style>
+<script>
+function toggleList() {
+	const container = document.getElementById("listContainer");
+	const toggleText = document.getElementById("viewToggle");
+	container.classList.toggle("expanded");
+	if (container.classList.contains("expanded")) {
+		toggleText.textContent = "close";
+	} else {
+		toggleText.textContent = "view more...";
+	}
+}
+</script>
 </html>
 <span class="section_head">Basic information about the TSS</span>
@@ Line 114: / Line 161: @@
 <table border="0" style="width:560px"><tr><td style="width:36%;">
 <table class="inner" >
-<tr><th scope="row" align="left">Transcript_name:</th><td>{{{transcript_name|}}}</td></tr>
+<tr><th scope="row" align="left">Nearest transcript id and distance:</th><td>{{#if:{{{transcript_name|}}}|{{#replace:{{{transcript_name|}}}| |:{{{distance|}}}<br/>}}:{{{distance|}}}|}}</td></tr>
-<tr><th scope="row" align="left">Distance:</th><td>{{{distance|}}}</td></tr>
 <tr><th scope="row" align="left">GeneID:</th><td>{{#if:{{{gene_id|}}}|[[EntrezGene:{{{gene_id|}}}|{{{gene_id}}}]]|}}</td></tr>
 <tr><th scope="row" align="left">HGNC/MGI_ID:</th><td>{{{hgnc_mgi_id|}}}</td></tr>
 <tr><th scope="row" align="left">UniProt_ID:</th><td>{{{uniprot_id|}}}</td></tr>
+<tr><th scope="row" align="left">Nearer transcript ids and distances:</th><td><div class="list-container" id="listContainer"><ul>{{#arraymap:{{{nearest_transcripts|}}}|\s|x|<li>x</li>|\s}}</ul>{{#ifexpr: {{#count:{{{nearest_transcripts|}}}|:}} > 1 |<html><span class="view-toggle" id="viewToggle" onclick="toggleList()">view more...</span></html>}}</div></td></tr>
 </table></td><td style="width:4%;"></td><td style="width:60%;">
 <table class="inner" >
@@ Line 180: / Line 227: @@
 <!-- {{#set:distance={{{distance}}}}} -->
 <!-- {{#set:num_trans={{{num_trans|}}}}} -->
-<!--{{#set:all_trans={{{all_trans}}}}} -->
+{{#set:all_trans={{{all_trans}}}}}
 {{#set:tss_classification={{{tss_classification|}}}}}
 {{#set:tss_id_v3={{{tss_id_v3|}}}}}
@@ Line 187: / Line 234: @@
 {{#set:ccre_category={{{ccre_category|}}}}}
 {{#set:reftss_version={{{reftss_version|}}}}}
+{{#set:nearest_transcripts={{{nearest_transcripts|}}}}}
 [[Category:TSS_IDs]]