Conversion backend change to REST API

installation_manual.md

@@ -1,16 +1,3 @@
-* Enable cgi module on Apache (https://code-maven.com/set-up-cgi-with-apache)
-* add skript sugarsketcher.cgi to /usr/lib/cgi-bin/ and make it executable (chmod +x ...)
-* reload apache configuration (service apache2 reload)
-* make skript GlycoCT2string.sh executable (chmod +x)
-* edit /usr/lib/cgi-bin/sugarsketcher.cgi and set correct path to GlycoCT2string.sh skript (SCRIPTPATH)
-* install cmake
-* create some temporary folder
-* create folder where to install obabel (/opt/obabel)
-* install Open Babel (using included skript installObabel.sh <path_to_temporary_folder> <installation_path>)
-* if you choosed another installation path, you must change every occurence in GlycoCT2string.sh skript
-* install marvin:
- - wget http://dl.chemaxon.com/marvin/18.25.0/marvin_linux_18.25.deb
- - sudo dpkg -i marvin_linux_18.25.deb
-* deploy js app (2 options)
+* deploy js app (2 options):
 a) edit menu.js (variable smilesinchiconvertbackendurl to correct backend url), build (gulp webpack) and copy js app files to designated location
-b) copy already buil js app files to designated location and edit menu.js (variable smilesinchiconvertbackendurl to correct backend url)
+b) copy already built js app files to designated location and edit menu.js (variable smilesinchiconvertbackendurl to correct backend url)

src/css/app.css

@@ -82,6 +82,26 @@ div.tooltip {
     margin-bottom:2em;
 }
 
+#loading{
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    background-color: rgba(204, 204, 204, 0.6);
+}
+
+#loading img{
+    left: 0;
+    right: 0;
+    margin: auto auto;
+    width: 100px;
+    top: 40vh;
+    display: block;
+    position: fixed;
+}
 #hiddenMsg {
     opacity:0;
 }

src/css/menu.css

@@ -9,6 +9,16 @@
     fill:white;
 }
 
+.labelSmall {
+    font-family: arial,helvetica,'sans-serif';
+    font-size: 16px;
+    text-anchor: middle;
+    alignment-baseline: text-before-edge;
+    dominant-baseline: text-before-edge;
+    stroke:white;
+    fill:white;
+}
+
 .labelMonoChoice, .helpLabel {
     stroke:black;
     fill:black;
@@ -225,4 +235,4 @@ textarea {
     width: 100px;
     margin-right:auto;
     margin-left:auto;
-}
+}

src/js/views/app.js

@@ -1,3 +1,9 @@
+function usedAsPlugin(){
+    return document.location.search.replace("?", "").toLowerCase().indexOf("plugin") >= 0 
+        && document.location.search.replace("?", "").toLowerCase().indexOf("plugin=false") == -1 
+        && document.location.search.replace("?", "").toLowerCase().indexOf("plugin=0") == -1;
+}
+
 var treeData = {};
 var shapes = {};
 var clickedNode = null;
@@ -7,7 +13,7 @@ var copiedNode = null;
 var rootDonorPosition, rootAcceptorPosition;
 
 const gap = 50; // Distance between two nodes
-const origin = [200, 600];
+const origin = [(usedAsPlugin())?70:200, 600];
 const circleRadius = 15; // Radius of a circle shape
 
 var ctrl; // Boolean if ctrl is held
@@ -170,15 +176,14 @@ function getSelectedNodeIndex(node)
     return -1;
 }
 
-
 var zoomListener = d3.behavior.zoom().scaleExtent([0.1, 3]).on("zoom", zoom);
 
 // Create the svgTree svg with fixed width and height
 var vis = d3.select('#viz')
     .append('svg')
     .attr('id', 'svgTree')
     .attr('width', 1000)
-    .attr('height', 550)
+    .attr('height', (usedAsPlugin())?200:550)
     .call(zoomListener) // Listener for the svg
     .append("svg:g").attr("transform", "translate(50, 20)");
 

src/js/views/eventManager.js

@@ -209,12 +209,13 @@ function manageHoverAddNode(menuItem,actions) {
     d3.select("#svgMenu").select("#addNode").remove(); // Remove the add Node rect
     d3.select("#repeatUnit").style("opacity", "0.2"); // Lower opacity of add Structure
     d3.select("#updateNode").style("opacity", "0.2"); // Lower opacity of update Node
+    d3.select("#help").style("opacity", "0.2"); // Lower opacity of update Node
 
     // Add Monosaccharide rect and label
     actions.append("rect")
         .attr("class", "bar choice")
         .attr("id", menuItem.subDivisions[1].division)
-        .attr("width", 1000/6) // Width is 1/6 of the total menu width
+        .attr("width", 1000/8) // Width is 1/6 of the total menu width
         .attr("height", 40) // Height is the same as the menu one
         .attr("x", x) // Place this rect at the same x as the addNode title
         .attr("rx", 15) // Corners for the rect
@@ -238,8 +239,8 @@ function manageHoverAddNode(menuItem,actions) {
     actions.append("rect")
         .attr("class", "bar choice")
         .attr("id", menuItem.subDivisions[0].division)
-        .attr("width", 1000/6).attr("height", 40)
-        .attr("x", 1000/6)
+        .attr("width", 1000/8).attr("height", 40)
+        .attr("x", 1000/8)
         .attr("rx", 15)
         .attr("ry", 15)
         .on("mouseout", function() {
@@ -1187,4 +1188,4 @@ function redrawProgress(prev, newValue = progress)
 {
     d3.select("#progressBar").transition()
     .styleTween("width", function() { return d3.interpolate(prev/7*1000, newValue/7*1000); });
-}
+}