Spaces:
Sleeping
Sleeping
| import React, { useState } from 'react'; | |
| import { useSessionStore } from '../store/session'; | |
| import { useNotebookStore } from '../store/notebook'; | |
| import { CHART_TYPES, getChartType, isChartAvailable, countColumnTypes } from '../lib/chartTypes'; | |
| export function VisualizationPanel() { | |
| const { columns } = useSessionStore(); | |
| const { addCell, updateCell } = useNotebookStore(); | |
| const [selectedType, setSelectedType] = useState<string>(''); | |
| const [params, setParams] = useState<Record<string, any>>({}); | |
| const colNames = columns.map((c) => c.name); | |
| const numericCols = columns.filter((c) => c.column_type === 'numeric').map((c) => c.name); | |
| const categoricalCols = columns.filter((c) => c.column_type === 'categorical').map((c) => c.name); | |
| const datetimeCols = columns.filter((c) => c.column_type === 'datetime').map((c) => c.name); | |
| const geoCols = columns.filter((c) => c.column_type === 'geo_lat_lon').map((c) => c.name); | |
| const typeCounts = countColumnTypes(columns); | |
| const chartType = getChartType(selectedType); | |
| const handleCreate = () => { | |
| if (!selectedType) return; | |
| const cellId = addCell(selectedType === 'map' ? 'map' : 'chart', `${selectedType} chart`, { | |
| chartType: selectedType, | |
| params, | |
| }); | |
| updateCell(cellId, { config: { chartType: selectedType, params } }); | |
| }; | |
| const renderColumnSelect = (name: string, relevantCols: string[], required: boolean) => ( | |
| <div key={name}> | |
| <label className="block text-xs font-medium text-gray-600 mb-1"> | |
| {name} {required && <span className="text-red-500">*</span>} | |
| </label> | |
| <select | |
| className="input-field" | |
| value={params[name] || ''} | |
| onChange={(e) => setParams({ ...params, [name]: e.target.value })} | |
| > | |
| <option value="">Select column...</option> | |
| {relevantCols.map((c) => ( | |
| <option key={c} value={c}>{c}</option> | |
| ))} | |
| {relevantCols.length === 0 && colNames.map((c) => ( | |
| <option key={c} value={c}>{c}</option> | |
| ))} | |
| </select> | |
| </div> | |
| ); | |
| const getRelevantCols = (param: string): string[] => { | |
| if (param.includes('x_col') || param.includes('y_col') || param.includes('value') || param === 'column') { | |
| return numericCols.length > 0 ? numericCols : colNames; | |
| } | |
| if (param === 'columns') { | |
| return numericCols.length > 0 ? numericCols : colNames; | |
| } | |
| if (param.includes('category')) { | |
| return categoricalCols.length > 0 ? categoricalCols : colNames; | |
| } | |
| if (param.includes('date')) { | |
| return datetimeCols.length > 0 ? datetimeCols : colNames; | |
| } | |
| if (param.includes('lat') || param.includes('lon')) { | |
| return geoCols.length > 0 ? geoCols : numericCols.length > 0 ? numericCols : colNames; | |
| } | |
| if (param.includes('group')) { | |
| return categoricalCols.length > 0 ? categoricalCols : colNames; | |
| } | |
| return colNames; | |
| }; | |
| // Render a multi-select for columns (used by radar chart) | |
| const renderMultiColumnSelect = (name: string, relevantCols: string[], required: boolean) => ( | |
| <div key={name}> | |
| <label className="block text-xs font-medium text-gray-600 mb-1"> | |
| {name} (select multiple) {required && <span className="text-red-500">*</span>} | |
| </label> | |
| <div className="max-h-32 overflow-y-auto border border-gray-300 rounded-lg p-2 space-y-1 bg-white"> | |
| {relevantCols.map((c) => { | |
| const selected = (params[name] || []).includes(c); | |
| return ( | |
| <label key={c} className="flex items-center gap-2 text-xs cursor-pointer hover:bg-gray-50 px-1 py-0.5 rounded"> | |
| <input | |
| type="checkbox" | |
| checked={selected} | |
| onChange={(e) => { | |
| const current: string[] = params[name] || []; | |
| const next = e.target.checked | |
| ? [...current, c] | |
| : current.filter((x: string) => x !== c); | |
| setParams({ ...params, [name]: next }); | |
| }} | |
| className="rounded border-gray-300" | |
| /> | |
| <span>{c}</span> | |
| </label> | |
| ); | |
| })} | |
| {relevantCols.length === 0 && ( | |
| <p className="text-xs text-gray-400 italic">No columns available</p> | |
| )} | |
| </div> | |
| {(params[name] || []).length > 0 && ( | |
| <p className="text-[10px] text-gray-400 mt-1">{(params[name] || []).length} selected</p> | |
| )} | |
| </div> | |
| ); | |
| return ( | |
| <div className="p-4"> | |
| <h4 className="text-sm font-semibold text-gray-900 mb-3">Create Visualization</h4> | |
| {/* Chart type grid */} | |
| <div className="grid grid-cols-2 gap-1.5 mb-4"> | |
| {CHART_TYPES.map((ct) => { | |
| const available = isChartAvailable(ct, columns); | |
| return ( | |
| <div key={ct.key} className="relative group"> | |
| <button | |
| onClick={() => { | |
| if (available) { | |
| setSelectedType(ct.key); | |
| setParams({}); | |
| } | |
| }} | |
| disabled={!available} | |
| className={`w-full p-2 rounded-lg border text-left transition-colors ${ | |
| selectedType === ct.key | |
| ? 'border-brand-500 bg-brand-50 text-brand-700' | |
| : available | |
| ? 'border-gray-200 hover:border-gray-300 text-gray-600' | |
| : 'border-gray-100 bg-gray-50 text-gray-300 cursor-not-allowed' | |
| }`} | |
| > | |
| <div className="font-medium text-xs">{ct.label}</div> | |
| <div className="text-[10px] text-gray-400 mt-0.5">{ct.description}</div> | |
| </button> | |
| {!available && ( | |
| <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-1 px-2 py-1 bg-gray-800 text-white text-[10px] rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10"> | |
| {ct.unavailableMessage} | |
| </div> | |
| )} | |
| </div> | |
| ); | |
| })} | |
| </div> | |
| {/* Available types summary */} | |
| <div className="mb-3 text-[10px] text-gray-400 flex flex-wrap gap-x-3 gap-y-0.5"> | |
| {typeCounts.numeric > 0 && <span># Numeric: {typeCounts.numeric}</span>} | |
| {typeCounts.categorical > 0 && <span>Aa Categorical: {typeCounts.categorical}</span>} | |
| {typeCounts.datetime > 0 && <span>DT Datetime: {typeCounts.datetime}</span>} | |
| {typeCounts.geo_lat_lon > 0 && <span>G Geo: {typeCounts.geo_lat_lon}</span>} | |
| </div> | |
| {/* Parameter form */} | |
| {chartType && ( | |
| <div className="space-y-3 mb-4"> | |
| {chartType.requiredParams.map((param) => { | |
| if (param === 'columns') { | |
| const relevantCols = getRelevantCols(param); | |
| return renderMultiColumnSelect(param, relevantCols, true); | |
| } | |
| const relevantCols = getRelevantCols(param); | |
| return renderColumnSelect(param, relevantCols, true); | |
| })} | |
| {chartType.optionalParams.map((param) => { | |
| if (param === 'color_col' || param === 'label_col' || param === 'group_col') { | |
| return renderColumnSelect(param, colNames, false); | |
| } | |
| if (param === 'bins' || param === 'n') { | |
| return ( | |
| <div key={param}> | |
| <label className="block text-xs font-medium text-gray-600 mb-1">{param}</label> | |
| <input | |
| type="number" | |
| className="input-field" | |
| value={params[param] || (param === 'bins' ? 20 : 15)} | |
| onChange={(e) => setParams({ ...params, [param]: parseInt(e.target.value) || 0 })} | |
| /> | |
| </div> | |
| ); | |
| } | |
| if (param === 'sort_desc') { | |
| return ( | |
| <label key={param} className="flex items-center gap-2 text-sm"> | |
| <input | |
| type="checkbox" | |
| checked={params[param] !== false} | |
| onChange={(e) => setParams({ ...params, [param]: e.target.checked })} | |
| className="rounded border-gray-300" | |
| /> | |
| Sort descending | |
| </label> | |
| ); | |
| } | |
| if (param === 'agg') { | |
| return ( | |
| <div key={param}> | |
| <label className="block text-xs font-medium text-gray-600 mb-1">Aggregation</label> | |
| <select | |
| className="input-field" | |
| value={params[param] || 'sum'} | |
| onChange={(e) => setParams({ ...params, [param]: e.target.value })} | |
| > | |
| <option value="sum">Sum</option> | |
| <option value="mean">Mean</option> | |
| <option value="count">Count</option> | |
| <option value="min">Min</option> | |
| <option value="max">Max</option> | |
| <option value="median">Median</option> | |
| </select> | |
| </div> | |
| ); | |
| } | |
| return null; | |
| })} | |
| </div> | |
| )} | |
| <button | |
| onClick={handleCreate} | |
| disabled={!selectedType} | |
| className="btn-primary w-full" | |
| > | |
| Create Chart | |
| </button> | |
| </div> | |
| ); | |
| } | |