Develop a javascript report data navigator for source highlighting

the report data is an xml format that provide source highlighting data to be navigated using a browser (chrome, firefox,...) . Data format is xml format - which represents hierarchy (tree) of containers and items in side each hierarchy node. a container is a node in the hierarchy , has some attributes like name and rollup data . an item is a leaf in the xml. it has some attributes like name , and also block-information that points to a specific region in a file. the block information is a file name, start-line,end-line,startcolumn and end-column , color . the color specifies what color we want to use for the block ) every node has a fullname or a name - name is the immediate name of the node fullname is the aggregation of the names from the root till that specific node. (fullname is unique) also node has block-information What is needed a navigator that shows: 3 widgets 1. the tree hierarchy of elements, each node shows the name and the attributes on it . (on the left side of the browser) 2. a table that shows the items in a selected node on the tree . on top right. 3. source info - on bottom right. shows the file pointed by the selected item (either from the tree or the table ) and points to the block-information - colored with the color attribute value given in the item. 4. search opens for the three widgets . 5. filtering options for the widget is optional for now . example: <xml> ... <report name="myreport" day="1/1/2015" > <NODE name="A" fullname="A" file="[login to view URL]" startline="1" endline="100" startcolumn=1 endcolumn=100> <ITEM name="item1" fullname="[login to view URL]" file="[login to view URL]" startline="100" endline="101" startcolumn=1 endcolumn=100> <NODE name="B" fullname="A.B" file="[login to view URL]" startline="1" endline="100" startcolumn=1 endcolumn=100> <ITEM name="item1" fullname="[login to view URL]" fileB="[login to view URL]" startline="100" endline="101" startcolumn=1 endcolumn=100> </NODE> </NODE> </report>