terrier-engine 4.7.8 → 4.8.2

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

@@ -62,7 +62,7 @@ export default class DiveEditor extends ContentPart<DiveEditorState> {
 
         this.queries = this.state.dive.query_data?.queries || []
         for (const query of this.queries) {
-            this.addQuery(query)
+            this.addQueryTag(query)
         }
 
         this.listenMessage(QueryForm.settingsChangedKey, m => {
@@ -82,7 +82,20 @@ export default class DiveEditor extends ContentPart<DiveEditorState> {
         })
     }
 
+    /**
+     * Add a new query to the dive.
+     * @param query
+     */
     addQuery(query: Query) {
+        this.queries.push(query)
+        this.addQueryTag(query)
+    }
+
+    /**
+     * Adds a tab for an existing query.
+     * @param query
+     */
+    private addQueryTag(query: Query) {
         const state = {...this.state, query}
         this.tabs.upsertTab({key: query.id, title: query.name}, QueryEditor, state)
     }

package/data-dive/queries/columns.ts

@@ -11,7 +11,9 @@ import {Dropdown} from "../../terrier/dropdowns"
 import DiveEditor from "../dives/dive-editor"
 import Messages from "tuff-core/messages"
 import Arrays from "tuff-core/arrays"
-import {ColumnValidationError} from "./validation"
+import Dom from "tuff-core/dom"
+import Validation, {ColumnValidationError} from "./validation"
+import Queries, {Query} from "./queries"
 
 const log = new Logger("Columns")
 
@@ -22,7 +24,7 @@ const log = new Logger("Columns")
 /**
  * Possible functions used to aggregate a column.
  */
-const AggFunctions = ['count', 'min', 'max'] as const
+const AggFunctions = ['count', 'sum', 'min', 'max'] as const
 
 export type AggFunction = typeof AggFunctions[number]
 
@@ -40,7 +42,7 @@ export type Function = AggFunction | DateFunction
  * @param fun a function name
  * @return the type of function
  */
-function functionType(fun: Function): 'aggregate' | 'time' | undefined {
+function functionType(fun: Function | undefined): 'aggregate' | 'time' | undefined {
     if (AggFunctions.includes(fun as AggFunction)) {
         return 'aggregate'
     }
@@ -105,6 +107,7 @@ function render(parent: PartTag, col: ColumnRef) {
 
 export type ColumnsEditorState = {
     schema: SchemaDef
+    query: Query
     tableView: TableView<TableRef>
 }
 
@@ -112,6 +115,7 @@ const saveKey = Messages.untypedKey()
 const addKey = Messages.untypedKey()
 const addSingleKey = Messages.typedKey<{ name: string }>()
 const removeKey = Messages.typedKey<{id: string}>()
+const valueChangedKey = Messages.untypedKey()
 
 /**
  * A modal that lets the user edit the columns being referenced for a particular table.
@@ -172,33 +176,35 @@ export class ColumnsEditorModal extends ModalPart<ColumnsEditorState> {
         })
 
         this.onClick(addSingleKey, m => {
-            const colDef = this.modelDef.columns[m.data.name]
-            log.info(`Add column ${m.data.name}`)
-            if (colDef) {
-                this.addState({name: colDef.name})
-                this.updateColumnEditors()
-                this.dirty()
-            }
-            else {
-                alert(`Unknown column name '${m.data.name}'`)
-            }
+            this.addColumn(m.data.name)
         })
 
         this.onClick(addKey, m => {
-            const onSelected = (columns: string[]) => {
-                log.info(`Adding ${columns.length} columns`, columns)
-                for (const col of columns) {
-                    const colDef = this.modelDef.columns[col]
-                    if (colDef) {
-                        this.addState({name: colDef.name})
-                    }
-                }
-                this.updateColumnEditors()
-            }
-            this.toggleDropdown(SelectColumnsDropdown, {modelDef: this.modelDef, callback: onSelected}, m.event.target)
+            this.toggleDropdown(SelectColumnsDropdown, {editor: this as ColumnsEditorModal}, m.event.target)
+        })
+
+        this.onChange(valueChangedKey, m => {
+            log.info(`Column value changed`, m)
+            this.validate().then()
         })
     }
 
+    addColumn(col: string) {
+        const colDef = this.modelDef.columns[col]
+        log.info(`Add column ${col}`, colDef)
+        if (colDef) {
+            this.addState({name: colDef.name})
+            this.updateColumnEditors()
+            this.dirty()
+        } else {
+            alert(`Unknown column name '${col}'`)
+        }
+    }
+
+    get currentColumnNames(): Set<string> {
+        return new Set(this.columnStates.map(s => s.name))
+    }
+
     renderContent(parent: PartTag): void {
         // fields
         parent.div('.tt-flex.tt-form.padded.gap.justify-end.align-center', row => {
@@ -222,7 +228,7 @@ export class ColumnsEditorModal extends ModalPart<ColumnsEditorState> {
         })
 
         // common column quick links
-        const includedNames = new Set(this.columnStates.map(s => s.name))
+        const includedNames = this.currentColumnNames
         const commonCols = Object.values(this.modelDef.columns).filter(c => c.metadata?.visibility == 'common' && !includedNames.has(c.name))
         if (commonCols.length) {
             parent.h3('.centered.large-top-padding', h3 => {
@@ -260,10 +266,44 @@ export class ColumnsEditorModal extends ModalPart<ColumnsEditorState> {
         }
     }
 
-    async save() {
-        const columns = this.columnStates.map(state => {
+    serialize(): ColumnRef[] {
+        return this.columnStates.map(state => {
             return Objects.omit(state, 'schema', 'columnsEditor', 'id') as ColumnRef
         })
+    }
+
+    /**
+     * Performs client-side validation against the current values in the editors.
+     */
+    async validate() {
+        // serialize the columns and table settings
+        const columns = this.serialize()
+        const tableData = await this.tableFields.serialize()
+
+        // make a deep copy of the query and update this table's columns and settings
+        this.table._id = this.id // we need this to identify the table after the deep copy
+        const query = Objects.deepCopy(this.state.query)
+        Queries.eachTable(query, table => {
+            if (table._id == this.id) {
+                table.columns = columns
+                table.prefix = tableData.prefix
+            }
+        })
+
+        // validate the temporary query
+        log.info(`Validating temporary query with column changes`, query)
+        Validation.validateQuery(query)
+
+        // copy the column errors over
+        for (let i = 0; i < columns.length; i++) {
+            this.columnStates[i].errors = columns[i].errors
+        }
+
+        this.dirty()
+    }
+
+    async save() {
+        const columns = this.serialize()
         const tableData = await this.tableFields.serialize()
         this.state.tableView.updateColumns(columns, tableData.prefix)
         this.emitMessage(DiveEditor.diveChangedKey, {})
@@ -312,18 +352,26 @@ class ColumnEditor extends TerrierFormPart<ColumnState> {
         })
         parent.div('.alias', col => {
             this.textInput(col, "alias", {placeholder: "Alias"})
+                .emitChange(valueChangedKey)
         })
         parent.div('.function', col => {
             this.select(col, "function", this.functionOptions)
+                .emitChange(valueChangedKey)
         })
         parent.div('.group-by', col => {
             this.checkbox(col, "grouped")
+                .emitChange(valueChangedKey)
         })
         parent.div('.actions', actions => {
             actions.a(a => {
                 a.i('.glyp-close')
             }).emitClick(removeKey, {id: this.state.id})
         })
+        if (this.state.errors?.length) {
+            for (const error of this.state.errors) {
+                parent.div('.error.tt-bubble.alert').text(error.message)
+            }
+        }
     }
     
 }
@@ -333,19 +381,21 @@ class ColumnEditor extends TerrierFormPart<ColumnState> {
 // Add Column Dropdown
 ////////////////////////////////////////////////////////////////////////////////
 
-const checkAllKey = Messages.untypedKey()
-const applySelectionKey = Messages.untypedKey()
-const checkChangedKey = Messages.typedKey<{column: string}>()
-
-type SelectColumnsCallback = (columns: string[]) => any
+type SelectableColumn = ColumnDef & {
+    included: boolean
+    sortOrder: string
+}
 
 /**
  * Shows a dropdown that allows the user to select one or more columns from the given model.
  */
-class SelectColumnsDropdown extends Dropdown<{modelDef: ModelDef, callback: SelectColumnsCallback}> {
+class SelectColumnsDropdown extends Dropdown<{editor: ColumnsEditorModal}> {
 
+    addAllKey = Messages.untypedKey()
+    addKey = Messages.typedKey<{ name: string }>()
     checked: Set<string> = new Set()
-    columns!: string[]
+    columns!: SelectableColumn[]
+    modelDef!: ModelDef
 
     get autoClose(): boolean {
         return true
@@ -354,63 +404,61 @@ class SelectColumnsDropdown extends Dropdown<{modelDef: ModelDef, callback: Sele
     async init() {
         await super.init()
 
-        this.columns = Object.keys(this.state.modelDef.columns).sort()
+        this.modelDef = this.state.editor.modelDef
 
-        this.onClick(checkAllKey, _ => {
-            // toggle them all being checked
-            log.info(`${this.checked.size} of ${this.columns.length} checked`)
-            if (this.checked.size > this.columns.length / 2) {
-                this.checked = new Set()
-            }
-            else {
-                for (const c of this.columns) {
-                    this.checked.add(c)
-                }
-            }
-            this.dirty()
+        // sort the columns by whether they're in the editor already
+        const includedNames = this.state.editor.currentColumnNames
+        this.columns = Object.values(this.modelDef.columns).map(col => {
+            const included = includedNames.has(col.name)
+            const sortOrder = `${included ? '1' : '0'}${col.name}`
+            return {included, sortOrder,...col}
         })
+        this.columns = Arrays.sortBy(this.columns, 'sortOrder')
 
-        this.onClick(applySelectionKey, _ => {
-            this.state.callback(Array.from(this.checked))
-            this.clear()
+        this.onClick(this.addKey, m => {
+            log.info(`Adding column ${m.data.name}`)
+            this.state.editor.addColumn(m.data.name)
+
+            // remove the link
+            const link = Dom.queryAncestorClass(m.event.target as HTMLInputElement, 'column')
+            link?.remove()
         })
 
-        this.onChange(checkChangedKey, m => {
-            const col = m.data.column
-            const checked = (m.event.target as HTMLInputElement).checked
-            log.info(`Column '${col}' checkbox changed to`, checked)
-            if (checked) {
-                this.checked.add(col)
-            }
-            else {
-                this.checked.delete(col)
+        this.onClick(this.addAllKey, _ => {
+            // add all of the unincluded columns and close the dropdown
+            for (const col of this.columns) {
+                if (!col.included) {
+                    this.state.editor.addColumn(col.name)
+                }
             }
+            this.clear()
         })
     }
 
 
     get parentClasses(): Array<string> {
-        return super.parentClasses.concat(['dd-select-columns-dropdown']);
+        return super.parentClasses.concat(['tt-actions-dropdown']);
     }
 
     renderContent(parent: PartTag) {
-        parent.a('.header', a => {
-            a.i('.glyp-check_all')
-            a.span({text: "Toggle All"})
-        }).emitClick(checkAllKey)
-
         for (const col of this.columns) {
-            parent.label(label => {
-                label.input({type: 'checkbox', checked: this.checked.has(col)})
-                    .emitChange(checkChangedKey, {column: col})
-                label.div().text(col)
-            })
+            parent.a('.column', a => {
+                a.div('.name').text(col.name)
+                a.div('.right-title').text(col.type)
+                if (col.included) {
+                    // style the columns that are already included differently
+                    a.class('inactive')
+                }
+                if (col.metadata?.description?.length) {
+                    a.div('.subtitle').text(col.metadata.description)
+                }
+            }).emitClick(this.addKey, {name: col.name})
         }
 
-        parent.a('.add', a => {
-            a.i('.glyp-checkmark')
-            a.span({text: "Add Selected"})
-        }).emitClick(applySelectionKey)
+        parent.a('.primary', a => {
+            a.i('.glyp-check_all')
+            a.span({text: "Add All"})
+        }).emitClick(this.addAllKey)
     }
 
 }

package/data-dive/queries/filters.ts

@@ -618,7 +618,7 @@ class AddFilterDropdown extends Dropdown<{modelDef: ModelDef, callback: AddFilte
     }
 
     get parentClasses(): Array<string> {
-        return super.parentClasses.concat(['dd-select-columns-dropdown', 'tt-actions-dropdown']);
+        return super.parentClasses.concat(['tt-actions-dropdown'])
     }
 
     renderContent(parent: PartTag) {

package/data-dive/queries/queries.ts

@@ -32,6 +32,28 @@ export type Query = {
 // Utilities
 ////////////////////////////////////////////////////////////////////////////////
 
+type TableFunction = (table: TableRef) => any
+
+function eachChildTable(table: TableRef, fn: TableFunction) {
+    if (!table.joins) {
+        return
+    }
+    for (const joinedTable of Object.values(table.joins)) {
+        fn(joinedTable)
+        eachChildTable(joinedTable, fn)
+    }
+}
+
+/**
+ * Recursively iterates through each table reference in the query and evaluates the function.
+ * @param query
+ * @param fn
+ */
+function eachTable(query: Query, fn: TableFunction) {
+    fn(query.from)
+    eachChildTable(query.from, fn)
+}
+
 type ColumnFunction = (table: TableRef, col: ColumnRef) => any
 
 function eachColumnForTable(table: TableRef, fn: ColumnFunction) {
@@ -50,6 +72,7 @@ function eachColumnForTable(table: TableRef, fn: ColumnFunction) {
 /**
  * Recursively iterates over all columns in a query.
  * @param query
+ * @param fn a function to evaluate for each column in the query
  */
 function eachColumn(query: Query, fn: ColumnFunction) {
     eachColumnForTable(query.from, fn)
@@ -288,6 +311,7 @@ export class QueryModelPicker extends TerrierPart<QueryModelPickerState> {
 
 const Queries = {
     eachColumn,
+    eachTable,
     validate,
     preview,
     renderPreview

package/data-dive/queries/query-editor.ts

@@ -120,7 +120,10 @@ class PreviewPart extends ContentPart<SubEditorState> {
 
     renderContent(parent: PartTag) {
         if (this.result) {
-            if (this.result.columns?.length) {
+            if (this.result.status == 'error') {
+                parent.div('.tt-bubble.alert').text(this.result.message)
+            }
+            else if (this.result.columns?.length) {
                 parent.div('.table-container', col => {
                     Queries.renderPreview(col, this.result!)
                 })

package/data-dive/queries/tables.ts

@@ -12,6 +12,7 @@ import DiveEditor from "../dives/dive-editor"
 import Messages from "tuff-core/messages"
 import Arrays from "tuff-core/arrays"
 import QueryEditor from "./query-editor"
+import {Query} from "./queries";
 
 const log = new Logger("Tables")
 
@@ -25,6 +26,7 @@ export type TableRef = {
     columns?: ColumnRef[]
     joins?: Record<string, JoinedTableRef>
     filters?: Filter[]
+    _id?: string // ephemeral
 }
 
 export type JoinedTableRef = TableRef & {
@@ -73,6 +75,7 @@ function computeFilterInputs(schema: SchemaDef, table: TableRef, filters: Record
 export class TableView<T extends TableRef> extends ContentPart<{ schema: SchemaDef, queryEditor: QueryEditor, table: T }> {
 
     schema!: SchemaDef
+    query!: Query
     table!: T
     tableName!: string
     displayName!: string
@@ -87,6 +90,7 @@ export class TableView<T extends TableRef> extends ContentPart<{ schema: SchemaD
 
     async init() {
         this.schema = this.state.schema
+        this.query = this.state.queryEditor.state.query
         this.table = this.state.table
         this.modelDef = this.schema.models[this.table.model]
         this.tableName = inflection.titleize(inflection.tableize(this.table.model))
@@ -95,7 +99,7 @@ export class TableView<T extends TableRef> extends ContentPart<{ schema: SchemaD
 
         this.onClick(this.editColumnsKey, _ => {
             log.info(`Edit ${this.displayName} Columns`)
-            this.app.showModal(ColumnsEditorModal, {schema: this.schema, tableView: this as TableView<TableRef>})
+            this.app.showModal(ColumnsEditorModal, {schema: this.schema, query: this.query, tableView: this as TableView<TableRef>})
         })
 
         this.onClick(this.editFiltersKey, _ => {

package/data-dive/queries/validation.ts

@@ -1,5 +1,6 @@
 import Queries, {Query} from "./queries"
 import Columns, {ColumnRef} from "./columns"
+import {TableRef} from "./tables"
 
 export type ColumnValidationError = {
     message: string
@@ -32,6 +33,7 @@ function validateQuery(query: Query): QueryClientValidation {
     const usedNames: Set<string> = new Set<string>()
 
     let isGrouped = false
+    const groupedTables: Set<TableRef> = new Set()
     Queries.eachColumn(query, (table, col) => {
         // clear the errors
         col.errors = undefined
@@ -39,6 +41,10 @@ function validateQuery(query: Query): QueryClientValidation {
         // determine if there's a _group by_ in the query
         if (col.grouped) {
             isGrouped = true
+            if (col.name == 'id') {
+                // ungrouped columns on this table are okay
+                groupedTables.add(table)
+            }
         }
 
         // each select name should only be used once
@@ -50,10 +56,10 @@ function validateQuery(query: Query): QueryClientValidation {
     })
 
     // if the query is grouped, ensure that all other column refs
-    // are either grouped or have an aggregate function
+    // are either grouped, have an aggregate function, or are on a grouped table
     if (isGrouped) {
-        Queries.eachColumn(query, (_, col) => {
-            if (!col.grouped && !col.function) {
+        Queries.eachColumn(query, (table, col) => {
+            if (!col.grouped && Columns.functionType(col.function) != 'aggregate' && !groupedTables.has(table)) {
                 addColumnError(col, `<strong>${col.name}</strong> must be grouped or have an aggregate function`)
             }
         })

package/package.json

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