terrier-engine 4.51.2 → 4.52.0

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

@@ -1,26 +1,25 @@
-import Schema, {SchemaDef} from "../../terrier/schema"
-import {PartTag} from "tuff-core/parts"
+import Schema, { SchemaDef } from "../../terrier/schema"
+import { PartTag } from "tuff-core/parts"
 import Dives from "./dives"
-import Queries, {Query, QueryModelPicker} from "../queries/queries"
+import Queries, { Query, QueryModelPicker } from "../queries/queries"
 import QueryEditor from "../queries/query-editor"
-import {Logger} from "tuff-core/logging"
+import { Logger } from "tuff-core/logging"
 import QueryForm from "../queries/query-form"
-import {TabContainerPart} from "../../terrier/tabs"
+import { TabContainerPart } from "../../terrier/tabs"
 import ContentPart from "../../terrier/parts/content-part"
-import {ModalPart} from "../../terrier/modals"
-import {DdDive} from "../gen/models"
+import { ModalPart } from "../../terrier/modals"
+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"
 import Messages from "tuff-core/messages"
-import Arrays from "tuff-core/arrays"
-import {FormFields} from "tuff-core/forms"
+import { FormFields } from "tuff-core/forms"
 import Fragments from "../../terrier/fragments"
-import {DiveDeliveryPanel} from "./dive-delivery"
+import { DiveDeliveryPanel } from "./dive-delivery"
 import DivePlotList from "../plots/dive-plot-list"
-import {DivePage} from "./dive-page"
+import { DivePage } from "./dive-page"
 
 const log = new Logger("DiveEditor")
 
