Skip to content

Commit

Permalink
Merge pull request #489 from episphere/404-remove-ability-to-select-d…
Browse files Browse the repository at this point in the history 
…ifferent-measures-in-map-cards

Added global measure selection to map page
  • Loading branch information
@LKMason
LKMason authored Nov 27, 2024
2 parents b9b2fc6 + 3dc3a88 commit 85c11c6
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 26 deletions.
43 changes: 23 additions & 20 deletions src/pages/mapPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ class MapApplication {
grid: document.getElementById("grid-stack"),
buttonUndo: document.getElementById("button-undo"),
buttonColorSettings: document.getElementById("button-color-settings"),
buttonDataSettings: document.getElementById("button-data-settings"),
buttonTable: document.getElementById("button-table"), // Table button
buttonDownload: document.getElementById("button-download"), // Data download button
buttonDownloadImage: document.getElementById("button-download-image"), // Image download button
Expand All @@ -87,6 +88,8 @@ class MapApplication {
colorSettings: document.getElementById("color-settings"),
buttonColorSettingsClose: document.getElementById("color-settings-close"),

dataSettings: document.getElementById("data-settings"),

// Map tooltip
mapTooltipContent: document.getElementById("map-tooltip"),
mapTooltipName: document.getElementById("map-tooltip-name"),
Expand Down Expand Up @@ -249,10 +252,6 @@ class MapApplication {
this.state.defineProperty("yearOptions", CONSTANTS.DATA_YEARS);
this.state.defineProperty("cause", initialState.cause);
this.state.defineProperty("causeOptions", optionValues.cause);
this.state.defineProperty("measure", initialState.measure);
this.state.defineProperty("measureOptions", CONSTANTS.NUMERIC_MEASURES.map(d => ({
value: d, label: formatName("measures", d)
})));
this.state.defineProperty("spatialLevel", initialState.spatialLevel);
this.state.defineProperty("spatialLevelOptions", CONSTANTS.SPATIAL_LEVELS.map(d => ({
value: d, label: formatName("levels", d)
Expand Down Expand Up @@ -280,12 +279,27 @@ class MapApplication {
this.updateUrl();
});

this.state.defineProperty("measure", initialState.measure);
this.state.defineProperty("measureOptions", CONSTANTS.NUMERIC_MEASURES.map(d => ({
value: d, label: formatName("measures", d)
})));

this.state.subscribe("spatialLevel", () => {
if (this.state.spatialLevel == "state") {
this.state.areaCounty = "All";
}
})

this.state.subscribe("measure", () => this.updateMeasure());
}

updateMeasure() {
if (this.cardStates) {
for (const cardState of this.cardStates) {
cardState.measure = this.state.measure;
}
this.updateGrid();
}
}

showInitialHints() {
Expand All @@ -302,19 +316,6 @@ class MapApplication {

addColorSettingsPopup() {

// const colorSettingsTooltip = addPopperTooltip(this.elems.innerDashboard);

// let tooltipShown = false;
// this.elems.buttonColorSettings.addEventListener("click", () => {
// this.elems.colorSettings.style.display = "flex";
// if (tooltipShown) {
// colorSettingsTooltip.hide();
// } else {
// colorSettingsTooltip.show(this.elems.buttonColorSettings, this.elems.colorSettings);
// }
// tooltipShown = !tooltipShown;
// })

// Add color scheme gradients
this.state.schemeOptions = Object.entries(formatName("colorSchemes")).map(
([k, name]) => {
Expand All @@ -340,7 +341,7 @@ class MapApplication {
outlierCutoffRangeText.innerText = "±" + this.state.outlierCutoff + "σ";

minorPopup(this.elems.innerDashboard, this.elems.buttonColorSettings, this.elems.colorSettings, "Color Settings");

minorPopup(this.elems.innerDashboard, this.elems.buttonDataSettings, this.elems.dataSettings, "Data Settings");
}

async createMapTooltip() {
Expand Down Expand Up @@ -486,9 +487,9 @@ class MapApplication {
*/
parseUrl() {
for (const field of [...CONSTANTS.CARD_STATE_FIELDS, ...CONSTANTS.STATE_URL_FIELDS]) {
const value = this.url.searchParams.get(field);
let value = this.url.searchParams.get(field);
if (value != null) {
this.state[field] = value;
this.state[field] = JSON.parse(value);
} else {
this.state[field] = CONSTANTS.DEFAULT_STATE[field];
}
Expand Down Expand Up @@ -694,6 +695,8 @@ class MapApplication {
this.elems.colorLegend.innerHTML = '';
this.elems.colorLegend.appendChild(sharedColorLegend);

this.updateTooltipHistogram();

this.plotGrid.renderCards();
}

Expand Down
15 changes: 9 additions & 6 deletions visualization/map.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@
<i id="button-edit-grid" class="settings-button fa-solid fa-plus" ></i>
<i id="button-undo" class="settings-button fa-solid fa-rotate-left" tip="Undo"></i>
<i id="button-color-settings" class="settings-button fas fa-palette" tip="Color settings"></i>
<i id="button-data-settings" class="settings-button fas fa-database" tip="Data Settings"></i>
<!-- Table download button -->
<i id="button-table" class="settings-button fa-solid fa-table" tip="Show data table"></i>
<!-- Image download button -->
Expand Down Expand Up @@ -126,12 +127,6 @@
<select id="select-select-county" class="form-select mb-2" aria-label="US County select">
</select>
</div>

<div class="plot-card-select">
<label for="select-measure">Measure</label>
<select id="select-measure" class="form-select mb-2" aria-label="Measure select" >
</select>
</div>

<div class="plot-card-select">
<label for="select-level">Spatial Level</label>
Expand Down Expand Up @@ -182,6 +177,14 @@ <h5><i class="bi bi-gear-fill me-2"></i>Color Scheme Settings</h5>
</div>
</div>

<div id="data-settings">
<div class="plot-card-select">
<label for="select-measure">Measure</label>
<select id="select-measure" class="form-select mb-2" aria-label="Measure select" >
</select>
</div>
</div>

<!-- The map tooltip element, initially hidden -->
<div id="map-tooltip">
<div id="map-tooltip-topbar">
Expand Down

0 comments on commit 85c11c6

Please sign in to comment.