ui-components 3.0.0

[jpfisher72]

Full transparency the below description is mostly ai generated from git diff, but was tweaked and added to.

v3.0.0 — GraphQL URL prop, Table toolbar API, MSW Storybook mocking

This release introduces breaking changes to both GenomeSearch and Table to clean up
long-standing API inconsistencies and add a required graphqlUrl prop so consumers can route
autocomplete fetches through their own API handler (allowing server-injected auth headers).
MSW is added for Storybook so all GenomeSearch stories work without a live network connection.

---

Breaking changes

GenomeSearch — new required graphqlUrl prop

The component previously hardcoded https://screen.api.wenglab.org/graphql. That URL now
must be supplied by the consumer. The intent is for apps to point this at a local route
handler (e.g. /api/graphql) that attaches any required authentication headers server-side
before proxying to the upstream API.

  <GenomeSearch
    assembly="GRCh38"
    queries={["Gene", "SNP", "cCRE"]}
+   graphqlUrl="/api/graphql"
    onSearchSubmit={handleResult}
  />

---

GenomeSearch — per-type limit props replaced by a single limit prop

The six separate limit props are removed in favor of one unified limit prop that accepts
either a flat number (applied to every type) or a per-type object.

  <GenomeSearch
-   geneLimit={5}
-   snpLimit={3}
-   icreLimit={3}
-   ccreLimit={3}
-   legacyCcreLimit={3}
-   studyLimit={3}
+   limit={3}                      // same cap for every type
+   // or:
+   limit={{ Gene: 5, SNP: 3 }}   // per-type overrides; unspecified types default to 3
  />

---

GenomeSearch — slots now accepts component types, not elements

Previously slots.input / slots.button / slots.box accepted pre-rendered JSX elements
(React.ReactElement). They now accept component types (React.ElementType) — the same
pattern MUI uses throughout. Props for the slot components go in slotProps.

- import { TextField } from "@mui/material";
-
  <GenomeSearch
-   slots={{ input: <TextField label="Search" variant="standard" color="secondary" /> }}
+   slots={{ input: TextField }}
+   slotProps={{ input: { label: "Search", variant: "standard", color: "secondary" } }}
  />

---

Table — toolbar customisation props moved into slotProps.toolbar

The following top-level props are removed. All toolbar customisation now flows through
slotProps.toolbar, which is fully typed via a ToolbarPropsOverrides module augmentation.

Removed prop	Replacement
toolbarSlot	slotProps.toolbar.extra
labelTooltip	slotProps.toolbar.labelTooltip
toolbarStyle	slotProps.toolbar.style
toolbarIconColor	slotProps.toolbar.iconColor
downloadFileName	removed — string label is used as the export filename automatically

  <Table
    label="My Table"
-   toolbarSlot={<Button onClick={handleClick}>Action</Button>}
-   labelTooltip="Helpful description"
-   toolbarStyle={{ backgroundColor: "#e7eef8" }}
-   toolbarIconColor="#444"
-   downloadFileName="export"
+   slotProps={{
+     toolbar: {
+       extra: <Button onClick={handleClick}>Action</Button>,
+       labelTooltip: "Helpful description",
+       style: { backgroundColor: "#e7eef8" },
+       iconColor: "#444",
+       // downloadFileName is no longer needed — string label is used automatically
+     },
+   }}
  />

Note: When label is a ReactElement rather than a string, the export filename now defaults to the title of the page (MUI default) instead of requiring a separate downloadFileName prop. Pass csvOptions.fileName / excelOptions.fileName inside slotProps.toolbar if you need an explicit filename with a React element label.

Also: This fixes the old bug with broken element anchors if you tried to use the toolbarSlot as an anchor for a popper

---

Other changes

MSW added for Storybook

msw and msw-storybook-addon are added as dev dependencies. All GenomeSearch stories now
run against mock handlers defined in .storybook/mocks/genomeSearchHandlers.ts — no live
network access required. A new Loading story demonstrates the loading state by intercepting
requests and delaying them indefinitely.

Result sorting improved in GenomeSearch

Relevance-based sorting of autocomplete results was previously done by inspecting rendered
<li> DOM props inside renderGroup — fragile and desynchronised from MUI's
data-option-index-based keyboard navigation. Sorting now happens upstream on the data
before it is passed to Autocomplete, keeping the options array and visual order in sync. fix #100

accession argument used instead of accession_prefix when input matches accession length

Using accession is way faster for copy/pasted full accessions. Fix #89

idprefix used to allow searching for Gene ID "ENSG..."

Fix #99

useEntityAutocomplete dependency array fixed

columnsWithCheckbox was missing from the useMemo dependency array in useSyncedTable,
which could cause stale column references after updates.

Gene description fetch is now fault-tolerant

The NLM gene description fetch is wrapped in a try/catch. A network error no longer
propagates and breaks the autocomplete — it silently returns null instead.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
web-components	Ready	Preview, Comment	Apr 16, 2026 11:26pm