Spaces:
Runtime error
Runtime error
File size: 3,483 Bytes
37a6ee1 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | import React from "react";
import DataTable from "./DataTable";
export default function DataPreview({ dataset, onStartQuerying }) {
if (!dataset) return null;
// Extract columns (schema) and rows (preview data)
const columnsSchema = dataset.columns || [];
const previewData = dataset.preview || { columns: [], rows: [] };
const displayDescription = dataset.description || `Database containing ${dataset.display_name} tables.`;
const getTypeBadgeClass = (type) => {
const t = type ? type.toUpperCase() : "TEXT";
if (t === "INTEGER" || t === "REAL") return "badge-type integer";
if (t === "DATE" || t === "TIMESTAMP" || t === "DATETIME") return "badge-type date";
return "badge-type text";
};
return (
<div style={{ display: "flex", flexDirection: "column", gap: "28px" }}>
{/* 1. Dataset Info Card */}
<div className="preview-header">
<div className="preview-title-area">
<h1>{dataset.display_name}</h1>
<p className="preview-description">{displayDescription}</p>
<div className="stat-badges">
<div className="stat-badge">
<span>Total Rows:</span>
<span>{dataset.row_count}</span>
</div>
<div className="stat-badge">
<span>Columns:</span>
<span>{columnsSchema.length}</span>
</div>
<div className="stat-badge">
<span>Format:</span>
<span>SQLite</span>
</div>
</div>
</div>
{/* Start Querying button */}
<button className="btn-primary" onClick={onStartQuerying}>
Start Asking Questions →
</button>
</div>
{/* 2. Schema Table Section */}
<div>
<h2 className="section-title">Database Schema</h2>
<div className="table-container">
<table className="table-preview">
<thead>
<tr>
<th>Column Name</th>
<th>Data Type</th>
<th>Sample Values</th>
</tr>
</thead>
<tbody>
{columnsSchema.map((col, idx) => (
<tr key={idx}>
<td className="cell-mono" style={{ fontWeight: 600 }}>{col.name}</td>
<td>
<span className={`badge ${getTypeBadgeClass(col.type)}`}>
{col.type}
</span>
</td>
<td className="cell-mono" style={{ color: "var(--text-secondary)" }}>
{col.sample_values && col.sample_values.length > 0
? col.sample_values.map(val => (val === null ? "null" : String(val))).join(", ")
: "No examples available"}
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
{/* 3. Data Preview Section (first 10 rows) */}
<div>
<h2 className="section-title">Data Preview (first 10 rows)</h2>
<DataTable
columns={previewData.columns}
rows={previewData.rows}
maxHeight="320px"
/>
</div>
{/* Bottom CTA Button */}
<div style={{ marginTop: "12px", display: "flex", justifyContent: "flex-end" }}>
<button className="btn-primary" onClick={onStartQuerying}>
Start Asking Questions →
</button>
</div>
</div>
);
}
|