 <!-- I had to add this because CanvasXpress is injecting by using javascript an style to the body tag onload, causing a narrowed document -->
 <script>
    window.addEventListener('load', function() {
      document.body.removeAttribute('style');
    });
</script>

<% plotter.set_header() %>
<h3> There are plenty of themes and color schemes than can be uses with options["theme"] and options["color_scheme"] </h3>

<details>
<table>
  <tr>
    <td><b>Themes:</b>
      <ul>
        <li> economist</li>
        <li> excel</li>
        <li> tableau</li>
        <li> stata</li>
        <li> igray</li>
        <li> solarized</li>
        <li> paulTol</li>
        <li> ggplot</li>
        <li> wallStreetJournal</li>
        <li> cx</li>
      </ul>
    </td>

    <td><b>Color schemes:</b>
      <ul>
        <li> CanvasXpress</li>
        <li> CanvasXpressT</li>
        <li> BlackAndWhite</li>
        <li> StataMono</li>
        <li> Stata3</li>
        <li> Stata2</li>
        <li> Stata</li>
        <li> WallStreetJournalDemRep</li>
        <li> WallStreetJournalBlackGreen</li>
        <li> WallStreetJournalRedGreen</li>
        <li> WallStreetJournal3</li>
        <li> WallStreetJournal2</li>
        <li> WallStreetJournal</li>
      </ul></td>
      <td><ul>
        <li> Tableau</li>
        <li> GGPlot</li>
        <li> Solarized</li>
        <li> Excel3</li>
        <li> Excel2</li>
        <li> Excel</li>
        <li> Bootstrap</li>
        <li> Economist</li>
        <li> EconomistBG</li>
        <li> Pastel</li>
        <li> Pastel2</li>
        <li> Balanced</li> 
            </ul></td>
      <td><ul>
        <li> YlGn</li>
        <li> YlGnBu</li>
        <li> GnBu</li>
        <li> BuGn</li>
        <li> PuBuGn</li>
        <li> PuBu</li>
        <li> BuPu</li>
        <li> RdPu</li>
        <li> PuRd</li>
        <li> OrRd</li>
        <li> YlOrRd</li>
        <li> YlOrBr</li>
        <li> Purples</li>
        <li> Blues</li>
        <li> Greens</li>
        <li> Oranges</li>
              <td><ul>
        <li> Reds</li>
        <li> Greys</li>
        <li> Solarized</li>
        <li> Excel3</li>
        <li> Excel2</li>
        <li> Excel</li>
        <li> </li>
            </ul></td>
      <td><ul>
      </ul>
    </td>

  </tr>
</table>
</details>

<p>Introduccion</p>
<p> Fig ${ plotter.add_figure('example') } : This is an example </p>

<p> We cite ${ plotter.get_figure('example') } as an example </p>

<p> Fig ${ plotter.add_figure('test') } : This is a test </p>

<p> We cite ${ plotter.get_figure('test') } as a test </p>

<p> Table ${ plotter.add_table('tab:example') } : This is an example table </p>

<p> We cite table ${ plotter.get_table('tab:example') } as an example </p>

<p> Table ${ plotter.add_table('tab:test') } : This is a test table </p>

<p> We cite table ${ plotter.get_table('tab:test') } as a test table </p>

${ plotter.create_title('Demo', id='click_demo', hlevel=1, indexable=True, clickable=True, t_id='clickme_id', clickable_text = '(Click me)') }
${ plotter.create_title('Demo2', id='demo2', hlevel=2, indexable=True, clickable=False) }
${ plotter.create_title('Demo3', id='demo3', hlevel=1, indexable=True, clickable=False) }
${ plotter.create_title('Demo4', id='demo4', hlevel=2, indexable=True, clickable=False) }
${ plotter.create_title('Demo5', id='demo5', hlevel=3, indexable=True, clickable=False) }
${ plotter.create_title('Demo6', id='demo6', hlevel=1, indexable=True, clickable=False) }

<% example_div = plotter.table(id='table1.txt') %>

${ plotter.create_collapsable_container('clickme_id', example_div) }

