li
	h4.subtitle 2.2.3 - Tables
	p In addition to the Tree Visualization, PHYLOViZ Online also displays input data in <b>Tables</b>. It shows the Profile data (if input file is profile-based) and Auxiliary data (if existing). Users can explore, filter information, and link selected data from the tables to the Tree.
	br
	div(style="width:100%; text-align:center;")
		img(id="table1" href="/images/table1.png" style="width:40%; height: auto;" src="/images/table1.png")
	ul
		li
			div.tutorialsubsections(id="filter")
				h5 Filter
				table
					tr.subrow
						td.tutorialcolumns
							img(id="filter1" href="/images/filter1.png" style="width:60%; height: auto;" src="/images/filter1.png")
						td.othercolumns
							<span class="glyphicon glyphicon-arrow-right"></span>
						td(style="text-align:justify")
							p It is possible to filter information by performing queries on the data available in the table column. Users can also <b><i>query on multiple columns simultaneously</i></b>. Advanced users can also use <b>regular expressions</b> (regex). To do this, just place a pattern on the search area at the bottom of each column.

					tr.subrow
						td.tutorialcolumns
							img(id="filter2" href="/images/filter2.png" style="width:60%; height:auto;" src="/images/filter2.png")
						td.othercolumns
							<span class="glyphicon glyphicon-arrow-right"></span>
						td(style="text-align:justify")
							p The <b>Search area</b> on the upper right side of the table can also be used to filter information from the table. However, in this case, the search is made globaly and not by column. 
		li
			div.tutorialsubsections(id="linktotree")
				h5 Link to Tree
				table
					tr.subrow
						td.tutorialcolumns
							img(id="link2" href="/images/link2.png" style="width:60%; height: auto;" src="/images/link2.png")
						td.othercolumns
							<span class="glyphicon glyphicon-arrow-right"></span>
						td(style="text-align:justify")
							p The query results can be visualised directly in the tree  by using all data available at a given instance or some selected rows. By default, selection is made by <b>single rows</b>. However, the selection of all rows can be made using the <b><i>Select All</i></b> button. To deselect, users can press the <b><i>Deselect All</i></b> button. 
					tr.subrow
						td.tutorialcolumns
							img(id="link1" href="/images/link1.png" style="width:60%; height:auto;" src="/images/link1.png")
						td.othercolumns
							<span class="glyphicon glyphicon-arrow-right"></span>
						td(style="text-align:justify")
							p Single row selection is made by <i>pressing the Ctrl key and clicking on the desired rows</i>. Again, to deselect, users can press the <b><i>Deselect All</i></b> button.
					tr.subrow
						td.tutorialcolumns
							img(id="link3" href="/images/link3.png" style="width:60%; height:auto;" src="/images/link3.png")
						td.othercolumns
							<span class="glyphicon glyphicon-arrow-right"></span>
						td(style="text-align:justify")
							p To be able to link data from the table to the Tree, first there is a need to choose a column from the table to be mapped. This is made by <i>clicking on the table's column header</i>. After <b><i>column selection</i></b>, it gets highlighted and a Pie Chart shows up below the table. 
					tr.subrow
						td.tutorialcolumns
							img(id="link4" href="/images/link4.png" style="width:60%; height:auto;" src="/images/link4.png")
						td.othercolumns
							<span class="glyphicon glyphicon-arrow-right"></span>
						td(style="text-align:justify")
							p The <b>Pie Chart</b> that appears after column selection has global information on that column. <i>Each color represents a different value</i> and counts for each value are available. On mouse over each region of the Pie Chart, the counts for the desired filed value are given.
					tr.subrow
						td.tutorialcolumns
							img(id="link5" href="/images/link5.png" style="width:60%; height:auto;" src="/images/link5.png")
						td.othercolumns
							<span class="glyphicon glyphicon-arrow-right"></span>
						td(style="text-align:justify")
							p The last step that takes to perform data linkage from the table to the Tree is clicking on the <b><i>Link to Tree</i></b> button. After this, users are redirected to the <i>Tree Visualization</i> tab and nodes are colored according to the selected field from the table.
		li
			div.tutorialsubsections(id="exporttable")
				h5 Export
				table
					tr.subrow
						td.tutorialcolumns
							img(id="exporttable1" href="/images/exporttable1.png" style="width:60%; height: auto;" src="/images/exporttable1.png")
						td.othercolumns
							<span class="glyphicon glyphicon-arrow-right"></span>
						td(style="text-align:justify")
							p It is also possible to export the data from the table on a <b>Excel and CSV</b> format. This is made by selecting one of the export options at the upper left of the table.


