Add OSM_SERVER and OSMUI_SQL_DATABASE_URI to Dockerfile

[osm/LW-UI.git] / static / TopologyComposer / js / graph_editor.js

diff --git a/static/TopologyComposer/js/graph_editor.js b/static/TopologyComposer/js/graph_editor.js
index 4cc8663..2d9218b 100755 (executable)
--- a/static/TopologyComposer/js/graph_editor.js
+++ b/static/TopologyComposer/js/graph_editor.js
@@ -86,15 +86,17 @@ TCD3.GraphEditor = (function () {
 
         this.type_property_link = {
             "unrecognized": {
-                "color": "lightgray",
+                "color": "lightgray"
             },
         };
 
         this.force = d3.forceSimulation()
             .force("charge", d3.forceManyBody())
-            .force("collide", d3.forceCollide().radius(80))
+            .force("collide", d3.forceCollide().radius(40))
            // .force("link", d3.forceLink().distance(80).iterations(1).id(function (d) {
-            .force("link", d3.forceLink().distance(100).id(function (d) {
+            .force("link", d3.forceLink().distance(function(d){
+                return d.short ? 1 : 100;
+            }).id(function (d) {
                 return d.id;
             }))
             .force("center", d3.forceCenter(this.width / 2, this.height / 2));
@@ -108,8 +110,8 @@ TCD3.GraphEditor = (function () {
         this.svg = d3.select("#graph_editor_container").append("svg")
             .attr("id", "graph_svg")
             .attr("preserveAspectRatio", "xMinYMid")
-            .attr("width", this.width)
-            .attr("height", this.height);
+            .attr("width", '100%')
+            .attr("height", '100%');
 
         //End Arrow style
         this.defs = this.svg.append("svg:defs");
@@ -135,11 +137,11 @@ TCD3.GraphEditor = (function () {
                 //d3.event.preventDefault();
                 if (self.lastKeyDown !== -1) return;
                 self.lastKeyDown = d3.event.keyCode;
-                if (self.lastKeyDown === CANC_BUTTON && self._selected_node !== undefined) {
-                    self.removeNode(self._selected_node, null, showAlert);
-                } else if (self.lastKeyDown === CANC_BUTTON && self._selected_link !== undefined) {
-                    self.removeLink(self._selected_link, null, showAlert);
-                }
+                // if (self.lastKeyDown === CANC_BUTTON && self._selected_node !== undefined) {
+                //     self.removeNode(self._selected_node, null, showAlert);
+                // } else if (self.lastKeyDown === CANC_BUTTON && self._selected_link !== undefined) {
+                //     self.removeLink(self._selected_link, null, showAlert);
+                // }
 
             })
             .on('keyup', function () {
@@ -181,7 +183,7 @@ TCD3.GraphEditor = (function () {
             self.height = self.container.height();
             chart.attr("width", self.container.width());
             chart.attr("height", self.container.height());
-        }).trigger("resize");
+        });
 
     }
 
@@ -345,7 +347,7 @@ TCD3.GraphEditor = (function () {
      * @returns {boolean}
      */
     GraphEditor.prototype.addLink = function (link) {
-        console.log("addLink" + JSON.stringify(link));
+
         if (link.source && link.target) {
             this.force.stop();
             this.cleanAll();
@@ -394,12 +396,13 @@ TCD3.GraphEditor = (function () {
         //log(data)
         var self = this;
 
-        this.link = this.svg
+        var link = this.svg
             .selectAll()
             .data(self.d3_graph.links
                 .filter(this.link_filter_cb)
-            )
-            .enter().append("g")
+            );
+        link.exit().remove();
+         this.link = link.enter().append("g")
             .attr("class", "link cleanable")
             .append("path")
             .attr("class", "link")
@@ -416,24 +419,26 @@ TCD3.GraphEditor = (function () {
                 return (d.directed_edge ? "url(#" + marker_url + ")" : '');
             });
 
-        this.nodeContainer = this.svg
+        var nodeContainer = this.svg
             .selectAll()
             .data(self.d3_graph.nodes
-                .filter(this.node_filter_cb))
-            .enter()
+                .filter(this.node_filter_cb));
+        nodeContainer.exit().remove();
+        nodeContainer.enter()
             .append("g")
             // .attr("class", "nodosdads")
             .attr("class", "node cleanable");
 
-        this.svg.selectAll('.node')
+        var nodes_symbols = this.svg.selectAll('.node')
             .data(self.d3_graph.nodes
                 .filter(this.node_filter_cb))
 
             .filter(function (d) {
                 return (d.info.type === undefined) || (self._node_property_by_type(d.info.type, 'image', d) === undefined)
-            })
+            });
+            nodes_symbols.exit().remove();
 
-            .append("svg:path")
+            nodes_symbols.append("svg:path")
             .attr("d", d3.symbol()
                 .size(function (d) {
                     return Math.PI * Math.pow(self._node_property_by_type(d.info.type, 'size', d), 2) / 4;
@@ -469,7 +474,7 @@ TCD3.GraphEditor = (function () {
             .filter(function (d) {
                 return self._node_property_by_type(d.info.type, 'image', d) != undefined
             });
-
+            figure_node.exit().remove();
         figure_node.append("svg:image")
             .attr("xlink:href", function (d) {
                 return self._node_property_by_type(d.info.type, 'image', d)