terrier-engine 4.34.0 → 4.35.0

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

@@ -1,7 +1,7 @@
 import {PartTag} from "tuff-core/parts"
 import DiveEditor, {DiveEditorState} from "./dive-editor"
 import TerrierPart from "../../terrier/parts/terrier-part"
-import {RegularSchedule, RegularScheduleForm} from "../../terrier/schedules"
+import {RegularSchedule, RegularScheduleFields} from "../../terrier/schedules"
 import {Logger} from "tuff-core/logging"
 import {EmailListForm} from "../../terrier/emails"
 import {DdDiveRun} from "../gen/models"
@@ -24,17 +24,17 @@ export type DiveDeliverySettings = {
 
 export class DiveDeliveryForm extends TerrierPart<DiveEditorState> {
 
-    scheduleForm!: RegularScheduleForm
+    scheduleFields!: RegularScheduleFields
     recipientsForm!: EmailListForm
     deliveryList!: DiveDeliveryList
 
     async init() {
         const schedule = this.state.dive.delivery_schedule || {schedule_type: 'none'}
-        this.scheduleForm = this.makePart(RegularScheduleForm, schedule)
+        this.scheduleFields = new RegularScheduleFields(this, schedule)
         this.recipientsForm = this.makePart(EmailListForm, {emails: this.state.dive.delivery_recipients || []})
         this.deliveryList = this.makePart(DiveDeliveryList, this.state)
 
-        this.listen('datachanged', this.scheduleForm.dataChangedKey, m => {
+        this.listen('datachanged', this.scheduleFields.dataChangedKey, m => {
             log.info(`Schedule form data changed`, m.data)
             this.emitMessage(DiveEditor.diveChangedKey, {})
         })
@@ -51,7 +51,7 @@ export class DiveDeliveryForm extends TerrierPart<DiveEditorState> {
 
     render(parent: PartTag): any {
         parent.h3(".glyp-setup").text("Schedule")
-        parent.part(this.scheduleForm)
+        this.scheduleFields.render(parent)
         parent.h3(".glyp-users").text("Recipients")
         parent.part(this.recipientsForm)
         parent.div('.deliveries', deliveriesContainer => {
@@ -65,7 +65,14 @@ export class DiveDeliveryForm extends TerrierPart<DiveEditorState> {
      * Serializes just the fields needed for the delivery settings.
      */
     async serialize(): Promise<DiveDeliverySettings> {
-        const delivery_schedule = await this.scheduleForm.serializeConcrete()
+        if (!this.isAttached) {
+            // it was never actually rendered
+            log.info("Skipping delivery setting serialization since it was never rendered", this)
+            const delivery_schedule = this.state.dive.delivery_schedule || {schedule_type: 'none'}
+            const delivery_recipients = this.state.dive.delivery_recipients || []
+            return {delivery_schedule, delivery_recipients}
+        }
+        const delivery_schedule = await this.scheduleFields.serializeConcrete()
         log.info(`Serialized ${delivery_schedule.schedule_type} delivery schedule`, delivery_schedule)
         const delivery_recipients = this.recipientsForm.state.emails
         return {delivery_schedule, delivery_recipients}

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

@@ -119,9 +119,17 @@ export default class DiveEditor extends ContentPart<DiveEditorState> {
             })
         })
 
-        this.deliveryForm = this.settingsTabs.upsertTab({key: 'delivery', title: "Delivery", icon: "glyp-email"}, DiveDeliveryForm, this.state)
-
-        this.plotList = this.settingsTabs.upsertTab({key: 'plots', title: "Plots", icon: "glyp-differential"}, DivePlotList, this.state)
+        this.plotList = this.settingsTabs.upsertTab({
+            key: 'plots',
+            title: "Plots",
+            icon: "glyp-differential"
+        }, DivePlotList, this.state)
+
+        this.deliveryForm = this.settingsTabs.upsertTab({
+            key: 'delivery',
+            title: "Delivery",
+            icon: "glyp-email"
+        }, DiveDeliveryForm, this.state)
     }
 
     /**

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

@@ -63,7 +63,7 @@ export class DiveRunModal extends ModalPart<{dive: DdDive }> {
     logList!: LogListPart
 
     startKey = Messages.untypedKey()
-    pickDateKey = Messages.typedKey<{ input_key: string }>()
+    pickDateKey = Messages.typedKey<{ id: string }>()
 
     async init() {
         this.setTitle("Run Dive")
@@ -97,15 +97,15 @@ export class DiveRunModal extends ModalPart<{dive: DdDive }> {
 
         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
+                min: this.inputFields.data[`${m.data.id}-min`] as DateLiteral,
+                max: dayjs(this.inputFields.data[`${m.data.id}-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)
+                    log.info(`Picked date range for ${m.data.id}`, newRange)
+                    this.inputFields.data[`${m.data.id}-min`] = newRange.min
+                    this.inputFields.data[`${m.data.id}-max`] = dayjs(newRange.max).subtract(1, 'day').format(Dates.literalFormat)
                     this.dirty()
                 }} as DatePeriodPickerState,
                 m.event.target
@@ -258,8 +258,7 @@ export class DiveRunModal extends ModalPart<{dive: DdDive }> {
 
     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(' '))
+            const title = filter.input_name.split(' ')[0].replaceAll('.', ' ') // we don't need the operator
             col.label('.caption-size').text(title)
             switch (filter.filter_type) {
                 case 'direct':
@@ -280,26 +279,26 @@ export class DiveRunModal extends ModalPart<{dive: DdDive }> {
             switch (filter.column_type) {
                 case 'cents':
                     field.label().text('$')
-                    this.inputFields.numberInput(field, filter.input_key)
+                    this.inputFields.numberInput(field, filter.id)
                     break
                 case 'number':
-                    this.inputFields.numberInput(field, filter.input_key)
+                    this.inputFields.numberInput(field, filter.id)
                     break
                 default:
-                    this.inputFields.textInput(field, filter.input_key)
+                    this.inputFields.textInput(field, filter.id)
             }
         })
     }
 
     renderDateRangeInput(parent: HtmlParentTag, filter: DateRangeFilter & FilterInput) {
         parent.div('.tt-compound-field', field => {
-            this.inputFields.dateInput(field, `${filter.input_key}-min`)
+            this.inputFields.dateInput(field, `${filter.id}-min`)
             field.label().text('→')
-            this.inputFields.dateInput(field, `${filter.input_key}-max`)
+            this.inputFields.dateInput(field, `${filter.id}-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})
+            .emitClick(this.pickDateKey, {id: filter.id})
 
         })
     }
@@ -308,7 +307,7 @@ export class DiveRunModal extends ModalPart<{dive: DdDive }> {
         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}`)
+                    this.inputFields.checkbox(label, `${filter.id}-${possible}`)
                     label.span().text(inflection.titleize(possible))
                 })
             }

package/data-dive/gen/models.ts

@@ -1,4 +1,4 @@
-// This file was automatically generated on 2024-08-14 09:08:29 -0500, DO NOT EDIT IT MANUALLY!
+// This file was automatically generated on 2024-08-21 07:43:58 -0500, DO NOT EDIT IT MANUALLY!
 
 import { Query } from "../queries/queries"
 
@@ -10,7 +10,7 @@ import { Attachment } from "../../terrier/attachments"
 
 import { RegularSchedule } from "../../terrier/schedules"
 
-import { DivePlotLayout } from "../plots/dive-plots"
+import { DivePlotLayout } from "../plots/dive-plot-layouts"
 
 import { DivePlotTrace } from "../plots/dive-plot-traces"
 
@@ -35,6 +35,7 @@ export type DdDive = {
     sort_order?: number
     query_data?: { queries: Query[] }
     dive_types: string[]
+    delivery_mode?: string
     delivery_recipients?: string[]
     delivery_schedule?: RegularSchedule
     created_by?: DdUser
@@ -63,6 +64,7 @@ export type UnpersistedDdDive = {
     sort_order?: number
     query_data?: { queries: Query[] }
     dive_types: string[]
+    delivery_mode?: string
     delivery_recipients?: string[]
     delivery_schedule?: RegularSchedule
     created_by?: DdUser

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

@@ -1,34 +1,52 @@
-import {AxisType} from "tuff-plot/axis"
+import {AxisType, PlotAxis} 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"
+import DivePlotEditor from "./dive-plot-editor"
 
 
 // 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'
+// we have some additional axis types that affect the tick format
+export type DivePlotAxisType = AxisType | 'dollars' | 'days' | 'months' | 'none'
 
 export type DivePlotAxis = {
     type: DivePlotAxisType
     title: string
+    clampToZero?: boolean
 }
 
-const axisTypeOptions = [
+const leftAxisTypeOptions = [
     {value: 'number', title: 'Number'},
-    {value: 'time', title: 'Date/Time'},
-    {value: 'group', title: 'Grouped Bars'},
-    {value: 'stack', title: 'Stacked Bars'},
+    {value: 'dollars', title: 'Dollars'},
+    {value: 'days', title: 'Dates'},
+    {value: 'months', title: 'Months'}
 ]
 
+// only allow vertical bars
+const bottomAxisTypeOptions = leftAxisTypeOptions.concat([
+    {value: 'group', title: 'Grouped Bars'},
+    {value: 'stack', title: 'Stacked Bars'}
+])
+
 // the right axis isn't required
-const rightAxisTypeOptions = axisTypeOptions.concat([
+const rightAxisTypeOptions = [
     {value: 'none', title: 'None'}
-])
+].concat(leftAxisTypeOptions)
+
+const axisTypeOptions = {
+    left: leftAxisTypeOptions,
+    right: rightAxisTypeOptions,
+    bottom: bottomAxisTypeOptions
+} as const
 
+/**
+ * Fields for a DivePlotAxis.
+ */
 export class DivePlotAxisFields extends TerrierFormFields<DivePlotAxis> {
 
     constructor(part: TerrierPart<any>, axis: DivePlotAxis, readonly side: AxisSide, errors?: DbErrors<DivePlotAxis>) {
@@ -41,16 +59,73 @@ export class DivePlotAxisFields extends TerrierFormFields<DivePlotAxis> {
 
             // title
             this.textInput(container, "title", {placeholder: "Title"})
+                .emitChange(DivePlotEditor.relayoutKey)
 
             // type
-            const typeOptions = this.side == 'right' ? rightAxisTypeOptions : axisTypeOptions
+            const typeOptions = axisTypeOptions[this.side]
             this.select(container, 'type', typeOptions)
+                .emitChange(DivePlotEditor.relayoutKey)
+
+            if (this.side == 'left' || this.side == 'right') {
+                container.label('.caption-size', label => {
+                    this.checkbox(label, 'clampToZero')
+                        .emitChange(DivePlotEditor.relayoutKey)
+                    label.div().text("Clamp to Zero")
+                }).data({tooltip: "Ensure that the axis range includes zero"})
+
+            }
         })
     }
 }
 
 
+/**
+ * Convert a DivePlotAxis to a tuff-plot PlotAxis.
+ * @param diveAxis
+ * @return undefined if the axis type is 'none'
+ */
+function toPlotAxis(diveAxis: DivePlotAxis): PlotAxis | undefined {
+    if (diveAxis.type == 'none') {
+        return undefined
+    }
+    let tickMode: PlotAxis['tickMode'] = 'auto'
+    let type: AxisType
+    let tickFormat: PlotAxis['tickFormat'] = '0.[0]a'
+    let hoverFormat = tickFormat
+    switch (diveAxis.type) {
+        case 'dollars':
+            type = 'number'
+            tickFormat = '($0.[0]a)'
+            hoverFormat = tickFormat
+            break
+        case 'days':
+            type = 'time'
+            tickFormat = 'MM/DD'
+            hoverFormat = tickFormat
+            break
+        case 'months':
+            type = 'time'
+            tickFormat = 'MMM'
+            tickMode = 'months'
+            hoverFormat = 'MM/DD' // we probably still want to see days on hover
+            break
+        default:
+            type = diveAxis.type
+    }
+    return {
+        type,
+        tickMode,
+        tickFormat,
+        hoverFormat,
+        title: diveAxis.title,
+        range: diveAxis.clampToZero ? 'auto_zero' : 'auto',
+        tickLength: 6
+    }
+}
+
+
 const DivePlotAxes = {
-    axisSides
+    axisSides,
+    toPlotAxis
 }
 export default DivePlotAxes

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

@@ -1,7 +1,7 @@
 import { PartTag } from "tuff-core/parts"
 import {ModalPart} from "../../terrier/modals"
 import {DiveEditorState} from "../dives/dive-editor"
-import {UnpersistedDdDivePlot} from "../gen/models"
+import {DdDivePlot, UnpersistedDdDivePlot} from "../gen/models"
 import {TerrierFormFields} from "../../terrier/forms"
 import Messages from "tuff-core/messages"
 import {Logger} from "tuff-core/logging"
@@ -16,6 +16,7 @@ import DivePlotTraces, {
 } from "./dive-plot-traces"
 import Fragments from "../../terrier/fragments"
 import Arrays from "tuff-core/arrays"
+import DivePlots from "./dive-plots"
 
 const log = new Logger("DivePlotList")
 
@@ -24,6 +25,7 @@ export type DivePlotEditorState = DiveEditorState & {
 }
 
 export default class DivePlotEditor extends ModalPart<DivePlotEditorState> {
+    static relayoutKey = Messages.untypedKey()
 
     plot!: UnpersistedDdDivePlot
     fields!: TerrierFormFields<UnpersistedDdDivePlot>
@@ -36,6 +38,7 @@ export default class DivePlotEditor extends ModalPart<DivePlotEditorState> {
     traces: DivePlotTrace[] = []
 
     renderPart!: DivePlotRenderPart
+    deleteKey = Messages.untypedKey()
     saveKey = Messages.untypedKey()
 
     async init() {
@@ -64,6 +67,7 @@ export default class DivePlotEditor extends ModalPart<DivePlotEditorState> {
         this.traces = this.plot.traces || []
         this.updateTraces()
 
+        // new trace
         this.onClick(this.newTraceKey, _ => {
             log.info("Showing new trace form")
             const state = {
@@ -75,6 +79,7 @@ export default class DivePlotEditor extends ModalPart<DivePlotEditorState> {
             this.app.showModal(DivePlotTraceEditor, state)
         })
 
+        // edit a trace
         this.onClick(DivePlotTraces.editKey, m => {
             const id = m.data.id
             log.info(`Editing plot trace ${id}`)
@@ -90,41 +95,73 @@ export default class DivePlotEditor extends ModalPart<DivePlotEditorState> {
             }
         })
 
+        // delete a trace
+        this.onClick(this.deleteKey, async _ => {
+            if (confirm("Are you sure you want to delete this plot?")) {
+                log.info("Deleting plot", this.plot)
+                await DivePlots.softDelete(this.plot as DdDivePlot)
+                this.emitMessage(DivePlotList.reloadKey, {})
+                this.successToast("Successfully Deleted Plot")
+                this.pop()
+            }
+        })
+
         this.renderPart = this.makePart(DivePlotRenderPart, this.state)
 
         this.addAction({
             title: "Save",
-            icon: "hub-checkmark",
+            icon: "glyp-checkmark",
             click: {key: this.saveKey}
         })
 
+        if (this.plot.id?.length) {
+            this.addAction({
+                title: "Delete",
+                icon: "glyp-delete",
+                classes: ['alert'],
+                click: {key: this.deleteKey}
+            }, 'secondary')
+        }
+
         this.onClick(this.saveKey, _ => {
             log.debug("Saving plot", this.plot)
             this.save()
         })
+
+        this.onChange(DivePlotEditor.relayoutKey, m => {
+            log.info("Relayouting plot editor", m)
+            this.serialize().then(() => this.renderPart.relayout())
+        })
     }
 
     addTrace(trace: DivePlotTrace) {
+        log.info(`Adding trace ${trace.id}`, trace)
         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)
+        Arrays.replaceBy(this.traces, trace, 'id')
         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.traces = Arrays.without(this.traces, trace)
         this.updateTraces()
     }
 
     updateTraces() {
-        this.assignCollection('traces', DivePlotTraceRow, this.traces || [])
-        this.dirty()
+        let index = -1
+        const rowStates = (this.traces || []).map(trace => {
+            index += 1
+            return {...this.state, trace, index}
+        })
+        this.assignCollection('traces', DivePlotTraceRow, rowStates)
+        if (this.renderPart) {
+            this.renderPart.relayout()
+        }
     }
 
     renderContent(parent: PartTag): void {
@@ -153,9 +190,11 @@ export default class DivePlotEditor extends ModalPart<DivePlotEditorState> {
         })
     }
 
-    async save() {
+    async serialize() {
         const plotData = await this.fields.serialize()
-        const plot = {...this.plot, title: plotData.title, traces: this.traces}
+        const plot = this.plot
+        plot.title = plotData.title
+        plot.traces = this.traces
 
         plot.layout.axes = {
             left: await this.leftAxisFields.serialize(),
@@ -163,6 +202,12 @@ export default class DivePlotEditor extends ModalPart<DivePlotEditorState> {
             right: await this.rightAxisFields.serialize()
         }
 
+        return plot
+    }
+
+    async save() {
+        const plot = await this.serialize()
+
         log.info("Saving plot", plot)
 
         const res = await Db().upsert('dd_dive_plot', plot)
@@ -179,5 +224,3 @@ export default class DivePlotEditor extends ModalPart<DivePlotEditorState> {
 
     }
 }
-
-

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

@@ -0,0 +1,49 @@
+import DivePlotAxes, {DivePlotAxis} from "./dive-plot-axes"
+import {PlotLayout} from "tuff-plot/layout"
+
+/**
+ * Same as PlotLayout but with our own types.
+ */
+export type DivePlotLayout = {
+    axes?: {
+        left?: DivePlotAxis
+        top?: DivePlotAxis
+        right?: DivePlotAxis
+        bottom?: DivePlotAxis
+    }
+}
+
+/// Conversion
+
+/**
+ * Convert a DivePlotLayout to a tuff-plot PlotLayout.
+ * @param layout
+ */
+function toPlotLayout(diveLayout: DivePlotLayout): PlotLayout {
+    const tuffLayout: PlotLayout = {}
+    if (diveLayout.axes) {
+        tuffLayout.axes = {}
+        if (diveLayout.axes.left && diveLayout.axes.left.type !== 'none') {
+            tuffLayout.axes.left = DivePlotAxes.toPlotAxis(diveLayout.axes.left)
+        }
+        if (diveLayout.axes.top && diveLayout.axes.top.type !== 'none') {
+            tuffLayout.axes.top = DivePlotAxes.toPlotAxis(diveLayout.axes.top)
+        }
+        if (diveLayout.axes.right && diveLayout.axes.right.type !== 'none') {
+            tuffLayout.axes.right = DivePlotAxes.toPlotAxis(diveLayout.axes.right)
+        }
+        if (diveLayout.axes.bottom && diveLayout.axes.bottom.type !== 'none') {
+            tuffLayout.axes.bottom = DivePlotAxes.toPlotAxis(diveLayout.axes.bottom)
+        }
+    }
+    return tuffLayout
+}
+
+
+/// Exports
+
+const DivePlotLayouts = {
+    toPlotLayout
+}
+export default DivePlotLayouts
+

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

@@ -25,14 +25,25 @@ class DivePlotPreview extends TerrierPart<DivePlotRenderState> {
         return ['dd-dive-plot-preview']
     }
 
+    reload() {
+        if (this.renderPart) {
+            this.renderPart.reload().then()
+        }
+    }
+
+    relayout() {
+        if (this.renderPart) {
+            this.renderPart.relayout()
+        }
+    }
+
     render(parent: PartTag) {
-        parent.h3(".plot-title", title => {
+        parent.a(".plot-title.tt-flex.gap", title => {
             title.i('.shrink.icon-only.glyp-differential')
             title.div('.text-center.stretch').text(this.state.plot.title)
-            title.a('.glyp-settings.icon-only')
-                .data({tooltip: "Edit this plot"})
-                .emitClick(editKey, {id: this.state.plot.id})
-        })
+            title.i('.glyp-settings.shrink.icon-only')
+        }).data({tooltip: "Edit this plot"})
+            .emitClick(editKey, {id: this.state.plot.id})
         parent.part(this.renderPart)
     }
 }
@@ -93,6 +104,9 @@ export default class DivePlotList extends TerrierPart<DiveEditorState> {
 
         const plotStates = this.plots.map((plot) => {return {...this.state, plot}})
         this.assignCollection("plots", DivePlotPreview, plotStates)
+        this.getCollectionParts("plots").forEach(part => {
+            (part as DivePlotPreview).reload()
+        })
 
         this.dirty()
     }

package/data-dive/plots/dive-plot-render-part.ts

@@ -2,6 +2,15 @@ import TerrierPart from "../../terrier/parts/terrier-part"
 import {PartTag} from "tuff-core/parts"
 import {DivePlotEditorState} from "./dive-plot-editor"
 import {UnpersistedDdDivePlot} from "../gen/models"
+import Queries, {QueryResult} from "../queries/queries"
+import {Logger} from "tuff-core/logging"
+import Arrays from "tuff-core/arrays"
+import {PlotPart} from "tuff-plot/part"
+import DivePlotLayouts from "./dive-plot-layouts"
+import DivePlotTraces from "./dive-plot-traces"
+import DiveEditor from "../dives/dive-editor";
+
+const log = new Logger("DivePlotRenderPart")
 
 export type DivePlotRenderState = DivePlotEditorState & {
     plot: UnpersistedDdDivePlot
@@ -12,12 +21,70 @@ export type DivePlotRenderState = DivePlotEditorState & {
  */
 export default class DivePlotRenderPart extends TerrierPart<DivePlotRenderState> {
 
+    previewData: Record<string,QueryResult> = {}
+
+    plotPart!: PlotPart
+
+    async init() {
+
+        this.plotPart = this.makePart(PlotPart, {layout: {}, traces: []})
+
+
+        this.listenMessage(DiveEditor.diveChangedKey, _ => {
+            log.info("Dive changed, reloading plot")
+            this.reload().then()
+        }, {attach: 'passive'})
+
+        await this.reload()
+    }
+
+    relayout() {
+        if (this.plotPart) {
+            log.info(`Relayouting plot`, this)
+            // convert the layout to its tuff-plot equivalents
+            this.plotPart.state.layout = DivePlotLayouts.toPlotLayout(this.state.plot.layout)
+
+            // convert the traces to tuff-plot traces
+            if (this.previewData) {
+                this.plotPart.state.traces = Arrays.compact(this.state.plot.traces.map(t => {
+                    const queryResult = this.previewData[t.query_id]
+                    if (queryResult == null) {
+                        return null
+                    }
+                    return DivePlotTraces.toPlotTrace(t, queryResult)
+                }))
+                log.info(`Generated ${this.plotPart.state.traces.length} traces`, this.plotPart.state.traces)
+            }
+
+            // force the plot to update its layout
+            this.plotPart.relayout()
+        }
+    }
+
+    async reload() {
+        // determine which queries are needed
+        const queryIds = Arrays.unique(this.state.plot.traces.map(t => t.query_id))
+        if (!queryIds.length) {
+            return
+        }
+        const queries = this.state.dive.query_data?.queries.filter(q => queryIds.includes(q.id)) || []
+
+        // get the preview data
+        log.info(`Generating preview for queries`, queries)
+        this.startLoading()
+        for (const query of queries) {
+            this.previewData[query.id] = await Queries.preview(query)
+        }
+
+        this.stopLoading()
+        this.relayout()
+    }
 
     get parentClasses(): Array<string> {
         return ['dd-dive-plot-render']
     }
 
     render(parent: PartTag) {
-        parent.div().text(`${this.state.plot.title} Render`)
+        parent.part(this.plotPart)
     }
 }