ENH: add web-based metadata entry with HTML/JS and QWebEngineView

datalad_gooey/app.py

@@ -515,6 +515,11 @@ def eventFilter(self, watched, event):
 
 
 def main():
+    # must set this flag to make Qt WebEngine initialize properly
+    from PySide6 import QtCore, QtQuick
+    QtCore.QCoreApplication.setAttribute(QtCore.Qt.AA_ShareOpenGLContexts)
+    QtQuick.QQuickWindow.setGraphicsApi(QtQuick.QSGRendererInterface.OpenGL)
+
     qtapp = QApplication(sys.argv)
     gooey = GooeyApp()
     gooey.main_window.show()

datalad_gooey/custom_metadata.py

@@ -0,0 +1,107 @@
+from pathlib import Path
+from .resource_provider import gooey_resources
+from PySide6.QtCore import (
+    Qt,
+    QUrl,
+    Slot,
+)
+from PySide6.QtWebEngineWidgets import (
+    QWebEngineView,
+)
+from PySide6.QtWidgets import (
+    QComboBox,
+    QFileDialog,
+    QHBoxLayout,
+    QLabel,
+    QSizePolicy,
+    QVBoxLayout,
+)
+
+from .metadata_editor_base import MetadataEditor
+
+
+class CustomMetadataWebEditor(MetadataEditor):
+
+    # used as the widget title
+    _widget_title = 'Custom metadata entry'
+
+    def __init__(self, parent):
+        super().__init__(parent)
+        # Setup layout
+        layout = QVBoxLayout()
+        layout.setContentsMargins(0, 0, 0, 0)
+        self.setLayout(layout)
+        # Create combobox for selecting metadata entry form
+        row = QHBoxLayout()
+        row.addWidget(QLabel('Select a form'))
+        cb = QComboBox()
+        cb.currentIndexChanged.connect(self._load_form)
+        sizePolicy = QSizePolicy(QSizePolicy.Preferred, QSizePolicy.Preferred)
+        sizePolicy.setHorizontalPolicy(QSizePolicy.MinimumExpanding)
+        cb.setSizePolicy(sizePolicy)
+        self._cb = cb
+        # Available forms
+        metadata_resource_path = gooey_resources.get_resource_path('metadata')
+        form_data = [
+            {
+                "name": "Basic (offline/local)",
+                "qurl": QUrl.fromLocalFile(str(metadata_resource_path / 'local' / 'sample_entry.html'))
+            },
+            {
+                "name": "Basic (online/remote)",
+                "qurl": QUrl("https://datalad.github.io/datalad-catalog/metadata-entry.html")
+            },
+            {
+                "name": "Citation.CFF",
+                "qurl": QUrl("https://citation-file-format.github.io/cff-initializer-javascript/#/start")
+            }
+        ]
+        for form in form_data:
+            self._add_list_item(form)
+        # Add list widget to layout
+        layout.addLayout(row)
+        row.addWidget(self._cb)
+        # Initialize browser widget to render HTML/JS and handle downloads
+        browser = QWebEngineView(parent)
+        browser.page().profile().downloadRequested.connect(
+            self._download_requested
+        )
+        # Scale browser window
+        sizePolicy = QSizePolicy(QSizePolicy.Preferred, QSizePolicy.Preferred)
+        sizePolicy.setVerticalPolicy(QSizePolicy.MinimumExpanding)
+        browser.setSizePolicy(sizePolicy)
+        layout.addWidget(browser)
+        self._browser = browser
+        # Set current form to display in browser
+        self._cb.setCurrentIndex(1)
+
+
+    def set_path(self, path: Path):
+        self.__path = path
+        pass
+
+
+    def _add_list_item(self, data):
+        """"""
+        self._cb.addItem(data["name"], data["qurl"])
+
+
+    @Slot()
+    def _load_form(self, index):
+        """"""
+        qurl = self._cb.currentData(Qt.UserRole)
+        self._browser.setUrl(qurl)
+
+
+    @Slot()
+    def _download_requested(self, download):
+        path_str, _ = QFileDialog.getSaveFileName(
+            self, "Save File", str(self.__path / "dataset_metadata")
+        )
+        if path_str:
+            path = Path(path_str)
+            download.setDownloadDirectory(str(path.parent))
+            download.setDownloadFileName(str(path.name))
+            download.accept()
+        else:
+            download.cancel()

datalad_gooey/fsbrowser.py

@@ -493,6 +493,14 @@ def _custom_context_menu(self, onpoint):
             setbase.triggered.connect(self._app._set_root_path)
             context.addAction(setbase)
 
+        # TODO: generalize dataset metadata entry
+        if path_type == 'dataset':
+            from .custom_metadata import CustomMetadataWebEditor
+            meta = QAction('&Metadata...', context)
+            meta.setData((ipath, CustomMetadataWebEditor))
+            meta.triggered.connect(self._app._edit_metadata)
+            context.addAction(meta)
+
         if path_type == 'annexed-file':
             from .annex_metadata import AnnexMetadataEditor
             meta = QAction('&Metadata...', context)

datalad_gooey/gooey.py

@@ -77,6 +77,10 @@ def __call__(path: str = None, postinstall: bool = False):
             perform_post_install_tasks()
             return
 
+        # must set this flag to make Qt WebEngine initialize properly
+        from PySide6 import QtCore, QtQuick
+        QtCore.QCoreApplication.setAttribute(QtCore.Qt.AA_ShareOpenGLContexts)
+        QtQuick.QQuickWindow.setGraphicsApi(QtQuick.QSGRendererInterface.OpenGL)
         qtapp = QApplication(sys.argv)
         gooey = GooeyApp(path)
         gooey.main_window.show()

