From 7a9be598564e11b4ed4175c04921822f6999848f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michal=20T=C3=B6pfer?= Date: Fri, 31 May 2024 17:48:52 +0200 Subject: [PATCH] Add example application for embedding --- embedding/example/README.md | 8 ++++++ embedding/example/panel.html | 35 +++++++++++++++++++++++++ embedding/example/template.html | 46 +++++++++++++++++++++++++++++++++ embedding/package-lock.json | 26 ++++++++++++++++--- embedding/package.json | 1 + embedding/src/panel.js | 4 +-- embedding/webpack.config.js | 2 +- server/app-builder.js | 2 +- 8 files changed, 117 insertions(+), 7 deletions(-) create mode 100644 embedding/example/README.md create mode 100644 embedding/example/panel.html create mode 100644 embedding/example/template.html diff --git a/embedding/example/README.md b/embedding/example/README.md new file mode 100644 index 00000000..30eadec3 --- /dev/null +++ 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 – 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 new file mode 100644 index 00000000..745f75bd --- /dev/null +++ b/embedding/example/panel.html @@ -0,0 +1,35 @@ + + + + + IVIS embed example + + + +
+ + + + + + + + + + + diff --git a/embedding/example/template.html b/embedding/example/template.html new file mode 100644 index 00000000..03bf654d --- /dev/null +++ b/embedding/example/template.html @@ -0,0 +1,46 @@ + + + + + IVIS embed example + + + +
+ + + + + + + + + + + diff --git a/embedding/package-lock.json b/embedding/package-lock.json index b213a52c..b914c33b 100644 --- a/embedding/package-lock.json +++ b/embedding/package-lock.json @@ -13,6 +13,7 @@ "@babel/core": "^7.24.5", "@babel/plugin-proposal-decorators": "^7.24.1", "@babel/plugin-proposal-function-bind": "^7.24.1", + "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@babel/plugin-transform-class-properties": "^7.24.1", "@babel/preset-env": "^7.24.5", "@babel/preset-react": "^7.24.1", @@ -663,10 +664,17 @@ } }, "node_modules/@babel/plugin-proposal-private-property-in-object": { - "version": "7.21.0-placeholder-for-preset-env.2", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz", - "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==", + "version": "7.21.11", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz", + "integrity": "sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw==", + "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.", "dev": true, + "dependencies": { + "@babel/helper-annotate-as-pure": "^7.18.6", + "@babel/helper-create-class-features-plugin": "^7.21.0", + "@babel/helper-plugin-utils": "^7.20.2", + "@babel/plugin-syntax-private-property-in-object": "^7.14.5" + }, "engines": { "node": ">=6.9.0" }, @@ -1885,6 +1893,18 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/preset-env/node_modules/@babel/plugin-proposal-private-property-in-object": { + "version": "7.21.0-placeholder-for-preset-env.2", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz", + "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==", + "dev": true, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "node_modules/@babel/preset-env/node_modules/semver": { "version": "6.3.1", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", diff --git a/embedding/package.json b/embedding/package.json index 167651d7..aa066ac7 100644 --- 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 index a6d9ca51..e3539815 100644 --- 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 index 940b196b..2282504f 100644 --- 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 index 6ddfaed6..41d9165a 100644 --- 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()); }