chore(wmg): replace heatmap dots loader

frontend/src/views/WheresMyGeneV2/common/constants.ts

@@ -2,6 +2,11 @@ export const GENE_SEARCH_BAR_HEIGHT_PX = 32;
 export const HEATMAP_CONTAINER_ID = "heatmap-container-id";
 export const FMG_GENE_STRENGTH_THRESHOLD = 0.5;
 export const FMG_SPECIFICITY_THRESHOLD = 0.0;
+export const LOADER_HIDE_LABEL_THRESHOLD = 13;
+export const LOADER_POSITION_MULTIPLIER = 19;
+export const LOADER_POSITION_MULTIPLIER_LABEL = 62;
+export const LOADER_POSITION_MULTIPLIER_NO_LABEL = 61;
+export const LOADER_LABEL_TEXT = "Loading Data...";
 
 /**
  * (thuang): The `id` options here must match what the BE expects

frontend/src/views/WheresMyGeneV2/components/HeatMap/connect.ts

@@ -332,11 +332,14 @@ export function useConnect({
     dispatch,
   });
 
+  const geneCount = sortedGeneNames.length;
+
   return {
     allTissueCellTypes,
     chartWrapperRef,
     expandedTissueIds,
     filteredCellTypes,
+    geneCount,
     generateMarkerGenes,
     handleCellTypeDelete,
     handleExpandCollapse,

frontend/src/views/WheresMyGeneV2/components/HeatMap/index.tsx

@@ -2,21 +2,11 @@ import { memo } from "react";
 
 import { Tissue } from "src/views/WheresMyGeneV2/common/types";
 import YAxisChart from "./components/YAxisChart";
-
-import {
-  CellTypeTagContainer,
-  ChartWrapper,
-  Container,
-  ContainerWrapper,
-  SkeletonContainer,
-  SkeletonWrapper,
-  StyledTag,
-  XAxisMask,
-  YAxisWrapper,
-} from "src/views/WheresMyGeneV2/components/HeatMap/style";
 import { CellCountLabel } from "src/views/WheresMyGeneV2/components/HeatMap/components/XAxisChart/style";
 import {
   HEATMAP_CONTAINER_ID,
+  LOADER_HIDE_LABEL_THRESHOLD,
+  LOADER_LABEL_TEXT,
   MARGIN_BETWEEN_HEATMAPS,
 } from "src/views/WheresMyGeneV2/common/constants";
 import Loader from "src/views/WheresMyGeneV2/components/Loader";
@@ -27,10 +17,20 @@ import { EXCLUDE_IN_SCREENSHOT_CLASS_NAME } from "../GeneSearchBar/components/Sa
 import { Autocomplete } from "@czi-sds/components";
 import {
   CellTypeFilterContainer,
+  CellTypeTagContainer,
+  ChartWrapper,
+  Container,
+  ContainerWrapper,
   Divider,
+  LoadingContainer,
+  LoadingLabel,
+  LoadingSpinner,
+  LoadingWrapper,
+  StyledTag,
   TopLeftCornerMask,
+  XAxisMask,
   XAxisWrapper,
-  StyledSkeleton,
+  YAxisWrapper,
 } from "./style";
 
 import { useConnect } from "src/views/WheresMyGeneV2/components/HeatMap/connect";
@@ -55,6 +55,7 @@ export default memo(function HeatMap(props: Props): JSX.Element {
     chartWrapperRef,
     expandedTissueIds,
     filteredCellTypes,
+    geneCount,
     generateMarkerGenes,
     handleCellTypeDelete,
     handleExpandCollapse,
@@ -126,33 +127,27 @@ export default memo(function HeatMap(props: Props): JSX.Element {
               }
             )}
           </YAxisWrapper>
-          {isLoadingAPI ||
-            (isAnyTissueLoading(isLoading) && (
-              <ChartWrapper
-                top={xAxisHeight}
-                hidden={!isAnyTissueLoading(isLoading)}
-              >
-                <SkeletonContainer>
-                  {[...Array(totalElementsCount)].map((_, index) => (
-                    <SkeletonWrapper key={index} data-testid="skeleton-wrapper">
-                      {[...Array(sortedGeneNames.length)].map((_, index) => (
-                        <StyledSkeleton
-                          variant="circular"
-                          width={19}
-                          height={19}
-                          key={index}
-                          data-testid="skeleton-circle"
-                        />
-                      ))}
-                    </SkeletonWrapper>
-                  ))}
-                </SkeletonContainer>
-              </ChartWrapper>
-            ))}
+          {isAnyTissueLoading(isLoading) && (
+            <ChartWrapper
+              top={xAxisHeight}
+              visible={isAnyTissueLoading(isLoading)}
+            >
+              <LoadingContainer height={totalElementsCount} width={geneCount}>
+                <LoadingWrapper geneCount={geneCount}>
+                  <LoadingSpinner />
+                  <LoadingLabel
+                    visible={geneCount > LOADER_HIDE_LABEL_THRESHOLD}
+                  >
+                    {LOADER_LABEL_TEXT}
+                  </LoadingLabel>
+                </LoadingWrapper>
+              </LoadingContainer>
+            </ChartWrapper>
+          )}
           <ChartWrapper
             ref={chartWrapperRef}
             top={xAxisHeight}
-            hidden={isAnyTissueLoading(isLoading)}
+            visible={!isAnyTissueLoading(isLoading) && !isLoadingAPI}
           >
             {allTissueCellTypes.map(({ tissueName, tissueCellTypes }) => {
               const selectedGeneData =

frontend/src/views/WheresMyGeneV2/components/HeatMap/style.ts

@@ -1,13 +1,19 @@
 import styled from "@emotion/styled";
-import { CommonThemeProps, TagFilter } from "@czi-sds/components";
+import { CommonThemeProps, TagFilter, fontHeaderXl } from "@czi-sds/components";
 
-import { gray300, spacesM, spacesS } from "src/common/theme";
+import { gray100, gray400, gray300, spacesM, spacesS } from "src/common/theme";
 import { HEADER_HEIGHT_PX } from "src/components/Header/style";
 import {
   CONTENT_WRAPPER_LEFT_RIGHT_PADDING_PX,
   CONTENT_WRAPPER_TOP_BOTTOM_PADDING_PX,
 } from "src/components/Layout/style";
-import { X_AXIS_CHART_HEIGHT_PX } from "src/views/WheresMyGeneV2/common/constants";
+import {
+  LOADER_HIDE_LABEL_THRESHOLD,
+  LOADER_POSITION_MULTIPLIER,
+  LOADER_POSITION_MULTIPLIER_LABEL,
+  LOADER_POSITION_MULTIPLIER_NO_LABEL,
+  X_AXIS_CHART_HEIGHT_PX,
+} from "src/views/WheresMyGeneV2/common/constants";
 import {
   CELL_TYPE_FILTER_WIDTH_PX,
   DIVIDER_LEFT_POSITION_PX,
@@ -17,7 +23,6 @@ import {
 import { LEGEND_HEIGHT_PX } from "../InfoPanel/components/Legend/style";
 import { LEGEND_MARGIN_BOTTOM_PX } from "../../style";
 import { LIGHT_GRAY } from "src/components/common/theme";
-import { Skeleton } from "@mui/material";
 
 export function xAxisOffset(props: CommonThemeProps) {
   /**
@@ -120,7 +125,7 @@ export const TopLeftCornerMask = styled.div<TopLeftCornerMaskProps>`
 
 interface ChartWrapperProps extends CommonThemeProps {
   top: number;
-  hidden: boolean;
+  visible: boolean;
 }
 
 export const ChartWrapper = styled.div<ChartWrapperProps>`
@@ -130,7 +135,8 @@ export const ChartWrapper = styled.div<ChartWrapperProps>`
   padding-top: ${(props) => xAxisOffset(props) + PADDING_UNDER_HEADERS_PX}px;
   left: ${Y_AXIS_CHART_WIDTH_PX}px;
   top: ${(props) => props.top}px;
-  visibility: ${(props) => (props.hidden ? "hidden" : "visible")};
+  visibility: ${(props) => (props.visible ? "visible" : "hidden")};
+  width: 100%;
 `;
 
 export const StyledTag = styled(TagFilter)`
@@ -161,16 +167,73 @@ export const YAxisWrapper = styled.div<YAxisWrapperProps>`
   overflow: hidden;
 `;
 
-export const StyledSkeleton = styled(Skeleton)`
-  margin: 0px 0px 4px 1px;
+interface LoadingContainerProps extends CommonThemeProps {
+  height: number;
+  width: number;
+}
+
+export const LoadingContainer = styled.div<LoadingContainerProps>`
+  position: absolute;
+  display: flex;
+  width: ${(props) => props.width * 20}px;
+  height: ${(props) => props.height * 20}px;
+  background-color: ${gray100};
 `;
 
-export const SkeletonContainer = styled.div`
+interface LoadingProps extends CommonThemeProps {
+  geneCount: number;
+}
+
+export const LoadingWrapper = styled.div<LoadingProps>`
   display: flex;
   flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 600px;
+  /**  
+  * This is a multiplier to keep the loader centered 
+  * under any number of genes selected, as well as hide 
+  * the label when there are under 13 genes selcted
+  */
+  left: ${(props) =>
+    ((props.geneCount +
+      (props.geneCount < LOADER_HIDE_LABEL_THRESHOLD
+        ? LOADER_POSITION_MULTIPLIER_NO_LABEL
+        : LOADER_POSITION_MULTIPLIER_LABEL)) *
+      LOADER_POSITION_MULTIPLIER) /
+    2}px;
 `;
 
-export const SkeletonWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
+interface LoadingLabelProps extends CommonThemeProps {
+  visible: boolean;
+}
+
+export const LoadingLabel = styled.div<LoadingLabelProps>`
+  color: black;
+  ${fontHeaderXl}
+  padding-top: 20px;
+  visibility: ${(props) => (props.visible ? "visible" : "hidden")};
+`;
+
+export const LoadingSpinner = styled.div`
+  --d: 10.6px;
+  width: 1.9px;
+  height: 1.9px;
+  border-radius: 50%;
+  color: ${gray400};
+  box-shadow:
+    calc(1 * var(--d)) calc(0 * var(--d)) 0 0,
+    calc(0.707 * var(--d)) calc(0.707 * var(--d)) 0 0.5px,
+    calc(0 * var(--d)) calc(1 * var(--d)) 0 1px,
+    calc(-0.707 * var(--d)) calc(0.707 * var(--d)) 0 1.4px,
+    calc(-1 * var(--d)) calc(0 * var(--d)) 0 1.9px,
+    calc(-0.707 * var(--d)) calc(-0.707 * var(--d)) 0 2.4px;
+  animation: spinner 1s infinite steps(8);
+
+  @keyframes spinner {
+    100% {
+      transform: rotate(1turn);
+    }
+  }
 `;