${ plotter.table(id='table1.txt')}

<%
        from functools import partial
	def mod_data(data):
		for i, row in enumerate(data):
			for j, cell in enumerate(row):
				if i > 0: data[i][j] = cell * 100

        def col_to_num(data, cols):
                for i, row in enumerate(data):
                        for j in cols:
                                if i > 0: data[i][j] = float(data[i][j])

        convert_col_1_to_numeric = partial(col_to_num, cols=[1])	
%>

<p>Data table (Header true, text false, style DT):</p>
${ plotter.table(id='table1_header.txt', header=True, styled='dt', attrib =  {'class' : 'table'}, func=mod_data, custom_buttons = ['copyHtml5', 'excelHtml5', 'csvHtml5', 'pdfHtml5'])}

<p>Data table (Header true, text false, style BS):</p>
${ plotter.table(id='table1.txt', header=True, styled='bs', attrib = {'class' : 'table table-striped'}) }

<p>Data table (Header true, text true, style DT):</p>
${ plotter.table(id='text_number_tab.txt', header=True, text=True, styled='dt', func=convert_col_1_to_numeric, attrib = {'class' : 'table'}, custom_buttons = ['copyHtml5', 'excelHtml5', 'csvHtml5', 'pdfHtml5']) }

<p>descripcion</p>

${ plotter.corplot(id = 'correlation1.tsv', header = True, row_names = True, correlationAxis = 'variables')}

