Skip to content

Commit

Permalink
Merge pull request #33 from PerCollECT/28-expandcollapse-the-whole-tree
Browse files Browse the repository at this point in the history
28 expandcollapse the whole tree
  • Loading branch information
ChristophPopp authored Jan 4, 2024

Unverified

This commit is not signed, but one or more authors requires that any commit attributed to them is signed.
2 parents a86c497 + 1511c29 commit 4be8ec2
Showing 4 changed files with 140 additions and 11 deletions.
1 change: 1 addition & 0 deletions content.js
Original file line number Diff line number Diff line change
@@ -33,6 +33,7 @@ if (isIE()) {

// manage page content
addLegend();
addExpandAndCollapseTreeButtons();
addInfoBoxResizeBar();
addSideNavLinks();
addAutoComplete(document.getElementById("search_input"));
68 changes: 59 additions & 9 deletions dag.js
Original file line number Diff line number Diff line change
@@ -77,6 +77,14 @@ function initGraph() {
}
updateShownNodeMap(treeData);
drawTree(currentTree,"init");
if(zoomTransform === undefined)
{
zoomTransform = d3.zoomIdentity
}
zoomTransform.k = 2.2;
zoomTransform.x = -2000;
zoomTransform.y = 2000;
graph.attr('transform', zoomTransform);
}

/**
@@ -275,7 +283,13 @@ function drawTree(drawData,state)
// keepTopLayersNodesUp();
svgSelection = d3.select("svg");
svgSelection.selectAll('*').remove();
svgSelection.attr("viewBox", [0, 0, 11000, 10000].join(" "));
if(state === "expand tree")
{
svgSelection.attr("viewBox", [0, 0, width, (window.innerHeight)*sizeFactor].join(" "));
}
else{
svgSelection.attr("viewBox", [0, 0, 11000, 10000].join(" "));
}
svgSelection.call(zoom);
graph = svgSelection.append("g");

@@ -699,11 +713,11 @@ function updateTreeGraph(drawData,currentNodeId)
{
generateTreeLayout(drawData);
layout(dag);
let highlight = false;
if(currentHighlightedNodeId === currentNodeId)
{
highlight = true;
}
// let highlight = false;
// if(currentHighlightedNodeId === currentNodeId)
// {
// highlight = true;
// }
// keepTopLayersNodesUp();

// Select nodes
@@ -725,10 +739,10 @@ function updateTreeGraph(drawData,currentNodeId)
{
drawTree(drawData,"update");
graph.attr('transform', zoomTransform);
if(highlight)
{
// if(highlight)
// {
updateGraphPlot(currentNodeId);
}
// }
}
});
}
@@ -797,4 +811,40 @@ function keepTopLayersNodesUp()
node.points[0].y = rootsNodesCoord[node.source.data.id][1];
}
})
}

function expandTree()
{
currentTree = structuredClone(treeData);
for(let i = 0;i<currentTree.length;++i)
{
shownNodesMap[currentTree[i]["id"]] = 1;
}
updateShownNodeMap(currentTree);
if(zoomTransform !== undefined)
{
zoomTransform.k = 1;
zoomTransform.x = 0;
zoomTransform.y = 0;
}
drawTree(currentTree,"expand tree");
graph.attr('transform', zoomTransform);

}

function collapseTree()
{
currentTree = [];
shownNodesMap = {};
leavesNodesIds = [];
rootsNodesIds = [];
rootsNodesCoord = {};
initGraph();
// if(zoomTransform !== undefined)
// {
// zoomTransform.k = 3;
// zoomTransform.x = 0;
// zoomTransform.y = 0;
// graph.attr('transform', zoomTransform);
// }
}
31 changes: 31 additions & 0 deletions helper.js
Original file line number Diff line number Diff line change
@@ -407,3 +407,34 @@ function addInfoBoxResizeBar()
}
}

function addExpandAndCollapseTreeButtons()
{

const buttonsContainer = document.createElement('div');
buttonsContainer.classList.add('tree_buttons_container');

const expandButton = document.createElement('div');
expandButton.classList.add('tree_btn');
expandButton.id = "expand_tree_btn";
let expandText = document.createTextNode('Expand Tree');
expandButton.appendChild(expandText);
expandButton.addEventListener('click',function(){
expandTree();
});

const collapseButton = document.createElement('div');
collapseButton.classList.add('tree_btn');
collapseButton.id = "collapse_tree_btn";
let collapseText = document.createTextNode('Collapse Tree');
collapseButton.appendChild(collapseText);
collapseButton.addEventListener('click',function(){
collapseTree();
});
buttonsContainer.appendChild(expandButton);
buttonsContainer.appendChild(collapseButton);

const content = document.getElementsByClassName('content');
const infoBox = document.getElementById('info_box');

content[0].insertBefore(buttonsContainer,infoBox);
}
51 changes: 49 additions & 2 deletions style.css
Original file line number Diff line number Diff line change
@@ -265,14 +265,16 @@ body {
.content .legend {
width: auto;
height: auto;
padding-top: 20px;
padding-bottom: 20px;
margin-top: 20px;
/*margin-top: 20px;*/
margin-left: var(--legend-margin-lr);
margin-right: var(--legend-margin-lr);
/*margin-right: var(--legend-margin-lr);*/
position:fixed;
top:0;
right:0;
user-select: none;
background-color: white;
}

.legend .circle {
@@ -296,6 +298,50 @@ body {
line-height: 20px;
float:left;
}

/* expand/collapse tree */
.content .tree_buttons_container{
position:fixed;
top:60px;
right:20px;
}

.content #expand_tree_btn{
background-color: green;
}

.content #collapse_tree_btn{
background-color: firebrick;
}

.content .tree_btn{
width: 100px;
height: 40px;
margin-bottom: 10px;
text-align: center;
line-height: 35px;
font-size: 14px;
font-weight:bold;
color: #fff;
border-radius: 10px;
border:2px solid var(--main-color);
cursor: pointer;
}

/*.content .tree_btn{*/
/* width: 100px;*/
/* height: 40px;*/
/* text-align: center;*/
/* line-height: 35px;*/
/* font-size: 14px;*/
/* font-weight:bold;*/
/* color: #fff;*/
/* border-radius: 10px;*/
/* border:2px solid var(--main-color);*/
/* cursor: pointer;*/
/*}*/


/* infobox */
.content .info_box_container {
resize: vertical;
@@ -338,6 +384,7 @@ body {
color: var(--main-color-sec);
display: block;
font-weight: bold;
user-select: none;
}

.content #info_box .info a {

0 comments on commit 4be8ec2

Please sign in to comment.