From 76c7b5fb10e0763a4a575e03885dcdef7a5aab46 Mon Sep 17 00:00:00 2001 From: Sami Mokaddem Date: Thu, 23 Aug 2018 09:49:57 +0000 Subject: [PATCH] array nodes are represented as rectangle + do nothing on invalid node click --- static/js/treeFromJson.js | 106 ++++++++++++++++++++++++++++---------- 1 file changed, 78 insertions(+), 28 deletions(-) diff --git a/static/js/treeFromJson.js b/static/js/treeFromJson.js index 15f11df..7715cce 100644 --- a/static/js/treeFromJson.js +++ b/static/js/treeFromJson.js @@ -140,13 +140,28 @@ nodeEnter.attr("class", "node nodeNoInteraction"); } - nodeEnter.filter(function(d) { - return d.additionalNode === undefined || !d.additionalNode; - }) + var nodeEnterNotArray = nodeEnter.filter(function(d) { + var not_add = d.additionalNode === undefined || !d.additionalNode; + var not_arr = d.children === undefined || d.children[0].linkname === undefined; + return not_add && not_arr; + }); + nodeEnterNotArray .append("circle") .attr("r", 1e-6) .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); + var nodeEnterArray = nodeEnter.filter(function(d) { + var not_add = d.additionalNode === undefined || !d.additionalNode; + var is_arr = d.children !== undefined && d.children[0].linkname !== undefined; + return not_add && is_arr; + }); + nodeEnterArray + .append("rect") + .attr("width", 0) + .attr("height", 0) + .attr("y", 0) + .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); + nodeEnter.append("text") .attr("x", function(d) { return d.children || d._children ? -13 : 13; }) .attr("dy", ".35em") @@ -164,6 +179,11 @@ .attr("r", 10) .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); + nodeUpdate.select("rect") + .attr("width", 20) + .attr("height", 20) + .attr("y", -10) + nodeUpdate.select("text") .style("fill-opacity", 1); @@ -176,6 +196,11 @@ nodeExit.select("circle") .attr("r", 1e-6); + nodeExit.select("rect") + .attr("width", 0) + .attr("height", 0) + .attr("y", 0) + nodeExit.select("text") .style("fill-opacity", 1e-6); @@ -322,9 +347,10 @@ this.reset_selected(); // select all nodes matching the clicked element - var res; + var resCircle; + var resRect; if (clicked.data()[0].children === undefined) { // is leaf - res = d3.selectAll(".node circle") + resCircle = that.svg.selectAll(".node circle") .filter(function(d) { if (d.depth == 0) { return false; @@ -335,44 +361,66 @@ return c1 && c2; }); } else { - // check if children is leaf + // check if children are leaf var child = clicked.data()[0].children[0]; - if (that.isObject(child) || Array.isArray(child)) { + if (that.isObject(child) || Array.isArray(child)) { // children are not leaves // First child is not a node, should highlight the label instead // --> simulate label click let source = clicked.data()[0]; - let target = clicked.data()[0].children[0]; - var resL = this.svg.selectAll("path.link").filter(function(d) { - return d.source.id == source.id && d.target.id == target.id; - }); - that.clickLabel(resL.data()[0]); + let target = child; + if (target.linkname !== undefined && target.linkname !== '') { + var resL = this.svg.selectAll("path.link").filter(function(d) { + return d.source.id == source.id && d.target.id == target.id; + }); + that.clickLabel(resL.data()[0]); + } return; - } else { - res = d3.selectAll(".node circle") + } else { // children are leaves + resCircle = that.svg.selectAll(".node circle") + .filter(function(d) { + return d.parent !== null && d.parent.id == clicked.data()[0].id; + }); + resRect = that.svg.selectAll(".node rect") .filter(function(d) { return d.parent !== null && d.parent.id == clicked.data()[0].id; }); } } - res.data().forEach(function(elem) { - if (elem.picked !== undefined && elem.picked != '') { - // alert || repick conflicting ???? - console.log('Possible collision with '+elem.picked); - //alert('Possible collision with '+elem.picked); - } - elem.picked = that.currentPicking; - }); + var nodesData = []; + if(resCircle !== undefined) { + resCircle.data().forEach(function(elem) { + if (elem.picked !== undefined && elem.picked != '') { + // alert || repick conflicting ???? + console.log('Possible collision with '+elem.picked); + //alert('Possible collision with '+elem.picked); + } + elem.picked = that.currentPicking; + nodesData.push(elem); + }); - res.style('fill', itemColor) - .style('fill-opacity', 1.0); + resCircle.style('fill', itemColor) + .style('fill-opacity', 1.0); + } + if(resRect !== undefined) { + resRect.data().forEach(function(elem) { + if (elem.picked !== undefined && elem.picked != '') { + // alert || repick conflicting ???? + console.log('Possible collision with '+elem.picked); + //alert('Possible collision with '+elem.picked); + } + elem.picked = that.currentPicking; + nodesData.push(elem); + }); + + resRect.style('fill', itemColor) + .style('fill-opacity', 1.0); + + } // find all paths var paths = []; - var nodes = d3.selectAll(".node circle").filter( - function(d) { return d.picked == that.currentPicking;} - ); - nodes.data().forEach(function(d, i) { + nodesData.forEach(function(d, i) { paths[i] = that.find_full_path(d, []); }); var instructions = this.compute_mapping_instructions(paths); @@ -682,12 +730,14 @@ ); var x = nodes.data()[0].name; funXInput.text('"'+that.adjust_text_length(x)+'"'); + funXInput[0].innerHTML = '"'+that.adjust_text_length(x)+'"'; funXOuput[0].innerHTML = that.adjust_text_length('"'+f(x)+'"'); } catch(err) { // Error if (err.name == 'SyntaxError') { flag_continue = false; funXOuput[0].innerHTML = $(''+err.name+'')[0].outerHTML; } else if (err.name == 'TypeError') { + funXInput[0].innerHTML = $(''+'Not picked yet'+'')[0].outerHTML; var html = $(''); html.append($(''+'Not picked yet'+'')); html.append($(''+err.name+''));