diff --git a/content.js b/content.js
index 2a92518..52f6239 100644
--- a/content.js
+++ b/content.js
@@ -31,5 +31,8 @@ if (isIE()) {
 
   // manage page content
   addLegend();
+  addExpandAndCollapseTreeButtons();
+  addInfoBoxResizeBar();
   addSideNavLinks();
-  addAutoComplete(document.getElementById("search_input"));
\ No newline at end of file
+  addAutoComplete(document.getElementById("search_input"));
+  addTreesLinks()
\ No newline at end of file
diff --git a/dag.js b/dag.js
index 0836142..d52f9f4 100644
--- a/dag.js
+++ b/dag.js
@@ -1,4 +1,4 @@
-let scale;
+let treeData;
 let svgSelection;
 let defs;
 let layout;
@@ -6,16 +6,27 @@ let dag;
 let nodes;
 let graph;
 let width = 600, height = 400;
+let viewboxWidth = 11000, viewboxHeight = 10000;
 let maxTextLength = 200;
 let nodeWidth = maxTextLength + 20;
 let nodeHeight = 140;
+let shownNodesMap = {};
+let nodeChildrenStateMap = {};
+let nodeParentsStateMap = {};
+let leavesNodesIds = [];
+let rootsNodesIds = [];
+let rootsNodesCoord = {};
+let currentTree = [];
+let zoomTransform;
+let currentHighlightedNodeId;
 
 // Define the zoom function for the zoomable tree
 var zoom = d3.zoom()
-      .scaleExtent([1, 10])
+      .scaleExtent([1, 20])
       .on('zoom', function(event) {
         graph
             .attr('transform', event.transform);
+        zoomTransform = event.transform;
 });
 
 // How to draw edges
@@ -25,103 +36,56 @@ const line = d3
 .x((d) => d.x + nodeWidth/2)
 .y((d) => d.y + nodeHeight/2);
 
-
+/**
+ * Initialize tree with the two top layers nodes
+ */
 function initGraph() {
     // fetch data and render
-    data = JSON.parse(getDataFromSessionStorage(repoName + "Tree"));
-    dag = d3.dagStratify()(data);
-    layout = d3
-      .sugiyama() // base layout
-      .decross(d3.decrossTwoLayer().order(d3.twolayerAgg())) // minimize number of crossings
-      .nodeSize((node) => [(node ? 3.6 : 0.25) * nodeWidth, 2 * nodeWidth]); // set node size instead of constraining to fit
-    const { width, height } = layout(dag);
-    let sizeFactor = width/window.innerWidth
-    // --------------------------------
-    // This code only handles rendering
-    // --------------------------------
-    svgSelection = d3.select("svg");
-    svgSelection.attr("viewBox", [0, 0, width, (window.innerHeight)*sizeFactor].join(" "));
-    svgSelection.call(zoom);
-    graph = svgSelection.append("g");
-    
-    defs = graph.append("defs"); // For gradients 
-    
-    // Plot edges
-    graph
-      .append("g")
-      .selectAll("path")
-      .data(dag.links())
-      .enter()
-      .append("path")
-      .attr("d", ({ points }) => line(points))
-      .attr("fill", "none")
-      .attr("stroke-width", 3)
-      .style("stroke", "#222222");
-  
-    // Select nodes
-    nodes = graph
-      .append("g")
-      .selectAll("g")
-      .data(dag.descendants())
-      .enter()
-      .append("g")
-      .attr("class", "node")
-      .attr("transform", ({ x, y }) => `translate(${x}, ${y})`);
-  
-    // Plot nodes
-    nodes
-      .append("rect")
-      .attr("width", nodeWidth)
-      .attr("height", nodeHeight)
-      .attr("rx", function (d) {
-        switch (d.data.nodeType) {
-          case "designParameter":
-            return 40;
-          case "systemIndependent":
-            return 40;
-          default:
-            return 2;
-        }
-      })
-      .attr("stroke-width", 1.5)
-      .style("fill", function (d) {
-        switch (d.data.nodeType) {
-          case "designParameter":
-            return "#b4acd2";
-          case "systemIndependent":
-            return "#ace3b5";
-          default:
-            return "#f4f4f9";
-        }
-      })
-      .on("click", onNodeClicked);
-  
-    // Add text to nodes
-    nodes
-      .append("text")
-      .attr("y", nodeHeight / 2)
-      .attr("x", 13)
-      .attr("dy", ".35em")
-      .text((d) => d.data.title)
-      .call(wrapNodeText, maxTextLength)
-      .on("click", onNodeClicked);
-    
-    // Add information icon
-    nodes.append("circle")
-      .attr("class", "iButton")
-      .attr("cx", nodeWidth-20)
-      .attr("cy", 20)
-      .attr("r", 15)
-      .on("mouseover", function () { d3.select(this).attr("r", 20); })
-      .on("mouseout", function () { d3.select(this).attr("r", 15); })
-      .on("click", onNodeInfoClicked);
-
-    nodes.append("text")
-      .attr("class", "iText")
-      .attr("y", 26.5)
-      .attr("x", nodeWidth - 20 - (5 / 2))
-      .html("i");
-  };
+    treeData = JSON.parse(getDataFromSessionStorage(repoName + "Tree"));
+    let data = structuredClone(treeData); // A clone is made to avoid any modifications in the original data
+    for(let i=0;i<data.length;i++)
+    {
+        // Expand the nodes with no parents and initialize shownNodesMap with the shown nodes in the tree
+        // and nodeChildrenStateMap with the state of the node children(expanded or collapsed)
+        if(data[i]["parentIds"].length === 0)
+        {
+            shownNodesMap[data[i]["id"]] = 1;
+            currentTree.push(data[i]);
+            nodeChildrenExpand(data[i]["id"],data)
+            rootsNodesIds.push(data[i]["id"]);
+            rootsNodesCoord[data[i]["id"]] = [];
+        }
+        else{
+            if(shownNodesMap[data[i]["id"]] !== 1)
+            {
+                shownNodesMap[data[i]["id"]] = 0;
+            }
+        }
+        // Get nodes with no children to draw them without children expand/collapse button
+        if(getNodeChildren(data[i]["id"],data).length === 0)
+        {
+            leavesNodesIds.push(data[i]["id"])
+        }
+    }
+    // Remove hidden parents of the nodes in the currentTree
+    for (let i = 0; i < currentTree.length; i++)
+    {
+        if(shownNodesMap[currentTree[i]["id"]] === 1)
+        {
+            removeHiddenParents(currentTree[i]["parentIds"]);
+        }
+    }
+    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);
+}
 
 /**
  * Interface to parse all data starting at
@@ -133,9 +97,9 @@ function initGraph() {
   let jsonRootFullPath = (window.location.href.includes("localhost") || window.location.href.includes("127.0.")) ?
   `./${jsonDataFile}` : `${host}${dataDict}${jsonDataFile}`;
 
-  var rawFile = new XMLHttpRequest();
+  let rawFile = new XMLHttpRequest();
   rawFile.open("GET", jsonRootFullPath, false);
-  var allText;
+  let allText;
   rawFile.onreadystatechange = function ()
   {
       if(rawFile.readyState === 4)
@@ -147,12 +111,9 @@ function initGraph() {
       }
   }
   rawFile.send(null);
-  data = JSON.parse(allText);
-
-  return data;
+  return JSON.parse(allText);
  }
 
-
  /**
   * Performs action after the info label is clicked
   * @param {Object} d clicked info
@@ -162,20 +123,19 @@ function initGraph() {
     let node = getNodeByTitle(d.currentTarget.__data__.data.title);
     $("#info_box").empty();
     addNodeInfos(node, "preview");
-    document.getElementById("preview").scrollIntoView({ behavior: 'smooth' });
     updateGraphPlot(currentNodeId);
  }
 
 /**
- * Performs action after the a node is clicked
+ * Performs action after a node is clicked
  * @param {Object} d clicked info
  */
  function onNodeClicked(d) {
-  let currentNodeId = d.currentTarget.__data__.data.id;
-  let node = getNodeByTitle(d.currentTarget.__data__.data.title);
-  $("#info_box").empty();
-  addNodeInfos(node, "preview");
-  updateGraphPlot(currentNodeId);
+   let currentNodeId = d.currentTarget.__data__.data.id;
+   let node = getNodeByTitle(d.currentTarget.__data__.data.title);
+   $("#info_box").empty();
+   addNodeInfos(node, "preview");
+   updateGraphPlot(currentNodeId);
 }
 
 /**
@@ -215,15 +175,14 @@ function initGraph() {
                   .text(word);
           }
       }
-      // set new box height
   });
 }
-
 /**
  * Performs graph update. Updates nodes and links.
- * @param {Number} currentNodeId
+ * @param {String} currentNodeId
  */
  function updateGraphPlot(currentNodeId) {
+  currentHighlightedNodeId = currentNodeId;
   graphs = graph.selectAll("path");
   paths = graphs._groups[0];
   paths.forEach(function (d) {
@@ -242,4 +201,678 @@ function initGraph() {
         d.setAttribute("style", "stroke: rgb(34, 34, 34); transition: 0.5s");
       }
   });
+}
+/**
+ * Toggle between expanding and collapsing node children
+ * @param {Object} d clicked node
+ * @param {String} command identify which action should be executed
+ */
+function onNodeChildrenToggle(d,command){
+    let currentNodeId = d.data.id;
+    let state;
+    if(command === "collapse")
+    {
+        state = "children collapse";
+        nodeChildrenStateMap[currentNodeId] = 0;
+    }
+    else
+    {
+        state = "children expand";
+        nodeChildrenStateMap[currentNodeId] = 1;
+    }
+    updateTree(currentNodeId,state);
+}
+
+function onNodeParentsToggle(d)
+{
+    let currentNodeId = d.currentTarget.__data__.data.id;
+    let state = "parents expand";
+    updateTree(currentNodeId,state);
+}
+/**
+ * update currentTree after expand/collapse of a node
+ * @param {String} currentNodeId node ID
+ * @param {String} state node to be expanded or collapsed
+ */
+function updateTree(currentNodeId,state){
+    let data = structuredClone(treeData); // A clone is made to avoid any modifications in the original data
+    if(state === "children expand")
+    {
+        nodeChildrenExpand(currentNodeId,data);
+    }
+    else if(state === "children collapse")
+    {
+        nodeChildrenCollapse(currentNodeId);
+    }
+    else if (state === "parents expand")
+    {
+        nodeParentsExpand(currentNodeId,data);
+    }
+    for (let i = 0; i < currentTree.length; i++)
+    {
+        if(shownNodesMap[currentTree[i]["id"]] === 1)
+        {
+            removeHiddenParents(currentTree[i]["parentIds"]);
+        }
+    }
+    updateShownNodeMap(treeData)
+    highlightSelectedNode(currentNodeId);
+    updateTreeGraph(currentTree,currentNodeId, state);
+}
+
+/**
+ * draw the tree elements
+ * @param {Array} drawData current tree data
+ * @param {String} state initialize or update the tree
+ */
+function drawTree(drawData,state)
+{
+    generateTreeLayout(drawData);
+    const { width, height } = layout(dag);
+    let sizeFactor = width/window.innerWidth
+    currentHighlightedNodeId = "-1";
+
+    // --------------------------------
+    // This code only handles rendering
+    // --------------------------------
+    svgSelection = d3.select("svg");
+    svgSelection.selectAll('*').remove();
+    if(state === "expand tree")
+    {
+        svgSelection.attr("viewBox", [0, 0, width, (window.innerHeight)*sizeFactor].join(" "));
+    }
+    else{
+        svgSelection.attr("viewBox", [0, 0, viewboxWidth, viewboxHeight].join(" "));
+    }
+    svgSelection.call(zoom);
+    graph = svgSelection.append("g");
+
+    defs = graph.append("defs"); // For gradients
+    // Plot edges
+    graph
+        .append("g")
+        .attr("class", "paths-list")
+        .selectAll("path")
+        .data(dag.links())
+        .enter()
+        .append("path")
+        .attr("d", ({ points }) => line(points))
+        .attr("fill", "none")
+        .attr("stroke-width", 3)
+        .style("stroke", "#222222");
+
+    // Select nodes
+    nodes = graph
+        .append("g")
+        .attr("class", "nodes-list")
+        .selectAll("g")
+        .data(dag.descendants())
+        .enter()
+        .append("g")
+        .attr("class", "node")
+        .attr("transform", ({x,y}) => `translate(${x}, ${y})`);
+    // Plot nodes
+    nodes
+        .append("rect")
+        .attr("width", nodeWidth)
+        .attr("height", nodeHeight)
+        .attr("rx", function (d) {
+            switch (d.data.nodeType) {
+                case "designParameter":
+                    return 40;
+                case "systemIndependent":
+                    return 40;
+                default:
+                    return 2;
+            }
+        })
+        .attr("stroke-width", 1.5)
+        .style("fill", function (d) {
+            switch (d.data.nodeType) {
+                case "designParameter":
+                    return "#b4acd2";
+                case "systemIndependent":
+                    return "#ace3b5";
+                default:
+                    return "#f4f4f9";
+            }
+        })
+        .on("click", onNodeClicked);
+
+    // Add text to nodes
+    nodes
+        .append("text")
+        .attr("y", nodeHeight / 2)
+        .attr("x", 13)
+        .attr("dy", ".35em")
+        .text((d) => d.data.title)
+        .call(wrapNodeText, maxTextLength)
+        .on("click", onNodeClicked);
+
+    // Add information icon
+    nodes.append("circle")
+        .attr("class", "iButton")
+        .attr("cx", nodeWidth-20)
+        .attr("cy", 20)
+        .attr("r", 15)
+        .on("mouseover", function () { d3.select(this).attr("r", 20); })
+        .on("mouseout", function () { d3.select(this).attr("r", 15); })
+        .on("click", onNodeInfoClicked);
+
+    nodes.append("text")
+        .attr("class", "iText")
+        .attr("y", 26.5)
+        .attr("x", nodeWidth - 20 - (5 / 2))
+        .html("i");
+
+    // Filter nodes with no parent to add parents expand/collapse button
+    let rootsNodes = nodes.filter(function(node){
+        return !nodeParentsStateMap[node.data.id];
+    })
+
+    rootsNodes.append("circle")
+        .attr("cx", nodeWidth/2)
+        .attr("cy", 0)
+        .attr("r", 12)
+        .on("mouseover", function () { d3.select(this).attr("r", 15); })
+        .on("mouseout", function () { d3.select(this).attr("r", 12); })
+        .on("click", onNodeParentsToggle);
+
+    rootsNodes.append("text")
+        .attr("class", "iText")
+        .attr("x", nodeWidth/2 - 7)
+        .attr("y",8.5)
+        .html("+")
+
+    // Filter nodes with no children to add expand/collapse button
+    let leavesNodes = nodes.filter(function(node){
+        return !leavesNodesIds.includes(node.data.id);
+    })
+    leavesNodes.append("rect")
+        .attr("width", 50)
+        .attr("height", 20)
+        .attr("x", nodeWidth/2- 25)
+        .attr("y", nodeHeight - 10)
+        .attr("fill",function (d) {
+            switch (nodeChildrenStateMap[d.data.id]) {
+                case 1:
+                    return "darkred";
+                default:
+                    return "darkblue";
+            }
+        })
+        .attr("stroke-width","0")
+
+    leavesNodes
+        .append("rect")
+        .attr("width", 25)
+        .attr("height", 20)
+        .attr("x", nodeWidth/2- 25)
+        .attr("y", nodeHeight - 10)
+        .attr("class", "node-expand-button")  // Add a class for styling if needed
+        .attr("fill",function (d) {
+            switch (nodeChildrenStateMap[d.data.id]) {
+                case 0:
+                case 2:
+                    return "darkgreen";
+                default:
+                    return "grey";
+            }
+        })
+        .on("click", function(event,d){
+            if((nodeChildrenStateMap[d.data.id]) === 0 || nodeChildrenStateMap[d.data.id] === 2)
+            {
+                onNodeChildrenToggle(d,"expand");
+            }
+        });
+
+    leavesNodes
+        .append("rect")
+        .attr("width", 25)
+        .attr("height", 20)
+        .attr("x", nodeWidth/2)
+        .attr("y", nodeHeight - 10)
+        .attr("class", "node-collapse-button")  // Add a class for styling if needed
+        .attr("fill",function (d) {
+            switch (nodeChildrenStateMap[d.data.id]) {
+                case 1:
+                case 2:
+                    return "darkred";
+                default:
+                    return "grey";
+            }
+        })
+        .on("click", function(event,d){
+            if( (nodeChildrenStateMap[d.data.id]))
+            {
+                onNodeChildrenToggle(d,"collapse");
+            }
+        });
+
+    leavesNodes.append("text")
+        .attr("class", "iText")
+        .attr("x",function (d) {
+            return nodeWidth/2 - 20;
+        })
+        .attr("y",function (d) {
+                    return nodeHeight + 8.5;
+        })
+        .html(function (d) {
+            return "+";
+        })
+
+    leavesNodes.append("text")
+        .attr("class", "iText")
+        .attr("x",function (d) {
+            return nodeWidth/2 + 8;
+        })
+        .attr("y",function (d) {
+            return nodeHeight + 6.5;
+        })
+        .html(function (d) {
+            return "-";
+        })
+
+}
+/**
+ * Search for nodes children and add them to the currentTree
+ * @param {String} currentNodeId clicked node ID
+ * @param {Array} data tree data
+ */
+function nodeChildrenExpand(currentNodeId,data)
+{
+    let nodeChildren = [];
+    for(let i = 0;i<data.length;i++)
+    {
+        if(data[i]["parentIds"].includes(currentNodeId))
+        {
+            // If the child is already shown, add the parent to it in currentTree
+            if(shownNodesMap[data[i]["id"]] === 1)
+            {
+                for(let j = 0;j<currentTree.length;j++)
+                {
+                    if(currentTree[j]["id"] === data[i]["id"])
+                    {
+                        if(!currentTree[j]["parentIds"].includes(currentNodeId))
+                        {
+                            currentTree[j]["parentIds"].push(currentNodeId);
+                        }
+                        break;
+                    }
+                }
+            }
+            else{
+                shownNodesMap[data[i]["id"]] = 1;
+                currentTree.push(data[i]);
+            }
+            nodeChildren.push(data[i]["id"]);
+        }
+    }
+    // Link new nodes (clicked node children) to their existing children
+    linkNewNodes(nodeChildren,data)
+}
+/**
+ * Search for nodes children and remove them from currentTree
+ * If there is a child has children, check if it should be removed, or it has other parents in the currentTree
+ * @param {String} currentNodeId clicked node ID
+ */
+function nodeChildrenCollapse(currentNodeId)
+{
+    let childrenQueue = [];
+    childrenQueue.push(currentNodeId);
+    while(childrenQueue.length !== 0)
+    {
+        for(let i = 0;i<currentTree.length;i++)
+        {
+            for(let j = 0;j<currentTree[i]["parentIds"].length;j++)
+            {
+                if(currentTree[i]["parentIds"][j] === currentNodeId)
+                {
+                    currentTree[i]["parentIds"].splice(j, 1);
+                    if(currentTree[i]["parentIds"].length === 0)
+                    {
+                        childrenQueue.push(currentTree[i]["id"]);
+                        shownNodesMap[currentTree[i]["id"]] = 0;
+                    }
+                    break;
+                }
+            }
+        }
+        childrenQueue.shift();
+        if(childrenQueue.length !== 0)
+        {
+            currentNodeId = childrenQueue[0];
+        }
+    }
+    let itr = 0;
+    while(itr<currentTree.length)
+    {
+        if(shownNodesMap[currentTree[itr]["id"]] === 0)
+        {
+            nodeChildrenStateMap[currentTree[itr]["id"]] = 0;
+            currentTree.splice(itr, 1);
+        }
+        else{
+            itr++;
+        }
+    }
+}
+
+/**
+ * Remove node parents not included in the currentTree
+ * @param {Array} parents node parents
+ */
+function removeHiddenParents(parents)
+{
+    let j = 0;
+    while(j<parents.length)
+    {
+        if(shownNodesMap[parents[j]] === 0)
+        {
+            parents.splice(j, 1);
+        }
+        else
+        {
+            j++;
+        }
+    }
+}
+
+/**
+ * Update expand/collapse state of node
+ * @param {Array} data tree data
+ */
+function updateShownNodeMap(data)
+{
+    for (let i = 0; i < currentTree.length; i++) {
+        if (getNodeChildren(currentTree[i]["id"], data).length === getNodeChildren(currentTree[i]["id"], currentTree).length) {
+            nodeChildrenStateMap[currentTree[i]["id"]] = 1;
+        } else if (getNodeChildren(currentTree[i]["id"], currentTree).length > 0 ){
+            nodeChildrenStateMap[currentTree[i]["id"]] = 2;
+        }
+        else{
+            nodeChildrenStateMap[currentTree[i]["id"]] = 0;
+        }
+        if (getNodeParents(currentTree[i]["id"], data).length === getNodeParents(currentTree[i]["id"], currentTree).length) {
+            nodeParentsStateMap[currentTree[i]["id"]] = 1;
+        } else {
+            nodeParentsStateMap[currentTree[i]["id"]] = 0;
+        }
+    }
+}
+/**
+ * Expand node found by search bar
+ * It links the node to its existing parents and expand its children
+ * @param {Object} node node
+ */
+function expandSearchedNodeTree(node)
+{
+    let data = structuredClone(treeData);// A clone is made to avoid any modifications in the original data
+    if(shownNodesMap[node.id] !==1)
+    {
+        shownNodesMap[node.id] = 1;
+        currentTree.push(node);
+    }
+    let nodeParentsQueue = node.parentIds.slice(0);
+    // show node parents till the top layer
+    while(nodeParentsQueue.length > 0)
+    {
+        let parentId = nodeParentsQueue.shift();
+        let parent = getNodeById(parentId);
+        if(shownNodesMap[parentId] !==1)
+        {
+            shownNodesMap[parentId] = 1;
+            currentTree.push(parent);
+        }
+        parent.parentIds.forEach(function(elem){
+            nodeParentsQueue.push(elem);
+        })
+    }
+    // show node children
+    let children = getNodeChildren(node.id,data);
+    children.forEach(function(child){
+        if(shownNodesMap[child.id] !==1)
+        {
+            shownNodesMap[child.id] = 1;
+            currentTree.push(getNodeById(child.id));
+        }
+    })
+    linkNewNodes(children,data);
+    updateTree(node.id,"expand searched node tree")
+}
+
+
+/**
+ * Search for nodes parents and add them to the currentTree
+ * @param {String} currentNodeId clicked node ID
+ * @param {Array} data tree data
+ */
+function nodeParentsExpand(currentNodeId,data)
+{
+    let node = getNodeById(currentNodeId);
+    let nodeParents = node.parentIds;
+    nodeParents.forEach(function(parentId){
+        if(shownNodesMap[parentId] === 0)
+        {
+            currentTree.push(getNodeById(parentId));
+            shownNodesMap[parentId] = 1;
+            linkNewNodes([parentId],data);
+
+        }
+        else // if the parent is already shown, add parent id to the current node only
+        {
+            for(let k=0;k<currentTree.length;k++)
+            {
+                if(currentNodeId === currentTree[k]["id"] && !currentTree[k]["parentIds"].includes(parentId))
+                {
+                    currentTree[k]["parentIds"].push(parentId);
+                    break;
+                }
+            }
+        }
+    })
+}
+
+/**
+ * Link new nodes to the current shown nodes (new parents to their existing children or new children to their existing parents)
+ * @param {Array} nodes new nodes
+ * @param {Array} data tree data
+ */
+function linkNewNodes(nodes,data)
+{
+    for(let i = 0;i<nodes.length;i++)
+    {
+        let nodeGrandChildren = getNodeChildren(nodes[i],data);
+        for(let j = 0;j<nodeGrandChildren.length;j++)
+        {
+            if(shownNodesMap[nodeGrandChildren[j]["id"]] === 1)
+            {
+                for(let k=0;k<currentTree.length;k++)
+                {
+                    if(nodeGrandChildren[j]["id"] === currentTree[k]["id"] && !currentTree[k]["parentIds"].includes(nodes[i]))
+                    {
+                        currentTree[k]["parentIds"].push(nodes[i]);
+                    }
+                }
+            }
+        }
+    }
+}
+/**
+ * update tree graph with nodes transition effect
+ * @param {Array} drawData tree data
+ * @param {String} currentNodeId tree data
+ * @param {String} state node state
+ */
+function updateTreeGraph(drawData,currentNodeId,state)
+{
+    let currentNode = nodes.filter(function(node){
+        return node.data.id === currentNodeId;
+    })
+    let currentX = 0,currentY = 0;
+    let currentZoomX = zoomTransform.x;
+    let currentZoomY = zoomTransform.y;
+    if(currentNode._groups[0].length !== 0 ){
+        currentX = currentNode._groups[0][0].__data__.x
+        currentY = currentNode._groups[0][0].__data__.y
+    }
+
+    graph.select(".paths-list").selectAll("*").remove();
+    generateTreeLayout(drawData);
+    layout(dag);
+
+    // Remove collapsed nodes before starting the animation
+    let collapsedNodes = nodes.filter(function(node){
+        return shownNodesMap[node.data.id] === 0;
+    })
+    collapsedNodes.remove();
+
+    nodes = graph
+        .select(".nodes-list")
+        .selectAll(".node")
+        .data(dag.descendants(), d => d.data.id)
+
+    let searchedNodeX = 0,searchedNodeY = 0;
+    if (state === "expand searched node tree")
+    {
+        let new_nodes = dag.descendants();
+        for(let i = 0; i < new_nodes.length; ++i)
+        {
+            if(new_nodes[i].data.id === currentNodeId)
+            {
+                searchedNodeX = new_nodes[i].x;
+                searchedNodeY = new_nodes[i].y;
+            }
+        }
+    }
+    let completeTransitions = 0;
+    nodes
+        .transition()
+        .duration(1000)
+        .ease(d3.easeLinear)
+        .attrTween("transform", function (node) {
+            // Your translation function
+            let translateFunction = d3.interpolateString(this.getAttribute("transform"), `translate(${node.x}, ${node.y})`);
+            // Return the tween function
+            return function (t) {
+                // Dynamically adjust the viewBox during the transition
+                if(state === "expand searched node tree")
+                {
+                    zoomTransform.x = currentZoomX + (viewboxWidth/2 - currentZoomX - searchedNodeX*zoomTransform.k)*t;
+                    zoomTransform.y = currentZoomY + (viewboxHeight/2 - currentZoomY - searchedNodeY*zoomTransform.k)*t;
+                }
+                else if(node.data.id === currentNodeId)
+                {
+                    zoomTransform.x = currentZoomX - (node.x - currentX)*t*zoomTransform.k;
+                    zoomTransform.y = currentZoomY - (node.y - currentY)*t*zoomTransform.k;
+                }
+                graph.attr('transform', zoomTransform);
+                // Return the interpolated transform value
+                return translateFunction(t);
+            };
+        })
+        .on("end", function(){
+            completeTransitions++;
+            if(completeTransitions===nodes.size())
+            {
+                drawTree(drawData,"update");
+                graph.attr('transform', zoomTransform);
+                updateGraphPlot(currentNodeId);
+            }
+        });
+}
+
+/**
+ * highlight selected node
+ * @param {String} currentNodeId node ID
+ */
+function highlightSelectedNode(currentNodeId)
+{
+    let node = nodes.filter(function(node){
+        return node.data.id === currentNodeId;
+    })
+    node.select("rect").style("fill","rgba(255,255,0,0.5)");
+}
+
+/**
+ * generate tree layout
+ * @param {Array} treeData tree data
+ */
+function generateTreeLayout(treeData)
+{
+    dag = d3.dagStratify()(treeData);
+    layout = d3
+        .sugiyama() // base layout
+        .decross(d3.decrossTwoLayer().order(d3.twolayerAgg())) // minimize number of crossings
+        .nodeSize((node) => [(node ? 3.6 : 0.25) * nodeWidth, 2 * nodeWidth]); // set node size instead of constraining to fit
+}
+
+/**
+ * modify top layer nodes positions to keep them at the top
+ */
+function keepTopLayersNodesUp()
+{
+    let rootsNodesY = 100000;
+    let rootsNodesX = [];
+    // get roots nodes y-coordinate(the minimum to make it constant for all of them) and x-coordinates
+    dag.descendants().forEach(function(node){
+        if(node.y<rootsNodesY)
+        {
+            rootsNodesY = node.y;
+        }
+        if(rootsNodesIds.includes(node.data.id))
+        {
+            rootsNodesX.push(node.x);
+        }
+    })
+    rootsNodesX.sort(function(a, b){return a - b});
+    let xStep = (rootsNodesX[rootsNodesIds.length - 1] - rootsNodesX[0])/rootsNodesIds.length;//horizontal space between roots nodes
+    let i = 0;
+    // Set the new coordinates to the roots nodes
+    dag.descendants().forEach(function(node){
+        if(rootsNodesIds.includes(node.data.id))
+        {
+            node.y = rootsNodesY;
+            node.x = rootsNodesX[0] + i*xStep;
+            rootsNodesCoord[node.data.id] = [node.x,node.y]
+            i+=1;
+        }
+    })
+    // Set the new coordinates to the roots nodes links
+    dag.links().forEach(function(node){
+        if(rootsNodesIds.includes(node.source.data.id))
+        {
+            node.points[0].x = rootsNodesCoord[node.source.data.id][0];
+            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();
 }
\ No newline at end of file
diff --git a/data-schema.json b/data-schema.json
index 40a5f79..52d9072 100644
--- a/data-schema.json
+++ b/data-schema.json
@@ -38,6 +38,14 @@
         "description": "The unique identifier of the node",
         "type": "string",
         "enum": ["effect", "designParameter", "systemIndependent"]
+      },
+      "tags": {
+        "description": "Node tags for search",
+        "type": "array",
+        "items": {
+          "type": "string"
+        },
+        "uniqueItems": true
       }
     },
     "required": [ "id", "parentIds", "title",  "decomBlock", "description", "references", "nodeType"]
diff --git a/helper.js b/helper.js
index a1b01c7..11ec25d 100644
--- a/helper.js
+++ b/helper.js
@@ -4,9 +4,6 @@
 if (!HTMLCollection.prototype.forEach) {
   HTMLCollection.prototype.forEach = Array.prototype.forEach;
 }
-/*if (!Object.prototype.forEach) {
-  Object.prototype.forEach = Array.prototype.forEach;
-}*/
 if (!HTMLCollection.prototype.indexOf) {
   HTMLCollection.prototype.indexOf = Array.prototype.indexOf;
 }
@@ -57,9 +54,8 @@ function addNodeInfos(node, id) {
     "id",
     "decomBlock",
     "description",
-    "number of parent nodes",
-    "number of child nodes",
-    "references"];
+    "references",
+    "tags"];
 
   attributesToShow.forEach(function (a) {
     let value = [];
@@ -71,12 +67,6 @@ function addNodeInfos(node, id) {
       case "decomBlock":
         value.push(["Decomposition Block", node.decomBlock.replaceAll("\\n", "<br><br>")]);
         break;
-      case "number of parent nodes":
-        //value.push([a, getNumberOfParents(node)]);
-        break;
-      case "number of child nodes":
-        //value.push([a, getNumberOfChildren(node)]);
-        break;
       case "references":
         value = prepareReferencesInfo(node.references);
         value.forEach(function (e) {
@@ -93,7 +83,25 @@ function addNodeInfos(node, id) {
             e.splice(2, 2);
           }
         });
-        break;      
+        break;
+      case "tags":
+        try{
+          let tagsLine = ["Tags"];
+          let tags = "";
+          node.tags.forEach(function(tag,idx,array){
+            tags += tag;
+            if(idx !== array.length - 1)
+            {
+              tags += ", ";
+            }
+          })
+          tagsLine.push(tags);
+          value.push(tagsLine);
+        }
+        catch{
+          console.log("tags property doesn't exist")
+        }
+        break;
       default:
         value.push([a, node[a].replaceAll("\\n", "<br><br>")]);
     }
@@ -127,18 +135,55 @@ function addNodeInfos(node, id) {
 function addLegend() {
   if ($("#tree_view").innerHTML == '') return;
 
-  let colors = ["#f4f4f9", "#ace3b5", "#b4acd2"];
-  let names = ["Effects", "System independent cause", "Design parameter"]
+  let colors = ["#f4f4f9", "#ace3b5", "#b4acd2", "#000000"];
+  let treeButtonsColors = ["#006400FF","#8B0000FF"];
+  let names = ["Effects", "System independent cause", "Design parameter", "Expand node parents"]
+  let treeButtonsNames = ["Expand node children", "Collapse node children"];
+  let text = "";
+  $("<div></div>")
+      .html("Legend")
+      .css("font-weight","bold")
+      .css("font-size","18px")
+      .css("line-height","10px")
+      .appendTo($("#legend"));
+  $("<br>")
+      .appendTo($("#legend"));
   for (let i = 0; i < colors.length; ++i) {
+    if(i === 3)
+    {
+      text = "+"
+      $("<br>")
+          .appendTo($("#legend"));
+    }
     $("<div></div>")
       .addClass("circle")
       .css("background", colors[i])
+      .html(text)
       .appendTo($("#legend"));
     $("<div></div>")
       .addClass("circle-text")
       .html(names[i])
       .appendTo($("#legend"));
   }
+  for (let i = 0; i < treeButtonsNames.length; ++i) {
+    if(i===0)
+    {
+      text = "+";
+    }
+    else
+    {
+      text = "-";
+    }
+    $("<div></div>")
+        .addClass("rectangle")
+        .css("background", treeButtonsColors[i])
+        .html(text)
+        .appendTo($("#legend"));
+    $("<div></div>")
+        .addClass("circle-text")
+        .html(treeButtonsNames[i])
+        .appendTo($("#legend"));
+  }
 }
 
 /**
@@ -156,22 +201,43 @@ function jumpToSearch() {
  * @returns 
  */
 function addAutoComplete(input) {
-  // TODO switch to jQuery
-
   let tree = JSON.parse(getDataFromSessionStorage(repoName + "Tree"));
   if (!tree) return;
 
   // collect all nodes names in tree
   let arr = [];
+  let tagsArr = [];
+  let tagsTitlesMap = {}; // map that links each tag to its associated titles.
   tree.forEach(function (n) {
     if (!arr.includes(n.title)) {
       arr.push(n.title);
     }
+    try{
+      n.tags.forEach(function(tag){
+        if(tagsTitlesMap.hasOwnProperty(tag))
+        {
+          tagsTitlesMap[tag].push(n.title);
+        }
+        else
+        {
+          tagsTitlesMap[tag] = [];
+          tagsTitlesMap[tag].push(n.title);
+        }
+        if (!tagsArr.includes(tag)) {
+          tagsArr.push(tag);
+        }
+      })
+    }
+    catch{
+      console.log("tags property doesn't exist")
+    }
+
   })
 
   let currentFocus;
   input.addEventListener("input", function () {
     let val = this.value;
+    let titlesMap = {}; // check if the title already in the search results to avoid duplicates.
 
     // close already open lists
     closeAllLists();
@@ -188,18 +254,10 @@ function addAutoComplete(input) {
     // append auto complete items
     this.parentNode.appendChild(divContainer);
     arr.forEach(function (e) {
-
-      let includes = false;
-      let parts = e.split(/[ ,]+/);
-
-      parts.forEach(function (p) {
-        if (p.toLowerCase().includes(val.toLowerCase())) {
-          includes = true;
-          return;
-        }
-      });
-
+      titlesMap[e] = 0;
+      let includes = checkSearchBarValue(e,val);
       if (includes) {
+        titlesMap[e] = 1;
         let divEntry = document.createElement("div");
         let startIndex = e.toLowerCase().indexOf(val.toLowerCase());
         divEntry.innerHTML = e.substr(0, startIndex);
@@ -215,8 +273,36 @@ function addAutoComplete(input) {
       }
     });
 
+    tagsArr.forEach(function (e) {
+      let includes = checkSearchBarValue(e,val);
+      if (includes) {
+        tagsTitlesMap[e].forEach(function(title){
+          if(titlesMap[title] === 0){
+            titlesMap[title] = 1;
+            let divEntry = document.createElement("div");
+            divEntry.innerHTML = title;
+            divEntry.innerHTML += `<input type='hidden' value='${title}'>`;
+            divEntry.addEventListener("click", function () {
+              input.value = this.getElementsByTagName("input")[0].value;
+              closeAllLists();
+              jumpToSearch();
+            });
+            divContainer.appendChild(divEntry);
+          }
+        })
+      }
+    });
+
   });
 
+  function checkSearchBarValue(data,searchVal) {
+    let includes = false;
+    if (data.toLowerCase().includes(searchVal.toLowerCase())) {
+      includes = true;
+    }
+    return includes;
+  }
+
   // key pressed handler
   input.addEventListener("keydown", function (e) {
     let autoCompleteList = document.getElementById(`${this.id}autocomplete-list`);
@@ -282,7 +368,6 @@ function prepareReferencesInfo(referenceString){
   let preparedRefString = referenceString
   .replace("[", "")
   .replaceAll("]", "")
-  //.replaceAll(/[\s]/g, "")
   .split("[")
   .filter(function (e) { return e != ""; });
   
@@ -293,4 +378,104 @@ function prepareReferencesInfo(referenceString){
 
   return value;
 }
+/**
+ * Get node children
+ * @param {String} nodeId node ID
+ * @param {Array} data tree data
+ * @returns
+ */
+function getNodeChildren(nodeId,data)
+{
+  let children = [];
+  data.forEach(function (elem) {
+    if (elem.parentIds.includes(nodeId)) {
+      children.push(elem)
+    }
+  });
+  return children;
+}
+/**
+ * Get node parents
+ * @param {String} nodeId node ID
+ * @param {Array} data tree data
+ * @returns
+ */
+function getNodeParents(nodeId,data)
+{
+  let parents = []
+  data.forEach(function (elem) {
+    if (elem.id === nodeId) {
+      parents =  elem.parentIds;
+      return;
+    }
+  });
+  return parents;
+}
+
+function addInfoBoxResizeBar()
+{
+  const infoBoxContainer = document.createElement('div');
+  infoBoxContainer.classList.add('info_box_container');
+
+  const resizeBar = document.createElement('div');
+  resizeBar.classList.add('resize_bar');
+
+  const infoBox = document.getElementById('info_box');
+  infoBoxContainer.appendChild(resizeBar);
+  infoBoxContainer.appendChild(infoBox);
+
+  const content = document.getElementsByClassName('content');
+  const treeTableContainer = document.getElementById('tree_table_container');
+  content[0].insertBefore(infoBoxContainer,treeTableContainer);
+
+// on mouse down (drag start)
+  resizeBar.onmousedown = function dragMouseDown(e) {
+    // get position of mouse
+    let dragY = e.clientY;
+    // register a mouse move listener if mouse is down
+    document.onmousemove = function onMouseMove(e) {
+      // e.clientY will be the position of the mouse as it has moved a bit now
+      // offsetHeight is the height of the infoBox
+      if(infoBoxContainer.offsetHeight - (e.clientY - dragY) >= 10 && e.clientY > 0)
+      {
+        infoBoxContainer.style.height = infoBoxContainer.offsetHeight - (e.clientY - dragY) + "px";
+        // update variable - till this pos, mouse movement has been handled
+        dragY = e.clientY;
+      }
+    }
+    // remove mouse-move listener on mouse-up (drag is finished now)
+    document.onmouseup = () => document.onmousemove = document.onmouseup = null;
+  }
+}
+
+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);
+}
diff --git a/sidenav.js b/sidenav.js
index 9b91e6c..b30a823 100644
--- a/sidenav.js
+++ b/sidenav.js
@@ -107,6 +107,7 @@ function createDropDownContainer(linkArray) {
 function navLink(title) {
     let node = getNodeByTitle(title);
     $("#info_box").empty();
+    expandSearchedNodeTree(node);
     addNodeInfos(node, "preview");
     updateGraphPlot(node.id);
 }
@@ -121,4 +122,25 @@ function navLink(title) {
     return $("<a></a>")
     .attr("href", url)
     .html(name);
+}
+
+function addTreesLinks()
+{
+    const treesLinksContainer = document.createElement('div');
+    treesLinksContainer.classList.add('tree_links_container');
+
+    const sideNav = document.getElementById('side_nav_links');
+    const currentTreeTitle = document.getElementById('head').getElementsByTagName("a")[0].innerHTML;
+    const content = document.getElementsByClassName('content');
+    let repos = ["LidarLimbs", "RadarRami", "UltrasonicUnderwood", "CameraCopse"];
+    repos.forEach(function(repo){
+        if(repo !== currentTreeTitle) {
+            let treeElement = document.createElement('a');
+            let treeLink = document.createTextNode(repo);
+            treeElement.appendChild(treeLink);
+            treeElement.href = "https://percollect.github.io/" + repo + "/";
+            treesLinksContainer.appendChild(treeElement);
+        }
+    })
+    sideNav.appendChild(treesLinksContainer)
 }
\ No newline at end of file
diff --git a/style.css b/style.css
index 0c4fb3c..7b869e9 100644
--- a/style.css
+++ b/style.css
@@ -16,6 +16,7 @@
 
 body {
   overflow-x: scroll;
+  overflow-y: hidden ;
   background-color: var(--main-bg);
   font-family: "Lato", sans-serif;
 }
@@ -169,8 +170,11 @@ body {
 
 /* content  */
 .content {
-  height: auto;
+  height: 100vh;
   margin-left: var(--sidenav-width);
+  display: flex;
+  flex-direction: column;
+
 }
 
 .content #load_info {
@@ -202,6 +206,7 @@ body {
 .node {
   cursor: pointer;
   text-anchor: start;
+  user-select: none;
 }
 
 .node rect {
@@ -233,30 +238,52 @@ body {
 }
 
 .node .iText {
-  font-size: 18px;
+  font-size: 25px;
   fill: var(--main-bg);
   pointer-events: none;
   font-family: Georgia, 'Times New Roman', Times, serif;
   font-weight: bolder;
 }
 
+.node-expand-button{
+  border: none;
+  background-color: darkgreen;
+  width:25px;
+  height:20px;
+  vertical-align: middle;
+}
+
+.node-collapse-button{
+  border: none;
+  background-color: darkred;
+  width:25px;
+  height:20px;
+  text-align: center;
+}
+
 /* legend  */
 .content .legend {
   width: auto;
   height: auto;
+  padding-top: 20px;
   padding-bottom: 20px;
-  margin-top: 20px;
+  padding-left: 10px;
   margin-left: var(--legend-margin-lr);
-  margin-right: var(--legend-margin-lr);
-  float: right;
+  position:fixed;
+  top:4px;
+  right:20px;
+  user-select: none;
+  background-color: white;
+  border: 1px solid var(--main-color);
+
 }
 
 .legend .circle {
   width: 16px;
   height: 16px;
   text-align: center;
-  font-size: 8px;
-  line-height:150px;
+  font-size: 16px;
+  line-height:13px;
   color: #fff;
   border-radius: 50%;
   border: 1px solid var(--main-color);
@@ -273,12 +300,66 @@ body {
   float:left;
 }
 
+.legend .rectangle {
+  width: 25px;
+  height: 20px;
+  text-align: center;
+  font-size: 16px;
+  line-height:18px;
+  color: #fff;
+  border: 1px solid var(--main-color);
+  float:left;
+}
+
+/* expand/collapse tree  */
+.content .tree_buttons_container{
+  position:fixed;
+  top:150px;
+  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;
+}
+
 /* infobox  */
+.content .info_box_container {
+  resize: vertical;
+  height: 26%;
+  bottom:0;
+  position:fixed;
+  width: calc(100% - var(--sidenav-width));
+  background-color: white;
+}
+
+.content .resize_bar{
+  background-color: lightgray;
+  height:10px;
+  cursor: row-resize;
+  border-radius: 50px;
+}
+
 .content #info_box {
-  width: 100%;
-  height: auto;
-  margin-top: 20px;
-  display: inline-block;
+  overflow-y: scroll;
+  height: 96%;
 }
 
 .content #info_box .info {
@@ -297,6 +378,7 @@ body {
   color: var(--main-color-sec);
   display: block;
   font-weight: bold;
+  user-select: none;
 }
 
 .content #info_box .info a {
@@ -313,6 +395,7 @@ body {
 
 .content #info_box .info #info_key {
   font-weight: bold;
+  display: inline;
 }
 
 /* tree table  */
@@ -380,4 +463,9 @@ body {
 
 .content #tree_table .gs-pagination {
   padding-bottom: 50px;
+}
+
+.tree_links_container{
+  position: fixed;
+  bottom: 0;
 }
\ No newline at end of file