feat: fix spacing in gene expression

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

@@ -32,7 +32,7 @@ export const X_AXIS_CHART_HEIGHT_PX_SVG = 30;
 // Increasing this value adds more space between the gene label and icons
 export const X_AXIS_HOVER_CONTAINER_HEIGHT_PX = 40;
 
-export const MARGIN_BETWEEN_HEATMAPS = 8;
+export const MARGIN_BETWEEN_HEATMAPS = 4;
 
 // Below constants are for left sidebar tooltip text so that tests can import these strings from this file instead
 export const SELECT_TISSUE_GENE_TEXT =

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

@@ -15,6 +15,8 @@ interface ContainerProps {
   sidebarWidth: number;
 }
 
+const GENE_SEARCH_LEFT_OFFSET_PX = 24;
+
 export const Container = styled.div`
   height: ${GENE_SEARCH_BAR_HEIGHT_PX}px;
   width: fit-content;
@@ -29,7 +31,8 @@ export const Container = styled.div`
   left: ${({ sidebarWidth }: ContainerProps) =>
     sidebarWidth +
     CONTENT_WRAPPER_LEFT_RIGHT_PADDING_PX +
-    Y_AXIS_CHART_WIDTH_PX}px;
+    Y_AXIS_CHART_WIDTH_PX +
+    GENE_SEARCH_LEFT_OFFSET_PX}px;
 `;
 
 export const AutocompleteWrapper = styled.div`

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

@@ -1,8 +1,10 @@
 import styled from "@emotion/styled";
-import { SELECTED_STYLE } from "../../style";
-import { HEAT_MAP_BASE_CELL_WIDTH_PX } from "../../utils";
+import { SELECTED_STYLE, xAxisOffset } from "../../style";
+import {
+  GENE_CHART_LEFT_OFFSET_PX,
+  HEAT_MAP_BASE_CELL_WIDTH_PX,
+} from "../../utils";
 import { GENE_SEARCH_BAR_HEIGHT_PX } from "src/views/WheresMyGeneV2/common/constants";
-import { spacesXxxs } from "src/common/theme";
 import { CommonThemeProps } from "@czi-sds/components";
 
 export const ECHART_AXIS_LABEL_COLOR_HEX = "#000000";
@@ -14,31 +16,18 @@ interface XAxisContainerProps extends CommonThemeProps {
   width: number;
 }
 
