Declutter the Database tab

The tab opened with an eyebrow, a page title and a subtitle repeating the tab name, then three numbered sections each with a large serif title and its own subtitle, a stats box, a standing hint, an empty table with raw column names, a dropdown repeating that table, and a 380px empty file box.

Now:

* **Two small section titles**, "Find an accession" and "Coding landscape", in place of the page header and the numbered 01/02/03 sections.
* **Search is a single bar** with the example chips under it. No label box, and the button lines up with the input.
* **The results table is hidden until a search returns rows**, uses readable headers (Assembly, Record, Organism, Division, Start, End, Segment), and **a click on a row loads that segment**. That replaces the "Segment to explore" dropdown.
* **The viewer controls sit in one toolbar** with short labels. Download is a small button there: preparing the file reveals a download button instead of an empty file box.
* **The caption under the plot is one line**, and the mean line now has a legend entry.
* **The index statistics and scope note** moved into "Browse the index and its sources", next to the provenance they belong with.
* **The page footer is gone**; its bucket link already lives in that disclosure.

The viewer stays visible before a segment is picked, as asked.

Checked in the browser: search shows the table, clicking the `JBPJTW010000308.1` row moves the region from 0–66,123 to 0–316,820, preparing a download reveals the download button, and the atlas "Show database results" jump still lands on a searched accession. Thirty-six tests pass.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

app.css

@@ -3,14 +3,8 @@
 #eukaryotic-atlas { padding:0!important; border:0!important; background:transparent!important; }
 .gradio-container .atlas-panel { background:transparent; border:0; border-radius:0; padding:22px 20px; box-shadow:none; gap:16px; margin-top:0; }
 .gradio-container .atlas-panel + .atlas-panel { border-top:1px solid #e3e9dc; }
-.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; }
 /* The jump out of the atlas should read as the one action on the page, not as
    another quiet control among the disclosures. */
@@ -39,15 +33,10 @@
 #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 { padding:18px 12px; }
  #atlas-navigation { border-radius:18px; padding:8px 8px 0; }
- .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; } }
@@ -67,11 +56,25 @@
 #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-database { border:0; background:transparent; padding:0; min-width:0; max-width:100%; }
