Skip to content

Commit

Permalink
Applied new style to all plot pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@LKMason
LKMason committed Jan 25, 2024
1 parent b9c24cc commit e374e79
Show file tree
Hide file tree
Showing 12 changed files with 647 additions and 433 deletions.
6 changes: 3 additions & 3 deletions src/layouts/header/header.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<div class="container">
<div id="alertMessage"></div>
<div class="row">
<div class="col zero-padding">
<div class="col py-3">
<a href="#home" title="Home" rel="home">
<img src="../static/images/NIH_NCI.jpg" height="50px" alt="NCI Data Platform Logo" />
</a>
Expand Down Expand Up @@ -57,8 +57,8 @@
title="Map Visualization">Map</a>
</li>
<li>
<a class="dropdown-item nav-link nav-menu-links dropdown-menu-links" href="/epitracker/visualization/demographic.html"
title= "Demographic Visualization">Demographic</a>
<a class="dropdown-item nav-link nav-menu-links dropdown-menu-links" href="/epitracker/visualization/demographics.html"
title= "Demographics Visualization">Demographics</a>
</li>
</ul>
</div>
Expand Down
12 changes: 7 additions & 5 deletions src/pages/prototypePage.js → src/pages/demographicsPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import choices from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';
import * as d3 from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';
import { hookCheckbox, hookSelectChoices } from "../utils/input2.js";
import { plotDemographicPlots } from "../utils/demographicPlots.js";
import * as Plot from "https://cdn.jsdelivr.net/npm/@observablehq/[email protected]/+esm";


