datafolder 1.0.0

package/static/datafolderui/QyStyledElement.js

@@ -0,0 +1,30 @@
+import {
+    appendStyle
+} from "./QyUIUtils.js";
+
+class QyStyledElement extends HTMLElement {
+    constructor(e, t) {
+        super(), Array.isArray(e) && (t = e, e = void 0);
+        var n = this.attachShadow({
+            mode: "open"
+        });
+        if (t) for (var l of t) {
+            var r = document.createElement("link");
+            r.setAttribute("rel", "stylesheet"), r.setAttribute("href", l), n.appendChild(r);
+        }
+        e && appendStyle(n, e);
+    }
+}
+
+function defineStyledElement(e, t, n) {
+    customElements.define(e, class extends QyStyledElement {
+        constructor() {
+            super(t, n);
+        }
+    });
+}
+
+export {
+    QyStyledElement,
+    defineStyledElement
+};

package/static/datafolderui/QyUIFolderTree.js

@@ -0,0 +1,203 @@
+import {
+    w2layout
+} from "../w2ui/src/w2compat.js";
+
+import {
+    h
+} from "./hscrpt.js";
+
+import {
+    setHeight
+} from "./QyUIUtils.js";
+
+import "./folder-tree.js";
+
+import "./json-view.js";
+
+class QyUIFolderTree extends HTMLElement {
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        this.parentDiv = this.parentElement;
+        var e = new w2layout({
+            box: this.parentDiv,
+            name: "layout_" + this.parentDiv.id,
+            panels: [ {
+                type: "left",
+                size: 300,
+                resizable: !0
+            }, {
+                type: "main"
+            }, {
+                type: "bottom",
+                size: 10
+            } ]
+        }), t = (e.el("left").append(this._createToolbar(), this._createFolderTree()), 
+        e.el("main"));
+        t.append(this._createPathUL(), this._createJsonViewDiv()), e.el("bottom").append(this._createMsgSpan()), 
+        Object.assign(this, {
+            layout: e,
+            mainDiv: t,
+            selectedHierarchy: {},
+            fileContentMap: {},
+            namePath: []
+        }), e.on("resize:done", () => this.onSizeChange());
+    }
+    onSizeChange() {
+        var {
+            parentDiv: e,
+            folderTreeDiv: t,
+            jsonViewDiv: s,
+            mainDiv: i
+        } = this;
+        setHeight(e, document.body.clientHeight - e.offsetTop), setHeight(t, i.clientHeight - t.offsetTop - 1), 
+        setHeight(s, i.clientHeight - s.offsetTop - 1), this._updateContentDisplay();
+    }
+    showMsg(e) {
+        this.msgSpan.innerText = e;
+    }
+    _updateContentDisplay() {
+        var e = this.selectedElement;
+        e ? this._showSelected(e) : this._deleteJsonTree();
+    }
+    _deleteJsonTree() {
+        var e = this.jsonTree;
+        e && (jsonview.destroy(e), this.jsonTree = void 0);
+    }
+    _createMsgSpan() {
+        return this.msgSpan = h("span");
+    }
+    _createJsonViewDiv() {
+        return h("json-view", [ this.jsonViewDiv = h("div", {
+            style: {
+                overflow: "auto"
+            }
+        }) ]);
+    }
+    _createPathUL() {
+        return this.pathUL = h("ul", {
+            classList: "nav nav-tabs"
+        });
+    }
+    _createSearchIcon() {
+        return h("div", {
+            classList: "btn-group btn-group-sm",
+            role: "group"
+        }, [ h("button", {
+            classList: "btn btn-outline-success",
+            type: "submit"
+        }, [ h("i", {
+            classList: "bi bi-search"
+        }) ]) ]);
+    }
+    _createSearchInput() {
+        return h("div", {
+            classList: "input-group"
+        }, [ h("input", {
+            id: "searchInput_" + this.parentDiv.id,
+            type: "text",
+            classList: "form-control",
+            style: {
+                width: "150px"
+            }
+        }) ]);
+    }
+    _createToolbar() {
+        return this.toolbarDiv = h("div", {
+            classList: "btn-toolbar",
+            role: "toolbar",
+            style: "border-bottom: 1px solid #e4e4e4"
+        }, [ this._createSearchInput(), this._createSearchIcon() ]), this.toolbarDiv;
+    }
+    _createFolderTree() {
+        var e = h("folder-tree", [ this.folderTreeDiv = h("div", {
+            style: {
+                overflow: "auto"
+            }
+        }) ]);
+        return this.folderTree = new Tree(this.folderTreeDiv, {
+            navigate: !0
+        }), this.folderTree.on("select", e => {
+            this.clickSrc || (this.clickSrc = "folderTree", this._updateHierarchy(e)), 
+            this.selectedElement != e && (this.selectedElement = e, this._updateContentDisplay()), 
+            "folderTree" == this.clickSrc && (this.clickSrc = void 0);
+        }), e;
+    }
+    _showSelected(e) {
+        "file" == e.dataset.type ? this._showSelectedFile(e) : this._showSelectedDir(e);
+    }
+    _showSelectedFile(e) {
+        this._showJson(this.fileContentMap[e.dataset.fileContentKey]);
+    }
+    _showSelectedDir(e) {
+        "false" != e.parentElement.dataset.loaded ? this._showJson(e.dataset) : this._showJson({
+            loaded: !1
+        });
+    }
+    _showJson(e) {
+        this._deleteJsonTree();
+        e = jsonview.create(e);
+        jsonview.render(e, this.jsonViewDiv), jsonview.expand(e), this.jsonTree = e;
+    }
+    _updateHierarchy(e) {
+        var {
+            folderTree: t,
+            selectedHierarchy: s
+        } = this, t = t.hierarchy(e).reverse();
+        this.namePath = t.map(e => e.textContent), Object.assign(s, t), this._updatePathTabs();
+    }
+    _onPathTabsClick(t) {
+        var {
+            clickSrc: e,
+            rootFolder: s,
+            selectedHierarchy: i,
+            folderTree: r
+        } = this;
+        s.parentElement.open = !0;
+        for (let e = 0; e < t; ++e) i[e].parentElement.open = !0;
+        s = i[t];
+        "tab" == e && s.scrollIntoView({
+            block: "center"
+        }), r.select(s);
+    }
+    _createPathTab(e, t) {
+        t = h("span", {
+            classList: "nav-link",
+            "data-bs-toggle": "tab",
+            role: "tab",
+            style: "cursor:pointer",
+            onclick: () => {
+                this.clickSrc || (this.clickSrc = "tab"), this._onPathTabsClick(e), 
+                "tab" == this.clickSrc && (this.clickSrc = void 0);
+            }
+        }, [ t ]);
+        this.pathUL.append(h("li", {
+            classList: "nav-item"
+        }, [ t ]));
+    }
+    _updatePathTabs() {
+        var {
+            namePath: s,
+            pathUL: e
+        } = this, i = e.children, r = s.length;
+        let a = 0 < r;
+        for (let t = 0; t < r; ++t) {
+            if (t >= i.length) {
+                for (let e = t; e < r; ++e) this._createPathTab(e, s[e]);
+                break;
+            }
+            var o = i[t].children[0], n = s[t];
+            o.innerText != n && (o.innerText = n, a = !1);
+        }
+        if (!a) for (;r < i.length; ) e.removeChild(e.lastElementChild);
+        0 < r && i[r - 1].children[0].click();
+    }
+    _resetPathTabs() {
+        this.pathUL.replaceChildren();
+    }
+}
+
+export {
+    QyUIFolderTree
+};

