@seqyuan/annodex 0.1.11 → 0.1.12

package/components/DataTableViewer.tsx

@@ -0,0 +1,248 @@
+"use client";
+
+import { useMemo, useState } from "react";
+
+interface Props {
+  content: string;
+  delimiter: "," | "\t";
+  fileName?: string;
+}
+
+type SortDir = "asc" | "desc";
+type Row = string[];
+
+function parseDelimited(content: string, delimiter: "," | "\t"): { header: string[]; rows: Row[] } {
+  const normalizedContent = content.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
+  const parsed: string[][] = [];
+  let row: string[] = [];
+  let cell = "";
+  let inQuotes = false;
+
+  for (let i = 0; i < normalizedContent.length; i += 1) {
+    const ch = normalizedContent[i];
+    if (ch === "\"") {
+      if (inQuotes && normalizedContent[i + 1] === "\"") {
+        cell += "\"";
+        i += 1;
+      } else {
+        inQuotes = !inQuotes;
+      }
+      continue;
+    }
+    if (ch === delimiter && !inQuotes) {
+      row.push(cell);
+      cell = "";
+      continue;
+    }
+    if (ch === "\n" && !inQuotes) {
+      row.push(cell);
+      if (row.some((value) => value.length > 0)) parsed.push(row);
+      row = [];
+      cell = "";
+      continue;
+    }
+    cell += ch;
+  }
+
+  row.push(cell);
+  if (row.some((value) => value.length > 0)) parsed.push(row);
+
+  const header = parsed[0] ?? [];
+  const width = header.length;
+  const rows = parsed.slice(1).map((row) => {
+    const normalized = [...row];
+    while (normalized.length < width) normalized.push("");
+    return normalized.slice(0, width);
+  });
+
+  return { header, rows };
+}
+
+function SortIndicator({ dir }: { dir: SortDir }) {
+  return (
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      {dir === "asc" ? <polyline points="2 6 5 3 8 6" /> : <polyline points="2 4 5 7 8 4" />}
+    </svg>
+  );
+}
+
+function stringifyCell(value: string): string {
+  return value ?? "";
+}
+
+function downloadText(text: string, fileName: string, mime: string) {
+  const blob = new Blob([text], { type: mime });
+  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), 1000);
+}
+
+export function DataTableViewer({ content, delimiter, fileName = "table" }: Props) {
+  const [sortKey, setSortKey] = useState<number | null>(null);
+  const [sortDir, setSortDir] = useState<SortDir>("asc");
+
+  const { header, rows } = useMemo(() => parseDelimited(content, delimiter), [content, delimiter]);
+
+  const sortedRows = useMemo(() => {
+    if (sortKey === null) return rows;
+    const copy = [...rows];
+    copy.sort((a, b) => {
+      const av = stringifyCell(a[sortKey]);
+      const bv = stringifyCell(b[sortKey]);
+      const an = Number(av);
+      const bn = Number(bv);
+      const isNumeric = av !== "" && bv !== "" && !Number.isNaN(an) && !Number.isNaN(bn);
+      const cmp = isNumeric ? an - bn : av.localeCompare(bv);
+      return sortDir === "asc" ? cmp : -cmp;
+    });
+    return copy;
+  }, [rows, sortDir, sortKey]);
+
+  const toggleSort = (index: number) => {
+    if (sortKey === index) {
+      setSortDir((dir) => (dir === "asc" ? "desc" : "asc"));
+      return;
+    }
+    setSortKey(index);
+    setSortDir("asc");
+  };
+
+  const exportCsv = () => {
+    downloadText(content, fileName, delimiter === "\t" ? "text/tab-separated-values;charset=utf-8" : "text/csv;charset=utf-8");
+  };
+
+  const exportJson = () => {
+    const data = sortedRows.map((row) =>
+      Object.fromEntries(header.map((col, idx) => [col || `column_${idx + 1}`, row[idx] ?? ""]))
+    );
+    downloadText(JSON.stringify(data, null, 2), fileName.replace(/\.[^.]+$/, "") + ".json", "application/json;charset=utf-8");
+  };
+
+  if (header.length === 0 && rows.length === 0) {
+    return (
+      <div style={{ height: "100%", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--text-muted)", fontSize: 13 }}>
+        No tabular data to display
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", height: "100%", overflow: "hidden" }}>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: 8,
+          padding: "8px 12px",
+          borderBottom: "1px solid var(--border)",
+          background: "var(--bg-panel)",
+          flexShrink: 0,
+        }}
+      >
+        <div style={{ fontSize: 11, color: "var(--text-dim)" }}>
+          {rows.length} rows, {header.length} columns
+        </div>
+        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+          <button
+            onClick={exportCsv}
+            style={{
+              padding: "2px 8px",
+              fontSize: 11,
+              cursor: "pointer",
+              background: "var(--bg-hover)",
+              color: "var(--text-muted)",
+              border: "1px solid var(--border)",
+              borderRadius: 5,
+            }}
+          >
+            Export {delimiter === "\t" ? "TSV" : "CSV"}
+          </button>
+          <button
+            onClick={exportJson}
+            style={{
+              padding: "2px 8px",
+              fontSize: 11,
+              cursor: "pointer",
+              background: "var(--bg-hover)",
+              color: "var(--text-muted)",
+              border: "1px solid var(--border)",
+              borderRadius: 5,
+            }}
+          >
+            Export JSON
+          </button>
+        </div>
+      </div>
+      <div style={{ minHeight: 0, flex: 1, overflow: "auto", background: "var(--bg)" }}>
+        <table style={{ width: "100%", borderCollapse: "collapse", tableLayout: "fixed", fontSize: 12 }}>
+          <thead style={{ position: "sticky", top: 0, zIndex: 1, background: "var(--bg-panel)" }}>
+            <tr>
+              {header.map((col, index) => (
+                <th
+                  key={`${col}-${index}`}
+                  onClick={() => toggleSort(index)}
+                  title={col}
+                  style={{
+                    padding: "8px 10px",
+                    borderBottom: "1px solid var(--border)",
+                    textAlign: "left",
+                    color: "var(--text-muted)",
+                    fontWeight: 600,
+                    cursor: "pointer",
+                    userSelect: "none",
+                    fontSize: 11,
+                    whiteSpace: "nowrap",
+                  }}
+                >
+                  <span style={{ display: "inline-flex", alignItems: "center", gap: 6, minWidth: 0 }}>
+                    <span style={{ overflow: "hidden", textOverflow: "ellipsis" }}>{col || `column_${index + 1}`}</span>
+                    {sortKey === index && (
+                      <span style={{ color: "var(--accent)", display: "inline-flex", flexShrink: 0 }}>
+                        <SortIndicator dir={sortDir} />
+                      </span>
+                    )}
+                  </span>
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {sortedRows.map((row, rowIndex) => (
+              <tr
+                key={rowIndex}
+                style={{
+                  borderBottom: "1px solid rgba(127,127,127,0.14)",
+                  background: rowIndex % 2 === 1 ? "var(--bg-subtle)" : "transparent",
+                }}
+              >
+                {header.map((col, colIndex) => (
+                  <td
+                    key={`${col}-${rowIndex}-${colIndex}`}
+                    title={row[colIndex] ?? ""}
+                    style={{
+                      padding: "6px 10px",
+                      color: "var(--text)",
+                      fontFamily: "var(--font-mono)",
+                      whiteSpace: "nowrap",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      maxWidth: 0,
+                    }}
+                  >
+                    {row[colIndex] ?? ""}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}