From a40d138165ccf8551c91d4ea7640ee6fe4211c33 Mon Sep 17 00:00:00 2001
From: Sonja Happ <sonja.happ@eonerc.rwth-aachen.de>
Date: Fri, 8 Apr 2022 17:30:32 +0200
Subject: [PATCH] make pintura npm package an optional dependency, WIP #379

---
 package.json                   |  4 +++-
 src/widget/widget-toolbox.js   | 14 +++++++++---
 src/widget/widgets/topology.js | 40 +++++++++++++++++++---------------
 3 files changed, 37 insertions(+), 21 deletions(-)

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 {
       <ToolboxItem name='Value' type='widget' icon = 'plus' />
       <ToolboxItem name='Lamp' type='widget' icon = 'plus' />
       <ToolboxItem name='Gauge' type='widget' icon = 'plus'/>
-      <ToolboxItem name='Topology' type='widget' disabled={thereIsTopologyWidget} title={topologyItemMsg} icon = 'plus'/>
+      {hasPintura ? <ToolboxItem name='Topology' type='widget' disabled={disableTopologyWidget} title={topologyItemMsg} icon = 'plus'/> : <></>}
+
       <ToolboxItem name='TimeOffset' type='widget' icon = 'plus' />
       <ToolboxItem name='ICstatus' type='widget' icon = 'plus' />
       <OverlayTrigger key={0} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"?"}`}> Drag and drop widgets onto the dashboard </Tooltip>} >
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<P>, prevState: Readonly<S>, 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.");
-      }
-
     }
   }