datafolder 1.0.0

package/static/datafolderui/kv-input.js

@@ -0,0 +1,66 @@
+import {
+    h
+} from "./hscrpt.js";
+
+let inputEvent = new Event("input");
+
+customElements.define("kv-input", class extends HTMLElement {
+    constructor() {
+        super();
+    }
+    compose() {
+        this.classList.add("row", "align-items-center", "p-1"), this.appendChild(this.labelDiv = h("span", {
+            classList: "col-form-label col-auto"
+        }, [ this.label + ": " ])), Object.assign(this, {
+            kvElementList: []
+        });
+    }
+    get text() {
+        return `{ ${this.kvElementList.map(({
+            keyElement: t,
+            valueElement: e
+        }) => ({
+            kText: t.text.trim(),
+            vText: e.text.trim()
+        })).filter(({
+            kText: t,
+            vText: e
+        }) => t && e).map(({
+            kText: t,
+            vText: e
+        }) => t + ": " + e).join(", ")} }`;
+    }
+    set(t) {
+        var e, s, {
+            labelDiv: n,
+            kvElementList: i
+        } = this;
+        0 < i.length && (this.replaceChildren(n), i.length = 0);
+        for ([ e, s ] of Object.entries(t)) this._createKVElement(e, s.toString());
+        return this._createKVElement(), this;
+    }
+    _createKVElement(t = "", e = "") {
+        let s = this.kvElementList, n = s.length;
+        var i = () => {
+            n == s.length - 1 && this._createKVElement(), this.dispatchEvent(inputEvent);
+        };
+        this.append(h("div", {
+            style: "display:contents"
+        }, [ t = h("resizable-input", {
+            attrs: {
+                value: t
+            },
+            oninput: i
+        }), ":" ]), h("div", {
+            style: "display:contents"
+        }, [ e = h("resizable-input", {
+            attrs: {
+                value: e
+            },
+            oninput: i
+        }) ])), s.push({
+            keyElement: t,
+            valueElement: e
+        });
+    }
+});

package/static/datafolderui/list-input.js

@@ -0,0 +1,52 @@
+import {
+    h
+} from "./hscrpt.js";
+
+import "./resizable-input.js";
+
+let inputEvent = new Event("input");
+
+customElements.define("list-input", class extends HTMLElement {
+    constructor() {
+        super();
+    }
+    compose() {
+        this.classList.add("row", "align-items-center", "p-1"), this.appendChild(this.labelDiv = h("span", {
+            classList: "col-form-label col-auto"
+        }, [ this.label + ": " ])), Object.assign(this, {
+            elementList: []
+        });
+    }
+    get text() {
+        return `[ ${this.elementList.map(t => t.text.trim()).filter(t => t).join(", ")} ]`;
+    }
+    set(t) {
+        var e, {
+            labelDiv: n,
+            elementList: s
+        } = this;
+        0 < s.length && (this.replaceChildren(n), s.length = 0);
+        for (e of t) this._createInputElement(e.toString());
+        n = t.length;
+        return (0 == n || '"**"' != t[n - 1] && "'**'" != t[n - 1]) && this._createInputElement(), 
+        this;
+    }
+    _createInputElement(t = "") {
+        let e = this.elementList, n = e.length, s;
+        this.append(h("div", {
+            style: "display:contents"
+        }, [ s = h("resizable-input", {
+            attrs: {
+                value: t
+            },
+            oninput: () => {
+                var t = s.text;
+                if ("'**'" == t || '"**"' == t) {
+                    for (let t = n + 1; t < e.length; ++t) this.removeChild(e[t].parentElement);
+                    e.length = n + 1;
+                } else n == e.length - 1 && this._createInputElement();
+                this.dispatchEvent(inputEvent);
+            }
+        }) ])), e.push(s);
+    }
+});

package/static/datafolderui/main-page.js

