sqlite-wasm-viewer 0.1.0

package/src/views/EditCellView/EditCellView.ts

@@ -0,0 +1,74 @@
+import { QueryRunner } from '../../QueryRunner';
+import { ViewerState } from '../../viewerState';
+
+import './styles.css';
+
+interface CurrentCell {
+    tableName: string;
+    columnName: string;
+    cellRowId: string;
+}
+
+export class EditCellView {
+    queryRunner: QueryRunner | undefined;
+
+    textArea: HTMLTextAreaElement;
+
+    currentCell: CurrentCell | undefined;
+
+    constructor(
+        private viewerElem: HTMLElement,
+        private rootEl: HTMLDivElement
+    ) {
+        this.buildDom();
+
+        viewerElem.addEventListener('cellSelected', (event) => {
+            const { detail: cell } = event;
+            this.currentCell = cell;
+            this.textArea.value = cell.value;
+            this.textArea.select();
+        });
+    }
+
+    private buildDom() {
+        const container = document.createElement('div');
+        container.id = 'execute_sql_container';
+
+        const header = document.createElement('div');
+        header.className = 'viewHeader';
+        header.innerText = 'Edit Cell';
+        container.appendChild(header);
+
+        this.textArea = document.createElement('textarea');
+        this.textArea.id = 'execute_sql_textarea';
+        container.appendChild(this.textArea);
+
+        const executeBtn = document.createElement('button');
+        executeBtn.innerText = 'Apply';
+        executeBtn.onclick = this.handleApplyEdit.bind(this);
+        container.appendChild(executeBtn);
+
+        this.rootEl.appendChild(container);
+    }
+
+    private handleApplyEdit() {
+        if (this.textArea.value) {
+            if (!ViewerState.instance.hasChanges) {
+                this.queryRunner?.runQuery({
+                    sql: 'SAVEPOINT "RESTOREPOINT"',
+                    parameters: [],
+                });
+            }
+            this.queryRunner?.runQuery({
+                sql: `UPDATE ${this.currentCell?.tableName} SET "${this.currentCell?.columnName}"=? WHERE "_rowid_"='${this.currentCell?.cellRowId}'`,
+                parameters: [this.textArea.value],
+            });
+
+            ViewerState.instance.setHasChanges(true);
+        }
+    }
+
+    setDb(queryRunner: QueryRunner) {
+        this.queryRunner = queryRunner;
+    }
+}

package/src/views/EditCellView/styles.css

@@ -0,0 +1,23 @@
+#execute_sql_container {
+    display: flex;
+    flex-direction: column;
+}
+
+#execute_sql_editor {
+    position: relative;
+    background-color: white;
+    height: 300px;
+}
+
+#execute_sql_textarea {
+    resize: none;
+    height: 300px;
+    background-color: white;
+    overflow: auto;
+    white-space: nowrap;
+    font-size: 10pt;
+    font-family: monospace;
+    line-height: 1.5;
+    tab-size: 2;
+    caret-color: black;
+}

package/src/views/ExecuteSQLView/ExecuteSQLView.ts

@@ -0,0 +1,49 @@
+import './styles.css';
+
+import { QueryRunner } from 'src/QueryRunner';
+
+export class ExecuteSQLView {
+    queryRunner: QueryRunner | undefined;
+
+    textArea: HTMLTextAreaElement;
+
+    highlighting: HTMLElement;
+
+    constructor(private rootEl: HTMLDivElement) {
+        this.buildDom();
+    }
+
+    private buildDom() {
+        const container = document.createElement('div');
+        container.id = 'execute_sql_container';
+
+        const header = document.createElement('div');
+        header.className = 'viewHeader';
+        header.innerText = 'Execute SQL';
+        container.appendChild(header);
+
+        this.textArea = document.createElement('textarea');
+        this.textArea.id = 'execute_sql_textarea';
+        container.appendChild(this.textArea);
+
+        const executeBtn = document.createElement('button');
+        executeBtn.innerText = 'Execute SQL';
+        executeBtn.onclick = this.handleExecuteSql.bind(this);
+        container.appendChild(executeBtn);
+
+        this.rootEl.appendChild(container);
+    }
+
+    private handleExecuteSql() {
+        if (this.textArea.value) {
+            this.queryRunner?.runQuery({
+                sql: this.textArea.value,
+                parameters: [],
+            });
+        }
+    }
+
+    setDb(queryRunner: QueryRunner) {
+        this.queryRunner = queryRunner;
+    }
+}

package/src/views/ExecuteSQLView/styles.css

