terrier-engine 4.4.0 → 4.4.3

package/data-dive/dives/dive-runs.ts

@@ -0,0 +1,272 @@
+import {ModalPart} from "../../terrier/modals"
+import {PartTag} from "tuff-core/parts"
+import {DdDive, DdDiveRun, UnpersistedDdDiveRun} from "../gen/models"
+import Db from "../dd-db"
+import Api, {ErrorEvent} from "../../terrier/api"
+import {Query} from "../queries/queries"
+import {DivTag, HtmlParentTag} from "tuff-core/html"
+import {messages} from "tuff-core"
+import {IconName} from "../../terrier/theme"
+import Filters, {DateRangeFilter, DirectFilter, FilterInput, InclusionFilter} from "../queries/filters"
+import Dives from "./dives"
+import {Logger} from "tuff-core/logging";
+import Schema, {SchemaDef} from "../../terrier/schema"
+import {TerrierFormFields} from "../../terrier/forms"
+import inflection from "inflection"
+import Dates, {DateLiteral, DatePeriodPickerPart, DatePeriodPickerState, LiteralDateRange} from "../queries/dates"
+import dayjs from "dayjs"
+
+const log = new Logger("DiveRuns")
+
+type RunQueryResult = {
+    id: string
+    time: string
+    status: 'pending' | 'success' | 'error'
+    message?: string
+}
+
+const statusIcons: Record<RunQueryResult['status'], IconName> = {
+    pending: 'glyp-pending',
+    success: 'glyp-complete',
+    error: 'glyp-alert'
+}
+
+type RunFileOutput = {
+    name: string
+    size: number
+    url: string
+}
+
+export class DiveRunModal extends ModalPart<{dive: DdDive }> {
+
+    schema!: SchemaDef
+    filters!: FilterInput[]
+    run?: DdDiveRun
+    error?: ErrorEvent
+    inputFields!: TerrierFormFields<any>
+    fileOutput?: RunFileOutput
+    queryResults: Record<string, RunQueryResult> = {}
+
+    startKey = messages.untypedKey()
+    pickDateKey = messages.typedKey<{ input_key: string }>()
+
+    async init() {
+        this.setTitle("Run Dive")
+        this.setIcon('glyp-play')
+
+        this.schema = await Schema.get()
+
+        // initialize the inputs
+        this.filters = Dives.computeFilterInputs(this.schema, this.state.dive)
+        const rawInputs = Filters.populateRawInputData(this.filters)
+        this.inputFields = new TerrierFormFields<any>(this, rawInputs)
+
+        this.listen('datachanged', this.inputFields.dataChangedKey, _ => {
+            this.updateFilters().then()
+        })
+        await this.updateFilters()
+
+        this.addAction({
+            title: "Run",
+            icon: 'glyp-play',
+            click: {key: this.startKey}
+        })
+
+        this.onClick(this.startKey, _ => {
+            this.startActionLoading()
+            this.createRun()
+        })
+
+        this.onClick(this.pickDateKey, m => {
+            const initialRange = {
+                min: this.inputFields.data[`${m.data.input_key}-min`] as DateLiteral,
+                max: dayjs(this.inputFields.data[`${m.data.input_key}-max`]).add(1, 'day').format(Dates.literalFormat) as DateLiteral
+            } as LiteralDateRange
+            this.toggleDropdown(DatePeriodPickerPart, {
+                initial: initialRange,
+                callback: (newRange: LiteralDateRange) => {
+                    log.info(`Picked date range for ${m.data.input_key}`, newRange)
+                    this.inputFields.data[`${m.data.input_key}-min`] = newRange.min
+                    this.inputFields.data[`${m.data.input_key}-max`] = dayjs(newRange.max).subtract(1, 'day').format(Dates.literalFormat)
+                    this.dirty()
+                }} as DatePeriodPickerState,
+                m.event.target
+            )
+        })
+
+        this.dirty()
+    }
+
+    async updateFilters() {
+        const raw = await this.inputFields.serialize()
+        Filters.serializeRawInputData(this.filters, raw)
+        log.info(`Raw and serialized input data`, raw, this.filters)
+        log.info(`Filter input data:`, this.inputFields.data)
+    }
+
+    async createRun() {
+        const newRun: UnpersistedDdDiveRun = {
+            dd_dive_id: this.state.dive.id,
+            status: 'initial',
+            input_data: {
+                filters: this.filters,
+                ...this.state.dive.query_data!
+            }
+        }
+        const res = await Db().upsert('dd_dive_run', newRun)
+        if (res.status == 'success' && res.record) {
+            this.beginStreaming(res.record)
+        } else {
+            this.alertToast(`Error creating dive run: ${res.message}`)
+        }
+        this.dirty()
+    }
+
+    beginStreaming(run: DdDiveRun) {
+        this.run = run
+        Api.stream(`/data_dive/stream_run/${this.run.id}`)
+            .on<RunQueryResult>('query_result', res => {
+                this.queryResults[res.id] = res
+                this.dirty()
+            })
+            .on<RunFileOutput>('file_output', res => {
+                this.fileOutput = res
+                this.stopActionLoading()
+                this.dirty()
+            })
+            .onError(evt => {
+                this.error = evt
+                this.stopActionLoading()
+                this.dirty()
+            })
+            .onClose(() => {
+                this.stopActionLoading()
+                this.dirty()
+            })
+    }
+
+
+    renderContent(parent: PartTag): void {
+        parent.div('.tt-flex.collapsible.padded.gap.tt-form', row => {
+            // inputs
+            row.div('.tt-flex.column.shrink.dd-dive-run-inputs', col => {
+                for (const filter of this.filters) {
+                    this.renderInput(col, filter)
+                }
+            })
+            
+            // output
+            row.div('.dd-dive-run-output', col => {
+                // error
+                if (this.error) {
+                    col.div('.tt-bubble.alert', bubble => {
+                        const error = this.error!
+                        bubble.div('.message').text(error.message)
+                        if (error.backtrace?.length) {
+                            bubble.div('.backtrace', backtrace => {
+                                for (const line of error.backtrace) {
+                                    backtrace.div('.line').text(line)
+                                }
+                            })
+                        }
+                    })
+                    return
+                }
+
+                // queries
+                for (const query of this.state.dive.query_data?.queries || []) {
+                    this.renderQuery(col, query)
+                }
+
+                // output
+                if (this.fileOutput) {
+                    this.renderFileOutput(col, this.fileOutput)
+                }
+            })
+        })
+    }
+
+    renderQuery(parent: DivTag, query: Query) {
+        const res = this.queryResults[query.id]
+        const status = res?.status || 'pending'
+
+        parent.div('.query-run', status, row => {
+            row.i(statusIcons[status])
+            row.div('.name').text(query.name)
+            if (res?.status == 'error') {
+                row.div('.tt-bubble.alert').text(res.message || "Error!")
+            }
+            else if (res?.message?.length) {
+                row.div('.details').text(res.message)
+            }
+        })
+    }
+
+    renderFileOutput(parent: DivTag, fileOutput: RunFileOutput) {
+        parent.a('.file-output', {href: fileOutput.url}, row => {
+            row.i('.glyp-file_spreadsheet')
+            row.div('.name').text(fileOutput.name)
+            row.div('.details.glyp-download').text("Click to download")
+        })
+    }
+
+    renderInput(parent: HtmlParentTag, filter: FilterInput) {
+        parent.div('.dd-dive-run-input', col => {
+            // don't show anything after the # and replace periods with spaces
+            const title = inflection.titleize(filter.input_key.split('#')[0].split('.').join(' '))
+            col.label('.caption-size').text(title)
+            switch (filter.filter_type) {
+                case 'direct':
+                    return this.renderDirectInput(col, filter)
+                case 'date_range':
+                    return this.renderDateRangeInput(col, filter)
+                case 'inclusion':
+                    return this.renderInclusionInput(col, filter)
+                default:
+                    col.p().text(`Don't know how to render input for ${filter.filter_type} filter`)
+            }
+        })
+    }
+
+    renderDirectInput(parent: HtmlParentTag, filter: DirectFilter & FilterInput) {
+        parent.div('.tt-compound-field', field => {
+            field.label().text(Filters.operatorDisplay(filter.operator))
+            switch (filter.column_type) {
+                case 'cents':
+                    field.label().text('$')
+                    this.inputFields.numberInput(field, filter.input_key)
+                    break
+                case 'number':
+                    this.inputFields.numberInput(field, filter.input_key)
+                    break
+                default:
+                    this.inputFields.textInput(field, filter.input_key)
+            }
+        })
+    }
+
+    renderDateRangeInput(parent: HtmlParentTag, filter: DateRangeFilter & FilterInput) {
+        parent.div('.tt-compound-field', field => {
+            this.inputFields.dateInput(field, `${filter.input_key}-min`)
+            field.label().text('→')
+            this.inputFields.dateInput(field, `${filter.input_key}-max`)
+            field.a('.icon-only', {title: "Pick a common date range"}, a => {
+                a.i('.glyp-pick_date')
+            })
+            .emitClick(this.pickDateKey, {input_key: filter.input_key})
+
+        })
+    }
+
+    renderInclusionInput(parent: HtmlParentTag, filter: InclusionFilter & FilterInput) {
+        parent.div('.inclusion-radios', container => {
+            for (const possible of filter.possible_values || []) {
+                container.label('.body-size', label => {
+                    this.inputFields.checkbox(label, `${filter.input_key}-${possible}`)
+                    label.span().text(inflection.titleize(possible))
+                })
+            }
+        })
+    }
+
+}

