config min marker size for better colors

Author: slinjhu

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

@@ -7,7 +7,7 @@ import CategoricalColumnDropdown from '@/components/common/CategoricalColumnDrop
 import NumericalColumnDropdown from '@/components/common/NumericalColumnDropdown'
 import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select'
 import { useAppSelector, useAppDispatch } from '@/lib/hooks'
-import { setBubblePlotMaxMarkerSize, setBubblePlotOpacity, setBubblePlotMarkerSizeContrastRatio, setBubblePlotColorScale } from '@/lib/features/ui/uiSlice'
+import { setBubblePlotMaxMarkerSize, setBubblePlotMinMarkerSize, setBubblePlotOpacity, setBubblePlotMarkerSizeContrastRatio, setBubblePlotColorScale } from '@/lib/features/ui/uiSlice'
 
 // Plotly color scales with their CSS gradient representations
 const COLOR_SCALES: Record<string, string> = {
@@ -30,6 +30,7 @@ function ColorScaleBar({ scale }: { scale: string }) {
 function BubblePlotMoreControlsContent() {
   const dispatch = useAppDispatch()
   const bubblePlotMaxMarkerSize = useAppSelector((state) => state.ui.bubblePlotMaxMarkerSize)
+  const bubblePlotMinMarkerSize = useAppSelector((state) => state.ui.bubblePlotMinMarkerSize)
   const bubblePlotOpacity = useAppSelector((state) => state.ui.bubblePlotOpacity)
   const bubblePlotMarkerSizeContrastRatio = useAppSelector((state) => state.ui.bubblePlotMarkerSizeContrastRatio)
   const bubblePlotColorScale = useAppSelector((state) => state.ui.bubblePlotColorScale)
@@ -71,6 +72,20 @@ function BubblePlotMoreControlsContent() {
         </div>
       </div>
 
+      <div>
+        <label className="text-sm font-medium mb-2 block">
+          Min Marker Size: {bubblePlotMinMarkerSize}
+        </label>
+        <Slider
+          value={[bubblePlotMinMarkerSize]}
+          onValueChange={(value) => dispatch(setBubblePlotMinMarkerSize(value[0]))}
+          max={15}
+          min={2}
+          step={1}
+          className="w-full"
+        />
+      </div>
+
       <div>
         <label className="text-sm font-medium mb-2 block">
           Max Marker Size: {bubblePlotMaxMarkerSize}

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

@@ -34,6 +34,7 @@ const PlotlyBubblePlot = React.memo(function PlotlyBubblePlot({ data }: PlotlyBu
   const yColumn = useAppSelector((state) => state.ui.bubblePlotYColumn)
   const breakdownColumn = useAppSelector((state) => state.ui.bubblePlotBreakdownColumn)
   const maxMarkerSize = useAppSelector((state) => state.ui.bubblePlotMaxMarkerSize)
+  const minMarkerSize = useAppSelector((state) => state.ui.bubblePlotMinMarkerSize)
   const opacity = useAppSelector((state) => state.ui.bubblePlotOpacity)
   const markerSizeContrastRatio = useAppSelector((state) => state.ui.bubblePlotMarkerSizeContrastRatio)
   const colorColumn = useAppSelector((state) => state.ui.bubblePlotColorColumn)
@@ -63,39 +64,30 @@ const PlotlyBubblePlot = React.memo(function PlotlyBubblePlot({ data }: PlotlyBu
           // Shifted logistic function: markerSize = 2 * maxMarkerSize * (1 / (1 + exp(-markerSizeContrastRatio * count)) - 0.5)
           const k = Math.exp(-markerSizeContrastRatio)
           const logisticValue = 1 / (1 + Math.exp(-k * c.count))
-          return Math.max(5, 2 * maxMarkerSize * (logisticValue - 0.5))
+          return Math.max(minMarkerSize, 2 * maxMarkerSize * (logisticValue - 0.5))
         })
 
         // Build marker config
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const marker: any = {
           size: markerSizes,
           opacity: opacity,
+          line: {
+            width: 0.5,
+            color: colors.foreground
+          }
         }
 
         // Add color mapping if color column is selected
         if (hasColorValues) {
-          const colorValues = item.customdata.map(c => c.colorValue ?? 0)
-          marker.color = colorValues
+          marker.color = item.customdata.map(c => c.colorValue ?? 0)
           marker.colorscale = colorScale
           marker.showscale = true
           marker.colorbar = {
             title: colorColumn,
             thickness: 15,
             len: 0.5
           }
-          // Use same color for border (no separate border color)
-          marker.line = {
-            width: 1,
-            color: colorValues,
-            colorscale: colorScale
-          }
-        } else {
-          // Default border color when no color column
-          marker.line = {
-            width: 1,
-            color: colors.foreground
-          }
         }
 
         const trace: Partial<PlotData> = {
@@ -123,9 +115,10 @@ const PlotlyBubblePlot = React.memo(function PlotlyBubblePlot({ data }: PlotlyBu
       setPlotlyError((error as Error).message)
       return []
     }
-  }, [data, xColumn, yColumn, breakdownColumn, colorColumn, colorScale, opacity, maxMarkerSize, markerSizeContrastRatio, colors.foreground])
+  }, [data, xColumn, yColumn, breakdownColumn, colorColumn, colorScale, opacity, maxMarkerSize, minMarkerSize, markerSizeContrastRatio, colors.foreground])
 
   const baseLayout = usePlotlyLayout({
+    title: colorColumn ? `Color: ${colorColumn}` : undefined,
     xTitle: `X: ${xColumn}`,
     yTitle: `Y: ${yColumn}`,
     showLegend: breakdownColumn !== null

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

@@ -36,6 +36,7 @@ interface UiState {
   bubblePlotYColumn: string
   bubblePlotBreakdownColumn: string | null
   bubblePlotMaxMarkerSize: number
+  bubblePlotMinMarkerSize: number
   bubblePlotOpacity: number
   bubblePlotMarkerSizeContrastRatio: number
   bubblePlotColorColumn: string
@@ -83,6 +84,7 @@ const initialState: UiState = {
   bubblePlotYColumn: '',
   bubblePlotBreakdownColumn: null,
   bubblePlotMaxMarkerSize: 20,
+  bubblePlotMinMarkerSize: 7,
   bubblePlotOpacity: 0.7,
   bubblePlotMarkerSizeContrastRatio: 4.2,
   bubblePlotColorColumn: '',
@@ -209,6 +211,9 @@ export const uiSlice = createSlice({
     setBubblePlotMaxMarkerSize: (state, action: PayloadAction<number>) => {
       state.bubblePlotMaxMarkerSize = Math.max(5, Math.min(50, action.payload))
     },
+    setBubblePlotMinMarkerSize: (state, action: PayloadAction<number>) => {
+      state.bubblePlotMinMarkerSize = Math.max(2, Math.min(15, action.payload))
+    },
     setBubblePlotOpacity: (state, action: PayloadAction<number>) => {
       state.bubblePlotOpacity = Math.max(0.1, Math.min(1, action.payload))
     },
@@ -312,6 +317,7 @@ export const {
   setBubblePlotYColumn,
   setBubblePlotBreakdownColumn,
   setBubblePlotMaxMarkerSize,
+  setBubblePlotMinMarkerSize,
   setBubblePlotOpacity,
   setBubblePlotMarkerSizeContrastRatio,
   setBubblePlotColorColumn,

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

@@ -60,6 +60,7 @@ export function createDefaultTestState(): RootState {
       bubblePlotYColumn: '',
       bubblePlotBreakdownColumn: null,
       bubblePlotMaxMarkerSize: 20,
+      bubblePlotMinMarkerSize: 7,
       bubblePlotOpacity: 0.7,
       bubblePlotMarkerSizeContrastRatio: 0.5,
       bubblePlotColorColumn: '',

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

@@ -72,11 +72,13 @@ export const usePlotlyAxis = ({
 /**
  * Hook to configure common Plotly layout with theming
  */
-export const usePlotlyLayout = ({ 
-  xTitle = '', 
+export const usePlotlyLayout = ({
+  title,
+  xTitle = '',
   yTitle = '',
   showLegend = true
-}: { 
+}: {
+  title?: string
   xTitle?: string
   yTitle?: string
   showLegend?: boolean
@@ -91,7 +93,7 @@ export const usePlotlyLayout = ({
 
   return useMemo(() => ({
     title: {
-      text: '',
+      text: title || '',
       font: {
         color: colors.foreground,
         family: 'system-ui, -apple-system, sans-serif'
@@ -108,7 +110,7 @@ export const usePlotlyLayout = ({
     margin: {
       l: Math.round(fontSize * 4.3),
       r: Math.round(fontSize * 2.1),
-      t: Math.round(fontSize * 2.1),
+      t: title ? Math.round(fontSize * 2.5) : Math.round(fontSize * 2.1),
       b: Math.round(fontSize * 4.3)
     },
     dragmode: 'pan' as const,
@@ -123,7 +125,7 @@ export const usePlotlyLayout = ({
       }
     },
     hovermode: 'closest' as const
-  }), [colors, xAxis, yAxis, showLegend, fontSize])
+  }), [colors, xAxis, yAxis, showLegend, fontSize, title])
 }