@@ -0,0 +1,47 @@
+#execute_sql_container {
+    display: flex;
+    flex-direction: column;
+}
+
+#execute_sql_editor {
+    position: relative;
+    background-color: white;
+    height: 300px;
+}
+
+#execute_sql_textarea, #execute_sql_highlighting {
+    resize: none;
+    height: 300px;
+    background-color: white;
+    overflow: auto;
+    white-space: nowrap;
+    font-size: 10pt;
+    font-family: monospace;
+    line-height: 1.5;
+    tab-size: 2;
+    caret-color: black;
+}
+
+#execute_sql_highlighting {
+    z-index: 0;
+    margin: 0;
+    padding: 2px;
+}
+
+.highlighting {
+    color: blue;
+}
+
+.sql-hl-keyword {
+    color: purple;
+    /* font-weight: 600; */
+}
+
+.sql-hl-special {
+    color: black;
+}
+
+.sql-hl-string {
+    color: red;
+    /* font-weight: 600; */
+}

package/src/views/ExplorerView/ExplorerView.ts

@@ -0,0 +1,94 @@
+import { ViewerState } from '../../viewerState';
+
+import './styles.css';
+
+export interface DatabaseItem {
+    filename: string;
+    tables: string[];
+}
+
+export class ExplorerView {
+    private containerEl: HTMLElement;
+
+    private expandedItems: { [dbFilepath: string]: boolean } = {};
+
+    private dbs: DatabaseItem[];
+
+    private selectedItem: HTMLElement | null = null;
+
+    constructor(rootEl: HTMLDivElement) {
+        this.dbs = [];
+
+        const dbListHeader = document.createElement('div');
+        dbListHeader.className = 'viewHeader';
+        dbListHeader.innerText = 'Database List';
+
+        rootEl.appendChild(dbListHeader);
+
+        this.containerEl = document.createElement('div');
+        this.containerEl.id = 'explorer_tree';
+        rootEl.appendChild(this.containerEl);
+    }
+
+    public addDatabaseItem(databaseItem: DatabaseItem): void {
+        this.dbs.push(databaseItem);
+
+        this.addDbToDom(databaseItem);
+
+        if (this.selectedItem === null) {
+            const firstTable = document.querySelector(
+                '#explorer_tree > .table'
+            ) as HTMLElement | undefined;
+            if (firstTable) {
+                this.selectTable(firstTable);
+            }
+        }
+    }
+
+    private addDbToDom(databaseItem: DatabaseItem) {
+        const dbRoot = document.createDocumentFragment();
+
+        const dbItem = document.createElement('div');
+        dbItem.innerText = databaseItem.filename;
+        dbItem.className = 'db';
+
+        const expandArrow = document.createElement('div');
+        expandArrow.className = 'expand';
+        expandArrow.innerText = '>';
+        expandArrow.style.cursor = 'pointer';
+        expandArrow.onclick = () => {
+            this.expandedItems[databaseItem.filename] =
+                !this.expandedItems[databaseItem.filename];
+
+            expandArrow.classList.toggle('expanded');
+        };
+        expandArrow.classList.add('expanded');
+        dbItem.appendChild(expandArrow);
+
+        dbRoot.appendChild(dbItem);
+        databaseItem.tables.forEach((table) => {
+            const tableItem = document.createElement('div');
+            tableItem.innerText = table;
+            tableItem.className = 'table';
+            tableItem.onclick = () => {
+                this.selectTable(tableItem);
+            };
+
+            dbRoot.appendChild(tableItem);
+        });
+
+        this.containerEl.appendChild(dbRoot);
+    }
+
+    private selectTable(tableEl: HTMLElement | null) {
+        if (tableEl) {
+            const tableName = tableEl.innerText;
+
+            this.selectedItem?.classList.remove('selected');
+            tableEl.classList.add('selected');
+            this.selectedItem = tableEl;
+
+            ViewerState.instance.setSelectedTable(tableName);
+        }
+    }
+}

package/src/views/ExplorerView/styles.css

@@ -0,0 +1,30 @@
+#explorer_tree {
+    padding: 8px;
+    padding-left: 20px;
+}
+
+#explorer_tree > .db {
+    position: relative;
+    text-overflow: ellipsis;
+    overflow-y: clip;
+}
+
+#explorer_tree .expand {
+    position: absolute;
+    top: 0;
+    left: -15px;
+    transition: all .3s ease-in;
+}
+
+#explorer_tree .expanded {
+    transform: rotate(90deg);
+}
+
+#explorer_tree > .table {
+    margin-left: 20px;
+    cursor: pointer;
+}
+
+#explorer_tree > .table.selected {
+    background-color: rgb(128, 128, 128);
+}

package/src/views/SqlLogView/SqlLogView.ts

