Skip to content

[Platform]: Category icons and compact Summary redesign #1007

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
carcruz wants to merge 9 commits into
base: feat/sticky-profile-header
Choose a base branch
from
Open

[Platform]: Category icons and compact Summary redesign #1007

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
4957068
feat: tag widget definitions with entity-relationship categories
carcruz Jul 28, 2026
5e47cb4
refactor: redesign Summary section as compact, category-filterable chips
carcruz Jul 28, 2026
434be20
style: polish category chips, section item headers, and genomic locat…
carcruz Jul 29, 2026
c26d1f1
feat: sync summary category filter to URL and gate sections/nav by it
carcruz Jul 29, 2026
b403cf9
fix: preserve category search param when navigating to a section hash
carcruz Jul 29, 2026
3e95168
fix: stale active-section id on filter change, clear hash on scroll-t…
carcruz Jul 29, 2026
377dec2
feat: add category filter chips to sticky nav widget selector
carcruz Jul 29, 2026
b5d6108
refactor: simplify sticky nav category UI to active-chip + clear
carcruz Jul 29, 2026
134d05a
fix: keep active-category chip's delete icon visible on hover
carcruz Jul 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 48 additions & 23 deletions apps/platform/src/pages/CredibleSetPage/Profile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,14 @@ import {
PlatformApiProvider,
SectionContainer,
StickyProfileHeader,
SummaryCategoryProvider,
SummaryContainer,
summaryUtils,
SummaryRenderer,
SectionsRenderer,
SectionLoader,
primaryCategory,
useSummaryCategory,
} from "ui";