@@ -49,11 +48,13 @@ export default class DiveEditor extends ContentPart<DiveEditorState> {
 
     static readonly diveChangedKey = Messages.untypedKey()
 
-    queries = new Array<Query>()
+    queries = new Map<string, Query>()
+    // Array of map keys to give the queries a sort order.
+    queryOrder = new Array<string>()
 
     async init() {
-        this.queryTabs = this.makePart(TabContainerPart, {side: 'top'})
-        this.settingsTabs = this.makePart(TabContainerPart, {side: 'top'})
+        this.queryTabs = this.makePart(TabContainerPart, { side: 'top', reorderable: true })
+        this.settingsTabs = this.makePart(TabContainerPart, { side: 'top' })
 
         this.queryTabs.addBeforeAction({
             title: 'Queries:',
@@ -63,40 +64,47 @@ export default class DiveEditor extends ContentPart<DiveEditorState> {
             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}
+            click: { key: this.newQueryKey }
         })
         this.queryTabs.addAfterAction({
             icon: 'glyp-copy',
             classes: ['duplicate-query'],
             tooltip: "Duplicate this query",
-            click: {key: this.duplicateQueryKey}
+            click: { key: this.duplicateQueryKey }
         })
         this.queryTabs.addAfterAction({
             icon: 'glyp-plus_outline',
             classes: ['new-query'],
             tooltip: "Add a new query to this Dive",
-            click: {key: this.newQueryKey}
+            click: { key: this.newQueryKey }
         })
 
-        this.queries = this.state.dive.query_data?.queries || []
-        for (const query of this.queries) {
+        this.queries = new Map()
+        for (const query of this.state.dive.query_data?.queries || []) {
+            this.queries.set(query.id, query)
             this.addQueryTab(query)
         }
 
         this.listenMessage(QueryForm.settingsChangedKey, m => {
             const query = m.data
             log.info(`Query settings changed`, query)
-            this.queryTabs.updateTab({key: query.id, title: query.name})
+            this.queryTabs.updateTab({ key: query.id, title: query.name })
+        })
+
+        // Reorder queries in the list when the tab sort order is updated.
+        this.listenMessage(this.queryTabs.tabReorderedKey, m => {
+            const { newOrder } = m.data
+            this.queryOrder = newOrder
         })
 
         this.onClick(this.newQueryKey, _ => {
-            this.app.showModal(NewQueryModal, {editor: this as DiveEditor, schema: this.state.schema})
+            this.app.showModal(NewQueryModal, { editor: this as DiveEditor, schema: this.state.schema })
         })
 
         this.onClick(this.duplicateQueryKey, _ => {
             const id = this.queryTabs.currentTagKey
             if (id?.length) {
-                const query = this.queries.find(q => q.id == id)
+                const query = this.queries.get(id)
                 if (query) {
                     this.app.showModal(DuplicateQueryModal, {
                         editor: this as DiveEditor,
@@ -114,7 +122,7 @@ export default class DiveEditor extends ContentPart<DiveEditorState> {
         })
 
         this.onClick(DiveEditor.deleteQueryKey, m => {
-            this.app.confirm({title: "Delete Query", icon: 'glyp-delete', body: "Are you sure you want to delete this query?"}, () => {
+            this.app.confirm({ title: "Delete Query", icon: 'glyp-delete', body: "Are you sure you want to delete this query?" }, () => {
                 this.deleteQuery(m.data.id)
             })
         })
@@ -137,7 +145,7 @@ export default class DiveEditor extends ContentPart<DiveEditorState> {
      * @param query
      */
     addQuery(query: Query) {
-        this.queries.push(query)
+        this.queries.set(query.id, query)
         this.addQueryTab(query)
     }
 
@@ -146,16 +154,17 @@ export default class DiveEditor extends ContentPart<DiveEditorState> {
      * @param query
      */
     private addQueryTab(query: Query) {
-        const state = {...this.state, query}
-        this.queryTabs.upsertTab({key: query.id, title: query.name}, QueryEditor, state)
+        const state = { ...this.state, query }
+        this.queryTabs.upsertTab({ key: query.id, title: query.name }, QueryEditor, state)
     }
 
     deleteQuery(id: string) {
         log.info(`Deleting query ${id}`)
-        if (Arrays.deleteIf(this.queries, q => q.id == id) > 0) {
-            this.queryTabs.removeTab(id)
-            this.dirty()
-        }
+        if (!this.queries.has(id)) return
+
+        this.queries.delete(id)
+        this.queryTabs.removeTab(id)
+        this.dirty()
     }
 
     get parentClasses(): Array<string> {
@@ -178,7 +187,7 @@ export default class DiveEditor extends ContentPart<DiveEditorState> {
 
         return {
             ...this.state.dive,
-            query_data: {queries}
+            query_data: { queries: this.queryOrder.map(id => queries.get(id)!) }
         }
     }
 
@@ -189,7 +198,7 @@ export default class DiveEditor extends ContentPart<DiveEditorState> {
 // Editor Page
 ////////////////////////////////////////////////////////////////////////////////
 
-export class DiveEditorPage extends DivePage<{id: string}> {
+export class DiveEditorPage extends DivePage<{ id: string }> {
 
     editor!: DiveEditor
     session!: DdSession
@@ -205,7 +214,7 @@ export class DiveEditorPage extends DivePage<{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, session: this.session})
+        this.editor = this.makePart(DiveEditor, { schema, dive, session: this.session })
 
         this.mainContentWidth = 'wide'
 
@@ -240,20 +249,20 @@ export class DiveEditorPage extends DivePage<{id: string}> {
             title: 'Discard',
             icon: 'glyp-cancelled',
             classes: ['discard-dive-action'],
-            click: {key: this.discardKey}
+            click: { key: this.discardKey }
         }, 'tertiary')
 
         this.addAction({
             title: 'Save',
             icon: 'glyp-complete',
             classes: ['save-dive-action'],
-            click: {key: this.saveKey}
+            click: { key: this.saveKey }
         }, 'tertiary')
 
         this.addAction({
             title: 'Run',
             icon: 'glyp-play',
-            click: {key: this.runKey}
+            click: { key: this.runKey }
         }, 'tertiary')
 
         this.onClick(this.discardKey, _ => {
@@ -275,7 +284,7 @@ export class DiveEditorPage extends DivePage<{id: string}> {
         this.listenMessage(DiveEditor.diveChangedKey, _ => {
             log.info("Dive changed")
             this.element?.classList.add('changed')
-        }, {attach: 'passive'})
+        }, { attach: 'passive' })
 
         this.dirty()
     }
@@ -303,7 +312,7 @@ export class DiveEditorPage extends DivePage<{id: string}> {
 
     async run() {
         const dive = await this.editor.serialize()
-        this.app.showModal(DiveRunModal, {dive})
+        this.app.showModal(DiveRunModal, { dive })
     }
 }
 
@@ -324,8 +333,8 @@ class NewQueryModal extends ModalPart<NewQueryState> {
     modelPicker!: QueryModelPicker
 
     async init() {
-        this.settingsForm = this.makePart(QueryForm, {query: {id: 'new', name: '', notes: ''}})
-        this.modelPicker = this.makePart(QueryModelPicker, {schema: this.state.schema})
+        this.settingsForm = this.makePart(QueryForm, { query: { id: 'new', name: '', notes: '' } })
+        this.modelPicker = this.makePart(QueryModelPicker, { schema: this.state.schema })
 
         this.setIcon('glyp-data_dive_query')
         this.setTitle("New Query")
@@ -333,7 +342,7 @@ class NewQueryModal extends ModalPart<NewQueryState> {
         this.addAction({
             title: "Add",
             icon: 'glyp-plus',
-            click: {key: this.addKey}
+            click: { key: this.addKey }
         })
 
         this.onClick(this.addKey, async _ => {
@@ -361,16 +370,16 @@ class NewQueryModal extends ModalPart<NewQueryState> {
         log.info(`Saving new query`)
         const settings = await this.settingsForm.fields.serialize()
         if (!settings.name?.length) {
-            this.showToast("Please enter a query name", {color: 'alert'})
+            this.showToast("Please enter a query name", { color: 'alert' })
             this.dirty()
             return
         }
         const model = this.modelPicker.model
         if (!model) {
-            this.showToast("Please select a model", {color: 'alert'})
+            this.showToast("Please select a model", { color: 'alert' })
             return
         }
-        const query = {...settings, id: Ids.makeUuid(), from: {model: model.name}}
+        const query = { ...settings, id: Ids.makeUuid(), from: { model: model.name } }
         this.state.editor.addQuery(query)
         this.state.editor.queryTabs.showTab(query.id)
         this.pop()
@@ -398,13 +407,13 @@ class DuplicateQueryModal extends ModalPart<DuplicateQueryState> {
         this.setIcon('glyp-data_dive_query')
         this.setTitle("Duplicate Query")
 
-        const newQuery = {...this.state.query, name: `${this.state.query.name} Copy`}
+        const newQuery = { ...this.state.query, name: `${this.state.query.name} Copy` }
         this.fields = new FormFields<Query>(this, newQuery)
 
         this.addAction({
             title: "Duplicate",
             icon: 'glyp-checkmark',
-            click: {key: this.dupKey}
+            click: { key: this.dupKey }
         })
 
         this.onClick(this.dupKey, async _ => {
@@ -414,7 +423,7 @@ class DuplicateQueryModal extends ModalPart<DuplicateQueryState> {
 
     async save() {
         const newName = this.fields.data.name
-        const query = {...Queries.duplicate(this.state.query), name: newName}
+        const query = { ...Queries.duplicate(this.state.query), name: newName }
         this.state.editor.addQuery(query)
         this.state.editor.queryTabs.showTab(query.id)
         this.pop()
@@ -428,5 +437,4 @@ class DuplicateQueryModal extends ModalPart<DuplicateQueryState> {
             this.fields.textInput(col, 'name')
         })
     }
-}
-
+}

package/package.json

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

package/terrier/plugins/load-on-scroll-plugin.ts

@@ -6,7 +6,12 @@ const log = new Logger('LoadOnScrollPlugin')
 
 type MarginUnit = '%' | 'px'
 type MarginLength = `${number}${MarginUnit}`
-type MarginString = `${MarginLength} ${MarginLength} ${MarginLength} ${MarginLength}`
+type MarginString = MarginLength | `${MarginLength} ${MarginLength}` | `${MarginLength} ${MarginLength} ${MarginLength} ${MarginLength}`
+
+/**
+ * Define the behavior of the load on scroll functionality.
+ * For information about the intersect parameters, see https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
+ */
 export type LoadOnScrollOptions<TState> = {
     // The name of the collection to load on scroll
     collectionName: string
@@ -14,15 +19,14 @@ export type LoadOnScrollOptions<TState> = {
     collectionPartType: PartConstructor<Part<TState>, TState>
     // Called to load the next state. If undefined is returned, no more states will be loaded
     loadNextStates: (existingStates: TState[]) => Promise<TState[] | undefined>
+    // The root element whose viewport is scrolling. If not provided, the document viewport is used.
+    // Usually not required, but if using intersectThreshold on a scrollable element, might be necessary.
+    intersectRootSelector: string
     // Percentage of the last item in the collection that must be visible before the next state is loaded.
-    // If not provided, a default value of 25% is used. Must be between 0 and 1
-    // See: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#threshold
+    // If not provided, a default value of 25% is used. Must be between 0 and 1.
     intersectThreshold?: number
-    // Defines a margin on the document that shifts when the last element is intersecting.
-    // See: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin
+    // Expands the intersection region by the specified margin.
     intersectRootMargin?: MarginString
-    // Configure the intersection observer
-    configureIntersect?: (builder: IntersectionObserverBuilder, partElem: HTMLElement) => any
 }
 
 /**
@@ -50,17 +54,20 @@ export default class LoadOnScrollPlugin<TState> extends PartPlugin<LoadOnScrollO
             return
         }
 
-        this.observer?.disconnect()
-        if (this.observer) {
-            this.observer.disconnect()
-        } else {
-            const builder = new IntersectionObserverBuilder(this.onIntersect.bind(this))
-            builder.rootMargin(this.state.intersectRootMargin ?? '0px 0px 0px 0px')
-            builder.threshold(this.state.intersectThreshold ?? 0.25)
-            if (this.state.configureIntersect) {
-                this.state.configureIntersect(builder, elem)
+        const intersectRoot = (this.state.intersectRootSelector) ? elem.querySelector(this.state.intersectRootSelector) : null
+
+        // We may have re-rendered since the last update, in which case the intersectionRoot will be a new element.
+        // In that case, recreate observer with the new root.
+        if (!this.observer || this.observer.root !== intersectRoot) {
+            const config: IntersectionObserverInit = {
+                root: intersectRoot,
+                rootMargin: this.state.intersectRootMargin ?? '0px 0px 0px 0px',
+                threshold: this.state.intersectThreshold ?? 0.25,
             }
-            this.observer = builder.build()
+            this.observer?.disconnect()
+            this.observer = new IntersectionObserver(this.onIntersect.bind(this), config)
+        } else {
+            this.observer.disconnect()
         }
         this.observer.observe(lastElement)
     }
@@ -88,33 +95,4 @@ export default class LoadOnScrollPlugin<TState> extends PartPlugin<LoadOnScrollO
         this.isLoading = false
         this.part.stale()
     }
-}
-
-export class IntersectionObserverBuilder {
-    private readonly callback: IntersectionObserverCallback
-    private readonly config: IntersectionObserverInit
-
-    constructor(callback: IntersectionObserverCallback) {
-        this.callback = callback
-        this.config = {}
-    }
-
-    root(root: Element | Document | undefined): IntersectionObserverBuilder {
-        this.config.root = root
-        return this
-    }
-
-    rootMargin(margin: MarginString): IntersectionObserverBuilder {
-        this.config.rootMargin = margin
-        return this
-    }
-
-    threshold(threshold: number): IntersectionObserverBuilder {
-        this.config.threshold = threshold
-        return this
-    }
-
-    build() : IntersectionObserver {
-        return new IntersectionObserver(this.callback, this.config)
-    }
 }

package/terrier/tabs.ts

@@ -1,8 +1,9 @@
-import {Logger} from "tuff-core/logging"
+import { Logger } from "tuff-core/logging"
 import Messages from "tuff-core/messages"
-import {Part, PartParent, PartTag, StatelessPart} from "tuff-core/parts"
+import { Part, PartParent, PartTag, StatelessPart } from "tuff-core/parts"
 import TerrierPart from "./parts/terrier-part"
-import {Action, IconName, Packet} from "./theme"
+import { Action, IconName, Packet } from "./theme"
+import SortablePlugin from "tuff-sortable/sortable-plugin"
 
 const log = new Logger("Tabs")
 
@@ -31,7 +32,8 @@ export type TabSide = typeof Sides[number]
 
 export type TabContainerState = {
     side: TabSide
-    currentTab? : string
+    reorderable?: boolean
+    currentTab?: string
 }
 
 export class TabContainerPart extends TerrierPart<TabContainerState> {
@@ -39,8 +41,11 @@ export class TabContainerPart extends TerrierPart<TabContainerState> {
     private tabs = {} as Record<string, TabDefinition>
     changeTabKey = Messages.typedKey<{ tabKey: string }>()
     changeSideKey = Messages.typedKey<{ side: TabSide }>()
+    tabReorderedKey = Messages.typedKey<{ newOrder: string[] }>()
 
     async init() {
+        Object.assign(this.state, { reorderable: false }, this.state)
+
         this.onClick(this.changeTabKey, m => {
             log.info(`Clicked on tab ${m.data.tabKey}`)
             this.showTab(m.data.tabKey)
@@ -51,6 +56,23 @@ export class TabContainerPart extends TerrierPart<TabContainerState> {
             this.state.side = m.data.side
             this.dirty()
         })
+
+        if (this.state.reorderable) {
+            this.makePlugin(SortablePlugin, {
+                zoneClass: 'tt-tab-list',
+                targetClass: 'tab',
+                onSorted: (_, evt) => {
+                    this.renumberTabs(evt.toChildren)
+                }
+            })
+        }
+    }
+
+    renumberTabs(tabElementsMaybe?: HTMLElement[]) {
+        const tabElements = tabElementsMaybe ??
+            Array.from(this.element?.querySelectorAll('.tt-tab-list') ?? [])
+        const newOrder = tabElements.map(tabElement => tabElement.dataset.key)
+        this.emitMessage(this.tabReorderedKey, { newOrder })
     }
 
     /**
@@ -65,7 +87,10 @@ export class TabContainerPart extends TerrierPart<TabContainerState> {
         state: InferredPartStateType
     ): PartType {
         const existingTab = this.tabs[tab.key] ?? {}
-        this.tabs[tab.key] = Object.assign(existingTab, {state: 'enabled'}, tab)
+        this.tabs[tab.key] = Object.assign(existingTab, {
+            state: 'enabled',
+        }, tab)
+        this.renumberTabs()
         const part = this.makePart(constructor, state)
         existingTab.part = part
         this.dirty()
@@ -89,16 +114,14 @@ export class TabContainerPart extends TerrierPart<TabContainerState> {
      */
     removeTab(key: string) {
         const tab = this.tabs[key]
-        if (tab) {
-            log.info(`Removing tab ${key}`, tab)
-            delete this.tabs[key]
-            this.removeChild(tab.part)
-            this.state.currentTab = undefined
-            this.dirty()
-        }
-        else {
-            log.warn(`No tab ${key} to remove!`)
-        }
+        if (!tab) return log.warn(`No tab ${key} to remove!`)
+
+        log.info(`Removing tab ${key}`, tab)
+        delete this.tabs[key]
+        this.renumberTabs()
+        this.removeChild(tab.part)
+        this.state.currentTab = undefined
+        this.dirty()
     }
 
     /**
@@ -149,38 +172,32 @@ 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._beforeActions.length) {
-                    this.theme.renderActions(tabList, this._beforeActions, {defaultClass: 'action'})
+                    this.theme.renderActions(tabList, this._beforeActions, { defaultClass: 'action' })
                 }
                 for (const tab of Object.values(this.tabs)) {
                     if (tab.state == 'hidden') continue
 
                     tabList.a('.tab', a => {
+                        a.attrs({ draggable: this.state.reorderable })
+                        a.data({ key: tab.key })
                         a.class(tab.state || 'enabled')
-                        if (tab.key === currentTabKey) {
-                            a.class('active')
-                        }
-                        if (tab.icon) {
-                            this.theme.renderIcon(a, tab.icon)
-                        }
-                        a.span({text: tab.title})
-                        a.emitClick(this.changeTabKey, {tabKey: tab.key})
-                        if (tab.click) {
-                            a.emitClick(tab.click.key, tab.click.data || {})
-                        }
+                        if (tab.key === currentTabKey) a.class('active')
+                        if (tab.icon) this.theme.renderIcon(a, tab.icon)
+                        a.span({ text: tab.title })
+                        a.emitClick(this.changeTabKey, { tabKey: tab.key })
+                        if (tab.click) a.emitClick(tab.click.key, tab.click.data || {})
                     })
                 }
                 if (this._afterActions.length) {
                     tabList.div('.spacer')
-                    this.theme.renderActions(tabList, this._afterActions, {defaultClass: 'action'})
+                    this.theme.renderActions(tabList, this._afterActions, { defaultClass: 'action' })
                 }
             })
 
             if (currentTabKey) {
                 const currentTab = this.tabs[currentTabKey]
                 container.div('.tt-tab-content', panel => {
-                    if (currentTab.classes?.length) {
-                        panel.class(...currentTab.classes)
-                    }
+                    if (currentTab.classes?.length) panel.class(...currentTab.classes)
                     panel.part(currentTab.part as StatelessPart)
                 })
             }