terrier-engine 4.32.0 → 4.32.2

package/data-dive/gen/models.ts

@@ -1,4 +1,4 @@
-// This file was automatically generated on 2024-07-17 13:26:00 -0500, DO NOT EDIT IT MANUALLY!
+// This file was automatically generated on 2024-07-25 17:02:53 -0500, DO NOT EDIT IT MANUALLY!
 
 import { Query } from "../queries/queries"
 
@@ -171,6 +171,7 @@ export type DdDiveRun = {
     output_data?: object
     output_file_data?: Attachment | { path: string }
     status: "initial" | "running" | "success" | "error"
+    delivery_mode?: string
     delivery_recipients?: string[]
     delivery_data?: object
     created_by?: DdUser
@@ -194,6 +195,7 @@ export type UnpersistedDdDiveRun = {
     output_data?: object
     output_file_data?: Attachment | { path: string }
     status: "initial" | "running" | "success" | "error"
+    delivery_mode?: string
     delivery_recipients?: string[]
     delivery_data?: object
     created_by?: DdUser

package/data-dive/plots/dive-plot-axes.ts

@@ -0,0 +1,56 @@
+import {AxisType} from "tuff-plot/axis"
+import {TerrierFormFields} from "../../terrier/forms"
+import {PartTag} from "tuff-core/parts"
+import TerrierPart from "../../terrier/parts/terrier-part"
+import {DbErrors} from "../../terrier/db-client"
+import * as inflection from "inflection"
+
+
+// let's not worry about a top axis for now
+const axisSides = ['left', 'bottom', 'right'] as const
+export type AxisSide = typeof axisSides[number]
+
+export type DivePlotAxisType = AxisType | 'none'
+
+export type DivePlotAxis = {
+    type: DivePlotAxisType
+    title: string
+}
+
+const axisTypeOptions = [
+    {value: 'number', title: 'Number'},
+    {value: 'time', title: 'Date/Time'},
+    {value: 'group', title: 'Grouped Bars'},
+    {value: 'stack', title: 'Stacked Bars'},
+]
+
+// the right axis isn't required
+const rightAxisTypeOptions = axisTypeOptions.concat([
+    {value: 'none', title: 'None'}
+])
+
+export class DivePlotAxisFields extends TerrierFormFields<DivePlotAxis> {
+
+    constructor(part: TerrierPart<any>, axis: DivePlotAxis, readonly side: AxisSide, errors?: DbErrors<DivePlotAxis>) {
+        super(part, axis, errors)
+    }
+
+    render(parent: PartTag) {
+        parent.div(`.dd-dive-plot-axis-fields.tt-form.shrink.${this.side}`, container => {
+            container.div('.side').text(`${inflection.titleize(this.side)} Axis:`)
+
+            // title
+            this.textInput(container, "title", {placeholder: "Title"})
+
+            // type
+            const typeOptions = this.side == 'right' ? rightAxisTypeOptions : axisTypeOptions
+            this.select(container, 'type', typeOptions)
+        })
+    }
+}
+
+
+const DivePlotAxes = {
+    axisSides
+}
+export default DivePlotAxes

package/data-dive/plots/dive-plot-editor.ts

@@ -3,12 +3,19 @@ import {ModalPart} from "../../terrier/modals"
 import {DiveEditorState} from "../dives/dive-editor"
 import {UnpersistedDdDivePlot} from "../gen/models"
 import {TerrierFormFields} from "../../terrier/forms"
-import {DivePlotTrace} from "./dive-plots"
 import Messages from "tuff-core/messages"
 import {Logger} from "tuff-core/logging"
 import DivePlotList from "./dive-plot-list"
 import Db from "../dd-db"
 import DivePlotRenderPart from "./dive-plot-render-part"
+import {DivePlotAxis, DivePlotAxisFields} from "./dive-plot-axes"
+import DivePlotTraces, {
+    DivePlotTrace,
+    DivePlotTraceEditor,
+    DivePlotTraceRow,
+} from "./dive-plot-traces"
+import Fragments from "../../terrier/fragments"
+import Arrays from "tuff-core/arrays"
 
 const log = new Logger("DivePlotList")
 
@@ -16,13 +23,18 @@ export type DivePlotEditorState = DiveEditorState & {
     plot: UnpersistedDdDivePlot
 }
 
-
-
 export default class DivePlotEditor extends ModalPart<DivePlotEditorState> {
 
     plot!: UnpersistedDdDivePlot
     fields!: TerrierFormFields<UnpersistedDdDivePlot>
+
+    leftAxisFields!: DivePlotAxisFields
+    rightAxisFields!: DivePlotAxisFields
+    bottomAxisFields!: DivePlotAxisFields
+
+    newTraceKey = Messages.untypedKey()
     traces: DivePlotTrace[] = []
+
     renderPart!: DivePlotRenderPart
     saveKey = Messages.untypedKey()
 
@@ -35,11 +47,48 @@ export default class DivePlotEditor extends ModalPart<DivePlotEditorState> {
         else {
             this.setTitle("New Dive Plot")
         }
-        this.setIcon("hub-plot")
+        this.setIcon("glyp-differential")
 
         this.fields = new TerrierFormFields<UnpersistedDdDivePlot>(this, this.plot)
 
+        // axis fields
+        const axes = this.plot.layout.axes || {}
+        const leftAxis: DivePlotAxis = axes['left'] || {type: 'number', title: ''}
+        this.leftAxisFields = new DivePlotAxisFields(this, leftAxis, 'left')
+        const rightAxis: DivePlotAxis = axes['right'] || {type: 'none', title: ''}
+        this.rightAxisFields = new DivePlotAxisFields(this, rightAxis, 'right')
+        const bottomAxis: DivePlotAxis = axes['bottom'] || {type: 'number', title: ''}
+        this.bottomAxisFields = new DivePlotAxisFields(this, bottomAxis, 'bottom')
+
+        // trace editors
         this.traces = this.plot.traces || []
+        this.updateTraces()
+
+        this.onClick(this.newTraceKey, _ => {
+            log.info("Showing new trace form")
+            const state = {
+                ...this.state,
+                trace: DivePlotTraces.blankTrace(),
+                onSave: (newTrace: DivePlotTrace) => this.addTrace(newTrace),
+                onDelete: (_: DivePlotTrace) => {}
+            }
+            this.app.showModal(DivePlotTraceEditor, state)
+        })
+
+        this.onClick(DivePlotTraces.editKey, m => {
+            const id = m.data.id
+            log.info(`Editing plot trace ${id}`)
+            const trace = this.traces.find(t => t.id==id)
+            if (trace) {
+                const state = {
+                    ...this.state,
+                    trace,
+                    onSave: (newTrace: DivePlotTrace) => this.replaceTrace(newTrace),
+                    onDelete: (trace: DivePlotTrace) => this.removeTrace(trace),
+                }
+                this.app.showModal(DivePlotTraceEditor, state)
+            }
+        })
 
         this.renderPart = this.makePart(DivePlotRenderPart, this.state)
 
@@ -55,23 +104,66 @@ export default class DivePlotEditor extends ModalPart<DivePlotEditorState> {
         })
     }
 
+    addTrace(trace: DivePlotTrace) {
+        this.traces.push(trace)
+        this.updateTraces()
+    }
+
+    replaceTrace(trace: DivePlotTrace) {
+        // TODO: implement this in tuff-core
+        log.info(`Replacing trace ${trace.id}`, trace)
+        this.traces = this.traces.map(t => t.id === trace.id ? trace : t)
+        this.updateTraces()
+    }
+
+    removeTrace(trace: DivePlotTrace) {
+        log.info(`Removing trace ${trace.id}`, trace)
+        this.traces = Arrays.compact(this.traces.map(t => t.id === trace.id ? null : t))
+        this.updateTraces()
+    }
+
+    updateTraces() {
+        this.assignCollection('traces', DivePlotTraceRow, this.traces || [])
+        this.dirty()
+    }
+
     renderContent(parent: PartTag): void {
-        parent.div(".tt-flex.column.padded.gap", mainColumn => {
-            this.fields.compoundField(mainColumn, field => {
-                field.label(".required").text("Title")
-                this.fields.textInput(field, 'title')
+        parent.div(".tt-flex.column.padded.large-gap", mainColumn => {
+
+            mainColumn.div(".dd-plot-axes-and-preview.tt-flex.column.gap", axesAndPreview => {
+                this.fields.compoundField(axesAndPreview, field => {
+                    field.label(".required").text("Title")
+                    this.fields.textInput(field, 'title', {class: 'shrink plot-title'})
+                }).class('plot-title-field')
+                axesAndPreview.div('.tt-flex.gap', row => {
+                    this.leftAxisFields.render(row)
+                    row.part(this.renderPart)
+                    this.rightAxisFields.render(row)
+                })
+                this.bottomAxisFields.render(axesAndPreview)
             })
 
-            mainColumn.part(this.renderPart)
 
             mainColumn.h3(".glyp-items").text("Traces")
 
+            this.renderCollection(mainColumn, 'traces')
+
+            mainColumn.div('.tt-flex.justify-center', row => {
+                Fragments.button(row, this.theme, "New Trace", 'glyp-plus')
+            }).emitClick(this.newTraceKey)
         })
     }
 
     async save() {
         const plotData = await this.fields.serialize()
-        const plot = {...this.plot, title: plotData.title}
+        const plot = {...this.plot, title: plotData.title, traces: this.traces}
+
+        plot.layout.axes = {
+            left: await this.leftAxisFields.serialize(),
+            bottom: await this.bottomAxisFields.serialize(),
+            right: await this.rightAxisFields.serialize()
+        }
+
         log.info("Saving plot", plot)
 
         const res = await Db().upsert('dd_dive_plot', plot)

package/data-dive/plots/dive-plot-list.ts

@@ -100,7 +100,7 @@ export default class DivePlotList extends TerrierPart<DiveEditorState> {
     render(parent: PartTag): any {
         this.renderCollection(parent, "plots")
 
-        Fragments.button(parent, this.theme, "New Plot", "hub-plus", "secondary")
+        Fragments.button(parent, this.theme, "New Plot", "glyp-plus_outline", "secondary")
             .emitClick(this.newKey)
     }
 

package/data-dive/plots/dive-plot-traces.ts

@@ -0,0 +1,233 @@
+import {MarkerStyle, TraceStyle, TraceType, YAxisName} from "tuff-plot/trace"
+import TerrierFormPart from "../../terrier/parts/terrier-form-part"
+import { PartTag } from "tuff-core/parts"
+import {ModalPart} from "../../terrier/modals"
+import Ids from "../../terrier/ids"
+import {DivePlotEditorState} from "./dive-plot-editor"
+import {TerrierFormFields} from "../../terrier/forms"
+import {UnpersistedDdDivePlot} from "../gen/models"
+import {SelectOptions} from "tuff-core/forms"
+import Queries, {Query} from "../queries/queries"
+import {Logger} from "tuff-core/logging"
+import Columns from "../queries/columns";
+import Messages from "tuff-core/messages";
+
+const log = new Logger("DivePlotTraces")
+
+/**
+ * Similar to the tuff-plot Trace but not strongly typed to the data type since it's dynamically assigned to a query.
+ */
+export type DivePlotTrace = {
+    id: string
+    type: TraceType
+    title: string
+    query_id: string
+    x: string
+    y: string
+    y_axis: YAxisName
+    style?: TraceStyle
+    marker?: MarkerStyle
+}
+
+/**
+ * Create a new blank trace.
+ */
+function blankTrace(): DivePlotTrace {
+    return {
+        id: Ids.makeUuid(),
+        type: 'scatter',
+        title: '',
+        query_id: '',
+        x: '',
+        y: '',
+        y_axis: 'left',
+        style: {}
+    }
+}
+
+
+/// Trace Style Fields
+
+/**
+ * Form fields for editing trace style.
+ */
+class TraceStyleFields extends TerrierFormFields<TraceStyle> {
+
+        render(parent: PartTag) {
+            parent.div('.tt-form.tt-flex.gap.wrap', container => {
+                this.compoundField(container, field => {
+                    field.label().text("Color")
+                    this.textInput(field, 'stroke', {placeholder: 'Color'})
+                })
+                this.compoundField(container, field => {
+                    field.label().text("Width")
+                    this.numberInput(field, 'strokeWidth', {placeholder: 'Width'})
+                })
+                this.compoundField(container, field => {
+                    field.label().text("Dashes")
+                    this.textInput(field, 'strokeDasharray', {placeholder: 'Dashes'})
+                })
+            })
+        }
+
+
+}
+
+
+/// Editor
+
+export type DivePlotTraceState = DivePlotEditorState & {
+    trace: DivePlotTrace
+    onSave: (trace: DivePlotTrace) => any
+    onDelete: (trace: DivePlotTrace) => any
+}
+
+const editKey = Messages.typedKey<{ id: string }>()
+
+/**
+ * Editor for a single plot trace.
+ */
+export class DivePlotTraceEditor extends ModalPart<DivePlotTraceState> {
+
+    fields!: TerrierFormFields<DivePlotTrace>
+    queries: Query[] = []
+    plot!: UnpersistedDdDivePlot
+    trace!: DivePlotTrace
+
+    queryOptions!: SelectOptions
+    axisOptions: string[] = []
+
+    styleFields!: TraceStyleFields
+
+    saveKey = Messages.untypedKey()
+    deleteKey = Messages.untypedKey()
+
+    async init() {
+        this.setTitle("Plot Trace Editor")
+        this.setIcon("glyp-items")
+
+        this.plot = this.state.plot
+        this.trace = this.state.trace
+
+        this.queries = this.state.dive.query_data?.queries || []
+        this.queryOptions = this.queries.map(query => {
+            return {value: query.id, title: query.name}
+        }) || []
+
+        this.trace.query_id ||= this.queries.at(0)?.id || ''
+        this.updateAxisOptions(this.trace.query_id)
+
+        this.fields = new TerrierFormFields<DivePlotTrace>(this, this.state.trace)
+
+        this.styleFields = new TraceStyleFields(this, this.trace.style || {})
+
+        this.addAction({
+            title: "Save",
+            icon: "glyp-checkmark",
+            click: {key: this.saveKey}
+        })
+
+        this.addAction({
+            title: "Delete",
+            icon: "glyp-delete",
+            click: {key: this.deleteKey},
+            classes: ['alert']
+        }, 'secondary')
+
+        this.onClick(this.saveKey, _ => {
+            this.save()
+        })
+
+        this.onClick(this.deleteKey, _ => {
+            this.state.onDelete(this.trace)
+            this.pop()
+        })
+    }
+
+    /**
+     * Update the axis options based on the query.
+     */
+    updateAxisOptions(queryId: string) {
+        const query = this.queries.find(q => q.id == queryId)
+        this.axisOptions = []
+        if (query) {
+            log.info(`Computing axis options for query`, query)
+            Queries.eachColumn(query, (table, column) => {
+                this.axisOptions.push(Columns.computeSelectName(table, column))
+            })
+        }
+        else {
+            log.warn(`No query with id ${queryId}`)
+        }
+        this.dirty()
+    }
+
+    renderContent(parent: PartTag): void {
+        parent.div(".tt-form.tt-flex.large-gap.column.padded", mainColumn => {
+            // query
+            this.fields.compoundField(mainColumn, field => {
+                field.label().text("Query")
+                this.fields.select(field, 'query_id', this.queryOptions)
+            })
+
+            // axes
+            mainColumn.div('.tt-flex.gap', row => {
+                row.div('.tt-flex.column.gap', col => {
+                    col.h3().text("X Column")
+                    for (const c of this.axisOptions) {
+                        this.fields.radioLabel(col, 'x', c, c)
+                    }
+                })
+                row.div('.tt-flex.column.gap', col => {
+                    col.h3().text("Y Column")
+                    for (const c of this.axisOptions) {
+                        this.fields.radioLabel(col, 'y', c, c)
+                    }
+                })
+            })
+
+            // style
+            mainColumn.div('.tt-flex.gap.column', styleRow => {
+                styleRow.h3().text("Style")
+                this.styleFields.render(styleRow)
+            })
+        })
+    }
+
+    async save() {
+        const data = await this.fields.serialize()
+        this.trace = {...this.trace, ...data}
+        log.info("Saving plot trace", this.trace)
+        this.state.onSave(this.trace)
+        this.pop()
+    }
+
+}
+
+
+/// Row
+
+/**
+ * Row for displaying a single plot trace.
+ */
+export class DivePlotTraceRow extends TerrierFormPart<DivePlotTrace> {
+
+    render(parent: PartTag) {
+        const trace = this.state
+        parent.a('.dd-dive-plot-trace-row.tt-panel.padded', panel => {
+            panel.div('.panel-content.tt-flex.row.gap', content => {
+                content.div('.axes').text(`${trace.x} -> ${trace.y}`)
+            })
+        }).emitClick(editKey, {id: trace.id})
+    }
+
+}
+
+
+/// Export
+
+const DivePlotTraces = {
+    blankTrace,
+    editKey
+}
+export default DivePlotTraces

package/data-dive/plots/dive-plots.ts

@@ -1,27 +1,19 @@
-
-import {MarkerStyle, TraceStyle, TraceType, YAxisName} from "tuff-plot/trace"
-import {PlotLayout} from "tuff-plot/layout"
 import {DdDive, DdDivePlot} from "../gen/models"
 import Db from "../dd-db"
+import {DivePlotAxis} from "./dive-plot-axes"
 
-/**
- * Similar to the tuff-plot Trace but not strongly typed to the data type since it's dynamically assigned to a query.
- */
-export type DivePlotTrace = {
-    id: string
-    type: TraceType
-    title: string
-    query_id: string
-    x: string
-    y: string
-    y_axis: YAxisName
-    style?: TraceStyle
-    marker?: MarkerStyle
-}
 
-// maybe we'll add more in the future
-export type DivePlotLayout = PlotLayout
+// mimic PlotLayout but with our own types
+export type DivePlotLayout = {
+    pad?: number
+    axes?: {
+        left?: DivePlotAxis
+        top?: DivePlotAxis
+        right?: DivePlotAxis
+        bottom?: DivePlotAxis
+    }
 
+}
 /**
  * Get all plots for the given dive.
  * @param dive

package/package.json

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

package/terrier/forms.ts

@@ -150,11 +150,26 @@ export class TerrierFormFields<T extends FormPartData> extends FormFields<T> {
      * @param fun a function that accepts the field as an argument, to actually populate the field
      */
     compoundField(parent: PartTag, fun: (field: DivTag) => any) {
-        parent.div(".tt-compound-field", field => {
+        return parent.div(".tt-compound-field", field => {
             fun(field)
         })
     }
 
+    /**
+     * Makes a label with a radio and title span inside of it.
+     * @param parent
+     * @param name
+     * @param value
+     * @param title the title to put in the label span
+     * @param attrs attributes for the radio input
+     */
+    radioLabel<Key extends KeyOfType<T, string> & string>(parent: PartTag, name: Key, value: string, title?: string, attrs: InputTagAttrs = {}) {
+        return parent.label('.body-size', label => {
+            this.radio(label, name, value, attrs)
+            label.span().text(title || value)
+        })
+    }
+
 }
 
 

package/terrier/parts/page-part.ts

@@ -150,8 +150,6 @@ export default abstract class PagePart<TState> extends ContentPart<TState> {
         if (!this._breadcrumbs.length && !this._title?.length) return
 
         parent.h1('.breadcrumbs', h1 => {
-            const crumbs = Array.from(this._breadcrumbs)
-
             // add a breadcrumb for the page title
             if (this._title?.length) {
                 const titleCrumb: Action = {
@@ -164,10 +162,10 @@ export default abstract class PagePart<TState> extends ContentPart<TState> {
                 if (this._titleClasses?.length) {
                     titleCrumb.classes = this._titleClasses
                 }
-                crumbs.push(titleCrumb)
+                this.addBreadcrumb(titleCrumb)
             }
 
-            this.app.theme.renderActions(h1, crumbs)
+            this.app.theme.renderActions(h1, Array.from(this._breadcrumbs))
         })
     }
 

package/terrier/theme.ts

@@ -35,6 +35,7 @@ export type Action = {
     subtitle?: string
     tooltip?: string
     icon?: IconName
+    img?: string
     href?: string
     classes?: string[]
     click?: Packet
@@ -101,6 +102,9 @@ export default class Theme {
                 if (action.icon?.length) {
                     this.renderIcon(a, action.icon, iconColor)
                 }
+                if (action.img?.length) {
+                    a.img('.image', {src:  action.img})
+                }
                 if (action.title?.length) {
                     a.div('.title', {text: action.title})
                 }