fix: No duplicate cell types tracks (#1225)

Author: rainandbare

client/src/components/BottomPanel/BottomPanel.tsx

@@ -16,6 +16,7 @@ import {
   BottomPanelHeaderActions,
   InfoIcon,
   ChromosomeMapWrapper,
+  TooltipContent,
 } from "./style";
 
 const MAX_CELL_TYPES = 2;
@@ -59,9 +60,17 @@ const BottomSideBar = ({
     >
       <BottomPanelHeader isMinimized={bottomPanelMinimized}>
         <BottomPanelHeaderTitle>
-          Chromatin Accessibility
+          Chromatin Accessibility {!bottomPanelMinimized && `(scATAC-seq)`}
           <Tooltip
-            content="Put some text here to explain the feature."
+            content={
+              <TooltipContent>
+                Coverage tracks show normalized chromatin accessibility for each
+                cell type. scATAC-seq signals were aggregated across cells
+                within each type in 100bp genomic bins, divided by the cell
+                type`&apos;`s total fragment count, and multiplied by 10^6 for
+                visualization.
+              </TooltipContent>
+            }
             position="bottom"
           >
             <InfoIcon sdsIcon="InfoCircle" sdsSize="xs" sdsType="interactive" />

client/src/components/BottomPanel/components/CoveragePlot/components/CellTypeDropdown/CellTypeDropdown.tsx

@@ -1,11 +1,20 @@
 import React, { useMemo, useState, useRef } from "react";
 import { useCellTypesQuery } from "common/queries/cellType";
-import { DefaultAutocompleteOption, DropdownMenu } from "@czi-sds/components";
+import {
+  DefaultAutocompleteOption,
+  DropdownMenu,
+  MenuItem,
+} from "@czi-sds/components";
 import { AutocompleteValue } from "@mui/material";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "reducers";
 import { CellTypeInputDropdown } from "./style";
 
 export function CellTypeDropdown({ cellType }: { cellType: string }) {
+  const { selectedCellTypes } = useSelector((state: RootState) => ({
+    selectedCellTypes: state.controls.chromatinSelectedCellTypes,
+  }));
+
   const cellTypesQuery = useCellTypesQuery();
   const cellTypes = useMemo(
     () => cellTypesQuery.data ?? [],
@@ -19,10 +28,25 @@ export function CellTypeDropdown({ cellType }: { cellType: string }) {
   type Multiple = false;
   type DisableClearable = false;
   type FreeSolo = false;
+  const otherSelectedCellTypes = useMemo(
+    () => new Set(selectedCellTypes.filter((type) => type !== cellType)),
+    [cellType, selectedCellTypes]
+  );
 
   const cellTypeOptions = useMemo(
-    () => cellTypes.map<Option>((name) => ({ name })),
-    [cellTypes]
+    () =>
+      cellTypes.map<Option>((name) => ({
+        name,
+        component: (
+          <MenuItem
+            selected={cellType === name}
+            disabled={otherSelectedCellTypes.has(name)}
+          >
+            {name}
+          </MenuItem>
+        ),
+      })),
+    [cellType, cellTypes, otherSelectedCellTypes]
   );
 
   const activeOption = useMemo(
@@ -67,6 +91,14 @@ export function CellTypeDropdown({ cellType }: { cellType: string }) {
           setOpen(false);
           anchorElRef.current = null;
 
+          if (
+            !value ||
+            value.name === cellType ||
+            otherSelectedCellTypes.has(value.name)
+          ) {
+            return;
+          }
+
           if (value) {
             dispatch({
               type: "toggle chromatin cell types",

client/src/components/BottomPanel/style.ts

@@ -84,3 +84,7 @@ export const ChromosomeMapWrapper = styled.div`
   min-height: 218px;
   transition: "min-height 0.5s ease-in";
 `;
+
+export const TooltipContent = styled.div`
+  max-width: 425px;
+`;