Carry the genome atlas style through the annotation workspace

README.md

@@ -27,6 +27,8 @@ Click a group to unfold its direct lineages, and use breadcrumbs, parent navigat
 
 The graphic uses server-rendered SVG/HTML with scoped styles in `atlas.css` and delegated click/keyboard handlers in `atlas.js`; no external graphics library or image assets are required. Include these files when deploying.
 
+The annotation workspace shares the atlas palette and typography through `style.py` and `app.css`: warm panels, serif section headings, green controls, and matching tables, downloads, and disclosures. CDS plots use a solid green positive strand and a dashed warm-brown negative strand; binary labels use green. The fixed light palette stays consistent with the landing graphic under either OS color preference. Include both style files when deploying; Gradio 6 receives the theme and stylesheet in `launch()`.
+
 ### Refresh the taxonomy snapshot
 
 ```bash

app.css

@@ -0,0 +1,37 @@
+/* Global component styling, paired with the landing graphic's scoped atlas.css. */
+.gradio-container { max-width:1280px!important; margin:auto!important; padding:24px 20px 40px!important; color-scheme:light; }
+#eukaryotic-atlas { padding:0!important; border:0!important; background:transparent!important; }
+.gradio-container .atlas-panel { background:#f7f8f0; border:1px solid #e0e6d8; border-radius:24px; padding:26px 30px; box-shadow:0 8px 32px #234b2908; gap:18px; margin-top:6px; }
+.workspace-heading { display:flex; align-items:flex-start; gap:14px; padding:0 0 4px; }
+.workspace-step { width:32px; height:32px; border:1px solid #cdddc8; background:#eaf1e2; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; font:500 11px Arial,sans-serif; color:#527261; margin-top:4px; }
+.workspace-heading h2 { margin:0 0 8px; font:400 32px/1.15 Georgia,'Times New Roman',serif; letter-spacing:-.7px; color:#173c30; }
+.workspace-heading p { margin:0; color:#647467; font:13px/1.6 Arial,Helvetica,sans-serif; }
+.gradio-container .quiet-note { color:#647467; font-size:12px; line-height:1.7; }
+.gradio-container .quiet-note p { color:#647467; font-size:12px; line-height:1.7; }
+.gradio-container .scope-note { padding:11px 15px; border:1px solid #e0e6d8; border-radius:12px; background:#edf3e7; }
+.gradio-container .scope-note p { margin:0; }
+.gradio-container .action-button { align-self:flex-end; min-height:46px; }
+.gradio-container .atlas-panel > .form { border:0; background:transparent; box-shadow:none; }
+.gradio-container .atlas-panel .form { border-radius:14px; }
+.gradio-container .atlas-panel button { transition:background-color .15s, border-color .15s; }
+.gradio-container button:focus-visible,.gradio-container a:focus-visible { outline:2px solid #327555; outline-offset:3px; }
+.gradio-container .prose a { text-underline-offset:3px; }
+.gradio-container .prose code { color:#315641; }
+.gradio-container .atlas-disclosure { border:1px solid #e0e6d8; border-radius:14px; box-shadow:none; }
+.gradio-container .atlas-disclosure > button { padding:15px 18px; }
+#annotation-plot { border:1px solid #e0e6d8; background:#fffefa; border-radius:16px; overflow:hidden; }
+#annotation-plot .plot-container { background:#fffefa; }
+#annotation-examples { font-size:12px; }
+#annotation-examples .label { color:#647467; }
+#annotation-results { border-radius:14px; }
+.workspace-footer { border-top:1px solid #e0e6d8; padding-top:18px; margin-top:6px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font:11px/1.6 Arial,sans-serif; color:#75836f; }
+.workspace-footer a { color:#315641; text-decoration:none; }
+.workspace-footer a:hover { text-decoration:underline; }
+@media(max-width:700px) {
+ .gradio-container { padding:12px 10px 24px!important; }
+ .gradio-container .atlas-panel { border-radius:18px; padding:20px 15px; }
+ .workspace-heading h2 { font-size:28px; }
+ .workspace-heading { gap:10px; }
+ .gradio-container .action-button { width:100%; }
+}
+@media(prefers-reduced-motion:reduce) { .gradio-container .atlas-panel button { transition:none; } }

app.py

@@ -14,6 +14,7 @@ import pyarrow.parquet as pq
 import plotly.graph_objects as go
 
 from taxonomy import build_taxonomy_tab
+from style import APP_CSS, atlas_theme, section_header
 from catalog import Catalog
 from remote_catalog import RemoteCatalog, RemoteReadError
 
@@ -44,19 +45,26 @@ def build_app(catalog=None):
         binary = mode == "Binary labels"
         column = "Predicted CDS" if binary else "P(CDS)"
         figure = go.Figure()
-        tracks = [("CDS (either strand)", "#2563eb")] if binary else [("+ strand", "#2563eb"), ("− strand", "#ea580c")]
+        tracks = [("CDS (either strand)", "#287557")] if binary else [("+ strand", "#287557"), ("− strand", "#ae754b")]
         for strand, color in tracks:
             rows = frame[frame["Strand"] == strand]
             figure.add_trace(go.Scatter(x=rows["Position (bp)"].tolist(), y=rows[column].tolist(),
                                        name=strand, mode="lines",
-                                       line=dict(color=color, shape="hv" if binary else "linear")))
+                                       line=dict(color=color, width=2, dash="dash" if strand == "− strand" else "solid",
+                                                 shape="hv" if binary else "linear")))
         if not binary:
-            figure.add_hline(y=threshold, line_dash="dot", line_color="#64748b",
+            figure.add_hline(y=threshold, line_dash="dot", line_color="#8b9b7b",
                             annotation_text=f"Threshold {threshold:g}")
         figure.update_layout(title="Predicted CDS — either strand" if binary else "CDS probability by strand",
                              xaxis_title="Position (bp; 0-based)", yaxis_title=column,
-                             height=360, margin=dict(l=55, r=20, t=50, b=45), template="plotly_white",
-                             hovermode="x unified", legend=dict(orientation="h"))
+                             height=380, margin=dict(l=60, r=25, t=75, b=50), template="plotly_white",
+                             paper_bgcolor="#fffefa", plot_bgcolor="#fffefa",
+                             font=dict(family="Arial, Helvetica, sans-serif", color="#315641", size=12),
+                             title_font=dict(family="Georgia, Times New Roman, serif", size=22, color="#173c30"),
+                             hoverlabel=dict(bgcolor="#173c30", font_color="#ffffff", bordercolor="#173c30"),
+                             hovermode="x unified", legend=dict(orientation="h", y=1.12, x=1, xanchor="right"))
+        figure.update_xaxes(gridcolor="#e9edde", zerolinecolor="#dbe3d3", linecolor="#dbe3d3")
+        figure.update_yaxes(gridcolor="#e9edde", zerolinecolor="#dbe3d3", linecolor="#dbe3d3")
         figure.update_yaxes(range=[-0.05, 1.05], tickvals=[0, 1] if binary else None)
         return figure
 
@@ -120,44 +128,55 @@ def build_app(catalog=None):
 
     with gr.Blocks(title="GenBank Annotation Explorer", delete_cache=(3600, 3600)) as demo:
         build_taxonomy_tab()
-        gr.Markdown("## Find genome annotations\nLook up an assembly or contig accession to explore predicted coding regions.")
-        gr.Markdown(f"**Prototype {scope} · {len(catalog.records):,} segments · "
-                    f"{len(catalog.manifest['assemblies']):,} assemblies · {catalog.manifest['bases']:,} bases**\n\n"
-                    "Source: [HuggingFaceBio/genbank-annotations](https://huggingface.co/buckets/HuggingFaceBio/genbank-annotations). "
-                    f"These are model-predicted CDS probabilities, not curated gene features. Search covers the {scope} only. "
-                    + (f"Annotations load on demand from **{len(catalog.manifest['sources'])} bucket files**. "
-                       f"Index updated {catalog.manifest['created_at'][:10]}." if remote_mode else ""))
-        with gr.Row():
-            accession = gr.Textbox(label="Accession ID", placeholder="Assembly (GCA_…) or contig accession", scale=5)
-            search_button = gr.Button("Find annotations", variant="primary", scale=1)
-        examples = [first["assembly_accession"], first["record_name"]]
-        if remote_mode:
-            with closing(catalog.connect()) as conn:
-                examples += [r[0] for r in conn.execute("SELECT record_name FROM segments WHERE id IN (SELECT min(id) FROM segments GROUP BY object_path)")]
-            examples += ["JBPJTW010000350.1"]
-        gr.Examples(examples=[[e] for e in dict.fromkeys(examples)], inputs=accession)
-        status = gr.Markdown("Enter an accession or select an example. IDs are case-insensitive; version suffixes are optional.")
-        results = gr.Dataframe(value=catalog.table([]), interactive=False, label="Matching segments")
-        segment = gr.Dropdown(choices=[], label="Segment to explore", interactive=True)
-        with gr.Row():
-            start = gr.Number(label="Start (0-based, inclusive)", precision=0)
-            end = gr.Number(label="End (exclusive)", precision=0)
-            view = gr.Button("Update region")
-        with gr.Row():
-            mode = gr.Radio(["Probabilities", "Binary labels"], value="Probabilities", label="Viewer mode")
-            threshold = gr.Slider(0, 1, value=0.5, step=0.01, label="CDS threshold (max strand P > threshold)")
-        plot = gr.Plot(label="CDS tracks")
-        note = gr.Markdown("Choose a segment to see its probability tracks.")
-        with gr.Accordion("Segment metadata and provenance", open=False):
-            metadata = gr.JSON(label="Source metadata")
-        with gr.Row():
-            download = gr.Button("Prepare segment download")
-            file = gr.File(label="Original segment annotations (Parquet)", interactive=False)
-        with gr.Accordion("Browse indexed accessions and coverage", open=False):
-            gr.Markdown(f"Showing the first {len(all_ids):,} indexed segments. Search an accession to find other indexed records. "
-                        "An indexed file does not imply complete coverage of its assembly.")
-            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.Column(elem_classes="atlas-panel"):
+            gr.HTML(section_header("01", "Find an accession", "Start with an assembly or contig to explore its predicted coding regions."), apply_default_css=False)
+            gr.Markdown(f"**{len(catalog.records):,} indexed segments** · **{len(catalog.manifest['assemblies']):,} assemblies** · "
+                        f"{catalog.manifest['bases']:,} bases\n\n"
+                        f"Search covers this prototype {scope}. Results are model predictions and assembly coverage may be partial.",
+                        elem_classes=["quiet-note", "scope-note"])
+            with gr.Row():
+                accession = gr.Textbox(label="Accession ID", placeholder="Assembly (GCA_…) or contig accession", scale=5)
+                search_button = gr.Button("Find annotations", variant="primary", scale=1, elem_classes="action-button")
+            examples = [first["assembly_accession"], first["record_name"]]
+            if remote_mode:
+                with closing(catalog.connect()) as conn:
+                    examples += [r[0] for r in conn.execute("SELECT record_name FROM segments WHERE id IN (SELECT min(id) FROM segments GROUP BY object_path)")]
+                examples += ["JBPJTW010000350.1"]
+            gr.Examples(examples=[[e] for e in dict.fromkeys(examples)], inputs=accession, label="Try an accession", elem_id="annotation-examples")
+            status = gr.Markdown("Enter an accession or select an example. IDs are case-insensitive; version suffixes are optional.", elem_classes="quiet-note")
+            results = gr.Dataframe(value=catalog.table([]), interactive=False, label="Matching segments", elem_id="annotation-results")
+            segment = gr.Dropdown(choices=[], label="Segment to explore", interactive=True)
+
+        with gr.Column(elem_classes="atlas-panel"):
+            gr.HTML(section_header("02", "Explore the coding landscape", "View CDS probabilities or apply a threshold to see one label per base."), apply_default_css=False)
+            with gr.Row():
+                start = gr.Number(label="Start (0-based, inclusive)", precision=0)
+                end = gr.Number(label="End (exclusive)", precision=0)
+                view = gr.Button("Update region", elem_classes="action-button")
+            with gr.Row():
+                mode = gr.Radio(["Probabilities", "Binary labels"], value="Probabilities", label="Viewer mode")
+                threshold = gr.Slider(0, 1, value=0.5, step=0.01, label="CDS threshold (max strand P > threshold)")
+            plot = gr.Plot(label="CDS tracks", elem_id="annotation-plot")
+            note = gr.Markdown("Choose a segment above to bring its coding landscape into view.", elem_classes="quiet-note")
+            with gr.Accordion("Segment metadata and provenance", open=False, elem_classes="atlas-disclosure"):
+                metadata = gr.JSON(label="Source metadata")
+
+        with gr.Column(elem_classes="atlas-panel"):
+            gr.HTML(section_header("03", "Take the annotations with you", "Download the original segment, with its accession and record name in the filename."), apply_default_css=False)
+            with gr.Row():
+                download = gr.Button("Prepare segment download", variant="primary", scale=1, elem_classes="action-button")
+                file = gr.File(label="Original segment annotations (Parquet)", interactive=False, scale=3)
+            gr.Markdown("Full per-base probabilities are preserved in the download, including when the viewer shows a binned overview.", elem_classes="quiet-note")
+            with gr.Accordion("Browse the index and its sources", open=False, elem_classes="atlas-disclosure"):
+                gr.Markdown(f"Showing the first {len(all_ids):,} indexed segments. Search an accession to find other indexed records. "
+                            "An indexed file does not imply complete coverage of its assembly.\n\n"
+                            "Source: [HuggingFaceBio/genbank-annotations](https://huggingface.co/buckets/HuggingFaceBio/genbank-annotations). "
+                            + (f"Annotations load on demand from {len(catalog.manifest['sources'])} bucket files. "
+                               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")
+        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]
         for event in (search_button.click, accession.submit):
             event(search, accession, outputs).then(select_segment, [segment, mode, threshold], [metadata, start, end, plot, note, file])
@@ -171,4 +190,4 @@ def build_app(catalog=None):
 
 
 if __name__ == "__main__":
-    build_app().queue(default_concurrency_limit=2).launch(server_name="0.0.0.0")
+    build_app().queue(default_concurrency_limit=2).launch(server_name="0.0.0.0", theme=atlas_theme(), css=APP_CSS)

style.py

@@ -0,0 +1,62 @@
+"""Shared visual language for the atlas and annotation workspace."""
+from html import escape
+from pathlib import Path
+
+import gradio as gr
+
+APP_CSS = (Path(__file__).resolve().parent / "app.css").read_text()
+
+
+def atlas_theme():
+    green = gr.themes.colors.Color(
+        c50="#f1f6ed", c100="#e0eedc", c200="#c5ddc8", c300="#a4cebb",
+        c400="#72b295", c500="#40916f", c600="#287557", c700="#1d5c45",
+        c800="#173c30", c900="#102e24", c950="#0b211a")
+    stone = gr.themes.colors.Color(
+        c50="#fafbf6", c100="#f3f5ec", c200="#e1e7d9", c300="#cfd9c8",
+        c400="#9dac97", c500="#72816d", c600="#586b55", c700="#40543f",
+        c800="#2c422e", c900="#1c3222", c950="#112317")
+    theme = gr.themes.Base(primary_hue=green, secondary_hue=green, neutral_hue=stone,
+                           font=["Arial", "Helvetica", "sans-serif"],
+                           font_mono=["ui-monospace", "Consolas", "monospace"])
+    theme.set(
+        body_background_fill="#fcfcf8", body_text_color="#173c30", body_text_color_subdued="#647467",
+        background_fill_primary="#ffffff", background_fill_secondary="#f3f5ec",
+        border_color_primary="#dbe3d3", border_color_accent="#72b295",
+        color_accent="#287557", color_accent_soft="#e0eedc",
+        link_text_color="#287557", link_text_color_hover="#173c30", link_text_color_visited="#287557",
+        block_background_fill="#f7f8f0", block_border_color="#dbe3d3", block_border_width="1px",
+        block_label_background_fill="#f7f8f0", block_label_text_color="#52694f",
+        block_title_text_color="#254735", block_label_text_size="12px", block_title_text_size="13px",
+        block_label_text_weight="500", block_title_text_weight="600",
+        block_radius="14px", block_padding="16px", layout_gap="18px",
+        input_background_fill="#ffffff", input_border_color="#cfdcc9", input_border_width="1px",
+        input_border_color_focus="#40916f", input_border_color_hover="#9db89d",
+        input_placeholder_color="#788673", input_radius="10px", input_padding="12px 14px",
+        input_shadow_focus="0 0 0 3px #40916f20",
+        button_primary_background_fill="#245d45", button_primary_background_fill_hover="#173c30",
+        button_primary_border_color="#245d45", button_primary_border_color_hover="#173c30",
+        button_primary_text_color="#ffffff", button_primary_text_color_hover="#ffffff",
+        button_secondary_background_fill="#edf3e7", button_secondary_background_fill_hover="#deead6",
+        button_secondary_border_color="#cfdcc9", button_secondary_text_color="#315641",
+        button_large_radius="12px", button_small_radius="20px", button_border_width="1px",
+        checkbox_label_background_fill="#ffffff", checkbox_label_background_fill_selected="#deead6",
+        checkbox_label_border_color="#dbe3d3", checkbox_label_border_color_selected="#86b396",
+        checkbox_label_text_color_selected="#254735", checkbox_background_color_selected="#287557",
+        checkbox_border_color_selected="#287557", slider_color="#40916f",
+        table_border_color="#dbe3d3", table_even_background_fill="#ffffff",
+        table_odd_background_fill="#f4f7ee", table_text_color="#254735", table_radius="12px",
+        table_row_focus="#e0eedc", accordion_text_color="#315641",
+        panel_background_fill="#f7f8f0", panel_border_color="#dbe3d3",
+        code_background_fill="#edf2e6", block_shadow="none",
+    )
+    # The atlas is an intentionally light canvas; retain its palette under an OS dark preference.
+    for name in list(vars(theme)):
+        if name.endswith("_dark") and hasattr(theme, name[:-5]):
+            setattr(theme, name, getattr(theme, name[:-5]))
+    return theme
+
+
+def section_header(number, title, description):
+    return (f'<header class="workspace-heading"><span class="workspace-step">{escape(number)}</span>'
+            f'<div><h2>{escape(title)}</h2><p>{escape(description)}</p></div></header>')

taxonomy.py

@@ -224,10 +224,10 @@ def build_taxonomy_tab():
             raise gr.Error("Choose a eukaryotic group in this snapshot.") from exc
 
     tree.click(explore_tree, outputs=tree, show_progress="minimal", concurrency_limit=1)
-    with gr.Accordion("Find a lineage", open=False):
+    with gr.Accordion("Find a lineage", open=False, elem_classes="atlas-disclosure"):
         with gr.Row():
             query = gr.Textbox(label="Eukaryotic taxon", placeholder="Scientific name, taxon ID, or a group such as animals")
-            find = gr.Button("Search lineages")
+            find = gr.Button("Search lineages", elem_classes="action-button")
         matches = gr.Dropdown(choices=[], label="Matching lineages", interactive=True)
         status = gr.Markdown()
 
@@ -241,7 +241,7 @@ def build_taxonomy_tab():
         matches.input(taxonomy_view, matches, tree)
         find.click(taxonomy_search, query, [matches, status])
         query.submit(taxonomy_search, query, [matches, status])
-    with gr.Accordion("About the tree and coverage", open=False):
+    with gr.Accordion("About the tree and coverage", open=False, elem_classes="atlas-disclosure"):
         gr.Markdown("This tree follows **NCBI Taxonomy within Eukaryota**. Animals and fungi share the Opisthokonta branch; "
                     "green plants include green algae. ‘Other lineages’ combines the remaining siblings for display and can be expanded. "
                     "Each view shows up to six direct lineages plus any remainder. The opening view also opens the animal/fungal branch. "