<table width="1100">
        <tr>
                <td>
                        ${ plotter.barplot(id='barplot1.txt', header = True, config={'graphOrientation': 'vertical', "xAxisTitle": "Valores"}) }
                </td>
               <td>
                        ${ plotter.barplot(id = 'barplot2.txt', header = True, height = 300) }
                </td>
                <td>
                        ${ plotter.barplot(id = 'barplot2.txt', header = True, height = 300, colorScale=True, config = { 'graphOrientation' : 'vertical'}) }
                </td>
                <td>
                        ${ plotter.barplot(id = 'barplot3.txt', header= True,
	                        smp_attr = [1,2], var_attr = [1,2],
        	                segregate = {'var': ['nerv'], 'smp' : ['type2']},
                	        config = {
                        	        "layoutCollapse" : "false",
                                	"layoutType" : "rows",
	                                'graphOrientation' : 'vertical'
        	                },
                	        height = 300, width = 300) }
                </td>
                <td>
                        ${ plotter.barplot(id = 'barplot5.txt', header= True, row_names = True, add_header_row_names = False, transpose=False,
	                        var_attr = [1,2,3], title = "Top-K rankings comparison",
                	        config = {
                        	        "layoutCollapse" : "false",
                                	"layoutType" : "rows",
	                                'graphOrientation' : 'vertical',
                                        'groupingFactors': ['dataset', 'doc_type'],
                                        'segregateSamplesBy': ['bench_type'],
        	                },
                	        height = 800, width = 800) }
                </td>                
	</tr>
        <tr>
                <td>
                        ${ plotter.barline(id = 'barplot3.txt', 
                                header= True,
	                        smp_attr = [1,2], var_attr = [1,2], transpose = False,
        	                xAxis = ["gen1", "gen2"], #These variable names are used for barplots
                                xAxis2 = ["gen3", "gen4"], #These variable names are used for lineplots
                	        config = {'graphOrientation' : 'vertical', "xAxis2Show": True,
                                             "xAxis2TickFormat":"%.2f G3-4",
                                             "xAxisTickFormat":"%.2f G1-2",
                                             "xAxisTitle": "Expression of genes 1 and 2 (bars)",
                                             "xAxis2Title": "Expression of genes 3 and 4 (lines)"},
                	        height = 500, width = 500) }
                </td>
                <td>
                        ${ plotter.stackedline(id = 'barplot3.txt', 
                                header= True,
	                        smp_attr = [1,2], var_attr = [1,2], transpose = False,
        	                xAxis = ["gen1", "gen2"], #These variable names are used for stacked barplots
                                xAxis2 = ["gen3", "gen4"], #These variable names are used for lineplots
                	        config = {'graphOrientation' : 'vertical', "xAxis2Show": True,
                                             "xAxis2TickFormat":"%.2f G3-4",
                                             "xAxisTickFormat":"%.2f G1-2",
                                             "xAxisTitle": "Expression of genes 1 and 2 (bars)",
                                             "xAxis2Title": "Expression of genes 3 and 4 (lines)"},
                	        height = 500, width = 500) }                
                </td>                       
                <td>
                        ${ plotter.dotline(id = 'barplot3.txt', 
                                header= True,
	                        smp_attr = [1,2], var_attr = [1,2], transpose = False,
        	                xAxis = ["gen3", "gen4"], #These variable names are used for dotplots
                                xAxis2 = ["gen1", "gen2"], #These variable names are used for lineplots
                	        config = {'graphOrientation' : 'vertical', "xAxis2Show": True},
                	        height = 500, width = 500) }
                </td>
                <td>
                        ${ plotter.arealine(id = 'barplot3.txt', 
                                header= True,
	                        smp_attr = [1,2], var_attr = [1,2], transpose = False,
        	                xAxis = ["gen3", "gen4"], #These variable names are used for dotplots
                                xAxis2 = ["gen1", "gen2"], #These variable names are used for lineplots
                	        config = {'graphOrientation' : 'vertical', "xAxis2Show": True},
                	        height = 500, width = 500) }
                </td>
                <td>
                        ${ plotter.area(id = 'barplot3.txt', 
                                header= True,
	                        smp_attr = [1,2], var_attr = [1,2], transpose = False,
                	        config = {'graphOrientation' : 'vertical', "xAxis2Show": True},
                	        height = 500, width = 500) }
                </td>
        </tr>
        <tr>
                <td>
                        ${ plotter.pie(id= 'pie_uniq.txt')}
                </td>

                <td>
                        ${ plotter.pie(id= 'barplot1.txt', header = True, row_names = True) }
                </td>
                <td>
                        ${ plotter.pie(id= 'barplot1.txt', header = True, row_names = True, transpose = True) }
                </td>

        </tr>
        <tr>
               <td>
                        <%
                                def mod_data(data):
                                        data[1][1] = 1000
                        %>
                        ${ plotter.line(id= 'barplot1.txt', header = True, func=mod_data, transpose=False ) }
                </td>
                <td>
                        ${ plotter.line(id= 'lineplot.txt', fields = [5,2,3,4], smp_attr=[1], header = True, config = {'graphOrientation' : 'vertical'} ) }
                </td>                
                <td>
			${ plotter.stacked(id = 'barplot1.txt', header = True, config = {'graphOrientation' : 'vertical'}, theme="stata") }
                </td>

        </tr>
        <tr>
                <td>
                        ${ plotter.scatter2D(id = 'barplot3.txt', 
                                header= True, row_names=True, add_header_rownames = False,
	                        smp_attr = [1,2], var_attr = [1,2],
                                xAxis= ["brain"], yAxis= ["lung"],
                                x_label= "Brain", y_label= "Lung",
                                config = {"hoverTemplate": """Type of gen: {type} <br>
                                Other type of gen: {type2} <br>
                                Lung Expr: {lung} <br>
                                Brain Expr: {brain}"""}
                	)}
                </td>
                <td>
                        ${ plotter.scatter2D(id= 'x_y.txt', header= True, x_label = 'Num genes', y_label = 'FPKM', alpha = 0.3, theme="tableau" , regressionLine=True ) }
                </td>
                <td>
                        ${ plotter.scatter2D(id= 'x_y.txt', header= True, x_label = 'Num genes', y_label = 'FPKM', add_densities=True) }
                </td>
                <td>
                        ${ plotter.scatter3D(id= 'scatter3dsizeAndColor.txt', header= True, row_names = True, x_label = 'Num genes', y_label = 'FPKM', z_label= "3thMetric",
                                                smp_attr=[6], xAxis = "liver", yAxis="brain", zAxis="lung", pointSize="spleen", colorScaleBy="kidney", shapeBy="pathway")}
                </td>
        </tr>
        <tr>
                <td>
                        ${ plotter.hexplot(id= 'x_y_crowded.txt', header= True, x_label = 'Num genes', y_label = 'FPKM', bins=30) }
                </td>
                <td>
                        ${ plotter.scatter2D(id= 'x_y_crowded.txt', header= True, x_label = 'Num genes', y_label = 'FPKM', add_densities=True, alpha = 0.3 )}
                </td>
                <td>
                        ${ plotter.scatter2D(id= 'x_y_crowded.txt', header= True, x_label = 'Num genes', y_label = 'FPKM', static=True, theme="tableau" ) }
                </td>
                <td>
                        ${ plotter.boxplot(id = 'boxplot.txt', header = True, row_names = True, format='wide') }
                </td>
                <td>
                        ${ plotter.boxplot(id = 'boxplot_one_series.txt', header = True, row_names = True, format='long') }
                </td>
                <td>
                        ${ plotter.boxplot(id = 'boxplot_factor.txt', header = True, row_names = True, default= False, format='wide',
                                                smp_attr = [4], group = ['pathway'] )}
                </td>
        </tr>
        <tr>
                <td>
                        ${ plotter.boxplot(id= 'boxplot_one_series_nonames.txt', header=False,row_names=False, add_header_row_names=True, format="long")}
                </td>
                <td>
                        ${ plotter.boxplot(id= 'boxplot_two_series_nonames.txt', header=False,row_names=False, add_header_row_names=True, format="wide")}
                </td>
        </tr>
        <tr>
                <td>
                        ${ plotter.boxplot(id = 'boxplot_factor.txt', header = True, row_names = True, default= False, format='wide',
                                                smp_attr = [4], group = ['pathway'], add_violin=True )}
                </td>
                <td>
                        ${ plotter.boxplot(id = 'rank_distribution.txt', header = True, row_names = False, default =  False, format='long',
                                                smp_attr = [0,1,2], group = ["clust_method", "clust_status"], height = 500, width= 900) }
                </td>
                <td>
                        ${ plotter.boxplot(id = 'boxplot_grid.txt', header = True, row_names = False, default =  False, format='long',
                        smp_attr = [0,1], group = ["genes", "samples"], height = 700, width= 800, config={"graphOrientation":"vertical"}) }
                </td>
        </tr>
        <tr>
                <td>
                        ${ plotter.boxplot(id = 'boxplot_3factor.txt', header = True, row_names = True, default= False, format='long',
                                                smp_attr = [2,3,4,5], group = ['pathway',"dataset","type"],
                                                 config={"graphOrientation":"vertical", "colorBy": "top"} )}
                </td>
                <td>
                        ${ plotter.boxplot(id = 'boxplot_wide_2factor.txt', header = True, row_names = True, default= False, format='wide',
                                                smp_attr = [4,5], group = ['pathway', 'sequencing'], add_violin=True )}
                </td>
	</tr>
        <tr>
                <td>
                        ${ plotter.ridgeline(id = 'ridgeline.txt', header = True, row_names = True) }
                </td>
                <td>
                        ${plotter.density(id="density_one_serie.txt", row_names = False, header = True, fields=[0])}
                </td>
        </tr>
        <tr>
                <td>
                        ${plotter.density(id="density_one_serie.txt", row_names = False, header = True, smp_attr=[1], group="Group", config={"histogramStat":"density"})}
                </td>
                <td>
                        ${plotter.density(id="ridgeline.txt",  header = True, row_names = True, fillDensity = True, median = True)}
                </td>
        </tr>
	<tr>
               <td>
                        ${ plotter.circular(id = 'circular.txt', header = True, row_names = True, links = 'links', ringsType = ['heatmap', 'dot', 'bar']) }
                </td>
                <td>
                        ${ plotter.radar(id='barplot4.txt', header = True, row_names = True, subtype=["stacked"] or ["bar", "area", "line", "dot"])}
                </td>
                <td>
                        ${ plotter.radar(id='barplot3.txt', header = True, row_names = True, smp_attr = [1,2], var_attr = [1,2], subtype=["area"], show_factors=["type", "-", "type2"])}
                </td>
                <td>
                        ${ plotter.heatmap(id = 'hap_sample', header = True, row_names = True ) }
                        ${ plotter.heatmap(id = 'heatmap_colors.txt', header = False, row_names = False, x_label = "-log P value",
                                        extra_data={'id': 'heatmap_sizes.txt', 'header': False, 'row_names':  False},
                                        inject_smp_attr = {"gen": ["A", "B", "A", "B", "C"], "type":["mRNA","mRNA", "miRNA", "tRNA", "miRNA"]},
                                        inject_var_attr = {"sample": ["brain", "brain", "liver", "liver", "kidney"], "neural": ["yes", "yes", "no", "no", "no"]},
                                        config = {'sizeLegendTitle': 'Log2 fold change',
                                                'sizes': [3,11,15,40],
                                                "smpOverlays" : ["gen","type"],
                                                "varOverlays" : ["sample", "-", "neural"]} ) }                        
                </td>
		<td>
                        ${ plotter.scatterbubble2D(id = 'haplotipe_array', header = True, row_names = False, upper_limit = 70, lower_limit = 4, ranges = 80,
                                                xAxis = ['pos'], yAxis = ['haplotipe'], zAxis = ['freq']) }
                </td>
		<td>
                        ${ plotter.dotplot(id = 'canvas_table', header = True, row_names = True, connect = True, height = 300) }
                </td>
	</tr>
        <tr>
                <td>
                        ${ plotter.heatmap(id = 'heatmap_dendrogram.txt', tree="./file_data/dendrogram.dnd", 
                                                header = True, row_names = True, 
                                                transpose=False, smp_attr=[17], treeBy="v",
                                                config={"varOverlays":["category"]}
                                        )}
                </td>
                <td>
                        ${ plotter.heatmap(id = 'heatmap_dendrogram.txt', tree="./file_data/dendrogram.dnd", 
                                                header = True, row_names = True, 
                                                transpose=False, smp_attr=[17], treeBy="v",
                                                config={"varOverlays":["category"],
                                                        "varDendrogramHang": True}
                                        )}
                </td>                
        </tr>
        <tr>
                <td>
                        ${ plotter.scatter_polar(id = 'polar.txt', header=True, row_names=True, transpose=True,
                                                radialAxis="radius", circularAxis="angles",
                                                smp_attr = [3,4,5],
                                                config={
                                                   "colorBy": "genes", 
                                                   "sizeBy": "sizes",
                                                   "colorKey" : {
                                                                "genes": {
                                                                        "GEN1": "#FFFF00",
                                                                        "GEN2": "#00FFFF",
                                                                        "GEN3": "#0AFFA0",
                                                                        "GEN4": "#05AFDA"
                                                                }},
                                                    "hoverTemplate": """Type of gen: {genes} <br>
                                                                        Frequency: {alphas} <br>"""
                                                }
                                        )}
                </td>
        </tr>
