orchid-ai 2.2.0 → 2.3.0

package/orchid-ai.css

@@ -860,39 +860,6 @@
   color: #1f2937;
 }
 
-.ai-chart-card-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 10px;
-}
-
-.ai-chart-card-header .ai-chart-title {
-  margin: 0;
-}
-
-.ai-chart-csv-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  flex-shrink: 0;
-  padding: 4px 10px;
-  font-size: 12px;
-  font-weight: 500;
-  color: #1eaaf1;
-  background: #ffffff;
-  border: 1px solid #d1d5db;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: background 0.15s, border-color 0.15s;
-}
-
-.ai-chart-csv-btn:hover {
-  background: #f0f9ff;
-  border-color: #1eaaf1;
-}
-
 .ai-chart-error {
   color: #b91c1c;
   background: #fef2f2;
@@ -954,6 +921,9 @@
   top: 8px;
   right: 8px;
   z-index: 12;
+  display: flex;
+  align-items: center;
+  gap: 6px;
 }
 
 .ai-chart-export-btn {
@@ -1012,6 +982,135 @@
   opacity: 0.65;
 }
 
+.ai-chart-export-menu-wrap {
+  position: relative;
+}
+
+.ai-chart-export-menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 13;
+  min-width: 172px;
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
+}
+
+.ai-chart-export-menu-item {
+  width: 100%;
+  padding: 8px 10px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: #1f2937;
+  font-size: 13px;
+  font-family: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.12s;
+}
+
+.ai-chart-export-menu-item:hover {
+  background: #f3f4f6;
+}
+
+/* ── Chart full-screen modal ── */
+.ai-chart-modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background: rgba(17, 24, 39, 0.55);
+}
+
+.ai-chart-modal {
+  display: flex;
+  flex-direction: column;
+  width: min(1100px, 96vw);
+  max-height: 92vh;
+  overflow: hidden;
+  background: #ffffff;
+  border-radius: 12px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+}
+
+.ai-chart-modal-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 18px;
+  border-bottom: 1px solid #e5e7eb;
+  flex: 0 0 auto;
+}
+
+.ai-chart-modal-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.ai-chart-modal-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.ai-chart-modal-close {
+  border: none;
+  background: transparent;
+  font-size: 24px;
+  line-height: 1;
+  color: #6b7280;
+  cursor: pointer;
+  padding: 0 4px;
+}
+
+.ai-chart-modal-close:hover {
+  color: #1f2937;
+}
+
+/* The body is a single flex scroll context so the table wrap is the only
+   scroller — avoids nested scrolling that let rows peek above the sticky header. */
+.ai-chart-modal-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 0 18px 18px;
+  overflow: hidden;
+}
+
+/* Card chrome (border/background/title) is redundant inside the modal */
+.ai-chart-modal-body .ai-chart-card {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+}
+
+.ai-chart-modal-body .ai-chart-title {
+  display: none;
+}
+
+.ai-chart-modal-body .ai-data-table-wrap {
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: none;
+}
+
 .ai-dot-chart-header {
   display: flex;
   justify-content: flex-start;
@@ -1217,11 +1316,14 @@
 
 .ai-data-table-wrap {
   overflow-x: auto;
+  overflow-y: auto;
+  max-height: 620px; /* ~20 rows + header; scrolls beyond, header stays pinned */
 }
 
 .ai-data-table {
   width: 100%;
-  border-collapse: collapse;
+  border-collapse: separate; /* not collapse: keeps the sticky header from leaking row slivers */
+  border-spacing: 0;
   font-size: 12px;
 }
 
@@ -1235,6 +1337,37 @@
   letter-spacing: 0.04em;
   border-bottom: 2px solid #e5e7eb;
   white-space: nowrap;
+  position: sticky;
+  top: -1px; /* close the sub-pixel gap so rows can't peek above the header */
+  z-index: 3;
+  background: #eef2f6;
+  background-clip: padding-box;
+}
+
+.ai-data-table-th--sortable {
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.ai-data-table-th--sortable:hover {
+  color: #1f2937;
+}
+
+.ai-data-table-th-inner {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.ai-data-table-sort {
+  font-size: 9px;
+  opacity: 0.4;
+}
+
+.ai-data-table-th.is-sorted .ai-data-table-sort {
+  opacity: 1;
+  color: #1eaaf1;
 }
 
 .ai-data-table-row:nth-child(even) .ai-data-table-td {
@@ -1248,6 +1381,18 @@
   vertical-align: top;
 }
 
+/* TOTAL / pinned rows live in <tfoot> and stick to the bottom like a footer.
+   At full scroll they sit naturally below the last row, so nothing is obscured. */
+.ai-data-table tfoot .ai-data-table-td {
+  position: sticky;
+  bottom: 0;
+  z-index: 2;
+  font-weight: 700;
+  color: #1f2937;
+  background: #e7edf3;
+  border-top: 2px solid #cbd5e1;
+}
+
 /* ── Bar Chart ── */
 
 .ai-bar-chart {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orchid-ai",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Shared Orchid AI chat UI and visualization components",
   "main": "src/index.js",
   "types": "src/index.d.ts",

package/src/components/visualizations/AiVisualization.jsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useRef, useState, useEffect } from "react";
 import html2canvas from "html2canvas";
 import {
   DOT_CHART_TYPE,
@@ -36,76 +36,195 @@ const COMPONENTS = {
   [SCATTER_PLOT_TYPE]: ScatterPlot,
 };
 
-function buildChartFilename(chart) {
-  const typePart = String(chart?.type || "chart").replace(/[^a-z0-9]+/gi, "-").replace(/^-+|-+$/g, "").toLowerCase();
-  const titlePart = String(chart?.title || "").replace(/[^a-z0-9]+/gi, "-").replace(/^-+|-+$/g, "").toLowerCase();
+const DOWNLOAD_ICON = (
+  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+    <polyline points="7 10 12 15 17 10" />
+    <line x1="12" y1="15" x2="12" y2="3" />
+  </svg>
+);
+
+const EXPAND_ICON = (
+  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <polyline points="15 3 21 3 21 9" />
+    <polyline points="9 21 3 21 3 15" />
+    <line x1="21" y1="3" x2="14" y2="10" />
+    <line x1="3" y1="21" x2="10" y2="14" />
+  </svg>
+);
+
+function slug(value) {
+  return String(value || "").replace(/[^a-z0-9]+/gi, "-").replace(/^-+|-+$/g, "").toLowerCase();
+}
+
+function buildChartFilename(chart, ext) {
+  const typePart = slug(chart?.type) || "chart";
+  const titlePart = slug(chart?.title);
   const datePart = new Date().toISOString().slice(0, 10);
   const base = titlePart ? `${typePart}-${titlePart}` : typePart;
-  return `${base || "chart"}-${datePart}.png`;
+  return `${base || "chart"}-${datePart}.${ext}`;
+}
+
+function csvEscape(value) {
+  const s = (value ?? "").toString();
+  return /[",\n\r]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
+}
+
+function tableToCsv(chart) {
+  const columns = chart.columns || [];
+  const rows = chart.rows || [];
+  const header = columns.map((c) => csvEscape(c.label)).join(",");
+  const body = rows.map((row) => columns.map((c) => csvEscape(row[c.key])).join(",")).join("\r\n");
+  return `${header}\r\n${body}`;
+}
+
+function triggerDownload(href, filename) {
+  const link = document.createElement("a");
+  link.href = href;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
+// Download control: a single PNG button for non-tables, a CSV/Image menu for tables.
+function DownloadMenu({ supportsCsv, isDownloading, onCsv, onImage }) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (!open) return undefined;
+    const onDocMouseDown = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
+    document.addEventListener("mousedown", onDocMouseDown);
+    return () => document.removeEventListener("mousedown", onDocMouseDown);
+  }, [open]);
+
+  if (!supportsCsv) {
+    return (
+      <button type="button" className="ai-chart-export-btn" onClick={onImage} disabled={isDownloading} title="Save chart as PNG" aria-label="Save chart as PNG">
+        {DOWNLOAD_ICON}
+        <span className="ai-chart-export-label">Download</span>
+      </button>
+    );
+  }
+
+  return (
+    <div className="ai-chart-export-menu-wrap" ref={ref}>
+      <button type="button" className="ai-chart-export-btn" onClick={() => setOpen((o) => !o)} disabled={isDownloading} aria-haspopup="menu" aria-expanded={open} title="Download" aria-label="Download">
+        {DOWNLOAD_ICON}
+        <span className="ai-chart-export-label">Download</span>
+      </button>
+      {open && (
+        <div className="ai-chart-export-menu" role="menu">
+          <button type="button" role="menuitem" className="ai-chart-export-menu-item" onClick={() => { setOpen(false); onCsv(); }}>CSV (spreadsheet)</button>
+          <button type="button" role="menuitem" className="ai-chart-export-menu-item" onClick={() => { setOpen(false); onImage(); }}>Image (PNG)</button>
+        </div>
+      )}
+    </div>
+  );
 }
 
 export default function AiVisualization({ chart }) {
   const chartRef = useRef(null);
+  const modalBodyRef = useRef(null);
   const [isDownloading, setIsDownloading] = useState(false);
+  const [expanded, setExpanded] = useState(false);
+
+  useEffect(() => {
+    if (!expanded) return undefined;
+    const onKeyDown = (e) => { if (e.key === "Escape") setExpanded(false); };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [expanded]);
 
   if (!chart || !chart.type) {
     return null;
   }
 
   const Component = COMPONENTS[chart.type];
-  const handleDownload = async () => {
-    if (!chartRef.current || isDownloading) {
-      return;
-    }
+  const isTable = chart.type === TABLE_TYPE && Array.isArray(chart.columns) && Array.isArray(chart.rows);
+  const supportsCsv = isTable;
+  const canExpand = isTable && chart.rows.length > 10;
 
+  const downloadImage = async (targetRef) => {
+    const node = (targetRef && targetRef.current) || chartRef.current;
+    if (!node || isDownloading) return;
     setIsDownloading(true);
     try {
-      const canvas = await html2canvas(chartRef.current, {
-        backgroundColor: null,
+      const canvas = await html2canvas(node, {
+        backgroundColor: "#ffffff",
         useCORS: true,
         scale: Math.max(window.devicePixelRatio || 1, 2),
       });
-      const url = canvas.toDataURL("image/png");
-      const link = document.createElement("a");
-      link.href = url;
-      link.download = buildChartFilename(chart);
-      link.click();
+      triggerDownload(canvas.toDataURL("image/png"), buildChartFilename(chart, "png"));
     } finally {
       setIsDownloading(false);
     }
   };
 
-  if (Component) {
+  const downloadCsv = () => {
+    const blob = new Blob([`${tableToCsv(chart)}`], { type: "text/csv;charset=utf-8;" });
+    const url = URL.createObjectURL(blob);
+    triggerDownload(url, buildChartFilename(chart, "csv"));
+    setTimeout(() => URL.revokeObjectURL(url), 0);
+  };
+
+  if (!Component) {
     return (
-      <div className="ai-chart-export-wrap">
-        <div className="ai-chart-export-actions">
+      <div className="ai-chart-card ai-chart-error">
+        <p>Unsupported chart type: {chart.type}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="ai-chart-export-wrap">
+      <div className="ai-chart-export-actions">
+        {canExpand && (
           <button
             type="button"
             className="ai-chart-export-btn"
-            onClick={handleDownload}
-            disabled={isDownloading}
-            title="Save chart as PNG"
-            aria-label="Save chart as PNG"
+            onClick={() => setExpanded(true)}
+            title="Expand to full screen"
+            aria-label="Expand table to full screen"
           >
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-              <polyline points="7 10 12 15 17 10" />
-              <line x1="12" y1="15" x2="12" y2="3" />
-            </svg>
-            <span className="ai-chart-export-label">{isDownloading ? "Saving..." : "Download"}</span>
+            {EXPAND_ICON}
+            <span className="ai-chart-export-label">Expand</span>
           </button>
-        </div>
-        <div className="ai-chart-export-target" ref={chartRef}>
-          <Component chart={chart} />
-        </div>
+        )}
+        <DownloadMenu
+          supportsCsv={supportsCsv}
+          isDownloading={isDownloading}
+          onCsv={downloadCsv}
+          onImage={() => downloadImage(chartRef)}
+        />
       </div>
-    );
-  }
 
-  return (
-    <div className="ai-chart-card ai-chart-error">
-      <p>Unsupported chart type: {chart.type}</p>
+      <div className="ai-chart-export-target" ref={chartRef}>
+        <Component chart={chart} />
+      </div>
+
+      {expanded && (
+        <div className="ai-chart-modal-overlay" onClick={(e) => { if (e.target === e.currentTarget) setExpanded(false); }}>
+          <div className="ai-chart-modal" role="dialog" aria-modal="true">
+            <div className="ai-chart-modal-head">
+              <span className="ai-chart-modal-title">{chart.title || "Table"}</span>
+              <div className="ai-chart-modal-actions">
+                <DownloadMenu
+                  supportsCsv={supportsCsv}
+                  isDownloading={isDownloading}
+                  onCsv={downloadCsv}
+                  onImage={() => downloadImage(modalBodyRef)}
+                />
+                <button type="button" className="ai-chart-modal-close" onClick={() => setExpanded(false)} aria-label="Close">×</button>
+              </div>
+            </div>
+            <div className="ai-chart-modal-body" ref={modalBodyRef}>
+              <Component chart={chart} />
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }
-

package/src/components/visualizations/DataTable.jsx

@@ -1,69 +1,78 @@
-import React from "react";
+import React, { useState, useMemo } from "react";
 
-function csvEscape(value) {
-  const s = (value ?? "").toString();
-  return /[",\n\r]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
-}
-
-function buildCsv(columns, rows) {
-  const header = columns.map((c) => csvEscape(c.label)).join(",");
-  const body = rows.map((row) => columns.map((c) => csvEscape(row[c.key])).join(",")).join("\r\n");
-  return `${header}\r\n${body}`;
-}
-
-function downloadCsv(filename, csv) {
-  // Prepend a BOM so Excel reads UTF-8 correctly.
-  const blob = new Blob([`${csv}`], { type: "text/csv;charset=utf-8;" });
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement("a");
-  a.href = url;
-  a.download = filename;
-  document.body.appendChild(a);
-  a.click();
-  document.body.removeChild(a);
-  setTimeout(() => URL.revokeObjectURL(url), 0);
-}
-
-function safeFilename(title) {
-  const base = (title || "table").replace(/[\\/:*?"<>|]+/g, "").trim().slice(0, 80);
-  return `${base || "table"}.csv`;
+// Compare two cell values numerically when both look numeric, else as text.
+function compareValues(a, b) {
+  const na = parseFloat(String(a ?? "").replace(/[, ]/g, ""));
+  const nb = parseFloat(String(b ?? "").replace(/[, ]/g, ""));
+  const aNum = String(a ?? "").trim() !== "" && !Number.isNaN(na);
+  const bNum = String(b ?? "").trim() !== "" && !Number.isNaN(nb);
+  if (aNum && bNum) return na - nb;
+  return String(a ?? "").localeCompare(String(b ?? ""), undefined, { numeric: true, sensitivity: "base" });
 }
 
 export default function DataTable({ chart }) {
   const { title, columns, rows } = chart;
+  const [sortKey, setSortKey] = useState(null);
+  const [sortDir, setSortDir] = useState("asc");
+
+  // Rows flagged `_pinned` (e.g. a TOTAL row) render in a sticky <tfoot> so they
+  // stay visible like a footer; the rest sort within the <tbody>.
+  const { bodyRows, footRows } = useMemo(() => {
+    const pinned = rows.filter((r) => r && r._pinned);
+    const sortable = rows.filter((r) => !(r && r._pinned));
+    const sorted = sortKey
+      ? [...sortable].sort((a, b) => {
+          const cmp = compareValues(a?.[sortKey], b?.[sortKey]);
+          return sortDir === "asc" ? cmp : -cmp;
+        })
+      : sortable;
+    return { bodyRows: sorted, footRows: pinned };
+  }, [rows, sortKey, sortDir]);
 
-  const handleDownload = () => downloadCsv(safeFilename(title), buildCsv(columns, rows));
+  // Cycle: unsorted -> ascending -> descending -> unsorted.
+  const handleSort = (key) => {
+    if (sortKey !== key) {
+      setSortKey(key);
+      setSortDir("asc");
+    } else if (sortDir === "asc") {
+      setSortDir("desc");
+    } else {
+      setSortKey(null);
+      setSortDir("asc");
+    }
+  };
 
   return (
     <div className="ai-chart-card">
-      <div className="ai-chart-card-header">
-        {title ? <h4 className="ai-chart-title">{title}</h4> : <span />}
-        <button
-          type="button"
-          className="ai-chart-csv-btn"
-          onClick={handleDownload}
-          title="Download as CSV"
-          aria-label="Download table as CSV"
-        >
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-            <polyline points="7 10 12 15 17 10" />
-            <line x1="12" y1="15" x2="12" y2="3" />
-          </svg>
-          CSV
-        </button>
-      </div>
+      {title ? <h4 className="ai-chart-title">{title}</h4> : null}
       <div className="ai-data-table-wrap">
         <table className="ai-data-table">
           <thead>
             <tr>
-              {columns.map((col) => (
-                <th key={col.key} className="ai-data-table-th">{col.label}</th>
-              ))}
+              {columns.map((col) => {
+                const active = sortKey === col.key;
+                return (
+                  <th
+                    key={col.key}
+                    className={`ai-data-table-th ai-data-table-th--sortable${active ? " is-sorted" : ""}`}
+                    onClick={() => handleSort(col.key)}
+                    role="button"
+                    tabIndex={0}
+                    onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); handleSort(col.key); } }}
+                    aria-sort={active ? (sortDir === "asc" ? "ascending" : "descending") : "none"}
+                    title={`Sort by ${col.label}`}
+                  >
+                    <span className="ai-data-table-th-inner">
+                      <span>{col.label}</span>
+                      <span className="ai-data-table-sort" aria-hidden="true">{active ? (sortDir === "asc" ? "▲" : "▼") : "↕"}</span>
+                    </span>
+                  </th>
+                );
+              })}
             </tr>
           </thead>
           <tbody>
-            {rows.map((row, i) => (
+            {bodyRows.map((row, i) => (
               <tr key={i} className="ai-data-table-row">
                 {columns.map((col) => (
                   <td key={col.key} className="ai-data-table-td">{row[col.key]}</td>
@@ -71,6 +80,17 @@ export default function DataTable({ chart }) {
               </tr>
             ))}
           </tbody>
+          {footRows.length > 0 && (
+            <tfoot>
+              {footRows.map((row, i) => (
+                <tr key={i} className="ai-data-table-row ai-data-table-row--pinned">
+                  {columns.map((col) => (
+                    <td key={col.key} className="ai-data-table-td">{row[col.key]}</td>
+                  ))}
+                </tr>
+              ))}
+            </tfoot>
+          )}
         </table>
       </div>
     </div>