Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Footer calculate back next #539

Merged
merged 8 commits into from
Nov 13, 2024
Merged

Footer calculate back next #539

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
7a393a9
Added header with calculate/back/next buttons to details page
noLeonardo Nov 7, 2024
5079cb1
header converted to footer
noLeonardo Nov 11, 2024
14feb58
unnecessary scrolling removed
noLeonardo Nov 12, 2024
03e3d8c
changed gitignore
noLeonardo Nov 12, 2024
e2b92f4
removed workflow
noLeonardo Nov 12, 2024
94a9ad9
updated comments and suggestions
noLeonardo Nov 12, 2024
515de8c
updated naming of calc_form
noLeonardo Nov 12, 2024
61f4fdc
Merge branch 'dev' into footer_calculate-back-next
noLeonardo Nov 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,4 +145,4 @@ dmypy.json

#custom file everyone has
Miniconda3*.sh
Miniconda3*.exe
Miniconda3*.exe
8 changes: 8 additions & 0 deletions ui/runs/static/runs/runs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,14 @@ $(document).ready(function () {
});


// control calculate buttons in footer
$('#calculate_parameters_submit_form_plot').click(function() {
$("#calc_form_plot").submit();
});
$('#calculate_parameters_submit_form').click(function() {
$("#calc_form_method").submit();
});

// calculate button spinner
$('.calculateSpinner').on('click', function() {
// Change button content to show 'Calculating...' with a spinner
Expand Down
16 changes: 15 additions & 1 deletion ui/runs/static/runs/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ html, body {
#content {
order: 1;
padding: 20px;
padding-bottom: 0px;
flex-grow: 1;
}

Expand All @@ -28,7 +29,7 @@ html, body {
order: 2;
flex-basis: 300px;
max-width: 400px;
min-height: 100vh;
min-height: calc(100vh - 60px);
flex-grow: 1;
transition: 100ms;
}
Expand Down Expand Up @@ -75,3 +76,16 @@ html, body {
#gsea_enrichment_plot_img {
width: 800px;
}

.header {
position: sticky;
top: 80px;
}

.footer {
position: sticky;
bottom: 0;
padding: 10px 8%;
margin-top: 10px;
background-color: rgb(255, 255, 255);
}
99 changes: 56 additions & 43 deletions ui/runs/templates/runs/details.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,6 @@
</div>

<div id="main-content">


{# show history #}
{% if displayed_history %}
<div class="row d-flex justify-content-between align-items-center">
Expand Down Expand Up @@ -126,7 +124,7 @@ <h3>{{ display_name }}</h3>
{# if there are plot parameters, display method and plot parameters next to each other #}
{% if plot_form %}
<div class="col">
<form action="{% url 'runs:detail' run_name %}" id="calc_form" method="post"
<form action="{% url 'runs:detail' run_name %}" id="calc_form_plot" method="post"
enctype="multipart/form-data">
{% csrf_token %}
<div class="mb-1">
Expand All @@ -140,10 +138,6 @@ <h3>{{ display_name }}</h3>
</div>
{% endfor %}
</div>
<button type="submit" id="calculate_parameters_submit"
class="btn btn-red calculateSpinner">
Calculate
</button>
</form>
</div>
<div class="col">
Expand All @@ -161,7 +155,7 @@ <h3>{{ display_name }}</h3>
{% else %}
<div class="col-7">
{% if step != "plot" %}
<form action="{% url 'runs:detail' run_name %}" method="post"
<form action="{% url 'runs:detail' run_name %}" id="calc_form_method" method="post"
enctype="multipart/form-data">
{% csrf_token %}
<div class="mb-2">
Expand All @@ -176,10 +170,6 @@ <h3>{{ display_name }}</h3>
{% endfor %}
</div>
<div class="form-group">
<button type="submit" id="calculate_parameters_submit"
class="btn btn-red mr-auto calculateSpinner">
Calculate
</button>
{% if section == "data_preprocessing" %}
<a href="{% url 'runs:plot' run_name %}" id="plot_parameters_submit" class="btn btn-grey {% if not show_plot_button %} disabled {% endif %}">Plot</a>
{% endif %}
Expand Down Expand Up @@ -247,45 +237,68 @@ <h3>{{ display_name }}</h3>
</form>
{% endif %}
</div>
<div class="col">
{# navigation between steps #}

</div>
</div>

<div class="footer border-top pt-3">
<div class="row align-items-center">
<div class="d-flex col-auto flex-column justify-content-end">

{% if plot_form %}
<button type="submit" id="calculate_parameters_submit_form_plot"
class="btn btn-red calculateSpinner mr-auto">
Calculate
</button>
{% else %}
<button type="submit" id="calculate_parameters_submit_form"
class="btn btn-red mr-auto calculateSpinner">
Calculate
</button>
{% endif %}
</div>

<div class="justify-content-end d-flex col flex-column">
<div class="justify-content-end d-flex">
{% if results_exist %}
<div class="col-5 mb-2">
<div class="form-group mb-0">
{{ name_field }}
</div>
{% if results_exist %}
<div class="col-5 mb-2">
<div class="form-group mb-0">
{{ name_field }}
</div>
{% endif %}
</div>
{% endif %}
</div>
<div class="justify-content-end d-flex">
<form action="{% url 'runs:next' run_name %}" method="post" id="runs_next">
{% csrf_token %}
<div class="form-group">
{% if show_back %}
<a href="{% url 'runs:back' run_name %}" id = "backButton" class="btn btn-grey mr-auto">Back</a>
<div class="modal fade" id="calculationInProgressModal" tabindex="-1" role="dialog" aria-labelledby="calculationInProgressModalLabel" aria-hidden="true" style="display: none;" >
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="calculationInProgressModalLabel">Do you want back?</h5>
<div class="col">
{# navigation between steps #}
<div class="justify-content-end d-flex">
<form action="{% url 'runs:next' run_name %}" method="post" id="runs_next">
{% csrf_token %}
<div class="form-group">
{% if show_back %}
<a href="{% url 'runs:back' run_name %}" id = "backButton" class="btn btn-grey mr-auto">Back</a>
<div class="modal fade" id="calculationInProgressModal" tabindex="-1" role="dialog" aria-labelledby="calculationInProgressModalLabel" aria-hidden="true" style="display: none;" >
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="calculationInProgressModalLabel">Do you want back?</h5>
</div>
<div class="modal-body">
Going a step back during calculation may lead to unforseen behavior and loss in data.
Do you want to proceed?
<hr>
<a href="{% url 'runs:back' run_name %}" id = "backButton" class="btn btn-red mr-auto">Back</a>
<button id= "cancel" type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
<div class="modal-body">
Going a step back during calculation may lead to unforseen behavior and loss in data.
Do you want to proceed?
<hr>
<a href="{% url 'runs:back' run_name %}" id = "backButton" class="btn btn-red mr-auto">Back</a>
<button id= "cancel" type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
{% endif %}
{% if not last_step %}
<button class="btn btn-red" {% if not results_exist %} disabled {% endif %} >Next</button>
{% endif %}
</div>
{% endif %}
{% if not last_step %}
<button class="btn btn-red" {% if not results_exist %} disabled {% endif %} >Next</button>
{% endif %}
</div>
</form>
</form>
</div>
</div>
</div>
</div>
Expand Down
Loading