terrier-engine 4.4.0 → 4.4.3

package/data-dive/queries/queries.ts

@@ -0,0 +1,263 @@
+import {TableRef} from "./tables"
+import api, {ApiResponse} from "../../terrier/api"
+import {PartTag} from "tuff-core/parts"
+import {TableCellTag} from "tuff-core/html"
+import dayjs from "dayjs"
+import QueryEditor from "./query-editor"
+import TerrierPart from "../../terrier/parts/terrier-part"
+import Schema, {ModelDef, SchemaDef} from "../../terrier/schema"
+import {arrays, messages} from "tuff-core"
+import {Logger} from "tuff-core/logging"
+
+const log = new Logger("Queries")
+
+
+////////////////////////////////////////////////////////////////////////////////
+// Query
+////////////////////////////////////////////////////////////////////////////////
+
+export type Query = {
+    id: string
+    name: string
+    notes: string
+    from: TableRef
+}
+
+
+////////////////////////////////////////////////////////////////////////////////
+// Validation
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Type for the response to a server-side query validation.
+ */
+export type QueryValidation = ApiResponse & {
+    query: Query
+    sql?: string
+    sql_html?: string
+    explain?: string
+    error?: string
+    error_html?: string
+}
+
+/**
+ * Has the server validate the given query and generate SQL for it.
+ * @param query
+ */
+async function validate(query: Query): Promise<QueryValidation> {
+    return await api.post<QueryValidation>("/data_dive/validate_query.json", {query})
+}
+
+
+////////////////////////////////////////////////////////////////////////////////
+// Inputs
+////////////////////////////////////////////////////////////////////////////////
+
+
+
+////////////////////////////////////////////////////////////////////////////////
+// Preview
+////////////////////////////////////////////////////////////////////////////////
+
+export type QueryResultRow = Record<string, any>
+
+const ColumnTypes = ['string', 'integer', 'float', 'date', 'time',  'dollars'] as const
+
+export type ColumnType = typeof ColumnTypes[number]
+
+export type QueryResultColumn = {
+    name: string
+    type: ColumnType
+}
+
+/**
+ * Type of the result of running the query on the server.
+ */
+export type QueryResult = ApiResponse & {
+    rows?: QueryResultRow[]
+    columns?: QueryResultColumn[]
+}
+
+/**
+ * Executes the query on the server with a reasonable limit suitable for previewing the results.
+ * @param query
+ */
+async function preview(query: Query): Promise<QueryResult> {
+    return await api.post<QueryResult>("/data_dive/preview_query.json", {query})
+}
+
+
+////////////////////////////////////////////////////////////////////////////////
+// Preview Rendering
+////////////////////////////////////////////////////////////////////////////////
+
+const DateFormat = 'MM/DD/YY'
+
+const TimeFormat = `h:mm A`
+
+function renderCell(td: TableCellTag, col: QueryResultColumn, val: any): any {
+    td.class(col.type)
+    switch (col.type) {
+        case 'date':
+            const date = dayjs(val.toString())
+            return td.div('.date').text(date.format(DateFormat))
+        case 'time':
+            const time = dayjs(val.toString())
+            td.div('.date').text(time.format(DateFormat))
+            return td.div('.time').text(time.format(TimeFormat))
+        case 'dollars':
+            const dollars = parseFloat(val)
+            return td.div('.dollars').text(`\$${dollars}`)
+        case 'string':
+            if (col.name.endsWith('id')) {
+                const id = val.toString()
+                td.a('.id')
+                    .data({tooltip: id})
+                    .text(`...${id.substring(id.length-6)}`)
+                    .emitClick(QueryEditor.copyToClipboardKey, {value: id})
+            }
+            else {
+                td.text(val.toString())
+            }
+            return
+        default:
+            td.text(val.toString())
+    }
+    td.text(val.toString())
+}
+
+function renderTable(parent: PartTag, rows: QueryResultRow[], columns: QueryResultColumn[]) {
+    parent.table('.dd-query-result', table => {
+        // header
+        table.thead(thead => {
+            thead.tr(tr => {
+                for (const col of columns) {
+                    tr.th(col.type, th => {
+                        th.a().text(col.name)
+                    })
+                }
+            })
+        })
+
+        // body
+        table.tbody(tbody => {
+            for (const row of rows) {
+                tbody.tr(tr => {
+                    for (const col of columns) {
+                        tr.td(td => {
+                            const val = row[col.name]
+                            if (val) {
+                                renderCell(td, col, val)
+                            }
+                        })
+                    }
+                })
+            }
+        })
+    })
+}
+
+/**
+ * Renders a preview table if the result is successful, otherwise an error bubble.
+ * @param parent
+ * @param result
+ */
+function renderPreview(parent: PartTag, result: QueryResult) {
+    if (result.rows && result.columns) {
+        renderTable(parent, result.rows, result.columns)
+    } else {
+        parent.div('.tt-bubble.alert').text(result.message)
+    }
+}
+
+
+////////////////////////////////////////////////////////////////////////////////
+// Model Picker
+////////////////////////////////////////////////////////////////////////////////
+
+export type QueryModelPickerState = {
+    schema: SchemaDef
+}
+
+/**
+ * Presents a bunch of radio buttons to select the model for a query.
+ */
+export class QueryModelPicker extends TerrierPart<QueryModelPickerState> {
+
+    pickedKey = messages.typedKey<{ model: string }>()
+    model?: ModelDef
+
+    async init() {
+
+        this.onChange(this.pickedKey, m => {
+            log.info(`Picked model ${m.data.model}`)
+            this.model = this.state.schema.models[m.data.model]
+        })
+    }
+
+
+    get parentClasses(): Array<string> {
+        return ['dd-query-model-picker', 'padded', 'tt-inset-box', 'tt-flex', 'column', 'gap']
+    }
+
+    renderModelOption(parent: PartTag, model: ModelDef) {
+        parent.label('.model-option', label => {
+            label.input({type: 'radio', name: `new-query-model-${this.id}`, value: model.name})
+                .emitChange(this.pickedKey, {model: model.name})
+            label.div(col => {
+                col.div('.name').text(model.name)
+                if (model.metadata?.description) {
+                    col.div('.description').text(model.metadata.description)
+                }
+            })
+        })
+    }
+
+    render(parent: PartTag): any {
+        parent.h2('.centered', h2 => {
+            h2.i('.glyp-table')
+            h2.span().text("Select a Table")
+        })
+        parent.p('.caption').text("The table forms the basis of the query. Other tables can be joined into the query but they will all flow from the one selected below.")
+        parent.div('.tt-flex.gap.collapsible', row => {
+            row.div('.stretch.tt-flex.column.gap', col => {
+                const commonModels = Schema.commonModels(this.state.schema)
+                if (commonModels.length) {
+                    col.h3(h3 => {
+                        h3.i('.glyp-refresh')
+                        h3.span().text("Common Tables")
+                    })
+                    for (const model of arrays.sortBy(commonModels, 'name')) {
+                        this.renderModelOption(col, model)
+                    }
+                }
+            })
+
+            row.div('.stretch.tt-flex.column.gap', col => {
+                const uncommonModels = Schema.uncommonModels(this.state.schema)
+                if (uncommonModels.length) {
+                    col.h3(h3 => {
+                        h3.i('.glyp-pending')
+                        h3.span().text("Other Tables")
+                    })
+                    for (const model of arrays.sortBy(uncommonModels, 'name')) {
+                        this.renderModelOption(col, model)
+                    }
+                }
+            })
+        })
+    }
+}
+
+
+////////////////////////////////////////////////////////////////////////////////
+// Export
+////////////////////////////////////////////////////////////////////////////////
+
+const Queries = {
+    validate,
+    preview,
+    renderPreview
+}
+
+export default Queries

