make x and y columns separately selectable

index.html

@@ -53,9 +53,15 @@
 			<div id="visualizationSection" class="visualization-section" style="display: none;">
 				<h2>Visualization</h2>
 				<div class="form-group">
-					<label for="vizSelect">Select a 2D plot</label>
-					<select id="vizSelect">
-						<option value="">-- Choose columns to visualize --</option>
+					<label for="xColSelect">X Axis</label>
+					<select id="xColSelect">
+						<option value="">-- Select X column --</option>
+					</select>
+				</div>
+				<div class="form-group">
+					<label for="yColSelect">Y Axis</label>
+					<select id="yColSelect">
+						<option value="">-- Select Y column --</option>
 					</select>
 				</div>
 				<div id="vizContainer" class="viz-container"></div>
@@ -167,22 +173,43 @@
 				}
 			}
 
-			// Build the visualization dropdown with valid combinations
+			// Populate X and Y axis dropdowns with columns
 			function buildVisualizationDropdown() {
-				const vizSelect = document.getElementById('vizSelect');
+				const xColSelect = document.getElementById('xColSelect');
+				const yColSelect = document.getElementById('yColSelect');
 				const vizSection = document.getElementById('visualizationSection');
 
 				// Clear existing options except first
-				vizSelect.innerHTML = '<option value="">-- Choose columns to visualize --</option>';
-
-				const validCombinations = [];
+				xColSelect.innerHTML = '<option value="">-- Select X column --</option>';
+				yColSelect.innerHTML = '<option value="">-- Select Y column --</option>';
+
+				// Populate both dropdowns with all visualizable columns (numeric or text)
+				columnInfo.forEach(col => {
+					const isNumeric = isNumericType(col.type);
+					const isText = isTextType(col.type);
+
+					if (isNumeric || isText) {
+						const xOption = document.createElement('option');
+						xOption.value = col.name;
+						xOption.textContent = `${col.name} (${col.type})`;
+						xColSelect.appendChild(xOption);
+
+						const yOption = document.createElement('option');
+						yOption.value = col.name;
+						yOption.textContent = `${col.name} (${col.type})`;
+						yColSelect.appendChild(yOption);
+					}
+				});
 
-				// Generate all valid column combinations
-				for (let i = 0; i < columnInfo.length; i++) {
+				// Find first valid pair and pre-select it
+				let firstValidPair = null;
+				for (let i = 0; i < columnInfo.length && !firstValidPair; i++) {
 					const xCol = columnInfo[i];
 					const xIsNumeric = isNumericType(xCol.type);
 					const xIsText = isTextType(xCol.type);
 
+					if (!xIsNumeric && !xIsText) continue;
+
 					for (let j = 0; j < columnInfo.length; j++) {
 						if (i === j) continue; // Skip same column
 
@@ -190,50 +217,25 @@
 						const yIsNumeric = isNumericType(yCol.type);
 						const yIsText = isTextType(yCol.type);
 
-						// Valid combinations:
-						// 1. Numeric x Numeric (scatter plot)
-						// 2. Numeric x Text (scatter plot with text on one axis)
-						// 3. Text x Numeric (scatter plot with text on one axis)
-						// Skip: Text x Text
-
+						// Valid combinations: at least one must be numeric
 						if ((xIsNumeric && yIsNumeric) ||
 							(xIsNumeric && yIsText) ||
 							(xIsText && yIsNumeric)) {
-
-							// All valid combinations use scatter plots
-							let chartType = 'scatter';
-
-							validCombinations.push({
-								xCol: xCol.name,
-								xType: xCol.type,
-								yCol: yCol.name,
-								yType: yCol.type,
-								chartType: chartType
-							});
-
-							const option = document.createElement('option');
-							option.value = JSON.stringify({ xCol: xCol.name, yCol: yCol.name, chartType });
-							option.textContent = `${xCol.name} (${xCol.type}) × ${yCol.name} (${yCol.type}) - ${chartType}`;
-							vizSelect.appendChild(option);
-						} else if (!xIsNumeric && !xIsText && !yIsNumeric && !yIsText) {
-							// Other unsupported type combinations - we'll handle error when selected
-							validCombinations.push({
-								xCol: xCol.name,
-								xType: xCol.type,
-								yCol: yCol.name,
-								yType: yCol.type,
-								chartType: 'unsupported'
-							});
-
-							const option = document.createElement('option');
-							option.value = JSON.stringify({ xCol: xCol.name, yCol: yCol.name, chartType: 'unsupported' });
-							option.textContent = `${xCol.name} (${xCol.type}) × ${yCol.name} (${yCol.type}) - unsupported`;
-							vizSelect.appendChild(option);
+							firstValidPair = { x: xCol.name, y: yCol.name };
+							break;
 						}
 					}
 				}
 
-				if (validCombinations.length > 0) {
+				if (firstValidPair) {
+					// Pre-select the first valid pair
+					xColSelect.value = firstValidPair.x;
+					yColSelect.value = firstValidPair.y;
+					vizSection.style.display = 'block';
+
+					// Render the visualization immediately
+					renderVisualization(firstValidPair.x, firstValidPair.y, 'scatter');
+				} else if (columnInfo.length > 0) {
 					vizSection.style.display = 'block';
 				} else {
 					vizSection.style.display = 'none';
@@ -343,13 +345,42 @@
 				}
 			});
 
-			// Handle visualization selection - auto-render on change
-			document.getElementById('vizSelect').addEventListener('change', async function(e) {
-				const selectedValue = e.target.value;
+			// Check if selected columns form a valid combination and render
+			function isValidCombination(xCol, yCol) {
+				if (!xCol || !yCol || xCol === yCol) return false;
+
+				const xColInfo = columnInfo.find(c => c.name === xCol);
+				const yColInfo = columnInfo.find(c => c.name === yCol);
+
+				if (!xColInfo || !yColInfo) return false;
+
+				const xIsNumeric = isNumericType(xColInfo.type);
+				const xIsText = isTextType(xColInfo.type);
+				const yIsNumeric = isNumericType(yColInfo.type);
+				const yIsText = isTextType(yColInfo.type);
+
+				// At least one must be numeric, and both must be numeric or text
+				return ((xIsNumeric || xIsText) && (yIsNumeric || yIsText) &&
+						(xIsNumeric || yIsNumeric));
+			}
+
+			// Handle X axis selection
+			document.getElementById('xColSelect').addEventListener('change', async function(e) {
+				const xCol = e.target.value;
+				const yCol = document.getElementById('yColSelect').value;
+
+				if (isValidCombination(xCol, yCol)) {
+					await renderVisualization(xCol, yCol, 'scatter');
+				}
+			});
+
+			// Handle Y axis selection
+			document.getElementById('yColSelect').addEventListener('change', async function(e) {
+				const yCol = e.target.value;
+				const xCol = document.getElementById('xColSelect').value;
 
-				if (selectedValue) {
-					const { xCol, yCol, chartType } = JSON.parse(selectedValue);
-					await renderVisualization(xCol, yCol, chartType);
+				if (isValidCombination(xCol, yCol)) {
+					await renderVisualization(xCol, yCol, 'scatter');
 				}
 			});