datajunction-ui 0.0.94 → 0.0.96

package/src/app/pages/QueryPlannerPage/ResultsView.jsx

@@ -1,13 +1,397 @@
-import { useState, useCallback, useMemo } from 'react';
+import { useState, useCallback, useMemo, useEffect, memo } from 'react';
 import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { foundation } from 'react-syntax-highlighter/src/styles/hljs';
 import sql from 'react-syntax-highlighter/dist/esm/languages/hljs/sql';
+import {
+  LineChart,
+  Line,
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from 'recharts';
 
 SyntaxHighlighter.registerLanguage('sql', sql);
 
+const SERIES_COLORS = [
+  '#60a5fa',
+  '#34d399',
+  '#fbbf24',
+  '#f87171',
+  '#a78bfa',
+  '#22d3ee',
+  '#fb923c',
+];
+
+// Threshold for switching from multi-series to small multiples
+const SMALL_MULTIPLES_THRESHOLD = 2;
+
+function isTimeColumn(col) {
+  const name = col.name.toLowerCase();
+  const type = (col.type || '').toLowerCase();
+  return (
+    type.includes('date') ||
+    type.includes('timestamp') ||
+    type.includes('time') ||
+    name === 'date' ||
+    name === 'day' ||
+    name === 'week' ||
+    name === 'month' ||
+    name === 'year' ||
+    name === 'quarter' ||
+    name.endsWith('_date') ||
+    name.endsWith('_day') ||
+    name.endsWith('_week') ||
+    name.endsWith('_month') ||
+    name.endsWith('_year') ||
+    name.endsWith('_at') ||
+    name.startsWith('date') ||
+    name.startsWith('ds')
+  );
+}
+
+function isNumericColumn(col) {
+  const type = (col.type || '').toLowerCase();
+  return (
+    type.includes('int') ||
+    type.includes('float') ||
+    type.includes('double') ||
+    type.includes('decimal') ||
+    type.includes('numeric') ||
+    type.includes('real') ||
+    type.includes('number')
+  );
+}
+
+function detectChartConfig(columns, rows) {
+  if (!columns.length || !rows.length) return null;
+
+  const tagged = columns.map((c, i) => ({ ...c, idx: i }));
+  const timeCols = tagged.filter(c => isTimeColumn(c));
+  const numericCols = tagged.filter(c => isNumericColumn(c));
+  const nonNumericCols = tagged.filter(c => !isNumericColumn(c));
+  const nonTimeCatCols = nonNumericCols.filter(c => !isTimeColumn(c));
+
+  // Time dimension present → line chart
+  if (timeCols.length > 0) {
+    const xCol = timeCols[0];
+    const metricCols = numericCols.filter(c => c.idx !== xCol.idx);
+    if (metricCols.length > 0) {
+      // Exactly one categorical dim + one metric → pivot as series
+      if (nonTimeCatCols.length === 1) {
+        return {
+          type: 'line',
+          xCol,
+          groupByCol: nonTimeCatCols[0],
+          metricCols,
+        };
+      }
+      return { type: 'line', xCol, metricCols };
+    }
+  }
+
+  // Categorical dimension(s) → bar chart
+  if (nonTimeCatCols.length > 0 && numericCols.length > 0) {
+    if (nonTimeCatCols.length === 1) {
+      return { type: 'bar', xCol: nonTimeCatCols[0], metricCols: numericCols };
+    }
+    if (nonTimeCatCols.length === 2) {
+      return {
+        type: 'bar',
+        xCol: nonTimeCatCols[0],
+        groupByCol: nonTimeCatCols[1],
+        metricCols: numericCols,
+      };
+    }
+    // 3+ cats → fall back to first cat as x-axis
+    return { type: 'bar', xCol: nonTimeCatCols[0], metricCols: numericCols };
+  }
+
+  // Multiple numeric columns, no string/time dim → treat first as x-axis (line)
+  if (numericCols.length > 1) {
+    const xCol = numericCols[0];
+    const metricCols = numericCols.slice(1);
+    return { type: 'line', xCol, metricCols };
+  }
+
+  // Scalar result → KPI cards
+  if (numericCols.length > 0) {
+    return { type: 'kpi', metricCols: numericCols };
+  }
+
+  return null;
+}
+
+const MAX_GROUP_VALUES = 7;
+
+function buildPivotedData(rows, columns, xCol, groupByCol, metricCols) {
+  const xIdx = xCol.idx;
+  const gIdx = groupByCol.idx;
+  const metricIdxs = metricCols.map(c => c.idx);
+
+  // Pass 1: group totals only (cheap — just numbers)
+  const groupTotals = {};
+  for (const row of rows) {
+    const gVal = String(row[gIdx] ?? '(null)');
+    groupTotals[gVal] =
+      (groupTotals[gVal] || 0) + (Number(row[metricIdxs[0]]) || 0);
+  }
+  const groupValues = Object.entries(groupTotals)
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, MAX_GROUP_VALUES)
+    .map(([k]) => k);
+  const groupSet = new Set(groupValues);
+
+  // Pass 2: build ALL metric pivot maps in one sweep
+  const pivotMaps = metricCols.map(() => ({}));
+  for (const row of rows) {
+    const gVal = String(row[gIdx] ?? '(null)');
+    if (!groupSet.has(gVal)) continue;
+    const xVal = row[xIdx];
+    const mapKey = String(xVal ?? '(null)');
+    for (let m = 0; m < metricCols.length; m++) {
+      const pm = pivotMaps[m];
+      if (!pm[mapKey]) pm[mapKey] = { [xCol.name]: xVal };
+      pm[mapKey][gVal] = row[metricIdxs[m]];
+    }
+  }
+
+  const sortFn = (a, b) => {
+    const av = a[xCol.name];
+    const bv = b[xCol.name];
+    if (av === null && bv === null) return 0;
+    if (av === null) return 1;
+    if (bv === null) return -1;
+    if (typeof av === 'number' && typeof bv === 'number') return av - bv;
+    return String(av).localeCompare(String(bv));
+  };
+
+  const pivotedByMetric = metricCols.map((metricCol, m) => {
+    const pivoted = Object.values(pivotMaps[m]);
+    pivoted.sort(sortFn);
+    return { col: metricCol, data: pivoted };
+  });
+
+  return { pivotedByMetric, groupValues };
+}
+
+function buildChartData(columns, rows, xCol) {
+  const data = rows.map(row => {
+    const obj = {};
+    columns.forEach((col, i) => {
+      obj[col.name] = row[i];
+    });
+    return obj;
+  });
+  const key = xCol.name;
+  data.sort((a, b) => {
+    const av = a[key];
+    const bv = b[key];
+    if (av === null && bv === null) return 0;
+    if (av === null) return 1;
+    if (bv === null) return -1;
+    if (typeof av === 'number' && typeof bv === 'number') return av - bv;
+    return String(av).localeCompare(String(bv));
+  });
+  return data;
+}
+
+function formatYAxis(value) {
+  if (Math.abs(value) >= 1_000_000_000)
+    return (value / 1_000_000_000).toFixed(1) + 'B';
+  if (Math.abs(value) >= 1_000_000) return (value / 1_000_000).toFixed(1) + 'M';
+  if (Math.abs(value) >= 1_000) return (value / 1_000).toFixed(1) + 'K';
+  return value;
+}
+
+function KpiCards({ rows, metricCols }) {
+  const row = rows[0] || [];
+  return (
+    <div className="kpi-cards">
+      {metricCols.map(col => {
+        const val = row[col.idx];
+        const formatted =
+          val == null
+            ? '—'
+            : typeof val === 'number'
+            ? val.toLocaleString(undefined, { maximumFractionDigits: 4 })
+            : String(val);
+        return (
+          <div key={col.idx} className="kpi-card">
+            <div className="kpi-label">{col.name}</div>
+            <div className="kpi-value">{formatted}</div>
+            {col.type && <div className="kpi-type">{col.type}</div>}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+const CHART_MARGIN = { top: 8, right: 24, left: 8, bottom: 40 };
+const AXIS_TICK = { fontSize: 11, fill: '#64748b' };
+const TOOLTIP_STYLE = { fontSize: 12, border: '1px solid #e2e8f0' };
+
+const Chart = memo(function Chart({
+  type,
+  xCol,
+  metricCols,
+  seriesKeys,
+  chartData,
+  seriesColors = SERIES_COLORS,
+}) {
+  const showDots = chartData.length <= 60;
+  const keys = seriesKeys || metricCols.map(c => c.name);
+  const xInterval =
+    type === 'line'
+      ? 'preserveStartEnd'
+      : Math.max(0, Math.ceil(chartData.length / 20) - 1);
+  if (type === 'line') {
+    return (
+      <ResponsiveContainer width="100%" height="100%">
+        <LineChart data={chartData} margin={CHART_MARGIN}>
+          <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
+          <XAxis
+            dataKey={xCol.name}
+            tick={AXIS_TICK}
+            angle={-35}
+            textAnchor="end"
+            interval={xInterval}
+          />
+          <YAxis tickFormatter={formatYAxis} tick={AXIS_TICK} width={60} />
+          <Tooltip contentStyle={TOOLTIP_STYLE} />
+          {keys.map((key, i) => (
+            <Line
+              key={key}
+              type="monotone"
+              dataKey={key}
+              stroke={seriesColors[i % seriesColors.length]}
+              dot={showDots}
+              strokeWidth={2}
+              isAnimationActive={false}
+            />
+          ))}
+        </LineChart>
+      </ResponsiveContainer>
+    );
+  }
+  return (
+    <ResponsiveContainer width="100%" height="100%">
+      <BarChart data={chartData} margin={CHART_MARGIN}>
+        <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
+        <XAxis
+          dataKey={xCol.name}
+          tick={AXIS_TICK}
+          angle={-35}
+          textAnchor="end"
+          interval={xInterval}
+        />
+        <YAxis tickFormatter={formatYAxis} tick={AXIS_TICK} width={60} />
+        <Tooltip contentStyle={TOOLTIP_STYLE} />
+        {keys.map((key, i) => (
+          <Bar
+            key={key}
+            dataKey={key}
+            fill={seriesColors[i % seriesColors.length]}
+            isAnimationActive={false}
+          />
+        ))}
+      </BarChart>
+    </ResponsiveContainer>
+  );
+});
+
+const ChartView = memo(function ChartView({
+  chartConfig,
+  chartData,
+  pivotedByMetric,
+  groupValues,
+  rows,
+  columns,
+}) {
+  if (!chartConfig) {
+    return <div className="chart-no-data">No chartable data detected</div>;
+  }
+
+  if (chartConfig.type === 'kpi') {
+    return <KpiCards rows={rows} metricCols={chartConfig.metricCols} />;
+  }
+
+  const { type, xCol, metricCols } = chartConfig;
+
+  // Pivoted multi-metric: small multiples, one per metric, each with groupBy series
+  if (pivotedByMetric && pivotedByMetric.length > 1) {
+    return (
+      <div className="small-multiples">
+        {pivotedByMetric.map(({ col, data }) => (
+          <div key={col.idx} className="small-multiple">
+            <div className="small-multiple-label">{col.name}</div>
+            <div className="small-multiple-chart">
+              <Chart
+                type={type}
+                xCol={xCol}
+                metricCols={[col]}
+                seriesKeys={groupValues}
+                chartData={data}
+              />
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  // Pivoted single-metric: one chart with groupBy as series
+  if (groupValues) {
+    return (
+      <Chart
+        type={type}
+        xCol={xCol}
+        metricCols={metricCols}
+        seriesKeys={groupValues}
+        chartData={chartData}
+      />
+    );
+  }
+
+  // No groupBy: standard small multiples or single chart
+  if (metricCols.length > SMALL_MULTIPLES_THRESHOLD) {
+    return (
+      <div className="small-multiples">
+        {metricCols.map((col, i) => (
+          <div key={col.idx} className="small-multiple">
+            <div className="small-multiple-label">{col.name}</div>
+            <div className="small-multiple-chart">
+              <Chart
+                type={type}
+                xCol={xCol}
+                metricCols={[col]}
+                chartData={chartData}
+                seriesColors={[SERIES_COLORS[i % SERIES_COLORS.length]]}
+              />
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <Chart
+      type={type}
+      xCol={xCol}
+      metricCols={metricCols}
+      chartData={chartData}
+    />
+  );
+});
+
 /**
  * ResultsView - Displays query results with SQL and data table
- * Layout: SQL in top 1/3, results in bottom 2/3
+ * Layout: SQL in top ~25%, results in bottom ~75% with Table/Chart tabs
  */
 export function ResultsView({
   sql: sqlQuery,
@@ -22,10 +406,12 @@ export function ResultsView({
   dialect,
   cubeName,
   availability,
+  links,
 }) {
   const [copied, setCopied] = useState(false);
   const [sortColumn, setSortColumn] = useState(null);
   const [sortDirection, setSortDirection] = useState('asc');
+  const [activeTab, setActiveTab] = useState('table');
 
   const handleCopySql = useCallback(() => {
     if (sqlQuery) {
@@ -35,12 +421,13 @@ export function ResultsView({
     }
   }, [sqlQuery]);
 
-  // Parse results data - handle new v3 format
-  const columns = results?.results?.[0]?.columns || [];
-  const rows = results?.results?.[0]?.rows || [];
+  const columns = useMemo(
+    () => results?.results?.[0]?.columns || [],
+    [results],
+  );
+  const rows = useMemo(() => results?.results?.[0]?.rows || [], [results]);
   const rowCount = rows.length;
 
-  // Handle column header click for sorting
   const handleSort = useCallback(
     columnIndex => {
       if (sortColumn === columnIndex) {
@@ -53,17 +440,14 @@ export function ResultsView({
     [sortColumn],
   );
 
-  // Sort rows based on current sort state
   const sortedRows = useMemo(() => {
     if (sortColumn === null) return rows;
     return [...rows].sort((a, b) => {
       const aVal = a[sortColumn];
       const bVal = b[sortColumn];
-      // Handle nulls - nulls go last
       if (aVal === null && bVal === null) return 0;
       if (aVal === null) return 1;
       if (bVal === null) return -1;
-      // Compare values
       let cmp;
       if (typeof aVal === 'number' && typeof bVal === 'number') {
         cmp = aVal - bVal;
@@ -74,6 +458,41 @@ export function ResultsView({
     });
   }, [rows, sortColumn, sortDirection]);
 
+  const chartConfig = useMemo(
+    () => detectChartConfig(columns, rows),
+    [columns, rows],
+  );
+  const { chartData, pivotedByMetric, groupValues } = useMemo(() => {
+    if (!chartConfig || !chartConfig.xCol)
+      return { chartData: [], pivotedByMetric: null, groupValues: null };
+    if (chartConfig.groupByCol) {
+      const { pivotedByMetric, groupValues } = buildPivotedData(
+        rows,
+        columns,
+        chartConfig.xCol,
+        chartConfig.groupByCol,
+        chartConfig.metricCols,
+      );
+      return {
+        chartData: pivotedByMetric[0].data,
+        pivotedByMetric,
+        groupValues,
+      };
+    }
+    return {
+      chartData: buildChartData(columns, rows, chartConfig.xCol),
+      pivotedByMetric: null,
+      groupValues: null,
+    };
+  }, [columns, rows, chartConfig]);
+
+  const canChart = rowCount > 0;
+
+  // Reset to table view if new results can't be charted
+  useEffect(() => {
+    if (!canChart && activeTab === 'chart') setActiveTab('table');
+  }, [canChart, activeTab]);
+
   return (
     <div className="results-view">
       {/* Header */}
@@ -100,9 +519,9 @@ export function ResultsView({
         </div>
       </div>
 
-      {/* Two-pane layout: SQL (top 1/3) + Results (bottom 2/3) */}
+      {/* Two-pane layout: SQL (top) + Results (bottom) */}
       <div className="results-panes">
-        {/* SQL Pane - always visible, top 1/3 */}
+        {/* SQL Pane */}
         <div className="sql-pane">
           <div className="sql-pane-header">
             <span className="sql-pane-title">SQL Query</span>
@@ -166,7 +585,7 @@ export function ResultsView({
           </div>
         </div>
 
-        {/* Results Pane - bottom 2/3 */}
+        {/* Results Pane */}
         <div className="results-pane">
           {loading ? (
             <div className="results-loading">
@@ -176,6 +595,21 @@ export function ResultsView({
                 Querying {selectedMetrics.length} metric(s) with{' '}
                 {selectedDimensions.length} dimension(s)
               </span>
+              {links && links.length > 0 && (
+                <span className="results-links">
+                  {links.map((link, idx) => (
+                    <a
+                      key={idx}
+                      href={link}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="results-link"
+                    >
+                      View query ↗
+                    </a>
+                  ))}
+                </span>
+              )}
             </div>
           ) : error ? (
             <div className="results-error">
@@ -191,85 +625,131 @@ export function ResultsView({
             </div>
           ) : (
             <div className="results-table-section">
-              <div className="table-header">
-                <span className="table-title">Results</span>
-                <span className="table-count">
-                  {rowCount.toLocaleString()} rows
-                </span>
-                {filters && filters.length > 0 && (
-                  <div className="table-filters">
-                    {filters.map((filter, idx) => (
-                      <span key={idx} className="filter-chip small">
-                        {filter}
-                      </span>
-                    ))}
-                  </div>
-                )}
+              {/* Tab bar */}
+              <div className="results-tabs-bar">
+                <div className="results-tabs">
+                  <button
+                    className={`results-tab ${
+                      activeTab === 'table' ? 'active' : ''
+                    }`}
+                    onClick={() => setActiveTab('table')}
+                  >
+                    Table
+                  </button>
+                  <button
+                    className={`results-tab ${
+                      activeTab === 'chart' ? 'active' : ''
+                    } ${!canChart ? 'disabled' : ''}`}
+                    onClick={() => canChart && setActiveTab('chart')}
+                    title={
+                      !canChart
+                        ? 'No chartable data (need at least one numeric column)'
+                        : undefined
+                    }
+                  >
+                    Chart
+                  </button>
+                </div>
+                <div className="results-tabs-meta">
+                  <span className="table-count">
+                    {rowCount.toLocaleString()} rows
+                  </span>
+                  {filters && filters.length > 0 && (
+                    <div className="table-filters">
+                      {filters.map((filter, idx) => (
+                        <span key={idx} className="filter-chip small">
+                          {filter}
+                        </span>
+                      ))}
+                    </div>
+                  )}
+                </div>
               </div>
-              <div className="results-table-wrapper">
-                {rowCount === 0 ? (
-                  <div className="table-empty">
-                    <p>No results returned</p>
-                  </div>
-                ) : (
-                  <table className="results-table">
-                    <thead>
-                      <tr>
-                        {columns.map((col, idx) => (
-                          <th
-                            key={idx}
-                            title={col.semantic_name || col.name}
-                            onClick={() => handleSort(idx)}
-                            className={sortColumn === idx ? 'sorted' : ''}
-                          >
-                            <span className="col-header-content">
-                              {col.name}
-                              <span className="sort-arrows">
-                                <span
-                                  className={`sort-arrow up ${
-                                    sortColumn === idx &&
-                                    sortDirection === 'asc'
-                                      ? 'active'
-                                      : ''
-                                  }`}
-                                >
-                                  ▲
-                                </span>
-                                <span
-                                  className={`sort-arrow down ${
-                                    sortColumn === idx &&
-                                    sortDirection === 'desc'
-                                      ? 'active'
-                                      : ''
-                                  }`}
-                                >
-                                  ▼
+
+              {/* Content */}
+              {activeTab === 'table' ? (
+                <div className="results-table-wrapper">
+                  {rowCount === 0 ? (
+                    <div className="table-empty">
+                      <p>No results returned</p>
+                    </div>
+                  ) : (
+                    <table className="results-table">
+                      <thead>
+                        <tr>
+                          {columns.map((col, idx) => (
+                            <th
+                              key={idx}
+                              title={col.semantic_name || col.name}
+                              onClick={() => handleSort(idx)}
+                              className={sortColumn === idx ? 'sorted' : ''}
+                            >
+                              <span className="col-header-content">
+                                {col.name}
+                                <span className="sort-arrows">
+                                  <span
+                                    className={`sort-arrow up ${
+                                      sortColumn === idx &&
+                                      sortDirection === 'asc'
+                                        ? 'active'
+                                        : ''
+                                    }`}
+                                  >
+                                    ▲
+                                  </span>
+                                  <span
+                                    className={`sort-arrow down ${
+                                      sortColumn === idx &&
+                                      sortDirection === 'desc'
+                                        ? 'active'
+                                        : ''
+                                    }`}
+                                  >
+                                    ▼
+                                  </span>
                                 </span>
                               </span>
-                            </span>
-                            <span className="col-type">{col.type}</span>
-                          </th>
-                        ))}
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {sortedRows.map((row, rowIdx) => (
-                        <tr key={rowIdx}>
-                          {row.map((cell, cellIdx) => (
-                            <td key={cellIdx}>
-                              {cell === null ? (
-                                <span className="null-value">NULL</span>
-                              ) : (
-                                String(cell)
-                              )}
-                            </td>
+                              <span className="col-type">{col.type}</span>
+                            </th>
                           ))}
                         </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                )}
-              </div>
+                      </thead>
+                      <tbody>
+                        {sortedRows.map((row, rowIdx) => (
+                          <tr key={rowIdx}>
+                            {row.map((cell, cellIdx) => (
+                              <td key={cellIdx}>
+                                {cell === null ? (
+                                  <span className="null-value">NULL</span>
+                                ) : (
+                                  String(cell)
+                                )}
+                              </td>
+                            ))}
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  )}
+                </div>
+              ) : (
+                <div className="results-chart-wrapper">
+                  {canChart ? (
+                    <ChartView
+                      chartConfig={chartConfig}
+                      chartData={chartData}
+                      pivotedByMetric={pivotedByMetric}
+                      groupValues={groupValues}
+                      rows={rows}
+                      columns={columns}
+                    />
+                  ) : (
+                    <div className="chart-no-data">
+                      No chartable data detected
+                    </div>
+                  )}
+                </div>
+              )}
             </div>
           )}
         </div>