terrier-engine 4.4.19 → 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")
 
@@ -91,6 +92,7 @@ export type ColumnsEditorState = {
 
 const saveKey = messages.untypedKey()
 const addKey = messages.untypedKey()
+const addSingleKey = messages.typedKey<{ name: string }>()
 const removeKey = messages.typedKey<{id: string}>()
 
 /**
@@ -151,6 +153,19 @@ export class ColumnsEditorModal extends ModalPart<ColumnsEditorState> {
             this.removeColumn(m.data.id)
         })
 
+        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.onClick(addKey, m => {
             const onSelected = (columns: string[]) => {
                 log.info(`Adding ${columns.length} columns`, columns)
@@ -167,6 +182,7 @@ export class ColumnsEditorModal extends ModalPart<ColumnsEditorState> {
     }
 
     renderContent(parent: PartTag): void {
+        // fields
         parent.div('.tt-flex.tt-form.padded.gap.justify-end.align-center', row => {
             row.div('.tt-compound-field', field => {
                 field.label().text("Prefix:")
@@ -174,6 +190,8 @@ export class ColumnsEditorModal extends ModalPart<ColumnsEditorState> {
             })
             row.div('.stretch').text("All columns will be prefixed with this")
         })
+
+        // the table of column editors
         parent.div('.dd-columns-editor-table', table => {
             table.div('.dd-editor-header', header => {
                 header.div('.name').label({text: "Name"})
@@ -184,6 +202,36 @@ export class ColumnsEditorModal extends ModalPart<ColumnsEditorState> {
             this.renderCollection(table, 'columns')
                 .class('dd-editor-row-container')
         })
+
+        // common column quick links
+        const includedNames = new Set(this.columnStates.map(s => s.name))
+        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 => {
+                h3.span().text("Common Columns")
+            })
+            parent.table('.dd-table', table => {
+                table.thead(thead => {
+                    thead.tr(tr => {
+                        tr.th().text("Name")
+                        tr.th().text("Description")
+                        tr.th().text("")
+                    })
+                })
+                table.tbody(tbody => {
+                    for (const colDef of commonCols) {
+                        tbody.tr(tr => {
+                            tr.td('.name').text(colDef.name)
+                            tr.td('.description').text(colDef.metadata?.description || '')
+                            tr.td().a('.add-column.tt-button.secondary.circle.inline', a => {
+                                a.i('.glyp-plus')
+                            }).emitClick(addSingleKey, {name: colDef.name})
+                        })
+                    }
+                })
+            })
+        }
+
     }
 
     removeColumn(id: string) {
@@ -200,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.19",
+  "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/gen/hub-icons.ts

@@ -249,6 +249,10 @@ import ReactionRaw from '../images/icons/reaction.svg?raw'
 // @ts-ignore
 import ReactionSrc from '../images/icons/reaction.svg'
 // @ts-ignore
+import ReadMailRaw from '../images/icons/read_mail.svg?raw'
+// @ts-ignore
+import ReadMailSrc from '../images/icons/read_mail.svg'
+// @ts-ignore
 import RecentRaw from '../images/icons/recent.svg?raw'
 // @ts-ignore
 import RecentSrc from '../images/icons/recent.svg'
@@ -578,6 +582,10 @@ export const IconDefs: Record<HubIconName,{ raw: string, src: string }> = {
         raw: ReactionRaw,
         src: ReactionSrc,
     },
+    "hub-read_mail": {
+        raw: ReadMailRaw,
+        src: ReadMailSrc,
+    },
     "hub-recent": {
         raw: RecentRaw,
         src: RecentSrc,
@@ -665,7 +673,7 @@ export const IconDefs: Record<HubIconName,{ raw: string, src: string }> = {
 }
 
 const Names = [
-    'hub-active', 'hub-admin', 'hub-archive', 'hub-arrow_down', 'hub-arrow_left', 'hub-arrow_right', 'hub-arrow_up', 'hub-assign', 'hub-attachment', 'hub-back', 'hub-badge', 'hub-board', 'hub-branch', 'hub-bug', 'hub-calculator', 'hub-checkmark', 'hub-close', 'hub-clypboard', 'hub-comment', 'hub-complete', 'hub-dashboard', 'hub-data_pull', 'hub-data_update', 'hub-database', 'hub-day', 'hub-delete', 'hub-documentation', 'hub-edit', 'hub-feature', 'hub-flex', 'hub-forward', 'hub-github', 'hub-history', 'hub-home', 'hub-image', 'hub-inbox', 'hub-info', 'hub-issue', 'hub-lane', 'hub-lane_asap', 'hub-lane_days', 'hub-lane_hours', 'hub-lane_weeks', 'hub-lanes_board', 'hub-level_complete', 'hub-level_highway', 'hub-level_on_ramp', 'hub-level_parking', 'hub-minus', 'hub-night', 'hub-origin', 'hub-pending', 'hub-plus', 'hub-post', 'hub-pr_closed', 'hub-pr_merged', 'hub-pr_open', 'hub-prioritized', 'hub-project', 'hub-question', 'hub-reaction', 'hub-recent', 'hub-refresh', 'hub-request', 'hub-settings', 'hub-status', 'hub-step_deploy', 'hub-step_develop', 'hub-step_investigate', 'hub-step_review', 'hub-step_test', 'hub-steps', 'hub-steps_board', 'hub-subscribe', 'hub-support', 'hub-terrier', 'hub-thumbs_up', 'hub-type', 'hub-unprioritized', 'hub-upload', 'hub-user', 'hub-users'
+    'hub-active', 'hub-admin', 'hub-archive', 'hub-arrow_down', 'hub-arrow_left', 'hub-arrow_right', 'hub-arrow_up', 'hub-assign', 'hub-attachment', 'hub-back', 'hub-badge', 'hub-board', 'hub-branch', 'hub-bug', 'hub-calculator', 'hub-checkmark', 'hub-close', 'hub-clypboard', 'hub-comment', 'hub-complete', 'hub-dashboard', 'hub-data_pull', 'hub-data_update', 'hub-database', 'hub-day', 'hub-delete', 'hub-documentation', 'hub-edit', 'hub-feature', 'hub-flex', 'hub-forward', 'hub-github', 'hub-history', 'hub-home', 'hub-image', 'hub-inbox', 'hub-info', 'hub-issue', 'hub-lane', 'hub-lane_asap', 'hub-lane_days', 'hub-lane_hours', 'hub-lane_weeks', 'hub-lanes_board', 'hub-level_complete', 'hub-level_highway', 'hub-level_on_ramp', 'hub-level_parking', 'hub-minus', 'hub-night', 'hub-origin', 'hub-pending', 'hub-plus', 'hub-post', 'hub-pr_closed', 'hub-pr_merged', 'hub-pr_open', 'hub-prioritized', 'hub-project', 'hub-question', 'hub-reaction', 'hub-read_mail', 'hub-recent', 'hub-refresh', 'hub-request', 'hub-settings', 'hub-status', 'hub-step_deploy', 'hub-step_develop', 'hub-step_investigate', 'hub-step_review', 'hub-step_test', 'hub-steps', 'hub-steps_board', 'hub-subscribe', 'hub-support', 'hub-terrier', 'hub-thumbs_up', 'hub-type', 'hub-unprioritized', 'hub-upload', 'hub-user', 'hub-users'
 ] as const
 
 export type HubIconName = typeof Names[number]

package/terrier/images/icons/read_mail.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1002.667" height="1002.667" version="1.0" viewBox="0 0 752 752"><path d="M369.5 158.9c-1.6.4-4.6 1.6-6.6 2.7-2 1-47 33.2-99.9 71.4-67.2 48.5-97.2 70.7-99.2 73.4-6.1 8.5-5.9 2.2-5.6 140.2l.3 125.9 2.3 4.6c2.9 5.9 8.2 11.2 14.1 14.1l4.6 2.3h393l4.5-2.1c5.6-2.7 11.3-8.3 14.2-14.3l2.3-4.6.3-125.9c.3-138.1.5-131.7-5.7-140.2-2-2.9-30.9-24.3-99.4-73.6-53-38.3-98.3-70.6-100.6-71.7-4.5-2.3-13.9-3.5-18.6-2.2zm77.1 113.6c37.9 27.3 69 50 69.2 50.4.4 1.1-138.7 101.3-140.2 100.9-1.6-.4-139.6-99.9-139.6-100.7 0-.3 7.3-5.9 16.3-12.3 8.9-6.4 40.3-29 69.7-50.2 29.4-21.2 54-38.4 54.6-38.2.6.2 32.1 22.8 70 50.1zm-158.3 159c38.8 28 72.7 52.1 75.3 53.5 6.4 3.3 15.2 3.8 21.9 1.3 3.1-1.2 32-21.4 75-52.4 38.5-27.7 71.5-51.5 73.3-52.7l3.2-2.3V537H215v-79c0-65.6.2-79 1.3-78.3.8.4 33.1 23.7 72 51.8z"/></svg>

package/terrier/images/optimized/icon-read_mail.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1002.667" height="1002.667" version="1.0" viewBox="0 0 752 752"><path d="M369.5 158.9c-1.6.4-4.6 1.6-6.6 2.7-2 1-47 33.2-99.9 71.4-67.2 48.5-97.2 70.7-99.2 73.4-6.1 8.5-5.9 2.2-5.6 140.2l.3 125.9 2.3 4.6c2.9 5.9 8.2 11.2 14.1 14.1l4.6 2.3h393l4.5-2.1c5.6-2.7 11.3-8.3 14.2-14.3l2.3-4.6.3-125.9c.3-138.1.5-131.7-5.7-140.2-2-2.9-30.9-24.3-99.4-73.6-53-38.3-98.3-70.6-100.6-71.7-4.5-2.3-13.9-3.5-18.6-2.2zm77.1 113.6c37.9 27.3 69 50 69.2 50.4.4 1.1-138.7 101.3-140.2 100.9-1.6-.4-139.6-99.9-139.6-100.7 0-.3 7.3-5.9 16.3-12.3 8.9-6.4 40.3-29 69.7-50.2 29.4-21.2 54-38.4 54.6-38.2.6.2 32.1 22.8 70 50.1zm-158.3 159c38.8 28 72.7 52.1 75.3 53.5 6.4 3.3 15.2 3.8 21.9 1.3 3.1-1.2 32-21.4 75-52.4 38.5-27.7 71.5-51.5 73.3-52.7l3.2-2.3V537H215v-79c0-65.6.2-79 1.3-78.3.8.4 33.1 23.7 72 51.8z"/></svg>

package/terrier/images/raw/icon-read_mail.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="752.000000pt" height="752.000000pt" viewBox="0 0 752.000000 752.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,752.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M3695 5931 c-16 -4 -46 -16 -66 -27 -20 -10 -470 -332 -999 -714
+-672 -485 -972 -707 -992 -734 -61 -85 -59 -22 -56 -1402 l3 -1259 23 -46 c29
+-59 82 -112 141 -141 l46 -23 1965 0 1965 0 45 21 c56 27 113 83 142 143 l23
+46 3 1259 c3 1381 5 1317 -57 1402 -20 29 -309 243 -994 736 -530 383 -983
+706 -1006 717 -45 23 -139 35 -186 22z m771 -1136 c379 -273 690 -500 692
+-504 4 -11 -1387 -1013 -1402 -1009 -16 4 -1396 999 -1396 1007 0 3 73 59 163
+123 89 64 403 290 697 502 294 212 540 384 546 382 6 -2 321 -228 700 -501z
+m-1583 -1590 c388 -280 727 -521 753 -535 64 -33 152 -38 219 -13 31 12 320
+214 750 524 385 277 715 515 733 527 l32 23 0 -790 0 -791 -1610 0 -1610 0 0
+790 c0 656 2 790 13 783 8 -4 331 -237 720 -518z"/>
+</g>
+</svg>

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.
@@ -20,7 +20,10 @@ export type ColumnDef = {
     type: string
     possible_values?: string[]
     default?: string
-    visibility?: MetaVisibility
+    metadata?: {
+        description?: string
+        visibility?: MetaVisibility
+    }
 }
 
 /**
@@ -84,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')
                 }