import ProfileHeader from "./ProfileHeader";
Expand Down Expand Up @@ -58,6 +61,37 @@ const CREDIBLE_SET_PROFILE_QUERY = gql`

const VariantsSection = CredibleSet.Variants.getBodyComponent();

type CredibleSetSectionsProps = {
studyLocusId: string;
variantId: string;
};

// Manual (non-SectionsRenderer) Variants section, gated by the same category
// filter as SectionsRenderer so it hides/shows consistently with it.
function CredibleSetSections({ studyLocusId, variantId }: CredibleSetSectionsProps) {
const { activeCategory } = useSummaryCategory();
const variantsActive =
activeCategory === "All" ||
primaryCategory(CredibleSet.Variants.definition) === activeCategory;

return (
<>
{/* TODO: remove this once we have a proper variants section. look at the parent prop */}
{variantsActive && (
<Suspense fallback={<SectionLoader />}>
<VariantsSection id={studyLocusId} leadVariantId={variantId} entity={CREDIBLE_SET} />
</Suspense>
)}
<SectionsRenderer
id={studyLocusId}
label={CREDIBLE_SET}
entity={CREDIBLE_SET}
widgets={CREDIBLE_SET_WIDGETS}
/>
</>
);
}

function Profile({ studyLocusId, variantId, Icon, externalLinks }: ProfileProps) {
return (
<PlatformApiProvider
Expand All @@ -66,31 +100,22 @@ function Profile({ studyLocusId, variantId, Icon, externalLinks }: ProfileProps)
variables={{ studyLocusId: studyLocusId, variantIds: [variantId] }}
>
<ProfileHeader />
<StickyProfileHeader
title={studyLocusId}
Icon={Icon}
externalLinks={externalLinks}
widgets={CREDIBLE_SET_STICKY_WIDGETS}
/>
<SummaryCategoryProvider>
<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 */}
<CredibleSet.Variants.Summary />
<SummaryRenderer widgets={CREDIBLE_SET_WIDGETS} />
</SummaryContainer>
<SummaryContainer>
<SummaryRenderer widgets={CREDIBLE_SET_STICKY_WIDGETS} />
</SummaryContainer>

<SectionContainer>
{/* TODO: remove this once we have a proper variants section. look at the parent prop */}
<Suspense fallback={<SectionLoader />}>
<VariantsSection id={studyLocusId} leadVariantId={variantId} entity={CREDIBLE_SET} />
</Suspense>
<SectionsRenderer
id={studyLocusId}
label={CREDIBLE_SET}
entity={CREDIBLE_SET}
widgets={CREDIBLE_SET_WIDGETS}
/>
</SectionContainer>
<SectionContainer>
<CredibleSetSections studyLocusId={studyLocusId} variantId={variantId} />
</SectionContainer>
</SummaryCategoryProvider>
</PlatformApiProvider>
);
}
Expand Down
27 changes: 15 additions & 12 deletions apps/platform/src/pages/DiseasePage/Profile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
PlatformApiProvider,
SectionContainer,
StickyProfileHeader,
SummaryCategoryProvider,
SummaryContainer,
SectionsRenderer,
SummaryRenderer,
Expand Down Expand Up @@ -67,19 +68,21 @@ function Profile({ efoId, name, Icon, externalLinks }: ProfileProps) {
}}
>
<ProfileHeader />
<StickyProfileHeader
title={name}
Icon={Icon}
externalLinks={externalLinks}
widgets={DISEASE_WIDGETS}
/>
<SummaryContainer>
<SummaryRenderer widgets={DISEASE_WIDGETS} />
</SummaryContainer>
<SummaryCategoryProvider>
<StickyProfileHeader
title={name}
Icon={Icon}
externalLinks={externalLinks}
widgets={DISEASE_WIDGETS}
/>
<SummaryContainer>
<SummaryRenderer widgets={DISEASE_WIDGETS} />
</SummaryContainer>

<SectionContainer>
<SectionsRenderer id={efoId} label={name} entity={DISEASE} widgets={DISEASE_WIDGETS} />
</SectionContainer>
<SectionContainer>
<SectionsRenderer id={efoId} label={name} entity={DISEASE} widgets={DISEASE_WIDGETS} />
</SectionContainer>
</SummaryCategoryProvider>
</PlatformApiProvider>
);
}
Expand Down
27 changes: 15 additions & 12 deletions apps/platform/src/pages/DrugPage/Profile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import {
PlatformApiProvider,
SectionContainer,
StickyProfileHeader,
SummaryCategoryProvider,
SummaryContainer,
SectionsRenderer,
SummaryRenderer,
Expand Down Expand Up @@ -57,18 +58,20 @@ function Profile({ chemblId, name, Icon, externalLinks }: ProfileProps) {
return (
<PlatformApiProvider entity={DRUG} query={DRUG_PROFILE_QUERY} variables={{ chemblId }}>
<ProfileHeader chemblId={chemblId} />
<StickyProfileHeader
title={name}
Icon={Icon}
externalLinks={externalLinks}
widgets={DRUG_WIDGETS}
/>
<SummaryContainer>
<SummaryRenderer widgets={DRUG_WIDGETS} />
</SummaryContainer>
<SectionContainer>
<SectionsRenderer id={chemblId} label={name} entity={DRUG} widgets={DRUG_WIDGETS} />
</SectionContainer>
<SummaryCategoryProvider>
<StickyProfileHeader
title={name}
Icon={Icon}
externalLinks={externalLinks}
widgets={DRUG_WIDGETS}
/>
<SummaryContainer>
<SummaryRenderer widgets={DRUG_WIDGETS} />
</SummaryContainer>
<SectionContainer>
<SectionsRenderer id={chemblId} label={name} entity={DRUG} widgets={DRUG_WIDGETS} />
</SectionContainer>
</SummaryCategoryProvider>
</PlatformApiProvider>
);
}
Expand Down
15 changes: 9 additions & 6 deletions apps/platform/src/pages/EvidencePage/Profile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { gql } from "@apollo/client";
import {
PlatformApiProvider,
SectionContainer,
SummaryCategoryProvider,
SummaryContainer,
summaryUtils,
SummaryRenderer,
Expand Down Expand Up @@ -99,13 +100,15 @@ function Profile({
>
<ProfileHeader />

<SummaryContainer>
<SummaryRenderer widgets={EVIDENCE_WIDGETS} />
</SummaryContainer>
<SummaryCategoryProvider>
<SummaryContainer>
<SummaryRenderer widgets={EVIDENCE_WIDGETS} />
</SummaryContainer>

<SectionContainer>
<SectionsRenderer id={id} label={label} entity={DISEASE} widgets={EVIDENCE_WIDGETS} />
</SectionContainer>
<SectionContainer>
<SectionsRenderer id={id} label={label} entity={DISEASE} widgets={EVIDENCE_WIDGETS} />
</SectionContainer>
</SummaryCategoryProvider>
</PlatformApiProvider>
);
}
Expand Down
91 changes: 58 additions & 33 deletions apps/platform/src/pages/StudyPage/Profile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,13 @@ import {
PlatformApiProvider,
SectionContainer,
StickyProfileHeader,
SummaryCategoryProvider,
SummaryContainer,
SummaryRenderer,
SectionLoader,
summaryUtils,
primaryCategory,
useSummaryCategory,
} from "ui";
import { Study } from "sections";
import ProfileHeader from "./StudyProfileHeader";
Expand Down Expand Up @@ -54,6 +58,44 @@ type ProfileProps = {
externalLinks?: ReactNode;
};

type StudySectionsProps = {
studyId: string;
studyType: string;
diseaseIds: string[];
};

// Manual (non-SectionsRenderer) section bodies, gated by the same category
// filter as SectionsRenderer so they hide/show consistently with it.
function StudySections({ studyId, studyType, diseaseIds }: StudySectionsProps) {
const { activeCategory } = useSummaryCategory();
const isActive = (widget: { definition: Parameters<typeof primaryCategory>[0] }) =>
activeCategory === "All" || primaryCategory(widget.definition) === activeCategory;

return (
<>
{studyType === "gwas" && (
<>
{isActive(Study.GWASCredibleSets) && (
<Suspense fallback={<SectionLoader />}>
<GWASCredibleSetsSection id={studyId} entity={STUDY} />
</Suspense>
)}
{isActive(Study.SharedTraitStudies) && (
<Suspense fallback={<SectionLoader />}>
<SharedTraitStudiesSection studyId={studyId} diseaseIds={diseaseIds} entity={STUDY} />
</Suspense>
)}
</>
)}
{studyType !== "gwas" && isActive(Study.QTLCredibleSets) && (
<Suspense fallback={<SectionLoader />}>
<QTLCredibleSetsSection id={studyId} entity={STUDY} />
</Suspense>
)}
</>
);
}

function Profile({ studyId, studyType, diseases, Icon, externalLinks }: ProfileProps) {
const diseaseIds = diseases?.map(d => d.id) || [];

Expand All @@ -67,41 +109,24 @@ function Profile({ studyId, studyType, diseases, Icon, externalLinks }: ProfileP
}}
>
<ProfileHeader />
<StickyProfileHeader
title={studyId}
Icon={Icon}
externalLinks={externalLinks}
widgets={studyType === "gwas" ? GWAS_STUDY_WIDGETS : QTL_STUDY_WIDGETS}
/>
<SummaryCategoryProvider>
<StickyProfileHeader
title={studyId}
Icon={Icon}
externalLinks={externalLinks}
widgets={studyType === "gwas" ? GWAS_STUDY_WIDGETS : QTL_STUDY_WIDGETS}
/>

<SummaryContainer>
{/* TODO: remove this, check the studyType property */}
{studyType === "gwas" && (
<>
<Study.GWASCredibleSets.Summary />
<Study.SharedTraitStudies.Summary />
</>
)}
{studyType !== "gwas" && <Study.QTLCredibleSets.Summary />}
</SummaryContainer>
<SummaryContainer>
<SummaryRenderer
widgets={studyType === "gwas" ? GWAS_STUDY_WIDGETS : QTL_STUDY_WIDGETS}
/>
</SummaryContainer>

<SectionContainer>
{studyType === "gwas" && (
<>
<Suspense fallback={<SectionLoader />}>
<GWASCredibleSetsSection id={studyId} entity={STUDY} />
</Suspense>
<Suspense fallback={<SectionLoader />}>
<SharedTraitStudiesSection studyId={studyId} diseaseIds={diseaseIds} entity={STUDY} />
</Suspense>
</>
)}
{studyType !== "gwas" && (
<Suspense fallback={<SectionLoader />}>
<QTLCredibleSetsSection id={studyId} entity={STUDY} />
</Suspense>
)}
</SectionContainer>
<SectionContainer>
<StudySections studyId={studyId} studyType={studyType} diseaseIds={diseaseIds} />
</SectionContainer>
</SummaryCategoryProvider>
</PlatformApiProvider>
);
}
Expand Down
27 changes: 15 additions & 12 deletions apps/platform/src/pages/TargetPage/Profile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
PlatformApiProvider,
SectionContainer,
StickyProfileHeader,
SummaryCategoryProvider,
SummaryContainer,
summaryUtils,
SectionsRenderer,
Expand Down Expand Up @@ -70,18 +71,20 @@ function Profile({ ensgId, symbol, Icon, externalLinks }: ProfileProps) {
return (
<PlatformApiProvider entity={TARGET} query={TARGET_PROFILE_QUERY} variables={{ ensgId }}>
<ProfileHeader />
<StickyProfileHeader
title={symbol}
Icon={Icon}
externalLinks={externalLinks}
widgets={TARGET_WIDGETS}
/>
<SummaryContainer>
<SummaryRenderer widgets={TARGET_WIDGETS} />
</SummaryContainer>
<SectionContainer>
<SectionsRenderer id={ensgId} label={symbol} entity={TARGET} widgets={TARGET_WIDGETS} />
</SectionContainer>
<SummaryCategoryProvider>
<StickyProfileHeader
title={symbol}
Icon={Icon}
externalLinks={externalLinks}
widgets={TARGET_WIDGETS}
/>
<SummaryContainer>
<SummaryRenderer widgets={TARGET_WIDGETS} />
</SummaryContainer>
<SectionContainer>
<SectionsRenderer id={ensgId} label={symbol} entity={TARGET} widgets={TARGET_WIDGETS} />
</SectionContainer>
</SummaryCategoryProvider>
</PlatformApiProvider>
);
}
Expand Down
Loading
Loading