@profullstack/readm3 0.20.0 → 0.24.0

package/dist/viewer.js

@@ -5,11 +5,16 @@
  * `markdown.ts`; editing shows the same buffer raw, with a caret. Both read the
  * same text, so leaving edit mode is all it takes to see the change rendered —
  * there is no separate preview to keep in step.
+ *
+ * A CSV or TSV reads as a grid instead (src/csv.ts parses it, hqtui's data grid
+ * draws it): a cell cursor, sort by column, a row filter, a row sheet and column
+ * statistics, the way tabiew does it. Editing it is the same raw editor.
  */
 import { readFileSync, statSync, writeFileSync } from "node:fs";
 import { basename, dirname, resolve } from "node:path";
 import { createApp, stringWidth } from "@profullstack/hqtui";
 import { backspace, breakRun, createEditor, del, indent, insert, killToLineEnd, killToLineStart, markSaved, moveDocEnd, moveDocStart, moveDown, moveEnd, moveHome, moveLeft, moveRight, moveUp, moveVertical, moveWordLeft, moveWordRight, newline, redo, text as bufferText, undo, } from "./editor.js";
+import { alignOf, columnStats, delimiterName, displayCell, isTableName, nextSort, parseTable, statsRows, viewRows, } from "./csv.js";
 import { DEFAULT_FLAVOR } from "./flavors.js";
 import { renderMarkdown } from "./markdown.js";
 import { colorOf } from "./roles.js";