package/data-dive/queries/query-editor.ts

@@ -0,0 +1,232 @@
+import {PartTag} from "tuff-core/parts"
+import Queries, {Query, QueryResult, QueryValidation} from "./queries"
+import Tables, {FromTableView} from "./tables"
+import {Logger} from "tuff-core/logging"
+import QueryForm, {QuerySettings, QuerySettingsColumns} from "./query-form"
+import DiveEditor, {DiveEditorState} from "../dives/dive-editor"
+import Objects from "tuff-core/objects"
+import {messages} from "tuff-core"
+import Html from "tuff-core/html"
+import ContentPart from "../../terrier/parts/content-part"
+import {TabContainerPart} from "../../terrier/tabs"
+
+const log = new Logger("QueryEditor")
+
+
+////////////////////////////////////////////////////////////////////////////////
+// Keys
+////////////////////////////////////////////////////////////////////////////////
+
+const validationKey = messages.typedKey<QueryValidation>()
+
+
+////////////////////////////////////////////////////////////////////////////////
+// Settings Part
+////////////////////////////////////////////////////////////////////////////////
+
+class SettingsPart extends ContentPart<SubEditorState> {
+
+    form!: QueryForm
+
+    async init() {
+        this.form = this.makePart(QueryForm, {query: Objects.slice(this.state.query, ...QuerySettingsColumns)})
+    }
+
+
+    get parentClasses(): Array<string> {
+        return ['tt-flex', 'column', 'gap']
+    }
+
+    renderContent(parent: PartTag) {
+        parent.part(this.form)
+        parent.div('.tt-flex.justify-end', row => {
+            row.a('.alert.tt-flex', a => {
+                a.i('.glyp-delete')
+                a.span({text: "Delete"})
+            }).emitClick(DiveEditor.deleteQueryKey, {id: this.state.query.id})
+        })
+    }
+
+
+}
+
+
+////////////////////////////////////////////////////////////////////////////////
+// SQL Part
+////////////////////////////////////////////////////////////////////////////////
+
+class SqlPart extends ContentPart<SubEditorState> {
+
+    validation?: QueryValidation
+
+    setValidation(validation: QueryValidation) {
+        this.validation = validation
+        this.dirty()
+    }
+
+    renderContent(parent: PartTag) {
+        parent.div('.dd-sql-output.tt-flex.gap', row => {
+            if (this.validation) {
+                const validation = this.validation
+                row.div('.sql.stretch', col => {
+                    if (validation.error_html?.length) {
+                        col.class('alert')
+                        col.pre().text(validation.error_html)
+                    } else if (validation.sql_html) {
+                        col.pre().text(validation.sql_html)
+                    } else {
+                        col.div('.alert.tt-bubble').text(Html.escape(validation.message))
+                    }
+                })
+            }
+            else {
+                row.div({text: 'SQL Goes Here'})
+            }
+        })
+    }
+
+
+}
+
+
+////////////////////////////////////////////////////////////////////////////////
+// Preview Part
+////////////////////////////////////////////////////////////////////////////////
+
+class PreviewPart extends ContentPart<SubEditorState> {
+
+    result?: QueryResult
+
+    async updateResult() {
+        const query = this.state.query
+        log.info(`Generating preview for`, query)
+        this.startLoading()
+        this.result = await Queries.preview(query)
+        this.stopLoading()
+        this.dirty()
+    }
+
+    async init() {
+    }
+
+
+    get parentClasses(): Array<string> {
+        return ['dd-query-preview']
+    }
+
+    renderContent(parent: PartTag) {
+        if (this.result) {
+            parent.div('.table-container', col => {
+                Queries.renderPreview(col, this.result!)
+            })
+        }
+        else {
+            parent.a('.tt-button.stretch', a => {
+                a.i('.glyp-refresh')
+                a.span('.title').text("Load Preview")
+            }).emitClick(this.state.editor.updatePreviewKey)
+        }
+    }
+
+
+}
+
+
+
+////////////////////////////////////////////////////////////////////////////////
+// Editor
+////////////////////////////////////////////////////////////////////////////////
+
+export type QueryEditorState = DiveEditorState & {
+    query: Query
+}
+
+type SubEditorState = {
+    editor: QueryEditor
+    query: Query
+}
+
+export default class QueryEditor extends ContentPart<QueryEditorState> {
+
+    tableEditor!: FromTableView
+    tabs!: TabContainerPart
+    settingsPart!: SettingsPart
+    sqlPart!: SqlPart
+    previewPart!: PreviewPart
+
+    updatePreviewKey = messages.untypedKey()
+
+    async init() {
+        const query = this.state.query
+
+        log.info("Initializing query editor", query)
+
+        this.tabs = this.makePart(TabContainerPart, {side: 'left'})
+        this.settingsPart = this.tabs.upsertTab({key: 'settings', title: 'Settings', icon: 'glyp-settings'},
+            SettingsPart, {editor: this, query})
+
+
+        this.listenMessage(QueryForm.settingsChangedKey, m => {
+            log.info(`Query settings changed`, m.data)
+            this.updateSettings(m.data)
+        })
+
+        this.sqlPart = this.tabs.upsertTab({key: 'sql', title: 'SQL', icon: 'glyp-code'},
+            SqlPart, {editor: this, query})
+
+        this.previewPart = this.tabs.upsertTab({key: 'preview', title: 'Preview', icon: 'glyp-table', classes: ['no-padding'], click: {key: this.updatePreviewKey}},
+            PreviewPart, {editor: this, query})
+
+        this.tableEditor = this.makePart(FromTableView, {schema: this.state.schema, table: this.state.query.from})
+
+        this.listenMessage(Tables.updatedKey, m => {
+            log.info(`Table ${m.data.model} updated`, m.data)
+            this.validate()
+            this.updatePreview()
+        })
+
+        this.onClick(this.updatePreviewKey, async _ => {
+            await this.previewPart.updateResult()
+        })
+
+        this.onClick(QueryEditor.copyToClipboardKey, async m => {
+            log.info(`Copy value to clipboard: ${m.data.value}`)
+            await navigator.clipboard.writeText(m.data.value)
+            this.showToast(`Copied '${m.data.value}' to clipboard`, {color: 'primary'})
+        })
+
+        this.validate().then()
+        this.updatePreview().then()
+    }
+
+
+    get parentClasses(): Array<string> {
+        return ['dd-query-editor']
+    }
+
+    renderContent(parent: PartTag): void {
+        parent.div('.dd-query-editor-canvas').part(this.tableEditor)
+        parent.div('.dd-query-sub-editors').part(this.tabs)
+    }
+
+    updateSettings(settings: QuerySettings) {
+        log.info("Updating settings", settings)
+        Object.assign(this.state.query, settings)
+        this.dirty()
+    }
+
+    async validate() {
+        const res = await Queries.validate(this.state.query)
+        log.info(`Query validated`, res)
+        this.emitMessage(validationKey, res)
+        this.sqlPart.setValidation(res)
+        this.dirty()
+    }
+
+    async updatePreview() {
+        await this.previewPart.updateResult()
+        this.tabs.showTab('preview')
+    }
+
+    static readonly copyToClipboardKey = messages.typedKey<{ value: string }>()
+}

