Bubble plot improvements

Author: slinjhu

smoosense-gui/src/components/common/CategoricalColumnDropdown.tsx

@@ -17,6 +17,7 @@ interface CategoricalColumnDropdownProps {
   settingKey: keyof UIState
   label: string
   shouldInitialize?: boolean
+  postChange?: (newValue: string | null) => void
 }
 
 type UIState = {
@@ -35,10 +36,11 @@ const actionMap = {
   boxPlotBreakdownColumn: setBoxPlotBreakdownColumn,
 } as const
 
-export default function CategoricalColumnDropdown({ 
-  settingKey, 
+export default function CategoricalColumnDropdown({
+  settingKey,
   label,
-  shouldInitialize = false
+  shouldInitialize = false,
+  postChange
 }: CategoricalColumnDropdownProps) {
   const dispatch = useAppDispatch()
   const { isCategoricalColumns } = useIsCategoricalBulk()
@@ -57,7 +59,9 @@ export default function CategoricalColumnDropdown({
     const action = actionMap[settingKey]
     if (action) {
       // Convert "-" back to null
-      dispatch(action(value === "-" ? null : value))
+      const newValue = value === "-" ? null : value
+      dispatch(action(newValue))
+      postChange?.(newValue)
     }
   }
 

smoosense-gui/src/components/common/NumericalColumnDropdown.tsx

@@ -27,6 +27,7 @@ interface NumericalColumnDropdownProps {
   shouldInitialize?: boolean
   showStats?: boolean
   extraOptions?: ExtraOption[]
+  postChange?: (newValue: string) => void
 }
 
 type UIState = {
@@ -48,7 +49,8 @@ export default function NumericalColumnDropdown({
   label,
   shouldInitialize = true,
   showStats = false,
-  extraOptions = []
+  extraOptions = [],
+  postChange
 }: NumericalColumnDropdownProps) {
   const dispatch = useAppDispatch()
   const { isCategoricalColumns } = useIsCategoricalBulk()
@@ -71,27 +73,25 @@ export default function NumericalColumnDropdown({
     const action = actionMap[settingKey]
     if (action) {
       // Convert "-" back to empty string
-      dispatch(action(value === "-" ? "" : value))
+      const newValue = value === "-" ? "" : value
+      dispatch(action(newValue))
+      postChange?.(newValue)
     }
   }
 
-  // Auto-initialize:
-  // - If shouldInitialize is true, initialize to first available column
-  // - If extraOptions is provided, initialize to first extraOption
+  // Auto-initialize only if shouldInitialize is true
+  // Only runs once when columns become available and currentValue is empty
   useEffect(() => {
-    if (!currentValue) {
+    if (!shouldInitialize) return
+    if (!currentValue && availableColumns.length > 0) {
       const action = actionMap[settingKey]
       if (action) {
-        if (shouldInitialize && availableColumns.length > 0) {
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          dispatch((action as any)(availableColumns[0]))
-        } else if (extraOptions.length > 0) {
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          dispatch((action as any)(extraOptions[0].value))
-        }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        dispatch((action as any)(availableColumns[0]))
       }
     }
-  }, [shouldInitialize, availableColumns, currentValue, settingKey, dispatch, extraOptions])
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [shouldInitialize, availableColumns.length > 0])
 
   const getPlaceholderText = () => {
     if (!isCategoricalColumns || !renderTypes) {

smoosense-gui/src/components/settings/ColorScaleDropdown.tsx

@@ -15,6 +15,7 @@ const COLOR_SCALES: Record<string, string> = {
   'Hot': 'linear-gradient(to right, #000000, #e60000, #ffd200, #ffffff)',
   'Reds': 'linear-gradient(to right, #fff5f0, #fee0d2, #fcbba1, #fc9272, #fb6a4a, #ef3b2c, #cb181d, #a50f15, #67000d)',
   'Picnic': 'linear-gradient(to right, #0000ff, #3399ff, #66ccff, #99ccff, #ccccff, #ffffff, #ffcccc, #ff9999, #ff6666, #ff3333, #ff0000)',
+  'Rainbow': 'linear-gradient(to right, #96005a, #0000c8, #0019ff, #0098ff, #2cff96, #97ff00, #ffea00, #ff6f00, #ff0000)',
 }
 
 function ColorScaleBar({ scale }: { scale: string }) {

smoosense-gui/src/lib/features/bubblePlot/BubblePlotMoreControls.tsx

@@ -6,8 +6,11 @@ import IconPopover from '@/components/common/IconPopover'
 import CategoricalColumnDropdown from '@/components/common/CategoricalColumnDropdown'
 import NumericalColumnDropdown from '@/components/common/NumericalColumnDropdown'
 import ColorScaleDropdown from '@/components/settings/ColorScaleDropdown'
+import UISettingToggle from '@/components/ui/UISettingToggle'
 import { useAppSelector, useAppDispatch } from '@/lib/hooks'
-import { setBubblePlotMaxMarkerSize, setBubblePlotMinMarkerSize, setBubblePlotOpacity, setBubblePlotMarkerSizeContrastRatio } from '@/lib/features/ui/uiSlice'
+import { setBubblePlotMaxMarkerSize, setBubblePlotMinMarkerSize, setBubblePlotOpacity, setBubblePlotMarkerSizeContrastRatio, setBubblePlotBreakdownColumn, setBubblePlotColorColumn } from '@/lib/features/ui/uiSlice'
+import { useCallback } from 'react'
+import { toast } from 'sonner'
 
 // Special value for coloring by bubble size (count)
 export const BUBBLE_SIZE_COLOR_VALUE = '__bubble_size__'
@@ -22,23 +25,46 @@ function BubblePlotMoreControlsContent() {
   const bubblePlotMinMarkerSize = useAppSelector((state) => state.ui.bubblePlotMinMarkerSize)
   const bubblePlotOpacity = useAppSelector((state) => state.ui.bubblePlotOpacity)
   const bubblePlotMarkerSizeContrastRatio = useAppSelector((state) => state.ui.bubblePlotMarkerSizeContrastRatio)
+  const currentColorColumn = useAppSelector((state) => state.ui.bubblePlotColorColumn)
+  const currentBreakdownColumn = useAppSelector((state) => state.ui.bubblePlotBreakdownColumn)
+
+  // When breakdown is set to non-null, clear color by (if it was set)
+  const handleBreakdownChange = useCallback((newValue: string | null) => {
+    if (newValue !== null && currentColorColumn !== '') {
+      dispatch(setBubblePlotColorColumn(''))
+      toast.info('"Color by" cleared because "breakdown" was set')
+    }
+  }, [dispatch, currentColorColumn])
+
+  // When color by is set to non-null, clear breakdown (if it was set)
+  const handleColorByChange = useCallback((newValue: string) => {
+    if (newValue !== '' && currentBreakdownColumn !== null) {
+      dispatch(setBubblePlotBreakdownColumn(null))
+      toast.info('"Breakdown" cleared because "color by" was set')
+    }
+  }, [dispatch, currentBreakdownColumn])
 
   return (
     <div className="space-y-4 w-full max-w-sm">
       <CategoricalColumnDropdown
         settingKey="bubblePlotBreakdownColumn"
         label="Breakdown"
+        postChange={handleBreakdownChange}
       />
 
       <NumericalColumnDropdown
         settingKey="bubblePlotColorColumn"
         label="Color by"
         shouldInitialize={false}
         extraOptions={BUBBLE_SIZE_EXTRA_OPTIONS}
+        postChange={handleColorByChange}
       />
 
       <ColorScaleDropdown />
 
+      <UISettingToggle settingKey="bubblePlotLogScaleX" label="Use log-scale for X-axis" />
+      <UISettingToggle settingKey="bubblePlotLogScaleY" label="Use log-scale for Y-axis"/>
+
       <div>
         <label className="text-sm font-medium mb-2 block">
           Min Marker Size: {bubblePlotMinMarkerSize}

smoosense-gui/src/lib/features/bubblePlot/PlotlyBubblePlot.tsx

@@ -40,6 +40,8 @@ const PlotlyBubblePlot = React.memo(function PlotlyBubblePlot({ data }: PlotlyBu
   const markerSizeContrastRatio = useAppSelector((state) => state.ui.bubblePlotMarkerSizeContrastRatio)
   const colorColumn = useAppSelector((state) => state.ui.bubblePlotColorColumn)
   const colorScale = useAppSelector((state) => state.ui.bubblePlotColorScale)
+  const logScaleX = useAppSelector((state) => state.ui.bubblePlotLogScaleX)
+  const logScaleY = useAppSelector((state) => state.ui.bubblePlotLogScaleY)
 
   // Get theme colors for marker styling
   const colors = usePlotlyColors()
@@ -128,8 +130,16 @@ const PlotlyBubblePlot = React.memo(function PlotlyBubblePlot({ data }: PlotlyBu
   const layout = useMemo((): Partial<Layout> => ({
     ...baseLayout,
     selectdirection: 'any',
-    dragmode: 'lasso'
-  }), [baseLayout])
+    dragmode: 'lasso',
+    xaxis: {
+      ...baseLayout.xaxis,
+      type: logScaleX ? 'log' : 'linear'
+    },
+    yaxis: {
+      ...baseLayout.yaxis,
+      type: logScaleY ? 'log' : 'linear'
+    }
+  }), [baseLayout, logScaleX, logScaleY])
 
   const baseConfig = usePlotlyConfig()
 
@@ -226,7 +236,7 @@ const PlotlyBubblePlot = React.memo(function PlotlyBubblePlot({ data }: PlotlyBu
       </div>
       <div className="flex-shrink-0 px-4 py-1 text-sm text-muted-foreground border-t flex">
         <div>
-          x: {xColumn} | y: {yColumn}
+          x: {xColumn}{logScaleX && ' (log)'} | y: {yColumn}{logScaleY && ' (log)'}
           {colorColumn && ` | color: ${colorDisplayName}`}
           {breakdownColumn && ` | breakdown: ${breakdownColumn}`}
         </div>

smoosense-gui/src/lib/features/ui/uiSlice.ts

@@ -41,6 +41,8 @@ interface UiState {
   bubblePlotMarkerSizeContrastRatio: number
   bubblePlotColorColumn: string
   bubblePlotColorScale: string
+  bubblePlotLogScaleX: boolean
+  bubblePlotLogScaleY: boolean
   heatmapXColumn: string | null
   heatmapYColumn: string | null
   boxPlotBreakdownColumn: string | null
@@ -89,6 +91,8 @@ const initialState: UiState = {
   bubblePlotMarkerSizeContrastRatio: 4.2,
   bubblePlotColorColumn: '__bubble_size__',
   bubblePlotColorScale: 'Jet',
+  bubblePlotLogScaleX: false,
+  bubblePlotLogScaleY: false,
   heatmapXColumn: null,
   heatmapYColumn: null,
   boxPlotBreakdownColumn: null,
@@ -226,6 +230,12 @@ export const uiSlice = createSlice({
     setBubblePlotColorScale: (state, action: PayloadAction<string>) => {
       state.bubblePlotColorScale = action.payload
     },
+    setBubblePlotLogScaleX: (state, action: PayloadAction<boolean>) => {
+      state.bubblePlotLogScaleX = action.payload
+    },
+    setBubblePlotLogScaleY: (state, action: PayloadAction<boolean>) => {
+      state.bubblePlotLogScaleY = action.payload
+    },
     setHeatmapXColumn: (state, action: PayloadAction<string | null>) => {
       state.heatmapXColumn = action.payload
     },
@@ -322,6 +332,8 @@ export const {
   setBubblePlotMarkerSizeContrastRatio,
   setBubblePlotColorColumn,
   setBubblePlotColorScale,
+  setBubblePlotLogScaleX,
+  setBubblePlotLogScaleY,
   setHeatmapXColumn,
   setHeatmapYColumn,
   setBoxPlotBreakdownColumn,

smoosense-gui/src/lib/test-utils.ts

@@ -65,6 +65,8 @@ export function createDefaultTestState(): RootState {
       bubblePlotMarkerSizeContrastRatio: 0.5,
       bubblePlotColorColumn: '',
       bubblePlotColorScale: 'Jet',
+      bubblePlotLogScaleX: false,
+      bubblePlotLogScaleY: false,
       heatmapXColumn: null,
       heatmapYColumn: null,
       boxPlotBreakdownColumn: null,