Template: Test area: Difference between revisions

Revision as of 16:07, 1 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

Transcript_name:	view more...
Distance:
GeneID:
HGNC/MGI_ID:
UniProt_ID:

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):

 document.addEventListener("DOMContentLoaded", function() {
   const itemList = document.getElementById("itemList");
   const viewToggle = document.getElementById("viewToggle");

   // リストの項目数が1以下の場合は"view more..."を非表示
   if (itemList.children.length <= 1) {
     viewToggle.style.display = "none";
   }
 });

 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>

@@ Line 72: / Line 72: @@
 	z-index: 100;
 }
+/* Transcript nameのためのCSS */
+  /* リストのスタイル */
+  .list-container {
+    position: relative;
+  }
+  /* リストを折りたたむスタイル */
+  .list-container ul {
+    max-height: 1.5em;
+    overflow: hidden;
+    transition: max-height 0.5s ease; /* スムーズなトランジション */
+  }
+  /* "view more..." ボタンのスタイル */
+  .view-toggle {
+    color: blue;
+    cursor: pointer;
+    font-size: 0.9em;
+    display: inline-block;
+    margin-top: 5px;
+  }
+  /* 展開後のリストスタイル */
+  .expanded ul {
+    max-height: 100em; /* リストが収まるだけの十分な高さ */
+  }
 </style>
 </html>
@@ Line 114: / Line 140: @@
 <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">Transcript_name:</th><td><div class="list-container" id="listContainer"><ul id="itemList">{{#arraymap: {{{transcript_name|}}} | | <li> | </li> }}</ul><span class="view-toggle" id="viewToggle" onclick="toggleList()">view more...</span></div></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>
@@ Line 149: / Line 175: @@
 <br>
 {{#if:{{{gene_symbol|}}}|<span class="section_head">TSS expression</span><includeonly>{{#gene_exptable:{{{species|}}}|{{{gene_symbol}}} }}</includeonly>| }}
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    const itemList = document.getElementById("itemList");
+    const viewToggle = document.getElementById("viewToggle");
+    // リストの項目数が1以下の場合は"view more..."を非表示
+    if (itemList.children.length <= 1) {
+      viewToggle.style.display = "none";
+    }
+  });
+  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>