diff --git a/package.json b/package.json
index 500a631..5e15db4 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,6 @@
"isomorphic-form-data": "^2.0.0",
"jsonwebtoken": "^8.5.1",
"jszip": "^3.7.1",
- "libcimsvg": "git+https://git.rwth-aachen.de/acs/public/cim/pintura-npm-package.git",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"moment-duration-format": "^2.3.2",
@@ -58,6 +57,9 @@
"typescript": "^4.5.5",
"xstate": "^4.29.0"
},
+ "optionalDependencies": {
+ "libcimsvg": "git+https://git.rwth-aachen.de/acs/public/cim/pintura-npm-package.git"
+ },
"devDependencies": {
"react-scripts": "^4.0.3"
},
diff --git a/src/widget/widget-toolbox.js b/src/widget/widget-toolbox.js
index 1c18613..3f8f7a6 100644
--- a/src/widget/widget-toolbox.js
+++ b/src/widget/widget-toolbox.js
@@ -23,6 +23,13 @@ import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
import Icon from "../common/icon";
import ToolboxItem from './toolbox-item';
+let hasPintura = true;
+try{
+ let cimsvg = require('libcimsvg')
+} catch (err) {
+ hasPintura = false;
+}
+
class WidgetToolbox extends React.Component {
constructor(props) {
super(props);
@@ -104,8 +111,8 @@ class WidgetToolbox extends React.Component {
height: '40px',
}
- const thereIsTopologyWidget = this.props.widgets != null && Object.values(this.props.widgets).filter(w => w.type === 'Topology').length > 0;
- const topologyItemMsg = thereIsTopologyWidget? 'Currently only one is supported' : '';
+ let disableTopologyWidget = this.props.widgets != null && Object.values(this.props.widgets).filter(w => w.type === 'Topology').length > 0;
+ let topologyItemMsg = disableTopologyWidget? 'Currently only one is supported' : '';
return (
@@ -170,7 +177,8 @@ class WidgetToolbox extends React.Component {
-
+ {hasPintura ? : <>>}
+
Drag and drop widgets onto the dashboard } >
diff --git a/src/widget/widgets/topology.js b/src/widget/widgets/topology.js
index d87cca0..b2a51dc 100644
--- a/src/widget/widgets/topology.js
+++ b/src/widget/widgets/topology.js
@@ -18,7 +18,6 @@
import React from 'react';
import { UncontrolledReactSVGPanZoom } from 'react-svg-pan-zoom';
import '../../styles/simple-spinner.css';
-import { cimsvg } from 'libcimsvg';
import AppDispatcher from "../../common/app-dispatcher";
// Do not show Pintura's grid
@@ -153,23 +152,30 @@ class WidgetTopology extends React.Component {
componentDidUpdate(prevProps: Readonly, prevState: Readonly, snapshot: SS): void {
if(this.state.dashboardState === 'ready'){
- // Topology file incl data downloaded, init SVG (should happen only once!)
- if (this.svgElem) {
- let cimsvgInstance = new cimsvg(this.svgElem.current);
- cimsvg.setCimsvg(cimsvgInstance);
- cimsvgInstance.setFileCount(1);
- // transform data blob into string format
- this.state.file.data.text().then(function(content) {
- cimsvgInstance.loadFile(content);
- cimsvgInstance.fit();
- attachComponentEvents();
- });
- this.setState({dashboardState: 'loaded'});
+ try{
+ // Topology file incl data downloaded, init SVG (should happen only once!)
+ if (this.svgElem) {
+ let cimsvg = require('libcimsvg');
+ let cimsvgInstance = new cimsvg(this.svgElem.current);
+ cimsvg.setCimsvg(cimsvgInstance);
+ cimsvgInstance.setFileCount(1);
+ // transform data blob into string format
+ this.state.file.data.text().then(function (content) {
+ cimsvgInstance.loadFile(content);
+ cimsvgInstance.fit();
+ attachComponentEvents();
+ });
+ this.setState({dashboardState: 'loaded'});
+ } else {
+ console.error("The svgElem variable is not initialized before the attempt to create the cimsvg instance.");
+ }
+ }catch(err) {
+ this.setState(
+ {
+ dashboardState: 'show_message',
+ message: 'The topology widget is not supported in this instance of VILLASweb. Contact an administrator for more details.'
+ });
}
- else {
- console.error("The svgElem variable is not initialized before the attempt to create the cimsvg instance.");
- }
-
}
}