Add example application for embedding

smartarch · May 31, 2024 · 628133c · 628133c
1 parent 5022c79
commit 628133c
Show file tree

Hide file tree

Showing 8 changed files with 117 additions and 7 deletions.
diff --git a/embedding/example/README.md b/embedding/example/README.md
@@ -0,0 +1,8 @@
+# Example application with IVIS panel embedding
+
+The [`panel.html`](panel.html) file shows an example of embedding a panel (from `panelId`).
+The [`template.html`](template.html) file shows an example of embedding a dynamic panel from a template (`templateId`) without instantiating an explicit panel in IVIS.
+
+1. Build the `ivis-embedding-client` package: `cd .. ; npm run build`
+2. Set the `apiAccessToken` (obtain it from the IVIS user interface &ndash; Account / API) and `panelId`/`templateId` in [`panel.html`](panel.html) and [`template.html`](template.html). For [`template.html`](template.html), you also need to set the `parameters` accordingly (based on the template's parameters).
+3. Open [`panel.html`](panel.html) or [`template.html`](template.html) in your browser.
diff --git a/embedding/example/panel.html b/embedding/example/panel.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>IVIS embed example</title>
+</head>
+<body>
+
+<div id="embedded-panel"></div>
+
+<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+<script type="text/javascript" src="../dist/ivis.js"></script>
+
+<script type="text/javascript" async>
+    const ivisApiUrlBase = "http://localhost:8082/";
+    const ivisSandboxUrlBase = "http://localhost:8081/";
+    const apiAccessToken = "SET_YOUR_ACCESS_TOKEN_HERE";
+    const panelId = 1;
+
+    axios.post(`${ivisApiUrlBase}api/embedded-panel-token`, {
+        panelId: panelId,
+        renewableBySandbox: true,
+    }, {
+        headers: {'access-token': apiAccessToken},
+    }).then((response) => {
+        const restrictedAccessToken = response.data;
+        IVIS.embedPanel('embedded-panel', ivisSandboxUrlBase, panelId, restrictedAccessToken);
+    })
+</script>
+
+
+</body>
+</html>
+
+
diff --git a/embedding/example/template.html b/embedding/example/template.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>IVIS embed example</title>
+</head>
+<body>
+
+<div id="embedded-panel"></div>
+
+<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+<script type="text/javascript" src="../dist/ivis.js"></script>
+
+<script type="text/javascript" async>
+    const ivisApiUrlBase = "http://localhost:8082/";
+    const ivisSandboxUrlBase = "http://localhost:8081/";
+    const apiAccessToken = "SET_YOUR_ACCESS_TOKEN_HERE";
+    const templateId = 1;
+    /* assuming the following definition of template parameters:
+    [{
+        "id": "label",
+        "label": "Label",
+        "type": "string"
+    }]
+    */
+    const parameters = {
+        "label": "Test"
+    }
+
+    axios.post(`${ivisApiUrlBase}api/embedded-template-token`, {
+        templateId: templateId,
+        renewableBySandbox: true,
+        params: parameters,
+    }, {
+        headers: {'access-token': apiAccessToken},
+    }).then((response) => {
+        const restrictedAccessToken = response.data;
+        IVIS.embedTemplate('embedded-panel', ivisSandboxUrlBase, templateId, { params: parameters }, restrictedAccessToken);
+    })
+</script>
+
+
+</body>
+</html>
+
+
diff --git a/embedding/package-lock.json b/embedding/package-lock.json
diff --git a/embedding/package.json b/embedding/package.json
@@ -16,6 +16,7 @@
     "@babel/plugin-proposal-decorators": "^7.24.1",
     "@babel/plugin-proposal-function-bind": "^7.24.1",
     "@babel/plugin-transform-class-properties": "^7.24.1",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/preset-env": "^7.24.5",
     "@babel/preset-react": "^7.24.1",
     "babel-loader": "^8.3.0",

diff --git a/embedding/src/panel.js b/embedding/src/panel.js
@@ -7,7 +7,7 @@ export function embedPanel(domElementId, ivisSandboxUrlBase, panelId, accessToke
         id: panelId
     };
 
-    const options = JSON.parse(optionsStr);
+    const options = optionsStr && JSON.parse(optionsStr);
 
     embedEntity(domElementId, ivisSandboxUrlBase, entityParams, accessToken, options, callbacks);
 }
@@ -30,7 +30,7 @@ export function embedTemplate(domElementId, ivisSandboxUrlBase, templateId, conf
         config: config
     };
 
-    const options = JSON.parse(optionsStr);
+    const options = optionsStr && JSON.parse(optionsStr);
     embedEntity(domElementId, ivisSandboxUrlBase, entityParams, accessToken, options, callbacks);
 }
 

diff --git a/embedding/webpack.config.js b/embedding/webpack.config.js
@@ -4,7 +4,7 @@ const path = require('path');
 module.exports = {
     mode: 'production',
     optimization: {
-        // We no not want to minimize our code.
+        // We do not want to minimize our code.
         minimize: false
     },
     entry: {

diff --git a/server/app-builder.js b/server/app-builder.js
@@ -84,7 +84,7 @@ function createApp(type) {
     // Do not expose software used
     app.disable('x-powered-by');
 
-    if (type === AppType.SANDBOXED) {
+    if (type === AppType.SANDBOXED || type === AppType.API) {
         app.use(cors());
     }