<commit_before>{% extends "layout.html.twig" %} 
{% block stylesheet %} {{ parent() }}
	<style type="text/css">
        @import "js/datatables.new/media/css/demo_table.css";
        @import "js/datatables.new/media/css/jquery.dataTables.css";
        @import "js/datatables.new/extensions/ColReorder/media/css/ColReorder.css";
        @import "js/datatables.new/extensions/TableTools/media/css/TableTools.css";
        @import "js/datatables.new/extensions/ColVis/media/css/ColVis.css";
        .scrollStyle
        {
		overflow-x:auto;
		float: left;
		width: 100%;
        }
	</style>
{% endblock %}
{% block content %}
	<div id="jsonError" class="alert alert-danger" role="alert" style="display: none; text-align: center; font-weight: bold;">
		<p></p>
	</div>
	<div id="introduction" style="float: left; width: 100%;">
		<p style="text-align:justify"><b>Minimal Recommended Configurations</b>: This tool is in charge of finding the minimal number of executions (and which ones) to model a cluster or cloud service. Using machine learning algorithms, this tool creates a model from the data-set of executions selected through the right panel, then using model-based methods it searches which minimal set of executions are required to model the selected clusters.</p>
		<p style="text-align:justify">To use the tool, select which executions and clusters you want as model through the right filter box (This tool will automatically create a model for this). Then observe the set of executions required, and the estimated error that they produce by only running them. The tool returns different sets of configurations, sets with cardinality 10 to <i>k</i>, each one with a lower error but more executions in it.</p>
		<hr />
	</div>
	<div id="content" style="float: left; width: 68%;">

		<div id="waitdiv" style="float: left; width: 100%;"></div>

		<div class="row panel-group" id="stuffdivs" role="tablist" aria-multiselectable="true">
			<div class="panel-heading" role="tab" id="headingChartDiv">
				<i id="ChartFG" data-toggle="collapse" data-parent="#stuffdivs" href="#chartDivFilter" class="indicator glyphicon glyphicon-chevron-up pull-right"></i>
				<h4 class="panel-title">
					<a data-toggle="collapse" data-parent="#stuffdivs" href="#chartDivFilter" aria-expanded="true" aria-controls="chartDivFilter">
						Error Regression
					</a>
				</h4>
			</div>
			<div id="chartDivFilter" class="panel-collapse collapse in filtersTab" role="tabpanel" aria-labelledby="headingChartDiv">
				<div class="panel-body">
					<div id="chart" style="float: left; width: 100%;"></div>
				</div>
			</div>

			<div class="panel-heading" role="tab" id="headingBenchDiv">
				<i id="BenchFG" data-toggle="collapse" data-parent="#stuffdivs" href="#benchDivFilter" class="indicator glyphicon glyphicon-chevron-down pull-right collapsed"></i>
				<h4 class="panel-title">
					<a class="collapsed" data-toggle="collapse" data-parent="#stuffdivs" href="#benchDivFilter" aria-expanded="true" aria-controls="benchDivFilter">
						Recommended Minimal Configurations
					</a>
				</h4>
			</div>
			<div id="benchDivFilter" class="panel-collapse collapse filtersTab" role="tabpanel" aria-labelledby="headingBenchDiv">
				<div class="panel-body">
					<div style="width: 40%; margin: 0 auto;">
						Display # Configs:
						<select class="form-control" name="select_configs" id="select_configs"></select>
					</div>
					<div id="benchdiv" style="float: left; width: 100%;"></div>
				</div>
			</div>

			<div class="panel-heading" role="tab" id="headingModelInfo">
				<i id="ModelInfoFG" data-toggle="collapse" data-parent="#stuffdivs" href="#modelInfoFilter" class="indicator glyphicon glyphicon-chevron-down pull-right collapsed"></i>
				<h4 class="panel-title">
					<a class="collapsed" data-toggle="collapse" data-parent="#stuffdivs" href="#modelInfoFilter" aria-expanded="true" aria-controls="modelInfoFilter">
						Model Information
					</a>
				</h4>
			</div>
			<div id="modelInfoFilter" class="panel-collapse collapse filtersTab" role="tabpanel" aria-labelledby="headingModelInfo">
				<div class="panel-body">
					<p>{{error_stats | raw}}</p>
					<p>
						<ul>
						<li>Model cache ID: {{id_learner|raw}}</li>
						<li>MinConf cache ID: {{id_minconf|raw}}</li>
						<li>Instance: {{instance|raw}}</li>
						<li>Model Info: {{model_info|raw}}</li>
						<li>Advanced Filters: {{slice_info|raw}}</li>
						</ul>
					</p>
				</div>
			</div>
		</div>
	</div>
	<div style="float: right; width: 30%;">
	{% set select_multiple_benchs = false %}
	{% include 'common/config_filters.html.twig' %}
	</div>
	<div style="clear: both;"></div>
{% endblock %}
{% block javascript %} {{ parent() }}
	<script type="text/javascript" language="javascript" src="js/datatables.new/media/js/jquery.dataTables.min.js"></script>
	<script type="text/javascript" language="javascript" src="js/datatables.new/extensions/FixedHeader/js/dataTables.fixedHeader.min.js"></script>
	<script type="text/javascript" language="javascript" src="js/datatables.new/extensions/ColReorder/js/dataTables.colReorder.min.js"></script>
	<script type="text/javascript" language="javascript" src="js/datatables.new/extensions/TableTools/js/dataTables.tableTools.min.js"></script>
	<script type="text/javascript" language="javascript" src="js/datatables.new/extensions/ColVis/js/dataTables.colVis.min.js"></script>

	<script type="text/javascript" src="js/highcharts/js/highcharts.js"></script>
	<script type="text/javascript" src="js/highcharts/js/highcharts-more.js"></script>
	<script type="text/javascript" src="js/utils.js"></script>

	<script type="text/javascript">
	$(document).ready(function()
	{
		document.getElementById('submit').id = 'submitForm';

		$('jsonError').innerHTML = "<p>{{message}}</p>";

		if ("{{must_wait}}"== "NO")
		{
			$('#chart').highcharts( {
	    		        chart: { type: 'column', zoomType: 'xy' },
	    		        title: { text: 'Recomended Configurations' },
	    		        subtitle: { text: 'Progression of executions added to reconstruct the model' },
	    		        xAxis: {
	    		            title: { enabled: true, text: 'Number of Experiments' },
	    		            startOnTick: true,
	    		            endOnTick: true,
	    		            showLastLabel: true
	    		        },
	    		        yAxis: { title: { text: 'Relative Absolute Error (s)' } },
			        credits: { enabled: false },
	    		        plotOptions: {
				    series: { turboThreshold: 5000 },
	    		            scatter: {
	    		                marker: {
	    		                    radius: 5,
	    		                    states: { hover: { enabled: true, lineColor: 'rgb(100,100,100)' } }
	    		                },
	    		                states: { hover: { marker: { enabled: false } } },
	    		                tooltip: {
	    		                    headerFormat: '',
	    		                    pointFormat: '<b>{point.name}</b> <br/> {point.x} s, {point.y} s'
	    		                }
	    		            }
	    		        },
				legend: { enabled: false },
	    		        series: [{color: '#AAF', data: {{ jsonData | raw }}}]
			});

			var configs = {{ configs | raw }};

			for (i = 0; i < configs.length; i++)
			{
				oTable = $('#benchdiv').append('<div id="divbmk'+i+'" class="bmk_configs"><p>Using '+(i+1)*10+' Configs</p><table id="benchmark'+i+'" cellpadding="0" cellspacing="0" border="0" class="display" width="100%"><thead></thead></table><hr/></div>');<commit_msg>WEB: Small text change in ML<commit_after>{% extends "layout.html.twig" %} 
{% block stylesheet %} {{ parent() }}
	<style type="text/css">
        @import "js/datatables.new/media/css/demo_table.css";
        @import "js/datatables.new/media/css/jquery.dataTables.css";
        @import "js/datatables.new/extensions/ColReorder/media/css/ColReorder.css";
        @import "js/datatables.new/extensions/TableTools/media/css/TableTools.css";
        @import "js/datatables.new/extensions/ColVis/media/css/ColVis.css";
        .scrollStyle
        {
		overflow-x:auto;
		float: left;
		width: 100%;
        }
	</style>
{% endblock %}
{% block content %}
	<div id="jsonError" class="alert alert-danger" role="alert" style="display: none; text-align: center; font-weight: bold;">
		<p></p>
	</div>
	<div id="introduction" style="float: left; width: 100%;">
		<p style="text-align:justify"><b>Minimal Recommended Configurations</b>: This tool is in charge of finding the minimal number of executions (and which ones) to model a cluster or cloud service. Using machine learning algorithms, this tool creates a model from the data-set of executions selected through the right panel, then using model-based methods it searches which minimal set of executions are required to model the selected clusters.</p>
		<p style="text-align:justify">To use the tool, select which executions and clusters you want as model through the right filter box (This tool will automatically create a model for this). Then observe the set of executions required, and the estimated error that they produce by only running them. The tool returns different sets of configurations, sets with cardinality 10 to <i>k</i>, each one with a lower error but more executions in it.</p>
		<hr />
	</div>
	<div id="content" style="float: left; width: 68%;">

		<div id="waitdiv" style="float: left; width: 100%;"></div>

		<div class="row panel-group" id="stuffdivs" role="tablist" aria-multiselectable="true">
			<div class="panel-heading" role="tab" id="headingChartDiv">
				<i id="ChartFG" data-toggle="collapse" data-parent="#stuffdivs" href="#chartDivFilter" class="indicator glyphicon glyphicon-chevron-up pull-right"></i>
				<h4 class="panel-title">
					<a data-toggle="collapse" data-parent="#stuffdivs" href="#chartDivFilter" aria-expanded="true" aria-controls="chartDivFilter">
						Error Regression
					</a>
				</h4>
			</div>
			<div id="chartDivFilter" class="panel-collapse collapse in filtersTab" role="tabpanel" aria-labelledby="headingChartDiv">
				<div class="panel-body">
					<div id="chart" style="float: left; width: 100%;"></div>
				</div>
			</div>

			<div class="panel-heading" role="tab" id="headingBenchDiv">
				<i id="BenchFG" data-toggle="collapse" data-parent="#stuffdivs" href="#benchDivFilter" class="indicator glyphicon glyphicon-chevron-down pull-right collapsed"></i>
				<h4 class="panel-title">
					<a class="collapsed" data-toggle="collapse" data-parent="#stuffdivs" href="#benchDivFilter" aria-expanded="true" aria-controls="benchDivFilter">
						Recommended Minimal Configurations
					</a>
				</h4>
			</div>
			<div id="benchDivFilter" class="panel-collapse collapse filtersTab" role="tabpanel" aria-labelledby="headingBenchDiv">
				<div class="panel-body">
					<div style="width: 40%; margin: 0 auto;">
						Display # Configs:
						<select class="form-control" name="select_configs" id="select_configs"></select>
					</div>
					<div id="benchdiv" style="float: left; width: 100%;"></div>
				</div>
			</div>

			<div class="panel-heading" role="tab" id="headingModelInfo">
				<i id="ModelInfoFG" data-toggle="collapse" data-parent="#stuffdivs" href="#modelInfoFilter" class="indicator glyphicon glyphicon-chevron-down pull-right collapsed"></i>
				<h4 class="panel-title">
					<a class="collapsed" data-toggle="collapse" data-parent="#stuffdivs" href="#modelInfoFilter" aria-expanded="true" aria-controls="modelInfoFilter">
						Model Information
					</a>
				</h4>
			</div>
			<div id="modelInfoFilter" class="panel-collapse collapse filtersTab" role="tabpanel" aria-labelledby="headingModelInfo">
				<div class="panel-body">
					<p>{{error_stats | raw}}</p>
					<p>
						<ul>
						<li>Model cache ID: {{id_learner|raw}}</li>
						<li>MinConf cache ID: {{id_minconf|raw}}</li>
						<li>Instance: {{instance|raw}}</li>
						<li>Model Info: {{model_info|raw}}</li>
						<li>Advanced Filters: {{slice_info|raw}}</li>
						</ul>
					</p>
				</div>
			</div>
		</div>
	</div>
	<div style="float: right; width: 30%;">
	{% set select_multiple_benchs = false %}
	{% include 'common/config_filters.html.twig' %}
	</div>
	<div style="clear: both;"></div>
{% endblock %}
{% block javascript %} {{ parent() }}
	<script type="text/javascript" language="javascript" src="js/datatables.new/media/js/jquery.dataTables.min.js"></script>
	<script type="text/javascript" language="javascript" src="js/datatables.new/extensions/FixedHeader/js/dataTables.fixedHeader.min.js"></script>
	<script type="text/javascript" language="javascript" src="js/datatables.new/extensions/ColReorder/js/dataTables.colReorder.min.js"></script>
	<script type="text/javascript" language="javascript" src="js/datatables.new/extensions/TableTools/js/dataTables.tableTools.min.js"></script>
	<script type="text/javascript" language="javascript" src="js/datatables.new/extensions/ColVis/js/dataTables.colVis.min.js"></script>

	<script type="text/javascript" src="js/highcharts/js/highcharts.js"></script>
	<script type="text/javascript" src="js/highcharts/js/highcharts-more.js"></script>
	<script type="text/javascript" src="js/utils.js"></script>

	<script type="text/javascript">
	$(document).ready(function()
	{
		document.getElementById('submit').id = 'submitForm';

		$('jsonError').innerHTML = "<p>{{message}}</p>";

		if ("{{must_wait}}"== "NO")
		{
			$('#chart').highcharts( {
	    		        chart: { type: 'column', zoomType: 'xy' },
	    		        title: { text: 'Recomended Configurations' },
	    		        subtitle: { text: 'Progression of executions added to reconstruct the model' },
	    		        xAxis: {
	    		            title: { enabled: true, text: 'Number of Executions' },
	    		            startOnTick: true,
	    		            endOnTick: true,
	    		            showLastLabel: true
	    		        },
	    		        yAxis: { title: { text: 'Relative Absolute Error (s)' } },
			        credits: { enabled: false },
	    		        plotOptions: {
				    series: { turboThreshold: 5000 },
	    		            scatter: {
	    		                marker: {
	    		                    radius: 5,
	    		                    states: { hover: { enabled: true, lineColor: 'rgb(100,100,100)' } }
	    		                },
	    		                states: { hover: { marker: { enabled: false } } },
	    		                tooltip: {
	    		                    headerFormat: '',
	    		                    pointFormat: '<b>{point.name}</b> <br/> {point.x} s, {point.y} s'
	    		                }
	    		            }
	    		        },
				legend: { enabled: false },
	    		        series: [{color: '#AAF', data: {{ jsonData | raw }}}]
			});

			var configs = {{ configs | raw }};

			for (i = 0; i < configs.length; i++)
			{
				oTable = $('#benchdiv').append('<div id="divbmk'+i+'" class="bmk_configs"><p>Using '+(i+1)*10+' Configs</p><table id="benchmark'+i+'" cellpadding="0" cellspacing="0" border="0" class="display" width="100%"><thead></thead></table><hr/></div>');
{'fraction_non_alphanumeric': 0.16659978598180844, 'fraction_numerical': 0.0072231139646869984, 'mean_word_length': 3.349331006399069, 'pattern_counts': {'":': 0, '<': 241, '<?xml version=': 0, '>': 239, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3427731', 'n_tokens_mistral': 5384, 'n_tokens_neox': 4602, 'n_words': 1056}