Merge branch 'main' of https://github.com/allen-cell-animated/cell-catalog into fix/align-info-card

Author: rugeli

src/component-queries/convert-data.ts

@@ -65,7 +65,7 @@ export const convertFrontmatterToDiseaseCellLine = (
     return {
         cellLineId: cellLineNode.frontmatter.cell_line_id,
         certificateOfAnalysis: cellLineNode.frontmatter.certificate_of_analysis,
-        healthCertificate: cellLineNode.frontmatter.hPSCreg_certificate_link,
+        healthCertificate: cellLineNode.frontmatter.hpscreg_certificate_link,
         snp: cellLineNode.frontmatter.snp,
         status: cellLineNode.frontmatter.status,
         clones: cellLineNode.frontmatter.clones,
@@ -121,7 +121,7 @@ export const convertFrontmatterToNormalCellLines = ({
         structures: structures,
         status: cellLineNode.frontmatter.status,
         certificateOfAnalysis: cellLineNode.frontmatter.certificate_of_analysis,
-        healthCertificate: cellLineNode.frontmatter.eu_hpsc_reg,
+        healthCertificate: cellLineNode.frontmatter.hpscreg_certificate_link,
         orderLink: cellLineNode.frontmatter.order_link,
         orderPlasmid: cellLineNode.frontmatter.donor_plasmid,
         thumbnailImage: getThumbnail(

src/component-queries/types.ts

@@ -134,7 +134,7 @@ export interface NormalCellLineFrontmatter {
         };
     };
     certificate_of_analysis: string;
-    eu_hpsc_reg: string;
+    hpscreg_certificate_link: string;
     editing_design: {
         ncbi_isoforms: string;
         cr_rna: string;
@@ -217,7 +217,7 @@ export interface DiseaseCellLineFrontmatter {
     certificate_of_analysis: string;
     order_link: string;
     status: CellLineStatus;
-    hPSCreg_certificate_link: string;
+    hpscreg_certificate_link: string;
     images_and_videos?: MediaFrontmatter;
     editing_design?: {
         cr_rna_target_site: string;

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/CellLineInfoCard/CellLineInfoCardBase.tsx

@@ -52,11 +52,21 @@ const CellLineInfoCardBase = ({
 }: CellLineInfoCardBaseProps) => {
     const [showToolTip, setShowToolTip] = useState(false);
 
-    const getDefaultButton = (label: string, href: string) => (
-        <DefaultButton key={href} href={href} target="_blank" rel="noreferrer">
-            {label}
-        </DefaultButton>
-    );
+    const getDefaultButton = (label: string, href: string) => {
+        if (!href) {
+            return null;
+        }
+        return (
+            <DefaultButton
+                key={href}
+                href={href}
+                target="_blank"
+                rel="noreferrer"
+            >
+                {label}
+            </DefaultButton>
+        );
+    };
 
     const getOrderButton = (
         { disabledLabel, href, icon, label, subtitle }: OrderButtonProps,

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/components/SubPage/convert-data.ts

@@ -333,7 +333,7 @@ export const unpackNormalFrontmatterForSubpage = (
         structures: structures,
         status: cellLineNode.frontmatter.status,
         certificateOfAnalysis: cellLineNode.frontmatter.certificate_of_analysis,
-        healthCertificate: cellLineNode.frontmatter.eu_hpsc_reg,
+        healthCertificate: cellLineNode.frontmatter.hpscreg_certificate_link,
         orderLink: cellLineNode.frontmatter.order_link,
         orderPlasmid: cellLineNode.frontmatter.donor_plasmid,
         thumbnailImage: getThumbnail(
@@ -371,7 +371,7 @@ export const unpackDiseaseFrontmatterForSubpage = (
         cellLineId: cellLineNode.frontmatter.cell_line_id,
         status: cellLineNode.frontmatter.status,
         certificateOfAnalysis: cellLineNode.frontmatter.certificate_of_analysis,
-        healthCertificate: cellLineNode.frontmatter.hPSCreg_certificate_link,
+        healthCertificate: cellLineNode.frontmatter.hpscreg_certificate_link,
         orderLink: cellLineNode.frontmatter.order_link,
         geneName: geneName,
         geneSymbol: geneSymbol,

src/pages/cell-line/AICS-10-55/index.md

@@ -12,7 +12,7 @@ genetic_modifications:
 order_link: https://catalog.coriell.org/0/Sections/Search/Sample_Detail.aspx?Ref=AICS-0010&Product=iPSC
 certificate_of_analysis: https://catalog.coriell.org/0/PDF/Allen/ipsc/AICS-0010_CofA.pdf
 donor_plasmid: https://www.addgene.org/87426/
-eu_hpsc_reg: https://hpscreg.eu/cell-line/UCSFi001-A-8
+hpscreg_certificate_link: https://hpscreg.eu/cell-line/UCSFi001-A-8
 images_and_videos:
   images:
     - image: single_plane_image_cl55.jpg

src/pages/cell-line/AICS-11-27/index.md

@@ -12,7 +12,7 @@ genetic_modifications:
 order_link: https://catalog.coriell.org/0/Sections/Search/Sample_Detail.aspx?Ref=AICS-0011&Product=iPSC
 certificate_of_analysis: https://catalog.coriell.org/0/PDF/Allen/ipsc/AICS-0011_CofA.pdf
 donor_plasmid: https://www.addgene.org/87423/
-eu_hpsc_reg: https://hpscreg.eu/cell-line/UCSFi001-A-5
+hpscreg_certificate_link: https://hpscreg.eu/cell-line/UCSFi001-A-5
 images_and_videos:
   images:
     - image: single_plane_image_cl27.jpg

src/pages/cell-line/AICS-114-32/index.md

@@ -13,7 +13,7 @@ genetic_modifications:
 order_link: https://catalog.coriell.org/0/Sections/Search/Sample_Detail.aspx?Ref=AICS-0114-032&Product=iPSC
 certificate_of_analysis: https://catalog.coriell.org/0/PDF/Allen/ipsc/AICS-0114-032_CofA.pdf
 donor_plasmid: https://www.addgene.org/193921/
-eu_hpsc_reg: https://hpscreg.eu/cell-line/UCSFi001-A-66
+hpscreg_certificate_link: https://hpscreg.eu/cell-line/UCSFi001-A-66
 images_and_videos:
   images:
     - image: single_plane_image_cl32.jpg

src/pages/cell-line/AICS-114-35/index.md

@@ -141,5 +141,5 @@ stem_cell_characteristics:
     Biosciences) and gating was based on an isotype control. Ranges observed
     across multiple experiments are shown for Troponin T and Day of beating
     initiation; number of experiments is shown in (). "
-eu_hpsc_reg: https://hpscreg.eu/cell-line/UCSFi001-A-67
+hpscreg_certificate_link: https://hpscreg.eu/cell-line/UCSFi001-A-67
 ---