@@ -0,0 +1,98 @@
+import {
+    h
+} from "./hscrpt.js";
+
+import "./explore-tree.js";
+
+import "./query-editor.js";
+
+let config = {
+    brandName: "datafolder UI",
+    tabNames: [ "Explore", "Query", "RPC", "Triggers" ]
+};
+
+customElements.define("main-page", class extends HTMLElement {
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        var {
+            brandName: e,
+            tabNames: t
+        } = config;
+        this.append(this._createNav(e, t), this._createTabDivs(t));
+        let {
+            tabButtons: [ a, r ],
+            tabDivs: [ n, s ]
+        } = this;
+        bootstrap.Tab.getOrCreateInstance(a).show();
+        e = h("explore-tree");
+        n.appendChild(e);
+        let i = h("query-editor");
+        s.appendChild(i), Object.assign(this, {
+            exploreTree: e,
+            queryEditor: i
+        }), i.addEventListener("run", () => r.click());
+        t = () => this.onSizeChange();
+        document.addEventListener("DOMContentLoaded", t), window.addEventListener("resize", t), 
+        r.addEventListener("shown.bs.tab", () => {
+            i.onSizeChange();
+        });
+    }
+    onSizeChange() {
+        var {
+            exploreTree: e,
+            queryEditor: t
+        } = this;
+        e.onSizeChange(), t.onSizeChange();
+    }
+    _createNav(e, t) {
+        return h("nav", {
+            classList: "navbar bg-body-tertiary"
+        }, [ this._createNavBar(e, t) ]);
+    }
+    _createNavBar(e, t) {
+        return h("div", {
+            classList: "container-fluid"
+        }, [ this._createBrand(e), this._createTabButtons(t) ]);
+    }
+    _createTabButtons(e) {
+        return h("ul", {
+            classList: "nav nav-pills me-auto mb-2 mb-lg-0"
+        }, this.tabButtons = e.map(e => this._createTabButton(e)));
+    }
+    _createTabDivs(e) {
+        return h("div", {
+            classList: "tab-content",
+            id: "pills-tabContent"
+        }, this.tabDivs = e.map(e => this._createTabDiv(e)));
+    }
+    _createBrand(e) {
+        return h("a", {
+            classList: "navbar-brand"
+        }, [ e ]);
+    }
+    _createTabDiv(e) {
+        return h("div", {
+            classList: "tab-pane",
+            id: "pills-" + e,
+            role: "tabpanel"
+        });
+    }
+    _createTabButton(e) {
+        return h("button", {
+            classList: "nav-link",
+            id: `pills-${e}-tab`,
+            "data-bs-toggle": "pill",
+            "data-bs-target": "#pills-" + e,
+            type: "button",
+            role: "tab"
+        }, [ e ]);
+    }
+}), document.body.append(h("main-page"));
+
+import {
+    rpc
+} from "./QyUIUtils.js";
+
+window.rpc = rpc;

package/static/datafolderui/num-input.js

@@ -0,0 +1,27 @@
+import {
+    h
+} from "./hscrpt.js";
+
+import "./resizable-input.js";
+
+let eventInput = new Event("input");
+
+customElements.define("num-input", class extends HTMLElement {
+    constructor() {
+        super();
+    }
+    compose() {
+        this.style.display = "contents", this.append(h("span", {
+            classList: "col-form-label col-auto p-2"
+        }, [ this.label + ": " ]), this.resizableInput = h("resizable-input", {
+            oninput: () => this.dispatchEvent(eventInput)
+        }));
+    }
+    get text() {
+        var {
+            label: t,
+            resizableInput: e
+        } = this, e = e.text.trim();
+        return e && "0" != e ? `,${t}:` + e : "";
+    }
+});

package/static/datafolderui/query-editor.js