package/data-dive/dives/dive-settings.ts

@@ -0,0 +1,227 @@
+import TerrierPart from "../../terrier/parts/terrier-part"
+import {Logger} from "tuff-core/logging"
+import {messages} from "tuff-core"
+import {PartTag} from "tuff-core/parts"
+import {DdDive, DdDiveEnumFields, UnpersistedDdDive} from "../gen/models"
+import inflection from "inflection"
+import {SchemaDef} from "../../terrier/schema"
+import {ModalPart} from "../../terrier/modals"
+import {Query, QueryModelPicker} from "../queries/queries"
+import Ids from "../../terrier/ids"
+import Db from "../dd-db"
+import {routes} from "../dd-routes"
+import Nav from "tuff-core/nav"
+import {DbErrors} from "../../terrier/db-client"
+import {TerrierFormFields} from "../../terrier/forms"
+import DdSession from "../dd-session"
+import Dives from "./dives";
+
+const log = new Logger("DiveForm")
+
+export const DiveSettingsColumns = ['name', 'description_raw', 'visibility', 'dd_dive_group_id'] as const
+export type DiveSettingsColumn = typeof DiveSettingsColumns[number]
+
+export type DiveSettings = Pick<DdDive, DiveSettingsColumn>
+
+/**
+ * A form for editing the basic properties of a dive.
+ */
+class DiveForm extends TerrierPart<{dive: DiveSettings, session: DdSession}> {
+
+    fields!: TerrierFormFields<DiveSettings>
+
+    async init() {
+        this.fields = new TerrierFormFields<DiveSettings>(this, this.state.dive)
+        this.listen('datachanged', this.fields.dataChangedKey, m => {
+            log.info(`Query fields changed`, m.data)
+            Object.assign(this.state.dive, m.data)
+            this.emitMessage(DiveForm.settingsChangedKey, m.data)
+        }, {attach: 'passive'})
+    }
+
+    static readonly settingsChangedKey = messages.typedKey<DiveSettings>()
+
+
+    get parentClasses(): Array<string> {
+        return ['tt-flex', 'column', 'gap']
+    }
+
+    render(parent: PartTag): any {
+        this.fields.renderErrorBubble(parent)
+        parent.div('.tt-flex.gap.collapsible', row => {
+            // name
+            row.div('.tt-compound-field', field => {
+                field.label().text("Name")
+                this.fields.textInput(field, 'name')
+            })
+
+            // group
+            row.div('.tt-compound-field.shrink', field => {
+                field.label().text("Group")
+                this.fields.select(field, 'dd_dive_group_id', this.state.session.groupOptions())
+            })
+        })
+
+        // description
+        parent.div('.tt-compound-field', field => {
+            field.label().text("Description")
+            this.fields.textInput(field, 'description_raw')
+        })
+
+        // visibility radios
+        parent.div('.tt-flex.gap.align-center.padded', row => {
+            row.label('.caption-size').text("Visibility:")
+            for (const v of DdDiveEnumFields.visibility) {
+                row.label('.caption-size', label => {
+                    this.fields.radio(label, 'visibility', v)
+                    label.span().text(inflection.titleize(v))
+                })
+            }
+        })
+    }
+
+    /**
+     * Sets the errors on the fields and re-renders the form.
+     * @param errors
+     */
+    setErrors(errors: DbErrors<UnpersistedDdDive>) {
+        this.fields.errors = errors
+        this.dirty()
+    }
+
+    async serialize(): Promise<DiveSettings> {
+        return await this.fields.serialize()
+    }
+}
+
+
+////////////////////////////////////////////////////////////////////////////////
+// Dive Settings Modal
+////////////////////////////////////////////////////////////////////////////////
+
+type DiveSettingsState = {
+    schema: SchemaDef
+    session: DdSession
+    dive: UnpersistedDdDive
+}
+
+export class DiveSettingsModal extends ModalPart<DiveSettingsState> {
+
+    settingsForm!: DiveForm
+    modelPicker!: QueryModelPicker
+    saveKey = messages.untypedKey()
+    deleteKey = messages.untypedKey()
+    isNew = true
+
+    async init() {
+        this.isNew = !this.state.dive.id?.length
+
+        this.settingsForm = this.makePart(DiveForm, {
+            dive: this.state.dive, session: this.state.session
+        })
+        this.modelPicker = this.makePart(QueryModelPicker, {schema: this.state.schema})
+
+        if (this.isNew) {
+            this.setTitle("New Dive")
+        }
+        else {
+            this.setTitle("Edit Dive")
+        }
+        this.setIcon('glyp-data_dive')
+
+        this.addAction({
+            title: "Save",
+            icon: 'glyp-checkmark',
+            click: {key: this.saveKey}
+        })
+
+        if (!this.isNew && Dives.canDelete(this.state.dive, this.state.session)) {
+            this.addAction({
+                title: 'Delete',
+                icon: 'glyp-delete',
+                classes: ['alert'],
+                click: {key: this.deleteKey}
+            }, 'secondary')
+        }
+
+        this.onClick(this.saveKey, async _ => {
+            await this.save()
+        })
+
+        this.onClick(this.deleteKey, async _ => {
+            this.app.confirm({title: 'Delete this dive?', body: "Are you sure you want to delete this dive?", icon: 'glyp-delete'}, () => {
+                this.delete()
+            })
+        })
+    }
+
+    renderContent(parent: PartTag): void {
+        parent.div('.tt-flex.tt-form.padded.column.gap.dd-new-dive-form', col => {
+            col.part(this.settingsForm)
+            if (this.isNew) {
+                col.part(this.modelPicker)
+            }
+        })
+    }
+
+    async save() {
+        const dive = {...this.state.dive}
+
+        // settings
+        const settings = await this.settingsForm.serialize()
+        Object.assign(dive, settings)
+
+        // model (for new dives only)
+        if (this.isNew) {
+            const model = this.modelPicker.model
+            if (!model) {
+                this.showToast("Please select a model", {color: 'alert'})
+                return
+            }
+            const query: Query = {
+                id: Ids.makeUuid(),
+                name: settings.name,
+                notes: '',
+                from: {model: model.name}
+            }
+            dive.query_data = {queries: [query]}
+            log.info(`Creating new dive ${dive.name}!`, dive)
+        } else {
+            log.info(`Updating existing dive ${dive.name}`, dive)
+        }
+
+        // upsert
+        const res = await Db().upsert('dd_dive', dive)
+        log.info(`Dive upsert response ${res.status}`, res)
+        if (res.status == 'success') {
+            this.pop()
+
+            // if it's a new dive, go straight to the editor
+            if (this.isNew) {
+                this.app.successToast(`Created Dive ${dive.name}`)
+                Nav.visit(routes.editor.path({id: res.record!.id}))
+            } else {
+                // otherwise just reload the list
+                this.app.successToast(`Updated Dive ${dive.name}`)
+                Nav.visit(routes.list.path({}))
+            }
+        } else {
+            this.settingsForm.setErrors(res.errors)
+        }
+    }
+
+    async delete() {
+        const dive = {...this.state.dive}
+        dive._state = 2
+        const res = await Db().upsert('dd_dive', dive)
+        if (res.status == 'success') {
+            this.pop()
+            this.successToast(`Deleted dive ${dive.name}`)
+            Nav.visit(routes.list.path({}))
+        } else {
+            this.settingsForm.setErrors(res.errors)
+        }
+    }
+
+}
+

