diff --git a/src/components/CategorySections.tsx b/src/components/CategorySections.tsx index db7ec32c..1e04684f 100644 --- a/src/components/CategorySections.tsx +++ b/src/components/CategorySections.tsx @@ -58,11 +58,20 @@ const CategorySections: React.FC = ({ [filteredList, selectedCategories], ); + // Sort categories: non-empty first, empty last (preserves relative order) + const sortedCategories = React.useMemo(() => { + const nonEmpty: CategoryLabel[] = []; + const empty: CategoryLabel[] = []; + for (const cat of selectedCategories) { + (buckets[cat]?.length ? nonEmpty : empty).push(cat); + } + 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..587dfc2d 100644 --- a/src/style/table.module.css +++ b/src/style/table.module.css @@ -325,6 +325,44 @@ background-color: var(--WHITE); } +.container :global(.ant-table-content):has(.empty-message) { + overflow: hidden !important; +} + +.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 +372,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 +412,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; + } }