diff --git a/package-lock.json b/package-lock.json
index 458d200..5eaf34c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42,7 +42,8 @@
"semantic-ui-react": "^2.1.5",
"superagent": "^6.1.0",
"vite": "^5.4.11",
- "vite-plugin-env-compatible": "^2.0.1"
+ "vite-plugin-env-compatible": "^2.0.1",
+ "websocket": "^1.0.35"
},
"devDependencies": {
"autoprefixer": "^9.7.6",
@@ -2456,6 +2457,18 @@
"optional": true,
"peer": true
},
+ "node_modules/bufferutil": {
+ "version": "4.0.8",
+ "resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.8.tgz",
+ "integrity": "sha512-4T53u4PdgsXqKaIctwF8ifXlRTTmEPJ8iEPWFdGZvcf7sbwYo6FKFEX9eNNAnzFZ7EzJAQ3CJeOtCRA4rDp7Pw==",
+ "hasInstallScript": true,
+ "dependencies": {
+ "node-gyp-build": "^4.3.0"
+ },
+ "engines": {
+ "node": ">=6.14.2"
+ }
+ },
"node_modules/call-bind": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
@@ -2858,6 +2871,18 @@
"cytoscape": "^3.2.0"
}
},
+ "node_modules/d": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/d/-/d-1.0.2.tgz",
+ "integrity": "sha512-MOqHvMWF9/9MX6nza0KgvFH4HpMU0EF5uUDXqX/BtxtU8NfB0QzRtJ8Oe/6SuS4kbhyzVJwjd97EA4PKrzJ8bw==",
+ "dependencies": {
+ "es5-ext": "^0.10.64",
+ "type": "^2.7.2"
+ },
+ "engines": {
+ "node": ">=0.12"
+ }
+ },
"node_modules/dagre": {
"version": "0.8.5",
"resolved": "https://registry.npmjs.org/dagre/-/dagre-0.8.5.tgz",
@@ -3088,11 +3113,48 @@
"node": ">= 0.4"
}
},
+ "node_modules/es5-ext": {
+ "version": "0.10.64",
+ "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.64.tgz",
+ "integrity": "sha512-p2snDhiLaXe6dahss1LddxqEm+SkuDvV8dnIQG0MWjyHpcMNfXKPE+/Cc0y+PhxJX3A4xGNeFCj5oc0BUh6deg==",
+ "hasInstallScript": true,
+ "dependencies": {
+ "es6-iterator": "^2.0.3",
+ "es6-symbol": "^3.1.3",
+ "esniff": "^2.0.1",
+ "next-tick": "^1.1.0"
+ },
+ "engines": {
+ "node": ">=0.10"
+ }
+ },
+ "node_modules/es6-iterator": {
+ "version": "2.0.3",
+ "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
+ "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==",
+ "dependencies": {
+ "d": "1",
+ "es5-ext": "^0.10.35",
+ "es6-symbol": "^3.1.1"
+ }
+ },
"node_modules/es6-object-assign": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz",
"integrity": "sha512-MEl9uirslVwqQU369iHNWZXsI8yaZYGg/D65aOgZkeyFJwHYSxilf7rQzXKI7DdDuBPrBXbfk3sl9hJhmd5AUw=="
},
+ "node_modules/es6-symbol": {
+ "version": "3.1.4",
+ "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.4.tgz",
+ "integrity": "sha512-U9bFFjX8tFiATgtkJ1zg25+KviIXpgRvRHS8sau3GfhVzThRQrOeksPeT0BWW2MNZs1OEWJ1DPXOQMn0KKRkvg==",
+ "dependencies": {
+ "d": "^1.0.2",
+ "ext": "^1.7.0"
+ },
+ "engines": {
+ "node": ">=0.12"
+ }
+ },
"node_modules/esbuild": {
"version": "0.21.5",
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
@@ -3149,6 +3211,29 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
+ "node_modules/esniff": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/esniff/-/esniff-2.0.1.tgz",
+ "integrity": "sha512-kTUIGKQ/mDPFoJ0oVfcmyJn4iBDRptjNVIzwIFR7tqWXdVI9xfA2RMwY/gbSpJG3lkdWNEjLap/NqVHZiJsdfg==",
+ "dependencies": {
+ "d": "^1.0.1",
+ "es5-ext": "^0.10.62",
+ "event-emitter": "^0.3.5",
+ "type": "^2.7.2"
+ },
+ "engines": {
+ "node": ">=0.10"
+ }
+ },
+ "node_modules/event-emitter": {
+ "version": "0.3.5",
+ "resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",
+ "integrity": "sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==",
+ "dependencies": {
+ "d": "1",
+ "es5-ext": "~0.10.14"
+ }
+ },
"node_modules/event-target-shim": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
@@ -3199,6 +3284,14 @@
"resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
"integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw=="
},
+ "node_modules/ext": {
+ "version": "1.7.0",
+ "resolved": "https://registry.npmjs.org/ext/-/ext-1.7.0.tgz",
+ "integrity": "sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==",
+ "dependencies": {
+ "type": "^2.7.2"
+ }
+ },
"node_modules/fast-safe-stringify": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/fast-safe-stringify/-/fast-safe-stringify-2.1.1.tgz",
@@ -3810,6 +3903,11 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
+ "node_modules/is-typedarray": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+ "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA=="
+ },
"node_modules/isexe": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -4342,6 +4440,11 @@
"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
}
},
+ "node_modules/next-tick": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz",
+ "integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ=="
+ },
"node_modules/node-domexception": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
@@ -4377,6 +4480,16 @@
"url": "https://opencollective.com/node-fetch"
}
},
+ "node_modules/node-gyp-build": {
+ "version": "4.8.4",
+ "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.8.4.tgz",
+ "integrity": "sha512-LA4ZjwlnUblHVgq0oBF3Jl/6h/Nvs5fzBLwdEF4nuxnFdsfajde4WfxtJr3CaiH+F6ewcIB/q4jQ4UzPyid+CQ==",
+ "bin": {
+ "node-gyp-build": "bin.js",
+ "node-gyp-build-optional": "optional.js",
+ "node-gyp-build-test": "build-test.js"
+ }
+ },
"node_modules/node-releases": {
"version": "2.0.18",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
@@ -5775,6 +5888,19 @@
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
},
+ "node_modules/type": {
+ "version": "2.7.3",
+ "resolved": "https://registry.npmjs.org/type/-/type-2.7.3.tgz",
+ "integrity": "sha512-8j+1QmAbPvLZow5Qpi6NCaN8FB60p/6x8/vfNqOk/hC+HuvFZhL4+WfekuhQLiqFZXOgQdrs3B+XxEmCc6b3FQ=="
+ },
+ "node_modules/typedarray-to-buffer": {
+ "version": "3.1.5",
+ "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
+ "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
+ "dependencies": {
+ "is-typedarray": "^1.0.0"
+ }
+ },
"node_modules/uncontrollable": {
"version": "7.2.1",
"resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
@@ -5849,6 +5975,18 @@
}
}
},
+ "node_modules/utf-8-validate": {
+ "version": "5.0.10",
+ "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.10.tgz",
+ "integrity": "sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ==",
+ "hasInstallScript": true,
+ "dependencies": {
+ "node-gyp-build": "^4.3.0"
+ },
+ "engines": {
+ "node": ">=6.14.2"
+ }
+ },
"node_modules/util-deprecate": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -6007,6 +6145,35 @@
"node": ">= 8"
}
},
+ "node_modules/websocket": {
+ "version": "1.0.35",
+ "resolved": "https://registry.npmjs.org/websocket/-/websocket-1.0.35.tgz",
+ "integrity": "sha512-/REy6amwPZl44DDzvRCkaI1q1bIiQB0mEFQLUrhz3z2EK91cp3n72rAjUlrTP0zV22HJIUOVHQGPxhFRjxjt+Q==",
+ "dependencies": {
+ "bufferutil": "^4.0.1",
+ "debug": "^2.2.0",
+ "es5-ext": "^0.10.63",
+ "typedarray-to-buffer": "^3.1.5",
+ "utf-8-validate": "^5.0.2",
+ "yaeti": "^0.0.6"
+ },
+ "engines": {
+ "node": ">=4.0.0"
+ }
+ },
+ "node_modules/websocket/node_modules/debug": {
+ "version": "2.6.9",
+ "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+ "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+ "dependencies": {
+ "ms": "2.0.0"
+ }
+ },
+ "node_modules/websocket/node_modules/ms": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+ "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+ },
"node_modules/which": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -6084,6 +6251,14 @@
"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
"dev": true
},
+ "node_modules/yaeti": {
+ "version": "0.0.6",
+ "resolved": "https://registry.npmjs.org/yaeti/-/yaeti-0.0.6.tgz",
+ "integrity": "sha512-MvQa//+KcZCUkBTIC9blM+CU9J2GzuTytsOUwf2lidtvkx/6gnEp1QvJv34t9vdjhFmha/mUiNDbN0D0mJWdug==",
+ "engines": {
+ "node": ">=0.10.32"
+ }
+ },
"node_modules/yallist": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
diff --git a/package.json b/package.json
index b564475..7dc5424 100644
--- a/package.json
+++ b/package.json
@@ -49,7 +49,8 @@
"semantic-ui-react": "^2.1.5",
"superagent": "^6.1.0",
"vite": "^5.4.11",
- "vite-plugin-env-compatible": "^2.0.1"
+ "vite-plugin-env-compatible": "^2.0.1",
+ "websocket": "^1.0.35"
},
"devDependencies": {
"autoprefixer": "^9.7.6",
diff --git a/public/main.css b/public/main.css
index 30e5941..c01fbda 100644
--- a/public/main.css
+++ b/public/main.css
@@ -2343,56 +2343,3 @@ input:disabled {
background: #272822;
overflow: auto;
}
-
-.Toaster__alert {
- background-color: white;
- overflow: hidden;
- max-width: 650px;
- position: relative;
- border-radius: 0.4rem;
- display: flex;
- padding: 1rem;
- padding-right: 48px;
- box-shadow:
- rgba(52, 58, 64, 0.15) 0px 1px 10px 0px,
- rgba(52, 58, 64, 0.1) 0px 6px 12px 0px,
- rgba(52, 58, 64, 0.12) 0px 6px 15px -2px;
-}
-
-.Toaster__alert_text {
- box-sizing: border-box;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
- "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
- color: rgb(33, 37, 41);
- -webkit-font-smoothing: antialiased;
- font-weight: 500;
- line-height: 1.5;
- font-size: 1rem;
- margin: 0px;
-}
-
-.Toaster__alert_close {
- padding: 12px;
- outline: none;
- cursor: pointer;
- background-color: transparent;
- position: absolute;
- top: 7px;
- right: 4px;
- border-radius: 0.4rem;
- border: 0;
- -webkit-appearance: none;
- font-size: 1rem;
- font-weight: 700;
- line-height: 1;
- text-shadow: 0 1px 0 #fff;
- opacity: 0.5;
-}
-
-.Toaster__alert_close:focus {
- box-shadow: rgba(52, 58, 64, 0.15) 0px 0px 0px 3px;
-}
-
-.Toaster__message-wrapper {
- padding: 8px;
-}
diff --git a/src/pages/ScriptPage.jsx b/src/pages/ScriptPage.jsx
index 73152a7..8b378bd 100644
--- a/src/pages/ScriptPage.jsx
+++ b/src/pages/ScriptPage.jsx
@@ -14,7 +14,7 @@ import ScriptInputOutputModal from "../components/sform/ScriptInputOutputModal.j
import { Dropdown } from "semantic-ui-react";
import { ICONS_MAP } from "../constants/dagreIcons.js";
import ScriptFunctionSelection from "../components/ScriptFunctionSelection.jsx";
-import { Button } from "react-bootstrap";
+import { Button, Toast, ToastContainer } from "react-bootstrap";
import ValidationReportModal from "../components/modal/ValidationReportModal.jsx";
import MoveModuleModal from "../components/modal/MoveModuleModal.jsx";
import ScriptOntologyModal from "../components/modal/ScriptOntologyModal.jsx";
@@ -44,6 +44,7 @@ import {
MODULE_VARIABLES,
SCRIPT_PATH,
} from "../constants/vocabulary.js";
+import { w3cwebsocket as W3CWebSocket } from "websocket";
const rankDirOptions = [
// preset
@@ -78,6 +79,10 @@ const modalInputs = {
errorMessage: null,
};
+const websocketURL = new URL("/rest/notifications", window.location.href);
+websocketURL.protocol = websocketURL.protocol.replace("http", "ws");
+const client = new W3CWebSocket(websocketURL);
+
class Script extends React.Component {
constructor(props) {
super(props);
@@ -103,6 +108,8 @@ class Script extends React.Component {
rankDir: "TB",
popperItems: [],
cytoscape: null,
+ showNotification: false,
+ notificationData: null,
};
cytoscape.use(dagre);
@@ -112,12 +119,45 @@ class Script extends React.Component {
cytoscape.use(navigator);
cytoscape.use(expandCollapse);
cytoscape.warnings(false);
+ this._keepAlive = this._keepAlive.bind(this);
this.renderCytoscapeElement = this.renderCytoscapeElement.bind(this);
this.handleRenderChange = this.handleRenderChange.bind(this);
this.handleValidateReport = this.handleValidateReport.bind(this);
this.handleErrorModal = this.handleErrorModal.bind(this);
}
+ componentWillMount() {
+ client.onopen = () => {
+ console.log("Open websocket");
+ client.send(this.state.file);
+ this._keepAlive(20000);
+ };
+ client.onmessage = (message) => {
+ const msg = `${message["data"]}. Page should be reloaded!`;
+ console.log(msg);
+ this.setState({
+ showNotification: true,
+ notificationData: msg,
+ });
+ };
+ }
+
+ //prevent session timeout
+ _keepAlive(timeout = 20000) {
+ if (client.readyState === client.OPEN) {
+ client.send("");
+ }
+ setTimeout(() => {
+ this._keepAlive(20000);
+ }, timeout);
+ }
+
+ componentWillUnmount() {
+ if (client.readyState === client.OPEN || client.readyState === client.CONNECTING) {
+ client.close();
+ }
+ }
+
componentDidMount() {
//consider validation as part of module
Rest.validateScript(this.state.file).then((validation) => {
@@ -594,6 +634,25 @@ class Script extends React.Component {
)}
+
+
+ {
+ this.setState({
+ showNotification: false,
+ });
+ }}
+ show={this.state.showNotification}
+ delay={5000}
+ autohide
+ >
+
+ Notification
+
+ {this.state.notificationData}
+
+
+