Skip to content

Commit

Permalink
Reorganizing PI wizard to prepare for back button. Addresses #584
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexsielicki
alexsielicki committed Mar 1, 2016
1 parent 321365d commit 88d6cec
Show file tree
Hide file tree
Showing 2 changed files with 119 additions and 113 deletions.
98 changes: 55 additions & 43 deletions web-server/plugins/slycat-parameter-image-plus-model/js/wizard-ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,7 @@ define(["slycat-server-root", "slycat-web-client", "slycat-dialog", "knockout",
component.cluster_column = ko.observable(false);
component.image_columns_names = ko.observableArray();
component.ps_type = ko.observable("remote"); // local is selected by default...
component.is_compute = ko.observable("no_compute");
component.matrix_type = ko.observable("remote"); // local is selected by default...
component.matrix_type = ko.observable("remote"); // remote is selected by default...
component.model = mapping.fromJS({_id: null, name: "New Parameter Image Model", description: "", marking: null});
component.remote = mapping.fromJS({hostname: null, username: null, password: null, status: null, status_type: null, enable: ko.computed(function(){return component.ps_type() == 'remote' ? true : false;}), focus: false, sid: null});
component.remote.focus.extend({notify: "always"});
Expand All @@ -34,13 +33,8 @@ define(["slycat-server-root", "slycat-web-client", "slycat-dialog", "knockout",
});
component.server_root = server_root;

component.cancel = function() {
if(component.remote.sid())
client.delete_remote({ sid: component.remote.sid() });

if(component.model._id())
client.delete_model({ mid: component.model._id() });
};
// Let's use a large dialog for this wizard because there are so many steps
$(".modal-dialog").addClass("modal-lg");

component.create_model = function() {
client.post_project_models({
Expand All @@ -51,30 +45,30 @@ define(["slycat-server-root", "slycat-web-client", "slycat-dialog", "knockout",
marking: component.model.marking(),
success: function(mid) {
component.model._id(mid);
client.put_model_parameter({
mid: component.model._id(),
aid: "cluster-linkage",
value: component.cluster_linkage(),
input: true,
success: function() {
component.tab(1);
component.remote.focus(true);
}
});
component.remote.focus(true);
},
error: dialog.ajax_error("Error creating model."),
});
};

// Create a model as soon as the dialog loads. We rename, change description and marking later.
component.create_model();

component.cancel = function() {
if(component.remote.sid())
client.delete_remote({ sid: component.remote.sid() });

if(component.model._id())
client.delete_model({ mid: component.model._id() });
};

component.select_type = function() {
$('.local-browser-continue-data').toggleClass("disabled", true);
var type = component.ps_type();

if (type === "local") {
component.upload_table();
} else if (type === "remote") {
$(".modal-dialog").addClass("modal-lg");
$(".ps-tab-remote-data").css("display", "block");
component.connect();
}
};
Expand All @@ -83,11 +77,12 @@ define(["slycat-server-root", "slycat-web-client", "slycat-dialog", "knockout",
$('.local-browser-continue-matrix').toggleClass("disabled", true);
var type = component.matrix_type();

if (type === "local") {
if (type == "compute") {
component.tab(4);
}
else if (type === "local") {
component.upload_distance_matrix();
} else if (type === "remote") {
$(".modal-dialog").addClass("modal-lg");
$(".ps-tab-remote-matrix").css("display", "block");
component.connect_matrix();
}
};
Expand Down Expand Up @@ -127,7 +122,7 @@ define(["slycat-server-root", "slycat-web-client", "slycat-dialog", "knockout",
// component.cluster_column

mapping.fromJS(attributes, component.attributes);
component.tab(3);
component.tab(2);
$('.browser-continue').toggleClass("disabled", false);
}
});
Expand Down Expand Up @@ -158,23 +153,17 @@ define(["slycat-server-root", "slycat-web-client", "slycat-dialog", "knockout",

component.select_columns = function() {
component.put_model_parameters();
component.tab(3);

if (component.ps_type() === "remote") {
$('.ps-tab-compute-matrix').css('display', 'block');
$('.ps-tab-locate-matrix').css('display', 'none');
component.tab(4);
} else
component.tab(5);
// if (component.ps_type() === "remote") {
// component.tab(3);
// } else {
// component.tab(4);
// }
};

component.select_compute = function() {
if (component.is_compute() === 'yes_compute') {
component.tab(7);
} else if (component.is_compute() === 'no_compute') {
$('.ps-tab-locate-matrix').css('display', 'block');
$('.ps-tab-remote-matrix').css('display', 'block');
component.tab(5);
}
component.tab(6);
};

var upload_matrix_success = function() {
Expand Down Expand Up @@ -242,7 +231,7 @@ define(["slycat-server-root", "slycat-web-client", "slycat-dialog", "knockout",
password: component.remote.password(),
success: function(sid) {
component.remote.sid(sid);
component.tab(2);
component.tab(1);
},
error: function(request, status, reason_phrase) {
component.remote.status_type("danger");
Expand All @@ -261,7 +250,7 @@ define(["slycat-server-root", "slycat-web-client", "slycat-dialog", "knockout",
password: component.remote_matrix.password(),
success: function(sid) {
component.remote_matrix.sid(sid);
component.tab(6);
component.tab(5);
},
error: function(request, status, reason_phrase) {
component.remote_matrix.status_type("danger");
Expand Down Expand Up @@ -451,11 +440,34 @@ define(["slycat-server-root", "slycat-web-client", "slycat-dialog", "knockout",
};

component.finish = function() {
component.tab(7);
component.tab(6);
};

client.post_model_finish({
component.name_model = function() {
client.put_model(
{
mid: component.model._id(),
success: function() {}
name: component.model.name(),
description: component.model.description(),
marking: component.model.marking(),
success: function()
{
client.put_model_parameter({
mid: component.model._id(),
aid: "cluster-linkage",
value: component.cluster_linkage(),
input: true,
success: function() {
client.post_model_finish({
mid: component.model._id(),
success: function() {
component.tab(7);
}
});
}
});
},
error: dialog.ajax_error("Error updating model."),
});
};

Expand Down
134 changes: 64 additions & 70 deletions web-server/plugins/slycat-parameter-image-plus-model/wizard-ui.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,54 +7,19 @@ <h3 class="modal-title">New Parameter Image Model</h3>
</div>
<div class="modal-body">
<ul class="nav nav-pills">
<li data-bind="css:{active:tab() == 0}"><a>Create Model</a></li>
<li data-bind="css:{active:tab() == 1}"><a>Locate Table</a></li>
<li data-bind="css:{active:tab() == 2}" class="ps-tab-remote-data" style="display: none;"><a>Select Table</a></li>
<li data-bind="css:{active:tab() == 3}"><a>Select Columns</a></li>
<li data-bind="css:{active:tab() == 4}" class="ps-tab-compute-matrix" style="display: none;"><a>Compute Distances</a></li>
<li data-bind="css:{active:tab() == 5}" class="ps-tab-locate-matrix"><a>Locate Distances</a></li>
<li data-bind="css:{active:tab() == 6}" class="ps-tab-remote-matrix" style="display: none;"><a>Select Distances</a></li>
<li data-bind="css:{active:tab() == 0}"><a>Locate Table</a></li>
<li data-bind="css:{active:tab() == 1}, visible: ps_type() == 'remote'" class="ps-tab-remote-data"><a>Select Table</a></li>
<li data-bind="css:{active:tab() == 2}"><a>Select Columns</a></li>
<li data-bind="css:{active:tab() == 3}" class="ps-tab-locate-matrix"><a>Locate Distances</a></li>
<li data-bind="css:{active:tab() == 4}, visible: matrix_type() == 'compute'" class="ps-tab-compute-matrix"><a>Compute Distances</a></li>
<li data-bind="css:{active:tab() == 5}, visible: matrix_type() == 'remote'" class="ps-tab-remote-matrix"><a>Select Distances</a></li>
<li data-bind="css:{active:tab() == 6}"><a>Name Model</a></li>
<li data-bind="css:{active:tab() == 7}"><a>Results</a></li>
</ul>

<div class="tab-content">
<div data-bind="visible:tab() == 0">
<form class="form-horizontal" role="form" onsubmit="return false">
<slycat-model-controls params="name:model.name,description:model.description,marking:model.marking"></slycat-model-controls>
<div class="form-group">
<label class="col-sm-2 control-label">Cluster Linkage</label>
<div class="col-sm-10 cluster-linkage-radios">
<div class="radio">
<label>
<input type="radio" name="cluster-linkage-radio" id="average-radio" value="average" data-bind="checked: cluster_linkage">
Average
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="cluster-linkage-radio" id="single-radio" value="single" data-bind="checked: cluster_linkage">
Single
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="cluster-linkage-radio" id="complete-radio" value="complete" data-bind="checked: cluster_linkage">
Complete
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="cluster-linkage-radio" id="weighed-radio" value="weighed" data-bind="checked: cluster_linkage">
Weighed
</label>
</div>
</div>
</div>

</form>
</div>

<div data-bind="visible:tab() == 1">
<div data-bind="visible:tab() == 0">
<div class="radio local" style="margin-left: 15px;">
<label>
<input type="radio" name="local-or-remote-radios" id="local-radio" value="local" data-bind="checked: ps_type">
Expand All @@ -78,12 +43,12 @@ <h3 class="modal-title">New Parameter Image Model</h3>
</div>
</div>

<div data-bind="visible:tab() == 2" style="height: 400px">
<div data-bind="visible:tab() == 1" style="height: 400px">
<slycat-remote-browser params="type:'remote',sid:remote.sid,hostname:remote.hostname,selection:browser.selection,path:browser.path,open_file_callback:load_table"></slycat-remote-browser>
<slycat-parser-controls params="parser:parser,category:'table'"></slycat-parser-controls>
</div>

<div data-bind="visible:tab() == 3">
<div data-bind="visible:tab() == 2">
<slycat-table-ingestion params="
variables: attributes,
properties: [
Expand All @@ -106,28 +71,13 @@ <h3 class="modal-title">New Parameter Image Model</h3>
</div>
</div>

<div data-bind="visible:tab() == 4">
<div style="margin: 0px 0px 15px 15px">Do you need Slycat to compute the distance matrix from the input file?</div>
<div class="radio compute" style="margin-left: 15px;">
<label>
<input type="radio" name="compute-or-not-radios" id="remote-no-compute" value="no_compute" data-bind="checked: is_compute">
No
</label>
</div>
<div data-bind="visible:tab() == 3">
<div class="radio compute" style="margin-left: 15px;">
<label>
<input type="radio" name="compute-or-not-radios" id="remote-compute" value="yes_compute" data-bind="checked: is_compute">
Yes
<input type="radio" name="matrix-local-or-remote-radios" id="compute-radio" value="compute" data-bind="checked: matrix_type">
Compute the distance matrix from the input file
</label>
</div>
<div class="compute-interface">
<form class="compute form-horizontal" role="form">
<slycat-remote-interface params="agent_functions: ['correlation-distance', 'jaccard-distance', 'jaccard2-distance', 'one-norm-distance', 'cosine-distance', 'hamming-distance'], agent_functions_params: { 'image_columns_names': image_columns_names(), 'input': browser.selection()[0] }, disabled: ko.computed(function(){return is_compute() == 'yes_compute' ? false : true;}), model_type: 'parameter-image-plus', mid: model._id()"></slycat-remote-interface>
</form>
</div>
</div>

<div data-bind="visible:tab() == 5">
<div class="radio local" style="margin-left: 15px;">
<label>
<input type="radio" name="matrix-local-or-remote-radios" id="local-radio" value="local" data-bind="checked: matrix_type">
Expand All @@ -150,23 +100,67 @@ <h3 class="modal-title">New Parameter Image Model</h3>
</div>
</div>

<div data-bind="visible:tab() == 6" style="height: 400px">
<div data-bind="visible:tab() == 4">
<div class="compute-interface">
<form class="compute form-horizontal" role="form">
<slycat-remote-interface params="agent_functions: ['correlation-distance', 'jaccard-distance', 'jaccard2-distance', 'one-norm-distance', 'cosine-distance', 'hamming-distance'], agent_functions_params: { 'image_columns_names': image_columns_names(), 'input': browser.selection()[0] }, model_type: 'parameter-image-plus', mid: model._id()"></slycat-remote-interface>
</form>
</div>
</div>

<div data-bind="visible:tab() == 5" style="height: 400px">
<slycat-remote-browser params="type:'remote',sid:remote_matrix.sid,hostname:remote_matrix.hostname,selection:browser.selection,path:browser.path,open_file_callback:load_distance_matrix"></slycat-remote-browser>
</div>

<div data-bind="visible:tab() == 6">
<form class="form-horizontal" role="form" onsubmit="return false">
<slycat-model-controls params="name:model.name,description:model.description,marking:model.marking"></slycat-model-controls>
<div class="form-group">
<label class="col-sm-2 control-label">Cluster Linkage</label>
<div class="col-sm-10 cluster-linkage-radios">
<div class="radio">
<label>
<input type="radio" name="cluster-linkage-radio" id="average-radio" value="average" data-bind="checked: cluster_linkage">
Average
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="cluster-linkage-radio" id="single-radio" value="single" data-bind="checked: cluster_linkage">
Single
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="cluster-linkage-radio" id="complete-radio" value="complete" data-bind="checked: cluster_linkage">
Complete
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="cluster-linkage-radio" id="weighed-radio" value="weighed" data-bind="checked: cluster_linkage">
Weighed
</label>
</div>
</div>
</div>

</form>
</div>

<div data-bind="visible:tab() == 7">
<slycat-model-results params="{mid: model._id}"></slycat-model-results>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-bind="visible:tab() == 0,click:create_model">Continue</button>
<button class="btn btn-default local-browser-continue-data" data-bind="visible:tab() == 1,click:select_type"><i class="fa fa-spinner fa-pulse"></i> Continue</button>
<button class="btn btn-default remote-browser-continue-data browser-continue" data-bind="visible:tab() == 2,click:load_table"><i class="fa fa-spinner fa-pulse"></i> Continue</button>
<button class="btn btn-default" data-bind="visible:tab() == 3,click:select_columns">Continue</button>
<button class="btn btn-default local-browser-continue-data" data-bind="visible:tab() == 0,click:select_type"><i class="fa fa-spinner fa-pulse"></i> Continue</button>
<button class="btn btn-default remote-browser-continue-data browser-continue" data-bind="visible:tab() == 1,click:load_table"><i class="fa fa-spinner fa-pulse"></i> Continue</button>
<button class="btn btn-default" data-bind="visible:tab() == 2,click:select_columns">Continue</button>
<button class="btn btn-default local-browser-continue-matrix" data-bind="visible:tab() == 3,click:select_matrix_type"><i class="fa fa-spinner fa-pulse"></i> Continue</button>
<button class="btn btn-default" data-bind="visible:tab() == 4,click:select_compute">Continue</button>
<button class="btn btn-default local-browser-continue-matrix" data-bind="visible:tab() == 5,click:select_matrix_type"><i class="fa fa-spinner fa-pulse"></i> Continue</button>
<button class="btn btn-default remote-browser-continue-matrix browser-continue" data-bind="visible:tab() == 6,click:load_distance_matrix"><i class="fa fa-spinner fa-pulse"></i> Finish</button>
<button class="btn btn-default remote-browser-continue-matrix browser-continue" data-bind="visible:tab() == 5,click:load_distance_matrix"><i class="fa fa-spinner fa-pulse"></i> Continue</button>
<button class="btn btn-default" data-bind="visible:tab() == 6,click:name_model">Finish</button>
<button class="btn btn-default" data-bind="visible:tab() == 7,click:go_to_model">Go To Model</button>
</div>
</div>

0 comments on commit 88d6cec

Please sign in to comment.