window.onload = async () => {
Expand All @@ -26,7 +25,7 @@ const NUMERIC_MEASURES = ["crude_rate", "age_adjusted_rate"]

// The default state, shown if no URL params.
const INITIAL_STATE = {
compareBar: "sex",
compareBar: "race",
compareFacet: "none",
sex: "All",
race: "All",
Expand All @@ -45,11 +44,14 @@ export function init() {
state = new State
dataManager = new EpiTrackerData()
elements = {
barContainer: document.getElementById("bar-container"),
sidebar: document.getElementById("ex-sidebar"),
title: document.getElementById("graph-title")
barContainer: document.getElementById("plot-container"),
sidebar: document.getElementById("sidebar"),
title: document.getElementById("plot-title")
}


elements.barContainer.style.height = elements.barContainer.style.maxHeight
console.log("Set height", elements.barContainer.style.maxHeight)
initializeState()
}

Expand Down
56 changes: 38 additions & 18 deletions src/pages/mapPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ import { plotMortalityMapGrid } from "../utils/mapPlots.js";
import { dataToTableData, initSidebar, downloadMortalityData,
createDropdownDownloadButton, formatCauseName, createOptionSorter } from "../utils/helper.js";
import { downloadElementAsImage } from "../utils/download.js";
import * as d3 from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';


window.onload = async () => {
await start();
Expand Down Expand Up @@ -122,9 +124,9 @@ function initializeState() {
{id: "#select-select-year", propertyName: "year", forceEnd: "2018-2020"},
{id: "#select-measure", propertyName: "measure"},
{id: "#select-level", propertyName: "spatialLevel"},
{id: "#select-state", propertyName: "areaState", searchable: true},
{id: "#select-county", propertyName: "areaCounty", searchable: true},
{id: "#select-scheme", propertyName: "scheme", searchable: true},
{id: "#select-select-state", propertyName: "areaState", searchable: true},
{id: "#select-select-county", propertyName: "areaCounty", searchable: true},
// {id: "#select-scheme", propertyName: "scheme", searchable: true},
]) {
const sorter = createOptionSorter(["All", "None"], inputSelectConfig.propertyName == "year" ? ["2018-2020"] : [])

Expand All @@ -151,16 +153,16 @@ export function init() {
elements.selectRace = document.getElementById("select-select-race")
elements.mapNavLink = document.getElementById("map-nav-link")
elements.tableNavLink = document.getElementById("table-nav-link")
elements.mapsContainer = document.getElementById("maps-container")
elements.mapsContainer = document.getElementById("plot-container")
elements.mapGrid = document.getElementById("map-grid")
elements.tableContainer = document.getElementById("table-container")
elements.colorLegend = document.getElementById("color-legend")
elements.mapTitle = document.getElementById("graph-title")
elements.mapTitle = document.getElementById("plot-title")
elements.tableNavLink.addEventListener("click", () => {
setTimeout(() => changeView("table"), 0)
})
elements.mapNavLink.addEventListener("click", () => changeView("plot"))
elements.groupDownloadButton = document.querySelector('#group-download-container button');
elements.groupDownloadButton = document.querySelector('#download-container button');

state.subscribe("query", queryUpdated)
state.subscribe("plotConfig", plotConfigUpdated)
Expand All @@ -177,8 +179,6 @@ export function init() {
names = nameMappings
initialDataLoad(mortalityData, stateGeoJSON, countyGeoJSON, nameMappings)
})

initSidebar()
}

// =================================
Expand Down Expand Up @@ -251,9 +251,9 @@ async function queryUpdated(query) {
}

if (query.spatialLevel == "state") {
choices["#select-county"].disable()
choices["#select-select-county"].disable()
} else {
choices["#select-county"].enable()
choices["#select-select-county"].enable()
}


Expand Down Expand Up @@ -351,20 +351,22 @@ function changeView(view) {
// TODO: Improve user experience by redrawing only on change. Use deferred drawing model from previous code.

setTimeout(() => {
console.log(elements.colorLegend)
if (view == "plot") {
elements.tableNavLink.classList.remove("active")
elements.mapNavLink.classList.add("active")
elements.mapsContainer.style.display = "block"
elements.tableContainer.style.display = "none"
elements.colorLegend.style.opacity = 1
elements.colorLegend.style.display = "block"

state.trigger("plotConfig") // Trigger a redraw so sizing is correct.
} else if (view == "table") {
elements.mapNavLink.classList.remove("active")
elements.tableNavLink.classList.add("active")
elements.mapsContainer.style.display = "none"
elements.tableContainer.style.display = "block"
elements.colorLegend.style.opacity = 0
elements.colorLegend.style.display = "none"
console.log(elements.colorLegend)

if (state.mortalityData.length > 0) {
plotTable()
Expand All @@ -388,7 +390,7 @@ function addGroupDownloadButton() {
const baseFilename = "epitracker_spatial"

// TODO: Resume, try callbacks for
const groupDownloadContainer = document.getElementById("group-download-container")
const groupDownloadContainer = document.getElementById("download-container")
const downloadButton = createDropdownDownloadButton(false, [
{label: "Download data (CSV)", listener: (callback) => {
downloadMortalityData(state.mortalityData, baseFilename, "csv")
Expand Down Expand Up @@ -516,9 +518,9 @@ function setInputsEnabled(enabled) {
"select-select-year",
"select-measure",
"select-level",
"select-state",
"select-county",
"select-scheme",
"select-select-state",
"select-select-county",
// "select-scheme",
]) {
const element = document.getElementById(input)
if (enabled) {
Expand All @@ -534,11 +536,29 @@ function setInputsEnabled(enabled) {
}

function toggleLoading(loading, soft=false) {
// TODO: Reimplement

if (loading) {
document.getElementById("plots-container").style.opacity = soft ? "0.5" : "0";
document.getElementById("plot-container").style.opacity = soft ? "0.5" : "0";
document.getElementById("plot-title").style.opacity = soft ? "0.5" : "0";
document.getElementById("color-legend").style.opacity = soft ? "0.5" : "0";
document.getElementById("loader-container").style.visibility = "visible";
document.getElementById("table-container").style.visibility = "hidden"

} else {
document.getElementById("plots-container").style.opacity = "1";
document.getElementById("plot-container").style.opacity = "1";
document.getElementById("plot-title").style.opacity = "1";
document.getElementById("color-legend").style.opacity = "1";
document.getElementById("loader-container").style.visibility = "hidden";
document.getElementById("table-container").style.visibility = "visible"

}

// if (loading) {
// document.getElementById("plots-container").style.opacity = soft ? "0.5" : "0";
// document.getElementById("loader-container").style.visibility = "visible";
// } else {
// document.getElementById("plots-container").style.opacity = "1";
// document.getElementById("loader-container").style.visibility = "hidden";
// }
}
30 changes: 19 additions & 11 deletions src/pages/quantilePage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import { downloadElementAsImage } from "../utils/download.js";
import { createDropdownDownloadButton, createOptionSorter, dataToTableData, downloadMortalityData, formatCauseName, initSidebar } from "../utils/helper.js";
import { hookSelectChoices, hookCheckbox } from "../utils/input2.js";
import { plotQuantileScatter } from "../utils/quantilePlots.js";
import * as d3 from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';


window.onload = async () => {
await start();
Expand Down Expand Up @@ -56,14 +58,14 @@ export function init() {
elements.selectRace = document.getElementById("select-select-race")
elements.graphNavLink = document.getElementById("graph-nav-link")
elements.tableNavLink = document.getElementById("table-nav-link")
elements.graphContainer = document.getElementById("graph-container")
elements.graphContainer = document.getElementById("plot-container")
elements.plotContainer = document.getElementById("plot-quantiles")
elements.tableContainer = document.getElementById("table-container")
elements.colorLegend = document.getElementById("color-legend")
elements.plotLegend = document.getElementById("plot-legend")
elements.tableNavLink.addEventListener("click", () => changeView("table"))
elements.graphNavLink.addEventListener("click", () => changeView("plot"))
elements.groupDownloadButton = document.querySelector('#group-download-container button');
elements.graphTitle = document.getElementById("graph-title")
elements.graphTitle = document.getElementById("plot-title")

Promise.all([
d3.json("../data/conceptMappings.json"),
Expand All @@ -73,7 +75,6 @@ export function init() {
intitialDataLoad(mortalityData, quantileDetails, nameMappings)
})

initSidebar()
}

function initializeState() {
Expand Down Expand Up @@ -167,7 +168,6 @@ function initializeState() {
// =================================

function intitialDataLoad(mortalityData, quantileDetails, nameMappings) {
names = nameMappings
names = nameMappings
staticData.quantileDetails = quantileDetails

Expand Down Expand Up @@ -254,7 +254,7 @@ function plotConfigUpdated(plotConfig) {
colorDomainValues.sort()
}

const formatRace = d => names.races[d]?.formatted
const formatRace = d => names.race[d]?.formatted
const facetTickFormat = plotConfig.query.compareFacet == "race" ? formatRace : d => d
const colorTickFormat = plotConfig.query.compareColor == "race" ? formatRace : d => d

Expand Down Expand Up @@ -300,7 +300,7 @@ function updateLegend(data, query) {
let selectedValues = colorDomainValues.filter(d => checkedValueSet.has(d))
if (selectedValues.length == 0) selectedValues = colorDomainValues

const formatRace = d => names.races[d]?.formatted
const formatRace = d => names.race[d]?.formatted
const colorTickFormat = query.compareColor == "race" ? formatRace : d => d
const legend = checkableLegend(colorDomainValues, d3.schemeTableau10, selectedValues, colorTickFormat)
legendContainer.appendChild(legend)
Expand All @@ -321,13 +321,15 @@ function changeView(view) {
elements.graphNavLink.classList.add("active")
elements.graphContainer.style.display = "flex"
elements.tableContainer.style.display = "none"
elements.plotLegend.style.display = "block"

state.trigger("plotConfig") // Trigger a redraw so sizing is correct.
} else if (view == "table") {
elements.graphNavLink.classList.remove("active")
elements.tableNavLink.classList.add("active")
elements.graphContainer.style.display = "none"
elements.tableContainer.style.display = "block"
elements.plotLegend.style.display = "none"

if (state.mortalityData.length > 0) {
plotTable()
Expand All @@ -346,7 +348,6 @@ function addDownloadButton() {
const baseFilename = "epitracker_quantile"

const groupDownloadContainer = document.getElementById("download-container")
createDropdownDownloadButton
const downloadButton = createDropdownDownloadButton(false, [
{label: "Download data (CSV)", listener: () => downloadMortalityData(state.mortalityData, baseFilename, "csv")},
{label: "Download data (TSV)", listener: () => downloadMortalityData(state.mortalityData, baseFilename, "tsv")},
Expand Down Expand Up @@ -442,15 +443,22 @@ function plotTable() {
}

function toggleLoading(loading, soft=false) {

if (loading) {
document.getElementById("plots-container").style.opacity = soft ? "0.5" : "0";
document.getElementById("plot-container").style.opacity = soft ? "0.5" : "0";
document.getElementById("plot-title").style.opacity = soft ? "0.5" : "0";
document.getElementById("loader-container").style.visibility = "visible";
document.getElementById("table-container").style.visibility = "hidden"

} else {
document.getElementById("plots-container").style.opacity = "1";
document.getElementById("plot-container").style.opacity = "1";
document.getElementById("plot-title").style.opacity = "1";
document.getElementById("loader-container").style.visibility = "hidden";
document.getElementById("table-container").style.visibility = "visible"

}
}

}
function updateGraphTitle() {
let compareString = [state.compareColor, state.compareFacet]
.filter(d => d != "none")
Expand Down
60 changes: 30 additions & 30 deletions src/utils/helper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -351,45 +351,45 @@ const reSizePlots = (id, large, scale = 1.5) => {
// })
}

export function initSidebar() {
const button = document.getElementById('sidebar-toggle');
if (!button) return;

button.addEventListener('click', () => {
const child = Array.from(button.childNodes)[1];
if (child.classList.contains('fa-caret-left')) {
// reSizePlots(graphId, true);
child.classList.remove('fa-caret-left');
child.classList.add('fa-caret-right');
document.getElementById('sidebar').classList.remove('col-xl-2');
document.getElementById('sidebar').classList.add('d-none');
document.getElementById('main-content').classList.remove('col-xl-10');
document.getElementById('main-content').classList.add('col-xl-12');
}
else {
// reSizePlots(graphId, false);
child.classList.remove('fa-caret-right');
child.classList.add('fa-caret-left');
document.getElementById('sidebar').classList.add('col-xl-2');
document.getElementById('sidebar').classList.remove('d-none');
document.getElementById('main-content').classList.add('col-xl-10');
document.getElementById('main-content').classList.remove('col-xl-12');
}
})
}
// export function initSidebar() {
// const button = document.getElementById('sidebar-toggle');
// if (!button) return;

// button.addEventListener('click', () => {
// const child = Array.from(button.childNodes)[1];
// if (child.classList.contains('fa-caret-left')) {
// // reSizePlots(graphId, true);
// child.classList.remove('fa-caret-left');
// child.classList.add('fa-caret-right');
// document.getElementById('sidebar').classList.remove('col-xl-2');
// document.getElementById('sidebar').classList.add('d-none');
// document.getElementById('main-content').classList.remove('col-xl-10');
// document.getElementById('main-content').classList.add('col-xl-12');
// }
// else {
// // reSizePlots(graphId, false);
// child.classList.remove('fa-caret-right');
// child.classList.add('fa-caret-left');
// document.getElementById('sidebar').classList.add('col-xl-2');
// document.getElementById('sidebar').classList.remove('d-none');
// document.getElementById('main-content').classList.add('col-xl-10');
// document.getElementById('main-content').classList.remove('col-xl-12');
// }
// })
// }

export function initSidebar2() {
export function initSidebar() {
// TODO: Remove 'ex' prefixes.
const button = document.getElementById("ex-sidebar-toggle")
const sidebar = document.getElementById("ex-sidebar")
const button = document.getElementById("sidebar-toggle")
const sidebar = document.getElementById("sidebar")

button.addEventListener('click', () => {
console.log("Hide sidebar")
if (sidebar.classList.contains("sidebar-hidden")) {
sidebar.classList.remove("sidebar-hidden")
} else {
sidebar.classList.add("sidebar-hidden")
}

})
}

Expand Down
Loading

0 comments on commit e374e79

Please sign in to comment.