Merge pull request #2172 from mito-ds/fix/chart-wizard-limited-ranges

Chart Wizard Input Ranges

Author: aarondr77

mito-ai/mito_ai/completions/prompt_builders/prompt_constants.py

@@ -26,6 +26,17 @@
 - NEVER include comments on the same line as a variable assignment. Each variable assignment must be on its own line with no trailing comments.
 - For string values, use either single or double quotes (e.g., TITLE = "Sales by Product" or TITLE = 'Sales by Product'). Do not use nested quotes (e.g., do NOT use '"value"').
 
+Fixed acceptable ranges (matplotlib constraints):
+- For numeric variables that have a fixed acceptable range, add a line immediately BEFORE the variable assignment: # RANGE VARIABLE_NAME MIN MAX
+- This allows the Chart Wizard to clamp inputs and prevent invalid values. Use the following ranges when you use these variables:
+  - ALPHA (opacity): 0 1
+  - FIGURE_SIZE (tuple width, height in inches): 1 24 (each element)
+  - LINE_WIDTH, LINEWIDTH, LWD: 0 20
+  - FONT_SIZE, FONTSIZE, FONT_SIZE_TITLE, FONT_SIZE_LABEL: 0.1 72
+  - MARKER_SIZE, MARKERSIZE, S: 0 1000
+  - DPI: 1 600
+  - Any other numeric or tuple variable that you know has matplotlib constraints: add # RANGE VARIABLE_NAME MIN MAX with the appropriate min and max.
+
 Common Mistakes to Avoid:
 - WRONG: COLOR = '"#1877F2" # Meta Blue'  (nested quotes and inline comment)
 - WRONG: COLOR = "#1877F2" # Meta Blue  (inline comment)
@@ -38,6 +49,10 @@
 X_LABEL = "Product"
 Y_LABEL = "Sales"
 BAR_COLOR = "#000000"
