From 35c2c3a5f22672bc4e334f919d86b84f1a42aefa Mon Sep 17 00:00:00 2001 From: Joyce Yan <5653616+joyceyan@users.noreply.github.com> Date: Fri, 3 Nov 2023 15:37:34 -0400 Subject: [PATCH 1/8] wip --- .../components/Filters/components/ColorScale/index.tsx | 4 ++-- .../components/HeatMap/components/YAxisChart/style.ts | 5 ++--- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/frontend/src/views/WheresMyGeneV2/components/Filters/components/ColorScale/index.tsx b/frontend/src/views/WheresMyGeneV2/components/Filters/components/ColorScale/index.tsx index 093d6aad4b80c..66d95e5f3154c 100644 --- a/frontend/src/views/WheresMyGeneV2/components/Filters/components/ColorScale/index.tsx +++ b/frontend/src/views/WheresMyGeneV2/components/Filters/components/ColorScale/index.tsx @@ -1,7 +1,7 @@ import { Tooltip } from "@czi-sds/components"; import questionMarkIcon from "src/common/images/question-mark-icon.svg"; import { StyledDropdown, Wrapper } from "../common/style"; -import { Label } from "src/views/WheresMyGeneV2/components/InfoPanel/common/style"; +import { FilterLabel } from "../common/style"; import { LabelWrapper } from "./style"; import { StyledIconImage, @@ -19,7 +19,7 @@ export default function ColorScale({ setIsScaled }: Props): JSX.Element { return ( - + Color Scale Date: Mon, 6 Nov 2023 12:14:22 -0500 Subject: [PATCH 2/8] wip --- .../components/GeneSearchBar/style.ts | 2 +- .../HeatMap/components/XAxisChart/style.ts | 4 ++-- .../HeatMap/components/YAxisChart/style.ts | 21 +++++++------------ .../components/HeatMap/style.ts | 7 ++++--- .../components/HeatMap/utils.ts | 5 +++++ 5 files changed, 20 insertions(+), 19 deletions(-) diff --git a/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/style.ts b/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/style.ts index a2159f9ec86fd..36e2ca2acb33d 100644 --- a/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/style.ts +++ b/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/style.ts @@ -1,6 +1,6 @@ import styled from "@emotion/styled"; import { fontBodyXxs } from "@czi-sds/components"; -import { gray500 } from "src/common/theme"; +import { gray500, spacesM } from "src/common/theme"; import { Button } from "@czi-sds/components"; import { HEADER_HEIGHT_PX } from "src/components/LandingHeader/style"; import { diff --git a/frontend/src/views/WheresMyGeneV2/components/HeatMap/components/XAxisChart/style.ts b/frontend/src/views/WheresMyGeneV2/components/HeatMap/components/XAxisChart/style.ts index c10de4016c067..2aaff633222d0 100644 --- a/frontend/src/views/WheresMyGeneV2/components/HeatMap/components/XAxisChart/style.ts +++ b/frontend/src/views/WheresMyGeneV2/components/HeatMap/components/XAxisChart/style.ts @@ -2,7 +2,7 @@ import styled from "@emotion/styled"; import { SELECTED_STYLE } from "../../style"; import { 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 { spacesM, spacesXxxs } from "src/common/theme"; import { CommonThemeProps } from "@czi-sds/components"; export const ECHART_AXIS_LABEL_COLOR_HEX = "#000000"; @@ -19,7 +19,7 @@ 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; + return spacesM?.(props) || 0; } export const XAxisContainer = styled.div` diff --git a/frontend/src/views/WheresMyGeneV2/components/HeatMap/components/YAxisChart/style.ts b/frontend/src/views/WheresMyGeneV2/components/HeatMap/components/YAxisChart/style.ts index 134146fd26810..7b425d0a0730a 100644 --- a/frontend/src/views/WheresMyGeneV2/components/HeatMap/components/YAxisChart/style.ts +++ b/frontend/src/views/WheresMyGeneV2/components/HeatMap/components/YAxisChart/style.ts @@ -3,7 +3,12 @@ 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 { fontWeightSemibold, gray500, spacesXxs } 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; @@ -15,17 +20,6 @@ export const Wrapper = styled.div` 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; @@ -66,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)}`; }} @@ -93,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; diff --git a/frontend/src/views/WheresMyGeneV2/components/HeatMap/style.ts b/frontend/src/views/WheresMyGeneV2/components/HeatMap/style.ts index 97f89b44b2ae7..ed4e5cfcdfd9e 100644 --- a/frontend/src/views/WheresMyGeneV2/components/HeatMap/style.ts +++ b/frontend/src/views/WheresMyGeneV2/components/HeatMap/style.ts @@ -10,7 +10,8 @@ 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, + DIVIDER_TOP_POSITION_PX, Y_AXIS_CHART_WIDTH_PX, } from "src/views/WheresMyGeneV2/components/HeatMap/utils"; import { LEGEND_HEIGHT_PX } from "../InfoPanel/components/Legend/style"; @@ -68,9 +69,9 @@ 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; + top: 0px; border-right: solid 0.5px ${gray300}; z-index: ${ZIndex.Divider}; `; diff --git a/frontend/src/views/WheresMyGeneV2/components/HeatMap/utils.ts b/frontend/src/views/WheresMyGeneV2/components/HeatMap/utils.ts index 1b4f54eded084..204a980d6b0e0 100644 --- a/frontend/src/views/WheresMyGeneV2/components/HeatMap/utils.ts +++ b/frontend/src/views/WheresMyGeneV2/components/HeatMap/utils.ts @@ -20,6 +20,11 @@ export const CELL_TYPE_FILTER_WIDTH_PX = 300; export const DIVIDER_MARGIN_PX = 12; const CELL_COUNT_COLUMN_WIDTH_PX = 40; + +export const DIVIDER_LEFT_POSITION_PX = + CELL_TYPE_FILTER_WIDTH_PX + + DIVIDER_MARGIN_PX * 2 + + CELL_COUNT_COLUMN_WIDTH_PX; /** * This is needed to ensure the divider is 12px away from the cell count column */ From ee5d96ee0574f36f7773d79672cbd09b701d9159 Mon Sep 17 00:00:00 2001 From: Joyce Yan <5653616+joyceyan@users.noreply.github.com> Date: Wed, 8 Nov 2023 14:28:29 -0500 Subject: [PATCH 3/8] fixes some issues and introduces more --- frontend/src/views/WheresMyGeneV2/components/HeatMap/utils.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/views/WheresMyGeneV2/components/HeatMap/utils.ts b/frontend/src/views/WheresMyGeneV2/components/HeatMap/utils.ts index 204a980d6b0e0..2cef0b7ba092c 100644 --- a/frontend/src/views/WheresMyGeneV2/components/HeatMap/utils.ts +++ b/frontend/src/views/WheresMyGeneV2/components/HeatMap/utils.ts @@ -23,7 +23,7 @@ const CELL_COUNT_COLUMN_WIDTH_PX = 40; export const DIVIDER_LEFT_POSITION_PX = CELL_TYPE_FILTER_WIDTH_PX + - DIVIDER_MARGIN_PX * 2 + + DIVIDER_MARGIN_PX * 3 + CELL_COUNT_COLUMN_WIDTH_PX; /** * This is needed to ensure the divider is 12px away from the cell count column @@ -134,7 +134,7 @@ 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; /** From 45f24f845abd4e4dd29cf1234e6db79c9cbf61a1 Mon Sep 17 00:00:00 2001 From: Joyce Yan <5653616+joyceyan@users.noreply.github.com> Date: Mon, 13 Nov 2023 12:47:53 -0500 Subject: [PATCH 4/8] wip --- .../views/WheresMyGeneV2/components/GeneSearchBar/style.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/style.ts b/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/style.ts index 36e2ca2acb33d..bd1e298f31aeb 100644 --- a/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/style.ts +++ b/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` From fd1aca0b505d50bd3e91cbc12a214abf3a8da880 Mon Sep 17 00:00:00 2001 From: Joyce Yan <5653616+joyceyan@users.noreply.github.com> Date: Mon, 13 Nov 2023 14:27:32 -0500 Subject: [PATCH 5/8] fix things --- .../components/Filters/components/ColorScale/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/views/WheresMyGeneV2/components/Filters/components/ColorScale/index.tsx b/frontend/src/views/WheresMyGeneV2/components/Filters/components/ColorScale/index.tsx index 66d95e5f3154c..093d6aad4b80c 100644 --- a/frontend/src/views/WheresMyGeneV2/components/Filters/components/ColorScale/index.tsx +++ b/frontend/src/views/WheresMyGeneV2/components/Filters/components/ColorScale/index.tsx @@ -1,7 +1,7 @@ import { Tooltip } from "@czi-sds/components"; import questionMarkIcon from "src/common/images/question-mark-icon.svg"; import { StyledDropdown, Wrapper } from "../common/style"; -import { FilterLabel } from "../common/style"; +import { Label } from "src/views/WheresMyGeneV2/components/InfoPanel/common/style"; import { LabelWrapper } from "./style"; import { StyledIconImage, @@ -19,7 +19,7 @@ export default function ColorScale({ setIsScaled }: Props): JSX.Element { return ( - Color Scale + Date: Mon, 13 Nov 2023 15:03:43 -0500 Subject: [PATCH 6/8] fix things yay --- .../views/WheresMyGeneV2/common/constants.ts | 2 +- .../components/GeneSearchBar/style.ts | 2 +- .../HeatMap/components/XAxisChart/style.ts | 25 ++++---------- .../components/HeatMap/index.tsx | 2 +- .../components/HeatMap/style.ts | 33 ++++++++++++------- .../components/HeatMap/utils.ts | 8 +++-- 6 files changed, 38 insertions(+), 34 deletions(-) diff --git a/frontend/src/views/WheresMyGeneV2/common/constants.ts b/frontend/src/views/WheresMyGeneV2/common/constants.ts index 20d6d468e798c..acd9aabdba689 100644 --- a/frontend/src/views/WheresMyGeneV2/common/constants.ts +++ b/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 = diff --git a/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/style.ts b/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/style.ts index bd1e298f31aeb..87b7e56663c98 100644 --- a/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/style.ts +++ b/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/style.ts @@ -1,6 +1,6 @@ import styled from "@emotion/styled"; import { fontBodyXxs } from "@czi-sds/components"; -import { gray500, spacesM } from "src/common/theme"; +import { gray500 } from "src/common/theme"; import { Button } from "@czi-sds/components"; import { HEADER_HEIGHT_PX } from "src/components/LandingHeader/style"; import { diff --git a/frontend/src/views/WheresMyGeneV2/components/HeatMap/components/XAxisChart/style.ts b/frontend/src/views/WheresMyGeneV2/components/HeatMap/components/XAxisChart/style.ts index 2aaff633222d0..8ce42c024fcd3 100644 --- a/frontend/src/views/WheresMyGeneV2/components/HeatMap/components/XAxisChart/style.ts +++ b/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 { spacesM, 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 spacesM?.(props) || 0; -} - export const XAxisContainer = styled.div` ${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 { diff --git a/frontend/src/views/WheresMyGeneV2/components/HeatMap/index.tsx b/frontend/src/views/WheresMyGeneV2/components/HeatMap/index.tsx index f2725fab042c1..34a8274df0b80 100644 --- a/frontend/src/views/WheresMyGeneV2/components/HeatMap/index.tsx +++ b/frontend/src/views/WheresMyGeneV2/components/HeatMap/index.tsx @@ -105,7 +105,7 @@ export default memo(function HeatMap(props: Props): JSX.Element { sidebarWidth={sidebarWidth} /> - + {allTissueCellTypes.map( ({ tissueId, tissueName, tissueCellTypes }) => { return ( diff --git a/frontend/src/views/WheresMyGeneV2/components/HeatMap/style.ts b/frontend/src/views/WheresMyGeneV2/components/HeatMap/style.ts index ed4e5cfcdfd9e..798334cdc4d5c 100644 --- a/frontend/src/views/WheresMyGeneV2/components/HeatMap/style.ts +++ b/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, spacesXs } from "src/common/theme"; import { HEADER_HEIGHT_PX } from "src/components/Header/style"; import { CONTENT_WRAPPER_LEFT_RIGHT_PADDING_PX, @@ -11,13 +11,23 @@ import { X_AXIS_CHART_HEIGHT_PX } from "src/views/WheresMyGeneV2/common/constant import { CELL_TYPE_FILTER_WIDTH_PX, DIVIDER_LEFT_POSITION_PX, - DIVIDER_TOP_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; + export const SELECTED_STYLE = { backgroundColor: LIGHT_GRAY.D, fontWeight: "bold" as never, @@ -71,7 +81,7 @@ export const Divider = styled.div` position: absolute; left: ${DIVIDER_LEFT_POSITION_PX}px; width: 1px; - top: 0px; + top: 0; border-right: solid 0.5px ${gray300}; z-index: ${ZIndex.Divider}; `; @@ -86,7 +96,7 @@ export const XAxisWrapper = styled.div` z-index: ${ZIndex.XAxisWrapper}; `; -interface TopLeftCornerMaskProps { +interface TopLeftCornerMaskProps extends CommonThemeProps { height: number; } @@ -97,7 +107,8 @@ export const TopLeftCornerMask = styled.div` top: 0px; left: 0px; width: ${Y_AXIS_CHART_WIDTH_PX}px; - height: ${(props) => props.height || X_AXIS_CHART_HEIGHT_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; @@ -105,15 +116,15 @@ export const TopLeftCornerMask = styled.div` align-items: end; `; -interface ChartWrapperProps { +interface ChartWrapperProps extends CommonThemeProps { top: number; } export const ChartWrapper = styled.div` 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; `; @@ -131,7 +142,7 @@ export const XAxisMask = styled.div` height: ${(props) => props.height}px; `; -interface YAxisWrapperProps { +interface YAxisWrapperProps extends CommonThemeProps { top: number; } @@ -141,7 +152,7 @@ export const YAxisWrapper = styled.div` 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; `; diff --git a/frontend/src/views/WheresMyGeneV2/components/HeatMap/utils.ts b/frontend/src/views/WheresMyGeneV2/components/HeatMap/utils.ts index 2cef0b7ba092c..50b3975d8ee54 100644 --- a/frontend/src/views/WheresMyGeneV2/components/HeatMap/utils.ts +++ b/frontend/src/views/WheresMyGeneV2/components/HeatMap/utils.ts @@ -19,11 +19,14 @@ 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 * 3 + + 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 @@ -136,6 +139,7 @@ export function getFixedWidth( export const HEAT_MAP_BASE_HEIGHT_PX = 300; 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. @@ -152,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; } /** From 091df3e5c7aa427476cc09f862d338466f5868ef Mon Sep 17 00:00:00 2001 From: Joyce Yan <5653616+joyceyan@users.noreply.github.com> Date: Mon, 13 Nov 2023 15:14:37 -0500 Subject: [PATCH 7/8] rm unused import --- frontend/src/views/WheresMyGeneV2/components/HeatMap/style.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/views/WheresMyGeneV2/components/HeatMap/style.ts b/frontend/src/views/WheresMyGeneV2/components/HeatMap/style.ts index 798334cdc4d5c..b141d5426ac04 100644 --- a/frontend/src/views/WheresMyGeneV2/components/HeatMap/style.ts +++ b/frontend/src/views/WheresMyGeneV2/components/HeatMap/style.ts @@ -1,7 +1,7 @@ import styled from "@emotion/styled"; import { CommonThemeProps, TagFilter } from "@czi-sds/components"; -import { gray300, spacesM, spacesS, spacesXs } 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, From 40204012f494a381bbf1f6ca1e9fe04570f2db4e Mon Sep 17 00:00:00 2001 From: Joyce Yan <5653616+joyceyan@users.noreply.github.com> Date: Mon, 13 Nov 2023 16:04:37 -0500 Subject: [PATCH 8/8] update offset --- frontend/src/views/WheresMyGeneV2/components/HeatMap/style.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/views/WheresMyGeneV2/components/HeatMap/style.ts b/frontend/src/views/WheresMyGeneV2/components/HeatMap/style.ts index b141d5426ac04..27682b5336c4a 100644 --- a/frontend/src/views/WheresMyGeneV2/components/HeatMap/style.ts +++ b/frontend/src/views/WheresMyGeneV2/components/HeatMap/style.ts @@ -27,6 +27,7 @@ export function xAxisOffset(props: CommonThemeProps) { } const PADDING_UNDER_HEADERS_PX = 5; +const TOP_LEFT_CORNER_OFFSET_PX = 6; export const SELECTED_STYLE = { backgroundColor: LIGHT_GRAY.D, @@ -106,7 +107,7 @@ export const TopLeftCornerMask = styled.div` z-index: ${ZIndex.TopLeftCornerMask}; top: 0px; left: 0px; - width: ${Y_AXIS_CHART_WIDTH_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;