terrier-engine 4.32.1 → 4.32.2

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

@@ -18,13 +18,17 @@ export type DivePlotAxis = {
 }
 
 const axisTypeOptions = [
-    {value: 'none', title: 'None'},
     {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>) {
@@ -39,18 +43,8 @@ export class DivePlotAxisFields extends TerrierFormFields<DivePlotAxis> {
             this.textInput(container, "title", {placeholder: "Title"})
 
             // type
-            const typeDir = this.side == 'bottom' ? 'row' : 'column'
-            container.div(`.tt-flex.wrapped.small-gap.${typeDir}`, flex => {
-                axisTypeOptions.forEach(option => {
-                    if ((this.side == 'bottom' || this.side == 'left') && option.value == 'none') {
-                        return // don't let them not have a bottom or left axis
-                    }
-                    flex.label(".caption-size", label => {
-                        this.radio(label, 'type', option.value)
-                        label.span().text(option.title)
-                    })
-                })
-            })
+            const typeOptions = this.side == 'right' ? rightAxisTypeOptions : axisTypeOptions
+            this.select(container, 'type', typeOptions)
         })
     }
 }

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

@@ -9,7 +9,13 @@ 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 {DivePlotTrace} from "./dive-plot-trace"
+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")
 
@@ -21,10 +27,14 @@ 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()
 
@@ -37,7 +47,7 @@ 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)
 
@@ -50,7 +60,35 @@ export default class DivePlotEditor extends ModalPart<DivePlotEditorState> {
         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)
 
@@ -66,8 +104,31 @@ 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 => {
+        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 => {
@@ -85,12 +146,17 @@ export default class DivePlotEditor extends ModalPart<DivePlotEditorState> {
 
             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(),

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/package.json

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

package/terrier/forms.ts

@@ -155,6 +155,21 @@ export class TerrierFormFields<T extends FormPartData> extends FormFields<T> {
         })
     }
 
+    /**
+     * 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/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})
                 }

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

@@ -1,16 +0,0 @@
-import {MarkerStyle, TraceStyle, TraceType, YAxisName} from "tuff-plot/trace";
-
-/**
- * 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
-}