Add Wet Lab Experiments and full-width equal navigation tabs

FEATURE_BACKLOG.md

@@ -146,4 +146,4 @@ Give each new feature a stable ID, a goal, a status, desired behavior, and open
 
 ## Atlas research sections
 
-Planned: add RefSeq annotation exploration and wet-lab results beneath the eukaryotic tree in the **Genome atlas** tab. Decide on the comparison views and experimental summaries when those data are ready. Accession lookup, segment viewing, and downloads now live in the separate **Data bank** tab.
+Planned: add RefSeq annotation exploration beneath the eukaryotic tree in the **Genome atlas** tab, and experimental results in the dedicated **Wet Lab Experiments** tab. The wet-lab tab exists with a coming-soon state; no results have been added yet. Decide on the comparison views and experimental summaries when those data are ready. Accession lookup, segment viewing, and downloads now live in the separate **Data bank** tab.

README.md

@@ -17,7 +17,7 @@ Future features and open design decisions are tracked in the [feature backlog](F
 
 ## GenBank taxonomy
 
-The landing page opens with an interactive **tree of eukaryotic life**, using NCBI's current GenBank assembly summary and taxonomy. Curved branches and nodes are colored by the fraction of assemblies with published annotations: gray for none found in the inventory, increasingly dark teal for higher percentages. Counts and percentages appear beside the groups, with details on hover. The default **Genome atlas** tab contains the tree and its lineage controls. A separate **Data bank** tab holds accession search, segment visualization, and downloads, using the existing smaller index. This leaves the atlas view available for future RefSeq exploration and wet-lab results.
+The landing page opens with an interactive **tree of eukaryotic life**, using NCBI's current GenBank assembly summary and taxonomy. Curved branches and nodes are colored by the fraction of assemblies with published annotations: gray for none found in the inventory, increasingly dark teal for higher percentages. Counts and percentages appear beside the groups, with details on hover. The default **Genome atlas** tab contains the tree and its lineage controls. A separate **Data bank** tab holds accession search, segment visualization, and downloads, using the existing smaller index. A third **Wet Lab Experiments** tab is ready for experimental results and currently shows a clearly labeled coming-soon state. RefSeq exploration can be added beneath the tree. The three equal-width navigation options span the top of the page.
 
 The viewer is restricted to **Eukaryota (NCBI taxid 2759) and its descendants**, including search, breadcrumbs, and parent navigation. The model predicts eukaryotic annotations; bacteria, archaea, and viruses are outside this display. The current eukaryotic snapshot contains **70,395 assemblies**, of which **17,561 (24.9%)** have published annotations. The underlying SQLite snapshot retains the full NCBI inventory for refresh/provenance, while the interface uses only the eukaryotic subtree and its denominators. Assemblies with unresolved taxonomy cannot be assigned to that subtree and are excluded.
 

app.css

@@ -36,28 +36,29 @@
 }
 @media(prefers-reduced-motion:reduce) { .gradio-container .atlas-panel button { transition:none; } }
 
