Spaces:
Sleeping
Sleeping
| import React, { useEffect, useState } from 'react'; | |
| import { useSchema } from '../api/hooks'; | |
| import { useSessionStore } from '../store/session'; | |
| import { formatNumber, typeBadgeClass, typeLabel } from '../lib/format'; | |
| import type { ColumnInfo } from '../api/types'; | |
| interface Props { | |
| compact?: boolean; | |
| } | |
| export function SchemaView({ compact = false }: Props) { | |
| const { columns, rowCount } = useSessionStore(); | |
| const { fetch, loading } = useSchema(); | |
| const [localColumns, setLocalColumns] = useState<ColumnInfo[]>([]); | |
| // Re-fetch schema when columns from the store change (e.g. after operations) | |
| useEffect(() => { | |
| loadSchema(); | |
| }, [columns.length, columns.map(c => c.name).join(',')]); | |
| const loadSchema = async () => { | |
| const data = await fetch(); | |
| if (data) { | |
| setLocalColumns(data.columns); | |
| useSessionStore.getState().setSchema(data.columns, data.row_count); | |
| } | |
| }; | |
| const displayColumns = localColumns.length > 0 ? localColumns : columns; | |
| // Only show numeric stat columns if any column has numeric stats | |
| const anyHasNumericStats = displayColumns.some( | |
| (col) => col.has_numeric_stats === true || col.column_type === 'numeric' | |
| ); | |
| const renderStatCell = (value: number | string | null | undefined, col: ColumnInfo) => { | |
| const isNumeric = col.has_numeric_stats === true || col.column_type === 'numeric'; | |
| // Non-numeric column: show subtle dash | |
| if (!isNumeric) { | |
| return <span className="stat-na">—</span>; | |
| } | |
| // Numeric column but value is null/undefined | |
| if (value == null) { | |
| return <span className="stat-na">N/A</span>; | |
| } | |
| // Numeric column with actual value: show the formatted value | |
| const numVal = typeof value === 'number' ? value : Number(value); | |
| if (isNaN(numVal)) { | |
| return <span className="stat-na">N/A</span>; | |
| } | |
| return <span className="text-gray-700 font-mono text-xs">{formatNumber(numVal)}</span>; | |
| }; | |
| if (loading && displayColumns.length === 0) { | |
| return <div className="text-center py-6 text-gray-400">Loading schema...</div>; | |
| } | |
| // Compact mode: card-based layout for sidebar (avoids wide table overflow) | |
| if (compact) { | |
| return ( | |
| <div className="space-y-1.5"> | |
| {displayColumns.map((col) => { | |
| const isNumeric = col.has_numeric_stats === true || col.column_type === 'numeric'; | |
| return ( | |
| <div | |
| key={col.name} | |
| className="bg-gray-50 rounded-lg px-3 py-2 border border-gray-100" | |
| > | |
| <div className="flex items-center justify-between mb-1"> | |
| <span className="text-xs font-medium text-gray-900 truncate max-w-[140px]" title={col.name}> | |
| {col.name} | |
| </span> | |
| <span className={`badge ${typeBadgeClass(col.column_type)} text-[10px]`}> | |
| {typeLabel(col.column_type)} | |
| </span> | |
| </div> | |
| <div className="flex items-center gap-3 text-[10px] text-gray-500"> | |
| <span>{formatNumber(col.count - col.null_count)} filled</span> | |
| <span>{formatNumber(col.unique_count)} unique</span> | |
| {col.null_count > 0 && ( | |
| <span className="text-amber-600">{formatNumber(col.null_count)} null</span> | |
| )} | |
| </div> | |
| {isNumeric && ( | |
| <div className="flex items-center gap-3 mt-1 text-[10px] text-gray-400 font-mono"> | |
| {col.min != null && <span>min {formatNumber(col.min)}</span>} | |
| {col.max != null && <span>max {formatNumber(col.max)}</span>} | |
| {col.mean != null && <span>avg {formatNumber(col.mean)}</span>} | |
| {col.std != null && <span>std {formatNumber(col.std)}</span>} | |
| </div> | |
| )} | |
| </div> | |
| ); | |
| })} | |
| {!anyHasNumericStats && ( | |
| <p className="text-[10px] text-gray-400 italic mt-2"> | |
| No numeric columns — statistical summaries require numeric data. | |
| </p> | |
| )} | |
| </div> | |
| ); | |
| } | |
| // Full table mode for cell view | |
| return ( | |
| <div className="overflow-x-auto -mx-4 px-4"> | |
| <table className="data-table w-full text-xs"> | |
| <thead> | |
| <tr> | |
| <th>Column</th> | |
| <th>Type</th> | |
| <th>Non-Null</th> | |
| <th>Unique</th> | |
| {anyHasNumericStats && <th>Min</th>} | |
| {anyHasNumericStats && <th>Max</th>} | |
| {anyHasNumericStats && <th>Mean</th>} | |
| {anyHasNumericStats && <th>Std</th>} | |
| {anyHasNumericStats && <th>Median</th>} | |
| {anyHasNumericStats && <th>IQR</th>} | |
| </tr> | |
| </thead> | |
| <tbody> | |
| {displayColumns.map((col) => { | |
| return ( | |
| <tr key={col.name}> | |
| <td className="font-medium text-gray-900 whitespace-normal break-all max-w-[120px]">{col.name}</td> | |
| <td> | |
| <span className={`badge ${typeBadgeClass(col.column_type)}`}> | |
| {typeLabel(col.column_type)} {col.column_type} | |
| </span> | |
| </td> | |
| <td>{formatNumber(col.count - col.null_count)}</td> | |
| <td>{formatNumber(col.unique_count)}</td> | |
| {anyHasNumericStats && <td>{renderStatCell(col.min, col)}</td>} | |
| {anyHasNumericStats && <td>{renderStatCell(col.max, col)}</td>} | |
| {anyHasNumericStats && <td>{renderStatCell(col.mean, col)}</td>} | |
| {anyHasNumericStats && <td>{renderStatCell(col.std, col)}</td>} | |
| {anyHasNumericStats && <td>{renderStatCell(col.median, col)}</td>} | |
| {anyHasNumericStats && <td>{renderStatCell(col.iqr, col)}</td>} | |
| </tr> | |
| ); | |
| })} | |
| </tbody> | |
| </table> | |
| {!anyHasNumericStats && ( | |
| <p className="text-xs text-gray-400 mt-3 italic">No numeric columns found — statistical summaries require numeric data.</p> | |
| )} | |
| </div> | |
| ); | |
| } | |