diff --git a/src/components/CategorySections.tsx b/src/components/CategorySections.tsx index db7ec32c..1a19051b 100644 --- a/src/components/CategorySections.tsx +++ b/src/components/CategorySections.tsx @@ -58,11 +58,19 @@ const CategorySections: React.FC = ({ [filteredList, selectedCategories], ); + // Sort categories: non-empty first, empty last (preserves relative order) + const sortedCategories = React.useMemo(() => { + const nonEmpty = selectedCategories.filter( + (cat) => buckets[cat]?.length, + ); + const empty = selectedCategories.filter((cat) => !buckets[cat]?.length); + return [...nonEmpty, ...empty]; + }, [selectedCategories, buckets]); + return ( <> - {selectedCategories.map((cat) => { + {sortedCategories.map((cat) => { const data = buckets[cat] || []; - if (!data.length) return null; return ( +

We can't seem to find what you're looking for...

+

+ But don't cell yourself short! Try adjusting your search + parameters or reach out to our{" "} + + forum + {" "} + to ask about availability. +

+

+ Looking for a cell line with a disease mutation?{" "} + + Check out our Disease Cell Catalog. + +

+ + ); + return ( <> 0} + locale={{ emptyText: noDataMessage }} /> ); diff --git a/src/style/table.module.css b/src/style/table.module.css index 3b0a5c58..9da070d0 100644 --- a/src/style/table.module.css +++ b/src/style/table.module.css @@ -325,6 +325,40 @@ background-color: var(--WHITE); } +.container .empty-message { + padding: 40px 0; + color: var(--BLACK); + text-align: center; + margin: 0px 29%; +} + +.container .empty-message h2 { + font-size: 32px; + font-weight: 600; +} + +.container .empty-message p { + font-size: 24px; +} + +.link { + color: var(--link-color); +} + +@media screen and (max-width: 1720px) { + .container .empty-message { + margin: 0px 18%; + } + + .container .empty-message h2 { + font-size: 22px; + } + + .container .empty-message p { + font-size: 18px; + } +} + @media screen and (max-width: 744px) { .container h4 { font-size: 20px; @@ -334,6 +368,19 @@ .container :global(.ant-table-cell).cell-line-id { padding: 8px 4px 8px 14px; } + + .container .empty-message { + padding: 30px 0; + margin: 0px 14%; + } + + .container .empty-message h2 { + font-size: 20px; + } + + .container .empty-message p { + font-size: 16px; + } } @media screen and (max-width: 576px) { @@ -361,4 +408,17 @@ ) { width: initial; } + + .container .empty-message { + padding: 0px; + margin: 0px 6%; + } + + .container .empty-message h2 { + font-size: 20px; + } + + .container .empty-message p { + font-size: 16px; + } }