@@ -0,0 +1,229 @@
+import {
+    w2popup
+} from "../w2ui/src/w2compat.js";
+
+import {
+    h
+} from "./hscrpt.js";
+
+import {
+    rpc
+} from "./QyUIUtils.js";
+
+import {} from "./list-input.js";
+
+import {} from "./kv-input.js";
+
+import {
+    setWidth
+} from "./QyUIUtils.js";
+
+import {} from "./display-tree.js";
+
+import {} from "./num-input.js";
+
+let historyQueryList = [ {
+    folder: [ '"flights"', '"*"', 1, "(x) => x >= 5 && x <= 7" ],
+    value: {
+        $or: '[{ _from: "airports/BIS" }, { _to: "airports/BIS" }]'
+    },
+    view: [ '"**"' ]
+}, {
+    folder: [ '"flights"', '"*"', 1, "(x) => x >= 1 && x <= 7" ],
+    value: {
+        $or: '[{ _from: "airports/BIS" }, { _to: "airports/BIS" }]'
+    },
+    view: [ '"Distance"' ]
+}, {
+    folder: [ '"airbnb"', '"Loft"', '"Entire home/apt"', '"Real Bed"' ],
+    value: {
+        address: '{ street: "Porto, Porto, Portugal" }'
+    },
+    view: [ '"name"' ],
+    limit: 9,
+    cursor: 9
+} ], eventRun = new Event("run");
+
+customElements.define("query-editor", class extends HTMLElement {
+    constructor() {
+        super();
+    }
+    compose() {
+        this.append(h("div", {
+            classList: "btn-toolbar",
+            role: "toolbar",
+            style: {
+                "border-bottom": "1px solid #e4e4e4"
+            }
+        }, [ this._createDropDownButton(), this._createQueryInput(), this._createEditButton(), this._createRunButton(), this._createSaveButton() ]), this._createDisplayTree()), 
+        this._createBody(), Object.assign(this, {
+            queryId: 0
+        });
+    }
+    onSizeChange() {
+        setWidth(this.queryInput, this.editButton.parentElement.offsetLeft - this.queryInput.parentElement.offsetLeft), 
+        this.displayTree.onSizeChange();
+    }
+    get queryText() {
+        var {
+            folderList: t,
+            matchKVList: e,
+            viewList: r,
+            limitInput: s,
+            cursorInput: i
+        } = this;
+        return `{folder:${t.text},value:${e.text},view:${r.text} ${s.text} ${i.text}}`;
+    }
+    _createDisplayTree() {
+        return h("div", [ this.displayTree = h("display-tree") ]);
+    }
+    _createSaveButton() {
+        return h("div", {
+            classList: "btn-group btn-group-sm me-2",
+            role: "group"
+        }, [ h("button", {
+            classList: "btn btn-primary",
+            type: "button",
+            onclick: () => {
+                console.log("Save");
+            }
+        }, [ "Save" ]) ]);
+    }
+    _createEditButton() {
+        return h("div", {
+            classList: "btn-group btn-group-sm me-2",
+            role: "group"
+        }, [ this.editButton = h("button", {
+            classList: "btn btn-primary",
+            type: "button",
+            onclick: () => this._toggleEditor()
+        }, [ "Edit" ]) ]);
+    }
+    _createRunButton() {
+        return h("div", {
+            classList: "btn-group btn-group-sm me-2",
+            role: "group"
+        }, [ h("button", {
+            classList: "btn btn-primary",
+            type: "button",
+            onclick: () => this._queryFiles()
+        }, [ "Run" ]) ]);
+    }
+    _createQueryInput() {
+        return h("div", {
+            classList: "input-group me-auto"
+        }, [ this.queryInput = h("input", {
+            id: "queryInput",
+            type: "text",
+            classList: "form-control",
+            attrs: {
+                readonly: !0
+            }
+        }) ]);
+    }
+    _createDropDownButton() {
+        return h("div", {
+            classList: "btn-group btn-grou-sm"
+        }, [ h("button", {
+            classList: "btn btn-success dropdown-toggle",
+            type: "button",
+            "data-bs-toggle": "dropdown"
+        }, [ h("i", {
+            classList: "bi bi-clock"
+        }) ]), h("ul", {
+            classList: "dropdown-menu"
+        }, this._createHistoryDropDownList()) ]);
+    }
+    _createHistoryDropDownList() {
+        return historyQueryList.map(t => h("li", [ h("span", {
+            classList: "dropdown-item",
+            style: "cursor:pointer;",
+            onclick: () => this._setQueryFromHistory(t)
+        }, [ JSON.stringify(t) ]) ]));
+    }
+    async _queryFiles() {
+        let {
+            queryText,
+            queryId,
+            displayTree
+        } = this;
+        try {
+            eval("((x)=>x)(" + queryText + ")");
+        } catch (exception) {
+            return void displayTree.showMsg(exception.message);
+        }
+        ++this.queryId;
+        let {
+            tree,
+            count
+        } = await rpc("queryFiles", queryText);
+        queryId + 1 == this.queryId && displayTree.showTree(tree, count);
+    }
+    _toggleEditor() {
+        "closed" == w2popup.status ? w2popup.open({
+            title: "Edit Query",
+            body: this._getPopupBody(),
+            blockPage: !1,
+            resizable: !0,
+            width: 700,
+            height: 290,
+            actions: {
+                Run: () => {
+                    this.dispatchEvent(eventRun), this._queryFiles();
+                },
+                Save: () => {}
+            }
+        }) : w2popup.close();
+    }
+    _createBody() {
+        var {
+            folder: t,
+            value: e,
+            view: r
+        } = historyQueryList[0], s = this.body = h("div", {
+            classList: "container-fluid"
+        }), i = {
+            input: () => this._updateQueryText()
+        }, t = h("list-input", {
+            label: "folder",
+            on: i
+        }).set(t), e = h("kv-input", {
+            label: "value",
+            on: i
+        }).set(e), r = h("list-input", {
+            label: "view",
+            on: i
+        }).set(r), i = h("div", {
+            classList: "row align-items-center p-1"
+        }, [ this.limitInput = h("num-input", {
+            label: "limit",
+            on: i
+        }), this.cursorInput = h("num-input", {
+            label: "cursor",
+            on: i
+        }) ]);
+        return s.append(t, e, r, i), Object.assign(this, {
+            folderList: t,
+            matchKVList: e,
+            viewList: r
+        }), this._updateQueryText(), s;
+    }
+    _getPopupBody() {
+        return this.body || this._createBody();
+    }
+    _updateQueryText() {
+        this.queryInput.value = this.queryText;
+    }
+    _setQueryFromHistory(t) {
+        var {
+            folderList: e,
+            matchKVList: r,
+            viewList: s
+        } = this, {
+            folder: t,
+            value: i,
+            view: o
+        } = t;
+        e.set(t), r.set(i), s.set(o), this._updateQueryText();
+    }
+});