@@ -0,0 +1,37 @@
+import { Query, QueryRunner } from 'src/QueryRunner';
+import './styles.css';
+
+class SqlLogView {
+    textArea: HTMLTextAreaElement;
+
+    constructor(rootEl: HTMLDivElement, queryRunner: QueryRunner) {
+        queryRunner.addListener(this.handleQueryRun.bind(this));
+
+        const container = document.createElement('div');
+        container.id = 'sql_log_container';
+
+        const header = document.createElement('div');
+        header.className = 'viewHeader';
+        header.innerText = 'SQL Log';
+
+        container.appendChild(header);
+
+        this.textArea = document.createElement('textarea');
+        this.textArea.id = 'query_log_text';
+        this.textArea.readOnly = true;
+        container.appendChild(this.textArea);
+
+        rootEl.appendChild(container);
+    }
+
+    handleQueryRun(query: Query) {
+        this.textArea.value += `${query.sql}\n`;
+    }
+}
+
+export function initSqlLogView(
+    rootEl: HTMLDivElement,
+    queryRunner: QueryRunner
+) {
+    return new SqlLogView(rootEl, queryRunner);
+}

package/src/views/SqlLogView/styles.css

@@ -0,0 +1,10 @@
+#sql_log_container {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+#query_log_text {
+    resize: none;
+    height: 100%;
+}

package/src/views/TableView/TableView.ts