package/static/datafolderui/QyUIUtils.js

@@ -0,0 +1,42 @@
+async function rpc(e, n, o) {
+    var t = `/rpc/${e}?args=` + encodeURIComponent(JSON.stringify(n));
+    let i;
+    if (o) {
+        let t;
+        "object" == typeof o ? (t = "application/json", o = JSON.stringify(o)) : t = "text/plain", 
+        i = {
+            method: "POST",
+            headers: {
+                "Content-Type": t
+            },
+            body: o
+        };
+    }
+    try {
+        var a = await fetch(t, i);
+        if (a.ok) return await a.json();
+        console.error("Response status: " + a.status);
+    } catch (t) {
+        console.error(`Calling ${e} with ${n} failed:`, t);
+    }
+}
+
+function setHeight(t, e) {
+    t.style.height = e + "px";
+}
+
+function setWidth(t, e) {
+    t.style.width = e + "px";
+}
+
+function appendStyle(t, e) {
+    var n = document.createElement("style");
+    n.textContent = e, t.appendChild(n);
+}
+
+export {
+    rpc,
+    setHeight,
+    setWidth,
+    appendStyle
+};

package/static/datafolderui/display-tree.js

@@ -0,0 +1,108 @@
+import {
+    h
+} from "./hscrpt.js";
+
+import {
+    rpc
+} from "./QyUIUtils.js";
+
+import {
+    QyUIFolderTree
+} from "./QyUIFolderTree.js";
+
+customElements.define("display-tree", class extends QyUIFolderTree {
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        super.connectedCallback(), this._appendToolbar();
+        var e = this.folderTree;
+        this.rootFolder = e.folder({
+            name: "/",
+            open: !0
+        }), e.select(this.rootFolder);
+    }
+    showTree(e, t) {
+        this._resetTree(), this._resetPathTabs(), this.countSpan.innerText = t, 
+        this.msgSpan.innerText = "Total " + t, this.rootFolder = this.folderTree.folder({
+            name: "/",
+            open: !0
+        }), this._constructFolderTree(this.rootFolder, e), this.folderTree.select(this.rootFolder), 
+        this.tree = e;
+    }
+    _appendToolbar() {
+        this.toolbarDiv.append(this._createCountSpan());
+    }
+    _createCountSpan() {
+        return this.countSpan = h("span", {
+            classList: "btn btn-success ms-auto"
+        }, [ "0" ]);
+    }
+    _resetTree() {
+        this._deleteJsonTree();
+        var {
+            rootFolder: e,
+            countSpan: t,
+            msgSpan: r
+        } = this;
+        t.innerText = "0", r.innerText = "", e && (e.parentElement.remove(), Object.assign(this, {
+            rootFolder: void 0,
+            fileContentMap: {}
+        }));
+    }
+    async _queryFiles() {
+        let {
+            countSpan,
+            queryEditor
+        } = this, {
+            queryText
+        } = queryEditor;
+        try {
+            eval("((x)=>x)(" + queryText + ")");
+        } catch (exception) {
+            return void (countSpan.innerText = exception.message);
+        }
+        let {
+            queryId
+        } = this, {
+            tree,
+            count
+        } = (++this.queryId, await rpc("queryFiles", queryText));
+        queryId + 1 == this.queryId && this.showTree(tree, count);
+    }
+    _constructFolderTree(e, t) {
+        var {
+            folderTree: r,
+            fileContentMap: o
+        } = this, s = e.dataset, {
+            fullPathHash: t,
+            subdirMap: n,
+            fileMap: i
+        } = t;
+        if (t && (s.fullPathHash = t), n) {
+            var a, t = Object.keys(n).sort();
+            for (a of t) {
+                var l = r.folder({
+                    name: a
+                }, e);
+                this._constructFolderTree(l, n[a]);
+            }
+            t = t.length;
+            0 < t && (s.subdirCount = t);
+        }
+        if (i) {
+            var c, t = Object.keys(i).sort();
+            for (c of t) {
+                var {
+                    fileContent: d,
+                    fileContentKey: h
+                } = i[c];
+                o[r.file({
+                    name: c
+                }, e).dataset.fileContentKey = h] = d;
+            }
+            t = t.length;
+            0 < t && (s.fileCount = t);
+        }
+    }
+});

