code is ready :o

chanzuckerberg · Nov 15, 2023 · 6f2937d · 6f2937d
1 parent 280687b
commit 6f2937d
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 37 deletions.
diff --git a/frontend/src/views/WheresMyGeneV2/components/CellInfoSideBar/constants.ts b/frontend/src/views/WheresMyGeneV2/components/CellInfoSideBar/constants.ts
@@ -11,5 +11,10 @@ export const MARKER_SCORE_DOTPLOT_BUTTON_TEXT = "Add to Dot Plot";
 export const NO_MARKER_GENES_HEADER = "No Marker Genes";
 export const NO_MARKER_GENES_DESCRIPTION =
   "No reliable marker genes for this cell type.";
+export const TOO_FEW_CELLS_NO_MARKER_GENES_DESCRIPTION =
+  "Marker genes are not available for cell types with <25 cells.";
+export const NO_MARKER_GENES_FOR_BLOOD_DESCRIPTION =
+  "Cell types within Blood are closely related, so we are unable to generate high value marker genes at this time.";
 export const TABLE_HEADER_GENE = "Gene";
 export const TABLE_HEADER_SCORE = "Marker Score";
+export const FMG_EXCLUDE_TISSUES = ["blood"];
diff --git a/frontend/src/views/WheresMyGeneV2/components/CellInfoSideBar/index.tsx b/frontend/src/views/WheresMyGeneV2/components/CellInfoSideBar/index.tsx
@@ -28,6 +28,7 @@ import InfoSVG from "src/common/images/info-sign-icon.svg";
 import { InfoButtonWrapper } from "src/components/common/Filter/common/style";
 import { CellInfoBarProps } from "./types";
 import {
+  FMG_EXCLUDE_TISSUES,
   MARKER_GENES_TOOLTIP_CONTENT,
   MARKER_GENE_LABEL,
   MARKER_SCORE_CELLGUIDE_LINK_TEXT,
@@ -36,9 +37,11 @@ import {
   MARKER_SCORE_TOOLTIP_CONTENT,
   MARKER_SCORE_TOOLTIP_LINK_TEXT,
   NO_MARKER_GENES_DESCRIPTION,
+  NO_MARKER_GENES_FOR_BLOOD_DESCRIPTION,
   NO_MARKER_GENES_HEADER,
   TABLE_HEADER_GENE,
   TABLE_HEADER_SCORE,
+  TOO_FEW_CELLS_NO_MARKER_GENES_DESCRIPTION,
 } from "./constants";
 import { useConnect } from "./connect";
 import {
@@ -68,10 +71,14 @@ function CellInfoSideBar({
 
   if (isLoading || !data) return null;
 
-  const numMarkerGenes = Object.keys(data.marker_genes).length;
-
   if (!cellInfoCellType) return null;
 
+  const numMarkerGenes = Object.keys(data.marker_genes).length;
+  const shouldShowEmptyState =
+    numMarkerGenes === 0 ||
+    cellInfoCellType.cellType.total_count < 25 ||
+    FMG_EXCLUDE_TISSUES.includes(tissueInfo.name);
+
   return (
     <>
       <TissueName>{tissueInfo.name}</TissueName>
@@ -137,20 +144,24 @@ function CellInfoSideBar({
           sdsType="primary"
           isAllCaps={false}
           style={{ fontWeight: "500" }}
-          disabled={!numMarkerGenes}
+          disabled={shouldShowEmptyState}
         >
           {MARKER_SCORE_DOTPLOT_BUTTON_TEXT}
         </Button>
       </ButtonContainer>
-      {!numMarkerGenes ? (
+      {shouldShowEmptyState ? (
         (track(EVENTS.WMG_FMG_NO_MARKER_GENES, {
           combination: `${cellInfoCellType.cellType.id}, ${tissueInfo.id}`,
         }),
         (
           <NoMarkerGenesContainer data-testid="no-marker-genes-warning">
             <NoMarkerGenesHeader>{NO_MARKER_GENES_HEADER}</NoMarkerGenesHeader>
             <NoMarkerGenesDescription>
-              {NO_MARKER_GENES_DESCRIPTION}
+              {FMG_EXCLUDE_TISSUES.includes(tissueInfo.name)
+                ? NO_MARKER_GENES_FOR_BLOOD_DESCRIPTION
+                : cellInfoCellType.cellType.total_count < 25
+                ? TOO_FEW_CELLS_NO_MARKER_GENES_DESCRIPTION
+                : NO_MARKER_GENES_DESCRIPTION}
             </NoMarkerGenesDescription>
           </NoMarkerGenesContainer>
         ))

diff --git a/frontend/src/views/WheresMyGeneV2/components/HeatMap/components/YAxisChart/index.tsx b/frontend/src/views/WheresMyGeneV2/components/HeatMap/components/YAxisChart/index.tsx
@@ -60,9 +60,6 @@ interface Props {
   expandedTissueIds: string[];
 }
 
-// List of Tissues to exclude from FMG
-const FMG_EXCLUDE_TISSUES = ["blood"];
-
 export default memo(function YAxisChart({
   cellTypes = [],
   tissue,
@@ -265,35 +262,32 @@ const CellTypeButton = ({
           </Tooltip>
         </CellTypeLabelStyle>
 
-        {!FMG_EXCLUDE_TISSUES.includes(tissue) &&
-          cellType &&
-          cellType.total_count > 25 &&
-          cellType.optionId === COMPARE_OPTION_ID_FOR_AGGREGATED && (
-            <InfoButtonWrapper
-              className={EXCLUDE_IN_SCREENSHOT_CLASS_NAME}
-              onClick={() => {
-                if (cellType) {
-                  generateMarkerGenes(cellType, tissueID);
-                  track(EVENTS.WMG_FMG_INFO_CLICKED, {
-                    combination: `${cellType.name}, ${tissue}}`,
-                  });
-                }
-              }}
-            >
-              <StyledImage
-                data-testid="marker-gene-button"
-                src={InfoSVG.src}
-                /**
-                 * (thuang): https://nextjs.org/docs/pages/api-reference/components/image-legacy#layout
-                 * Use the <StyledImage /> width and height, since default is `intrinsic`
-                 */
-                layout="fixed"
-                width="10"
-                height="10"
-                alt={`display marker genes for ${cellType.name}`}
-              />
-            </InfoButtonWrapper>
-          )}
+        {cellType && cellType.optionId === COMPARE_OPTION_ID_FOR_AGGREGATED && (
+          <InfoButtonWrapper
+            className={EXCLUDE_IN_SCREENSHOT_CLASS_NAME}
+            onClick={() => {
+              if (cellType) {
+                generateMarkerGenes(cellType, tissueID);
+                track(EVENTS.WMG_FMG_INFO_CLICKED, {
+                  combination: `${cellType.name}, ${tissue}}`,
+                });
+              }
+            }}
+          >
+            <StyledImage
+              data-testid="marker-gene-button"
+              src={InfoSVG.src}
+              /**
+               * (thuang): https://nextjs.org/docs/pages/api-reference/components/image-legacy#layout
+               * Use the <StyledImage /> width and height, since default is `intrinsic`
+               */
+              layout="fixed"
+              width="10"
+              height="10"
+              alt={`display marker genes for ${cellType.name}`}
+            />
+          </InfoButtonWrapper>
+        )}
       </FlexRow>
       <CellCountLabelStyle
         className={CELL_COUNT_LABEL_CLASS_NAME}