function SetUiStateRunning() { $('#resultTable').html(''); $('#resultInfo').html('waiting for result...'); $('#msgContainer').attr('class', 'alert alert-warning'); $('#performanceDataTable tbody').html(''); } function SetUiStateError(msg) { $('#resultInfo').html(msg); $('#msgContainer').attr('class', 'alert alert-danger'); $('#performanceDataTable tbody').html(''); } function SetUiStateSuccess(msg) { $('#msgContainer').attr('class', 'alert alert-success'); $('#resultInfo').html(msg); } function GetHyriseUrl() { var endpointUrl = $('#endpointInput').val(); return endpointUrl; } function GetQuery() { var query = $('#queryInput').val(); // Check whether a part of the query has been selected var selectedText = GetSelectedText(); if (query.indexOf(selectedText) >= 0) { query = selectedText; } return query; } /** * Bootstrap */ $(function() { LoadSampleQueries('sample-queries.sql'); // Simple query submit $('#submitBtn').click(function() { SetUiStateRunning(); var query = GetQuery(); var hyrise = new HyriseConnector(GetHyriseUrl()); hyrise.executeSQL(query, function(result) { console.log("Query result: ", result); // On Success SetUiStateSuccess('Result contains ' + result.real_size + ' rows'); UpdateResultTable(result); UpdatePerformanceData(result.performanceData); }, function(xhr, status, error) { // console.log(arguments); // On Error var msg = 'Error when fetching result. Possibly no connection to Hyrise.'; if (xhr.responseJSON) msg = xhr.responseJSON.error[0]; SetUiStateError(msg); }); }); $('#queryInput').keypress(function(evt) { if (evt.keyCode == 13 && evt.shiftKey) { $('#submitBtn').click(); return false; } return true; }); // Benchmark submit $('#benchmarkBtn').click(function() { SetUiStateRunning(); var query = GetQuery(); var hyrise = new HyriseConnector(GetHyriseUrl()); // TODO: hardcoded 5 var numRuns = parseInt($('#benchmarkInput').val()); hyrise.benchmarkSQL(query, numRuns, function(result) { console.log("Benchmark result: ", result); UpdatePerformanceData(result.performanceData); SetUiStateSuccess('Success! See PerformanceData for results.'); }); }); // Setup Table triggers var table = document.querySelector('#performanceDataTable'); $('#performanceDataTable thead th').click(function() { var key = $(this).attr('data-key'); if (table._sortKey && table._sortKey == key) table._asc = !table._asc; else table._asc = true; var sign = (table._asc) ? 1 : -1; if (table._data) { table._sortKey = key; SortTableData(table); InsertPerformanceData(table._data); } }); }); function GetSelectedText() { var text = ""; if (window.getSelection) { text = window.getSelection().toString(); } else if (document.selection && document.selection.type != "Control") { text = document.selection.createRange().text; } return (text === "") ? null : text; } function LoadSampleQueries(url) { $.get(url, function(data) { var lines = data.split('\n'); var name, query = "", isBuggy = false; $.each(lines, function(i, line) { if (line[0] == '#') { // Append last query if (name && !isBuggy) AddSampleQuery(name, query); if (name && isBuggy) AddBuggyQuery(name, query); // New query isBuggy = (line[1] == '!'); name = line.substring((isBuggy) ? 3 : 2); query = ""; } else { query += line + '\n'; } }); if (name && !isBuggy) AddSampleQuery(name, query); if (name && isBuggy) AddBuggyQuery(name, query); }); } function AddSampleQuery(name, query) { var btn = $(''); btn.click(function(evt) { $('#queryInput').val(query); if (!evt.shiftKey) { $('#submitBtn').click(); } }); $('#sampleQueries').append(btn); } function AddBuggyQuery(name, query) { var btn = $(''); btn.click(function(evt) { $('#queryInput').val(query); if (!evt.shiftKey) { $('#submitBtn').click(); } }); $('#buggyQueries').append(btn); } function CreateElement(tag, value) { return $('<' + tag + '>' + value + ''); }; function UpdateResultTable(result) { // Present result json in result-view var table = $('#resultTable'); table.html(''); var th = $(''); $.each(result.header, function(i, val) { th.append($('' + val + '')); }); table.append(th); // Limit the rows to be displayed to 100 for (var i = 0; i < 100 && i < result.real_size; ++i) { var row = result.rows[i]; var tr = $(''); $.each(row, function(j, val) { tr.append($('' + val + '')); }); table.append(tr); } }; function UpdatePerformanceData(performanceData) { var table = document.querySelector('#performanceDataTable'); var timeStrings = [ (performanceData.queryTaskTime + performanceData.parseTime).toFixed(3), performanceData.queryTaskTime.toFixed(3), performanceData.parseTime.toFixed(3), performanceData.totalTime.toFixed(3), ] var timeInfo = + ',' $('#timeInfo').html(timeStrings.join(',')); // Sort and insert into table var tableData = performanceData.operators; table._data = tableData; SortTableData(table); InsertPerformanceData(tableData); }; function InsertPerformanceData(performanceData) { var tbody = $('#performanceDataTable tbody'); tbody.html(''); $.each(performanceData, function(i, data) { if (!data.time_ms) data.time_ms = data.endTime - data.startTime; var tr = $(''); tr.append(CreateElement('td', data.id)); tr.append(CreateElement('td', data.name)); tr.append(CreateElement('td', data.duration)); tr.append(CreateElement('td', data.time_ms.toFixed(6))); tr.append(CreateElement('td', data.startTime)); tr.append(CreateElement('td', data.endTime)); tbody.append(tr); }); } function SortTableData(table) { if (!table._sortKey) table._sortKey = 'startTime'; if (!('_asc') in table) table._asc = true; var key = table._sortKey; var sign = (table._asc) ? -1 : 1; table._data.sort(function(a, b) { if (a[key].localeCompare) return sign * a[key].localeCompare(b[key]); return sign * (a[key] - b[key]); }); }