-.database-heading { padding:14px 4px 12px; }
-.database-heading .database-eyebrow { color:#647467; font:11px/1.4 Arial,Helvetica,sans-serif; letter-spacing:2px; margin:0 0 12px; }
-.database-heading h1 { color:#173c30; font:400 clamp(32px,5vw,48px)/1.1 Georgia,'Times New Roman',serif; letter-spacing:-1px; margin:0 0 12px; }
-.database-heading p { color:#647467; font:14px/1.6 Arial,Helvetica,sans-serif; margin:0; }
 @media(max-width:700px) {
  #atlas-navigation > .tab-wrapper > .tab-container { gap:18px; }
  #atlas-navigation > .tab-wrapper > .tab-container > button { font-size:13px; padding:0 1px 9px; }
 }
+
+/* Database tab: one small title per section, a single search bar, and one
+   toolbar for the viewer, in place of numbered headers and nested boxes. */
+#atlas-database .db-section { font:600 15px/1.3 Arial,Helvetica,sans-serif; color:#1f3d2e; margin:0; padding:0; }
+#atlas-database .atlas-panel { gap:12px; padding:20px 20px 18px; }
+#atlas-database .db-search { gap:10px; align-items:stretch; }
+#atlas-database .db-search textarea, #atlas-database .db-search input { min-height:46px; font-size:14px; }
+#atlas-database .db-search button { min-height:46px; }
+#atlas-database .db-toolbar { gap:10px; }
+#atlas-database .db-actions { gap:8px; justify-content:flex-start; }
+#atlas-database .db-actions button { min-height:36px; }
+#annotation-examples { margin-top:-2px; }
+#annotation-examples .label { font-size:12px; }
+#atlas-database .db-heading { padding:0!important; margin:0; min-height:0; border:0; background:transparent; }
+#atlas-database .db-heading > * { padding:0!important; margin:0!important; }
+#atlas-database .db-actions > * { flex:0 0 auto!important; width:auto!important; min-width:0!important; padding:0 18px; }
+#atlas-database .db-toolbar fieldset .wrap { flex-wrap:nowrap; }
+#atlas-database .db-toolbar fieldset label { white-space:nowrap; }

app.py

@@ -16,12 +16,15 @@ import pyarrow.parquet as pq
 import plotly.graph_objects as go
 
 from taxonomy import build_taxonomy_tab
-
-HIST_ROWS = 40
-from style import APP_CSS, atlas_theme, section_header
+from style import APP_CSS, atlas_theme
 from catalog import Catalog
 from remote_catalog import RemoteCatalog, RemoteReadError
 
+HIST_ROWS = 40
+# Readable headers for the results table; the catalog keeps its own names.
+HEADERS = {"assembly_accession": "Assembly", "record_name": "Record", "organism_name": "Organism",
+           "division": "Division", "segment_start_bp": "Start", "segment_end_bp": "End"}
+
 
 def build_app(catalog=None):
     if catalog is None:
@@ -32,19 +35,23 @@ def build_app(catalog=None):
     full_snapshot = remote_mode and catalog.manifest.get("full_snapshot", False)
     scope = "published annotation snapshot" if full_snapshot else "indexed subset" if remote_mode else "sample"
 
+    def display_table(ids):
+        frame = catalog.table(ids)
+        frame["Segment"] = [f"{i + 1} of {n}" for i, n in zip(frame.pop("segment_index"), frame.pop("segment_count"))]
+        return frame.rename(columns=HEADERS)
+
     def search(accession):
         began = time.perf_counter()
         ids, total = catalog.find(accession)
         elapsed = time.perf_counter() - began
-        choices = [(f"{catalog.records[i]['record_name']} · {catalog.records[i]['assembly_accession']} · "
-                    f"[{catalog.records[i]['segment_start_bp']:,}, {catalog.records[i]['segment_end_bp']:,})", str(i)) for i in ids]
         if not str(accession or "").strip():
-            message = "Enter an assembly or contig accession. Try an example below."
+            message = "Enter an assembly or contig accession, or try an example."
         elif not ids:
             message = f"No match in this {scope}. Newer bucket publications may not be indexed yet." if full_snapshot else f"No match in this {scope}. This does not mean the accession is absent from the full bucket."
         else:
             message = f"Found **{total:,} indexed segment(s)** in {elapsed * 1000:.1f} ms. Showing {len(ids):,}. Assembly coverage may be partial."
-        return message, catalog.table(ids), gr.Dropdown(choices=choices, value=str(ids[0]) if ids else None), None
+        return (gr.Markdown(message, visible=True), gr.Dataframe(value=display_table(ids), visible=bool(ids)),
+                ids, ids[0] if ids else None, gr.DownloadButton(visible=False))
 
     def make_plot(frame, mode, threshold):
         binary = mode == "Binary labels"
@@ -64,7 +71,7 @@ def build_app(catalog=None):
                               tickvals=[0, 1, 2, 3, 4], ticktext=["1", "10", "100", "1k", "10k"]),
                 hovertemplate="%{customdata:,} bases near P=%{y:.2f}<br>from %{x:,}<extra></extra>"))
             figure.add_trace(go.Scatter(
-                x=positions, y=frame["Mean P"].to_numpy()[::HIST_ROWS], mode="lines", name="mean",
+                x=positions, y=frame["Mean P"].to_numpy()[::HIST_ROWS], mode="lines", name="mean per column",
                 line=dict(color="#c98b5b", width=1), hovertemplate="mean %{y:.3f}<extra></extra>"))
             figure.add_hline(y=threshold, line_dash="dot", line_color="#8b9b7b",
                              annotation_text=f"Threshold {threshold:g}")
@@ -74,7 +81,7 @@ def build_app(catalog=None):
                                  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"),
-                                 showlegend=False)
+                                 showlegend=True, legend=dict(orientation="h", y=1.12, x=1, xanchor="right"))
             figure.update_xaxes(gridcolor="#e9edde", zerolinecolor="#dbe3d3", linecolor="#dbe3d3")
             figure.update_yaxes(range=[0, 1], gridcolor="#e9edde", zerolinecolor="#dbe3d3", linecolor="#dbe3d3")
             return figure
@@ -88,7 +95,7 @@ def build_app(catalog=None):
         if not binary:
             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",
+        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=380, margin=dict(l=60, r=25, t=75, b=50), template="plotly_white",
                              paper_bgcolor="#fffefa", plot_bgcolor="#fffefa",
@@ -102,8 +109,9 @@ def build_app(catalog=None):
         return figure
 
     def select_segment(index, mode="Probabilities", threshold=0.5):
+        hide = gr.DownloadButton(visible=False)
         if index is None:
-            return {}, None, None, None, "Choose a matching segment.", None
+            return {}, None, None, None, "Pick a segment above to see its coding landscape.", hide
         record = catalog.records[int(index)]
         start = record["segment_start_bp"]
         end = record["segment_end_bp"]
