Merge pull request #78 from Open-EO/fix/vue-viewer

Fix collection viewer, update to latest versions #75
Open-EO · Oct 8, 2021 · 7b9d346 · 7b9d346
2 parents 03ee41d + 6e3bb0f
commit 7b9d346
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 56 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,15 +4,16 @@
 
 ### Changes
 - clarified the currently used OIDC code flow and adapted documentation [#71](https://github.com/Open-EO/openeo-r-client/issues/71)
-- usability improvements when selecting and configuring the OIDC Authentication provider[#74](https://github.com/Open-EO/openeo-r-client/issues/74)
+- usability improvements when selecting and configuring the OIDC Authentication provider [#74](https://github.com/Open-EO/openeo-r-client/issues/74)
 - cleaning empty fields when serializing user defined process results [#68](https://github.com/Open-EO/openeo-r-client/issues/68)
 
 ### Fixes
 - modified a descriptive text for "production-readiness" of back-ends
 - modified the documentation and examples of `connect()` in terms of the parameter `version`
 - modified the implemented openEO API version of the client (removed the release candidate suffix)
 - fixed interpretation of an one entry discovery object [#59](https://github.com/Open-EO/openeo-r-client/issues/59)
-- fixed an issue when querying the versions of a back-end (#72)
+- fixed an issue when querying the versions of a back-end [#72](https://github.com/Open-EO/openeo-r-client/issues/72)
+- Updated to latest version of Vue Components and Processes DocGen (which importantly fixes the collection viewer) [#75](https://github.com/Open-EO/openeo-r-client/issues/75)
 
 ## [1.0.0] - 2020-09-30
 

diff --git a/R/viewer.R b/R/viewer.R
@@ -41,9 +41,7 @@ process_viewer = function(x,con=NULL) {
     if (length(con) == 0) con = .assure_connection(con)
 
     api_version = paste0("'",con$api_version(),"'")
-    # doc_gen_version = "@1.0.0-beta.2"
-    doc_gen_version = "@latest"
-    css_version = "@latest"
+    doc_gen_version = "1"
 
     if (is.function(x)) {
       x=do.call(x,args=list())
@@ -80,7 +78,6 @@ process_viewer = function(x,con=NULL) {
     html = readChar(template_file, nchars = file.info(template_file)$size)
 
     html = gsub(x=html,pattern = "%doc_gen_version%",replacement = doc_gen_version)
-    html = gsub(x=html,pattern = "%css_version%",replacement = css_version)
     html = gsub(x=html,pattern = "%processes%",replacement=x,fixed=TRUE)
     html = gsub(x=html,pattern = "%navigator%",replacement=navigator)
     html = gsub(x=html,pattern = "%api_version%",replacement=api_version)
@@ -103,10 +100,7 @@ collection_viewer = function(x,con=NULL) {
   tryCatch({
     if (length(con) == 0) con = .assure_connection(con)
 
-    api_version = paste0("'",con$api_version(),"'")
-    doc_gen_version = "@latest"
-    vue_version = "@latest"
-    vue_css_version = "@latest"
+    vue_version = "2"
 
     if (is.character(x)) {
       x = describe_collection(con=con,collection=x)
@@ -135,11 +129,8 @@ collection_viewer = function(x,con=NULL) {
     template_file = system.file("extdata", "collection_viewer_template.html", package = "openeo")
     html = readChar(template_file, nchars = file.info(template_file)$size)
 
-    html = gsub(x=html,pattern = "%doc_gen_version%",replacement = doc_gen_version)
     html = gsub(x=html,pattern = "%vue_version%",replacement = vue_version)
-    html = gsub(x=html,pattern = "%vue_css_version%",replacement = vue_css_version)
     html = gsub(x=html,pattern = "%collection_info%",replacement=x,fixed=TRUE)
-    html = gsub(x=html,pattern = "%api_version%",replacement=api_version)
 
     htmlViewer(html)
   }, error = .capturedErrorToMessage)

diff --git a/inst/extdata/collection_viewer_template.html b/inst/extdata/collection_viewer_template.html
@@ -5,30 +5,15 @@
 		<title>openEO Collection</title>
 		<meta http-equiv='X-UA-Compatible' content='IE=edge'>
 		<meta charset='UTF-8'>
-		<meta name="author" content="Matthias Mohr">
 		<meta name='viewport' content='width=device-width, initial-scale=1'>
-		<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.js'></script>
-		<script src='https://cdn.jsdelivr.net/npm/vue'></script>
-		<script src='https://cdn.jsdelivr.net/npm/@openeo/vue-components%vue_version%/assets/openeo-vue.umd.min.js'></script>
-		<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.css' />
-		<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@openeo/processes-docgen%doc_gen_version%/dist/DocGen.css'>
-		<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@openeo/vue-components%vue_css_version%/assets/openeo-vue.css'>
+		<script src="https://cdn.jsdelivr.net/npm/@openeo/vue-components@%vue_version%/assets/openeo.min.js"></script>
 		<style>html, body { height: 100%; margin: 1em; font-family: sans-serif; }</style>
 	</head>
 
-	<body class='docgen'>
-		<div id='app'></div>
-		<script>
-		  new Vue({
-				el: '#app',
-				render: h => h(window['openeo-vue'].Collection, { 
-					props: {
-						collectionData: %collection_info%,
-						version: '1.0.0'
-					}
-				})
-			});
-		</script>
+	<body>
+  	<openeo-collection>
+    	<script prop="data" type="application/json">%collection_info%</script>
+	  </openeo-collection>
 		<noscript>Sorry, the documentation generator requires JavaScript to be enabled!</noscript>
 	</body>
 

diff --git a/inst/extdata/process_viewer_template.html b/inst/extdata/process_viewer_template.html
@@ -2,32 +2,32 @@
 <html>
 
 <head>
-<title>openEO Processes</title>
-<meta http-equiv='X-UA-Compatible' content='IE=edge'>
-<meta name="author" content="Matthias Mohr">
-<meta charset='UTF-8'>
-<meta name='viewport' content='width=device-width, initial-scale=1'>
-<script src='https://cdn.jsdelivr.net/npm/vue'></script>
-<script src='https://cdn.jsdelivr.net/npm/@openeo/processes-docgen%doc_gen_version%/dist/DocGen.umd.min.js'></script>
-<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@openeo/processes-docgen%css_version%/dist/DocGen.css'>
-<style>html, body { height: 100%; margin: 0; }</style>
+  <title>openEO Processes</title>
+  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+  <meta name="author" content="Matthias Mohr">
+  <meta charset='UTF-8'>
+  <meta name='viewport' content='width=device-width, initial-scale=1'>
+  <script src='https://cdn.jsdelivr.net/npm/vue'></script>
+  <script src='https://cdn.jsdelivr.net/npm/@openeo/processes-docgen@%doc_gen_version%/dist/DocGen.umd.min.js'></script>
+  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@openeo/processes-docgen@%doc_gen_version%/dist/DocGen.css'>
+  <style>html, body { height: 100%; margin: 0; }</style>
 </head>
 
 <body>
-<div id='app'></div>
-<script>
-  new Vue({
-    el: '#app',
-    render: h => h(DocGen, { 
-      props: {
-        document: %processes%,
-        apiVersion: %api_version%,
-        showTableOfContents: %navigator%
-      }
-    })
-  });
-</script>
-<noscript>Sorry, the documentation generator requires JavaScript to be enabled!</noscript>
+  <div id='app'></div>
+  <script>
+    new Vue({
+      el: '#app',
+      render: h => h(DocGen, { 
+        props: {
+          document: %processes%,
+          apiVersion: %api_version%,
+          showTableOfContents: %navigator%
+        }
+      })
+    });
+  </script>
+  <noscript>Sorry, the documentation generator requires JavaScript to be enabled!</noscript>
 </body>
 
 </html>