From abdcd1e26059d7402c8aa562279b88557aafd886 Mon Sep 17 00:00:00 2001 From: Joe Heffernan Date: Thu, 12 Feb 2026 16:09:19 -0800 Subject: [PATCH 1/7] show custom message when search results are empty --- src/components/CategorySections.tsx | 1 - src/components/CellLineTable/index.tsx | 39 +++++++++++++++-- src/style/table.module.css | 58 ++++++++++++++++++++++++++ 3 files changed, 93 insertions(+), 5 deletions(-) diff --git a/src/components/CategorySections.tsx b/src/components/CategorySections.tsx index db7ec32c..d6bdb8eb 100644 --- a/src/components/CategorySections.tsx +++ b/src/components/CategorySections.tsx @@ -62,7 +62,6 @@ const CategorySections: React.FC = ({ <> {selectedCategories.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..000b2ca5 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,18 @@ .container :global(.ant-table-cell).cell-line-id { padding: 8px 4px 8px 14px; } + + .container .empty-message { + 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 +407,16 @@ ) { width: initial; } + + .container .empty-message { + margin: 0px 6%; + } + + .container .empty-message h2 { + font-size: 20px; + } + + .container .empty-message p { + font-size: 16px; + } } From b67c331805f7b5b2759445fbe7a758dca0ec11c8 Mon Sep 17 00:00:00 2001 From: Joe Heffernan Date: Thu, 12 Feb 2026 16:21:41 -0800 Subject: [PATCH 2/7] reduce padding on empty message for small screens --- src/components/CellLineTable/index.tsx | 5 ++++- src/style/table.module.css | 2 ++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/CellLineTable/index.tsx b/src/components/CellLineTable/index.tsx index bbe05a4d..d9ebf253 100644 --- a/src/components/CellLineTable/index.tsx +++ b/src/components/CellLineTable/index.tsx @@ -4,7 +4,10 @@ import React, { useState } from "react"; import { CellLineStatus } from "../../component-queries/types"; import useEnv from "../../hooks/useEnv"; -import { useMobileBreakpoint, useTabletBreakpoint } from "../../hooks/useWidthBreakpoint"; +import { + useMobileBreakpoint, + useTabletBreakpoint, +} from "../../hooks/useWidthBreakpoint"; import { CellLineColumns, TableStatus, UnpackedCellLine } from "./types"; const { diff --git a/src/style/table.module.css b/src/style/table.module.css index 000b2ca5..9da070d0 100644 --- a/src/style/table.module.css +++ b/src/style/table.module.css @@ -370,6 +370,7 @@ } .container .empty-message { + padding: 30px 0; margin: 0px 14%; } @@ -409,6 +410,7 @@ } .container .empty-message { + padding: 0px; margin: 0px 6%; } From 7c7e34a3faad2a41b5483c9d2cea650cf1517241 Mon Sep 17 00:00:00 2001 From: Joe Heffernan Date: Fri, 13 Feb 2026 09:41:54 -0800 Subject: [PATCH 3/7] sort categories so empty results are at the end --- src/components/CategorySections.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/components/CategorySections.tsx b/src/components/CategorySections.tsx index d6bdb8eb..82958814 100644 --- a/src/components/CategorySections.tsx +++ b/src/components/CategorySections.tsx @@ -58,9 +58,20 @@ 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] || []; return ( Date: Fri, 13 Feb 2026 10:00:57 -0800 Subject: [PATCH 4/7] format --- src/components/CategorySections.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/CategorySections.tsx b/src/components/CategorySections.tsx index 82958814..1a19051b 100644 --- a/src/components/CategorySections.tsx +++ b/src/components/CategorySections.tsx @@ -63,9 +63,7 @@ const CategorySections: React.FC = ({ const nonEmpty = selectedCategories.filter( (cat) => buckets[cat]?.length, ); - const empty = selectedCategories.filter( - (cat) => !buckets[cat]?.length, - ); + const empty = selectedCategories.filter((cat) => !buckets[cat]?.length); return [...nonEmpty, ...empty]; }, [selectedCategories, buckets]); From 32df7460daa58c0d9e72d3dbf677668fb2be2962 Mon Sep 17 00:00:00 2001 From: Joe Heffernan Date: Tue, 17 Feb 2026 11:41:15 -0800 Subject: [PATCH 5/7] overflow hidden for tables with empty messge --- src/style/table.module.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/style/table.module.css b/src/style/table.module.css index 9da070d0..587dfc2d 100644 --- a/src/style/table.module.css +++ b/src/style/table.module.css @@ -325,6 +325,10 @@ background-color: var(--WHITE); } +.container :global(.ant-table-content):has(.empty-message) { + overflow: hidden !important; +} + .container .empty-message { padding: 40px 0; color: var(--BLACK); From a6d5a9ab8234fb50727982358a68c1b67f1b5b53 Mon Sep 17 00:00:00 2001 From: Joe Heffernan Date: Tue, 17 Feb 2026 15:39:36 -0800 Subject: [PATCH 6/7] only iterate over selected categories once when ordering buckets --- src/components/CategorySections.tsx | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/src/components/CategorySections.tsx b/src/components/CategorySections.tsx index 1a19051b..9c731595 100644 --- a/src/components/CategorySections.tsx +++ b/src/components/CategorySections.tsx @@ -1,13 +1,16 @@ import React from "react"; -import { - CategoryLabel, - UnpackedNormalCellLine, -} from "../component-queries/types"; + + +import { CategoryLabel, UnpackedNormalCellLine } from "../component-queries/types"; import CellLineTable from "./CellLineTable"; import { getNormalTableMobileConfig } from "./CellLineTable/MobileView"; import { getNormalTableColumns } from "./CellLineTable/NormalTableColumns"; + + + + interface CategorySectionsProps { selectedCategories: CategoryLabel[]; filteredList: UnpackedNormalCellLine[]; @@ -60,10 +63,11 @@ const CategorySections: React.FC = ({ // 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); + const nonEmpty: CategoryLabel[] = []; + const empty: CategoryLabel[] = []; + for (const cat of selectedCategories) { + (buckets[cat]?.length ? nonEmpty : empty).push(cat); + } return [...nonEmpty, ...empty]; }, [selectedCategories, buckets]); @@ -87,4 +91,4 @@ const CategorySections: React.FC = ({ ); }; -export default CategorySections; +export default CategorySections; \ No newline at end of file From 3ba030e3d10155550b8c4560f726826befb863dd Mon Sep 17 00:00:00 2001 From: Joe Heffernan Date: Wed, 18 Feb 2026 11:47:57 -0800 Subject: [PATCH 7/7] format --- src/components/CategorySections.tsx | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/src/components/CategorySections.tsx b/src/components/CategorySections.tsx index 9c731595..1e04684f 100644 --- a/src/components/CategorySections.tsx +++ b/src/components/CategorySections.tsx @@ -1,16 +1,13 @@ import React from "react"; - - -import { CategoryLabel, UnpackedNormalCellLine } from "../component-queries/types"; +import { + CategoryLabel, + UnpackedNormalCellLine, +} from "../component-queries/types"; import CellLineTable from "./CellLineTable"; import { getNormalTableMobileConfig } from "./CellLineTable/MobileView"; import { getNormalTableColumns } from "./CellLineTable/NormalTableColumns"; - - - - interface CategorySectionsProps { selectedCategories: CategoryLabel[]; filteredList: UnpackedNormalCellLine[]; @@ -91,4 +88,4 @@ const CategorySections: React.FC = ({ ); }; -export default CategorySections; \ No newline at end of file +export default CategorySections;