terrier-engine 4.5.3 → 4.6.2

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

@@ -16,6 +16,7 @@ import inflection from "inflection"
 import Dates, {DateLiteral, DatePeriodPickerPart, DatePeriodPickerState, LiteralDateRange} from "../queries/dates"
 import dayjs from "dayjs"
 import {ProgressBarPart} from "../../terrier/progress";
+import {LogListPart} from "../../terrier/logging";
 
 const log = new Logger("DiveRuns")
 
@@ -26,6 +27,10 @@ type RunQueryResult = {
     message?: string
 }
 
+type InitRunResult = {
+    total_steps: number
+}
+
 const statusIcons: Record<RunQueryResult['status'], IconName> = {
     pending: 'glyp-pending',
     success: 'glyp-complete',
@@ -48,6 +53,7 @@ export class DiveRunModal extends ModalPart<{dive: DdDive }> {
     fileOutput?: RunFileOutput
     queryResults: Record<string, RunQueryResult> = {}
     progressBar!: ProgressBarPart
+    logList!: LogListPart
 
     startKey = messages.untypedKey()
     pickDateKey = messages.typedKey<{ input_key: string }>()
@@ -58,9 +64,8 @@ export class DiveRunModal extends ModalPart<{dive: DdDive }> {
 
         this.schema = await Schema.get()
 
-        // progress is # queries +1 for creating and run and +1 for the output
-        const total = (this.state.dive.query_data?.queries?.length || 0) + 2
-        this.progressBar = this.makePart(ProgressBarPart, {total})
+        this.progressBar = this.makePart(ProgressBarPart, {total: 10})
+        this.logList = this.makePart(LogListPart, {})
 
         // initialize the inputs
         this.filters = Dives.computeFilterInputs(this.schema, this.state.dive)
@@ -123,6 +128,7 @@ export class DiveRunModal extends ModalPart<{dive: DdDive }> {
         const res = await Db().upsert('dd_dive_run', newRun)
         if (res.status == 'success' && res.record) {
             this.beginStreaming(res.record)
+            this.logList.info(`Created dive run`)
         } else {
             this.alertToast(`Error creating dive run: ${res.message}`)
         }
@@ -133,6 +139,11 @@ export class DiveRunModal extends ModalPart<{dive: DdDive }> {
     beginStreaming(run: DdDiveRun) {
         this.run = run
         Api.stream(`/data_dive/stream_run/${this.run.id}`)
+            .on<InitRunResult>('init_run', res => {
+                this.progressBar.setTotal(res.total_steps)
+                log.info(`Total steps for run: ${res.total_steps}`)
+                this.dirty()
+            })
             .on<RunQueryResult>('query_result', res => {
                 this.queryResults[res.id] = res
                 this.progressBar.increment()
@@ -144,6 +155,12 @@ export class DiveRunModal extends ModalPart<{dive: DdDive }> {
                 this.progressBar.complete('success')
                 this.dirty()
             })
+            .onLog(evt => {
+                this.progressBar.increment()
+                log.log(evt.level, evt.message)
+                this.logList.push(evt)
+                this.dirty()
+            })
             .onError(evt => {
                 this.error = evt
                 this.stopActionLoading()
@@ -160,6 +177,8 @@ export class DiveRunModal extends ModalPart<{dive: DdDive }> {
     renderContent(parent: PartTag): void {
         parent.div('.tt-flex.padded.gap.column', col => {
             col.part(this.progressBar)
+
+            // inputs and outputs row
             col.div('.tt-flex.collapsible.gap.tt-form', row => {
                 // inputs
                 row.div('.tt-flex.column.shrink.dd-dive-run-inputs', col => {
@@ -197,6 +216,9 @@ export class DiveRunModal extends ModalPart<{dive: DdDive }> {
                     }
                 })
             })
+
+            // log
+            col.part(this.logList)
         })
     }
 

package/data-dive/queries/queries.ts

@@ -50,24 +50,19 @@ async function validate(query: Query): Promise<QueryValidation> {
 }
 
 
-////////////////////////////////////////////////////////////////////////////////
-// Inputs
-////////////////////////////////////////////////////////////////////////////////
-
-
-
 ////////////////////////////////////////////////////////////////////////////////
 // Preview
 ////////////////////////////////////////////////////////////////////////////////
 
 export type QueryResultRow = Record<string, any>
 
-const ColumnTypes = ['string', 'integer', 'float', 'date', 'time',  'dollars'] as const
+const ColumnTypes = ['string', 'integer', 'float', 'date', 'datetime', 'cents', 'dollars'] as const
 
 export type ColumnType = typeof ColumnTypes[number]
 
 export type QueryResultColumn = {
-    name: string
+    select_name: string
+    column_name: string
     type: ColumnType
 }
 
@@ -102,15 +97,19 @@ function renderCell(td: TableCellTag, col: QueryResultColumn, val: any): any {
         case 'date':
             const date = dayjs(val.toString())
             return td.div('.date').text(date.format(DateFormat))
-        case 'time':
+        case 'datetime':
             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 'cents':
+            const cents = parseInt(val)
+            const d = (cents/100.0).toFixed(2)
+            return td.div('.dollars').text(`\$${d}`)
         case 'string':
-            if (col.name.endsWith('id')) {
+            if (col.select_name.endsWith('id')) {
                 const id = val.toString()
                 td.a('.id')
                     .data({tooltip: id})
@@ -134,7 +133,7 @@ function renderTable(parent: PartTag, rows: QueryResultRow[], columns: QueryResu
             thead.tr(tr => {
                 for (const col of columns) {
                     tr.th(col.type, th => {
-                        th.a().text(col.name)
+                        th.a().text(col.select_name)
                     })
                 }
             })
@@ -146,7 +145,7 @@ function renderTable(parent: PartTag, rows: QueryResultRow[], columns: QueryResu
                 tbody.tr(tr => {
                     for (const col of columns) {
                         tr.td(td => {
-                            const val = row[col.name]
+                            const val = row[col.select_name]
                             if (val) {
                                 renderCell(td, col, val)
                             }

package/package.json

@@ -4,7 +4,7 @@
   "files": [
     "*"
   ],
-  "version": "4.5.3",
+  "version": "4.6.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/Terrier-Tech/terrier-engine"

package/terrier/api.ts

@@ -1,5 +1,6 @@
 import { Logger } from "tuff-core/logging"
 import { QueryParams } from "tuff-core/urls"
+import {LogEntry} from "./logging"
 
 const log = new Logger('Api')
 log.level = 'debug'
@@ -113,17 +114,6 @@ async function post<ResponseType>(url: string, body: Record<string, unknown> | F
 // Event Streams
 ////////////////////////////////////////////////////////////////////////////////
 
-type LogLevel = 'success' | 'info' | 'warn' | 'debug'
-
-/**
- * Type of log events from a streaming response.
- */
-export type LogEvent = {
-    level: LogLevel
-    prefix?: string
-    message: string
-}
-
 /**
  * Type of error events from a streaming response.
  */
@@ -188,8 +178,8 @@ export class Streamer {
      * Listen specifically for log events.
      * @param listener
      */
-    onLog(listener: (event: LogEvent) => any) {
-        return this.on<LogEvent>('_log', listener)
+    onLog(listener: (event: LogEntry) => any) {
+        return this.on<LogEntry>('_log', listener)
     }
 
     /**

package/terrier/dropdowns.ts

@@ -77,7 +77,7 @@ export abstract class Dropdown<TState> extends TerrierPart<TState> {
     }
 
     update(_elem: HTMLElement) {
-        const content = _elem.querySelector('.tt-dropdown-content')
+        const content: HTMLElement | null = _elem.querySelector('.tt-dropdown-content')
         if (content) {
             if (this.anchorTarget) {
                 log.info(`Anchoring dropdown`, content, this.anchorTarget)

package/terrier/logging.ts

@@ -0,0 +1,75 @@
+import TerrierPart from "./parts/terrier-part"
+import {NoState, PartTag} from "tuff-core/parts"
+
+////////////////////////////////////////////////////////////////////////////////
+// Types
+////////////////////////////////////////////////////////////////////////////////
+
+export type LogLevel = 'success' | 'info' | 'warn' | 'error' | 'debug'
+
+/**
+ * Type of log events from a streaming response.
+ */
+export type LogEntry = {
+    level: LogLevel
+    prefix?: string
+    message: string
+}
+
+
+////////////////////////////////////////////////////////////////////////////////
+// List Part
+////////////////////////////////////////////////////////////////////////////////
+
+export class LogListPart extends TerrierPart<NoState> {
+
+    entries: LogEntry[] = []
+
+    async init() {
+    }
+
+    render(parent: PartTag): any {
+        parent.div('.tt-log-entries', entries => {
+            for (const entry of this.entries) {
+                this.renderEntry(entries, entry)
+            }
+        })
+    }
+
+    /**
+     * Pushes an entry to the list and renders it.
+     * @todo make this more performant for large lists!
+     * @param entry
+     */
+    push(entry: LogEntry) {
+        this.entries.push(entry)
+        this.dirty()
+    }
+
+    success(message: string, prefix: string | undefined) {
+        this.push({message, prefix, level: "success"})
+    }
+
+    info(message: string, prefix?: string) {
+        this.push({message, prefix, level: "info"})
+    }
+
+    warn(message: string, prefix?: string) {
+        this.push({message, prefix, level: "warn"})
+    }
+
+    error(message: string, prefix?: string) {
+        this.push({message, prefix, level: "error"})
+    }
+
+    debug(message: string, prefix?: string) {
+        this.push({message, prefix, level: "debug"})
+    }
+
+    renderEntry(parent: PartTag, entry: LogEntry) {
+        parent.div(`.log-entry.${entry.level}`, row => {
+            row.div('.message').text(entry.message)
+        })
+    }
+
+}

package/terrier/overlays.ts

@@ -164,15 +164,24 @@ type AnchorResult = {
     valid: boolean
 }
 
-function clampHorizontal(result: AnchorResult, size: Size, container: Size) {
+function clampAnchorResult(result: AnchorResult, size: Size, container: Size) {
     if (container.width < size.width) {
         result.width = container.width
     }
     const rightOffset = container.width - (result.width ?? size.width) // don't hang off the right side of the viewport
-    result.left = Math.max(0, Math.min(result.left, rightOffset)) // don't hang off the left side of the viewport
+    result.left = Math.max(0, Math.min(result.left, rightOffset))
     if (result.top < 0 || result.top+size.height > container.height) {
         result.valid = false
     }
+
+    if (container.height < size.height) {
+        result.height = container.height
+    }
+    const bottomOffset = container.height - (result.height ?? size.height) // don't hang off the bottom of the viewport
+    result.top = Math.max(0, Math.min(result.top, bottomOffset))
+    if (result.left < 0 || result.left + size.width > container.width) {
+        result.valid = false
+    }
 }
 
 function anchorBoxBottom(size: Size, anchor: Box, container: Size): AnchorResult {
@@ -181,7 +190,7 @@ function anchorBoxBottom(size: Size, anchor: Box, container: Size): AnchorResult
         left: anchor.x + anchor.width / 2 - size.width / 2,
         valid: true
     }
-    clampHorizontal(result, size, container)
+    clampAnchorResult(result, size, container)
     return result
 }
 
@@ -191,28 +200,17 @@ function anchorBoxTop(size: Size, anchor: Box, container: Size): AnchorResult {
         left: anchor.x + anchor.width / 2 - size.width / 2,
         valid: true
     }
-    clampHorizontal(result, size, container)
+    clampAnchorResult(result, size, container)
     return result
 }
 
-function clampVertical(result: AnchorResult, size: Size, container: Size) {
-    if (container.height < size.height) {
-        result.height = container.height
-    }
-    const bottomOffset = container.height - (result.height ?? size.height) // don't hang off the bottom of the viewport
-    result.top = Math.max(0, Math.min(result.top, bottomOffset)) // don't hang off the top of the viewport
-    if (result.left < 0 || result.left + size.width > container.width) {
-        result.valid = false
-    }
-}
-
 function anchorBoxLeft(size: Size, anchor: Box, container: Size): AnchorResult {
     const result = {
         top: anchor.y + anchor.height/2 - size.height / 2,
         left: anchor.x - size.width,
         valid: true
     }
-    clampVertical(result, size, container)
+    clampAnchorResult(result, size, container)
     return result
 }
 
@@ -222,7 +220,7 @@ function anchorBoxRight(size: Size, anchor: Box, container: Size): AnchorResult
         left: anchor.x + anchor.width,
         valid: true
     }
-    clampVertical(result, size, container)
+    clampAnchorResult(result, size, container)
     return result
 }
 

package/terrier/progress.ts

@@ -14,6 +14,16 @@ export class ProgressBarPart extends TerrierPart<ProgressState> {
     progress = 0
     color: ColorName = 'primary'
 
+    /**
+     * Set the total number of steps.
+     * @param total
+     */
+    setTotal(total: number) {
+        this.state.total = total
+        this.progress = Math.min(this.progress, this.state.total)
+        this.dirty()
+    }
+
     /**
      * Sets the progress and (optionally) color, then dirties the part.
      * @param progress