@@ -112,33 +120,23 @@ def build_app(catalog=None):
             frame, step = catalog.window(index, start, end, table=table, mode=mode, threshold=threshold)
             plot = make_plot(frame, mode, threshold)
         except (ValueError, TypeError, OverflowError) as exc:
-            return record, start, end, None, str(exc), None
-        return record, start, end, plot, plot_note(step, stats, mode, threshold), None
+            return record, start, end, None, str(exc), hide
+        return record, start, end, plot, plot_note(step, stats, mode, threshold), hide
 
     def plot_note(step, stats, mode="Probabilities", threshold=0.5):
         origin = "local sample" if stats.get("local") else "cache" if stats["cache_hit"] else "bucket"
         if mode == "Binary labels":
-            resolution = (f"**1 = max(P_positive, P_negative) > {threshold:g}; 0 = otherwise.** "
-                          "This is one CDS/background label per base, combining both strands. "
-                          + ("The stepped track preserves every base label in this region." if step == 1 else
-                             f"**Binned overview:** each interval spans up to {step:,} bases and is 1 if **any** base exceeds the threshold. "
-                             "This does not mean every base in that interval is CDS. Narrow the region for exact labels."))
+            detail = (f"1 where the higher strand exceeds {threshold:g}" if step == 1 else
+                      f"each step covers up to {step:,} bases and is 1 if any of them exceeds {threshold:g}; zoom in for exact labels")
         else:
-            resolution = ("Each point is one base, per strand." if step == 1 else
-                          f"Each column covers up to **{step:,} bases** and shows how their probabilities are "
-                          "distributed, over max(P_positive, P_negative) — the value the threshold tests. "
-                          "Colour is how many bases fall in that band, so a part-coding region shows a high "
-                          "band and a low one rather than an average between them. The thin line is the mean. "
-                          "Narrow the region for exact per-strand values.")
-        return ("Coordinates are **0-based, end-exclusive**. "
-                + resolution
-                + " Download the segment for the original per-base probabilities.\n\n"
-                + f"Loaded from **{origin}** in **{stats['seconds']:.2f} s**"
-                + (f" · {stats['bytes_read'] / 1_000_000:.2f} MB fetched." if origin == "bucket" else "."))
+            detail = ("one point per base, per strand" if step == 1 else
+                      f"each column covers up to {step:,} bases; colour counts how many sit at each probability of the higher strand")
+        fetched = f", {stats['bytes_read'] / 1_000_000:.2f} MB" if origin == "bucket" else ""
+        return f"0-based, end-exclusive · {detail} · loaded from {origin} in {stats['seconds']:.2f} s{fetched}"
 
     def update_window(index, start, end, mode="Probabilities", threshold=0.5):
         if index is None:
-            return None, "Look up an accession and choose a segment first."
+            return None, "Look up an accession and pick a segment first."
         try:
             table, stats = catalog.fetch(index)
             frame, step = catalog.window(index, start, end, table=table, mode=mode, threshold=threshold)
@@ -162,25 +160,21 @@ def build_app(catalog=None):
         filename = f"{assembly}__{record}__{start}-{end}.parquet"
         target = Path(tempfile.mkdtemp(prefix="genbank-export-")) / filename
         pq.write_table(table, target, compression="zstd")
-        return str(target)
+        return gr.DownloadButton(value=str(target), visible=True)
 
     with gr.Blocks(title="GenBank Annotation Explorer", delete_cache=(3600, 3600)) as demo:
         with gr.Tabs(selected="atlas", elem_id="atlas-navigation") as navigation:
             with gr.Tab("Genome Atlas", id="atlas", elem_id="atlas-overview"):
                 atlas = build_taxonomy_tab()
             with gr.Tab("Database", id="database", elem_id="atlas-database"):