package/static/datafolderui/explore-tree.js

@@ -0,0 +1,122 @@
+import {
+    rpc
+} from "./QyUIUtils.js";
+
+import {
+    QyUIFolderTree
+} from "./QyUIFolderTree.js";
+
+import {
+    h
+} from "./hscrpt.js";
+
+let config = {
+    showHiddenFolder: !1
+};
+
+customElements.define("explore-tree", class extends QyUIFolderTree {
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        var e = config.showHiddenFolder, t = (this._appendToolbar(e), this.checkTooltip = new bootstrap.Tooltip(this.checkLabel), 
+        this).folderTree, o = (t.on("fetch", async e => {
+            await this._loadSubItems(e), e.resolve(), e == this.selectedElement && this._showSelectedDir(e);
+        }), t.asyncFolder({
+            name: "/",
+            open: !0
+        }));
+        Object.assign(this, {
+            showHiddenFolder: e,
+            rootFolder: o
+        }), t.select(o);
+    }
+    _appendToolbar(e) {
+        this.toolbarDiv.append(this._createShowHiddenCheck(e));
+    }
+    _createShowHiddenCheck(e) {
+        return h("div", {
+            classList: "btn-group btn-group-sm ms-1",
+            role: "group"
+        }, [ h("input", {
+            type: "checkbox",
+            classList: "btn-check",
+            id: "showHiddenFolderCheck",
+            checked: e,
+            onchange: () => this._toggleShowHiddenFolder()
+        }), this.checkLabel = h("label", {
+            classList: "btn btn-outline-primary",
+            "data-bs-toggle": "tooltip",
+            "data-bs-placement": "top",
+            "data-bs-title": "Show hidden folder",
+            attrs: {
+                for: "showHiddenFolderCheck"
+            }
+        }, [ h("i", {
+            classList: "bi bi-window-plus"
+        }) ]) ]);
+    }
+    _toggleShowHiddenFolder() {
+        var {
+            showHiddenFolder: e,
+            rootHiddenFolder: t,
+            checkTooltip: o
+        } = this;
+        this.showHiddenFolder = !e, t && (t.parentElement.hidden = e), o.setContent({
+            ".tooltip-inner": (e ? "Show" : "Hide") + " hidden folder"
+        });
+    }
+    async _showSelectedFile(e) {
+        var t, o = e.dataset, {
+            namePath: n,
+            fileContentMap: i
+        } = this;
+        let l;
+        l = o.fileContentKey ? i[o.fileContentKey] : ({
+            fileContent: n,
+            fileContentKey: t
+        } = await this._getFileContent(n), i[o.fileContentKey = t] = n), e == this.selectedElement && this._showJson(l);
+    }
+    async _loadSubItems(t) {
+        var o = t.dataset, {
+            namePath: n,
+            folderTree: i,
+            rootFolder: l,
+            showHiddenFolder: s
+        } = this, n = await this._getSubItems(n);
+        if (n) {
+            var {
+                fullPathHash: n,
+                subdirList: d,
+                fileList: r
+            } = n;
+            n && (o.fullPathHash = n);
+            let e;
+            if (0 < d.length) {
+                for (var a of d) t == l && "%" == a ? e = !0 : i.asyncFolder({
+                    name: a
+                }, t);
+                o.subdirCount = d.length;
+            }
+            if (e && ((n = i.asyncFolder({
+                name: "%"
+            }, t)).parentElement.hidden = !s, this.rootHiddenFolder = n), 0 < r.length) {
+                for (var h of r) i.file({
+                    name: h
+                }, t);
+                o.fileCount = r.length;
+            }
+        }
+    }
+    _getSubItems(e) {
+        return rpc("getSubItems", {
+            dirPath: e
+        });
+    }
+    _getFileContent(e) {
+        return rpc("getFileContent", {
+            filePath: e
+        });
+    }
+});