</table>


<%
	plotter.hash_vars.update({"ref_data" : 5})

	def generate_table(num):
		return [ [i] for i in range(0,num) ]
%>
<h2> GEnerate table data using a custom object </h2>

${ plotter.table(id="ref_data", get_table_meth=generate_table ) }

<div>
<%
        num=5
        graph=f"""
        ---
        title: Hello Title
        config:
         theme: base
         themeVariables:
           primaryColor: "#00ff00"
       ---
       graph LR;
         A --- B ;
         A --- E({num}) ;
         B-->C[fa:fa-ban forbidden];
         B-->D(fa:fa-spinner);
         click A callback "Texto para el tooltip"
         click B href "#CanvasXpress-ParentNode-obj_3_"
"""
%>
        ${ plotter.mermaid_chart(graph)}
</div>

${ plotter.network(id = 'network.txt', method = 'cytoscape', reference_nodes = ["a", "e"], group_nodes= {"g1": ["i", "j"], "g2": ["b", "c"]}) }
${ plotter.network(id = 'network.txt', method = 'elgrapho', group = 'layer', layout = 'forcedir', reference_nodes = ["a", "e"]) }

<div style="overflow: hidden">
	${ plotter.network(id = 'network.txt', method = 'sigma', reference_nodes = ["a", "e"]) }
        ${ plotter.embed_img('file_data/example.png', img_attribs='width=400 height=400')}
        ${ plotter.embed_img('file_data/example.png', img_attribs='class="fitting_img"')}
	${ plotter.embed_img('file_data/example.png', rezisable=True, img_attribs='height="600px" width="600px"')}
