terrier-engine 4.4.21 → 4.4.26

package/data-dive/dd-session.ts

@@ -3,19 +3,68 @@ import Api from "../terrier/api"
 import {DdDiveGroup} from "./gen/models"
 import {arrays} from "tuff-core";
 import {SelectOptions} from "tuff-core/forms"
+import {Logger} from "tuff-core/logging"
 
+const log = new Logger("DD Session")
 
 type DdSessionData = {
     user: DdUser
     groupMap: Record<string, DdDiveGroup>
 }
 
+const showHintsKey = 'dd-show-hints'
+
+/**
+ * Class that gets added to the body when hints shouldn't be shown.
+ * Needs to be negative like this so we can just apply an !important and override any accidental display values.
+ */
+const hideHintsClass = 'dd-hide-hints'
+
 /**
  * Stores authentication information as well as various options from the server.
  */
 export default class DdSession {
 
+    _showHints = false
+
     constructor(readonly data: DdSessionData) {
+        // default to showing hints
+        const rawShowHints = localStorage.getItem(showHintsKey)
+        this._showHints = !rawShowHints || rawShowHints == 'true'
+        this.updateShowHints()
+    }
+
+    /**
+     * Whether to show the helpful hint bubbles all over the place.
+     */
+    get showHints() {
+        return this._showHints
+    }
+
+    /**
+     * Stores the showHints preference in localStorage.
+     * @param val whether to show hints
+     */
+    set showHints(val: boolean) {
+        this._showHints = val
+        log.info(`Persisting ${showHintsKey} to ${val}`)
+        localStorage.setItem(showHintsKey, val.toString())
+        this.updateShowHints()
+    }
+
+    /**
+     * Updates the DOM with the dd-show-hints class based on the value of this._showHints
+     * @private
+     */
+    private updateShowHints() {
+        const body = document.querySelector('body')
+        if (body) {
+            if (this._showHints) {
+                body.classList.remove(hideHintsClass)
+            } else {
+                body.classList.add(hideHintsClass)
+            }
+        }
     }
 
     get user(): DdUser {
@@ -36,6 +85,9 @@ export default class DdSession {
         })
     }
 