package/static/datafolderui/folder-tree.js

@@ -0,0 +1,5 @@
+import {
+    defineStyledElement
+} from "./QyStyledElement.js";
+
+defineStyledElement("folder-tree", [ "../tree.js/tree.css" ]);

package/static/datafolderui/hscrpt.js

@@ -0,0 +1,25 @@
+function h(t, e, r) {
+    Array.isArray(e) && (r = e, e = {});
+    var s, i = document.createElement(t);
+    for (s in e) {
+        var o = e[s];
+        if ("style" === s) i.style = toStyleStr(o); else if ("classList" === s) i.classList = toClassList(o); else if (s.startsWith("data-") || s.startsWith("aria-")) i.setAttribute(s, o); else if ("attrs" === s) for (var n in o) i.setAttribute(n, o[n]); else if ("on" === s) for (var a in o) i.addEventListener(a, o[a]); else i[s] = o;
+    }
+    if ("function" == typeof i.compose && i.compose(), r) {
+        var f, l = i.shadowRoot || i;
+        for (f of r.filter(t => null != t)) l.appendChild("string" == typeof f ? document.createTextNode(f) : f);
+    }
+    return i;
+}
+
+function toStyleStr(t) {
+    return "string" == typeof t ? t : Object.entries(t).map(([ t, e ]) => t + ":" + e).join(";");
+}
+
+function toClassList(t) {
+    return "string" == typeof t ? t : t.join(" ");
+}
+
+export {
+    h
+};

