Feature/null search (#421)

* show custom message when search results are empty

* reduce padding on empty message for small screens

* sort categories so empty results are at the end

* format

* overflow hidden for tables with empty messge

* only iterate over selected categories once when ordering buckets

* format

Author: interim17

src/components/CategorySections.tsx

@@ -58,11 +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: 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 (
                     <CellLineTable
                         key={cat}

src/components/CellLineTable/index.tsx

@@ -15,7 +15,9 @@ const {
     comingSoon,
     container,
     dataComplete,
+    emptyMessage,
     hoveredRow,
+    link,
     tableTitle,
     titleContainer,
 } = require("../../style/table.module.css");
@@ -118,6 +120,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 +180,8 @@ const CellLineTable = ({
                 dataSource={cellLines}
                 showSorterTooltip={false}
                 sortDirections={["ascend", "descend", "ascend"]}
+                showHeader={cellLines.length > 0}
+                locale={{ emptyText: noDataMessage }}
             />
         </>
     );

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;
+    }
 }