From 24bcfeee25dde304140d45a51d0049655434c7ab Mon Sep 17 00:00:00 2001
From: Charlie Humphreys <chumphreys@mozilla.com>
Date: Wed, 22 Jul 2026 09:43:27 -0400
Subject: [PATCH] add header links to metric detail page

---
 src/components/SubHeading.svelte | 26 +++++++++++++++-----
 src/main.scss                    |  4 ++++
 src/pages/MetricDetail.svelte    | 41 ++++++++++++++++++++------------
 3 files changed, 50 insertions(+), 21 deletions(-)

diff --git a/src/components/SubHeading.svelte b/src/components/SubHeading.svelte
index 5e905b680..6e5f7d40e 100644
--- a/src/components/SubHeading.svelte
+++ b/src/components/SubHeading.svelte
@@ -3,16 +3,30 @@
 
   export let title;
   export let helpText;
+  export let withLink;
 </script>
 
-<h2>
-  {@html title}
-  {#if helpText}
-    <HelpHoverable content={helpText} />
-  {/if}
-</h2>
+{#if withLink}
+  <a href="#{title}">
+    <h2 id={title} class="anchor">
+      {@html title}
+      {#if helpText}
+        <HelpHoverable content={helpText} />
+      {/if}
+    </h2>
+  </a>
+{:else}
+  <h2>
+    {@html title}
+    {#if helpText}
+      <HelpHoverable content={helpText} />
+    {/if}
+  </h2>
+{/if}
 
 <style lang="scss">
+  @import "../main.scss";
+
   h2 {
     @include text-title-xs;
   }
diff --git a/src/main.scss b/src/main.scss
index 48abb9a89..94e51ed64 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -19,3 +19,7 @@
     }
   }
 }
+
+.anchor {
+  scroll-margin-top: 80px;
+}
diff --git a/src/pages/MetricDetail.svelte b/src/pages/MetricDetail.svelte
index 7e75c3776..740169221 100644
--- a/src/pages/MetricDetail.svelte
+++ b/src/pages/MetricDetail.svelte
@@ -218,13 +218,15 @@
     schema={METRIC_DEFINITION_SCHEMA}
   />
 
-  <h2>
-    Metric sampling
-    <HelpHoverable
-      content={"Information about the sampling state and rate."}
-      link={"https://mozilla.github.io/glean/book/user/metrics/data-control-plane/index.html"}
-    />
-  </h2>
+  <a href="#metric-sampling"
+    ><h2 id="metric-sampling" class="anchor">
+      Metric sampling
+      <HelpHoverable
+        content={"Information about the sampling state and rate."}
+        link={"https://mozilla.github.io/glean/book/user/metrics/data-control-plane/index.html"}
+      />
+    </h2></a
+  >
   {#if !isEmpty(metric.sampling_info)}
     {#each Object.entries(metric.sampling_info) as [keyName, definition]}
       <table>
@@ -355,20 +357,26 @@
   </table>
 
   {#if metric.extra_keys && !isEmpty(metric.extra_keys)}
-    <h2>
-      Extra keys
-      <HelpHoverable
-        content={'The acceptable keys on the "extra" object sent with events.'}
-        link={"https://mozilla.github.io/glean/book/reference/metrics/event.html#extra_keys"}
-      />
-    </h2>
+    <a href="#extra-keys"
+      ><h2 id="extra-keys" class="anchor">
+        Extra keys
+        <HelpHoverable
+          content={'The acceptable keys on the "extra" object sent with events.'}
+          link={"https://mozilla.github.io/glean/book/reference/metrics/event.html#extra_keys"}
+        />
+      </h2></a
+    >
     <table>
       <col />
       <col />
       <col />
       {#each Object.entries(metric.extra_keys) as [keyName, definition]}
         <tr>
-          <td><code>{keyName}</code></td>
+          <td
+            ><a href="#extra-key-{keyName}"
+              ><code id="extra-key-{keyName}" class="anchor">{keyName}</code></a
+            ></td
+          >
           <td>
             <code>{definition.type || "string"}</code>
           </td>
@@ -383,6 +391,7 @@
   <SubHeading
     title={"Metadata"}
     helpText={"Metadata about this metric, as defined by the implementor."}
+    withLink={true}
   />
   <MetadataTable
     appName={params.app}
@@ -393,12 +402,14 @@
   <SubHeading
     title={"Commentary"}
     helpText={"Reviewed commentary from Mozilla data practitioners on this metric."}
+    withLink={true}
   />
   <Commentary item={metric} itemType={"metric"} />
 
   <SubHeading
     title={"Access"}
     helpText={"Ways to access this metric in Mozilla's data warehouse."}
+    withLink={true}
   />
   {#if isRecent(metric)}
     <AppAlert