diff --git a/public/css/_sparql.scss b/public/css/_sparql.scss new file mode 100644 index 0000000..cd5de71 --- /dev/null +++ b/public/css/_sparql.scss @@ -0,0 +1,31 @@ + +.yasqe .yasqe_buttons { + right: 16px !important; + top: 16px !important; +} + +.yasqe .yasqe_buttons .yasqe_share { + display: none; +} + +.yasqe .yasqe_buttons .yasqe_queryButton { + margin-right: .2em; + margin-top: .2em; +} + +.error-box { + background-color: #ffdbdb; + color:#f13232; + border: 1px solid #f13232; + padding: 1em; + white-space: pre-line; + display: grid; +} + +.error-box h1 { + font-weight: 600; + padding: 0; + margin: 0; + margin-bottom: 1em; + font-size: 1em; +} \ No newline at end of file diff --git a/public/css/website.css b/public/css/website.css index c77228b..7ebcaff 100644 --- a/public/css/website.css +++ b/public/css/website.css @@ -10619,7 +10619,7 @@ template { } .databus-navbar .databus-navbar-item.link { cursor: pointer; - color: #d5d5d5; + color: #c4c4c4; padding: 0em 0.75em; } .databus-navbar .databus-navbar-item.link:hover { @@ -10885,6 +10885,37 @@ template { background-size: 150px; } +.yasqe .yasqe_buttons { + right: 16px !important; + top: 16px !important; +} + +.yasqe .yasqe_buttons .yasqe_share { + display: none; +} + +.yasqe .yasqe_buttons .yasqe_queryButton { + margin-right: 0.2em; + margin-top: 0.2em; +} + +.error-box { + background-color: #ffdbdb; + color: #f13232; + border: 1px solid #f13232; + padding: 1em; + white-space: pre-line; + display: grid; +} + +.error-box h1 { + font-weight: 600; + padding: 0; + margin: 0; + margin-bottom: 1em; + font-size: 1em; +} + * { margin: 0px; padding: 0px; @@ -11119,15 +11150,6 @@ body.has-navbar-fixed-top { fill: rgb(200, 200, 200); } -.yasqe .yasqe_buttons .yasqe_share { - display: none; -} - -.yasqe .yasqe_buttons .yasqe_queryButton { - margin-right: 0.2em; - margin-top: 0.2em; -} - .editable-collection-element { margin: 0 !important; } diff --git a/public/css/website.scss b/public/css/website.scss index e2e84c5..5ec2f0e 100644 --- a/public/css/website.scss +++ b/public/css/website.scss @@ -23,6 +23,7 @@ @import 'normalize'; @import 'nav'; @import 'frontpage'; +@import 'sparql'; * { margin: 0px; @@ -273,14 +274,6 @@ body.has-navbar-fixed-top { fill: rgba(200, 200, 200, 1); } -.yasqe .yasqe_buttons .yasqe_share { - display: none; -} - -.yasqe .yasqe_buttons .yasqe_queryButton { - margin-right: .2em; - margin-top: .2em; -} .editable-collection-element { margin: 0 !important; diff --git a/public/dist/main.js b/public/dist/main.js index f16c56a..f8989e7 100644 --- a/public/dist/main.js +++ b/public/dist/main.js @@ -405,7 +405,7 @@ eval("const DatabusWebappUtils = __webpack_require__(/*! ../utils/databus-webapp \********************************************************/ /***/ ((module, __unused_webpack_exports, __webpack_require__) => { -eval("var DatabusWebappUtils = __webpack_require__(/*! ../utils/databus-webapp-utils */ \"./js/utils/databus-webapp-utils.js\");\nconst SparqlExamples = __webpack_require__(/*! ../utils/sparql-examples */ \"./js/utils/sparql-examples.js\");\n\n// Controller for the header section\nfunction SparqlEditorController($scope, $http) {\n\n\n $scope.storageKey = `${DATABUS_RESOURCE_BASE_URL}/sparql`;\n\n $scope.auth = data.auth;\n $scope.authenticated = data.auth.authenticated;\n $scope.utils = new DatabusWebappUtils($scope);\n\n\n $scope.editor = {};\n\n\n $scope.editor.exampleQueries = {};\n $scope.editor.exampleQueries.label = \"Databus Example Queries\";\n $scope.editor.exampleQueries.children = [];\n\n var simpleQueries = {\n label: \"Simple Queries\",\n children : []\n };\n\n\n var intermediateQueries = {\n label: \"Intermediate Queries\",\n children : []\n };\n\n\n simpleQueries.children.push({\n label: \"Select all Databus Groups\",\n query: `PREFIX databus: \nPREFIX rdf: \nPREFIX rdfs: \nPREFIX dct: \nPREFIX dcat: \nPREFIX sec: \nPREFIX cert: \nPREFIX foaf: \nPREFIX databus-cv: \nPREFIX dbo: \n\nSELECT DISTINCT * WHERE {\n ?s a databus:Group .\n}`\n });\n\n simpleQueries.children.push({\n label: \"Select all Databus Artifacts\",\n query: `PREFIX databus: \nPREFIX rdf: \nPREFIX rdfs: \nPREFIX dct: \nPREFIX dcat: \nPREFIX sec: \nPREFIX cert: \nPREFIX foaf: \nPREFIX databus-cv: \nPREFIX dbo: \n\nSELECT DISTINCT * WHERE {\n ?s a databus:Artifact .\n}`\n });\n\n simpleQueries.children.push({\n label: \"Select all Databus Versions\",\n query: `PREFIX databus: \nPREFIX rdf: \nPREFIX rdfs: \nPREFIX dct: \nPREFIX dcat: \nPREFIX sec: \nPREFIX cert: \nPREFIX foaf: \nPREFIX databus-cv: \nPREFIX dbo: \n\nSELECT DISTINCT * WHERE {\n ?s a databus:Version .\n}`\n });\n\n intermediateQueries.children.push({\n label: \"Latest Version of Artifact\",\n query: `PREFIX databus: \nPREFIX rdf: \nPREFIX rdfs: \nPREFIX dct: \nPREFIX dcat: \nPREFIX sec: \nPREFIX cert: \nPREFIX foaf: \nPREFIX databus-cv: \nPREFIX dbo: \n\nSELECT ?version WHERE\n{\n GRAPH ?g\n {\n ?version databus:artifact .\n ?version dct:hasVersion ?v . \n }\n} \nORDER BY DESC (STR(?v)) LIMIT 1`\n });\n\n\n $scope.editor.exampleQueries.children.push(simpleQueries);\n $scope.editor.exampleQueries.children.push(intermediateQueries);\n\n $scope.onExampleQueryClicked = function(node) {\n\n if(node.query == null) {\n return;\n }\n\n $scope.createQueryPage();\n\n var queryPage = $scope.queryData.pages[$scope.queryData.activeTab];\n\n queryPage.query = node.query;\n $scope.saveToStorage();\n }\n\n $scope.goToTab = function (index) {\n $scope.queryData.activeTab = index;\n $scope.saveToStorage();\n\n var queryPage = $scope.queryData.pages[$scope.queryData.activeTab];\n\n if ($scope.resultCache != null && $scope.resultCache[queryPage.name] != null) {\n $scope.editor.result = $scope.resultCache[queryPage.name];\n } else {\n $scope.editor.result = null;\n }\n }\n\n $scope.saveToStorage = function () {\n localStorage.setItem($scope.storageKey, JSON.stringify($scope.queryData));\n }\n\n $scope.deleteQueryPage = function ($index) {\n\n // Delete result cache entry\n var queryPage = $scope.queryData.pages[$scope.queryData.activeTab];\n if ($scope.resultCache != null && $scope.resultCache[queryPage.name] != null) {\n delete $scope.resultCache[queryPage.name];\n $scope.saveResultCache();\n }\n\n $scope.queryData.pages.splice($index, 1);\n\n if ($scope.queryData.pages.length == 0) {\n $scope.initialize();\n }\n else {\n var validTab = Math.min($scope.queryData.activeTab, $scope.queryData.pages.length - 1);\n\n if (validTab != $scope.queryData.activeTab) {\n $scope.goToTab(validTab);\n }\n }\n }\n\n $scope.createQueryPage = function () {\n\n var queryName = null;\n var queryNameIndex = 1;\n\n // find unoccupied name\n while (queryNameIndex < 100000) {\n\n // Create a candidate\n var hasName = true;\n queryName = `Query ${queryNameIndex}`;\n\n // Check if already in use\n for (var queryPage of $scope.queryData.pages) {\n if (queryPage.name == queryName) {\n hasName = false;\n }\n }\n\n // Found name, stop searching.\n if (hasName) {\n break;\n }\n\n queryNameIndex++;\n }\n\n $scope.queryData.pages.push({\n name: queryName,\n query: simpleQueries.children[0].query,\n endpoint: defaultEndpoint\n });\n\n $scope.goToTab($scope.queryData.pages.length - 1);\n\n $scope.saveToStorage();\n }\n\n $scope.saveResultCache = function () {\n sessionStorage.setItem($scope.storageKey, JSON.stringify($scope.resultCache));\n }\n\n $scope.initialize = function () {\n $scope.queryData = {};\n $scope.queryData.activeTab = 0;\n $scope.queryData.pages = [];\n $scope.createQueryPage();\n\n $scope.resultCache = {};\n $scope.saveResultCache();\n }\n\n var defaultEndpoint = `${DATABUS_RESOURCE_BASE_URL}/sparql`;\n\n var queryDataString = localStorage.getItem($scope.storageKey);\n var resultCacheString = sessionStorage.getItem($scope.storageKey);\n\n\n $scope.queryData = null;\n $scope.resultCache = JSON.parse(resultCacheString);\n\n try {\n $scope.queryData = JSON.parse(queryDataString);\n\n if ($scope.queryData == null || $scope.queryData.pages.length == 0) {\n $scope.initialize();\n }\n\n var queryPage = $scope.queryData.pages[$scope.queryData.activeTab];\n\n if ($scope.resultCache != null && $scope.resultCache[queryPage.name] != null) {\n $scope.editor.result = $scope.resultCache[queryPage.name];\n } else {\n $scope.editor.result = null;\n }\n\n }\n catch (e) {\n // Could not parse query data, create new!\n $scope.initialize();\n }\n\n $scope.editor.query = $scope.editor.exampleQueries[0];\n\n $scope.send = async function () {\n\n var queryPage = $scope.queryData.pages[$scope.queryData.activeTab];\n\n var res = await $http.post(queryPage.endpoint, { query: queryPage.query });\n\n if ($scope.resultCache == null) {\n $scope.resultCache = {};\n }\n\n $scope.resultCache[queryPage.name] = res.data;\n $scope.saveResultCache();\n\n $scope.editor.result = res.data;\n $scope.$apply();\n }\n\n $scope.insertExampleQuery = function (query) {\n $scope.editor.query = query;\n }\n\n}\n\nmodule.exports = SparqlEditorController;\n\n\n//# sourceURL=webpack://databus-webapp/./js/page-controller/sparql-editor-controller.js?"); +eval("var DatabusWebappUtils = __webpack_require__(/*! ../utils/databus-webapp-utils */ \"./js/utils/databus-webapp-utils.js\");\nconst SparqlExamples = __webpack_require__(/*! ../utils/sparql-examples */ \"./js/utils/sparql-examples.js\");\n\n// Controller for the header section\nfunction SparqlEditorController($scope, $http) {\n\n\n $scope.storageKey = `${DATABUS_RESOURCE_BASE_URL}/sparql`;\n\n $scope.auth = data.auth;\n $scope.authenticated = data.auth.authenticated;\n $scope.utils = new DatabusWebappUtils($scope);\n\n\n $scope.editor = {};\n\n\n $scope.editor.exampleQueries = {};\n $scope.editor.exampleQueries.label = \"Databus Example Queries\";\n $scope.editor.exampleQueries.children = [];\n\n var simpleQueries = {\n label: \"Simple Queries\",\n children : []\n };\n\n\n var intermediateQueries = {\n label: \"Intermediate Queries\",\n children : []\n };\n\n\n simpleQueries.children.push({\n label: \"Select all Databus Groups\",\n query: `PREFIX databus: \nPREFIX rdf: \nPREFIX rdfs: \nPREFIX dct: \nPREFIX dcat: \nPREFIX sec: \nPREFIX cert: \nPREFIX foaf: \nPREFIX databus-cv: \nPREFIX dbo: \n\nSELECT DISTINCT * WHERE {\n ?s a databus:Group .\n}`\n });\n\n simpleQueries.children.push({\n label: \"Select all Databus Artifacts\",\n query: `PREFIX databus: \nPREFIX rdf: \nPREFIX rdfs: \nPREFIX dct: \nPREFIX dcat: \nPREFIX sec: \nPREFIX cert: \nPREFIX foaf: \nPREFIX databus-cv: \nPREFIX dbo: \n\nSELECT DISTINCT * WHERE {\n ?s a databus:Artifact .\n}`\n });\n\n simpleQueries.children.push({\n label: \"Select all Databus Versions\",\n query: `PREFIX databus: \nPREFIX rdf: \nPREFIX rdfs: \nPREFIX dct: \nPREFIX dcat: \nPREFIX sec: \nPREFIX cert: \nPREFIX foaf: \nPREFIX databus-cv: \nPREFIX dbo: \n\nSELECT DISTINCT * WHERE {\n ?s a databus:Version .\n}`\n });\n\n intermediateQueries.children.push({\n label: \"Latest Version of Artifact\",\n query: `PREFIX databus: \nPREFIX rdf: \nPREFIX rdfs: \nPREFIX dct: \nPREFIX dcat: \nPREFIX sec: \nPREFIX cert: \nPREFIX foaf: \nPREFIX databus-cv: \nPREFIX dbo: \n\nSELECT ?version WHERE\n{\n GRAPH ?g\n {\n ?version databus:artifact .\n ?version dct:hasVersion ?v . \n }\n} \nORDER BY DESC (STR(?v)) LIMIT 1`\n });\n\n\n $scope.editor.exampleQueries.children.push(simpleQueries);\n $scope.editor.exampleQueries.children.push(intermediateQueries);\n\n $scope.onExampleQueryClicked = function(node) {\n\n if(node.query == null) {\n return;\n }\n\n $scope.createQueryPage();\n\n var queryPage = $scope.queryData.pages[$scope.queryData.activeTab];\n\n queryPage.query = node.query;\n $scope.saveToStorage();\n }\n\n $scope.goToTab = function (index) {\n $scope.queryData.activeTab = index;\n $scope.saveToStorage();\n\n var queryPage = $scope.queryData.pages[$scope.queryData.activeTab];\n\n if ($scope.resultCache != null && $scope.resultCache[queryPage.name] != null) {\n $scope.editor.result = $scope.resultCache[queryPage.name];\n } else {\n $scope.editor.result = null;\n }\n }\n\n $scope.saveToStorage = function () {\n localStorage.setItem($scope.storageKey, JSON.stringify($scope.queryData));\n }\n\n $scope.deleteQueryPage = function ($index) {\n\n // Delete result cache entry\n var queryPage = $scope.queryData.pages[$scope.queryData.activeTab];\n if ($scope.resultCache != null && $scope.resultCache[queryPage.name] != null) {\n delete $scope.resultCache[queryPage.name];\n $scope.saveResultCache();\n }\n\n $scope.queryData.pages.splice($index, 1);\n\n if ($scope.queryData.pages.length == 0) {\n $scope.initialize();\n }\n else {\n var validTab = Math.min($scope.queryData.activeTab, $scope.queryData.pages.length - 1);\n\n if (validTab != $scope.queryData.activeTab) {\n $scope.goToTab(validTab);\n }\n }\n }\n\n $scope.createQueryPage = function () {\n\n var queryName = null;\n var queryNameIndex = 1;\n\n // find unoccupied name\n while (queryNameIndex < 100000) {\n\n // Create a candidate\n var hasName = true;\n queryName = `Query ${queryNameIndex}`;\n\n // Check if already in use\n for (var queryPage of $scope.queryData.pages) {\n if (queryPage.name == queryName) {\n hasName = false;\n }\n }\n\n // Found name, stop searching.\n if (hasName) {\n break;\n }\n\n queryNameIndex++;\n }\n\n $scope.queryData.pages.push({\n name: queryName,\n query: simpleQueries.children[0].query,\n endpoint: defaultEndpoint\n });\n\n $scope.goToTab($scope.queryData.pages.length - 1);\n\n $scope.saveToStorage();\n }\n\n $scope.saveResultCache = function () {\n sessionStorage.setItem($scope.storageKey, JSON.stringify($scope.resultCache));\n }\n\n $scope.initialize = function () {\n $scope.queryData = {};\n $scope.queryData.activeTab = 0;\n $scope.queryData.pages = [];\n $scope.createQueryPage();\n\n $scope.resultCache = {};\n $scope.saveResultCache();\n }\n\n var defaultEndpoint = `${DATABUS_RESOURCE_BASE_URL}/sparql`;\n\n var queryDataString = localStorage.getItem($scope.storageKey);\n var resultCacheString = sessionStorage.getItem($scope.storageKey);\n\n\n $scope.queryData = null;\n $scope.resultCache = JSON.parse(resultCacheString);\n\n try {\n $scope.queryData = JSON.parse(queryDataString);\n\n if ($scope.queryData == null || $scope.queryData.pages.length == 0) {\n $scope.initialize();\n }\n\n var queryPage = $scope.queryData.pages[$scope.queryData.activeTab];\n\n if ($scope.resultCache != null && $scope.resultCache[queryPage.name] != null) {\n $scope.editor.result = $scope.resultCache[queryPage.name];\n } else {\n $scope.editor.result = null;\n }\n\n }\n catch (e) {\n // Could not parse query data, create new!\n $scope.initialize();\n }\n\n $scope.editor.query = $scope.editor.exampleQueries[0];\n\n $scope.send = async function () {\n\n var queryPage = $scope.queryData.pages[$scope.queryData.activeTab];\n\n try {\n \n var res = await $http.post(queryPage.endpoint, { query: queryPage.query });\n\n if ($scope.resultCache == null) {\n $scope.resultCache = {};\n }\n\n $scope.resultCache[queryPage.name] = res.data;\n $scope.saveResultCache();\n\n delete queryPage.err;\n $scope.editor.result = res.data;\n } catch(err) {\n console.log(err);\n queryPage.err = err;\n }\n\n $scope.$apply();\n }\n\n $scope.insertExampleQuery = function (query) {\n $scope.editor.query = query;\n }\n\n}\n\nmodule.exports = SparqlEditorController;\n\n\n//# sourceURL=webpack://databus-webapp/./js/page-controller/sparql-editor-controller.js?"); /***/ }), diff --git a/public/js/page-controller/sparql-editor-controller.js b/public/js/page-controller/sparql-editor-controller.js index c14cd05..d4c64ff 100644 --- a/public/js/page-controller/sparql-editor-controller.js +++ b/public/js/page-controller/sparql-editor-controller.js @@ -255,16 +255,24 @@ ORDER BY DESC (STR(?v)) LIMIT 1` var queryPage = $scope.queryData.pages[$scope.queryData.activeTab]; - var res = await $http.post(queryPage.endpoint, { query: queryPage.query }); + try { + + var res = await $http.post(queryPage.endpoint, { query: queryPage.query }); - if ($scope.resultCache == null) { - $scope.resultCache = {}; - } + if ($scope.resultCache == null) { + $scope.resultCache = {}; + } - $scope.resultCache[queryPage.name] = res.data; - $scope.saveResultCache(); + $scope.resultCache[queryPage.name] = res.data; + $scope.saveResultCache(); + + delete queryPage.err; + $scope.editor.result = res.data; + } catch(err) { + console.log(err); + queryPage.err = err; + } - $scope.editor.result = res.data; $scope.$apply(); } diff --git a/public/templates/sparql-editor.ejs b/public/templates/sparql-editor.ejs index cc48bff..5559f45 100644 --- a/public/templates/sparql-editor.ejs +++ b/public/templates/sparql-editor.ejs @@ -1,5 +1,10 @@ <%- include('header') -%> + +
@@ -23,26 +28,26 @@
-
- -
+
+ +
-
-
{{ queryPage.name }}
- -
+
{{ queryPage.name }}
+ +
-
- + -
New Query
-
+
New Query
+
@@ -55,22 +60,33 @@ margin-top: 2em; "> + ng-change="saveToStorage()" style="width: 600px;" placeholder="SPARQL endpoint URL"> - +
- + + + +
+
+

{{ queryData.pages[queryData.activeTab].err.statusText }}

+
{{ queryData.pages[queryData.activeTab].err.data }}
+
- +
+ + +
<%- include('footer') -%> \ No newline at end of file