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

Saving collapse after reload #543

Merged
merged 5 commits into from
Nov 21, 2024
Merged

Saving collapse after reload #543

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2d636ab
WIP saving collapse after reload
sarahvgls Nov 14, 2024
68f6e04
adjusted collapsing states, added trash can icon
sarahvgls Nov 19, 2024
4384cc5
minor changes
sarahvgls Nov 19, 2024
4030975
added sidebar chevrons and other changes
sarahvgls Nov 20, 2024
7ab0218
changed methods
sarahvgls Nov 20, 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
52 changes: 50 additions & 2 deletions ui/runs/static/runs/runs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ $(document).ready(function () {
}
});


// control sidebar visibility
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
Expand Down Expand Up @@ -50,4 +49,53 @@ $(document).ready(function () {
Calculating...
`);
});
});

// save current state of accordion in sessionStorage
function saveAccordionState() {
const panels = [];
$(".collapse").each(function () {
if ($(this).hasClass("show")) {
panels.push(this.id);
}
});
sessionStorage.setItem("accordionState", JSON.stringify(panels));
}

// load accordion state from sessionStorage
function loadAccordionState() {
const panels = JSON.parse(sessionStorage.getItem("accordionState")) || [];
panels.forEach(function (panelId) {
const panel = $("#" + panelId);
if (panel.length) {
panel.addClass("show");
}
});
}

function updateAccordionIcons() {
$(".collapse").each(function () {
const panel = $(this);
const button = document.querySelector(`[data-bs-target="#${panel.attr("id")}"]`);
if (button) {
const icon = button.id === 'sidebar-accordion'
? button.querySelectorAll('svg')[1] // second svg to skip section icon
: button.querySelector('svg');
if (panel.hasClass("show")) {
if (icon) icon.classList.add("rotate-icon");
} else {
if (icon) icon.classList.remove("rotate-icon");
}
}
});
}

loadAccordionState();
updateAccordionIcons();

// event listeners save collapse state on show/hide to local storage
$(".collapse").on("hidden.bs.collapse", saveAccordionState);
$(".collapse").on("shown.bs.collapse hidden.bs.collapse", function () {
saveAccordionState(); // Save the current state to sessionStorage
updateAccordionIcons(); // Update icons after state change
});
});
9 changes: 7 additions & 2 deletions ui/runs/templates/runs/sidebar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,14 @@
<div id="accordion" class="">
{% for section in workflow_steps %}
<div class="border-top">
<div class="card-header d-flex btn p-3 align-items-center bg-white border-bottom" data-bs-toggle="collapse"
<div id="sidebar-accordion" class="card-header d-flex btn p-3 align-items-center bg-white border-bottom" data-bs-toggle="collapse" data-bs-target="#collapse_{{ section.id }}"
href="#collapse_{{ section.id }}">

{# add section icon #}
{% if section.id == 'importing' %}
<img src="{% static 'img/download-file-icon.svg' %}" alt="toggle sidebar" width="20" height="20" class="me-1">
<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="#4A536A" class="bi bi-cloud-download-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 0a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 4.095 0 5.555 0 7.318 0 9.366 1.708 11 3.781 11H7.5V5.5a.5.5 0 0 1 1 0V11h4.188C14.502 11 16 9.57 16 7.773c0-1.636-1.242-2.969-2.834-3.194C12.923 1.999 10.69 0 8 0m-.354 15.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 14.293V11h-1v3.293l-2.146-2.147a.5.5 0 0 0-.708.708z"/>
</svg>
{% elif section.id == 'data_preprocessing' %}
<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="#4A536A" class="bi bi-gear-fill" viewBox="0 0 16 16">
<path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
Expand All @@ -32,6 +34,9 @@
<div class="ms-3">
{{ section.name }}
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-compact-down ms-auto" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1.553 6.776a.5.5 0 0 1 .67-.223L8 9.44l5.776-2.888a.5.5 0 1 1 .448.894l-6 3a.5.5 0 0 1-.448 0l-6-3a.5.5 0 0 1-.223-.67"/>
</svg>
</div>
<div id="collapse_{{ section.id }}"
class="collapse{% if section.selected %} show {% endif %}">
Expand Down
18 changes: 11 additions & 7 deletions ui/runs/templates/runs/sidebar_section.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,14 +24,15 @@

{% if not step.selected and not step.finished %}
{# button to remove step from workflow #}
<form action="{% url 'runs:delete_step' run_name %}" method="post">
<form action="{% url 'runs:delete_step' run_name %}" method="post" class="ms-auto">
{% csrf_token %}
<input type="hidden" name="index" value="{{ step.index }}">
<input type="hidden" name="section" value="{{ step.section }}">
<button class="removeBtn btn d-flex justify-content-center align-items-end mt-1">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="grey" class="bi bi-x removeIcon">
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
</svg></button>
<button class="removeBtn btn d-flex justify-content-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="grey" class="bi bi-trash3-fill" viewBox="0 0 16 16">
<path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5M8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5m3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0"/>
</svg>
</button>
</form>
{% endif %}

Expand All @@ -42,9 +43,12 @@
{% if section.finished %}
<p class="pb-2"><i class="text-muted">Go back to this section to add more steps</i></p>
{% else %}
<button class="btn btn-blue full_width mt-2 mb-2" type="button" data-bs-toggle="collapse"
<button id="add-steps-button" class="btn btn-blue full_width mt-2 mb-2 d-flex align-items-center" type="button" data-bs-toggle="collapse"
data-bs-target="#add_steps_div_{{ section.id }}">
+ add steps
<span class="d-flex justify-content-center flex-grow-1"> + add steps</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-compact-down ms-auto" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1.553 6.776a.5.5 0 0 1 .67-.223L8 9.44l5.776-2.888a.5.5 0 1 1 .448.894l-6 3a.5.5 0 0 1-.448 0l-6-3a.5.5 0 0 1-.223-.67"/>
</svg>
</button>

<div id="add_steps_div_{{ section.id }}" class="collapse">
Expand Down
Loading