package/data-dive/dives/dives.ts

@@ -0,0 +1,81 @@
+import Api from "../../terrier/api"
+import {DdDive, UnpersistedDdDive} from "../gen/models"
+import Db from "../dd-db"
+import DdSession from "../dd-session"
+import {FilterInput} from "../queries/filters"
+import Tables from "../queries/tables"
+import {SchemaDef} from "../../terrier/schema";
+
+
+////////////////////////////////////////////////////////////////////////////////
+// Permissions
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Only supers can delete other peoples' dives.
+ * @param dive
+ * @param session
+ */
+function canDelete(dive: UnpersistedDdDive, session: DdSession): boolean {
+    return dive.owner_id == session.user.id || session.isSuper
+}
+
+
+////////////////////////////////////////////////////////////////////////////////
+// Endpoints
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Get a dive by id.
+ * @param id can be 'test' to get the test dive
+ */
+async function get(id: string): Promise<DdDive> {
+    if (id == 'test') {
+        const res = await Api.safeGet<{ dive: DdDive }>(`/data_dive/test_dive.json`, {})
+        return res.dive
+    } else {
+        return Db().find("dd_dive", id, {owner: {}})
+    }
+}
+
+
+export type DiveListResult = {
+    dives: DdDive[]
+}
+
+async function list(): Promise<DiveListResult> {
+    return await Api.safeGet(`/data_dive/list.json`, {})
+}
+
+
+////////////////////////////////////////////////////////////////////////////////
+// Inputs
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Flatten all the filters from all the queries into a single array.
+ * This approach introduces some limitations but I think it will yield the
+ * desired result most of the time.
+ * @param dive
+ */
+function computeFilterInputs(schema: SchemaDef, dive: DdDive): FilterInput[] {
+    const filters: Record<string, FilterInput> = {}
+    for (const query of dive.query_data?.queries || []) {
+        Tables.computeFilterInputs(schema, query.from, filters)
+    }
+    return Object.values(filters)
+}
+
+
+////////////////////////////////////////////////////////////////////////////////
+// Export
+////////////////////////////////////////////////////////////////////////////////
+
+const Dives = {
+    list,
+    get,
+    canDelete,
+    computeFilterInputs
+}
+
+export default Dives