@@ -0,0 +1,266 @@
+import { ViewerState } from '../../viewerState';
+import { ListVirtualizer } from '../../ListVirtualizer';
+import { QueryRunner } from '../../QueryRunner';
+import './styles.css';
+
+export class TableView {
+    private container: HTMLDivElement;
+
+    private viewHeader: HTMLDivElement;
+
+    private viewHeaderTitle: HTMLSpanElement;
+
+    private headerRow: HTMLTableRowElement;
+
+    private bodyRoot: HTMLTableSectionElement;
+
+    private virtualizer: ListVirtualizer;
+
+    private rows;
+
+    private tableName: string;
+
+    private columnNames: string[] = [];
+
+    private fitlers: { [column: string]: string } = {};
+
+    private updateTimer: number | null = null;
+
+    private selectedCell: HTMLTableCellElement | null = null;
+
+    constructor(
+        private viewerElem: HTMLElement,
+        private rootElement: HTMLDivElement,
+        private queryRunner: QueryRunner
+    ) {
+        this.buildDomTemplate();
+
+        this.viewerElem.addEventListener('tableSelected', (event) => {
+            const { detail: tableName } = event;
+            this.setTable(tableName);
+        });
+
+        this.virtualizer = new ListVirtualizer({
+            width: 500,
+            height: 930,
+            totalRows: 0,
+            itemHeight: 40,
+            contentRoot: this.bodyRoot,
+            container: this.container,
+            generatorFn: (i: number) => {
+                const row = this.rows[i];
+
+                if (!row) {
+                    return null;
+                }
+
+                const tr = document.createElement('tr');
+
+                const rowId = row.rowid;
+
+                Object.keys(row).forEach((columnKey) => {
+                    if (columnKey === 'rowid') {
+                        return;
+                    }
+
+                    const value = row[columnKey];
+                    const td = document.createElement('td');
+                    const contentEl = document.createElement('div');
+                    if (value !== null) {
+                        contentEl.innerHTML = value;
+                    } else {
+                        contentEl.innerHTML = 'NULL';
+                        contentEl.className = 'nullValue';
+                    }
+
+                    td.onclick = () => {
+                        ViewerState.instance.setSelectedCell({
+                            value,
+                            cellRowId: rowId,
+                            columnName: columnKey,
+                            tableName: ViewerState.instance.selectedTable,
+                        });
+
+                        if (this.selectedCell) {
+                            this.selectedCell.classList.remove('selected');
+                        }
+
+                        td.classList.add('selected');
+                        this.selectedCell = td;
+                    };
+
+                    td.appendChild(contentEl);
+                    tr.appendChild(td);
+                });
+                this.bodyRoot.appendChild(tr);
+
+                return tr;
+            },
+        });
+    }
+
+    setTableResults(rows: any[]) {
+        this.rows = rows;
+
+        this.viewHeaderTitle.innerHTML = this.tableName;
+
+        this.buildHeader(rows);
+
+        this.virtualizer.setRowCount(rows.length);
+    }
+
+    buildDomTemplate() {
+        this.viewHeader = document.createElement('div');
+        this.viewHeader.className = 'viewHeader';
+
+        this.viewHeaderTitle = document.createElement('span');
+        this.viewHeaderTitle.id = 'table_view_header_title';
+        this.viewHeader.appendChild(this.viewHeaderTitle);
+
+        const updateBtn = document.createElement('button');
+        updateBtn.innerText = 'Update';
+        updateBtn.onclick = () => {
+            this.requestRows();
+        };
+        this.viewHeader.appendChild(updateBtn);
+
+        const saveBtn = document.createElement('button');
+        saveBtn.innerText = 'Save changes';
+        saveBtn.onclick = () => {
+            this.saveChanges();
+        };
+        saveBtn.setAttribute('disabled', '');
+        this.viewHeader.appendChild(saveBtn);
+
+        const revertBtn = document.createElement('button');
+        revertBtn.innerText = 'Revert changes';
+        revertBtn.onclick = () => {
+            this.revertChanges();
+        };
+        revertBtn.setAttribute('disabled', '');
+        this.viewHeader.appendChild(revertBtn);
+
+        this.rootElement.appendChild(this.viewHeader);
+
+        this.container = document.createElement('div');
+        this.container.id = 'table_container';
+
+        const table = document.createElement('table');
+
+        const tableHeader = table.createTHead();
+        this.headerRow = document.createElement('tr');
+        tableHeader.appendChild(this.headerRow);
+
+        this.bodyRoot = table.createTBody();
+        this.container.appendChild(table);
+
+        this.rootElement.appendChild(this.container);
+
+        this.viewerElem.addEventListener('hasChanges', (event) => {
+            const { detail: hasChanges } = event;
+
+            if (hasChanges) {
+                saveBtn.removeAttribute('disabled');
+                revertBtn.removeAttribute('disabled');
+            } else {
+                saveBtn.setAttribute('disabled', '');
+                revertBtn.setAttribute('disabled', '');
+            }
+        });
+    }
+
+    private buildHeader(rows: any[]) {
+        if (this.columnNames.length !== 0) {
+            return;
+        }
+
+        const schema =
+            rows.length > 0
+                ? Object.keys(rows[0]).filter((column) => column !== 'rowid')
+                : [];
+
+        if (schema.length > 0) {
+            this.columnNames = schema;
+        }
+
+        this.headerRow.innerHTML = '';
+        this.columnNames.forEach((column) => {
+            const columnHeader = document.createElement('th');
+            columnHeader.className = 'columnHeaderCell';
+
+            columnHeader.innerHTML = column;
+
+            const filterFieldCell = document.createElement('th');
+            filterFieldCell.className = 'columnFilterCell';
+            const filterField = document.createElement('input');
+            filterField.oninput = () => {
+                this.fitlers[column] = filterField.value;
+                this.scheduleUpdate();
+            };
+            filterField.placeholder = 'Filter';
+
+            filterFieldCell.appendChild(filterField);
+
+            this.headerRow.appendChild(columnHeader);
+
+            columnHeader.appendChild(filterFieldCell);
+        });
+    }
+
+    private setTable(name: string) {
+        if (this.tableName === name) {
+            return;
+        }
+
+        this.tableName = name;
+        this.columnNames = [];
+        this.fitlers = {};
+
+        this.requestRows();
+    }
+
+    private requestRows(): void {
+        let sql = `SELECT "_rowid_",* FROM ${this.tableName}`;
+
+        const filterSql: string[] = [];
+        Object.entries(this.fitlers).forEach((filterEntry) => {
+            const column = filterEntry[0];
+            const filter = filterEntry[1];
+
+            if (filter) {
+                filterSql.push(`"${column}" LIKE '%${filter}%'`);
+            }
+        });
+
+        if (filterSql.length > 0) {
+            sql += ` WHERE ${filterSql.join(' AND ')} ESCAPE '\\'`;
+        }
+
+        this.queryRunner.runQuery({ sql, parameters: [] }, 'tableView');
+    }
+
+    private saveChanges(): void {
+        const sql = 'RELEASE "RESTOREPOINT";';
+        this.queryRunner.runQuery({ sql, parameters: [] });
+        ViewerState.instance.setHasChanges(false);
+    }
+
+    private revertChanges(): void {
+        const sql = 'ROLLBACK TO SAVEPOINT "RESTOREPOINT";';
+        this.queryRunner.runQuery({ sql, parameters: [] });
+
+        this.requestRows();
+
+        ViewerState.instance.setHasChanges(false);
+    }
+
+    private scheduleUpdate() {
+        if (this.updateTimer !== null) {
+            window.clearTimeout(this.updateTimer);
+        }
+        this.updateTimer = window.setTimeout(() => {
+            this.requestRows();
+            this.updateTimer = null;
+        }, 300);
+    }
+}