Skip to content

Commit 8ed94ec

Browse files
ASbeletskyASbeletsky
committed
add time efficiency table and improve UI
1 parent 609281a commit 8ed94ec

7 files changed

Lines changed: 141 additions & 14 deletions

File tree

‎css/stylesheet.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -732,4 +732,9 @@ input[type=number]::-webkit-outer-spin-button {
732732

733733
.workspace {
734734
overflow: auto;
735+
}
736+
737+
.slider.slider-horizontal {
738+
width: 100%;
739+
height: 20px;
735740
}

‎js/experiment/components/ExecutionTimeChart.js‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,23 @@
11
import React from 'react';
22
import { connect } from 'react-redux'
3-
import {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend} from 'recharts';
3+
import {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, Label } from 'recharts';
44

55
const colors = ["#8884d8", "#82ca9d", "#ffc658" ];
66

77
class ExecutionTimeChart extends React.Component {
88
render() {
99
return (
1010
<LineChart width={700} height={350} data={this.props.timeMeasure}
11-
margin={{top: 5, right: 0, left: 5, bottom: 5}}>
12-
<XAxis dataKey="graphSize"/>
13-
<YAxis />
11+
margin={{top: 10, right: 50, left: 5, bottom: 15}}>
12+
<XAxis dataKey="graphSize">
13+
<Label value="Graph size" offset={0} position="bottom" />
14+
</XAxis>
15+
<YAxis >
16+
<Label value="Time (ms)" offset={0} position="insideLeft" />
17+
</YAxis>
1418
<CartesianGrid strokeDasharray="3 3"/>
1519
<Tooltip/>
16-
<Legend />
20+
<Legend verticalAlign="top"/>
1721
{
1822
this.props.algorithms.map((algorithmName, index) =>{
1923
return <Line key={index} type="monotone" dataKey={algorithmName} stroke={colors[index]}/>

‎js/experiment/components/Layout.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import ExperimentForm from './experiment_settings/ExperimentForm'
33
import ExecutionTimeChart from './ExecutionTimeChart'
4+
import TimeEfficiencyTable from './TimeEfficiencyTable'
45
const app = require('./../../app');
56

67
class Layout extends React.Component{
@@ -15,6 +16,10 @@ class Layout extends React.Component{
1516
<h3>Execution time</h3>
1617
</div>
1718
<ExecutionTimeChart/>
19+
<div className="text-center">
20+
<h3>Time efficiency</h3>
21+
</div>
22+
<TimeEfficiencyTable/>
1823
</div>
1924
</div>);
2025
}

‎js/experiment/components/TimeEfficiencyTable.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React from 'react';
2+
import { connect } from 'react-redux'
3+
const efficiencyMeasure = require('./../efficiency-measure.js')
4+
5+
class TimeEfficiencyTable extends React.Component{
6+
render(){
7+
var showResults = this.props.calculationsPerformed && this.props.algorithms.length >= 2;
8+
if(showResults) {
9+
return (
10+
<table className="table table-bordered">
11+
<thead>
12+
<tr>
13+
<th>Algorithm</th>
14+
<th>Efficiency criteria</th>
15+
{
16+
this.props.algorithms.map((algorithmName, index) => {
17+
return <th key={index}>{algorithmName}</th>
18+
})
19+
}
20+
</tr>
21+
</thead>
22+
<tbody>
23+
{
24+
this.props.algorithms.map((firstAlgorithm, index) => {
25+
return (<tr key={index}>
26+
<td>{firstAlgorithm}</td>
27+
<td>
28+
<div>Dominance rate</div>
29+
<div>Dominance region</div>
30+
</td>
31+
{
32+
this.props.algorithms.map((secondAlgorithm, index) => {
33+
return <td key={index}>
34+
<div>{this.props.dominance[firstAlgorithm][secondAlgorithm].rate.toFixed(2) * 100 + '%'}</div>
35+
<div>{this.props.dominance[firstAlgorithm][secondAlgorithm].region.toFixed(2) * 100 + '%'}</div>
36+
</td>
37+
})
38+
}
39+
</tr>)
40+
})
41+
}
42+
</tbody>
43+
</table>
44+
);
45+
} else {
46+
return <div></div>;
47+
}
48+
}
49+
}
50+
51+
function mapStateToProps(state) {
52+
return {
53+
algorithms: state.algorithms,
54+
calculationsPerformed: state.timeMeasure.length > 0,
55+
dominance: efficiencyMeasure.calculateDominance(state.algorithms, state.timeMeasure)
56+
};
57+
}
58+
59+
export default connect(mapStateToProps)(TimeEfficiencyTable)

‎js/experiment/components/experiment_settings/ExperimentForm.js‎

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@ class ExperimentForm extends React.Component{
3030
};
3131

3232
this.state = {
33-
graphSizeFrom: 10,
34-
graphSizeTo: 500,
33+
graphSizeFrom: 50,
34+
graphSizeTo: 100,
3535
graphSizeStep: 10,
3636
selectedProblem: defaultProblem,
3737
selectedAlgorithms: "",
@@ -85,20 +85,31 @@ class ExperimentForm extends React.Component{
8585
return (
8686
<div className="form-horizontal">
8787
<h3>Step 1. Generate input graphs</h3>
88-
<GraphSizeSlider minValue={10} maxValue={2000} stepSize={this.state.graphSizeStep} from={this.state.graphSizeFrom} to={this.state.graphSizeTo} onChange={this.handleChangeGraphSize.bind(this)}/>
88+
<GraphSizeSlider minValue={10} maxValue={1000} stepSize={this.state.graphSizeStep} from={this.state.graphSizeFrom} to={this.state.graphSizeTo} onChange={this.handleChangeGraphSize.bind(this)}/>
8989
<h3>Step 2. Select algorithms for experiment</h3>
90+
<br/>
9091
<div className="form-group">
9192
<label className="col-md-3">Problem</label>
92-
<Select className="col-md-5" name="problem" value={this.state.selectedProblem} onChange={this.handleChangeProblem.bind(this)} options={this.state.graphProblems} />
93+
<Select className="col-md-9" name="problem" value={this.state.selectedProblem} onChange={this.handleChangeProblem.bind(this)} options={this.state.graphProblems} />
9394
</div>
9495
<div className="form-group">
9596
<label className="col-md-3">Algorithms</label>
96-
<Select simpleValue className="col-md-5" name="algorithms" multi onChange={this.handleChangeAlgomithms.bind(this)} value={this.state.selectedAlgorithms} options={this.state.problemAlgorithms} />
97+
<Select simpleValue className="col-md-9" name="algorithms" multi onChange={this.handleChangeAlgomithms.bind(this)} value={this.state.selectedAlgorithms} options={this.state.problemAlgorithms} />
9798
</div>
9899
<h3>Step 3. Run experiment</h3>
99-
<button onClick={this.runAlgorithms.bind(this)} className="btn btn-primary">Run</button>
100-
<div className="col-md-8">
101-
<ExperimentProgressBar percentComplete={this.getProcessedGraphsPercent().toFixed(2)} />
100+
<br/>
101+
<div className="form-group">
102+
<div className="col-md-2">
103+
<label>Progress:</label>
104+
</div>
105+
<div className="col-md-8">
106+
<ExperimentProgressBar percentComplete={this.getProcessedGraphsPercent().toFixed(2)} />
107+
</div>
108+
<div className="col-md-2">
109+
<a href="#" className="btn-sm btn-primary" onClick={this.runAlgorithms.bind(this)}>
110+
<i className="fa fa-play" aria-hidden="true"> Run</i>
111+
</a>
112+
</div>
102113
</div>
103114
</div>);
104115
}

‎js/experiment/components/experiment_settings/GraphSizeSlider.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,9 @@ export default class GraphSizeSlider extends React.Component{
5454
<div>
5555
<div className="form-group">
5656
<label className="col-md-4">Vertices count range</label>
57-
<input ref="vertexRange" type="text" />
57+
<div className="col-md-8">
58+
<input ref="vertexRange" type="text" />
59+
</div>
5860
</div>
5961
<div className="form-group">
6062
<label className="col-md-4">Lower bound</label>

‎js/experiment/efficiency-measure.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
const calculateAverage = arr => arr.reduce( ( accum, current ) => accum + current, 0 ) / arr.length;
2+
3+
const calculateAlgorithmDominanceRateAtPoint = function (executionTime1, executionTime2) {
4+
return (executionTime1 - executionTime2)/Math.max(executionTime1, executionTime2);
5+
};
6+
7+
const calculateAlgorithmDominanceRate = function (firstAlgorithmName, secondAlgorithmName, executionTimeMeasure) {
8+
let dominanceRates = executionTimeMeasure.map(timeAtPoint => calculateAlgorithmDominanceRateAtPoint(timeAtPoint[firstAlgorithmName], timeAtPoint[secondAlgorithmName]));
9+
return calculateAverage(dominanceRates);
10+
};
11+
12+
const calculateAlgorithmDominanceRegionAtPoint = function (executionTime1, executionTime2) {
13+
return Math.sign(executionTime1 - executionTime2);
14+
};
15+
16+
const calculateAlgorithmDominanceRegion = function(firstAlgorithmName, secondAlgorithmName, executionTimeMeasure){
17+
let dominanceRegions = executionTimeMeasure.map(timeAtPoint => calculateAlgorithmDominanceRegionAtPoint(timeAtPoint[firstAlgorithmName], timeAtPoint[secondAlgorithmName]));
18+
return calculateAverage(dominanceRegions);
19+
};
20+
21+
const calculateDominance = function (algothms, executionTimeMeasure) {
22+
const dominance = {};
23+
algothms.forEach((first) => {
24+
dominance[first] = {};
25+
algothms.forEach((second) => {
26+
let same = first == second;
27+
dominance[first][second] = {
28+
rate: same ? 0 : calculateAlgorithmDominanceRate(first, second, executionTimeMeasure),
29+
region: same ? 0 : calculateAlgorithmDominanceRegion(first, second, executionTimeMeasure)
30+
}
31+
});
32+
});
33+
34+
return dominance;
35+
};
36+
37+
module.exports = {
38+
calculateDominance,
39+
calculateAlgorithmDominanceRegion,
40+
calculateAlgorithmDominanceRate
41+
};

0 commit comments

Comments
 (0)