From abdcd1e26059d7402c8aa562279b88557aafd886 Mon Sep 17 00:00:00 2001
From: Joe Heffernan <interim17@gmail.com>
Date: Thu, 12 Feb 2026 16:09:19 -0800
Subject: [PATCH 1/4] 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<CategorySectionsProps> = ({
         <>
             {selectedCategories.map((cat) => {
                 const data = buckets[cat] || [];
-                if (!data.length) return null;
                 return (
                     <CellLineTable
                         key={cat}
diff --git a/src/components/CellLineTable/index.tsx b/src/components/CellLineTable/index.tsx
index 55b28d5a..bbe05a4d 100644
--- a/src/components/CellLineTable/index.tsx
+++ b/src/components/CellLineTable/index.tsx
@@ -4,10 +4,7 @@ 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 {
@@ -15,7 +12,9 @@ const {
     comingSoon,
     container,
     dataComplete,
+    emptyMessage,
     hoveredRow,
+    link,
     tableTitle,
     titleContainer,
 } = require("../../style/table.module.css");
@@ -118,6 +117,36 @@ const CellLineTable = ({
         };
     });
 
+    const noDataMessage = (
+        <div className={emptyMessage}>
+            <h2>We can't seem to find what you're looking for...</h2>
+            <p>
+                But don't cell yourself short! Try adjusting your search
+                parameters or reach out to our{" "}
+                <a
+                    rel="noopener noreferrer"
+                    target="_blank"
+                    href="https://forum.allencell.org/"
+                    className={link}
+                >
+                    forum
+                </a>{" "}
+                to ask about availability.
+            </p>
+            <p>
+                Looking for a cell line with a disease mutation?{" "}
+                <a
+                    rel="noopener noreferrer"
+                    target="_blank"
+                    href="https://cell-catalog.allencell.org/disease-catalog/"
+                    className={link}
+                >
+                    Check out our Disease Cell Catalog.
+                </a>
+            </p>
+        </div>
+    );
+
     return (
         <>
             <Table
@@ -148,6 +177,8 @@ const CellLineTable = ({
                 dataSource={cellLines}
                 showSorterTooltip={false}
                 sortDirections={["ascend", "descend", "ascend"]}
+                showHeader={cellLines.length > 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 <interim17@gmail.com>
Date: Thu, 12 Feb 2026 16:21:41 -0800
Subject: [PATCH 2/4] 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 <interim17@gmail.com>
Date: Fri, 13 Feb 2026 09:41:54 -0800
Subject: [PATCH 3/4] 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<CategorySectionsProps> = ({
         [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 (
                     <CellLineTable

From f4e060e865f80838ce577548d2618a9aec541b62 Mon Sep 17 00:00:00 2001
From: Joe Heffernan <interim17@gmail.com>
Date: Fri, 13 Feb 2026 10:00:57 -0800
Subject: [PATCH 4/4] 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<CategorySectionsProps> = ({
         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]);