package/static/datafolderui/index.css

@@ -0,0 +1,6 @@
+* {
+    font-size: 14px;
+}
+body {
+    height: 100vh;
+}

package/static/datafolderui/index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+    <head>
+        <title>datafolder UI</title>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <!-- <link rel="stylesheet" href="../bulma/css/bulma.min.css" /> -->
+        <link rel="stylesheet" href="../w2ui/dist/w2ui.min.css" id="mainCSS" />
+        <link rel="stylesheet" href="../bootstrap-5.3.8-dist/css/bootstrap.min.css" />
+        <link rel="stylesheet" href="../icons-1.13.1/font/bootstrap-icons.min.css" />
+        <link rel="stylesheet" href="index.css" />
+    </head>
+    <body>
+        <script src="./querySelectorShadowRoot.js"></script>
+        <script src="../tree.js/tree.js"></script>
+        <script src="../json-view/dist/jsonview.js"></script>
+        <script src="../bootstrap-5.3.8-dist/js/bootstrap.bundle.js"></script>
+        <script type="module" src="main-page.js"></script>
+    </body>
+</html>

package/static/datafolderui/json-view.js

@@ -0,0 +1,74 @@
+import {
+    defineStyledElement
+} from "./QyStyledElement.js";
+
+let cssText = `
+.json-container {
+  font-family: "Open Sans";
+  font-size: 14px;
+  background-color: #fff;
+  color: gray;
+  box-sizing: border-box;
+}
+.json-container .line {
+  margin: 4px 0;
+  display: flex;
+  justify-content: flex-start;
+}
+.json-container .caret-icon {
+  width: 18px;
+  text-align: center;
+  cursor: pointer;
+}
+.json-container .empty-icon {
+  width: 18px;
+}
+.json-container .json-type {
+  margin-right: 4px;
+  margin-left: 4px;
+}
+.json-container .json-key {
+  color: #444;
+  margin-right: 4px;
+  margin-left: 4px;
+}
+.json-container .json-index {
+  margin-right: 4px;
+  margin-left: 4px;
+}
+.json-container .json-value {
+  margin-left: 8px;
+}
+.json-container .json-number {
+  color: #f9ae58;
+}
+.json-container .json-boolean {
+  color: #ec5f66;
+}
+.json-container .json-string {
+  color: #86b25c;
+}
+.json-container .json-size {
+  margin-right: 4px;
+  margin-left: 4px;
+}
+.json-container .hidden {
+  display: none;
+}
+.json-container .fas {
+  display: inline-block;
+  border-style: solid;
+  width: 0;
+  height: 0;
+}
+.json-container .fa-caret-down {
+  border-width: 6px 5px 0 5px;
+  border-color: gray rgba(0, 0, 0, 0);
+}
+.json-container .fa-caret-right {
+  border-width: 5px 0 5px 6px;
+  border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) gray;
+}
+`;
+
+defineStyledElement("json-view", cssText);