Skip to content

Hover area #24

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

Merged
merged 3 commits into from
Jun 10, 2025
Merged

Hover area #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d5a79d0
Highlight area hoverd in the features dropbox
Johaney-s Jun 6, 2025
89626ce
Opting for Choices lib to hover over features list
Johaney-s Jun 6, 2025
eb2acd6
add missing geosearch lines
Johaney-s Jun 10, 2025
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
19 changes: 16 additions & 3 deletions frontend/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -387,9 +387,22 @@
<button id="fetch-features-button" onclick="fetchFeatures()">Fetch features</button>
</div>

<div class="controls-element disabled-element" id="available-features-select-div">
<label for="available-features-select">Available features</label>
<select id="available-features-select" onchange="showBorders()"></select>
<div class="controls-element disabled-element" id="available-features-select-div" style="position: relative; width: 200px;">
<label>Available features</label>

<!-- Trigger that looks like a dropdown -->
<div id="dropdown-trigger"
style="border: 1px solid #ccc; padding: 6px; cursor: pointer; background: white;">
Select a feature ⌄
</div>

<!-- Dropdown list -->
<ul id="available-features-select"
style="display: none; border: 1px solid #ccc; list-style: none;
padding: 0; margin: 0;
position: absolute; top: 100%; left: 0;
background: white; z-index: 999; width: 100%;">
</ul>
</div>

<div class="controls-element disabled-element" id="visualize-feature-button-div">
Expand Down
87 changes: 65 additions & 22 deletions frontend/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,13 @@ let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
attribution: 'Map data (c) <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
maxZoom: 19,
}).addTo(leafletMap);
const hoverLayer = L.geoJSON(null, {
style: {
color: '#6997e5',
weight: 2,
fillOpacity: 0.2
}
}).addTo(leafletMap);

const provider = new window.GeoSearch.OpenStreetMapProvider();
const searchControl = new window.GeoSearch.GeoSearchControl({
Expand Down Expand Up @@ -122,6 +129,14 @@ document.querySelector("#sentinel-2-cloud-cover-value").addEventListener("input"
sentinel2CloudCoverSlider.value = this.value;
});

const featureSelect = document.getElementById("available-features-select");
const choices = new Choices(featureSelect, {
searchEnabled: false,
shouldSort: true,
itemSelectText: '',
position: 'auto',
});

const closeAlert = (alertDiv) => {
alertDiv.style.animation = 'slide-out 0.7s forwards';
alertDiv.addEventListener('animationend', () => {
Expand Down Expand Up @@ -250,15 +265,16 @@ const parseCoordinates = async (coordinatesString) => {
return [latitude, longitude];
}

const clearAvailableFeaturesSelect = () => {
let availableFeaturesSelect = document.getElementById('available-features-select');
availableFeaturesSelect.innerHTML = '';
disableUIElements();
const clearFeaturesSelection = () => {
choices.removeActiveItems();
choices.clearChoices();
hoverLayer.clearLayers();
showBorders();

}

const fetchFeatures = async () => {
showSpinner();
clearAvailableFeaturesSelect();
disableUIElements();

try {
Expand Down Expand Up @@ -315,6 +331,7 @@ const fetchFeatures = async () => {
return;
}

clearFeaturesSelection();
filtersGlobal = new Map();
let obtainedFeatures = [];
for (let dataset in datasetsSelected) {
Expand Down Expand Up @@ -453,9 +470,6 @@ const fetchFeatures = async () => {
obtainedFeatures = obtainedFeatures.concat(currentFeatures);
}

let availableFeaturesSelect = document.querySelector("#available-features-select");
availableFeaturesSelect.innerHTML = '';

const obtainedFeaturesMap = new Map();
obtainedFeatures.forEach(obtainedFeature => {
obtainedFeaturesMap.set(obtainedFeature.Id, obtainedFeature);
Expand All @@ -468,20 +482,49 @@ const fetchFeatures = async () => {
finalFeatures.push(obtainedFeaturesMap.get(featureId));
}

finalFeatures.sort((a, b) => a.Name.toLowerCase().localeCompare(b.Name.toLowerCase()));

featuresGlobal = new Map();

for (const feature of finalFeatures) {
featuresGlobal.set(feature.Id, feature);

let option = document.createElement("option");
option.value = feature.Id;
option.textContent = feature.Name;
availableFeaturesSelect.appendChild(option);
choices.setChoices([
{
value: feature.Id,
label: feature.Name,
customProperties: {
feature: feature,
}
}
], 'value', 'label', false);
}

showBorders();
featureSelect.addEventListener('change', function (e) {
const selectedId = e.target.value;
const feature = featuresGlobal.get(selectedId);

hoverLayer.clearLayers();
if (feature?.GeoFootprint) {
hoverLayer.addData(feature.GeoFootprint);
}

showBorders(selectedId);
});

document.addEventListener('mouseover', function (e) {
const item = e.target.closest('.choices__item--choice');
if (item && item.dataset.value) {
const feature = featuresGlobal.get(item.dataset.value);
hoverLayer.clearLayers();
if (feature?.GeoFootprint) {
hoverLayer.addData(feature.GeoFootprint);
}
}
});

document.addEventListener('mouseout', function (e) {
if (e.target.closest('.choices__item--choice')) {
hoverLayer.clearLayers();
}
});

if (obtainedFeatures.length > 0) {
enableUIElements()
Expand Down Expand Up @@ -605,8 +648,8 @@ const requestVisualization = async () => {
const totalTimeout = 120 // secs // TODO timeout of backend processing after 120 sec. Enough?
const backendReplyTimeout = 30 * 1000; // 1 sec = 1 000 millisecs // TODO timeout of backend call after 30 sec. Enough?

const featureId = document.querySelector("#available-features-select").value;
const platform = featuresGlobal.get(featureId).platform;
const selectedFeatureId = document.getElementById("available-features-select").value;
const platform = featuresGlobal.get(selectedFeatureId).platform;
const filters = Object.fromEntries(filtersGlobal.get(platform));

const method = 'POST';
Expand All @@ -615,7 +658,7 @@ const requestVisualization = async () => {
}
const bodyJson = JSON.stringify(
{
feature_id: featureId,
feature_id: selectedFeatureId,
platform: platform,
filters: filters
}
Expand Down Expand Up @@ -699,12 +742,12 @@ const showBorders = () => {
showedPolygon.remove()
}

let featureId = document.querySelector("#available-features-select").value;
if (!featureId) {
const selectedFeatureId = document.getElementById("available-features-select").value;
if (!selectedFeatureId) {
return;
}

let coordinates = transposeCoordinates(featuresGlobal.get(featureId).GeoFootprint.coordinates[0]);
let coordinates = transposeCoordinates(featuresGlobal.get(selectedFeatureId).GeoFootprint.coordinates[0]);

showedPolygon = L.polygon(coordinates, {
color: 'black', //obrys
Expand Down