-/* Two distinct views, with the same quiet atlas palette. */
-#atlas-navigation { border:0; background:transparent; }
-#atlas-navigation > .tab-wrapper > [role="tablist"] { gap:8px; border-bottom:1px solid #dbe3d3; padding:0 0 12px; margin-bottom:16px; }
-#atlas-navigation > .tab-wrapper > [role="tablist"] > button { border:1px solid transparent; border-radius:999px; padding:10px 20px; color:#647467; font:500 14px/1.4 Arial,Helvetica,sans-serif; background:transparent; }
-#atlas-navigation > .tab-wrapper > [role="tablist"] > button:hover { background:#edf3e7; color:#173c30; }
-#atlas-navigation > .tab-wrapper > [role="tablist"] > button[aria-selected="true"] { color:#fffefa; background:#245d45; border-color:#245d45; }
-#atlas-overview, #atlas-data-bank { border:0; background:transparent; padding:0; }
+/* Full-width navigation: one equal segment for each view. */
+.gradio-container { width:100%!important; min-width:0!important; box-sizing:border-box; }
+#atlas-navigation { border:0; background:transparent; min-width:0; max-width:100%; }
+#atlas-navigation > .tab-wrapper { width:100%; height:auto!important; min-height:76px; border:0!important; box-shadow:none!important; margin:0 0 20px; padding:0; }
+#atlas-navigation > .tab-wrapper > .tab-container { display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; width:100%!important; height:auto!important; box-sizing:border-box; border:1px solid #dbe3d3!important; border-radius:18px; padding:6px; margin:0; background:#edf2e7; box-shadow:none!important; }
+#atlas-navigation > .tab-wrapper > .tab-container > button { display:flex!important; align-items:center; justify-content:center; width:100%; min-width:0; min-height:62px; height:auto!important; box-sizing:border-box; padding:14px 12px; margin:0!important; border:0!important; border-radius:12px; box-shadow:none!important; background:transparent; color:#52694f; font:600 17px/1.3 Arial,Helvetica,sans-serif; white-space:normal; text-align:center; text-decoration:none!important; }
+#atlas-navigation > .tab-wrapper > .tab-container > button:hover { background:#e0e9d9; color:#173c30; }
+#atlas-navigation > .tab-wrapper > .tab-container > button[aria-selected="true"] { background:#245d45; color:#fffefa; }
+#atlas-navigation > .tab-wrapper::before, #atlas-navigation > .tab-wrapper::after,
+#atlas-navigation > .tab-wrapper > .tab-container::before, #atlas-navigation > .tab-wrapper > .tab-container::after,
+#atlas-navigation > .tab-wrapper > .tab-container > button::before, #atlas-navigation > .tab-wrapper > .tab-container > button::after { content:none!important; display:none!important; }
+#atlas-navigation > .tab-wrapper > .overflow-menu { display:none!important; }
+#atlas-overview, #atlas-data-bank, #atlas-wet-lab { border:0; background:transparent; padding:0; min-width:0; max-width:100%; }
 .data-bank-heading { padding:14px 4px 12px; }
 .data-bank-heading .data-bank-eyebrow { color:#647467; font:11px/1.4 Arial,Helvetica,sans-serif; letter-spacing:2px; margin:0 0 12px; }
 .data-bank-heading h1 { color:#173c30; font:400 clamp(32px,5vw,48px)/1.1 Georgia,'Times New Roman',serif; letter-spacing:-1px; margin:0 0 12px; }
 .data-bank-heading p { color:#647467; font:14px/1.6 Arial,Helvetica,sans-serif; margin:0; }
+.wet-lab-empty { background:#f7f8f0; border:1px solid #e0e6d8; border-radius:24px; padding:48px 36px; margin:8px 0 32px; }
+.wet-lab-status { display:inline-block; padding:6px 12px; background:#e5eddf; color:#52694f; border-radius:999px; font:500 12px/1.4 Arial,sans-serif; }
+.wet-lab-empty h2 { font:400 32px/1.2 Georgia,'Times New Roman',serif; color:#173c30; margin:22px 0 12px; }
+.wet-lab-empty p { max-width:580px; font:14px/1.7 Arial,sans-serif; color:#647467; margin:0; }
 @media(max-width:700px) {
- #atlas-navigation > .tab-wrapper > [role="tablist"] { gap:6px; }
- #atlas-navigation > .tab-wrapper > [role="tablist"] > button { padding:10px 16px; }
+ #atlas-navigation > .tab-wrapper > .tab-container { gap:4px; padding:4px; border-radius:14px; }
+ #atlas-navigation > .tab-wrapper > .tab-container > button { font-size:12px; min-height:68px; padding:10px 3px; border-radius:10px; overflow-wrap:anywhere; }
+ .wet-lab-empty { padding:30px 20px; border-radius:18px; }
 }
-
-#atlas-navigation > .tab-wrapper { border-bottom:0; }
-#atlas-navigation > .tab-wrapper > .tab-container > button { padding:10px 20px; font:500 14px/1.4 Arial,Helvetica,sans-serif; border-width:1px; }
-@media(max-width:700px) { #atlas-navigation > .tab-wrapper > .tab-container > button { padding:10px 16px; } }
-/* Prevent a loaded Plotly chart from widening the page after a viewport resize. */
-.gradio-container { width:100%!important; min-width:0!important; box-sizing:border-box; }
-#atlas-navigation, #atlas-overview, #atlas-data-bank { min-width:0; max-width:100%; }
-#atlas-navigation > .tab-wrapper > .tab-container > button { min-height:44px; height:auto; box-sizing:border-box; }
-#atlas-navigation > .tab-wrapper { height:auto; min-height:64px; }
-#atlas-navigation > .tab-wrapper > .tab-container { height:auto; min-height:56px; align-items:center; }

app.py

@@ -181,6 +181,14 @@ def build_app(catalog=None):
                                        f"Index updated {catalog.manifest['created_at'][:10]}." if remote_mode else "Offline sample."), elem_classes="quiet-note")
                         gr.Dataframe(value=catalog.table(all_ids), interactive=False)
                         gr.JSON(value=catalog.manifest, label="Index provenance" if remote_mode else "Sample provenance")
+            with gr.Tab("Wet Lab Experiments", id="wet-lab", elem_id="atlas-wet-lab"):
+                gr.HTML('<header class="data-bank-heading"><p class="data-bank-eyebrow">FROM PREDICTION TO EXPERIMENT</p>'
+                        '<h1>Wet lab experiments</h1><p>Explore the experimental evidence behind our genome annotations.</p></header>',
+                        apply_default_css=False)
+                gr.HTML('<section class="wet-lab-empty"><span class="wet-lab-status">Coming soon</span>'
+                        '<h2>A closer look in the lab</h2>'
+                        '<p>Experimental results and their connection to the model’s predictions will appear here as they are added.</p></section>',
+                        apply_default_css=False)
         gr.HTML('<footer class="workspace-footer"><span>Hugging Face Bio · Genome Atlas</span>'
                 '<a href="https://huggingface.co/buckets/HuggingFaceBio/genbank-annotations" target="_blank" rel="noopener noreferrer">Explore the annotation collection ↗</a></footer>', apply_default_css=False)
         outputs = [status, results, segment, file]