-function xAxisOffset(props: CommonThemeProps) {
-  /**
-   * (thuang): This offset is to make sure the x-axis label doesn't overlap the
-   * gene search bar.
-   */
-  return spacesXxxs?.(props) || 0;
-}
-
 export const XAxisContainer = styled.div<XAxisContainerProps>`
   ${xAxisWidth}
   background-color: white;
   height: ${(props) => {
-    /**
-     * (thuang): This offset is to make sure the x-axis label doesn't overlap the
-     * gene search bar.
-     */
-    const offset = xAxisOffset(props);
-
-    return props.height - GENE_SEARCH_BAR_HEIGHT_PX - offset;
+    return props.height - GENE_SEARCH_BAR_HEIGHT_PX;
   }}px;
   position: absolute;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   margin-top: ${(props) => GENE_SEARCH_BAR_HEIGHT_PX + xAxisOffset(props)}px;
+  margin-left: ${GENE_CHART_LEFT_OFFSET_PX}px;
 `;
 
 interface XAxisWrapperProps {

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

@@ -3,30 +3,23 @@ import styled from "@emotion/styled";
 import { HEAT_MAP_BASE_CELL_PX, Y_AXIS_CHART_WIDTH_PX } from "../../utils";
 import { ECHART_AXIS_LABEL_COLOR_HEX } from "../XAxisChart/style";
 import { SELECTED_STYLE } from "../../style";
-import { MARGIN_BETWEEN_HEATMAPS } from "src/views/WheresMyGeneV2/common/constants";
-import { fontWeightSemibold, gray500 } from "src/common/theme";
+import {
+  fontWeightSemibold,
+  gray500,
+  spacesS,
+  spacesXxs,
+} from "src/common/theme";
 import { CommonThemeProps } from "@czi-sds/components";
 
 export const Y_AXIS_TISSUE_WIDTH_PX = 30;
 
 export const Wrapper = styled.div`
   display: flex;
-  margin-bottom: ${MARGIN_BETWEEN_HEATMAPS}px;
+  margin-bottom: ${spacesXxs}px;
   margin-right: ${Y_AXIS_TISSUE_WIDTH_PX}px;
   width: ${Y_AXIS_CHART_WIDTH_PX}px;
 `;
 
-const TISSUE_BORDER_WIDTH_PX = 5;
-
-export const TissueWrapper = styled.div`
-  ${yAxisHeight}
-
-  background-color: white;
-  border-right: ${TISSUE_BORDER_WIDTH_PX}px solid black;
-  width: ${Y_AXIS_TISSUE_WIDTH_PX}px;
-  padding-left: ${TISSUE_BORDER_WIDTH_PX}px;
-`;
-
 export const TissueName = styled.div`
   text-orientation: sideways;
   writing-mode: vertical-rl;
@@ -67,6 +60,7 @@ export const TissueHeaderLabelStyle = styled.div`
   width: 100%;
   color: ${ECHART_AXIS_LABEL_COLOR_HEX};
   text-align: left;
+  padding-left: ${spacesS}px;
   ${(props: TissueHeaderLabelStyleProps) => {
     return props.expanded && `font-weight: ${fontWeightSemibold(props)}`;
   }}
@@ -94,7 +88,7 @@ export const CellCountLabelStyle = styled.div`
   border: none;
   color: ${gray500};
   text-align: right;
-  padding-top: 3px;
+  margin-top: 3px;
 `;
 export const FlexRowJustified = styled.div`
   display: flex;

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

@@ -105,7 +105,7 @@ export default memo(function HeatMap(props: Props): JSX.Element {
               sidebarWidth={sidebarWidth}
             />
           </XAxisWrapper>
-          <YAxisWrapper top={0}>
+          <YAxisWrapper top={xAxisHeight}>
             {allTissueCellTypes.map(
               ({ tissueId, tissueName, tissueCellTypes }) => {
                 return (

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

@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
-import { TagFilter } from "@czi-sds/components";
+import { CommonThemeProps, TagFilter } from "@czi-sds/components";
 
-import { gray300, spacesS } from "src/common/theme";
+import { gray300, spacesM, spacesS } from "src/common/theme";
 import { HEADER_HEIGHT_PX } from "src/components/Header/style";
 import {
   CONTENT_WRAPPER_LEFT_RIGHT_PADDING_PX,
@@ -10,13 +10,25 @@ import {
 import { X_AXIS_CHART_HEIGHT_PX } from "src/views/WheresMyGeneV2/common/constants";
 import {
   CELL_TYPE_FILTER_WIDTH_PX,
-  DIVIDER_MARGIN_PX,
+  DIVIDER_LEFT_POSITION_PX,
+  GENE_CHART_LEFT_OFFSET_PX,
   Y_AXIS_CHART_WIDTH_PX,
 } from "src/views/WheresMyGeneV2/components/HeatMap/utils";
 import { LEGEND_HEIGHT_PX } from "../InfoPanel/components/Legend/style";
 import { LEGEND_MARGIN_BOTTOM_PX } from "../../style";
 import { LIGHT_GRAY } from "src/components/common/theme";
 
+export function xAxisOffset(props: CommonThemeProps) {
+  /**
+   * (thuang): This offset is to make sure the x-axis label doesn't overlap the
+   * gene search bar.
+   */
+  return spacesM?.(props) || 0;
+}
+
+const PADDING_UNDER_HEADERS_PX = 5;
+const TOP_LEFT_CORNER_OFFSET_PX = 6;
+
 export const SELECTED_STYLE = {
   backgroundColor: LIGHT_GRAY.D,
   fontWeight: "bold" as never,
@@ -68,7 +80,7 @@ export const ContainerWrapper = styled.div`
 export const Divider = styled.div`
   height: 100%;
   position: absolute;
-  left: ${CELL_TYPE_FILTER_WIDTH_PX + DIVIDER_MARGIN_PX}px;
+  left: ${DIVIDER_LEFT_POSITION_PX}px;
   width: 1px;
   top: 0;
   border-right: solid 0.5px ${gray300};
@@ -85,7 +97,7 @@ export const XAxisWrapper = styled.div`
   z-index: ${ZIndex.XAxisWrapper};
 `;
 
-interface TopLeftCornerMaskProps {
+interface TopLeftCornerMaskProps extends CommonThemeProps {
   height: number;
 }
 
@@ -95,24 +107,25 @@ export const TopLeftCornerMask = styled.div<TopLeftCornerMaskProps>`
   z-index: ${ZIndex.TopLeftCornerMask};
   top: 0px;
   left: 0px;
-  width: ${Y_AXIS_CHART_WIDTH_PX}px;
-  height: ${(props) => props.height || X_AXIS_CHART_HEIGHT_PX}px;
+  width: ${Y_AXIS_CHART_WIDTH_PX + TOP_LEFT_CORNER_OFFSET_PX}px;
+  height: ${(props) =>
+    props.height + xAxisOffset(props) || X_AXIS_CHART_HEIGHT_PX}px;
   min-height: ${(props) => props.height}px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: end;
 `;
 
-interface ChartWrapperProps {
+interface ChartWrapperProps extends CommonThemeProps {
   top: number;
 }
 
 export const ChartWrapper = styled.div<ChartWrapperProps>`
   position: absolute;
-  padding-left: ${CHART_PADDING_PX}px;
+  padding-left: ${CHART_PADDING_PX + GENE_CHART_LEFT_OFFSET_PX}px;
   padding-right: ${CHART_PADDING_PX}px;
-  padding-top: 5px;
+  padding-top: ${(props) => xAxisOffset(props) + PADDING_UNDER_HEADERS_PX}px;
   left: ${Y_AXIS_CHART_WIDTH_PX}px;
   top: ${(props) => props.top}px;
 `;
@@ -130,7 +143,7 @@ export const XAxisMask = styled.div<XAxisMaskProps>`
   height: ${(props) => props.height}px;
 `;
 
-interface YAxisWrapperProps {
+interface YAxisWrapperProps extends CommonThemeProps {
   top: number;
 }
 
@@ -140,7 +153,7 @@ export const YAxisWrapper = styled.div<YAxisWrapperProps>`
   top: ${(props) => props.top ?? X_AXIS_CHART_HEIGHT_PX}px;
   left: 0;
   z-index: 1;
-  padding-top: 5px;
+  padding-top: ${(props) => xAxisOffset(props) + PADDING_UNDER_HEADERS_PX}px;
   /* Somehow Firefox requires this to scroll */
   overflow: hidden;
 `;

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

@@ -19,7 +19,15 @@ import { TISSUE_CELL_TYPE_DIVIDER } from "./hooks/useSortedGeneNames";
 export const CELL_TYPE_FILTER_WIDTH_PX = 300;
 
 export const DIVIDER_MARGIN_PX = 12;
+export const GENE_CHART_LEFT_OFFSET_PX = 12;
 const CELL_COUNT_COLUMN_WIDTH_PX = 40;
+const CELL_COUNT_DIVIDER_GAP_PX = 8;
+
+export const DIVIDER_LEFT_POSITION_PX =
+  CELL_TYPE_FILTER_WIDTH_PX +
+  DIVIDER_MARGIN_PX * 2 +
+  CELL_COUNT_DIVIDER_GAP_PX +
+  CELL_COUNT_COLUMN_WIDTH_PX;
 /**
  * This is needed to ensure the divider is 12px away from the cell count column
  */
@@ -129,8 +137,9 @@ export function getFixedWidth(
 }
 
 export const HEAT_MAP_BASE_HEIGHT_PX = 300;
-export const HEAT_MAP_BASE_CELL_PX = 20;
+export const HEAT_MAP_BASE_CELL_PX = 16;
 export const HEAT_MAP_BASE_CELL_WIDTH_PX = 20;
+const HEAT_MAP_TOTAL_CELL_HEIGHT_PX = 19;
 
 /**
  * Approximating the heatmap width by the number of genes.
@@ -147,7 +156,7 @@ export function getHeatmapWidth(
  * Approximating the heatmap height by the number of cells.
  */
 export function getHeatmapHeight(cellTypes: CellType[] = EMPTY_ARRAY): number {
-  return HEAT_MAP_BASE_CELL_PX * cellTypes.length;
+  return HEAT_MAP_TOTAL_CELL_HEIGHT_PX * cellTypes.length;
 }
 
 /**