diff options
author | Nathan Fargo <32229490+ntfargo@users.noreply.github.com> | 2024-06-14 20:23:24 +0200 |
---|---|---|
committer | Nathan Fargo <32229490+ntfargo@users.noreply.github.com> | 2024-06-14 20:23:24 +0200 |
commit | d51e8c53ab81191075bd015ff45b2a523f4729a2 (patch) | |
tree | e5a7359a28b7d620bbc22496e673f4ff5287ee80 | |
parent | 731cf88db6cf148509ef19d039f5987534ad1c9e (diff) |
Changes
-rw-r--r-- | SequenceViewer/app/routes.py | 2 | ||||
-rw-r--r-- | SequenceViewer/app/static/genview.css | 21 | ||||
-rw-r--r-- | SequenceViewer/app/templates/view.html | 60 |
3 files changed, 66 insertions, 17 deletions
diff --git a/SequenceViewer/app/routes.py b/SequenceViewer/app/routes.py index 4031421..a196a90 100644 --- a/SequenceViewer/app/routes.py +++ b/SequenceViewer/app/routes.py @@ -34,7 +34,7 @@ def find_enzyme_sites(sequence, enzymes): for enzyme, start, end in enzyme_sites: highlighted_sequence += annotated_sequence[last_end:start] - highlighted_sequence += f'<span class="enzyme">{annotated_sequence[start:end]}</span>' + highlighted_sequence += f'<span class="enzyme" data-enzyme="{enzyme}">{annotated_sequence[start:end]}</span>' last_end = end highlighted_sequence += annotated_sequence[last_end:] diff --git a/SequenceViewer/app/static/genview.css b/SequenceViewer/app/static/genview.css index 9213276..3598f4f 100644 --- a/SequenceViewer/app/static/genview.css +++ b/SequenceViewer/app/static/genview.css @@ -15,7 +15,7 @@ --hr-border-color: #666; --container-background-color: #1e1e1e; --container-box-shadow-color: rgba(0, 0, 0, 0.5); - --enzyme-background-color: #ffeb3b; + --enzyme-background-color: #99d1ff; --enzyme-text-color: #000; } @@ -203,8 +203,25 @@ hr { .enzyme { background-color: var(--enzyme-background-color); color: var(--enzyme-text-color); - padding: 2px 4px; border-radius: 3px; + cursor: pointer; +} + +.enzyme:hover::after { + content: attr(data-enzyme); + position: absolute; + background-color: #333; + color: #fff; + padding: 2px 5px; + border-radius: 3px; + white-space: nowrap; + z-index: 10; +} + +.details { + max-height: 200px; /* Adjust as needed */ + overflow-y: auto; + display: none; /* Hide details sections initially */ } .row { diff --git a/SequenceViewer/app/templates/view.html b/SequenceViewer/app/templates/view.html index 378e3ce..d14739b 100644 --- a/SequenceViewer/app/templates/view.html +++ b/SequenceViewer/app/templates/view.html @@ -12,23 +12,55 @@ <a href="{{ url_for('index') }}">View Another File</a> <hr> <ul> - {% for record in sequences %} - <li> + {% for record in sequences %} + <li id="{{ record.id }}"> <strong>ID: {{ record.id }}</strong><br> <pre>{{ record.sequence|safe }}</pre> - {% if record.features %} - <details> - <summary>Features:</summary> - <ul> - {% for feature in record.features %} - <li>{{ feature }}</li> - {% endfor %} - </ul> - </details> - {% endif %} + <div class="details" id="details-{{ record.id }}"> + <h3>Features</h3> + <button class="close-details">Close</button> + <ul> + {% for feature in record.features %} + <li> + <a href="#{{ record.id }}"> + {{ feature[0] }} at position {{ feature[1] }}-{{ feature[2] }} + </a> + </li> + {% endfor %} + </ul> + </div> </li> {% endfor %} - </ul> </div> + <script> + document.querySelectorAll('.enzyme').forEach(function(el) { + el.addEventListener('click', function() { + const id = this.closest('li').id; + const details = document.getElementById('details-' + id); + if (details.style.display === 'none' || details.style.display === '') { + details.style.display = 'block'; + } else { + details.style.display = 'none'; + } + }); + }); + + document.querySelectorAll('.close-details').forEach(function(el) { + el.addEventListener('click', function() { + this.parentElement.style.display = 'none'; + }); + }); + + function highlightFeature(id, start, end) { + const sequence = document.querySelector('#' + id + ' pre'); + const text = sequence.textContent; + const before = text.slice(0, start); + const feature = text.slice(start, end); + const after = text.slice(end); + + sequence.innerHTML = `${before}<span class="highlight">${feature}</span>${after}`; + window.location.hash = id; + } + </script> </body> -</html> +</html>
\ No newline at end of file |