Use latest YASGUI directly

Author: kinow

jena-fuseki2/jena-fuseki-ui/package.json

@@ -22,8 +22,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/vue-fontawesome": "^3.0.1",
     "@popperjs/core": "^2.11.6",
-    "@triply/yasqe": "^4.2.27",
-    "@triply/yasr": "^4.2.27",
+    "@triply/yasgui": "^4.2.28",
     "@vue/compat": "^3.2.39",
     "axios": "^0.27.2",
     "bootstrap": "^5.2.1",

jena-fuseki2/jena-fuseki-ui/src/views/dataset/Query.vue

@@ -164,10 +164,7 @@
               </div>
               <div class="row">
                 <div class="col-sm-12">
-                  <div id="yasqe"></div>
-                </div>
-                <div class="col-sm-12">
-                  <div id="yasr"></div>
+                  <div id="yasgui"></div>
                 </div>
               </div>
             </div>
@@ -180,8 +177,7 @@
 
 <script>
 import Menu from '@/components/dataset/Menu.vue'
-import Yasqe from '@triply/yasqe'
-import Yasr from '@triply/yasr'
+import Yasgui from '@triply/yasgui'
 import { createShareableLink } from '@/utils/query'
 import { nextTick } from 'vue'
 import currentDatasetMixin from '@/mixins/current-dataset'
@@ -264,53 +260,49 @@ export default {
     }
   },
 
