Skip to content

Commit

Permalink
chore(wmg): add zebra striping to table (#6034)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kaloster
kaloster authored Oct 18, 2023
1 parent aa1985d commit 845d776
Show file tree
Hide file tree
Showing 6 changed files with 184 additions and 143 deletions.
2 changes: 1 addition & 1 deletion frontend/src/views/WheresMyGene/components/Filters/components/ColorScale/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import {
StyledIconImage,
TooltipButton,
StyledTooltip,
} from "../../../../../WheresMyGeneV2/components/CellInfoSideBar/style";
} from "src/views/WheresMyGeneV2/components/CellInfoSideBar/style";
import { COLOR_SCALE_TOOLTIP_TEXT } from "src/views/WheresMyGene/common/constants";

interface Props {
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/views/WheresMyGene/components/Filters/components/Compare/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
StyledIconImage,
StyledTooltip,
TooltipButton,
} from "../../../../../WheresMyGeneV2/components/CellInfoSideBar/style";
} from "src/views/WheresMyGeneV2/components/CellInfoSideBar/style";
import questionMarkIcon from "src/common/images/question-mark-icon.svg";
import { Props } from "./types";
import { useConnect } from "./connect";
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/views/WheresMyGene/components/Filters/components/Sort/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import {
StyledIconImage,
StyledTooltip,
TooltipButton,
} from "../../../../../WheresMyGeneV2/components/CellInfoSideBar/style";
} from "src/views/WheresMyGeneV2/components/CellInfoSideBar/style";
import questionMarkIcon from "src/common/images/question-mark-icon.svg";
import { ROUTES } from "src/common/constants/routes";
import {
Expand Down
238 changes: 117 additions & 121 deletions frontend/src/views/WheresMyGeneV2/components/CellInfoSideBar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,23 @@ import {
NoMarkerGenesContainer,
NoMarkerGenesDescription,
NoMarkerGenesHeader,
StyledHTMLTable,
StyledIconImage,
StyledMarkerGeneHeader,
StyledTooltip,
TooltipContent,
TissueName,
TooltipButton,
DivTable,
DivTableRow,
DivTableCell,
DivTableHead,
ButtonWrapper,
DivTableLegend,
TooltipLink,
} from "./style";
import { Link } from "../../../../components/GeneInfoSideBar/style";
import { Link } from "src/components/GeneInfoSideBar/style";
import questionMarkIcon from "src/common/images/question-mark-icon.svg";
import { StyledImage } from "../../../WheresMyGene/components/HeatMap/components/YAxisChart/style";
import { StyledImage } from "src/views/WheresMyGene/components/HeatMap/components/YAxisChart/style";
import InfoSVG from "src/common/images/info-sign-icon.svg";
import { InfoButtonWrapper } from "src/components/common/Filter/common/style";
import { CellInfoBarProps } from "./types";
Expand Down Expand Up @@ -80,7 +86,7 @@ function CellInfoSideBar({
{MARKER_SCORE_CELLGUIDE_LINK_TEXT}
</Link>
<ButtonContainer>
<>
<ButtonWrapper>
<StyledMarkerGeneHeader>{MARKER_GENE_LABEL}</StyledMarkerGeneHeader>
<Tooltip
sdsStyle="dark"
Expand All @@ -93,23 +99,21 @@ function CellInfoSideBar({
title={
<StyledTooltip>
<TooltipContent>{MARKER_GENES_TOOLTIP_CONTENT}</TooltipContent>
<>
<a
href={ROUTES.FMG_DOCS}
rel="noopener"
target="_blank"
onClick={() => {
track(EVENTS.WMG_FMG_QUESTION_BUTTON_HOVER, {
label: MARKER_GENE_LABEL,
});
track(EVENTS.WMG_FMG_DOCUMENTATION_CLICKED, {
label: MARKER_GENE_LABEL,
});
}}
>
{MARKER_SCORE_TOOLTIP_LINK_TEXT}
</a>
</>
<TooltipLink
href={ROUTES.FMG_DOCS}
rel="noopener"
target="_blank"
onClick={() => {
track(EVENTS.WMG_FMG_QUESTION_BUTTON_HOVER, {
label: MARKER_GENE_LABEL,
});
track(EVENTS.WMG_FMG_DOCUMENTATION_CLICKED, {
label: MARKER_GENE_LABEL,
});
}}
>
{MARKER_SCORE_TOOLTIP_LINK_TEXT}
</TooltipLink>
</StyledTooltip>
}
>
Expand All @@ -122,7 +126,7 @@ function CellInfoSideBar({
</TooltipButton>
</Tooltip>
<BetaChip label="Beta" size="small" />
</>
</ButtonWrapper>
<Button
data-testid="add-to-dotplot-fmg-button"
startIcon={<Icon sdsIcon="plus" sdsSize="s" sdsType="button" />}
Expand All @@ -149,109 +153,101 @@ function CellInfoSideBar({
</NoMarkerGenesContainer>
))
) : (
<StyledHTMLTable condensed bordered={false}>
<thead>
<tr>
<td>{TABLE_HEADER_GENE}</td>
<td>
{TABLE_HEADER_SCORE}
<Tooltip
sdsStyle="dark"
placement="bottom"
width="default"
className="fmg-tooltip-icon"
arrow
onOpen={() => setHoverStartTime(Date.now())}
onClose={handleMarkerScoreHoverEnd}
title={
<StyledTooltip>
<TooltipContent>
{MARKER_SCORE_TOOLTIP_CONTENT}
</TooltipContent>
<>
<a
href={ROUTES.FMG_DOCS}
rel="noopener"
target="_blank"
onClick={() => {
track(EVENTS.WMG_FMG_QUESTION_BUTTON_HOVER, {
label: MARKER_SCORE_LABEL,
});
track(EVENTS.WMG_FMG_DOCUMENTATION_CLICKED, {
label: MARKER_SCORE_LABEL,
});
}}
>
{MARKER_SCORE_TOOLTIP_LINK_TEXT}
</a>
</>
</StyledTooltip>
}
>
<TooltipButton
sdsStyle="minimal"
sdsType="secondary"
isAllCaps={false}
>
<StyledIconImage src={questionMarkIcon} />
</TooltipButton>
</Tooltip>
</td>
</tr>
<tr>
<td>
<CopyGenesButton
onClick={handleCopyGenes}
sdsType="primary"
<DivTable>
<DivTableHead>
<DivTableCell>{TABLE_HEADER_GENE}</DivTableCell>
<DivTableCell align>
{TABLE_HEADER_SCORE}
<Tooltip
sdsStyle="dark"
placement="bottom"
width="default"
className="fmg-tooltip-icon"
arrow
onOpen={() => setHoverStartTime(Date.now())}
onClose={handleMarkerScoreHoverEnd}
title={
<StyledTooltip>
<TooltipContent>
{MARKER_SCORE_TOOLTIP_CONTENT}
</TooltipContent>
<TooltipLink
href={ROUTES.FMG_DOCS}
rel="noopener"
target="_blank"
onClick={() => {
track(EVENTS.WMG_FMG_QUESTION_BUTTON_HOVER, {
label: MARKER_SCORE_LABEL,
});
track(EVENTS.WMG_FMG_DOCUMENTATION_CLICKED, {
label: MARKER_SCORE_LABEL,
});
}}
>
{MARKER_SCORE_TOOLTIP_LINK_TEXT}
</TooltipLink>
</StyledTooltip>
}
>
<TooltipButton
sdsStyle="minimal"
sdsType="secondary"
isAllCaps={false}
startIcon={
<Icon sdsIcon="copy" sdsSize="s" sdsType="button" />
}
>
Copy
</CopyGenesButton>
</td>
<td>
<MarkerStrengthContainer>
<MarkerStrengthLabel>{"Low: <1"}</MarkerStrengthLabel>
<MarkerStrengthLabel>{"Medium: 1-2"}</MarkerStrengthLabel>
<MarkerStrengthLabel>{"High: >2"}</MarkerStrengthLabel>
</MarkerStrengthContainer>
</td>
</tr>
</thead>
<tbody>
{Object.entries(data.marker_genes).map(([symbol, metadata]) => (
<tr key={symbol}>
<td>
{symbol}
<InfoButtonWrapper
data-testid="gene-info-button-cell-info"
onClick={() => {
generateGeneInfo(symbol);
<StyledIconImage src={questionMarkIcon} />
</TooltipButton>
</Tooltip>
</DivTableCell>
</DivTableHead>
<DivTableLegend>
<DivTableCell>
<CopyGenesButton
onClick={handleCopyGenes}
sdsType="primary"
sdsStyle="minimal"
isAllCaps={false}
startIcon={<Icon sdsIcon="copy" sdsSize="s" sdsType="button" />}
>
Copy
</CopyGenesButton>
</DivTableCell>
<DivTableCell align>
<MarkerStrengthContainer>
<MarkerStrengthLabel>{"Low: <1"}</MarkerStrengthLabel>
<MarkerStrengthLabel>{"Medium: 1-2"}</MarkerStrengthLabel>
<MarkerStrengthLabel>{"High: >2"}</MarkerStrengthLabel>
</MarkerStrengthContainer>
</DivTableCell>
</DivTableLegend>
{Object.entries(data.marker_genes).map(([symbol, metadata]) => (
<DivTableRow key={symbol}>
<DivTableCell>
{symbol}
<InfoButtonWrapper
data-testid="gene-info-button-cell-info"
onClick={() => {
generateGeneInfo(symbol);

track(EVENTS.WMG_FMG_GENE_INFO, {
gene: symbol,
});
}}
>
<StyledImage
id="gene-info-button-fmg"
src={InfoSVG.src}
width="10"
height="10"
alt={`display gene info for ${symbol}`}
/>
</InfoButtonWrapper>
</td>
<td data-testid="marker-scores-fmg">
{metadata.effect_size.toPrecision(4)}
</td>
</tr>
))}
</tbody>
</StyledHTMLTable>
track(EVENTS.WMG_FMG_GENE_INFO, {
gene: symbol,
});
}}
>
<StyledImage
id="gene-info-button-fmg"
src={InfoSVG.src}
width="10"
height="10"
alt={`display gene info for ${symbol}`}
/>
</InfoButtonWrapper>
</DivTableCell>
<DivTableCell data-testid="marker-scores-fmg" align>
{metadata.effect_size.toPrecision(4)}
</DivTableCell>
</DivTableRow>
))}
</DivTable>
)}
</>
);
Expand Down
Loading

0 comments on commit 845d776

Please sign in to comment.