terrier-engine 4.4.21 → 4.4.23

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

@@ -14,7 +14,8 @@ import {DdDive} from "../gen/models"
 import Ids from "../../terrier/ids"
 import Db from "../dd-db"
 import DdSession from "../dd-session"
-import {DiveRunModal} from "./dive-runs";
+import {DiveRunModal} from "./dive-runs"
+import Nav from "tuff-core/nav";
 
 const log = new Logger("DiveEditor")
 
@@ -34,6 +35,8 @@ export default class DiveEditor extends ContentPart<DiveEditorState> {
 
     newQueryKey = messages.untypedKey()
 
+    static readonly diveChangedKey = messages.untypedKey()
+
     queries = new Array<Query>()
 
     async init() {
@@ -107,6 +110,7 @@ export class DiveEditorPage extends PagePart<{id: string}> {
     session!: DdSession
 
     saveKey = messages.untypedKey()
+    discardKey = messages.untypedKey()
     runKey = messages.untypedKey()
 
     async init() {
@@ -129,9 +133,17 @@ export class DiveEditorPage extends PagePart<{id: string}> {
             icon: 'glyp-data_dive'
         })
 
+        this.addAction({
+            title: 'Discard',
+            icon: 'glyp-cancelled',
+            classes: ['discard-dive-action'],
+            click: {key: this.discardKey}
+        }, 'tertiary')
+
         this.addAction({
             title: 'Save',
-            icon: 'glyp-checkmark',
+            icon: 'glyp-complete',
+            classes: ['save-dive-action'],
             click: {key: this.saveKey}
         }, 'tertiary')
 
@@ -141,10 +153,20 @@ export class DiveEditorPage extends PagePart<{id: string}> {
             click: {key: this.runKey}
         }, 'tertiary')
 
+        this.onClick(this.discardKey, _ => {
+            log.info("Discarding dive changes")
+            Nav.visit(location.href)
+        })
+
         this.onClick(this.saveKey, _ => this.save())
 
         this.onClick(this.runKey, _ => this.run())
 
+        this.listenMessage(DiveEditor.diveChangedKey, _ => {
+            log.info("Dive changed")
+            this.element?.classList.add('changed')
+        }, {attach: 'passive'})
+
         this.dirty()
     }
 
@@ -162,6 +184,7 @@ export class DiveEditorPage extends PagePart<{id: string}> {
         const res = await Db().upsert('dd_dive', dive)
         if (res.status == 'success') {
             this.successToast(`Saved Dive!`)
+            this.element?.classList.remove('changed')
         }
         else {
             this.alertToast(res.message)

package/data-dive/queries/columns.ts

@@ -9,6 +9,7 @@ import Objects from "tuff-core/objects"
 import {ModalPart} from "../../terrier/modals";
 import TerrierFormPart from "../../terrier/parts/terrier-form-part"
 import {Dropdown} from "../../terrier/dropdowns"
+import DiveEditor from "../dives/dive-editor"
 
 const log = new Logger("Columns")
 
@@ -247,6 +248,7 @@ export class ColumnsEditorModal extends ModalPart<ColumnsEditorState> {
         })
         const tableData = await this.tableFields.serialize()
         this.state.tableView.updateColumns(columns, tableData.prefix)
+        this.emitMessage(DiveEditor.diveChangedKey, {})
         this.pop()
     }
 

package/data-dive/queries/filters.ts

@@ -9,8 +9,9 @@ import inflection from "inflection"
 import {ModalPart} from "../../terrier/modals";
 import TerrierFormPart from "../../terrier/parts/terrier-form-part"
 import {Dropdown} from "../../terrier/dropdowns"
-import dayjs from "dayjs";
-import Format from "../../terrier/format";
+import dayjs from "dayjs"
+import Format from "../../terrier/format"
+import DiveEditor from "../dives/dive-editor"
 
 const log = new Logger("Filters")
 
@@ -170,7 +171,8 @@ export class FiltersEditorModal extends ModalPart<FiltersEditorState> {
 
         this.addAction({
             title: 'Add Filter',
-            icon: 'glyp-plus',
+            icon: 'glyp-plus_outline',
+            classes: ['add-filter'],
             click: {key: addKey}
         }, 'secondary')
 
@@ -183,12 +185,7 @@ export class FiltersEditorModal extends ModalPart<FiltersEditorState> {
         })
 
         this.onClick(addKey, m => {
-            const onSelected = (filter: Filter) => {
-                log.info(`Adding ${filter.filter_type} filter`, filter)
-                this.addState(filter)
-                this.updateFilterEditors()
-            }
-            this.toggleDropdown(AddFilterDropdown, {modelDef: this.modelDef, callback: onSelected}, m.event.target)
+            this.showAddFilterDropdown(m.event.target! as HTMLElement)
         })
     }
 
