Nickakhmetov/Bugfixes

package.json

@@ -1,7 +1,7 @@
 {
   "name": "cellpop",
   "private": false,
-  "version": "0.0.7",
+  "version": "0.0.8",
   "license": "MIT",
   "author": "Thomas Smits",
   "description": "A React component for visualizing cell populations in two-dimensional array data.",

src/contexts/ColorScaleContext.tsx

@@ -36,7 +36,6 @@ export function ColorScaleProvider({ children }: PropsWithChildren) {
 
     const range = colorThresholds.map((_, idx) => idx / 255);
 
-    console.log({ range });
     const scale = scaleLinear<string>({
       range: range.map((t) => theme(t)),
       domain: range.map((r) => r * maxCount),

src/visx-visualization/Controls.tsx

@@ -158,7 +158,7 @@ function NormalizationControl() {
 
   return (
     <FormControl sx={{ maxWidth: 300 }}>
-      <InputLabel id={id}>Heatmap Normalization</InputLabel>
+      <InputLabel id={id} sx={(theme) => ({background: theme.palette.background.default})}>Heatmap&nbsp;Normalization</InputLabel>
       <Select
         labelId={id}
         id={`${id}-select`}

src/visx-visualization/heatmap/HeatmapYAxis.tsx

@@ -72,17 +72,18 @@ export default function HeatmapYAxis() {
         left={tickLabelSize * LEFT_MULTIPLIER}
         stroke={theme.palette.text.primary}
         tickStroke={theme.palette.text.primary}
-        tickComponent={
-          selectedValues.size > 0
-            ? (props) =>
-                ExpandedRowTick({
-                  ...props,
-                  axisConfig,
-                  openInNewTab,
-                  tickTitle,
-                  tickLabelStyle,
-                })
-            : undefined
+        tickComponent={(tickLabelProps: TickRendererProps) =>
+          selectedValues.has(tickLabelProps?.formattedValue as string) ? (
+            <ExpandedRowTick {...tickLabelProps} />
+          ) : (
+            <Text
+              {...tickLabelProps}
+              // @ts-expect-error Visx types are slightly incorrect
+              x={(tickLabelProps?.to?.x ?? 0) - tickLabelProps.fontSize}
+            >
+              {tickLabelProps?.formattedValue}
+            </Text>
+          )
         }
         tickLabelProps={(t) =>
           ({
@@ -129,18 +130,16 @@ function ExpandedRowTick({
   x,
   y,
   formattedValue: row,
-  axisConfig,
-  openInNewTab,
-  tickTitle,
-  tickLabelStyle,
   ...tickLabelProps
-}: TickRendererProps & {
-  axisConfig: AxisConfig;
-} & ReturnType<typeof useHeatmapAxis>) {
+}: TickRendererProps) {
   const { expandedSize } = useYScale();
   const selectedValues = useSelectedValues((s) => s.selectedValues);
-  const { flipAxisPosition } = axisConfig;
   const rowMaxes = useRowMaxes();
+  const axisConfig = useRowConfig();
+  const { flipAxisPosition } = axisConfig;
+
+  const { openInNewTab, tickTitle, tickLabelStyle } =
+    useHeatmapAxis(axisConfig);
 
   const panelSize = usePanelDimensions(
     flipAxisPosition ? "left_middle" : "right_middle",

src/visx-visualization/plot-controls.tsx/DisplayControls.tsx

@@ -292,11 +292,16 @@ const useToggleVisibility = () => {
   const rowLabel = useRowConfig((s) => s.label);
   const label = section === "Column" ? columnLabel : rowLabel;
   const trackEvent = useTrackEvent();
+  const selectedValues = useSelectedValues((s) => s.selectedValues);
+  const deselectValue = useSelectedValues((s) => s.deselectValue);
   const handleChange = useEventCallback((e: ChangeEvent<HTMLInputElement>) => {
     if (e.target.checked) {
       showItem(e.target.name);
       trackEvent(`Show ${label}`, e.target.name);
     } else {
+      if (section === "Row" && selectedValues.has(e.target.name)) {
+        deselectValue(e.target.name);
+      }
       hideItem(e.target.name);
       trackEvent(`Hide ${label}`, e.target.name);
     }
@@ -309,13 +314,20 @@ const useToggleExpansion = () => {
     toggleItem: s.toggleValue,
     selectedValues: s.selectedValues,
   }));
+  const showItem = useData((s) => s.restoreRow);
+  const removedRows = useData((s) => s.removedRows);
   const trackEvent = useTrackEvent();
   const rowLabel = useRowConfig((s) => s.label);
   const handleChange = useEventCallback((e: ChangeEvent<HTMLInputElement>) => {
-    if (selectedValues.has(e.target.name)) {
-      trackEvent(`Collapse ${rowLabel}`, e.target.name);
+    const row = e.target.name;
+    if (selectedValues.has(row)) {
+      trackEvent(`Collapse ${rowLabel}`, row);
     } else {
-      trackEvent(`Expand ${rowLabel}`, e.target.name);
+      const rowIsHidden = removedRows.has(row);
+      if (rowIsHidden) {
+        showItem(e.target.name);
+      }
+      trackEvent(`Expand ${rowLabel}`, row);
     }
     toggleItem(e.target.name);
   });