+  yasgui: null,
+
   created () {
-    this.yasqe = null
-    this.yasr = null
     this.$nextTick(() => {
-      setTimeout(() => {
-        const vm = this
+      const yasguiElement = document.getElementById('yasgui')
+      yasguiElement.innerHTML = ''
 
-        document.getElementById('yasr').innerHTML = ''
-        document.getElementById('yasqe').innerHTML = ''
+      // Save current hash: https://github.com/TriplyDB/Yasgui/issues/167#issuecomment-1437158547
+      const hash = location.hash
 
-        // results area
-        vm.yasr = new Yasr(
-          document.getElementById('yasr'),
-          {
-            // we do not want to save the results, otherwise we will have query results showing in different
-            // dataset views
-            persistenceId: null
-          }
-        )
-        // Curried function to create shareable links. YASQE expects a function
-        // that accepts only an instance of YASQE.
-        const curriedCreateShareableLink = yasqe => {
-          return createShareableLink(yasqe.getValue(), vm.$route.path)
-        }
-        // query editor
+      // Curried function to create shareable links. YASQE expects a function
+      // that accepts only an instance of YASQE.
+      const curriedCreateShareableLink = yasqe => {
+        return createShareableLink(yasqe.getValue(), this.$route.path)
+      }
+
+      this.$options.yasgui = new Yasgui(yasguiElement, {
+        yasr: {
+          persistenceId: null,
+        },
         // NOTE: the full screen functionality was removed from YASQE: https://github.com/Triply-Dev/YASGUI.YASQE-deprecated/issues/139#issuecomment-573656137
-        vm.yasqe = new Yasqe(
-          document.getElementById('yasqe'),
-          {
-            showQueryButton: true,
-            resizeable: true,
-            requestConfig: {
-              endpoint: this.$fusekiService.getFusekiUrl(this.currentDatasetUrl)
-            },
-            createShareableLink: curriedCreateShareableLink
-          }
-        )
-        vm.yasqe.on('queryResponse', (yasqe, response, duration) => {
-          vm.yasqe.saveQuery()
-          vm.yasr.setResponse(response, duration)
-        })
-        if (this.$route.query.query !== undefined) {
-          vm.setQuery(this.$route.query.query)
+        yasqe: {
+          showQueryButton: true,
+          resizeable: true,
+          requestConfig: {
+            endpoint: this.$fusekiService.getFusekiUrl(this.currentDatasetUrl)
+          },
+          createShareableLink: curriedCreateShareableLink
         }
-        this.syncYasqePrefixes()
-        this.loading = false
-      }, 300)
+      })
+      // Restore hash
+      location.hash = hash
+
+      // this.$options.yasgui.on('queryResponse', (yasqe, response, duration) => {
+      //   this.$options.yasgui.saveQuery()
+      //   this.$options.yasgui.setResponse(response, duration)
+      // })
+      // if (this.$route.query.query !== undefined) {
+      //   this.setQuery(this.$route.query.query)
+      // }
+      // this.syncYasqePrefixes()
+
+      this.loading = false
     })
   },
 
@@ -331,18 +323,18 @@ export default {
       this.currentDatasetUrl = val
     },
     currentDatasetUrl: function (val, oldVal) {
-      if (this.yasqe) {
-        this.yasqe.options.requestConfig.endpoint = this.$fusekiService.getFusekiUrl(val)
+      if (this.$options.yasgui) {
+        this.$options.yasgui.setEndpoint(this.$fusekiService.getFusekiUrl(val))
       }
     },
     contentTypeSelect: function (val, oldVal) {
-      if (this.yasqe) {
-        this.yasqe.options.requestConfig.acceptHeaderSelect = this.contentTypeSelect
+      if (this.$options.yasgui) {
+        this.$options.yasgui.options.requestConfig.acceptHeaderSelect = this.contentTypeSelect
       }
     },
     contentTypeGraph: function (val, oldVal) {
-      if (this.yasqe) {
-        this.yasqe.options.requestConfig.acceptHeaderGraph = this.contentTypeGraph
+      if (this.$options.yasgui) {
+        this.$options.yasgui.options.requestConfig.acceptHeaderGraph = this.contentTypeGraph
       }
     }
   },
@@ -354,7 +346,7 @@ export default {
       // trigger a popup/alert by modifying the query passed, looks like YASQE does
       // the query cleaning before displaying it.
       // See: https://github.com/payloadbox/xss-payload-list
-      this.yasqe.setValue(query)
+      this.$options.yasgui.setValue(query)
       this.syncYasqePrefixes()
     },
     getPrefixBadgeVariant (prefix) {
@@ -364,7 +356,7 @@ export default {
       return 'light'
     },
     syncYasqePrefixes () {
-      const prefixes = this.yasqe.getPrefixesFromQuery()
+      const prefixes = this.$options.yasgui.getPrefixesFromQuery()
       this.currentQueryPrefixes = []
       for (const uri of Object.values(prefixes)) {
         this.currentQueryPrefixes.push(uri)
@@ -375,10 +367,10 @@ export default {
         [prefix.text]: prefix.uri
       }
       if (this.currentQueryPrefixes.includes(prefix.uri)) {
-        this.yasqe.removePrefixes(newPrefix)
+        this.$options.yasgui.removePrefixes(newPrefix)
         this.currentQueryPrefixes.splice(this.currentQueryPrefixes.indexOf(prefix.uri), 1)
       } else {
-        this.yasqe.addPrefixes(newPrefix)
+        this.$options.yasgui.addPrefixes(newPrefix)
         this.currentQueryPrefixes.push(prefix.uri)
       }
     }
@@ -387,31 +379,5 @@ export default {
 </script>
 
 <style lang="scss">
-@import '~@triply/yasqe/build/yasqe.min.css';
-@import '~@triply/yasr/build/yasr.min.css';
-
-// N.B: these were copied from an old release of YASR due to this
-//      change: https://github.com/TriplyDB/Yasgui/commit/19521998f035e718d3f1d5cfa6073ce2e34242e7
-//      for more: https://github.com/apache/jena/pull/1153
-.yasr table.dataTable {
-  border: 1px solid rgb(217, 217, 217);
-  border-image-source: initial;
-  border-image-slice: initial;
-  border-image-repeat: initial;
-  tbody {
-    tr {
-      td {
-        border-top: 1px solid #ddd;
-      }
-      &:last-of-type {
-        td {
-          border-bottom: 1px solid #ddd;
-        }
-      }
-      &:nth-child(even) {
-        background-color: #f9f9f9;
-      }
-    }
-  }
-}
+@import '@triply/yasgui/build/yasgui.min.css';
 </style>