opentargets · carcruz · Jul 27, 2026 · Jul 27, 2026
diff --git a/apps/platform/src/pages/CredibleSetPage/CredibleSetPage.tsx b/apps/platform/src/pages/CredibleSetPage/CredibleSetPage.tsx
@@ -1,7 +1,7 @@
 import { ReactElement } from "react";
 import { LoaderFunctionArgs, useLoaderData, useLocation, useParams, Link } from "react-router";
-import { PageMeta, ScrollToTop, Box, Tabs, Tab } from "ui";
-import Header from "./Header";
+import { PageMeta, ScrollToTop, Box, Tabs, Tab, PROFILE_TABS_SENTINEL_ID } from "ui";
+import Header, { buildHeaderMeta } from "./Header";
 import NotFoundPage from "../NotFoundPage";
 import CREDIBLE_SET_PAGE_QUERY from "./CredibleSetPage.gql";
 import Profile from "./Profile";
@@ -26,6 +26,12 @@ function CredibleSetPage(): ReactElement {
 
   const { id: studyId } = data?.credibleSet?.study || {};
   const { id: variantId, referenceAllele, alternateAllele } = data?.credibleSet?.variant || {};
+  const headerMeta = buildHeaderMeta({
+    variantId: variantId ?? "",
+    referenceAllele: referenceAllele ?? "",
+    alternateAllele: alternateAllele ?? "",
+    studyId: studyId ?? "",
+  });
 
   return (
     <>
@@ -44,7 +50,7 @@ function CredibleSetPage(): ReactElement {
         alternateAllele={alternateAllele ?? ""}
       />
       <ScrollToTop />
-      <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+      <Box id={PROFILE_TABS_SENTINEL_ID} sx={{ borderBottom: 1, borderColor: "divider" }}>
         <Tabs value={location.pathname}>
           <Tab
             label={<Box sx={{ textTransform: "capitalize" }}>Profile</Box>}
@@ -54,7 +60,14 @@ function CredibleSetPage(): ReactElement {
           />
         </Tabs>
       </Box>
-      {variantId && <Profile studyLocusId={studyLocusId} variantId={variantId} />}
+      {variantId && (
+        <Profile
+          studyLocusId={studyLocusId}
+          variantId={variantId}
+          Icon={headerMeta.Icon}
+          externalLinks={headerMeta.externalLinks}
+        />
+      )}
     </>
   );
 }

diff --git a/apps/platform/src/pages/CredibleSetPage/Header.tsx b/apps/platform/src/pages/CredibleSetPage/Header.tsx
@@ -9,32 +9,47 @@ type HeaderProps = {
   studyId: string;
 };
 
+export function buildHeaderMeta({
+  variantId,
+  referenceAllele,
+  alternateAllele,
+  studyId,
+}: Omit<HeaderProps, "loading">) {
+  return {
+    title: "Credible set",
+    Icon: faDiagramProject,
+    externalLinks: (
+      <>
+        <ExternalLink
+          title="Lead variant"
+          id={
+            variantId && (
+              <DisplayVariantId
+                variantId={variantId}
+                referenceAllele={referenceAllele}
+                alternateAllele={alternateAllele}
+                expand={false}
+              />
+            )
+          }
+          url={`../variant/${variantId}`}
+        />
+        <ExternalLink title="Study ID" id={studyId} url={`../study/${studyId}`} />
+      </>
+    ),
+  };
+}
+
 function Header({ loading, variantId, referenceAllele, alternateAllele, studyId }: HeaderProps) {
+  const { title, Icon, externalLinks } = buildHeaderMeta({
+    variantId,
+    referenceAllele,
+    alternateAllele,
+    studyId,
+  });
+
   return (
-    <HeaderBase
-      loading={loading}
-      title="Credible set"
-      Icon={faDiagramProject}
-      externalLinks={
-        <>
-          <ExternalLink
-            title="Lead variant"
-            id={
-              variantId && (
-                <DisplayVariantId
-                  variantId={variantId}
-                  referenceAllele={referenceAllele}
-                  alternateAllele={alternateAllele}
-                  expand={false}
-                />
-              )
-            }
-            url={`../variant/${variantId}`}
-          />
-          <ExternalLink title="Study ID" id={studyId} url={`../study/${studyId}`} />
-        </>
-      }
-    />
+    <HeaderBase loading={loading} title={title} Icon={Icon} externalLinks={externalLinks} />
   );
 }
 

diff --git a/apps/platform/src/pages/CredibleSetPage/Profile.tsx b/apps/platform/src/pages/CredibleSetPage/Profile.tsx
@@ -2,6 +2,7 @@ import { gql } from "@apollo/client";
 import {
   PlatformApiProvider,
   SectionContainer,
+  StickyProfileHeader,
   SummaryContainer,
   summaryUtils,
   SummaryRenderer,
@@ -11,7 +12,8 @@ import {
 
 import ProfileHeader from "./ProfileHeader";
 import { CredibleSet, Widget } from "sections";
-import { Suspense } from "react";
+import { Suspense, type ReactNode } from "react";
+import type { IconProp } from "@fortawesome/fontawesome-svg-core";
 
 const CREDIBLE_SET = "credibleSet";
 
@@ -23,6 +25,7 @@ const credibleSetProfileWidgets = new Map<string, Widget>([
 ]);
 
 const CREDIBLE_SET_WIDGETS = Array.from(credibleSetProfileWidgets.values());
+const CREDIBLE_SET_STICKY_WIDGETS = [CredibleSet.Variants, ...CREDIBLE_SET_WIDGETS];
 
 const credibleSetProfileWidgetsSummaries = Array.from(credibleSetProfileWidgets.values()).map(
   widget => widget.Summary
@@ -31,6 +34,8 @@ const credibleSetProfileWidgetsSummaries = Array.from(credibleSetProfileWidgets.
 type ProfileProps = {
   studyLocusId: string;
   variantId: string;
+  Icon?: IconProp;
+  externalLinks?: ReactNode;
 };
 
 const CREDIBLE_SET_PROFILE_SUMMARY_FRAGMENT = summaryUtils.createSummaryFragment(
@@ -53,14 +58,20 @@ const CREDIBLE_SET_PROFILE_QUERY = gql`
 
 const VariantsSection = CredibleSet.Variants.getBodyComponent();
 
-function Profile({ studyLocusId, variantId }: ProfileProps) {
+function Profile({ studyLocusId, variantId, Icon, externalLinks }: ProfileProps) {
   return (
     <PlatformApiProvider
       entity={CREDIBLE_SET}
       query={CREDIBLE_SET_PROFILE_QUERY}
       variables={{ studyLocusId: studyLocusId, variantIds: [variantId] }}
     >
       <ProfileHeader />
+      <StickyProfileHeader
+        title={studyLocusId}
+        Icon={Icon}
+        externalLinks={externalLinks}
+        widgets={CREDIBLE_SET_STICKY_WIDGETS}
+      />
 
       <SummaryContainer>
         {/* TODO: remove this once we have a proper variants section. look at the parent prop */}

diff --git a/apps/platform/src/pages/DiseasePage/DiseasePage.tsx b/apps/platform/src/pages/DiseasePage/DiseasePage.tsx
@@ -1,8 +1,8 @@
 import { lazy, ReactElement, Suspense } from "react";
 import { Link, LoaderFunctionArgs, Route, Routes, useLoaderData, useLocation, useParams } from "react-router";
-import { LoadingBackdrop, PageMeta, ScrollToTop, Box, Tab, Tabs } from "ui";
+import { LoadingBackdrop, PageMeta, ScrollToTop, Box, Tab, Tabs, PROFILE_TABS_SENTINEL_ID } from "ui";
 
-import Header from "./Header";
+import Header, { buildHeaderMeta } from "./Header";
 import NotFoundPage from "../NotFoundPage";
 
 import DISEASE_PAGE_QUERY from "./DiseasePage.gql";
@@ -33,6 +33,7 @@ function DiseasePage(): ReactElement {
   }
 
   const { name, dbXRefs } = data?.disease || {};
+  const headerMeta = buildHeaderMeta({ efoId: efoId!, name, dbXRefs });
 
   return (
     <>
@@ -51,7 +52,7 @@ function DiseasePage(): ReactElement {
       />
       <Header loading={false} efoId={efoId} name={name} dbXRefs={dbXRefs} />
       <ScrollToTop />
-      <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+      <Box id={PROFILE_TABS_SENTINEL_ID} sx={{ borderBottom: 1, borderColor: "divider" }}>
         <Tabs value={location.pathname}>
           <Tab
             label={<Box sx={{ textTransform: "capitalize" }}>Associated targets</Box>}
@@ -69,7 +70,17 @@ function DiseasePage(): ReactElement {
       </Box>
       <Suspense fallback={<LoadingBackdrop height={800} />}>
         <Routes>
-          <Route path="/" element={<Profile efoId={efoId!} name={name!} />} />
+          <Route
+            path="/"
+            element={
+              <Profile
+                efoId={efoId!}
+                name={name!}
+                Icon={headerMeta.Icon}
+                externalLinks={headerMeta.externalLinks}
+              />
+            }
+          />
           <Route path="/associations" element={<Associations efoId={efoId!} />} />
         </Routes>
       </Suspense>

diff --git a/apps/platform/src/pages/DiseasePage/Header.tsx b/apps/platform/src/pages/DiseasePage/Header.tsx
@@ -36,38 +36,35 @@ function processXRefs(dbXRefs) {
   return xrefs;
 }
 
-function Header({ loading, efoId, name, dbXRefs = [] }) {
+export function buildHeaderMeta({ efoId, name, dbXRefs = [] }) {
   const efoUrl = `https://www.ebi.ac.uk/ols4/ontologies/efo/terms?short_form=${efoId}`;
   const xrefs = processXRefs(dbXRefs);
 
-  return (
-    <HeaderBase
-      loading={loading}
-      title={name || "Missing name"}
-      Icon={faStethoscope}
-      externalLinks={
-        <>
-          {efoId.startsWith("OTAR") ? (
-            `EFO: ${efoId}`
-          ) : (
-            <ExternalLink title="EFO" id={efoId} url={efoUrl} />
-          )}
-          {Object.keys(xrefs).map(xref => {
-            const { label, urlStem, ids } = xrefs[xref];
-            return (
-              <XRefLinks
-                key={xref}
-                label={label}
-                urlStem={urlStem}
-                ids={Array.from(ids)}
-                limit="3"
-              />
-            );
-          })}
-        </>
-      }
-    />
-  );
+  return {
+    title: name || "Missing name",
+    Icon: faStethoscope,
+    externalLinks: (
+      <>
+        {efoId.startsWith("OTAR") ? (
+          `EFO: ${efoId}`
+        ) : (
+          <ExternalLink title="EFO" id={efoId} url={efoUrl} />
+        )}
+        {Object.keys(xrefs).map(xref => {
+          const { label, urlStem, ids } = xrefs[xref];
+          return (
+            <XRefLinks key={xref} label={label} urlStem={urlStem} ids={Array.from(ids)} limit="3" />
+          );
+        })}
+      </>
+    ),
+  };
+}
+
+function Header({ loading, efoId, name, dbXRefs = [] }) {
+  const { title, Icon, externalLinks } = buildHeaderMeta({ efoId, name, dbXRefs });
+
+  return <HeaderBase loading={loading} title={title} Icon={Icon} externalLinks={externalLinks} />;
 }
 
 export default Header;
diff --git a/apps/platform/src/pages/DiseasePage/Profile.tsx b/apps/platform/src/pages/DiseasePage/Profile.tsx
@@ -1,7 +1,10 @@
 import { gql } from "@apollo/client";
+import type { IconProp } from "@fortawesome/fontawesome-svg-core";
+import type { ReactNode } from "react";
 import {
   PlatformApiProvider,
   SectionContainer,
+  StickyProfileHeader,
   SummaryContainer,
   SectionsRenderer,
   SummaryRenderer,
@@ -47,7 +50,14 @@ const DISEASE_PROFILE_QUERY = gql`
   ${DISEASE_PROFILE_SUMMARY_FRAGMENT}
 `;
 
-function Profile({ efoId, name }: { efoId: string; name: string }) {
+type ProfileProps = {
+  efoId: string;
+  name: string;
+  Icon?: IconProp;
+  externalLinks?: ReactNode;
+};
+
+function Profile({ efoId, name, Icon, externalLinks }: ProfileProps) {
   return (
     <PlatformApiProvider
       entity={DISEASE}
@@ -57,6 +67,12 @@ function Profile({ efoId, name }: { efoId: string; name: string }) {
       }}
     >
       <ProfileHeader />
+      <StickyProfileHeader
+        title={name}
+        Icon={Icon}
+        externalLinks={externalLinks}
+        widgets={DISEASE_WIDGETS}
+      />
       <SummaryContainer>
         <SummaryRenderer widgets={DISEASE_WIDGETS} />
       </SummaryContainer>

diff --git a/apps/platform/src/pages/DrugPage/DrugPage.tsx b/apps/platform/src/pages/DrugPage/DrugPage.tsx
@@ -1,7 +1,7 @@
-import { PageMeta, ScrollToTop, Box, Tabs, Tab } from "ui";
+import { PageMeta, ScrollToTop, Box, Tabs, Tab, PROFILE_TABS_SENTINEL_ID } from "ui";
 import { LoaderFunctionArgs, useLoaderData, useLocation, useParams, Routes, Route, Link } from "react-router";
 
-import Header from "./Header";
+import Header, { buildHeaderMeta } from "./Header";
 import NotFoundPage from "../NotFoundPage";
 import DRUG_PAGE_QUERY from "./DrugPage.gql";
 import { apolloClient } from "../../apolloClient";
@@ -27,6 +27,7 @@ function DrugPage(): ReactNode {
   }
 
   const { name, crossReferences } = data?.drug || {};
+  const headerMeta = buildHeaderMeta({ chemblId, name, crossReferences });
 
   return (
     <>
@@ -42,7 +43,7 @@ function DrugPage(): ReactNode {
         crossReferences={crossReferences}
       />
       <ScrollToTop />
-      <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+      <Box id={PROFILE_TABS_SENTINEL_ID} sx={{ borderBottom: 1, borderColor: "divider" }}>
         <Tabs value={location.pathname}>
           <Tab
             label={<Box sx={{ textTransform: "capitalize" }}>Profile</Box>}
@@ -53,7 +54,17 @@ function DrugPage(): ReactNode {
         </Tabs>
       </Box>
       <Routes>
-        <Route path="/" element={<Profile chemblId={chemblId} name={name} />} />
+        <Route
+          path="/"
+          element={
+            <Profile
+              chemblId={chemblId}
+              name={name}
+              Icon={headerMeta.Icon}
+              externalLinks={headerMeta.externalLinks}
+            />
+          }
+        />
       </Routes>
     </>
   );