@@ -213,12 +210,30 @@ export class FiltersEditorModal extends ModalPart<FiltersEditorState> {
         }
     }
 
+    showAddFilterDropdown(target: HTMLElement | null) {
+        const onSelected = (filter: Filter) => {
+            log.info(`Adding ${filter.filter_type} filter`, filter)
+            this.addState(filter)
+            this.updateFilterEditors()
+        }
+        this.toggleDropdown(AddFilterDropdown, {modelDef: this.modelDef, callback: onSelected}, target)
+    }
+
+    update(elem: HTMLElement) {
+        super.update(elem)
+
+        // if there are no filters, show the dropdown right away
+        if (this.filterStates.length == 0) {
+            this.showAddFilterDropdown(null)
+        }
+    }
 
     save() {
         const filters = this.filterStates.map(state => {
             return Objects.omit(state, 'schema', 'filtersEditor', 'id') as Filter
         })
         this.state.tableView.updateFilters(filters)
+        this.emitMessage(DiveEditor.diveChangedKey, {})
         this.pop()
     }
 
@@ -538,7 +553,7 @@ type AddFilterCallback = (filter: Filter) => any
 const columnSelectedKey = messages.typedKey<{column: string}>()
 
 class AddFilterDropdown extends Dropdown<{modelDef: ModelDef, callback: AddFilterCallback}> {
-    columns!: string[]
+    columns!: ColumnDef[]
 
     get autoClose(): boolean {
         return true
@@ -547,7 +562,11 @@ class AddFilterDropdown extends Dropdown<{modelDef: ModelDef, callback: AddFilte
     async init() {
         await super.init()
 
-        this.columns = Object.keys(this.state.modelDef.columns).sort()
+        this.columns = arrays.sortByFunction(Object.values(this.state.modelDef.columns), col => {
+            const visibility = col.metadata?.visibility
+            const sort = visibility == 'common' ? '0' : '1'
+            return `${sort}${col.name}`
+        })
 
         this.onClick(columnSelectedKey, m => {
             const column = m.data.column
@@ -574,7 +593,7 @@ class AddFilterDropdown extends Dropdown<{modelDef: ModelDef, callback: AddFilte
     }
 
     get parentClasses(): Array<string> {
-        return super.parentClasses.concat(['dd-select-columns-dropdown']);
+        return super.parentClasses.concat(['dd-select-columns-dropdown', 'tt-actions-dropdown']);
     }
 
     renderContent(parent: PartTag) {
@@ -582,9 +601,22 @@ class AddFilterDropdown extends Dropdown<{modelDef: ModelDef, callback: AddFilte
             header.i(".glyp-columns")
             header.span().text("Select a Column")
         })
+        let showingCommon = true
         for (const column of this.columns) {
-            parent.a({text: column})
-                .emitClick(columnSelectedKey, {column})
+            const isCommon = column.metadata?.visibility == 'common'
+            parent.a(a => {
+                a.div('.title').text(column.name)
+                const desc = column.metadata?.description
+                if (desc?.length) {
+                    a.div('.subtitle').text(desc)
+                }
+
+                // show a border between common and uncommon columns
+                if (showingCommon && !isCommon) {
+                    a.class('border-top')
+                }
+            }).emitClick(columnSelectedKey, {column: column.name})
+            showingCommon = isCommon
         }
     }
 

package/data-dive/queries/tables.ts

@@ -3,12 +3,13 @@ import Schema, {BelongsToDef, ModelDef, SchemaDef} from "../../terrier/schema"
 import inflection from "inflection"
 import Filters, {Filter, FilterInput, FiltersEditorModal} from "./filters"
 import Columns, {ColumnRef, ColumnsEditorModal} from "./columns"
-import {messages} from "tuff-core"
+import {arrays, messages} from "tuff-core"
 import {Logger} from "tuff-core/logging"
 import ContentPart from "../../terrier/parts/content-part"
 import {ActionsDropdown} from "../../terrier/dropdowns"
 import {ModalPart} from "../../terrier/modals"
 import TerrierFormPart from "../../terrier/parts/terrier-form-part"
+import DiveEditor from "../dives/dive-editor";
 
 const log = new Logger("Tables")
 
@@ -98,19 +99,37 @@ export class TableView<T extends TableRef> extends ContentPart<{ schema: SchemaD
             this.app.showModal(FiltersEditorModal, {schema: this.schema, tableView: this as TableView<TableRef>})
         })
 
+        // show the new join dropdown
         this.onClick(this.newJoinedKey, m => {
             log.info(`Adding join to ${this.displayName}`)
 
             // only show belongs-tos that aren't already joined
             const existingJoins = new Set(Object.keys(this.table.joins || []))
-            const actions = Object.values(this.modelDef.belongs_to)
+
+            const newJoins = Object.values(this.modelDef.belongs_to)
                 .filter(bt => !existingJoins.has(bt.name))
-                .map(bt => {
-                    return {
-                        title: Schema.belongsToDisplay(bt),
-                        click: {key: this.createJoinedKey, data: {name: bt.name}}
-                    }
-                })
+
+            // show the common tables at the top
+            let showingCommon = true
+            const actions = arrays.sortByFunction(newJoins, bt => {
+                const model = this.schema.models[bt.model]
+                const common = model.metadata?.visibility == 'common' ? '0' : '1'
+                return `${common}${bt.name}`
+            })
+            .map(bt => {
+                const model = this.schema.models[bt.model]
+                const isCommon = model.metadata?.visibility == 'common'
+                // put a border between the common and uncommon
+                const classes = showingCommon && !isCommon ? ['border-top'] : []
+                showingCommon = isCommon
+                return {
+                    title: Schema.belongsToDisplay(bt),
+                    subtitle: model.metadata?.description,
+                    classes,
+                    click: {key: this.createJoinedKey, data: {name: bt.name}}
+                }
+            })
+
 
             // don't show the dropdown if there are no more belongs-tos left
             if (actions.length) {
@@ -121,6 +140,7 @@ export class TableView<T extends TableRef> extends ContentPart<{ schema: SchemaD
             }
         })
 
+        // create a new join
         this.onClick(this.createJoinedKey, m => {
             const belongsTo = this.modelDef.belongs_to[m.data.name]
             if (belongsTo) {
@@ -372,6 +392,7 @@ class JoinedTableEditorModal extends ModalPart<JoinedTableEditorState> {
         this.onClick(this.applyKey, async _ => {
             const table = await this.form.serialize()
             this.state.callback(table)
+            this.emitMessage(DiveEditor.diveChangedKey, {})
             this.pop()
         })
     }

package/package.json

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

package/terrier/dropdowns.ts

@@ -78,9 +78,15 @@ export abstract class Dropdown<TState> extends TerrierPart<TState> {
 
     update(_elem: HTMLElement) {
         const content = _elem.querySelector('.tt-dropdown-content')
-        if (this.anchorTarget && content) {
-            log.info(`Anchoring dropdown`, content, this.anchorTarget)
-            Overlays.anchorElement(content as HTMLElement, this.anchorTarget)
+        if (content) {
+            if (this.anchorTarget) {
+                log.info(`Anchoring dropdown`, content, this.anchorTarget)
+                Overlays.anchorElement(content as HTMLElement, this.anchorTarget)
+            }
+            else {
+                // no anchor, just center it on the screen
+                Overlays.centerElement(content as HTMLElement)
+            }
             content.classList.add('show')
         }
     }

package/terrier/overlays.ts

@@ -273,24 +273,40 @@ function anchorBox(size: Size, anchor: Box, container: Size, options: AnchorOpti
     return preferredResult
 }
 
+
 /**
- * Anchors one element to the side of another.
- * @param elem the element to reposition
- * @param anchor the anchor element
+ * Gets the size of an element, forcing the browser to calculate it if necessary.
+ * @param elem
  */
-function anchorElement(elem: HTMLElement, anchor: HTMLElement) {
+function getElementSize(elem: HTMLElement): Size {
     // Sometimes the actual width and height of the rendered element is incorrect before we set the style attribute.
     // Setting the style attribute first forces the browser to re-calculate the size of the element so that we can use
     // the "real" size to calculate where to anchor the element.
     elem.setAttribute('style', 'top:0;left:0;')
 
-    const elemSize = {
+    return {
         width: elem.offsetWidth,
         height: elem.offsetHeight
     }
+}
+
+/**
+ * Gets the current size of the browser window.
+ */
+function getWindowSize(): Size {
+    return {width: window.innerWidth, height: window.innerHeight}
+}
+
+/**
+ * Anchors one element to the side of another.
+ * @param elem the element to reposition
+ * @param anchor the anchor element
+ */
+function anchorElement(elem: HTMLElement, anchor: HTMLElement) {
+    const elemSize = getElementSize(elem)
     log.debug(`Anchoring element`, elem, anchor)
     const rect = anchor.getBoundingClientRect()
-    const win = {width: window.innerWidth, height: window.innerHeight }
+    const win = getWindowSize()
     const anchorResult = anchorBox(elemSize, rect, win, {preferredSide: 'bottom'})
 
     let styleString = ""
@@ -302,6 +318,25 @@ function anchorElement(elem: HTMLElement, anchor: HTMLElement) {
     elem.setAttribute('style', styleString)
 }
 
+/**
+ * Centers an element on the page.
+ * @param elem
+ */
+function centerElement(elem: HTMLElement) {
+    const elemSize = getElementSize(elem)
+    const win = getWindowSize()
+    log.debug(`Centering element`, elem, win)
+    const cappedSize = {
+        width: Math.min(win.width, elemSize.width),
+        height: Math.min(win.height, elemSize.height)
+    }
+    const styleString = [
+        `left: ${(win.width - cappedSize.width)/2}px`,
+        `top: ${(win.height - cappedSize.height)/2}px`
+    ].join('; ')
+    elem.setAttribute('style', styleString)
+}
+
 
 ////////////////////////////////////////////////////////////////////////////////
 // Export
@@ -309,6 +344,7 @@ function anchorElement(elem: HTMLElement, anchor: HTMLElement) {
 
 const Overlays = {
     anchorElement,
+    centerElement,
     anchorBox
 }
 

package/terrier/parts/content-part.ts

@@ -154,13 +154,12 @@ export default abstract class ContentPart<TState> extends TerrierPart<TState> {
         constructor: { new(p: PartParent, id: string, state: DropdownStateType): DropdownType; },
         state: DropdownStateType,
         target: EventTarget | null) {
-        if (!(target && target instanceof HTMLElement)) {
-            throw "Trying to show a dropdown without an element target!"
-        }
         const dropdown = this.app.addOverlay(constructor, state, 'dropdown')
         dropdown.parentPart = this
-        dropdown.anchor(target)
-        this.app.lastDropdownTarget = target
+        if (target && target instanceof HTMLElement) {
+            dropdown.anchor(target)
+            this.app.lastDropdownTarget = target
+        }
     }
 
     clearDropdowns() {

package/terrier/schema.ts

@@ -8,7 +8,7 @@ import inflection from "inflection"
 /**
  * Possible visibility for models and columns.
  */
-export type MetaVisibility = 'common' | 'uncommon' | 'never'
+export type MetaVisibility = 'common' | 'uncommon' | 'hidden'
 
 /**
  * Definition for a single column in the schema.
@@ -87,12 +87,13 @@ async function get(): Promise<SchemaDef> {
  * @param belongsTo
  */
 function belongsToDisplay(belongsTo: BelongsToDef): string {
+    const btName = inflection.titleize(belongsTo.name)
     if (belongsTo.name != inflection.singularize(inflection.tableize(belongsTo.model))) {
         // the model is different than the name of the association
-        return `${belongsTo.model} (${belongsTo.name})`
+        return `${btName} (${belongsTo.model})`
     }
     else {
-        return belongsTo.model
+        return btName
     }
 }
 

package/terrier/theme.ts

@@ -31,6 +31,7 @@ export type Packet = {
  */
 export type Action = {
     title?: string
+    subtitle?: string
     tooltip?: string
     icon?: IconName
     href?: string
@@ -98,6 +99,9 @@ export default class Theme {
                 if (action.title?.length) {
                     a.div('.title', {text: action.title})
                 }
+                if (action.subtitle?.length) {
+                    a.div('.subtitle', {text: action.subtitle})
+                }
                 else {
                     a.class('icon-only')
                 }