package/static/datafolderui/querySelectorShadowRoot.js

@@ -0,0 +1,24 @@
+function* getShadowRootChild(e) {
+    for (var o of e.children) {
+        var t = o.shadowRoot;
+        t ? yield t : yield* getShadowRootChild(o);
+    }
+}
+
+function querySelectorShadowRoot(e, o) {
+    let t = e.querySelector(o);
+    if (t) return t;
+    var l = getShadowRootChild(e);
+    for (let e = l.next().value; e; e = l.next().value) if (t = e.querySelector(o)) return t;
+}
+
+function querySelectorAllShadowRoot(e, o) {
+    var t = [ ...e.querySelectorAll(o) ], l = getShadowRootChild(e);
+    for (let e = l.next().value; e; e = l.next().value) t.push(...e.querySelectorAll(o));
+    return t;
+}
+
+Object.assign(globalThis, {
+    querySelectorShadowRoot: querySelectorShadowRoot,
+    querySelectorAllShadowRoot: querySelectorAllShadowRoot
+});

package/static/datafolderui/resizable-input.js

@@ -0,0 +1,67 @@
+import {
+    h
+} from "./hscrpt.js";
+
+import {
+    appendStyle
+} from "./QyUIUtils.js";
+
+customElements.define("resizable-input", class extends HTMLElement {
+    constructor() {
+        super();
+    }
+    compose() {
+        var t = this.getAttribute("value") || "";
+        let i, e;
+        this.append(h("div", {
+            classList: "input-container p-1"
+        }, [ i = h("span", {
+            classList: "size-span",
+            onclick: () => this._showInput()
+        }, [ t + " " ]), e = h("input", {
+            value: t,
+            id: "resizable-input" + ++id,
+            classList: "form-control",
+            style: "visibility:" + (t ? "hidden" : "visible"),
+            size: 1,
+            oninput: () => {
+                i.textContent = e.value + " ", this.dispatchEvent(eventInput);
+            },
+            onblur: () => {
+                "" != e.value && this._showSpan();
+            }
+        }) ])), Object.assign(this, {
+            sizeSpan: i,
+            input: e
+        });
+    }
+    get text() {
+        return this.input.value;
+    }
+    _showSpan() {
+        this.sizeSpan.style.visibility = "visible", this.input.style.visibility = "hidden";
+    }
+    _showInput() {
+        this.input.style.visibility = "visible", this.sizeSpan.style.visibility = "hidden", 
+        this.input.focus();
+    }
+});
+
+let id = 0, eventInput = new Event("input"), cssText = `
+.input-container {
+    display: inline-grid;
+}
+.input-container > * {
+    /* Position input and span in the same grid cell */
+    grid-area: 1 / 1 / 2 / 2;
+    padding: 4px; /* Ensure padding matches on both */
+    font: inherit; /* Ensure font matches on both */
+}
+.size-span {
+    white-space: pre; /* Essential for accurate measurement */
+}
+input {
+    /*width: 100%; /* Input takes the width of its parent container (which the span sizes) */*/
+}`;
+
+appendStyle(document.head, cssText);