-                gr.HTML('<header class="database-heading"><p class="database-eyebrow">THE ANNOTATION COLLECTION</p>'
-                        '<h1>Explore the database</h1><p>Find an accession, explore its coding landscape, and download the annotations.</p></header>',
-                        apply_default_css=False)
+                hits = gr.State([])
+                selected = gr.State(None)
                 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 the {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")
+                    gr.HTML('<h2 class="db-section">Find an accession</h2>', apply_default_css=False, elem_classes="db-heading")
+                    with gr.Row(equal_height=True, elem_classes="db-search"):
+                        accession = gr.Textbox(show_label=False, container=False, scale=5,
+                                               placeholder="Assembly (GCA_…) or contig accession")
+                        search_button = gr.Button("Find annotations", variant="primary", scale=1, min_width=170)
                     examples = [first["assembly_accession"], first["record_name"]]
                     example_labels = None
                     if remote_mode:
@@ -194,44 +188,46 @@ def build_app(catalog=None):
                             examples = [entry["accession"] for entry in suggestions["examples"]]
                             example_labels = [f"{entry['organism']} · {entry['segments']:,} segments" for entry in suggestions["examples"]]
                     gr.Examples(examples=[[e] for e in dict.fromkeys(examples)], inputs=accession,
-                                example_labels=example_labels,
-                                label="Explore an assembly with many segments" if example_labels else "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)
+                                example_labels=example_labels, label="Try", elem_id="annotation-examples")
+                    status = gr.Markdown(visible=False, elem_classes="quiet-note")
+                    # Hidden until a search returns rows; a click on a row loads that segment.
+                    results = gr.Dataframe(value=display_table([]), interactive=False, show_label=False,
+                                           visible=False, elem_id="annotation-results")
 
                 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")
+                    gr.HTML('<h2 class="db-section">Coding landscape</h2>', apply_default_css=False, elem_classes="db-heading")
+                    with gr.Row(equal_height=True, elem_classes="db-toolbar"):
+                        start = gr.Number(label="Start", precision=0, min_width=110, scale=2)
+                        end = gr.Number(label="End", precision=0, min_width=110, scale=2)
+                        mode = gr.Radio(["Probabilities", "Binary labels"], value="Probabilities", label="View", min_width=320, scale=3)
+                        threshold = gr.Slider(0, 1, value=0.5, step=0.01, label="Threshold", min_width=200, scale=3)
+                    with gr.Row(elem_classes="db-actions"):
+                        view = gr.Button("Update region", variant="primary", size="sm", min_width=140, scale=0)
+                        download = gr.Button("Prepare download", size="sm", min_width=150, scale=0)
+                        file = gr.DownloadButton("Download per-base data (.parquet)", visible=False,
+                                                 size="sm", min_width=240, scale=0)
+                    plot = gr.Plot(show_label=False, elem_id="annotation-plot")
+                    note = gr.Markdown("Pick a segment above to see its coding landscape.", 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")
+                        metadata = gr.JSON(show_label=False)
                     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. "
+                        gr.Markdown(f"**{len(catalog.records):,} indexed segments** · **{len(catalog.manifest['assemblies']):,} assemblies** · "
+                                    f"{catalog.manifest['bases']:,} bases. Search covers the {scope}; results are model predictions "
+                                    "and assembly coverage may be partial.\n\n"
+                                    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 {catalog.manifest.get('source_count', 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.Dataframe(value=display_table(all_ids), interactive=False, show_label=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]
+
+        found = [status, results, hits, selected, file]
+        shown = [metadata, start, end, plot, note, file]
+
+        def pick_row(rows, evt: gr.SelectData):
+            return rows[evt.index[0]] if rows and evt.index and evt.index[0] < len(rows) else None
+
         if atlas:
             # The atlas names a group; the Database tab searches accessions. The
             # jump hands over one annotated assembly from the selected group and
@@ -240,16 +236,16 @@ def build_app(catalog=None):
                 return gr.Tabs(selected="database"), atlas["accession_for"](path)
 
             atlas["button"].click(open_database, atlas["route"], [navigation, accession]) \
-                .then(search, accession, outputs) \
-                .then(select_segment, [segment, mode, threshold], [metadata, start, end, plot, note, file])
+                .then(search, accession, found) \
+                .then(select_segment, [selected, mode, threshold], shown)
         for event in (search_button.click, accession.submit):
-            event(search, accession, outputs).then(select_segment, [segment, mode, threshold], [metadata, start, end, plot, note, file])
-        segment.input(select_segment, [segment, mode, threshold], [metadata, start, end, plot, note, file])
-        region_inputs = [segment, start, end, mode, threshold]
+            event(search, accession, found).then(select_segment, [selected, mode, threshold], shown)
+        results.select(pick_row, hits, selected).then(select_segment, [selected, mode, threshold], shown)
+        region_inputs = [selected, start, end, mode, threshold]
         view.click(update_window, region_inputs, [plot, note])
         mode.input(update_window, region_inputs, [plot, note])
         threshold.release(update_window, region_inputs, [plot, note])
-        download.click(export, segment, file)
+        download.click(export, selected, file)
     return demo
 
 

style.py

@@ -1,5 +1,4 @@
 """Shared visual language for the atlas and annotation workspace."""
-from html import escape
 from pathlib import Path
 
 import gradio as gr
@@ -55,8 +54,3 @@ def atlas_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>')