Minor UI fixes for dialogues and Tosca upload feature

[clamp.git] / ui-react / src / components / loop_viewer / svg / LoopSvg.js

diff --git a/ui-react/src/components/loop_viewer/svg/LoopSvg.js b/ui-react/src/components/loop_viewer/svg/LoopSvg.js
index 2858ccd..048f630 100644 (file)
--- a/ui-react/src/components/loop_viewer/svg/LoopSvg.js
+++ b/ui-react/src/components/loop_viewer/svg/LoopSvg.js
@@ -22,34 +22,45 @@
  */
 import React from 'react';
 import styled from 'styled-components';
-import { withRouter } from "react-router";
-import LoopCache from '../../../api/LoopCache'
-import LoopService from '../../../api/LoopService'
+import LoopCache from '../../../api/LoopCache';
+import { withRouter } from "react-router-dom";
+import LoopService from '../../../api/LoopService';
+import LoopComponentConverter from './LoopComponentConverter';
 
-const LoopViewSvgDivStyled = styled.div`
-       overflow: hidden;
+const LoopViewSvgDivStyled = styled.svg`
+       display: flex;
+       flex-direction: row;
+       overflow-x: scroll;
        background-color: ${props => (props.theme.loopViewerBackgroundColor)};
        border: 1px solid;
        border-color: ${props => (props.theme.loopViewerHeaderColor)};
-       height: 50%;
+       margin-top: 1em;
+       margin-left: auto;
+       margin-right:auto;
+       margin-bottom: -3em;
+       align-items: center;
+       height: 100%;
+       width: 100%;
+
 `
 
 class LoopViewSvg extends React.Component {
 
        static emptySvg = "<svg><text x=\"20\" y=\"40\">No LOOP (SVG)</text></svg>";
-       static operationalPolicyDataElementId = "OperationalPolicy";
-
 
        state = {
                svgContent: LoopViewSvg.emptySvg,
-               loopCache: this.props.loopCache,
+               loopCache: new LoopCache({}),
+               componentModalMapping: new Map([])
        }
 
        constructor(props) {
                super(props);
-               this.state.loopCache = props.loopCache;
                this.handleSvgClick = this.handleSvgClick.bind(this);
                this.getSvg = this.getSvg.bind(this);
+               this.state.loopCache = props.loopCache;
+               this.state.componentModalMapping = LoopComponentConverter.buildMapOfComponents(props.loopCache);
+               this.getSvg(props.loopCache.getLoopName());
        }
 
        shouldComponentUpdate(nextProps, nextState) {
@@ -57,44 +68,43 @@ class LoopViewSvg extends React.Component {
        }
 
        componentWillReceiveProps(newProps) {
-               this.state.loopCache = newProps.loopCache;
-               this.getSvg();
-       }
-
-       componentDidMount() {
-               this.getSvg();
+               if (this.state.loopCache !== newProps.loopCache) {
+                       this.setState({
+                               loopCache: newProps.loopCache,
+                               componentModalMapping: LoopComponentConverter.buildMapOfComponents(newProps.loopCache)
+                       });
+                       this.getSvg(newProps.loopCache.getLoopName());
+               }
        }
 
-       getSvg() {
-               LoopService.getSvg(this.state.loopCache.getLoopName()).then(svgXml => {
-                       if (svgXml.length != 0) {
-                               this.setState({ svgContent: svgXml })
-                       } else {
-                               this.setState({ svgContent: LoopViewSvg.emptySvg })
-                       }
-               });
+       getSvg(loopName) {
+               if (typeof loopName !== "undefined") {
+                       LoopService.getSvg(loopName).then(svgXml => {
+                               if (svgXml.length !== 0) {
+                                       this.setState({ svgContent: svgXml })
+                               } else {
+                                       this.setState({ svgContent: LoopViewSvg.emptySvg })
+                               }
+                       });
+               } else {
+                       this.setState({ svgContent: LoopViewSvg.emptySvg })
+               }
        }
 
        handleSvgClick(event) {
                console.debug("svg click event received");
                var elementName = event.target.parentNode.parentNode.parentNode.getAttribute('data-element-id');
                console.info("SVG element clicked", elementName);
-               if (typeof elementName === "undefined" || elementName === "VES") {
-                       return;
-               } else if (elementName === LoopViewSvg.operationalPolicyDataElementId) {
-                       this.props.history.push('/operationalPolicyModal');
-               } else {
-                       this.props.history.push('/configurationPolicyModal');
-               }
+               this.props.history.push(this.state.componentModalMapping.get(elementName));
        }
 
        render() {
                return (
-                       <LoopViewSvgDivStyled id="loop_svg" dangerouslySetInnerHTML={{ __html: this.state.svgContent }} onClick={this.handleSvgClick}>
+                       <LoopViewSvgDivStyled dangerouslySetInnerHTML={{ __html: this.state.svgContent }} onClick={this.handleSvgClick}>
 
                        </LoopViewSvgDivStyled>
                );
        }
 }
 
-export default withRouter(LoopViewSvg);
\ No newline at end of file
+export default withRouter(LoopViewSvg);