diff --git a/vacs-map-app/src/LandingPage.vue b/vacs-map-app/src/LandingPage.vue index e0673e0..44994ac 100644 --- a/vacs-map-app/src/LandingPage.vue +++ b/vacs-map-app/src/LandingPage.vue @@ -2,7 +2,7 @@
diff --git a/vacs-map-app/src/MapExplorer.vue b/vacs-map-app/src/MapExplorer.vue index b75486a..0044645 100644 --- a/vacs-map-app/src/MapExplorer.vue +++ b/vacs-map-app/src/MapExplorer.vue @@ -21,6 +21,7 @@ + @@ -39,9 +40,10 @@ import MapContainerColorSoil from '@/components/MapContainerColorSoil.vue' import MapContainerColorSand from '@/components/MapContainerColorSand.vue' import MapContainerColorPopulation from '@/components/MapContainerColorPopulation.vue' import { useMapExploreStore } from '@/stores/mapExplore' -import LayoutOverview from './components/layouts/LayoutOverview.vue' -import ExploreSidebar from './components/ExploreSidebar.vue' -import RegionPicker from './components/RegionPicker.vue' +import LayoutOverview from '@/components/layouts/LayoutOverview.vue' +import ExploreSidebar from '@/components/ExploreSidebar.vue' +import RegionPicker from '@/components/RegionPicker.vue' +import MapTooltip from '@/components/MapTooltip.vue' import MapLegend from '@/components/MapLegend.vue' const availableMaps = [ diff --git a/vacs-map-app/src/assets/img/info.svg b/vacs-map-app/src/assets/img/info.svg new file mode 100644 index 0000000..e482390 --- /dev/null +++ b/vacs-map-app/src/assets/img/info.svg @@ -0,0 +1,4 @@ + + + + diff --git a/vacs-map-app/src/components/ContentModal.vue b/vacs-map-app/src/components/ContentModal.vue index d4f17ec..518c9cf 100644 --- a/vacs-map-app/src/components/ContentModal.vue +++ b/vacs-map-app/src/components/ContentModal.vue @@ -62,6 +62,8 @@ onClickOutside(contentInnerRef, () => emit('close')) overflow-y: auto; max-width: 50%; padding: 2.5rem; + + white-space: pre-line; } .header { diff --git a/vacs-map-app/src/components/DistributionPlot.vue b/vacs-map-app/src/components/DistributionPlot.vue index 651c044..466c25f 100644 --- a/vacs-map-app/src/components/DistributionPlot.vue +++ b/vacs-map-app/src/components/DistributionPlot.vue @@ -156,7 +156,7 @@ const draw = () => { //draw hovered if (hoveredId.value) { - const cell = gridCells?.value.find(d => d.id === hoveredId.value); + const cell = gridCells?.value.find((d) => d.id === hoveredId.value) context.value.fillStyle = 'white' context.value.fillRect(cell.x, 0, 3, height.value) } diff --git a/vacs-map-app/src/components/ExploreSidebar.vue b/vacs-map-app/src/components/ExploreSidebar.vue index c52a5bc..2c9e0e2 100644 --- a/vacs-map-app/src/components/ExploreSidebar.vue +++ b/vacs-map-app/src/components/ExploreSidebar.vue @@ -14,7 +14,15 @@
- What are {{ selectedCropInfo?.label }}'s characteristics? + + What are {{ selectedCropInfo?.label }}'s characteristics? + +
@@ -23,8 +31,14 @@
- How will climate change affect {{ selectedCropInfo?.label }}? + How will climate change affect {{ selectedCropInfo?.label }}? + + @@ -81,7 +95,13 @@ const getCropsByGroup = (group) => { return cropInformation?.value?.filter((crop) => crop.crop_group === group) } -const openModal = (s) => { +const openChartModal = (chartType) => { + modalOpen.value = true + modalHeader.value = 'How do I interpret this chart?' + modalContent.value = copy.value[chartType + '_chart'] +} + +const openScenarioModal = (s) => { modalOpen.value = true modalHeader.value = copy.value[`${s}_label`] + ' scenario' + ` (${s.split('_')[1].toUpperCase()})` modalContent.value = copy.value[`${s}_long`] @@ -112,11 +132,20 @@ const openModal = (s) => { } .sidebar-header { - font-size: 1rem; + font-size: 0.925rem; font-weight: 600; line-height: 120%; } +.info { + vertical-align: top; + cursor: pointer; +} + +.info:hover { + opacity: 0.7; +} + .grow { flex-grow: 1; } diff --git a/vacs-map-app/src/components/GridOverlay.vue b/vacs-map-app/src/components/GridOverlay.vue index ad34278..633ae26 100644 --- a/vacs-map-app/src/components/GridOverlay.vue +++ b/vacs-map-app/src/components/GridOverlay.vue @@ -4,8 +4,8 @@ import * as d3 from 'd3' import { computed, toRefs, watch } from 'vue' import { divergingScheme } from '@/utils/colors' -import { storeToRefs } from 'pinia'; -import { useMapExploreStore } from '../stores/mapExplore'; +import { storeToRefs } from 'pinia' +import { useMapExploreStore } from '../stores/mapExplore' const props = defineProps({ id: { @@ -84,8 +84,8 @@ const { stroke } = toRefs(props) -const mapExploreStore = useMapExploreStore(); -const { hoveredId } = storeToRefs(mapExploreStore); +const mapExploreStore = useMapExploreStore() +const { hoveredId } = storeToRefs(mapExploreStore) const addLayer = () => { if (!map.value || !mapReady.value || map.value.getLayer(id.value)) return @@ -99,19 +99,9 @@ const addLayer = () => { 'circle-stroke-width': fill.value ? 0.2 : 1.5, 'circle-stroke-color': getCircleStrokeColor(), 'circle-stroke-opacity': fill.value ? 0 : 0.8, - 'circle-opacity': [ - 'case', - ['boolean', ['feature-state', 'hovered'], false], - 0.5, - 1 - ], + 'circle-opacity': ['case', ['boolean', ['feature-state', 'hovered'], false], 0.5, 1], 'circle-color': getCircleFillColor(), - 'circle-blur': [ - 'case', - ['boolean', ['feature-state', 'hovered'], false], - 0, - 0.5 - ], + 'circle-blur': ['case', ['boolean', ['feature-state', 'hovered'], false], 0, 0.5] } }, 'settlement-subdivision-label' @@ -122,23 +112,23 @@ const addLayer = () => { const addHoverListeners = () => { if (!map.value || !mapReady.value || !map.value.getLayer(id.value)) return - + map.value.on('mousemove', id.value, (event) => { - if (!event?.features?.length) return; - const feature = event?.features[0]; + if (!event?.features?.length) return + const feature = event?.features[0] if (feature?.id) { - if (!feature.properties[colorColumn.value]) return; - hoveredId.value = feature.properties.id; + if (!feature.properties[colorColumn.value]) return + hoveredId.value = feature.properties.id } - }); + }) map.value.on('mouseleave', id.value, (event) => { - hoveredId.value = null; - }); + hoveredId.value = null + }) } const updateHoveredFeatureState = (elementId, hovered) => { - if (!id) return; + if (!id.value) return map.value.setFeatureState( { source: sourceId.value, @@ -147,7 +137,7 @@ const updateHoveredFeatureState = (elementId, hovered) => { { hovered } - ); + ) } const getCircleColorQuintiles = (quintiles) => { @@ -266,22 +256,22 @@ const getCircleColorDiverging = (extent, center) => { return [ 'case', ['!=', ['get', colorColumn.value], null], + [ + 'case', + ['boolean', ['feature-state', 'hovered'], false], + 'white', [ - 'case', - ['boolean', ['feature-state', 'hovered'], false], - 'white', - [ - 'interpolate', - ['linear'], - ['get', colorColumn.value], - min, - getColor(0), - center, - divergingScheme.center, - max, - getColor(1) - ], - ], + 'interpolate', + ['linear'], + ['get', colorColumn.value], + min, + getColor(0), + center, + divergingScheme.center, + max, + getColor(1) + ] + ], 'transparent' ] } diff --git a/vacs-map-app/src/components/MapTooltip.vue b/vacs-map-app/src/components/MapTooltip.vue new file mode 100644 index 0000000..b8c7fa0 --- /dev/null +++ b/vacs-map-app/src/components/MapTooltip.vue @@ -0,0 +1,54 @@ + + + + + diff --git a/vacs-map-app/src/components/TooltipWrapper.vue b/vacs-map-app/src/components/TooltipWrapper.vue new file mode 100644 index 0000000..850a998 --- /dev/null +++ b/vacs-map-app/src/components/TooltipWrapper.vue @@ -0,0 +1,129 @@ + + + + + diff --git a/vacs-map-app/src/stores/mapExplore.js b/vacs-map-app/src/stores/mapExplore.js index 153556d..3457c49 100644 --- a/vacs-map-app/src/stores/mapExplore.js +++ b/vacs-map-app/src/stores/mapExplore.js @@ -5,6 +5,6 @@ export const useMapExploreStore = defineStore('mapExplore', () => { const selectedMap = ref('') const hoveredId = ref(null) const mapPadding = ref(null) - + return { selectedMap, mapPadding, hoveredId } }) diff --git a/vacs-map-app/src/stores/siteContent.js b/vacs-map-app/src/stores/siteContent.js index 3a34036..6187cb2 100644 --- a/vacs-map-app/src/stores/siteContent.js +++ b/vacs-map-app/src/stores/siteContent.js @@ -21,7 +21,11 @@ export const useContentStore = defineStore('siteContent', () => { future_ssp370_long: 'Climate modeling experts often use narrative based scenarios to project what greenhouse gas emissions could be in the future. SSP370 is one of these scenarios. It is a middle of the road, somewhat pessimistic projection, of what climate emissions could look like in the future projecting a global average temperature rise exceeding 3°C by 2100. The scenario itself is rooted in a revival of nationalism and regional conflicts that push global issues into the background. In this scenario, policies increasingly focus on questions of national and regional security; investments in education and technological development are decreasing; inequality is rising; some regions suffer drastic environmental damage. In this application SSP370 represents the higher greenhouse gas emissions future and crop yields in the high emissions model are simulated based on this value.', yield_ratio: - 'A crops yield ratio at a given location compares its modeled historical amount produced (also known as yield) to the projected production in the selected future scenario. A negative yield ratio means that the projected yield in the future will be less than what it has been in the past. A positive yield ratio means the projected yield in the future will be more than it has been in the past. A yield ratio of zero means the projected yield is the same as the historical yield.' + 'A crops yield ratio at a given location compares its modeled historical amount produced (also known as yield) to the projected production in the selected future scenario. A negative yield ratio means that the projected yield in the future will be less than what it has been in the past. A positive yield ratio means the projected yield in the future will be more than it has been in the past. A yield ratio of zero means the projected yield is the same as the historical yield.', + distribution_chart: + 'These two line graphs show how a crop will do in each climate change scenario. Any dot that has data on the map is drawn as a line in this chart. Its position on the chart indicates how positive or negative the yield ratio is in that specific scenario. \n\n Hover over the scenario name to learn more about what each model indicates or choose a new crop to see how climate change impacts different crops.', + fingerprint_chart: + 'This crop footprint gives an impression of the nutritional, biophysical, and genetic characteristics of the selected crop. Larger segments with more ticks have better scores in that category. Some charts also show a benchmark crop outline that represents a more widely-used or known crop in the same food group that can be useful in understanding footprint of the crop on the map. \n\n Hover over a column to see what each segment is representing or hover over a category to highlight that specific section. Choose a new crop to understand how its nutritional, biophysical, and genetic characteristics vary.' }) return {