@@ -50,6 +55,24 @@ export async function run(options) {
     let scroll = 0;
     /** Bumped on every edit, so the rendered document is rebuilt exactly then. */
     let stamp = 0;
+    // ---- the table view, for a CSV or TSV
+    /** The open file parsed, rebuilt when the text changes. */
+    let grid = null;
+    /** Row indices shown: filtered, then sorted. */
+    let gridRows = [];
+    let gridKey = "";
+    let rowFilter = "";
+    let rowFiltering = false;
+    let sort = null;
+    let cursor = { row: 0, col: 0 };
+    let gridOffset = { row: 0, col: 0 };
+    /** Body rows that fit, as the grid last measured them; page keys move by this. */
+    let gridPage = 10;
+    /** Show the table's text rather than the grid. */
+    let rawTable = false;
+    /** The cursor row as a sheet, or the cursor column's statistics. */
+    let sheet = false;
+    let stats = false;
     /** A yes/no the next keypress answers. */
     let pending = null;
     let sidebar = options.sidebar ?? 0;
@@ -83,6 +106,14 @@ export async function run(options) {
             buffer = createEditor(readFileSync(path, "utf8"));
             openPath = path;
             doc = null;
+            grid = null;
+            gridKey = "";
+            rowFilter = "";
+            rowFiltering = false;
+            sort = null;
+            cursor = { row: 0, col: 0 };
+            gridOffset = { row: 0, col: 0 };
+            rawTable = false;
             scroll = 0;
             editTop = 0;
             editLeft = 0;
@@ -125,6 +156,105 @@ export async function run(options) {
         breakRun(buffer);
     };
     const maxScroll = () => Math.max(0, (doc?.lines.length ?? 0) - viewport.h);
+    /** Whether the open file is drawn as a grid right now. */
+    const tableMode = () => !!openPath && isTableName(openPath) && !rawTable && mode === "read";
+    const currentTable = () => {
+        if (!openPath || !buffer || !isTableName(openPath))
+            return null;
+        if (!grid || grid.stamp !== stamp || grid.path !== openPath) {
+            grid = { stamp, path: openPath, table: parseTable(bufferText(buffer), { name: openPath }) };
+            gridKey = "";
+        }
+        return grid.table;
+    };
+    /** The rows shown, recomputed only when the text, the filter or the sort changed. */
+    const shownRows = () => {
+        const table = currentTable();
+        if (!table)
+            return [];
+        const key = JSON.stringify([grid?.stamp, openPath, rowFilter, sort]);
+        if (key !== gridKey) {
+            gridRows = viewRows(table, { filter: rowFilter, sort });
+            gridKey = key;
+        }
+        cursor.row = clamp(cursor.row, 0, Math.max(0, gridRows.length - 1));
+        cursor.col = clamp(cursor.col, 0, Math.max(0, table.columns.length - 1));
+        return gridRows;
+    };
+    /** The table's text inside a fence, so `v` shows it raw through the same renderer. */
+    const fenced = (text) => {
+        const longest = Math.max(2, ...(text.match(/`+/g) ?? []).map((run) => run.length));
+        const fence = "`".repeat(longest + 1);
+        return `${fence}csv\n${text}${text.endsWith("\n") ? "" : "\n"}${fence}\n`;
+    };
+    /** Keys while the grid has focus. */
+    const tableKey = (key) => {
+        const rows = shownRows();
+        const table = currentTable();
+        if (!table)
+            return;
+        const last = Math.max(0, rows.length - 1);
+        const page = Math.max(1, gridPage - 1);
+        switch (key) {
+            case "up":
+            case "k":
+                cursor.row = clamp(cursor.row - 1, 0, last);
+                return;
+            case "down":
+            case "j":
+                cursor.row = clamp(cursor.row + 1, 0, last);
+                return;
+            case "pageup":
+            case "b":
+                cursor.row = clamp(cursor.row - page, 0, last);
+                return;
+            case "pagedown":
+            case "space":
+                cursor.row = clamp(cursor.row + page, 0, last);
+                return;
+            case "home":
+            case "g":
+                cursor.row = 0;
+                return;
+            case "end":
+            case "G":
+            case "shift+g":
+                cursor.row = last;
+                return;
+            case "right":
+            case "l":
+                cursor.col = clamp(cursor.col + 1, 0, table.columns.length - 1);
+                return;
+            case "left":
+            case "h":
+                if (cursor.col === 0)
+                    pane = "tree";
+                else
+                    cursor.col--;
+                return;
+            case "0":
+            case "^":
+                cursor.col = 0;
+                return;
+            case "$":
+                cursor.col = table.columns.length - 1;
+                return;
+            case "o":
+                // A new order is read from its top, as in a spreadsheet.
+                sort = nextSort(sort, cursor.col);
+                cursor.row = 0;
+                return;
+            case "enter":
+                if (rows.length)
+                    sheet = true;
+                return;
+            case "c":
+                stats = true;
+                return;
+            default:
+                return;
+        }
+    };
     const moveSelection = (delta) => {
         if (flat.length === 0)
             return;
@@ -277,8 +407,10 @@ export async function run(options) {
             app.invalidate();
             return;
         }
-        if (help) {
+        if (help || sheet || stats) {
             help = false;
+            sheet = false;
+            stats = false;
             app.invalidate();
             return;
         }
@@ -287,6 +419,27 @@ export async function run(options) {
             app.invalidate();
             return;
         }
+        if (rowFiltering) {
+            if (key === "escape") {
+                rowFiltering = false;
+                rowFilter = "";
+            }
+            else if (name === "enter") {
+                rowFiltering = false;
+            }
+            else if (name === "backspace") {
+                rowFilter = rowFilter.slice(0, -1);
+            }
+            else if (name === "up" || name === "down") {
+                tableKey(name);
+            }
+            else if (char && !event.ctrl && !event.alt) {
+                rowFilter += char;
+                cursor.row = 0;
+            }
+            app.invalidate();
+            return;
+        }
         if (filtering) {
             if (key === "escape") {
                 filtering = false;
@@ -358,8 +511,21 @@ export async function run(options) {
                 return;
             }
             case "/":
-                filtering = true;
-                pane = "tree";
+                // Over a grid, `/` filters its rows; anywhere else, the file list.
+                if (pane === "view" && tableMode())
+                    rowFiltering = true;
+                else {
+                    filtering = true;
+                    pane = "tree";
+                }
+                app.invalidate();
+                return;
+            case "v":
+                if (openPath && isTableName(openPath)) {
+                    rawTable = !rawTable;
+                    doc = null;
+                    pane = "view";
+                }
                 app.invalidate();
                 return;
             case "[":
@@ -371,7 +537,10 @@ export async function run(options) {
                 app.invalidate();
                 return;
             case "escape":
-                if (filter) {
+                if (pane === "view" && tableMode() && rowFilter) {
+                    rowFilter = "";
+                }
+                else if (filter) {
                     filter = "";
                     rebuild(openPath);
                 }
@@ -437,6 +606,11 @@ export async function run(options) {
             app.invalidate();
             return;
         }
+        if (tableMode()) {
+            tableKey(key);
+            app.invalidate();
+            return;
+        }
         const page = Math.max(1, viewport.h - 2);
         switch (key) {
             case "up":
@@ -480,6 +654,9 @@ export async function run(options) {
         const openRel = openPath ? pathLabel(root, openPath) : "";
         const total = doc?.lines.length ?? 0;
         const percent = total <= viewport.h ? 100 : Math.round((Math.min(scroll + viewport.h, total) / total) * 100);
+        const gridding = tableMode();
+        const table = gridding ? currentTable() : null;
+        const rows = gridding ? shownRows() : [];
         ui.column({}, (screen) => {
             screen.row({ size: "fill" }, (panes) => {
                 // ------------------------------------------------------- browser
@@ -499,7 +676,7 @@ export async function run(options) {
                         treeOffset = selected - capacity + 1;
                     treeOffset = clamp(treeOffset, 0, Math.max(0, flat.length - capacity));
                     if (flat.length === 0) {
-                        p.text(filter ? "No match." : "No markdown here.", { fg: theme.muted });
+                        p.text(filter ? "No match." : "No markdown or CSV here.", { fg: theme.muted });
                         return;
                     }
                     p.list({
@@ -540,12 +717,22 @@ export async function run(options) {
                 panes.panel({
                     title: openRel ? ` ${dirty() ? "● " : ""}${openRel} ` : " readm3 ",
                     titleColor: editing ? theme.warning : theme.title,
-                    subtitle: openPath ? (editing ? "EDIT" : `${percent}%`) : undefined,
+                    subtitle: openPath
+                        ? editing
+                            ? "EDIT"
+                            : table
+                                ? `${rows.length === table.rows.length ? "" : `${rows.length.toLocaleString()} of `}${table.rows.length.toLocaleString()} rows · ${table.columns.length} cols · ${delimiterName(table.delimiter)}`
+                                : `${percent}%`
+                        : undefined,
                     footer: openPath && editing && buffer
                         ? `${buffer.row + 1}:${buffer.col + 1}`
-                        : openPath && total > 0
-                            ? `${Math.min(scroll + viewport.h, total)}/${total}`
-                            : undefined,
+                        : table
+                            ? rows.length
+                                ? `${cursor.row + 1}/${rows.length} · ${table.columns[cursor.col]?.name ?? ""}`
+                                : "no rows"
+                            : openPath && total > 0
+                                ? `${Math.min(scroll + viewport.h, total)}/${total}`
+                                : undefined,
                     borderColor: editing ? theme.warning : pane === "view" ? theme.borderFocused : theme.border,
                     padding: [0, 1],
                 }, (p) => {
@@ -581,13 +768,62 @@ export async function run(options) {
                         drawEditor(p, buffer, theme, w, h);
                         return;
                     }
+                    if (table) {
+                        if (rowFiltering || rowFilter) {
+                            p.row({ height: 1 }, (r) => {
+                                r.text(`/${rowFilter}${rowFiltering ? "▏" : ""}`, { width: stringWidth(rowFilter) + 2, fg: theme.warning });
+                                r.text(rowFiltering ? "  col:text  col>n  col=v  !term" : "  esc clears", { fg: theme.muted });
+                            });
+                        }
+                        if (table.columns.length === 0) {
+                            p.text("This file has no rows.", { fg: theme.muted });
+                            return;
+                        }
+                        p.dataGrid({
+                            columns: table.columns.map((column) => ({ title: column.name, align: alignOf(column.type) })),
+                            rows: table.rows,
+                            order: rows,
+                            selectedRow: rows.length ? cursor.row : -1,
+                            selectedColumn: cursor.col,
+                            rowOffset: gridOffset.row,
+                            columnOffset: gridOffset.col,
+                            sort,
+                            zebra: true,
+                            scrollbar: true,
+                            onLayout: (frame) => {
+                                gridOffset = { row: frame.rowOffset, col: frame.columnOffset };
+                                gridPage = Math.max(1, frame.capacity);
+                            },
+                            onScroll: (delta) => {
+                                cursor.row = clamp(cursor.row + delta * 3, 0, Math.max(0, rows.length - 1));
+                                pane = "view";
+                                app.invalidate();
+                            },
+                            onSelectCell: (row, column) => {
+                                cursor = { row, col: column >= 0 ? column : cursor.col };
+                                pane = "view";
+                                app.invalidate();
+                            },
+                            onActivateCell: () => {
+                                sheet = true;
+                                app.invalidate();
+                            },
+                            onHeaderClick: (column) => {
+                                cursor.col = column;
+                                tableKey("o");
+                                pane = "view";
+                                app.invalidate();
+                            },
+                        });
+                        return;
+                    }
                     if (!doc || doc.path !== openPath || doc.width !== w || doc.stamp !== stamp || doc.spoilers !== spoilers) {
                         doc = {
                             path: openPath,
                             width: w,
                             stamp,
                             spoilers,
-                            lines: renderMarkdown(bufferText(buffer), w, { flavor, spoilers }),
+                            lines: renderMarkdown(isTableName(openPath) ? fenced(bufferText(buffer)) : bufferText(buffer), w, { flavor, spoilers }),
                         };
                     }
                     scroll = clamp(scroll, 0, Math.max(0, doc.lines.length - h));
@@ -634,31 +870,49 @@ export async function run(options) {
                         { key: "^k", label: "kill" },
                         { key: "^g", label: "keys" },
                     ]
-                    : filtering
+                    : rowFiltering
                         ? [
-                            { key: "type", label: "filter" },
-                            { key: "↵", label: "open" },
+                            { key: "type", label: "filter rows" },
+                            { key: "↵", label: "keep" },
                             { key: "esc", label: "clear" },
                         ]
-                        : pane === "tree"
+                        : filtering
                             ? [
-                                { key: "↑↓", label: "move" },
+                                { key: "type", label: "filter" },
                                 { key: "↵", label: "open" },
-                                { key: "←→", label: "fold" },
-                                { key: "/", label: "find" },
-                                { key: "tab", label: "reader" },
-                                { key: "?", label: "keys" },
-                                { key: "q", label: "quit" },
+                                { key: "esc", label: "clear" },
                             ]
-                            : [
-                                { key: "↑↓", label: "scroll" },
-                                { key: "spc", label: "page" },
-                                { key: "e", label: "edit" },
-                                { key: "g/G", label: "ends" },
-                                { key: "tab", label: "files" },
-                                { key: "?", label: "keys" },
-                                { key: "q", label: "quit" },
-                            ],
+                            : pane === "view" && gridding
+                                ? [
+                                    { key: "←↑↓→", label: "move" },
+                                    { key: "o", label: "sort" },
+                                    { key: "/", label: "filter" },
+                                    { key: "↵", label: "row" },
+                                    { key: "c", label: "stats" },
+                                    { key: "v", label: "text" },
+                                    { key: "e", label: "edit" },
+                                    { key: "?", label: "keys" },
+                                    { key: "q", label: "quit" },
+                                ]
+                                : pane === "tree"
+                                    ? [
+                                        { key: "↑↓", label: "move" },
+                                        { key: "↵", label: "open" },
+                                        { key: "←→", label: "fold" },
+                                        { key: "/", label: "find" },
+                                        { key: "tab", label: "reader" },
+                                        { key: "?", label: "keys" },
+                                        { key: "q", label: "quit" },
+                                    ]
+                                    : [
+                                        { key: "↑↓", label: "scroll" },
+                                        { key: "spc", label: "page" },
+                                        { key: "e", label: "edit" },
+                                        { key: "g/G", label: "ends" },
+                                        { key: "tab", label: "files" },
+                                        { key: "?", label: "keys" },
+                                        { key: "q", label: "quit" },
+                                    ],
                 right: [
                     { label: openPath ? (dirname(openRel) === "." ? basename(root) : dirname(openRel)) : basename(root) },
                     { label: flavor, color: theme.muted },
@@ -674,38 +928,74 @@ export async function run(options) {
                     m.spacer("fill");
                 });
             }
+            else if (sheet && table && rows.length) {
+                const record = table.rows[rows[cursor.row]] ?? [];
+                const height = clamp(table.columns.length + 6, 8, Math.max(8, app.height - 2));
+                const labelWidth = clamp(Math.max(...table.columns.map((c) => stringWidth(c.name))) + 2, 8, 28);
+                const valueWidth = Math.max(...record.map((cell) => stringWidth(displayCell(cell))), 12);
+                // As wide as the row needs, so a short value sits beside its name, not across the screen.
+                const width = clamp(labelWidth + valueWidth + 6, 40, Math.max(40, app.width - 8));
+                screen.modal({ title: ` row ${(rows[cursor.row] ?? 0) + 1} `, width, height }, (m) => {
+                    m.keyValues(table.columns.map((column, i) => ({ label: column.name, value: displayCell(record[i] ?? "") })), { labelColor: theme.accent, labelWidth });
+                    m.spacer("fill");
+                    m.text("Any key closes.", { fg: theme.muted, align: "center" });
+                });
+            }
+            else if (stats && table) {
+                const lines = statsRows(columnStats(table, cursor.col, rows));
+                screen.modal({ title: ` ${table.columns[cursor.col]?.name ?? ""} `, width: 56, height: clamp(lines.length + 6, 10, Math.max(10, app.height - 2)) }, (m) => {
+                    m.keyValues(lines.map((line) => ({ label: line.label, value: displayCell(line.value) })), { labelColor: theme.accent, labelWidth: 12 });
+                    m.spacer("fill");
+                    m.text(rowFilter ? "Over the filtered rows. Any key closes." : "Any key closes.", { fg: theme.muted, align: "center" });
+                });
+            }
             else if (help) {
                 screen.modal({ title: " readm3 — keys ", width: 56, height: 24 }, (m) => {
-                    m.keyValues(mode === "edit"
+                    m.keyValues(mode !== "edit" && gridding
                         ? [
-                            { label: "esc", value: "back to the preview" },
-                            { label: "ctrl+g", value: "this help" },
-                            { label: "ctrl+s", value: "save" },
-                            { label: "ctrl+z / ctrl+y", value: "undo / redo" },
-                            { label: "ctrl+k / ctrl+u", value: "kill to end / start" },
-                            { label: "ctrl+a / ctrl+e", value: "line start / end" },
-                            { label: "ctrl+← →", value: "by word" },
-                            { label: "ctrl+home/end", value: "top / bottom" },
-                            { label: "enter", value: "split, continuing a list" },
-                            { label: "tab", value: "indent two spaces" },
-                        ]
-                        : [
-                            { label: "↑ ↓  j k", value: "move / scroll" },
-                            { label: "→ ← l h", value: "expand / collapse" },
-                            { label: "enter", value: "open file" },
-                            { label: "e / i", value: "edit this file" },
-                            { label: "ctrl+s", value: "save" },
+                            { label: "← ↑ ↓ → h j k l", value: "move the cell cursor" },
+                            { label: "0 / $", value: "first / last column" },
+                            { label: "g / G  space b", value: "top / bottom, page" },
+                            { label: "o", value: "sort by column ▲ ▼ off" },
+                            { label: "/", value: "filter: text col:x col>n !x" },
+                            { label: "enter", value: "the row as a sheet" },
+                            { label: "c", value: "column statistics" },
+                            { label: "v", value: "grid / raw text" },
+                            { label: "e / i", value: "edit the file" },
+                            { label: "esc", value: "clear the filter" },
                             { label: "tab", value: "switch pane" },
-                            { label: "space / b", value: "page down / up" },
-                            { label: "g / G", value: "top / bottom" },
-                            { label: "/", value: "filter files" },
-                            { label: "s", value: "reveal spoilers" },
-                            { label: "esc", value: "clear filter" },
-                            { label: "r", value: "rescan and reload" },
-                            { label: "[ ]", value: "sidebar width" },
-                            { label: "?", value: "this help" },
                             { label: "q / ctrl+c", value: "quit" },
-                        ], { labelColor: theme.accent, labelWidth: 16 });
+                        ]
+                        : mode === "edit"
+                            ? [
+                                { label: "esc", value: "back to the preview" },
+                                { label: "ctrl+g", value: "this help" },
+                                { label: "ctrl+s", value: "save" },
+                                { label: "ctrl+z / ctrl+y", value: "undo / redo" },
+                                { label: "ctrl+k / ctrl+u", value: "kill to end / start" },
+                                { label: "ctrl+a / ctrl+e", value: "line start / end" },
+                                { label: "ctrl+← →", value: "by word" },
+                                { label: "ctrl+home/end", value: "top / bottom" },
+                                { label: "enter", value: "split, continuing a list" },
+                                { label: "tab", value: "indent two spaces" },
+                            ]
+                            : [
+                                { label: "↑ ↓  j k", value: "move / scroll" },
+                                { label: "→ ← l h", value: "expand / collapse" },
+                                { label: "enter", value: "open file" },
+                                { label: "e / i", value: "edit this file" },
+                                { label: "ctrl+s", value: "save" },
+                                { label: "tab", value: "switch pane" },
+                                { label: "space / b", value: "page down / up" },
+                                { label: "g / G", value: "top / bottom" },
+                                { label: "/", value: "filter files" },
+                                { label: "s", value: "reveal spoilers" },
+                                { label: "esc", value: "clear filter" },
+                                { label: "r", value: "rescan and reload" },
+                                { label: "[ ]", value: "sidebar width" },
+                                { label: "?", value: "this help" },
+                                { label: "q / ctrl+c", value: "quit" },
+                            ], { labelColor: theme.accent, labelWidth: 16 });
                     m.spacer(1);
                     m.text("Any key closes.", { fg: theme.muted, align: "center" });
                 });