Changes

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