+    /**
+     * Gets user session information from the server.
+     */
     static async get(): Promise<DdSession> {
         const data = await Api.safeGet<DdSessionData>("/data_dive/user_session.json", {})
         return new DdSession(data)

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")
 
@@ -26,6 +27,7 @@ const log = new Logger("DiveEditor")
 export type DiveEditorState = {
     schema: SchemaDef
     dive: DdDive
+    session: DdSession
 }
 
 export default class DiveEditor extends ContentPart<DiveEditorState> {
@@ -34,17 +36,26 @@ export default class DiveEditor extends ContentPart<DiveEditorState> {
 
     newQueryKey = messages.untypedKey()
 
+    static readonly diveChangedKey = messages.untypedKey()
+
     queries = new Array<Query>()
 
     async init() {
         this.tabs = this.makePart(TabContainerPart, {side: 'top'})
 
-        this.tabs.setBeforeAction({
+        this.tabs.addBeforeAction({
             title: 'Queries:',
             icon: 'glyp-data_dive_query'
         })
-        this.tabs.setAfterAction({
+        this.tabs.addAfterAction({
+            title: "Add Another Query",
+            classes: ['dd-hint', 'arrow-right', 'glyp-hint'],
+            tooltip: "Each query represents a separate tab in the resulting spreadsheet",
+            click: {key: this.newQueryKey}
+        })
+        this.tabs.addAfterAction({
             icon: 'glyp-plus_outline',
+            classes: ['new-query'],
             click: {key: this.newQueryKey}
         })
 
@@ -106,7 +117,9 @@ export class DiveEditorPage extends PagePart<{id: string}> {
     editor!: DiveEditor
     session!: DdSession
 
+    showHintsKey = messages.untypedKey()
     saveKey = messages.untypedKey()
+    discardKey = messages.untypedKey()
     runKey = messages.untypedKey()
 
     async init() {
@@ -115,7 +128,7 @@ export class DiveEditorPage extends PagePart<{id: string}> {
         const schema = await Schema.get()
         this.session = await DdSession.get()
         const dive = await Dives.get(this.state.id)
-        this.editor = this.makePart(DiveEditor, {schema, dive})
+        this.editor = this.makePart(DiveEditor, {schema, dive, session: this.session})
 
         this.mainContentWidth = 'wide'
 
@@ -129,9 +142,25 @@ export class DiveEditorPage extends PagePart<{id: string}> {
             icon: 'glyp-data_dive'
         })
 
+        this.addToolbarInput('show-hints', 'checkbox', {
+            title: "Hints",
+            icon: 'glyp-hint',
+            defaultValue: this.session.showHints.toString(),
+            onChangeKey: this.showHintsKey,
+            onInputKey: this.showHintsKey
+        })
+
+        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 +170,27 @@ 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.onInput(this.showHintsKey, m => {
+            // TODO: fix emitInput and emitChange to return the correct value in tuff
+            const showHints = (m.event.target as HTMLInputElement).checked
+            log.info(`Show hints input to ${showHints}`, m)
+            this.session.showHints = showHints
+        })
+
+        this.listenMessage(DiveEditor.diveChangedKey, _ => {
+            log.info("Dive changed")
+            this.element?.classList.add('changed')
+        }, {attach: 'passive'})
+
         this.dirty()
     }
 
@@ -162,6 +208,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', 'secondary'],
             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/query-editor.ts

@@ -39,7 +39,10 @@ class SettingsPart extends ContentPart<SubEditorState> {
 
     renderContent(parent: PartTag) {
         parent.part(this.form)
-        parent.div('.tt-flex.justify-end', row => {
+        parent.div('.tt-flex.gap.align-center.justify-end', row => {
+            row.div('.dd-hint.glyp-hint', hint => {
+                hint.div('.title').text("These settings only apply to this query, not the dive as a whole")
+            })
             row.a('.alert.tt-flex', a => {
                 a.i('.glyp-delete')
                 a.span({text: "Delete"})

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

@@ -27,7 +27,7 @@ export default class QueryForm extends ContentPart<{ query: QuerySettings }> {
 
 
     get parentClasses(): Array<string> {
-        return ['tt-form']
+        return ['tt-form', 'tt-flex', 'column', 'gap']
     }
 
     renderContent(parent: PartTag): void {

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) {
@@ -195,7 +215,17 @@ export class TableView<T extends TableRef> extends ContentPart<{ schema: SchemaD
                 a.div().text("Join")
                 a.i('.glyp-belongs_to')
             }).emitClick(this.newJoinedKey)
+
+            // join hint
+            if (!Object.keys(this.table.joins || {}).length) {
+                panel.a('.dd-hint.joins.arrow-top.glyp-hint', hint => {
+                    hint.div('.title').text("Join More Tables")
+                })
+                .emitClick(this.newJoinedKey)
+                .data({tooltip: "Include data from other tables that are related to this one"})
+            }
         })
+
     }
 
     renderColumns(parent: PartTag) {
@@ -216,6 +246,11 @@ export class TableView<T extends TableRef> extends ContentPart<{ schema: SchemaD
             }
             else {
                 section.div('.line.empty').div().text('None')
+                section.div('.dd-hint-container', hintContainer => {
+                    hintContainer.div('dd-hint.glyp-hint', hint => {
+                        hint.div('.hint-title').text("Add Columns")
+                    })
+                })
             }
         }).emitClick(this.editColumnsKey, {})
     }
@@ -234,6 +269,11 @@ export class TableView<T extends TableRef> extends ContentPart<{ schema: SchemaD
                 }
             } else {
                 section.div('.line.empty').text('None')
+                section.div('.dd-hint-container', hintContainer => {
+                    hintContainer.div('dd-hint.glyp-hint', hint => {
+                        hint.div('.hint-title').text("Add Filters")
+                    })
+                })
             }
         }).emitClick(this.editFiltersKey, {})
     }
@@ -372,6 +412,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.26",
   "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/glyps.ts

@@ -1,6 +1,6 @@
-// This file was automatically generated by glyps:compile on 06/18/23  3:03 PM, DO NOT MANUALLY EDIT!
+// This file was automatically generated by glyps:compile on 07/21/23  5:50 PM, DO NOT MANUALLY EDIT!
 
-const names = ['glyp-abacus', 'glyp-account', 'glyp-accounts_payable', 'glyp-accounts_receivable', 'glyp-action_log', 'glyp-activate', 'glyp-active', 'glyp-activity_high', 'glyp-activity_low', 'glyp-activity_medium', 'glyp-activity_none', 'glyp-address1', 'glyp-adjustment', 'glyp-admin', 'glyp-administration', 'glyp-air_freshener', 'glyp-alert', 'glyp-align_horizontal', 'glyp-align_vertical', 'glyp-anchor', 'glyp-announcement', 'glyp-app_update', 'glyp-append_selection', 'glyp-appointment', 'glyp-appointment_setup', 'glyp-archive', 'glyp-arrow_down', 'glyp-arrow_left', 'glyp-arrow_right', 'glyp-arrow_transfer', 'glyp-arrow_up', 'glyp-ascending', 'glyp-attachment', 'glyp-audit_analyzer', 'glyp-autopay', 'glyp-availability', 'glyp-background_batch', 'glyp-background_job', 'glyp-bait_for_demolition', 'glyp-bar_chart', 'glyp-barcode', 'glyp-bat_exclusion', 'glyp-bed_bug_fumigation', 'glyp-begin_service', 'glyp-belongs_to', 'glyp-billing', 'glyp-billing_office', 'glyp-billing_terms', 'glyp-billto', 'glyp-bioremediation', 'glyp-bird_exclusion', 'glyp-black_light', 'glyp-branch', 'glyp-branch_bats', 'glyp-branch_birds', 'glyp-branch_general', 'glyp-branch_irrigation', 'glyp-branch_landscape', 'glyp-branch_multi_housing', 'glyp-branch_office', 'glyp-branch_orders', 'glyp-branch_residential', 'glyp-branch_sales', 'glyp-branch_termites', 'glyp-branch_weeds', 'glyp-branch_wildlife', 'glyp-build', 'glyp-calculate', 'glyp-calendar', 'glyp-calendar_branch', 'glyp-calendar_map', 'glyp-calendar_rolling', 'glyp-calendar_share', 'glyp-calendar_snap', 'glyp-california', 'glyp-call', 'glyp-callback', 'glyp-camera', 'glyp-cancellation', 'glyp-cancelled', 'glyp-card_american_express', 'glyp-card_discover', 'glyp-card_mastercard', 'glyp-card_visa', 'glyp-catalog', 'glyp-caught', 'glyp-cert', 'glyp-check_all', 'glyp-check_in', 'glyp-check_in_service', 'glyp-checked', 'glyp-checked_empty', 'glyp-checkmark', 'glyp-checkmark_filled', 'glyp-checkout', 'glyp-chemical', 'glyp-chemical_authorization', 'glyp-chemical_backpack_sprayer', 'glyp-chemical_biological_controls', 'glyp-chemical_disinfectant', 'glyp-chemical_fertilizer', 'glyp-chemical_flying_insect_bait', 'glyp-chemical_fumigants', 'glyp-chemical_insect_aerosol', 'glyp-chemical_insect_bait', 'glyp-chemical_insect_dust', 'glyp-chemical_insect_granules', 'glyp-chemical_insect_spray', 'glyp-chemical_label', 'glyp-chemical_mole_bait', 'glyp-chemical_pest_bird_control', 'glyp-chemical_pheromone_products', 'glyp-chemical_power_sprayer', 'glyp-chemical_rodenticide_block', 'glyp-chemical_rodenticide_non_block', 'glyp-chemical_sds', 'glyp-chemical_tree_products', 'glyp-chemical_weed_control', 'glyp-chemical_wildlife_repellents', 'glyp-chemical_wildlife_toxicants', 'glyp-chevron_down', 'glyp-chevron_left', 'glyp-chevron_right', 'glyp-chevron_up', 'glyp-city', 'glyp-click', 'glyp-client_actions', 'glyp-client_pest_sightings', 'glyp-client_required', 'glyp-close', 'glyp-cloud', 'glyp-clypboard', 'glyp-clypedia', 'glyp-clypmart', 'glyp-code', 'glyp-code_details', 'glyp-collections', 'glyp-columns', 'glyp-comment', 'glyp-comment_filled', 'glyp-commission_origin', 'glyp-commissions', 'glyp-company_setup', 'glyp-compass', 'glyp-complete', 'glyp-complete_certificate', 'glyp-complete_enrollment', 'glyp-condition_appliance_machinery', 'glyp-condition_customer', 'glyp-condition_device', 'glyp-condition_door_window', 'glyp-condition_dumpster', 'glyp-condition_entry_point', 'glyp-condition_evidence', 'glyp-condition_exclusion', 'glyp-condition_exterior', 'glyp-condition_interior', 'glyp-condition_plumbing', 'glyp-condition_prep_storage', 'glyp-condition_rodent_evidence', 'glyp-condition_rodent_exclusion', 'glyp-condition_roof_ceiling', 'glyp-condition_structure', 'glyp-condition_supplies', 'glyp-condition_termites', 'glyp-condition_ventilation', 'glyp-condition_wall_floor', 'glyp-condition_wildlife', 'glyp-conditions', 'glyp-consolidate', 'glyp-construction', 'glyp-contract', 'glyp-contract_cancellation', 'glyp-contract_overview', 'glyp-conversation', 'glyp-copesan', 'glyp-copy', 'glyp-credit_memo', 'glyp-credit_non_revenue', 'glyp-credit_production', 'glyp-credit_prospect', 'glyp-credit_sales_bonus', 'glyp-crew', 'glyp-cumulative', 'glyp-cursor', 'glyp-custom_form', 'glyp-customer', 'glyp-customer_service', 'glyp-dashboard', 'glyp-data_dive', 'glyp-data_dive_query', 'glyp-data_dives', 'glyp-database', 'glyp-dead_animal_removal', 'glyp-default', 'glyp-delete', 'glyp-demo_mode', 'glyp-descending', 'glyp-design', 'glyp-desktop', 'glyp-detail_report', 'glyp-developer', 'glyp-device', 'glyp-device_sync', 'glyp-differential', 'glyp-disable', 'glyp-disabled_filled', 'glyp-distribute_horizontal', 'glyp-distribute_vertical', 'glyp-division', 'glyp-document', 'glyp-documentation', 'glyp-documents', 'glyp-download', 'glyp-driving', 'glyp-duplicate', 'glyp-duplicate_location', 'glyp-duration', 'glyp-edit', 'glyp-email', 'glyp-employment', 'glyp-entertainment_public_venues', 'glyp-equipment_bear_trap', 'glyp-equipment_flying_insect_bait_station', 'glyp-equipment_flying_insect_light_trap', 'glyp-equipment_insect_monitor', 'glyp-equipment_lethal_animal_trap', 'glyp-equipment_live_animal_trap', 'glyp-equipment_live_rodent_trap', 'glyp-equipment_maintenance', 'glyp-equipment_map_viewer', 'glyp-equipment_maps', 'glyp-equipment_mosquito_trap', 'glyp-equipment_other', 'glyp-equipment_pheromone_trap', 'glyp-equipment_pick_up', 'glyp-equipment_rodent_bait', 'glyp-equipment_rodent_trap', 'glyp-equipment_termite_bait_station', 'glyp-equipment_termite_monitor', 'glyp-exclusion', 'glyp-expand', 'glyp-expiring', 'glyp-exterior', 'glyp-extras', 'glyp-facebook', 'glyp-farm', 'glyp-farm_grain_seed', 'glyp-fast_and_frequent', 'glyp-favorite', 'glyp-feedback', 'glyp-field_guide', 'glyp-field_training', 'glyp-file_blank', 'glyp-file_html', 'glyp-file_image', 'glyp-file_pdf', 'glyp-file_printable', 'glyp-file_spreadsheet', 'glyp-file_text', 'glyp-filter', 'glyp-finance', 'glyp-finding', 'glyp-folder', 'glyp-followup', 'glyp-food_bev_pharma', 'glyp-formula', 'glyp-fuel', 'glyp-fumigation', 'glyp-function', 'glyp-function_aggregate', 'glyp-function_time', 'glyp-gain_loss', 'glyp-generate_invoices', 'glyp-generate_orders', 'glyp-geo', 'glyp-geo_heat_map', 'glyp-google', 'glyp-google_calendar', 'glyp-government', 'glyp-grain_seed', 'glyp-grid', 'glyp-grouped', 'glyp-grouping_combine', 'glyp-grouping_separate', 'glyp-has_many', 'glyp-health_care', 'glyp-heat_map', 'glyp-heat_treatment', 'glyp-help', 'glyp-hidden', 'glyp-honeybee_removal', 'glyp-housing', 'glyp-in_progress', 'glyp-incomplete_certificate', 'glyp-industrial', 'glyp-info', 'glyp-information_technology', 'glyp-inspect_map', 'glyp-inspections', 'glyp-insulation', 'glyp-interior', 'glyp-invoice', 'glyp-invoice_review', 'glyp-irrigation_install', 'glyp-irrigation_maintenance', 'glyp-items', 'glyp-job', 'glyp-join', 'glyp-join_inner', 'glyp-join_left', 'glyp-justice', 'glyp-k9_inspection', 'glyp-key', 'glyp-label_bottom', 'glyp-label_left', 'glyp-label_right', 'glyp-label_top', 'glyp-labor', 'glyp-landscape', 'glyp-landscape_maintenance', 'glyp-laptop', 'glyp-lead', 'glyp-lead_listing', 'glyp-lead_source', 'glyp-leads_report', 'glyp-learning_hub', 'glyp-ledger', 'glyp-legal', 'glyp-license', 'glyp-lifetime', 'glyp-line_cap_arrow', 'glyp-line_cap_bar', 'glyp-line_cap_circle', 'glyp-line_cap_none', 'glyp-line_caps', 'glyp-line_style', 'glyp-link', 'glyp-location', 'glyp-location_charge', 'glyp-location_credit', 'glyp-location_kind', 'glyp-location_message', 'glyp-location_origin', 'glyp-location_tags', 'glyp-locations', 'glyp-locked', 'glyp-lodging', 'glyp-log_in', 'glyp-log_out', 'glyp-log_report', 'glyp-logbook', 'glyp-logbook_documents', 'glyp-lot_number', 'glyp-manager', 'glyp-map', 'glyp-markdown', 'glyp-market', 'glyp-materials', 'glyp-mattress_encasement', 'glyp-merge', 'glyp-message_billing', 'glyp-message_collections', 'glyp-message_complaint', 'glyp-message_misc', 'glyp-message_technician', 'glyp-messages', 'glyp-misc', 'glyp-miscellaneous', 'glyp-move_order', 'glyp-mowing', 'glyp-multi_housing', 'glyp-mute', 'glyp-navicon', 'glyp-new_location', 'glyp-no_charge', 'glyp-no_service', 'glyp-note', 'glyp-note_access', 'glyp-note_billing', 'glyp-note_collection', 'glyp-note_complaint', 'glyp-note_directions', 'glyp-note_focused', 'glyp-note_office', 'glyp-note_preservice', 'glyp-note_sales', 'glyp-note_service', 'glyp-notification', 'glyp-number', 'glyp-office', 'glyp-office_government', 'glyp-office_training', 'glyp-on_demand', 'glyp-on_demand_order', 'glyp-open', 'glyp-open_invoice', 'glyp-operations', 'glyp-options', 'glyp-order_actions', 'glyp-order_approved', 'glyp-order_batch', 'glyp-order_editor', 'glyp-order_pending', 'glyp-order_series', 'glyp-order_unapproved', 'glyp-org_structure', 'glyp-org_unit', 'glyp-org_unit_settings', 'glyp-origin', 'glyp-origin_client', 'glyp-origin_tech', 'glyp-outlook', 'glyp-overlap', 'glyp-password', 'glyp-past_due', 'glyp-paused', 'glyp-pay_brackets', 'glyp-payment', 'glyp-payment_ach', 'glyp-payment_application_apply', 'glyp-payment_application_correction', 'glyp-payment_application_initial', 'glyp-payment_application_refund', 'glyp-payment_application_transfer', 'glyp-payment_application_unapply', 'glyp-payment_application_unapply_all', 'glyp-payment_applications', 'glyp-payment_batch', 'glyp-payment_cash', 'glyp-payment_check', 'glyp-payment_coupon', 'glyp-payment_credit', 'glyp-payment_discount', 'glyp-payment_eft', 'glyp-payment_finance_charge', 'glyp-payments', 'glyp-payroll', 'glyp-pdf', 'glyp-pending', 'glyp-periodic', 'glyp-periodic_assessment', 'glyp-permission', 'glyp-pest', 'glyp-pest_ants', 'glyp-pest_bats', 'glyp-pest_bed_bugs', 'glyp-pest_birds', 'glyp-pest_crawling_insects', 'glyp-pest_dermestids', 'glyp-pest_fall_invaders', 'glyp-pest_flying_insects', 'glyp-pest_moles', 'glyp-pest_mosquitoes', 'glyp-pest_nuisance_animals', 'glyp-pest_ornamental', 'glyp-pest_ornamental_diseases', 'glyp-pest_roaches', 'glyp-pest_rodents', 'glyp-pest_scorpions', 'glyp-pest_snakes', 'glyp-pest_spiders', 'glyp-pest_stinging_insects', 'glyp-pest_stored_product_pests', 'glyp-pest_ticks_and_fleas', 'glyp-pest_viruses_and_bacteria', 'glyp-pest_weeds', 'glyp-pest_wood_destroyers', 'glyp-phone', 'glyp-pick_date', 'glyp-pick_list', 'glyp-platform_android', 'glyp-platform_ios', 'glyp-platform_macos', 'glyp-platform_windows', 'glyp-play', 'glyp-plus', 'glyp-plus_filled', 'glyp-plus_outline', 'glyp-portal', 'glyp-price_increase', 'glyp-price_increase_alt', 'glyp-pricing_table', 'glyp-print', 'glyp-privacy', 'glyp-product_sale', 'glyp-production', 'glyp-professional_consultation', 'glyp-program', 'glyp-program_elements', 'glyp-program_initiation', 'glyp-program_order', 'glyp-program_review', 'glyp-promo', 'glyp-proposal', 'glyp-protection', 'glyp-purchase_order', 'glyp-quality', 'glyp-query', 'glyp-radio_checked', 'glyp-radio_empty', 'glyp-reassign', 'glyp-receipt', 'glyp-recent', 'glyp-recommendation', 'glyp-record_details', 'glyp-recurring_revenue', 'glyp-redo', 'glyp-refresh', 'glyp-refund', 'glyp-region', 'glyp-released', 'glyp-remove', 'glyp-renewal', 'glyp-report', 'glyp-required_input', 'glyp-reschedule', 'glyp-restaurant_bar', 'glyp-revenue', 'glyp-review', 'glyp-rfid', 'glyp-ride_along', 'glyp-rodent_exclusion', 'glyp-route_change', 'glyp-route_optimization', 'glyp-rows', 'glyp-ruler', 'glyp-sales', 'glyp-sales_contest', 'glyp-sales_pipeline', 'glyp-sales_tax', 'glyp-sales_tax_exemption', 'glyp-schedule_lock', 'glyp-schedule_lock_afternoon', 'glyp-schedule_lock_day', 'glyp-schedule_lock_exact', 'glyp-schedule_lock_four_hour', 'glyp-schedule_lock_morning', 'glyp-schedule_lock_none', 'glyp-schedule_lock_two_day', 'glyp-schedule_lock_two_hour', 'glyp-schedule_lock_week', 'glyp-schedule_tyoe_every', 'glyp-schedule_type_every', 'glyp-schedule_type_none', 'glyp-schedule_type_on_demand', 'glyp-schedule_type_schedule', 'glyp-scheduled', 'glyp-scheduling', 'glyp-school_church', 'glyp-script', 'glyp-search', 'glyp-seeding', 'glyp-segment', 'glyp-sent', 'glyp-sentricon', 'glyp-service_agreement', 'glyp-service_form', 'glyp-service_miscellaneous', 'glyp-service_reminder', 'glyp-service_report', 'glyp-service_request', 'glyp-services', 'glyp-settings', 'glyp-setup', 'glyp-signature', 'glyp-simulator', 'glyp-site_map', 'glyp-site_map_annotation', 'glyp-site_map_chemical', 'glyp-site_map_edit_details', 'glyp-site_map_edit_geo', 'glyp-site_map_equipment', 'glyp-site_map_exterior', 'glyp-site_map_foundation', 'glyp-site_map_icon', 'glyp-site_map_interior', 'glyp-site_map_label', 'glyp-site_map_perimeter', 'glyp-site_map_settings_left', 'glyp-site_map_settings_right', 'glyp-site_map_template', 'glyp-skip', 'glyp-smart_traps', 'glyp-sms', 'glyp-snow_removal', 'glyp-sort', 'glyp-special', 'glyp-split', 'glyp-spp_scorecard', 'glyp-square_edge', 'glyp-start_sheet', 'glyp-start_time', 'glyp-statement', 'glyp-states', 'glyp-sticky', 'glyp-stop_time', 'glyp-store_material', 'glyp-store_order', 'glyp-store_order_back_order', 'glyp-store_order_cancelled', 'glyp-store_order_complete', 'glyp-store_order_pending', 'glyp-store_order_pending_return', 'glyp-store_order_pre_order', 'glyp-store_order_returned', 'glyp-stores', 'glyp-styling', 'glyp-subscribe', 'glyp-supplemental', 'glyp-support', 'glyp-sync', 'glyp-table', 'glyp-tablet', 'glyp-tablets', 'glyp-tag_manager', 'glyp-tags', 'glyp-task_runs', 'glyp-tech_pest_sightings', 'glyp-technician', 'glyp-technician_approach', 'glyp-template', 'glyp-termite_fumigation', 'glyp-terrier', 'glyp-territory', 'glyp-text', 'glyp-thermometer', 'glyp-third_party_billing', 'glyp-ticket_type', 'glyp-tickets', 'glyp-tidy', 'glyp-time', 'glyp-time_entry', 'glyp-timeline', 'glyp-toolbox', 'glyp-tqi', 'glyp-tracker', 'glyp-tracking', 'glyp-training_course', 'glyp-treatment_split', 'glyp-trends', 'glyp-trip_charge', 'glyp-ui_type', 'glyp-unchecked', 'glyp-undo', 'glyp-unit_sweep', 'glyp-unit_tag', 'glyp-university', 'glyp-unlocked', 'glyp-unscheduled', 'glyp-update_check_positions', 'glyp-upload', 'glyp-user', 'glyp-user_credit', 'glyp-user_tags', 'glyp-users', 'glyp-utility', 'glyp-vacation', 'glyp-vacuum', 'glyp-variant', 'glyp-vendor', 'glyp-versions', 'glyp-video', 'glyp-visible', 'glyp-warehouse', 'glyp-wdo', 'glyp-web_dusting', 'glyp-website', 'glyp-wildlife', 'glyp-wildlife_exclusion', 'glyp-winter_check', 'glyp-wizard', 'glyp-work', 'glyp-work_class', 'glyp-work_code', 'glyp-work_order', 'glyp-work_production', 'glyp-work_progress', 'glyp-work_yield', 'glyp-year', 'glyp-yield', 'glyp-zip_code', 'glyp-zone_adjacent', 'glyp-zone_check', 'glyp-zone_production', 'glyp-zone_remote', 'glyp-zoom_fit'] as const
+const names = ['glyp-abacus', 'glyp-account', 'glyp-accounts_payable', 'glyp-accounts_receivable', 'glyp-action_log', 'glyp-activate', 'glyp-active', 'glyp-activity_high', 'glyp-activity_low', 'glyp-activity_medium', 'glyp-activity_none', 'glyp-address1', 'glyp-adjustment', 'glyp-admin', 'glyp-administration', 'glyp-air_freshener', 'glyp-alert', 'glyp-align_horizontal', 'glyp-align_vertical', 'glyp-anchor', 'glyp-announcement', 'glyp-app_update', 'glyp-append_selection', 'glyp-appointment', 'glyp-appointment_setup', 'glyp-archive', 'glyp-arrow_down', 'glyp-arrow_left', 'glyp-arrow_right', 'glyp-arrow_transfer', 'glyp-arrow_up', 'glyp-ascending', 'glyp-attachment', 'glyp-audit_analyzer', 'glyp-autopay', 'glyp-availability', 'glyp-background_batch', 'glyp-background_job', 'glyp-bait_for_demolition', 'glyp-bar_chart', 'glyp-barcode', 'glyp-bat_exclusion', 'glyp-bed_bug_fumigation', 'glyp-begin_service', 'glyp-belongs_to', 'glyp-billing', 'glyp-billing_office', 'glyp-billing_terms', 'glyp-billto', 'glyp-bioremediation', 'glyp-bird_exclusion', 'glyp-black_light', 'glyp-branch', 'glyp-branch_bats', 'glyp-branch_birds', 'glyp-branch_general', 'glyp-branch_irrigation', 'glyp-branch_landscape', 'glyp-branch_multi_housing', 'glyp-branch_office', 'glyp-branch_orders', 'glyp-branch_residential', 'glyp-branch_sales', 'glyp-branch_termites', 'glyp-branch_weeds', 'glyp-branch_wildlife', 'glyp-build', 'glyp-calculate', 'glyp-calendar', 'glyp-calendar_branch', 'glyp-calendar_map', 'glyp-calendar_rolling', 'glyp-calendar_share', 'glyp-calendar_snap', 'glyp-california', 'glyp-call', 'glyp-callback', 'glyp-camera', 'glyp-cancellation', 'glyp-cancelled', 'glyp-card_american_express', 'glyp-card_discover', 'glyp-card_mastercard', 'glyp-card_visa', 'glyp-catalog', 'glyp-caught', 'glyp-cert', 'glyp-check_all', 'glyp-check_in', 'glyp-check_in_service', 'glyp-checked', 'glyp-checked_empty', 'glyp-checkmark', 'glyp-checkmark_filled', 'glyp-checkout', 'glyp-chemical', 'glyp-chemical_authorization', 'glyp-chemical_backpack_sprayer', 'glyp-chemical_biological_controls', 'glyp-chemical_disinfectant', 'glyp-chemical_fertilizer', 'glyp-chemical_flying_insect_bait', 'glyp-chemical_fumigants', 'glyp-chemical_insect_aerosol', 'glyp-chemical_insect_bait', 'glyp-chemical_insect_dust', 'glyp-chemical_insect_granules', 'glyp-chemical_insect_spray', 'glyp-chemical_label', 'glyp-chemical_mole_bait', 'glyp-chemical_pest_bird_control', 'glyp-chemical_pheromone_products', 'glyp-chemical_power_sprayer', 'glyp-chemical_rodenticide_block', 'glyp-chemical_rodenticide_non_block', 'glyp-chemical_sds', 'glyp-chemical_tree_products', 'glyp-chemical_weed_control', 'glyp-chemical_wildlife_repellents', 'glyp-chemical_wildlife_toxicants', 'glyp-chevron_down', 'glyp-chevron_left', 'glyp-chevron_right', 'glyp-chevron_up', 'glyp-city', 'glyp-click', 'glyp-client_actions', 'glyp-client_pest_sightings', 'glyp-client_required', 'glyp-close', 'glyp-cloud', 'glyp-clypboard', 'glyp-clypedia', 'glyp-clypmart', 'glyp-code', 'glyp-code_details', 'glyp-collections', 'glyp-columns', 'glyp-comment', 'glyp-comment_filled', 'glyp-commission_origin', 'glyp-commissions', 'glyp-company_setup', 'glyp-compass', 'glyp-complete', 'glyp-complete_certificate', 'glyp-complete_enrollment', 'glyp-condition_appliance_machinery', 'glyp-condition_customer', 'glyp-condition_device', 'glyp-condition_door_window', 'glyp-condition_dumpster', 'glyp-condition_entry_point', 'glyp-condition_evidence', 'glyp-condition_exclusion', 'glyp-condition_exterior', 'glyp-condition_interior', 'glyp-condition_plumbing', 'glyp-condition_prep_storage', 'glyp-condition_rodent_evidence', 'glyp-condition_rodent_exclusion', 'glyp-condition_roof_ceiling', 'glyp-condition_structure', 'glyp-condition_supplies', 'glyp-condition_termites', 'glyp-condition_ventilation', 'glyp-condition_wall_floor', 'glyp-condition_wildlife', 'glyp-conditions', 'glyp-consolidate', 'glyp-construction', 'glyp-contract', 'glyp-contract_cancellation', 'glyp-contract_overview', 'glyp-conversation', 'glyp-copesan', 'glyp-copy', 'glyp-credit_memo', 'glyp-credit_non_revenue', 'glyp-credit_production', 'glyp-credit_prospect', 'glyp-credit_sales_bonus', 'glyp-crew', 'glyp-cumulative', 'glyp-cursor', 'glyp-custom_form', 'glyp-customer', 'glyp-customer_service', 'glyp-dashboard', 'glyp-data_dive', 'glyp-data_dive_query', 'glyp-data_dives', 'glyp-database', 'glyp-dead_animal_removal', 'glyp-default', 'glyp-delete', 'glyp-demo_mode', 'glyp-descending', 'glyp-design', 'glyp-desktop', 'glyp-detail_report', 'glyp-developer', 'glyp-device', 'glyp-device_sync', 'glyp-differential', 'glyp-disable', 'glyp-disabled_filled', 'glyp-distribute_horizontal', 'glyp-distribute_vertical', 'glyp-division', 'glyp-document', 'glyp-documentation', 'glyp-documents', 'glyp-download', 'glyp-driving', 'glyp-duplicate', 'glyp-duplicate_location', 'glyp-duration', 'glyp-edit', 'glyp-email', 'glyp-employment', 'glyp-entertainment_public_venues', 'glyp-equipment_bear_trap', 'glyp-equipment_flying_insect_bait_station', 'glyp-equipment_flying_insect_light_trap', 'glyp-equipment_insect_monitor', 'glyp-equipment_lethal_animal_trap', 'glyp-equipment_live_animal_trap', 'glyp-equipment_live_rodent_trap', 'glyp-equipment_maintenance', 'glyp-equipment_map_viewer', 'glyp-equipment_maps', 'glyp-equipment_mosquito_trap', 'glyp-equipment_other', 'glyp-equipment_pheromone_trap', 'glyp-equipment_pick_up', 'glyp-equipment_rodent_bait', 'glyp-equipment_rodent_trap', 'glyp-equipment_termite_bait_station', 'glyp-equipment_termite_monitor', 'glyp-exclusion', 'glyp-expand', 'glyp-expiring', 'glyp-exterior', 'glyp-extras', 'glyp-facebook', 'glyp-farm', 'glyp-farm_grain_seed', 'glyp-fast_and_frequent', 'glyp-favorite', 'glyp-feedback', 'glyp-field_guide', 'glyp-field_training', 'glyp-file_blank', 'glyp-file_html', 'glyp-file_image', 'glyp-file_pdf', 'glyp-file_printable', 'glyp-file_spreadsheet', 'glyp-file_text', 'glyp-filter', 'glyp-finance', 'glyp-finding', 'glyp-folder', 'glyp-followup', 'glyp-food_bev_pharma', 'glyp-formula', 'glyp-fuel', 'glyp-fumigation', 'glyp-function', 'glyp-function_aggregate', 'glyp-function_time', 'glyp-gain_loss', 'glyp-generate_invoices', 'glyp-generate_orders', 'glyp-geo', 'glyp-geo_heat_map', 'glyp-google', 'glyp-google_calendar', 'glyp-government', 'glyp-grain_seed', 'glyp-grid', 'glyp-grouped', 'glyp-grouping_combine', 'glyp-grouping_separate', 'glyp-has_many', 'glyp-health_care', 'glyp-heat_map', 'glyp-heat_treatment', 'glyp-help', 'glyp-hidden', 'glyp-hint', 'glyp-honeybee_removal', 'glyp-housing', 'glyp-in_progress', 'glyp-incomplete_certificate', 'glyp-industrial', 'glyp-info', 'glyp-information_technology', 'glyp-inspect_map', 'glyp-inspections', 'glyp-insulation', 'glyp-interior', 'glyp-invoice', 'glyp-invoice_review', 'glyp-irrigation_install', 'glyp-irrigation_maintenance', 'glyp-items', 'glyp-job', 'glyp-join', 'glyp-join_inner', 'glyp-join_left', 'glyp-justice', 'glyp-k9_inspection', 'glyp-key', 'glyp-label_bottom', 'glyp-label_left', 'glyp-label_right', 'glyp-label_top', 'glyp-labor', 'glyp-landscape', 'glyp-landscape_maintenance', 'glyp-laptop', 'glyp-lead', 'glyp-lead_listing', 'glyp-lead_source', 'glyp-leads_report', 'glyp-learning_hub', 'glyp-ledger', 'glyp-legal', 'glyp-license', 'glyp-lifetime', 'glyp-line_cap_arrow', 'glyp-line_cap_bar', 'glyp-line_cap_circle', 'glyp-line_cap_none', 'glyp-line_caps', 'glyp-line_style', 'glyp-link', 'glyp-location', 'glyp-location_charge', 'glyp-location_credit', 'glyp-location_kind', 'glyp-location_message', 'glyp-location_origin', 'glyp-location_tags', 'glyp-locations', 'glyp-locked', 'glyp-lodging', 'glyp-log_in', 'glyp-log_out', 'glyp-log_report', 'glyp-logbook', 'glyp-logbook_documents', 'glyp-lot_number', 'glyp-manager', 'glyp-map', 'glyp-markdown', 'glyp-market', 'glyp-materials', 'glyp-mattress_encasement', 'glyp-merge', 'glyp-message_billing', 'glyp-message_collections', 'glyp-message_complaint', 'glyp-message_misc', 'glyp-message_technician', 'glyp-messages', 'glyp-misc', 'glyp-miscellaneous', 'glyp-move_order', 'glyp-mowing', 'glyp-multi_housing', 'glyp-mute', 'glyp-navicon', 'glyp-new_location', 'glyp-no_charge', 'glyp-no_service', 'glyp-note', 'glyp-note_access', 'glyp-note_billing', 'glyp-note_collection', 'glyp-note_complaint', 'glyp-note_directions', 'glyp-note_focused', 'glyp-note_office', 'glyp-note_preservice', 'glyp-note_sales', 'glyp-note_service', 'glyp-notification', 'glyp-number', 'glyp-office', 'glyp-office_government', 'glyp-office_training', 'glyp-on_demand', 'glyp-on_demand_order', 'glyp-open', 'glyp-open_invoice', 'glyp-operations', 'glyp-options', 'glyp-order_actions', 'glyp-order_approved', 'glyp-order_batch', 'glyp-order_editor', 'glyp-order_pending', 'glyp-order_series', 'glyp-order_unapproved', 'glyp-org_structure', 'glyp-org_unit', 'glyp-org_unit_settings', 'glyp-origin', 'glyp-origin_client', 'glyp-origin_tech', 'glyp-outlook', 'glyp-overlap', 'glyp-password', 'glyp-past_due', 'glyp-paused', 'glyp-pay_brackets', 'glyp-payment', 'glyp-payment_ach', 'glyp-payment_application_apply', 'glyp-payment_application_correction', 'glyp-payment_application_initial', 'glyp-payment_application_refund', 'glyp-payment_application_transfer', 'glyp-payment_application_unapply', 'glyp-payment_application_unapply_all', 'glyp-payment_applications', 'glyp-payment_batch', 'glyp-payment_cash', 'glyp-payment_check', 'glyp-payment_coupon', 'glyp-payment_credit', 'glyp-payment_discount', 'glyp-payment_eft', 'glyp-payment_finance_charge', 'glyp-payments', 'glyp-payroll', 'glyp-pdf', 'glyp-pending', 'glyp-periodic', 'glyp-periodic_assessment', 'glyp-permission', 'glyp-pest', 'glyp-pest_ants', 'glyp-pest_bats', 'glyp-pest_bed_bugs', 'glyp-pest_birds', 'glyp-pest_crawling_insects', 'glyp-pest_dermestids', 'glyp-pest_fall_invaders', 'glyp-pest_flying_insects', 'glyp-pest_moles', 'glyp-pest_mosquitoes', 'glyp-pest_nuisance_animals', 'glyp-pest_ornamental', 'glyp-pest_ornamental_diseases', 'glyp-pest_roaches', 'glyp-pest_rodents', 'glyp-pest_scorpions', 'glyp-pest_snakes', 'glyp-pest_spiders', 'glyp-pest_stinging_insects', 'glyp-pest_stored_product_pests', 'glyp-pest_ticks_and_fleas', 'glyp-pest_viruses_and_bacteria', 'glyp-pest_weeds', 'glyp-pest_wood_destroyers', 'glyp-phone', 'glyp-pick_date', 'glyp-pick_list', 'glyp-platform_android', 'glyp-platform_ios', 'glyp-platform_macos', 'glyp-platform_windows', 'glyp-play', 'glyp-plus', 'glyp-plus_filled', 'glyp-plus_outline', 'glyp-portal', 'glyp-price_increase', 'glyp-price_increase_alt', 'glyp-pricing_table', 'glyp-print', 'glyp-privacy', 'glyp-product_sale', 'glyp-production', 'glyp-professional_consultation', 'glyp-program', 'glyp-program_elements', 'glyp-program_initiation', 'glyp-program_order', 'glyp-program_review', 'glyp-promo', 'glyp-proposal', 'glyp-protection', 'glyp-purchase_order', 'glyp-quality', 'glyp-query', 'glyp-radio_checked', 'glyp-radio_empty', 'glyp-reassign', 'glyp-receipt', 'glyp-recent', 'glyp-recommendation', 'glyp-record_details', 'glyp-recurring_revenue', 'glyp-redo', 'glyp-refresh', 'glyp-refund', 'glyp-region', 'glyp-released', 'glyp-remove', 'glyp-renewal', 'glyp-report', 'glyp-required_input', 'glyp-reschedule', 'glyp-restaurant_bar', 'glyp-revenue', 'glyp-review', 'glyp-rfid', 'glyp-ride_along', 'glyp-rodent_exclusion', 'glyp-route_change', 'glyp-route_optimization', 'glyp-rows', 'glyp-ruler', 'glyp-sales', 'glyp-sales_contest', 'glyp-sales_pipeline', 'glyp-sales_tax', 'glyp-sales_tax_exemption', 'glyp-schedule_lock', 'glyp-schedule_lock_afternoon', 'glyp-schedule_lock_day', 'glyp-schedule_lock_exact', 'glyp-schedule_lock_four_hour', 'glyp-schedule_lock_morning', 'glyp-schedule_lock_none', 'glyp-schedule_lock_two_day', 'glyp-schedule_lock_two_hour', 'glyp-schedule_lock_week', 'glyp-schedule_tyoe_every', 'glyp-schedule_type_every', 'glyp-schedule_type_none', 'glyp-schedule_type_on_demand', 'glyp-schedule_type_schedule', 'glyp-scheduled', 'glyp-scheduling', 'glyp-school_church', 'glyp-script', 'glyp-search', 'glyp-seeding', 'glyp-segment', 'glyp-sent', 'glyp-sentricon', 'glyp-service_agreement', 'glyp-service_form', 'glyp-service_miscellaneous', 'glyp-service_reminder', 'glyp-service_report', 'glyp-service_request', 'glyp-services', 'glyp-settings', 'glyp-setup', 'glyp-signature', 'glyp-simulator', 'glyp-site_map', 'glyp-site_map_annotation', 'glyp-site_map_chemical', 'glyp-site_map_edit_details', 'glyp-site_map_edit_geo', 'glyp-site_map_equipment', 'glyp-site_map_exterior', 'glyp-site_map_foundation', 'glyp-site_map_icon', 'glyp-site_map_interior', 'glyp-site_map_label', 'glyp-site_map_perimeter', 'glyp-site_map_settings_left', 'glyp-site_map_settings_right', 'glyp-site_map_template', 'glyp-skip', 'glyp-smart_traps', 'glyp-sms', 'glyp-snow_removal', 'glyp-sort', 'glyp-special', 'glyp-split', 'glyp-spp_scorecard', 'glyp-square_edge', 'glyp-start_sheet', 'glyp-start_time', 'glyp-statement', 'glyp-states', 'glyp-sticky', 'glyp-stop_time', 'glyp-store_material', 'glyp-store_order', 'glyp-store_order_back_order', 'glyp-store_order_cancelled', 'glyp-store_order_complete', 'glyp-store_order_pending', 'glyp-store_order_pending_return', 'glyp-store_order_pre_order', 'glyp-store_order_returned', 'glyp-stores', 'glyp-styling', 'glyp-subscribe', 'glyp-supplemental', 'glyp-support', 'glyp-sync', 'glyp-table', 'glyp-tablet', 'glyp-tablets', 'glyp-tag_manager', 'glyp-tags', 'glyp-task_runs', 'glyp-tech_pest_sightings', 'glyp-technician', 'glyp-technician_approach', 'glyp-template', 'glyp-termite_fumigation', 'glyp-terrier', 'glyp-territory', 'glyp-text', 'glyp-thermometer', 'glyp-third_party_billing', 'glyp-ticket_type', 'glyp-tickets', 'glyp-tidy', 'glyp-time', 'glyp-time_entry', 'glyp-timeline', 'glyp-toolbox', 'glyp-tqi', 'glyp-tracker', 'glyp-tracking', 'glyp-training_course', 'glyp-treatment_split', 'glyp-trends', 'glyp-trip_charge', 'glyp-ui_type', 'glyp-unchecked', 'glyp-undo', 'glyp-unit_sweep', 'glyp-unit_tag', 'glyp-university', 'glyp-unlocked', 'glyp-unscheduled', 'glyp-update_check_positions', 'glyp-upload', 'glyp-user', 'glyp-user_credit', 'glyp-user_tags', 'glyp-users', 'glyp-utility', 'glyp-vacation', 'glyp-vacuum', 'glyp-variant', 'glyp-vendor', 'glyp-versions', 'glyp-video', 'glyp-visible', 'glyp-warehouse', 'glyp-wdo', 'glyp-web_dusting', 'glyp-website', 'glyp-wildlife', 'glyp-wildlife_exclusion', 'glyp-winter_check', 'glyp-wizard', 'glyp-work', 'glyp-work_class', 'glyp-work_code', 'glyp-work_order', 'glyp-work_production', 'glyp-work_progress', 'glyp-work_yield', 'glyp-year', 'glyp-yield', 'glyp-zip_code', 'glyp-zone_adjacent', 'glyp-zone_check', 'glyp-zone_production', 'glyp-zone_remote', 'glyp-zoom_fit'] as const
 
 const Glyps = {
   names

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/parts/page-part.ts

@@ -1,10 +1,9 @@
-import {Action, RenderActionOptions} from "../theme"
+import {Action, IconName, RenderActionOptions} from "../theme"
 import ContentPart, {ActionLevel} from "./content-part"
 import {PartTag} from "tuff-core/parts"
 import {optionsForSelect, SelectOptions} from "tuff-core/forms"
 import {UntypedKey} from "tuff-core/messages"
 import {Logger} from "tuff-core/logging"
-import {HtmlParentTag} from "tuff-core/html"
 
 const log = new Logger("Terrier PagePart")
 
@@ -18,15 +17,17 @@ export type ContentWidth = "normal" | "wide"
 type BaseFieldDef = { name: string } & ToolbarFieldDefOptions
 
 type ToolbarFieldDefOptions = {
-    onChangeKey?: UntypedKey,
-    onInputKey?: UntypedKey,
-    defaultValue?: string,
+    onChangeKey?: UntypedKey
+    onInputKey?: UntypedKey
+    defaultValue?: string
     tooltip?: string
+    title?: string
+    icon?: IconName
 }
 
 type ToolbarSelectDef = { type: 'select', options: SelectOptions } & BaseFieldDef
 
-type ValuedInputType = 'text' | 'color' | 'date' | 'datetime-local' | 'email' | 'hidden' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'time' | 'url' | 'week'
+type ValuedInputType = 'text' | 'color' | 'date' | 'datetime-local' | 'email' | 'hidden' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'time' | 'url' | 'week' | 'checkbox'
 type ToolbarValuedInputDef = { type: ValuedInputType } & BaseFieldDef
 
 /**
@@ -163,7 +164,7 @@ export default abstract class PagePart<TState> extends ContentPart<TState> {
     }
 
     protected renderToolbarFields(parent: PartTag) {
-        parent.div('.fields.tt-flex.align-center.small-gap', fields => {
+        parent.div('.fields', fields => {
             for (const name of this._toolbarFieldsOrder) {
                 const def = this._toolbarFields[name]
                 if (!def) {
@@ -171,18 +172,33 @@ export default abstract class PagePart<TState> extends ContentPart<TState> {
                     continue;
                 }
 
-                let field!: HtmlParentTag
-                if (def.type === 'select') {
-                    field = fields.select({name: def.name}, select => {
-                        optionsForSelect(select, def.options, def.defaultValue)
-                    })
-                } else {
-                    field = fields.input({name: def.name, type: def.type})
-                }
-
-                if (def.onChangeKey) field.emitChange(def.onChangeKey)
-                if (def.onInputKey) field.emitInput(def.onInputKey)
-                if (def.tooltip?.length) field.dataAttr('tooltip', def.tooltip)
+                fields.label(label => {
+                    if (def.icon?.length) {
+                        label.i('.icon').class(def.icon)
+                    }
+
+                    if (def.title?.length) {
+                        label.div('.title').text(def.title)
+                    }
+
+                    if (def.type === 'select') {
+                        const select = label.select({name: def.name}, select => {
+                            optionsForSelect(select, def.options, def.defaultValue)
+                        })
+                        if (def.onChangeKey) select.emitChange(def.onChangeKey)
+                        if (def.onInputKey) select.emitInput(def.onInputKey)
+                    } else {
+                        const input = label.input({name: def.name, type: def.type, value: def.defaultValue})
+                        if (def.type == 'checkbox' && def.defaultValue?.length) {
+                            input.attrs({checked: def.defaultValue == 'true'})
+                        }
+                        if (def.onChangeKey) input.emitChange(def.onChangeKey)
+                        if (def.onInputKey) input.emitInput(def.onInputKey)
+                    }
+
+
+                    if (def.tooltip?.length) label.dataAttr('tooltip', def.tooltip)
+                })
             }
         })
     }

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/tabs.ts

@@ -117,17 +117,17 @@ export class TabContainerPart extends TerrierPart<TabContainerState> {
     }
 
 
-    _beforeAction?: Action
+    _beforeActions: Action[] = []
 
-    setBeforeAction(action: Action) {
-        this._beforeAction = action
+    addBeforeAction(action: Action) {
+        this._beforeActions.push(action)
         this.dirty()
     }
 
-    _afterAction?: Action
+    _afterActions: Action[] = []
 
-    setAfterAction(action: Action) {
-        this._afterAction = action
+    addAfterAction(action: Action) {
+        this._afterActions.push(action)
         this.dirty()
     }
 
@@ -141,8 +141,8 @@ export class TabContainerPart extends TerrierPart<TabContainerState> {
         }
         parent.div('tt-tab-container', this.state.side, container => {
             container.div('.tt-flex.tt-tab-list', tabList => {
-                if (this._beforeAction) {
-                    this.theme.renderActions(tabList, [this._beforeAction], {defaultClass: 'action'})
+                if (this._beforeActions.length) {
+                    this.theme.renderActions(tabList, this._beforeActions, {defaultClass: 'action'})
                 }
                 for (const tab of Object.values(this.tabs)) {
                     if (tab.state == 'hidden') continue
@@ -162,9 +162,9 @@ export class TabContainerPart extends TerrierPart<TabContainerState> {
                         }
                     })
                 }
-                if (this._afterAction) {
+                if (this._afterActions.length) {
                     tabList.div('.spacer')
-                    this.theme.renderActions(tabList, [this._afterAction], {defaultClass: 'action'})
+                    this.theme.renderActions(tabList, this._afterActions, {defaultClass: 'action'})
                 }
             })
 

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')
                 }