From d41bcd0166879b0eaa85ff9af4b2f2d81ddee474 Mon Sep 17 00:00:00 2001
From: Jaden Diefenbaugh <blakcap@users.noreply.github.com>
Date: Wed, 22 Feb 2017 13:44:13 +0100
Subject: [PATCH] add modal for choosing group when adding report from exps
page
---
.../static/experiments/js/utils.js | 378 +++++++++++++-----
1 file changed, 286 insertions(+), 92 deletions(-)
diff --git a/beat/web/experiments/static/experiments/js/utils.js b/beat/web/experiments/static/experiments/js/utils.js
index 12b27a8cc..c5e797e45 100644
--- a/beat/web/experiments/static/experiments/js/utils.js
+++ b/beat/web/experiments/static/experiments/js/utils.js
@@ -1817,6 +1817,281 @@ beat.experiments.utils.modal_add_to_report = function (names, report_list_url) {
}
});
+ // takes the selected report
+ // returns the form group ready to be added to the dialogue
+ function selectGroupMenu(reportData){
+ /*
+ * {
+ * '<group name 1>': { experiments: [], reportItemIds: [] },
+ * ....
+ * '<group name n>': { experiments: [], reportItemIds: [] }
+ * }
+ */
+ let groups = reportData.content.groups;
+
+ let form_group = $(document.createElement('div')).addClass('form-group');
+ let select = $(document.createElement('select')).addClass('form-control');
+ select.attr('display', 'block');
+ select.chosen({
+ search_contains: true,
+ allow_single_deselect: true,
+ });
+
+ Object.entries(groups)
+ .forEach(([groupName, groupObj]) => {
+ let opt = $(document.createElement('option'));
+ let div = $(document.createElement('div'));
+ let help = $(document.createElement('span')).addClass('experiments');
+
+ opt.val(groupName);
+ opt.data('name', groupName);
+
+ div.text(groupName);
+
+ help.text(` (${groupObj.experiments.reduce((s, n) => `${s}${n}`, '')})`);
+
+ div.append(help);
+ opt.append(div);
+ select.append(opt);
+ });
+
+ form_group.append(select);
+ console.log(form_group);
+
+ return form_group;
+ }
+
+ // select a group in the report for the experiment to go in
+ function addToGroup(reportData, names, selectedVal) {
+ console.log(reportData);
+ console.log(names);
+ console.log(selectedVal);
+ let reportExpDetailUrl = selectedVal.replace(/add\/$/, 'results_author/');
+ console.log(reportExpDetailUrl);
+
+ return $.ajax({
+
+ type: 'GET',
+ url: reportExpDetailUrl,
+
+ }).pipe(function(data) {
+ $.when(...names.map(n => $.ajax({type:'GET', url: `http://localhost:8000/api/v1/experiments/${n}/`})))
+ .then((...rawData) => {
+ console.log(data);
+ console.log(rawData);
+ // the spread operator wont put a single array in an array,
+ // but we always want an arr of arrs
+ let expData = typeof rawData[0] === 'array' ? rawData : [rawData];
+ // the expData is an array of arrays,
+ // with the first element of the subarray being the exp data
+ let experiments = expData
+ // instead of just an arr of exp objs,
+ // make it:
+ // {
+ // <exp name 1>: <exp data>,
+ // <exp name 2>: <exp data>,
+ // }
+ .map((d, i) => { return { [names[i]]: d[0] }; })
+ .reduce((o, e) => Object.assign(o, e), {});
+ let groups = reportData.content.groups;
+
+ let message = $(document.createElement('div'));
+ message.append($(document.createElement('p')).text('By clicking Add, the experiment(s) will be added to the selected group in the report (if possible). You can cancel the operation by clicking Cancel.'));
+ let form_group = $(document.createElement('div')).addClass('form-group');
+ message.append(form_group);
+ let select = $(document.createElement('select')).addClass('form-control');
+ form_group.append(select);
+ let first_option = $(document.createElement('option'));
+ select.append(first_option);
+ first_option.val('');
+ first_option.attr('disabled', true);
+ first_option.attr('selected', true);
+ first_option.text('Select a group...');
+
+ select.chosen({
+ disable_search_threshold: 5,
+ search_contains: true,
+ allow_single_deselect: true,
+ });
+
+ select.on('chosen:showing_dropdown', function(e, params) {
+ select.find('option:gt(0)').remove();
+ select.find('option:eq(0)').attr('selected', true);
+ console.log(groups);
+ console.log(experiments);
+ Object.entries(groups)
+ .filter(([groupName, groupData]) => {
+ // get the analyzer name from the fetched data
+ const getAnalyzerFromExpName = (expName) => {
+ let analyzers = experiments[expName].declaration.analyzers;
+ let analyzer = analyzers[Object.keys(analyzers)[0]];
+ return analyzer.algorithm;
+ };
+
+ // if the selected experiments dont all have the same analyzer,
+ // the only group they can all be added to is 'default',
+ // the default group
+ let analyzerSet = (new Set(Object.keys(experiments).map(e => getAnalyzerFromExpName(e))));
+ console.log(analyzerSet);
+ if(analyzerSet.size !== 1){
+ console.log(`multi analyzers, returning dfeault group only`);
+ return groupName === 'default';
+ }
+
+ // one analyzer, just return groups with that analyzer
+ return groupData.analyzer === ''
+ || groupData.analyzer === getAnalyzerFromExpName(Object.keys(experiments)[0]);
+ })
+ .forEach(([groupName, groupData]) => {
+ let opt = $(document.createElement('option'));
+ select.append(opt);
+ opt.val(groupName);
+ let div = $(document.createElement('div'));
+ opt.append(div);
+ opt.data('name', groupName);
+ div.text(groupName);
+ if (groupData.experiments) {
+ let help = $(document.createElement('span')).addClass('help');
+ help.text(` (${groupData.experiments.reduce((s, n) => s + n, '')})`);
+ div.append(help);
+ }
+ });
+ select.trigger('chosen:updated');
+ select.trigger('chosen:open');
+ });
+
+ //fix options when selected
+ select.on('change', function(e, params) {
+ let selected = $(this).find('option:selected');
+ selected.text(selected.data('name'));
+ select.trigger('chosen:updated');
+ });
+
+ BootstrapDialog.show({
+ title: '<i class="fa fa-file-text-o fa-lg"></i> Select a group',
+ message: message,
+ type: BootstrapDialog.TYPE_PRIMARY,
+ buttons: [
+ {
+ label: 'Cancel',
+ cssClass: 'btn-default',
+ action: function(the_dialog) {
+ the_dialog.close();
+ return false;
+ },
+ },
+ {
+ label: 'Add',
+ cssClass: 'btn-primary',
+ action: function(the_dialog) {
+ if (!select.val()) {
+ BootstrapDialog.alert({
+ title: '<i class="fa fa-warning"></i> Error',
+ message: 'You must select a group to add experiments to',
+ type: BootstrapDialog.TYPE_WARNING,
+ });
+ return false;
+ }
+ the_dialog.close();
+
+ console.log(`Got group of ${JSON.stringify(select.val())}`);
+
+ var post_info = {
+ experiments: names,
+ group: select.val()
+ };
+ console.log(`Sending: ${JSON.stringify(post_info)}`);
+
+ var d = $.ajax({
+ type: "POST",
+ data: JSON.stringify(post_info),
+ url: selectedVal,
+ contentType: "application/json; charset=utf-8",
+ dataType: 'json',
+ });
+
+ d.done(function(data, status) {
+
+ var message = $(document.createElement('div'));
+ message.addClass('report-results');
+
+ var sent = post_info.experiments.length;
+ var successful = sent;
+
+ var description = $(document.createElement('h5'));
+ message.append(description);
+
+ if (data !== undefined) {
+ // some experiments have failed
+
+ // adds information about failed/incompatible experiments
+ function _add_list(message, objects, title) {
+ if (objects === undefined) return;
+ var length = objects.length;
+ if (length > 0) {
+ var _title = $(document.createElement('h5'));
+ _title.text(title);
+ message.append(_title);
+ var ul = $(document.createElement('ul'));
+ for (var i = 0; i < length; ++i) {
+ var li = $(document.createElement('li'));
+ li.text(objects[i]);
+ ul.append(li);
+ }
+ message.append(ul);
+ }
+ return length;
+ }
+ if (data.inaccessible_experiments !== undefined)
+ successful -= _add_list(message, data.inaccessible_experiments,
+ 'These experiments have failed (and cannot be added):');
+ if (data.incompatible_experiments !== undefined)
+ successful -= _add_list(message, data.incompatible_experiments,
+ 'These experiments have different analyzers (and cannot be added):');
+ }
+
+ var size = BootstrapDialog.SIZE_NORMAL;
+ var type = BootstrapDialog.TYPE_PRIMARY;
+ var title = '<i class="fa fa-check"></i> Report changes';
+ var btn_type = 'btn-primary';
+ if (successful == sent) {
+ description.text('Successfully added ' + sent + ' experiment(s) to report');
+ }
+ else {
+ description.text('Added ' + successful + ' (out of ' + sent + ' in total) experiment(s) to report');
+ size = BootstrapDialog.SIZE_WIDE;
+ type = BootstrapDialog.TYPE_WARNING;
+ btn_type = 'btn-warning';
+ title = '<i class="fa fa-warning"></i> Report changes';
+ }
+
+ BootstrapDialog.show({
+ title: title,
+ message: message,
+ size: size,
+ type: type,
+ buttons: [{
+ label: 'OK',
+ cssClass: btn_type,
+ action: function(dialog){dialog.close();},
+ }]
+ });
+
+ return true;
+ });
+
+ d.fail(function(data, status) {
+ process_error(data, status);
+ });
+
+ },
+ },
+ ],
+ });
+ });
+ });
+ }
+
//retrieve list of existing reports - if that succeeds, construct modal form
function addToReport(names) {
return $.ajax({
@@ -1826,13 +2101,13 @@ beat.experiments.utils.modal_add_to_report = function (names, report_list_url) {
}).pipe(function(data) {
console.log(data);
- var message = $(document.createElement('div'));
+ let message = $(document.createElement('div'));
message.append($(document.createElement('p')).text('By clicking Add, the experiment(s) will be added to the selected report (if possible). You can cancel the operation by clicking Cancel.'));
- var form_group = $(document.createElement('div')).addClass('form-group');
+ let form_group = $(document.createElement('div')).addClass('form-group');
message.append(form_group);
- var select = $(document.createElement('select')).addClass('form-control');
+ let select = $(document.createElement('select')).addClass('form-control');
form_group.append(select);
- var first_option = $(document.createElement('option'));
+ let first_option = $(document.createElement('option'));
select.append(first_option);
first_option.val('');
first_option.attr('disabled', true);
@@ -1849,15 +2124,15 @@ beat.experiments.utils.modal_add_to_report = function (names, report_list_url) {
select.find('option:gt(0)').remove();
select.find('option:eq(0)').attr('selected', true);
data.forEach(function(i) {
- var opt = $(document.createElement('option'));
+ let opt = $(document.createElement('option'));
select.append(opt);
opt.val(i.add_url);
- var div = $(document.createElement('div'));
+ let div = $(document.createElement('div'));
opt.append(div);
opt.data('name', i.name);
div.text(i.name);
if (i.short_description) {
- var help = $(document.createElement('span')).addClass('help');
+ let help = $(document.createElement('span')).addClass('help');
help.text(' (' + i.short_description + ')');
div.append(help);
}
@@ -1867,8 +2142,9 @@ beat.experiments.utils.modal_add_to_report = function (names, report_list_url) {
});
//fix options when selected
+ let selected;
select.on('change', function(e, params) {
- var selected = $(this).find('option:selected');
+ selected = $(this).find('option:selected');
selected.text(selected.data('name'));
select.trigger('chosen:updated');
});
@@ -1900,90 +2176,7 @@ beat.experiments.utils.modal_add_to_report = function (names, report_list_url) {
}
the_dialog.close();
- var post_info = {experiments:names};
-
- var d = $.ajax({
- type: "POST",
- data: JSON.stringify(post_info),
- url: select.val(),
- contentType: "application/json; charset=utf-8",
- dataType: 'json',
- });
-
- d.done(function(data, status) {
-
- var message = $(document.createElement('div'));
- message.addClass('report-results');
-
- var sent = post_info.experiments.length;
- var successful = sent;
-
- var description = $(document.createElement('h5'));
- message.append(description);
-
- if (data !== undefined) {
- // some experiments have failed
-
- // adds information about failed/incompatible experiments
- function _add_list(message, objects, title) {
- if (objects === undefined) return;
- var length = objects.length;
- if (length > 0) {
- var _title = $(document.createElement('h5'));
- _title.text(title);
- message.append(_title);
- var ul = $(document.createElement('ul'));
- for (var i = 0; i < length; ++i) {
- var li = $(document.createElement('li'));
- li.text(objects[i]);
- ul.append(li);
- }
- message.append(ul);
- }
- return length;
- }
- if (data.inaccessible_experiments !== undefined)
- successful -= _add_list(message, data.inaccessible_experiments,
- 'These experiments have failed (and cannot be added):');
- if (data.incompatible_experiments !== undefined)
- successful -= _add_list(message, data.incompatible_experiments,
- 'These experiments have different analyzers (and cannot be added):');
- }
-
- var size = BootstrapDialog.SIZE_NORMAL;
- var type = BootstrapDialog.TYPE_PRIMARY;
- var title = '<i class="fa fa-check"></i> Report changes';
- var btn_type = 'btn-primary';
- if (successful == sent) {
- description.text('Successfully added ' + sent + ' experiment(s) to report');
- }
- else {
- description.text('Added ' + successful + ' (out of ' + sent + ' in total) experiment(s) to report');
- size = BootstrapDialog.SIZE_WIDE;
- type = BootstrapDialog.TYPE_WARNING;
- btn_type = 'btn-warning';
- title = '<i class="fa fa-warning"></i> Report changes';
- }
-
- BootstrapDialog.show({
- title: title,
- message: message,
- size: size,
- type: type,
- buttons: [{
- label: 'OK',
- cssClass: btn_type,
- action: function(dialog){dialog.close();},
- }]
- });
-
- return true;
- });
-
- d.fail(function(data, status) {
- process_error(data, status);
- });
-
+ addToGroup(data[0], names, select.val());
},
},
],
@@ -1991,6 +2184,7 @@ beat.experiments.utils.modal_add_to_report = function (names, report_list_url) {
});
}
+
addToReport(names).fail(function(data, text_status) {
process_error(data, text_status);
return false;
--
GitLab