feat(wmg): updates to data source action (#6210)

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

Hide file tree

Showing 34 changed files with 661 additions and 508 deletions.
diff --git a/frontend/src/common/analytics/events.ts b/frontend/src/common/analytics/events.ts
@@ -43,6 +43,7 @@ export enum EVENTS {
   WMG_FMG_QUESTION_BUTTON_HOVER = "WMG_FMG_QUESTION_BUTTON_HOVER",
   WMG_FMG_DOCUMENTATION_CLICKED = "WMG_FMG_DOCUMENTATION_CLICKED",
   WMG_OPEN_IN_CG_CLICKED = "WMG_OPEN_IN_CG_CLICKED",
+  WMG_LEGEND_QUESTION_BUTTON_HOVER = "WMG_LEGEND_QUESTION_BUTTON_HOVER",
   WMG_TISSUE_EXPAND = "WMG_TISSUE_EXPAND",
   BROWSE_COLLECTIONS_CLICKED = "BROWSE_COLLECTIONS_CLICKED",
   DATASET_EXPLORE_CLICKED = "DATASET_EXPLORE_CLICKED",

diff --git a/frontend/src/views/WheresMyGeneV2/common/constants.ts b/frontend/src/views/WheresMyGeneV2/common/constants.ts
@@ -45,3 +45,5 @@ export const SORT_CELL_TYPES_TOOLTIP_TEXT =
   "Sort cell types by Cell Ontology or Hierarchical ordering. Cell ontology ordering groups cell types together based on their ontological relationships. Hierarchical ordering groups cell types with similar expression patterns together based on the genes selected.";
 export const SORT_GENES_TOOLTIP_TEXT =
   "Sort genes As Entered or using Hierarchical ordering. Genes are displayed in the order they are added to the dot plot using As Entered ordering. Hierarchical ordering groups genes with similar expression patterns together.";
+
+export const HOVER_START_TIME_MS = 2 * 1000;
diff --git a/frontend/src/views/WheresMyGeneV2/common/styles.ts b/frontend/src/views/WheresMyGeneV2/common/styles.ts
@@ -0,0 +1,52 @@
+import { fontHeaderS } from "@czi-sds/components";
+import styled from "@emotion/styled";
+import { gray100, gray300, gray500 } from "src/common/theme";
+
+interface CellProps {
+  align?: boolean;
+}
+
+export const DivTable = styled.div`
+  display: table;
+  width: 100%;
+  max-width: 600px;
+  border-collapse: collapse;
+`;
+
+export const DivTableRow = styled.div`
+  display: table-row;
+  line-height: 24px;
+  &:nth-of-type(even) {
+    background-color: ${gray100};
+  }
+`;
+
+export const DivTableCell = styled.div<CellProps>`
+  display: table-cell;
+  padding: 4px, 0px, 4px, 0px;
+  text-align: ${(props) => (props.align ? "right" : "left")};
+  @media (max-width: 600px) {
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+
+    &:not(:last-child) {
+      margin-bottom: 0.625rem;
+    }
+  }
+`;
+
+export const DivTableHead = styled.div`
+  display: table-row;
+  ${fontHeaderS}
+  font-weight: 500;
+  color: ${gray500};
+`;
+
+export const DivTableLegend = styled.div`
+  display: table-row;
+  font-weight: bold;
+  font-size: 1.2em;
+  color: ${gray500};
+  border-bottom: 1px solid ${gray300};
+`;
diff --git a/frontend/src/views/WheresMyGeneV2/components/CellInfoSideBar/connect.ts b/frontend/src/views/WheresMyGeneV2/components/CellInfoSideBar/connect.ts
@@ -5,6 +5,7 @@ import { useMarkerGenes } from "src/common/queries/wheresMyGene";
 import { DispatchContext, State } from "../../common/store";
 import { addSelectedGenes } from "../../common/store/actions";
 import { MARKER_GENE_LABEL, MARKER_SCORE_LABEL } from "./constants";
+import { HOVER_START_TIME_MS } from "../../common/constants";
 
 export const useConnect = ({
   cellInfoCellType,
@@ -42,7 +43,7 @@ export const useConnect = ({
 
   const useHandleHoverEnd = (event: EVENTS, payload = {}) => {
     return useCallback(() => {
-      if (Date.now() - hoverStartTime > 2 * 1000) {
+      if (Date.now() - hoverStartTime > HOVER_START_TIME_MS) {
         track(event, payload);
       }
     }, [event, payload]);

diff --git a/frontend/src/views/WheresMyGeneV2/components/CellInfoSideBar/index.tsx b/frontend/src/views/WheresMyGeneV2/components/CellInfoSideBar/index.tsx
@@ -18,12 +18,7 @@ import {
   TooltipContent,
   TissueName,
   TooltipButton,
-  DivTable,
-  DivTableRow,
-  DivTableCell,
-  DivTableHead,
   ButtonWrapper,
-  DivTableLegend,
   TooltipLink,
 } from "./style";
 import { Link } from "src/components/GeneInfoSideBar/style";
@@ -46,6 +41,13 @@ import {
   TABLE_HEADER_SCORE,
 } from "./constants";
 import { useConnect } from "./connect";
+import {
+  DivTable,
+  DivTableCell,
+  DivTableHead,
+  DivTableLegend,
+  DivTableRow,
+} from "../../common/styles";
 
 function CellInfoSideBar({
   cellInfoCellType,

diff --git a/frontend/src/views/WheresMyGeneV2/components/CellInfoSideBar/style.ts b/frontend/src/views/WheresMyGeneV2/components/CellInfoSideBar/style.ts
@@ -2,19 +2,10 @@ import styled from "@emotion/styled";
 import { Button, fontBodyS } from "@czi-sds/components";
 import Image from "next/image";
 import { fontBodyXxs, getColors } from "@czi-sds/components";
-import {
-  fontWeightSemibold,
-  gray500,
-  gray300,
-  gray100,
-} from "src/common/theme";
+import { fontWeightSemibold, gray500 } from "src/common/theme";
 
 export const CELL_INFO_SIDEBAR_WIDTH_PX = 400;
 
-interface CellProps {
-  align?: boolean;
-}
-
 export const ButtonContainer = styled.div`
   display: flex;
   flex-direction: row;
@@ -130,47 +121,3 @@ export const NoMarkerGenesDescription = styled("span")`
     `;
   }}
 `;
-
-export const DivTable = styled.div`
-  display: table;
-  width: 100%;
-  max-width: 600px;
-  border-collapse: collapse;
-`;
-
-export const DivTableRow = styled.div`
-  display: table-row;
-  line-height: 24px;
-  &:nth-of-type(even) {
-    background-color: ${gray100};
-  }
-`;
-
-export const DivTableCell = styled.div<CellProps>`
-  display: table-cell;
-  padding: 4px, 0px, 4px, 0px;
-  text-align: ${(props) => (props.align ? "right" : "left")};
-  @media (max-width: 600px) {
-    display: block;
-    width: 100%;
-    box-sizing: border-box;
-
-    &:not(:last-child) {
-      margin-bottom: 0.625rem;
-    }
-  }
-`;
-
-export const DivTableHead = styled.div`
-  display: table-row;
-  font-weight: 500;
-  color: ${gray500};
-`;
-
-export const DivTableLegend = styled.div`
-  display: table-row;
-  font-weight: bold;
-  font-size: 1.2em;
-  color: ${gray500};
-  border-bottom: 1px solid ${gray300};
-`;
diff --git a/frontend/src/views/WheresMyGeneV2/components/Filters/connect.ts b/frontend/src/views/WheresMyGeneV2/components/Filters/connect.ts
@@ -287,6 +287,5 @@ export const useConnect = ({
     DropdownMenuProps,
     isHeatmapShown,
     InputDropdownProps,
-    datasets,
   };
 };
diff --git a/frontend/src/views/WheresMyGeneV2/components/Filters/index.tsx b/frontend/src/views/WheresMyGeneV2/components/Filters/index.tsx
@@ -28,7 +28,6 @@ export default memo(function Filters({
     DropdownMenuProps,
     isHeatmapShown,
     InputDropdownProps,
-    datasets,
     selected,
     handle,
     terms,
@@ -40,20 +39,6 @@ export default memo(function Filters({
   return (
     <Wrapper>
       <FilterContainer>
-        <StyledComplexFilter
-          multiple
-          data-testid="dataset-filter"
-          search
-          label="Dataset"
-          options={datasets as unknown as DefaultMenuSelectOption[]}
-          onChange={handle.datasetsChange}
-          value={selected.datasets as unknown as DefaultMenuSelectOption[]}
-          InputDropdownComponent={
-            StyledComplexFilterInputDropdown as typeof ComplexFilterInputDropdown
-          }
-          DropdownMenuProps={DropdownMenuProps}
-          InputDropdownProps={InputDropdownProps}
-        />
         <StyledComplexFilter
           multiple
           data-testid="disease-filter"

diff --git a/...tend/src/views/WheresMyGeneV2/components/GeneSearchBar/components/CitationButton/style.ts b/...tend/src/views/WheresMyGeneV2/components/GeneSearchBar/components/CitationButton/style.ts
@@ -20,6 +20,7 @@ export const StyledLabel = styled.div`
 export const StyledButtonIcon = styled(ButtonIcon)`
   width: 30px;
   height: 30px;
+  top: 4px;
 `;
 
 export const StyledNotificationWrapper = styled(NotificationWrapper)`

diff --git a/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/components/ShareButton/style.ts b/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/components/ShareButton/style.ts
@@ -29,6 +29,7 @@ export const StyledLabel = styled.div`
 export const StyledButtonIcon = styled(ButtonIcon)`
   width: 30px;
   height: 30px;
+  top: 4px;
 `;
 
 export const StyledNotificationWrapper = styled(NotificationWrapper)`

diff --git a/...d/src/views/WheresMyGeneV2/components/GeneSearchBar/components/SourceDataButton/index.tsx b/...d/src/views/WheresMyGeneV2/components/GeneSearchBar/components/SourceDataButton/index.tsx
@@ -2,17 +2,30 @@ import { MouseEventHandler } from "react";
 import { track } from "src/common/analytics";
 import { EVENTS } from "src/common/analytics/events";
 import { EXCLUDE_IN_SCREENSHOT_CLASS_NAME } from "../SaveExport";
-import { StyledButtonDiv, StyledButtonIcon, StyledLabel } from "./style";
+import {
+  BadgeCounter,
+  StyledButtonDiv,
+  StyledButtonIcon,
+  StyledLabel,
+} from "./style";
 
 export default function SourceDataButton({
   handleRightSidebarButtonClick,
+  datasetsCount,
 }: {
   handleRightSidebarButtonClick: MouseEventHandler<HTMLButtonElement>;
+  datasetsCount: number;
 }): JSX.Element {
   return (
     <StyledButtonDiv className={EXCLUDE_IN_SCREENSHOT_CLASS_NAME}>
       <StyledLabel>Source Data</StyledLabel>
-
+      {datasetsCount > 0 && (
+        <BadgeCounter
+          badgeContent={datasetsCount}
+          width={datasetsCount > 99 ? "28px" : "20px"}
+          data-testid="source-data-badge"
+        />
+      )}
       <StyledButtonIcon
         data-testid={"source-data-button"}
         onClick={(event) => {

diff --git a/...nd/src/views/WheresMyGeneV2/components/GeneSearchBar/components/SourceDataButton/style.ts b/...nd/src/views/WheresMyGeneV2/components/GeneSearchBar/components/SourceDataButton/style.ts
@@ -1,5 +1,41 @@
 import styled from "@emotion/styled";
-import { ButtonIcon, fontBodyXxs, getColors } from "@czi-sds/components";
+import {
+  ButtonIcon,
+  fontBodyXxs,
+  fontBodyXxxs,
+  getColors,
+  CommonThemeProps,
+} from "@czi-sds/components";
+import { Badge } from "@mui/base";
+import { error400, fontWeightSemibold } from "src/common/theme";
+
+interface ButtonProps {
+  refrenceCountSmall?: boolean;
+}
+interface StyledBadgeProps extends CommonThemeProps {
+  width: string;
+}
+
+export const BadgeCounter = styled(Badge)<StyledBadgeProps>`
+  background-color: ${error400};
+  border-radius: 12px;
+  width: ${(props) => props.width};
+  height: 16px;
+  text-align: center;
+  position: relative;
+  z-index: 22;
+  top: 4px;
+  left: 14px;
+
+  .MuiBadge-badge {
+    position: relative;
+    top: -2px;
+    margin: 0px;
+    ${fontBodyXxxs}
+    font-weight: ${fontWeightSemibold};
+    color: white;
+  }
+`;
 
 export const StyledButtonDiv = styled.div`
   display: flex;
@@ -22,7 +58,11 @@ export const StyledLabel = styled.div`
   }}
 `;
 
-export const StyledButtonIcon = styled(ButtonIcon)`
+export const StyledButtonIcon = styled(ButtonIcon)<ButtonProps>`
   width: 30px;
   height: 30px;
+  position: absolute;
+  cursor: pointer;
+  top: 99px;
+  z-index: 1;
 `;
diff --git a/frontend/src/views/WheresMyGeneV2/components/InfoPanel/components/Legend/connect.ts b/frontend/src/views/WheresMyGeneV2/components/InfoPanel/components/Legend/connect.ts
@@ -0,0 +1,31 @@
+import { useCallback, useState } from "react";
+import { useFilterDimensions } from "src/common/queries/wheresMyGene";
+import { EVENTS } from "src/common/analytics/events";
+import { track } from "src/common/analytics";
+import { COLOR_LEGEND } from "../RelativeGeneExpression/constants";
+import { HOVER_START_TIME_MS } from "src/views/WheresMyGeneV2/common/constants";
+import { EMPTY_ARRAY } from "src/common/constants/utils";
+
+export const useConnect = () => {
+  const [hoverStartTime, setHoverStartTime] = useState(0);
+  const useHandleHoverEnd = (event: EVENTS, payload = {}) => {
+    return useCallback(() => {
+      if (Date.now() - hoverStartTime > HOVER_START_TIME_MS) {
+        track(event, payload);
+      }
+    }, [event, payload]);
+  };
+
+  const handleLegendHoverEnd = useHandleHoverEnd(
+    EVENTS.WMG_LEGEND_QUESTION_BUTTON_HOVER,
+    { label: COLOR_LEGEND }
+  );
+
+  const { data: filterDimensions } = useFilterDimensions();
+
+  const { datasets = EMPTY_ARRAY } = filterDimensions;
+
+  const datasetsCount = datasets.length;
+
+  return { datasetsCount, setHoverStartTime, handleLegendHoverEnd };
+};