package/data-dive/queries/query-form.ts

@@ -0,0 +1,51 @@
+import {Query} from "./queries"
+import {PartTag} from "tuff-core/parts"
+import {FormFields} from "tuff-core/forms"
+import {Logger} from "tuff-core/logging"
+import {messages} from "tuff-core"
+import ContentPart from "../../terrier/parts/content-part";
+
+const log = new Logger("QueryForm")
+
+export const QuerySettingsColumns = ['id', 'name', 'notes'] as const
+export type QuerySettingsColumn = typeof QuerySettingsColumns[number]
+
+export type QuerySettings = Pick<Query, QuerySettingsColumn>
+
+export default class QueryForm extends ContentPart<{ query: QuerySettings }> {
+
+    fields!: FormFields<QuerySettings>
+
+    async init() {
+        this.fields = new FormFields<QuerySettings>(this, this.state.query)
+        this.listen('datachanged', this.fields.dataChangedKey, m => {
+            log.info(`Query fields changed`, m.data)
+            Object.assign(this.state.query, m.data)
+            this.emitMessage(QueryForm.settingsChangedKey, m.data)
+        }, {attach: 'passive'})
+    }
+
+
+    get parentClasses(): Array<string> {
+        return ['tt-form']
+    }
+
+    renderContent(parent: PartTag): void {
+        parent.div('.tt-flex.gap', row => {
+            row.div('.stretch', col => {
+                col.label().text("Name")
+                const nameField = this.fields.textInput(col, 'name')
+                if (!this.state.query.name.length) {
+                    nameField.class('error')
+                }
+            })
+            row.div('.stretch', col => {
+                col.label().text("Notes")
+                this.fields.textArea(col, 'notes')
+            })
+        })
+    }
+
+    static readonly settingsChangedKey = messages.typedKey<QuerySettings>()
+
+}