+# RANGE ALPHA 0 1
+ALPHA = 0.8
+# RANGE FIGURE_SIZE 1 24
+FIGURE_SIZE = (12, 6)
 # === END CONFIG ===
 """
 

mito-ai/src/Extensions/ChartWizard/inputs/NumberInputRow.tsx

@@ -6,16 +6,129 @@
 import React from 'react';
 import { InputRowProps } from './types';
 
+function clamp(value: number, min: number, max: number): number {
+    return Math.min(Math.max(value, min), max);
+}
+
+/** Use slider when range is small and decimal-friendly (e.g. opacity 0–1). */
+const SLIDER_RANGE_THRESHOLD = 2;
+
+/** Step for decimal ranges: fine for 0–1, coarser for 1–2. */
+function decimalStep(min: number, max: number): number {
+    const range = max - min;
+    return range <= 1 ? 0.01 : 0.1;
+}
+
+interface SliderWithNumberInputProps {
+    value: number;
+    min: number;
+    max: number;
+    step: number;
+    label: string;
+    onChange: (value: number) => void;
+}
+
+const SliderWithNumberInput: React.FC<SliderWithNumberInputProps> = ({
+    value,
+    min,
+    max,
+    step,
+    label,
+    onChange
+}) => (
+    <div className="chart-wizard-number-slider-row">
+        <input
+            type="range"
+            min={min}
+            max={max}
+            step={step}
+            value={value}
+            onChange={(e) => onChange(clamp(parseFloat(e.target.value), min, max))}
+            className="chart-wizard-range-slider"
+            aria-label={label}
+        />
+        <input
+            type="number"
+            min={min}
+            max={max}
+            step={step}
+            value={value}
+            onChange={(e) => {
+                let v = parseFloat(e.target.value);
+                if (Number.isNaN(v)) v = min;
+                onChange(clamp(v, min, max));
+            }}
+            className="chart-wizard-number-input chart-wizard-number-input-narrow"
+            aria-label={`${label} (number)`}
+        />
+    </div>
+);
+
+interface NumberInputOnlyProps {
+    value: number;
+    min?: number;
+    max?: number;
+    step: number;
+    onChange: (value: number) => void;
+}
+
+const NumberInputOnly: React.FC<NumberInputOnlyProps> = ({
+    value,
+    min,
+    max,
+    step,
+    onChange
+}) => (
+    <input
+        type="number"
+        value={value}
+        min={min}
+        max={max}
+        step={step}
+        onChange={(e) => {
+            let v = parseFloat(e.target.value);
+            if (Number.isNaN(v)) v = min ?? 0;
+            if (min !== undefined && max !== undefined) v = clamp(v, min, max);
+            onChange(v);
+        }}
+        className="chart-wizard-number-input"
+    />
+);
+
 export const NumberInputRow: React.FC<InputRowProps> = ({ variable, label, onVariableChange }) => {
+    const numValue = variable.value as number;
+    const min = variable.min;
+    const max = variable.max;
+    const hasRange = min !== undefined && max !== undefined;
+    const rangeSpan = hasRange ? (max as number) - (min as number) : 0;
+    const useSlider = hasRange && rangeSpan <= SLIDER_RANGE_THRESHOLD;
+    const step = useSlider ? decimalStep(min as number, max as number) : 1;
+
+    const handleChange = (value: number): void => {
+        onVariableChange(variable.name, value);
+    };
+
     return (
         <div key={variable.name} className="chart-wizard-input-row">
             <label className="chart-wizard-input-label">{label}</label>
-            <input
-                type="number"
-                value={variable.value as number}
-                onChange={(e) => onVariableChange(variable.name, parseFloat(e.target.value) || 0)}
-                className="chart-wizard-number-input"
-            />
+            {useSlider && min !== undefined && max !== undefined ? (
+                <SliderWithNumberInput
+                    value={numValue}
+                    min={min}
+                    max={max}
+                    step={step}
+                    label={label}
+                    onChange={handleChange}
+                />
+            ) : (
+                <NumberInputOnly
+                    value={numValue}
+                    min={min}
+                    max={max}
+                    step={step}
+                    onChange={handleChange}
+                />
+            )}
         </div>
     );
 };

mito-ai/src/Extensions/ChartWizard/inputs/TupleInputRow.tsx

@@ -6,8 +6,20 @@
 import React from 'react';
 import { InputRowProps } from './types';
 
+function clamp(value: number, min: number, max: number): number {
+    return Math.min(Math.max(value, min), max);
+}
+
 export const TupleInputRow: React.FC<InputRowProps> = ({ variable, label, onVariableChange }) => {
     const tupleValue = variable.value as [number, number];
+    const min = variable.min;
+    const max = variable.max;
+    const clampOrIdentity = (v: number, fallback: number): number => {
+        if (min !== undefined && max !== undefined) {
+            return clamp(v, min, max);
+        }
+        return Number.isNaN(v) ? fallback : v;
+    };
     return (
         <div key={variable.name} className="chart-wizard-input-row">
             <label className="chart-wizard-input-label">{label}</label>
@@ -16,19 +28,25 @@ export const TupleInputRow: React.FC<InputRowProps> = ({ variable, label, onVari
                 <input
                     type="number"
                     value={tupleValue[0]}
+                    min={min}
+                    max={max}
+                    step={min !== undefined && max !== undefined && max - min <= 1 ? 'any' : 1}
                     onChange={(e) => {
-                        const newValue: [number, number] = [parseFloat(e.target.value) || 0, tupleValue[1]];
-                        onVariableChange(variable.name, newValue);
+                        const v = clampOrIdentity(parseFloat(e.target.value), 0);
+                        onVariableChange(variable.name, [v, tupleValue[1]]);
                     }}
                     className="chart-wizard-tuple-input"
                 />
                 <span>,</span>
                 <input
                     type="number"
                     value={tupleValue[1]}
+                    min={min}
+                    max={max}
+                    step={min !== undefined && max !== undefined && max - min <= 1 ? 'any' : 1}
                     onChange={(e) => {
-                        const newValue: [number, number] = [tupleValue[0], parseFloat(e.target.value) || 0];
-                        onVariableChange(variable.name, newValue);
+                        const v = clampOrIdentity(parseFloat(e.target.value), 0);
+                        onVariableChange(variable.name, [tupleValue[0], v]);
                     }}
                     className="chart-wizard-tuple-input"
                 />

mito-ai/src/Extensions/ChartWizard/utils/parser.ts

@@ -7,6 +7,10 @@ export interface ChartConfigVariable {
     name: string;
     value: string | number | boolean | [number, number];
     type: 'string' | 'number' | 'boolean' | 'tuple' | 'expression';
+    /** Optional min value for numeric/tuple params (matplotlib constraints). */
+    min?: number;
+    /** Optional max value for numeric/tuple params (matplotlib constraints). */
+    max?: number;
 }
 
 export interface ParsedChartConfig {
@@ -33,10 +37,23 @@ export function parseChartConfig(sourceCode: string): ParsedChartConfig | null {
     const configSection = sourceCode.substring(startIndex + configStartMarker.length, endIndex).trim();
     const lines = configSection.split('\n').map(line => line.trim()).filter(line => line.length > 0);
 
+    // First pass: collect # RANGE lines (format: # RANGE VARIABLE_NAME MIN MAX)
+    const rangeByVar = new Map<string, { min: number; max: number }>();
+    const rangeRegex = /^#\s*RANGE\s+([A-Z_][A-Z0-9_]*)\s+(-?\d+(?:\.\d+)?)\s+(-?\d+(?:\.\d+)?)\s*$/;
+    for (const line of lines) {
+        const rangeMatch = line.match(rangeRegex);
+        if (rangeMatch && rangeMatch[1] && rangeMatch[2] !== undefined && rangeMatch[3] !== undefined) {
+            const varName = rangeMatch[1];
+            const minVal = parseFloat(rangeMatch[2]);
+            const maxVal = parseFloat(rangeMatch[3]);
+            rangeByVar.set(varName, { min: minVal, max: maxVal });
+        }
+    }
+
     const variables: ChartConfigVariable[] = [];
 
     for (const line of lines) {
-        // Skip comment lines
+        // Skip comment-only lines (RANGE lines already processed above)
         if (line.startsWith('#')) {
             continue;
         }
@@ -48,10 +65,12 @@ export function parseChartConfig(sourceCode: string): ParsedChartConfig | null {
             const valueStr = match[2];
             const parsed = parseValue(valueStr.trim());
             if (parsed) {
+                const range = rangeByVar.get(varName);
                 variables.push({
                     name: varName,
                     value: parsed.value,
-                    type: parsed.type
+                    type: parsed.type,
+                    ...(range && { min: range.min, max: range.max })
                 });
             }
         }
@@ -228,6 +247,9 @@ export function updateChartConfig(sourceCode: string, variables: ChartConfigVari
     const variablesToWrite = parsed.variables.map(v => varMap.get(v.name) || v);
 
     for (const variable of variablesToWrite) {
+        if (variable.min !== undefined && variable.max !== undefined) {
+            newConfigSection += `# RANGE ${variable.name} ${variable.min} ${variable.max}\n`;
+        }
         const formattedValue = formatValue(variable.value, variable.type);
         newConfigSection += `${variable.name} = ${formattedValue}\n`;
     }

mito-ai/style/ChartWizardWidget.css

@@ -109,6 +109,63 @@
     box-sizing: border-box;
 }
 
+.chart-wizard-number-slider-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    width: 100%;
+}
+
+.chart-wizard-range-slider {
+    flex: 1;
+    min-width: 0;
+    height: 6px;
+    -webkit-appearance: none;
+    appearance: none;
+    background: var(--jp-border-color2);
+    border-radius: 3px;
+    outline: none;
+}
+
+.chart-wizard-range-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: var(--jp-brand-color1);
+    cursor: pointer;
+    border: none;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.chart-wizard-range-slider::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: var(--jp-brand-color1);
+    cursor: pointer;
+    border: none;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.chart-wizard-range-slider:focus {
+    outline: none;
+}
+
+.chart-wizard-range-slider:focus::-webkit-slider-thumb {
+    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.25);
+}
+
+.chart-wizard-range-slider:focus::-moz-range-thumb {
+    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.25);
+}
+
+.chart-wizard-number-input-narrow {
+    width: 72px;
+    flex-shrink: 0;
+}
+
 .chart-wizard-color-container {
     display: flex;
     gap: 8px;