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

Development #36

Merged
merged 2 commits into from
Nov 27, 2024
Merged

Development #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ec01c73
Shopping cart v2
dmytrotsko Nov 27, 2024
7e3754c
Merge pull request #35 from cmu-delphi/shopping_cart_v2
dmytrotsko Nov 27, 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
4 changes: 4 additions & 0 deletions src/assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1349,6 +1349,10 @@ h6 {
padding-left: 0px!important;
}

.select2-dropdown {
z-index: 9999!important;
}

.popover {
max-width: 50%;
}
Expand Down
11 changes: 1 addition & 10 deletions src/assets/js/select_signals.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,16 +79,7 @@ function addSelectedSignals(dataSource, timeType, signalSetEndpoint) {
$("#showSelectedSignalsButton").show();
}

function plotData(epivisUrl) {
var dataSets = [];
for (const signal in JSON.parse(localStorage.getItem("selectedSignals"))) {
dataSets.push(JSON.parse(localStorage.getItem("selectedSignals"))[signal]['epivis']);
}
var urlParamsEncoded = btoa(`{"datasets":${JSON.stringify(dataSets)}}`);

var linkToEpivis = `${epivisUrl}#${urlParamsEncoded}`
window.open(linkToEpivis, '_blank').focus();
}


document.addEventListener('DOMContentLoaded', function() {
// Call the function to update the modal content when the page loads
Expand Down
1 change: 1 addition & 0 deletions src/signal_sets/views.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ def get_context_data(self, **kwargs: Any) -> dict[str, Any]:
self.request.GET, queryset=self.get_queryset()
)
context["signal_sets"] = self.get_queryset()
context["available_geographies"] = Geography.objects.all()
return context


Expand Down
96 changes: 70 additions & 26 deletions src/templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,7 +174,7 @@


<!-- Modal -->
<div class="modal fade" id="selectedSignalsModal" tabindex="-1" aria-labelledby="selectedSignalsModalLabel" aria-hidden="true">
<div class="modal fade" id="selectedSignalsModal" tabindex="-1" aria-labelledby="selectedSignalsModalLabel">
<div class="modal-dialog modal-xl modal-fullscreen-xl-down">
<div class="modal-content">
<div class="modal-header">
Expand All @@ -186,19 +186,39 @@ <h5 class="modal-title" id="selectedSignalsModalLabel">Selected signals</h5>
<thead>
<tr>
<th scope="col">Signal name</th>
<th scope="col">Signal description</th>
<th scope="col">Data Source</th>
<th scope="col">Signal tech name</th>
<th scope="col">Time Type</th>
<th scope="col">Geo Type</th>
<th scope="col">Geo Value</th>
<th scope="col">Signal name</th>
</tr>
</thead>
<tbody id="selectedSignalsList"></tbody>
</table>

</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" id="clearSelectedSignals" data-mdb-ripple-init >Reset selected signals</button>
<div class="row">
<div class="row margin-top-1rem">
<div class="col-2">
<label for="geographic_type" class="form-label"
>Geographic Type:</label
>
</div>
<div class="col-10">
<select id="geographic_type" name="geographic_type" class="form-select">
<option selected>Choose...</option>
{% for geography in available_geographies %}
<option value="{{ geography.name }}">{{ geography }}</option>
{% endfor %}
</select>
</div>
</div>
<div class="row margin-top-1rem">
<div class="col-2">
<label for="geographic_value" class="col-form-label">Geographic Value:</label>
</div>
<div class="col-10">
<select id="geographic_value" name="geographic_value" class="form-select" multiple="multiple"></select>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" id="plotSelectedSignals" data-mdb-ripple-init>Show plot</button>
</div>
</div>
Expand Down Expand Up @@ -241,31 +261,55 @@ <h5 class="modal-title" id="selectedSignalsModalLabel">Selected signals</h5>

<script>
const epivisUrl = "{{ epivis_url }}";
$(document).ready(function () {
if (localStorage.getItem("selectedSignals")) {
$("#showSelectedSignalsButton").show();
var geoValues = [];

function getFilteredGeographicValues(geographicType) {
var data = geoValues.reduce((data, geoValue) => {
if (geoValue.geoType === geographicType) {
data.push(geoValue);
}
return data;
}, []);
return data;
}

function initGeographicValueSelect(geographicType = null) {
if (geographicType) {
var data = getFilteredGeographicValues(geographicType);
} else {
$("#showSelectedSignalsButton").hide();
data = [];
}
});


$('#geographic_value').select2({
data: data,
minimumInputLength: 0,
maximumSelectionLength: 5,
});
}

document.getElementById('geographic_type').addEventListener("change", (event) => {
$('#geographic_value').empty();
$('#modeSubmitResult').html('');
initGeographicValueSelect(event.target.value);
})

var plotSelectedSignals = document.getElementById('plotSelectedSignals');
plotSelectedSignals.addEventListener('click', function() {
plotData(epivisUrl);
});
$(document).ready(function () {
{% for geography in available_geographies %}
{% for unit in geography.geography_units.all %}
geoValues.push({'id': '{{ unit.geo_id }}', 'geoType': '{{ unit.geography.name }}', 'text': '{{ unit.display_name }}'});
{% endfor %}
{% endfor %}

document.addEventListener('DOMContentLoaded', function() {
var clearButton = document.getElementById('clearSelectedSignals');

clearButton.addEventListener('click', function() {
localStorage.removeItem('selectedSignals');
selectedSignals = {}; // Replace 'selectedSignals' with the key you want to remove
$("#selectedSignalsList").empty();
$("#showSelectedSignalsButton").hide();
alert('Selected signals have been cleared from localStorage.');
var plotSelectedSignals = document.getElementById('plotSelectedSignals');
plotSelectedSignals.addEventListener('click', function() {
plotData(epivisUrl);
});
});




</script>


Expand Down
2 changes: 1 addition & 1 deletion src/templates/signal_sets/signal_set_detail.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -364,7 +364,7 @@ <h5>Signal members</h5>
}

var geoValues = [];
var currentMode = 'preview';
var currentMode = 'preview';

function getFilteredGeographicValues(geographicType) {
var data = geoValues.reduce((data, geoValue) => {
Expand Down
129 changes: 129 additions & 0 deletions src/templates/signal_sets/signal_sets.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,6 +249,7 @@ <h2 class="accordion-header" id="flush-heading_{{ form.temporal_granularity.auto
<table class="table table-hover">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Name</th>
<th scope="col">Description of data*</th>
<th scope="col">Name of maintainer/key contact*</th>
Expand Down Expand Up @@ -284,6 +285,9 @@ <h2 class="accordion-header" id="flush-heading_{{ form.temporal_granularity.auto
<tbody>
{% for signal_set in signal_sets %}
<tr>
<td>
<input type="checkbox" name="showSignalMembers" value="{{ signal_set.id }}">
</td>
<td class="clickable-table-cell"
onClick="location.href='{% url 'signal_set' pk=signal_set.id %}';">
{{ signal_set.name }}
Expand Down Expand Up @@ -428,6 +432,38 @@ <h2 class="accordion-header" id="flush-heading_{{ form.temporal_granularity.auto
{{ signal_set.link_to_documentation }}
<br>
</td>
<tr style="display: none;">
<td colspan="2"></td>
<td colspan="5">
<div class="table-responsive">
<table class="table mb-0 caption-top">
<caption>
Select Signal Set Members
</caption>
<thead>
<th scope="col"></th>
<th scope="col">Signal Name</th>
<th scope="col">Signal description</th>
</thead>
<tbody>
{% for signal in signal_set.signals.all %}
<tr>
<td>
<input type="checkbox" name="selectedSignal" data-signalDisplayName="{{ signal.display_name }}" data-signalSet="{{ signal_set.name }}" data-endpoint="{{ signal_set.endpoint }}" data-dataSource="{{ signal.source.name }}" data-signal="{{ signal.name }}" data-timeType="{{ signal.time_type }}">
</td>
<td>
{{ signal.member_name}}
</td>
<td>
{{ signal.member_description }}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</td>
</tr>
</tr>
{% endfor %}
</tbody>
Expand Down Expand Up @@ -458,6 +494,99 @@ <h2 class="accordion-header" id="flush-heading_{{ form.temporal_granularity.auto
}
}

let showSignalMembers = document.getElementsByName("showSignalMembers");
showSignalMembers.forEach((checkbox) => {
checkbox.addEventListener('change', function(event) {
let signalSetMembersTable = this.parentElement.parentElement.nextElementSibling;
signalSetMembersTable.style.display = this.checked ? 'table-row' : 'none';
});
})



let checkedSignalMembers = []

// Function to update the modal content
function updateSelectedSignals(signalSet, signal) {
var selectedSignalsList = document.getElementById('selectedSignalsList');

var tr = document.createElement('tr');
tr.setAttribute('id', `${signalSet}_${signal}`);
var signalSetName = document.createElement('td');
signalSetName.textContent = signalSet;
tr.appendChild(signalSetName);
var signalName = document.createElement('td');
signalName.textContent = signal;
tr.appendChild(signalName);
selectedSignalsList.appendChild(tr);
}

let dataSignals = Array.from(document.getElementsByName('selectedSignal'));
dataSignals.forEach((checkbox) => {
checkbox.addEventListener('change', function(event) {
if (this.checked) {
checkedSignalMembers.push({
_endpoint: this.dataset.endpoint,
data_source: this.dataset.datasource,
signal: this.dataset.signal,
time_type: this.dataset.timetype,
});
updateSelectedSignals(this.dataset.signalset, this.dataset.signaldisplayname);
} else {
checkedSignalMembers = checkedSignalMembers.filter(signal => signal["params"]["signal"] !== this.dataset.signal);
document.getElementById(`${this.dataset.signalset}_${this.dataset.signal}`).remove();
}


if (checkedSignalMembers.length > 0) {
$("#showSelectedSignalsButton").show();
} else {
$("#showSelectedSignalsButton").hide();
}
});
});

function plotData(epivisUrl) {
var dataSets = {};

var geographicType = document.getElementById('geographic_type').value;
var geographicValues = $('#geographic_value').select2('data').map((el) => (typeof el.id === 'string') ? el.id.toLowerCase() : el.id);
if (geographicType === 'Choose...' || geographicValues.length === 0) {
showWarningAlert("Geographic Type or Geographic Value is not selected.");
return;
}

checkedSignalMembers.forEach((signal) => {
geographicValues.forEach((geoValue) => {
dataSets[`${signal["signal"]}_${geoValue}`] = {
color: '#'+(Math.random() * 0xFFFFFF << 0).toString(16).padStart(6, '0'),
title: "value",
params: {
_endpoint: signal["_endpoint"],
data_source: signal["data_source"],
signal: signal["signal"],
time_type: signal["time_type"],
geo_type: geographicType,
geo_value: geoValue
}
}
})

});

var requestParams = [];
for (var key in dataSets) {
requestParams.push(dataSets[key]);
}

var urlParamsEncoded = btoa(`{"datasets":${JSON.stringify(requestParams)}}`);

var linkToEpivis = `${epivisUrl}#${urlParamsEncoded}`
window.open(linkToEpivis, '_blank').focus();
}





// Add an event listener to each 'bulk-select' element
Expand Down
Loading