datalad_gooey/resources/metadata/local/assets/meta_entry.js

@@ -0,0 +1,78 @@
+/********/
+// Data //
+/********/
+const default_config = {
+  link_color: "#fba304",
+  link_hover_color: "#af7714",
+};
+
+/**************/
+// Components //
+/**************/
+
+/***********/
+// Vue app //
+/***********/
+
+// Start Vue instance
+var demo = new Vue({
+  el: "#meta-entry",
+  data: {
+    metaTabIndex: {},
+    dataset_name: "",
+    dataset_description: "",
+    form: {
+      name: '',
+      description: '',
+      url: '',
+      doi: '',
+      dataset_id: '',
+      dataset_version: '',
+      keywords: [],
+    },
+    show: true
+  },
+  methods: {
+    onSubmit(event) {
+      event.preventDefault()
+      downloadObjectAsJson(this.form, 'dataset_metadata.json')
+    },
+    onReset(event) {
+      event.preventDefault()
+      // Reset our form values
+      this.form.name = '',
+      this.form.description = '',
+      this.form.url = '',
+      this.form.doi = '',
+      // Trick to reset/clear native browser form validation state
+      this.show = false
+      this.$nextTick(() => {
+        this.show = true
+      })
+    }
+  },
+  beforeCreate() {
+    // Set color scheme
+    const style_text =
+    ":root{--link-color: " +
+    default_config.link_color +
+    "; --link-hover-color: " +
+    default_config.link_hover_color +
+    ";}";
+    const style_section = document.createElement("style");
+    const node = document.createTextNode(style_text);
+    style_section.appendChild(node);
+    const body_element = document.getElementById("mainmetabody");
+    body_element.insertBefore(style_section, body_element.firstChild);
+  },
+});
+
+function downloadObjectAsJson(obj, filename){
+  var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(obj));
+  var downloadAnchorNode = document.createElement('a');
+  downloadAnchorNode.setAttribute("href",     dataStr);
+  downloadAnchorNode.setAttribute("download", filename + ".json");
+  document.body.appendChild(downloadAnchorNode);
+  downloadAnchorNode.click();
+  downloadAnchorNode.remove();
+}

datalad_gooey/resources/metadata/local/assets/style.css

@@ -0,0 +1,161 @@
+:root, :host {
+  --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Free";
+  --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free";
+  --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
+}
+
+@font-face {
+  font-family: 'Font Awesome 6 Free';
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url("fa-regular-400.woff2") format("woff2");
+}
+@font-face {
+  font-family: 'Font Awesome 6 Free';
+  font-style: normal;
+  font-weight: 900;
+  font-display: block;
+  src: url("fa-solid-900.woff2") format("woff2");
+}
+@font-face {
+  font-family: 'Font Awesome 6 Brands';
+  font-style: normal;
+  font-weight: 400;
+  font-display: block;
+  src: url("fa-brands-400.woff2") format("woff2");
+}
+.far,
+.fa-regular {
+  font-family: 'Font Awesome 6 Free';
+  font-weight: 400;
+}
+.fas,
+.fa-solid {
+  font-family: 'Font Awesome 6 Free';
+  font-weight: 900;
+}
+.fab,
+.fa-brands {
+  font-family: 'Font Awesome 6 Brands';
+  font-weight: 400;
+}
+
+body {
+  font-family: Menlo, Consolas, monospace;
+  color: #444;
+}
+
+.item {
+  cursor: pointer;
+  font-family: Menlo, Consolas, monospace;
+}
+
+.bold {
+  font-weight: bold;
+}
+
+.nav-item a {
+  color: var(--link-color);
+}
+.nav-item a:hover {
+  color: var(--link-hover-color);
+}
+
+.subdataset {
+  color: var(--link-color);
+  text-decoration: underline;
+}
+.subdataset:hover {
+  color: var(--link-hover-color);
+}
+.subdataset-disabled {
+  color: rgb(172, 172, 172);
+}
+
+.newlink {
+  color: var(--link-color);
+  text-decoration: underline;
+
+}
+.newlink:hover {
+  color: var(--link-hover-color);
+  cursor: pointer;
+}
+
+.xxlfont {
+  font-size: xx-large;
+}
+
+.xlfont {
+  font-size: x-large;
+}
+
+.lfont {
+  font-size: large;
+}
+
+
+
+body a {
+  color: var(--link-color);
+}
+body a:hover {
+  color: var(--link-hover-color);
+}
+
+.modal i:hover {
+  cursor: pointer;
+}
+
+ul {
+  list-style-type: none; /* Remove bullets */
+  padding-left: 1em;
+  line-height: 1.5em;
+}
+li[class="item"] {
+  border-bottom: 1px solid #eee;
+}
+li[class="item"]:last-child {
+  border-bottom: none;
+}
+
+/* .open-item {
+  border-bottom: none;
+} */
+/* li[class="item"]:nth-child(even) {
+  background-color:#eee;
+}
+li[class="item"]:nth-child(odd) {
+  background-color:#fff;
+} */
+
+
+
+.filesize {
+  text-align: right;
+  font-size: small;
+  position: absolute;
+  right: 1em;
+}
+
+#xsm-button {
+  font-size: small;
+  padding: 0px 3px;
+  margin-bottom: 0.5em;
+}
+
+.xsm-dl-button {
+  font-size: small;
+  padding: 0px 3px;
+}
+
+#desc_display {
+  border: 1px solid #444;
+  border-radius: 5px;
+}
+
+
+.form-group {
+  margin-top: 1em;
+}