</div>

${ plotter.prettify_div("<h3> Showing the use of prettify_div method</h3>")}
<%
        image = plotter.embed_img('file_data/example.png', img_attribs='width=400 height=400')
        images2 = image + image
        images3 = image + image + image
%>
${ plotter.prettify_div(images2, user_def_params={"class": "MyDivClass"})}
${ plotter.prettify_div(images3, user_def_params={}, user_def_style_params={"overflow":"hidden", "display": "flex", "flex-direction": "row", "justify-content": "center"})}
${ plotter.prettify_div("<h3>prettify_div without no 'user_def_params' or 'user_def_style_params' defined </h3>", user_def_params={}, user_def_style_params={})}
${ plotter.prettify_div(image, user_def_params={}, user_def_style_params={})}

<br><br><br>

<div style="overflow: hidden">
        ${ plotter.network(id = 'network.txt', method = 'pyvis', reference_nodes = ["a", "e"], group_nodes= {"g1": ["i", "j"], "g2": ["b", "c"]}) }
</div>

<div style="overflow: hidden">
        ${ plotter.network(id = 'network.txt', method = 'sigma2', reference_nodes = ["a", "e"], group_nodes= {"g1": ["i", "j"], "g2": ["b", "c"]}) }
</div>

<div>
<%
        graph2=f"""
        ---
        title: Hello Title
        config:
            theme: base
            themeVariables:
            primaryColor: "#00ff00"
        ---
        timeline
        title Workflow
          section Cluster Steps
            get reliable pairs : Net Metrics
            get clusters : Cluster Metrics
                         : CDLib Metrics
            clean clusters : Cluster Metrics
                           : CDLib Metrics
            prepare and randomize clusters : Nothing                    
            cluster ranking : CRank Metrics
          section Disease Steps
            disease prediction : Disease Metrics
          section Ranker Steps
            gene ranking metrics : First Ranker Metrics
                                 : First Ranker Metrics Best Genes
            geometric mean integration : Geometric integration
            gene disease ranking : Second Ranker Metrics
                                 : Second Ranker Metrics Best Genes
            get control prediction: Phen2Gene Metrics
"""
%>
        ${ plotter.mermaid_chart(graph2)}
</div>
<div style="overflow:hidden; padding:10px; height:200px">
	<p> Type h in below box </p>
        ${ plotter.create_autocomplete_box('hpoSearch', ['hola', 'hello', 'halo'], 'go2userNode')}
	<input id="output" type="text" placeholder="test">
</div>



<h3> Iframe embedded html (required first argument: path to the html file to embed (not loaded in hash_vars))</h3>
${plotter.prettify_div("<code> plotter.embed_html('hello.html') </code>")}
${ plotter.embed_html('hello.html')}
${plotter.prettify_div("""<code> plotter.embed_html('html_to_embed.html', border=False, html_attribs='style="width: 100vw; height: 100vh;"') </code>""")}
${ plotter.embed_html('html_to_embed.html', border=False, html_attribs='style="width: 100vw; height: 100vh;"') }

<h1> Mermaid with icons and renderize_child_template examples </h1>
<h3> Mermaid with icons example 1 </h3>
${ plotter.renderize_child_template(plotter.get_internal_template('mermaid_icons1.txt'))}

<h3> Mermaid with icons example 2 </h3>
${ plotter.renderize_child_template(plotter.get_internal_template('mermaid_icons2.txt'))}