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

Adding Markdown support to Legend text #1279

Merged
merged 11 commits into from
Jun 26, 2024
Merged

Adding Markdown support to Legend text #1279

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
3dc9d1d
Initial Markdown support
gislawill Jun 18, 2024
882cffb
Merge branch 'master' into 1233-feature-request-support-markdown-in-l…
gislawill Jun 18, 2024
a683cf7
Mock in tests
gislawill Jun 18, 2024
52fb77b
Update snapshot
gislawill Jun 18, 2024
c71f9e9
appease eslint
gislawill Jun 18, 2024
959326c
Updating links to open in new tab
gislawill Jun 18, 2024
93cce38
Add content for QA
gislawill Jun 21, 2024
1e838ea
Merge branch 'master' into 1233-feature-request-support-markdown-in-l…
gislawill Jun 26, 2024
075fe7c
Adding links to legend_text in layers.json
gislawill Jun 26, 2024
295cec8
Adding translation files
gislawill Jun 26, 2024
f32a6b6
Updating Readme
gislawill Jun 26, 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
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ Under `categories`, you can specify the menu structure and reference to any laye

### layers.json

In this file, we define the specific layer settings for data access, titles, and legends. You can define a new layer from scratch, or override a layer that exists in the `shared/layers.json`. In that case, you only need to specify the fields that need to be overriden. Similarly, legends can be predefined in `shared/legends.json` and simply reference to by id.
In this file, we define the specific layer settings for data access, titles, and legends. You can define a new layer from scratch, or override a layer that exists in the `shared/layers.json`. In that case, you only need to specify the fields that need to be overriden. Similarly, legends can be predefined in `shared/legends.json` and simply reference to by id. The `"legend_text"` attribute describes the source of the data and can use Markdown syntax to render [links](example.com), *italics*, and **bold** text within our H5 typography.

There are 4 main types of layers.

Expand Down
1 change: 1 addition & 0 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@
"react-draggable": "^4.4.3",
"react-i18next": "^11.15.4",
"react-map-gl": "^7.1.0",
"react-markdown": "^8.0.7",
"react-pdf": "^5.7.2",
"react-range-slider-input": "^3.0.7",
"react-redux": "^7.2.0",
Expand Down
10 changes: 5 additions & 5 deletions frontend/src/components/MapView/Legends/LegendItem/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,14 @@ exports[`renders as expected 1`] = `
/>
</div>
<div
class="MuiLinearProgress-root makeStyles-root-10 MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate"
class="MuiLinearProgress-root makeStyles-root-11 MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate"
role="progressbar"
>
<div
class="MuiLinearProgress-bar makeStyles-hide-12 MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Indeterminate"
class="MuiLinearProgress-bar makeStyles-hide-13 MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Indeterminate"
/>
<div
class="MuiLinearProgress-bar makeStyles-hide-12 MuiLinearProgress-bar2Indeterminate MuiLinearProgress-barColorPrimary"
class="MuiLinearProgress-bar makeStyles-hide-13 MuiLinearProgress-bar2Indeterminate MuiLinearProgress-barColorPrimary"
/>
</div>
<div
Expand All @@ -55,7 +55,7 @@ exports[`renders as expected 1`] = `
style="margin: 8px 0px;"
/>
<div
class="MuiBox-root MuiBox-root-13"
class="MuiBox-root MuiBox-root-14"
>
<mock-tooltip
title="Opacity"
Expand Down Expand Up @@ -89,7 +89,7 @@ exports[`renders as expected 1`] = `
open="false"
>
<div
class="MuiBox-root MuiBox-root-14 memo-opacityBox-3"
class="MuiBox-root MuiBox-root-15 memo-opacityBox-3"
>
<mock-typography
classes="[object Object]"
Expand Down
29 changes: 27 additions & 2 deletions frontend/src/components/MapView/Legends/LegendItem/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ import AnalysisDownloadButton from 'components/MapView/Legends//AnalysisDownload
import { toggleRemoveLayer } from 'components/MapView/LeftPanel/layersPanel/MenuItem/MenuSwitch/SwitchItem/utils';
import { opacitySelector, setOpacity } from 'context/opacityStateSlice';
import { lightGrey } from 'muiTheme';
import Markdown from 'react-markdown';
import LoadingBar from '../LoadingBar';

// Children here is legendText
Expand Down Expand Up @@ -208,10 +209,29 @@ const LegendItem = memo(
}
return (
<Grid item>
<Typography variant="h5">{children}</Typography>
{typeof children === 'string' ? (
<Markdown
linkTarget="_blank"
components={{
p: ({ children: pChildren }: { children: React.ReactNode }) => (
<Typography
variant="h5"
className={classes.legendTextMarkdown}
>
{pChildren}
</Typography>
),
}}
allowedElements={['p', 'h5', 'strong', 'em', 'a']}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a reason to limit elements here? If so, it might be useful to reference allowed elements somewhere else. In the readme maybe or next to the the legendText type?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Many of the theoretically allowable elements would not have acceptable formatting here (thinking of examples like tables, lists, code, etc). Rather than try to build reasonably acceptable formatting for all of these elements, I decided to limit to the elements I believe this feature request is intended for.

Good idea, I'll add a note to the readme what exactly is supported

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated ✅

>
{children}
</Markdown>
) : (
<Typography variant="h5">{children}</Typography>
)}
</Grid>
);
}, [children]);
}, [children, classes.legendTextMarkdown]);

return (
<ListItem disableGutters dense>
Expand Down Expand Up @@ -321,6 +341,11 @@ const styles = () =>
width: 28,
lineHeight: '36px',
},
legendTextMarkdown: {
'& a': {
textDecoration: 'underline',
},
},
});

interface LegendItemProps
Expand Down
16 changes: 8 additions & 8 deletions frontend/src/config/cambodia/layers.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,7 +251,7 @@
"base_url": "https://api.earthobservation.vam.wfp.org/ows/",
"date_interval": "days",
"opacity": 0.7,
"legend_text": "Estimate of precipitation over a 10-day period derived from CHIRPS (UCSB Climate Hazards Group). https://www.chc.ucsb.edu/data/chirps",
"legend_text": "Estimate of precipitation over a 10-day period derived from [CHIRPS (UCSB Climate Hazards Group)](https://www.chc.ucsb.edu/data/chirps).",
"legend": [
{ "value": 0, "label": "0 mm", "color": "#fafafa" },
{ "value": 0.01, "label": "1-2 mm", "color": "#fffadf" },
Expand Down Expand Up @@ -312,7 +312,7 @@
"base_url": "https://api.earthobservation.vam.wfp.org/ows/",
"date_interval": "days",
"opacity": 0.7,
"legend_text": "10-day precipitation anomaly compared to the long term average. Derived from CHIRPS (UCSB Climate Hazards Group). https://www.chc.ucsb.edu/data/chirps",
"legend_text": "10-day precipitation anomaly compared to the long term average. Derived from [CHIRPS (UCSB Climate Hazards Group)](https://www.chc.ucsb.edu/data/chirps).",
"legend": [
{ "value": 0, "label": "< 20%", "color": "#8c4800" },
{ "value": 20, "label": "20-40%", "color": "#af6b27" },
Expand Down Expand Up @@ -364,7 +364,7 @@
"base_url": "https://api.earthobservation.vam.wfp.org/ows/",
"date_interval": "days",
"opacity": 0.7,
"legend_text": "Monthly precipitation anomaly compared to the long term average. Derived from CHIRPS (UCSB Climate Hazards Group). https://www.chc.ucsb.edu/data/chirps",
"legend_text": "Monthly precipitation anomaly compared to the long term average. Derived from [CHIRPS (UCSB Climate Hazards Group)](https://www.chc.ucsb.edu/data/chirps).",
"legend": [
{ "value": 0, "label": "< 20%", "color": "#8c4800" },
{ "value": 20, "label": "20-40%", "color": "#af6b27" },
Expand Down Expand Up @@ -416,7 +416,7 @@
},
"date_interval": "days",
"opacity": 0.7,
"legend_text": "3-month precipitation anomaly compared to the long term average. Derived from CHIRPS (UCSB Climate Hazards Group). https://www.chc.ucsb.edu/data/chirps",
"legend_text": "3-month precipitation anomaly compared to the long term average. Derived from [CHIRPS (UCSB Climate Hazards Group)](https://www.chc.ucsb.edu/data/chirps).",
"legend": [
{ "value": 0, "label": "< 20%", "color": "#8c4800" },
{ "value": 20, "label": "20-40%", "color": "#af6b27" },
Expand Down Expand Up @@ -444,7 +444,7 @@
},
"date_interval": "days",
"opacity": 0.7,
"legend_text": "6-month precipitation anomaly compared to the long term average. Derived from CHIRPS (UCSB Climate Hazards Group). https://www.chc.ucsb.edu/data/chirps",
"legend_text": "6-month precipitation anomaly compared to the long term average. Derived from [CHIRPS (UCSB Climate Hazards Group)](https://www.chc.ucsb.edu/data/chirps).",
"legend": [
{ "value": 0, "label": "< 50%", "color": "#8c4800" },
{ "value": 50, "label": "50-60%", "color": "#af6b27" },
Expand Down Expand Up @@ -472,7 +472,7 @@
},
"date_interval": "days",
"opacity": 0.7,
"legend_text": "9-month precipitation anomaly compared to the long term average. Derived from CHIRPS (UCSB Climate Hazards Group). https://www.chc.ucsb.edu/data/chirps",
"legend_text": "9-month precipitation anomaly compared to the long term average. Derived from [CHIRPS (UCSB Climate Hazards Group)](https://www.chc.ucsb.edu/data/chirps).",
"legend": [
{ "value": 0, "label": "< 50%", "color": "#8c4800" },
{ "value": 50, "label": "50-60%", "color": "#af6b27" },
Expand Down Expand Up @@ -500,7 +500,7 @@
},
"date_interval": "days",
"opacity": 0.7,
"legend_text": "1-year precipitation anomaly compared to the long term average. Derived from CHIRPS (UCSB Climate Hazards Group). https://www.chc.ucsb.edu/data/chirps",
"legend_text": "1-year precipitation anomaly compared to the long term average. Derived from [CHIRPS (UCSB Climate Hazards Group)](https://www.chc.ucsb.edu/data/chirps).",
"legend": [
{ "value": 0, "label": "< 50%", "color": "#8c4800" },
{ "value": 50, "label": "50-60%", "color": "#af6b27" },
Expand Down Expand Up @@ -547,7 +547,7 @@
},
"date_interval": "days",
"opacity": 0.7,
"legend_text": "Total aggregate precipitation over a 1-month period, rolling every 10 days. Derived from CHIRPS (UCSB Climate Hazards Group). https://www.chc.ucsb.edu/data/chirps",
"legend_text": "Total aggregate precipitation over a 1-month period, rolling every 10 days. Derived from [CHIRPS (UCSB Climate Hazards Group)](https://www.chc.ucsb.edu/data/chirps).",
"legend": [
{ "value": 0, "label": "0 mm", "color": "#fafafa" },
{ "value": 0.01, "label": "1-5 mm", "color": "#fffadf" },
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/config/cambodia/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@
"Rows Per Page": "ជួរដេកក្នុងមួយទំព័រ",
"Of": "នៃ",
"Go To": "ទៅ",
"Estimate of precipitation over a 10-day period derived from CHIRPS (UCSB Climate Hazards Group). https://www.chc.ucsb.edu/data/chirps": "ការប៉ាន់ប្រមាណនៃទឹកភ្លៀងក្នុងរយៈពេល 10 ថ្ងៃដែលបានមកពី CHIRPS (UCSB Climate Hazards Group). https://www.chc.ucsb.edu/data/chirps",
"Estimate of precipitation over a 10-day period derived from [CHIRPS (UCSB Climate Hazards Group)](https://www.chc.ucsb.edu/data/chirps).": "ការប៉ាន់ប្រមាណនៃទឹកភ្លៀងក្នុងរយៈពេល 10 ថ្ងៃដែលបានមកពី [CHIRPS (UCSB Climate Hazards Group)](https://www.chc.ucsb.edu/data/chirps).",
"Name": "ឈ្មោះ",
"of": "នៃ",
"more than": "ច្រើនជាង",
Expand Down Expand Up @@ -159,7 +159,7 @@
"Daily flood layers are created by compositing the most recent water detected from Sentinel-1 (SAR), Sentinel-2 (optical), and Landsat8 (optical) satellite sensors. Source: SERVIR Mekong HYDRAFloods. Contains modified Copernicus Sentinel data [2022]": "ស្រទាប់ទឹកជំនន់ប្រចាំថ្ងៃត្រូវបានបង្កើតឡើងដោយការផ្សំទឹកថ្មីៗបំផុតដែលបានរកឃើញពីឧបករណ៍ចាប់សញ្ញាផ្កាយរណប Sentinel-1 (SAR), Sentinel-2 (អុបទិក) និង Landsat8 (អុបទិក) ឧបករណ៍ចាប់សញ្ញាផ្កាយរណប។ ប្រភព៖ SERVIR Mekong HYDRAFloods។ មានទិន្នន័យ Copernicus Sentinel ដែលបានកែប្រែ [2022]",
"Flood Hazard Index (higher value indicates more frequent floods)": "សន្ទស្សន៍គ្រោះថ្នាក់ទឹកជំនន់ (តម្លៃខ្ពស់ជាងបង្ហាញពីទឹកជំនន់ញឹកញាប់ជាង)",
"This layer shows river water level in millimeters (mm). It is reported from People in Need (PIN) automated river water gauge.": "ស្រទាប់នេះបង្ហាញពីកម្រិតទឹកទន្លេក្នុងមីលីម៉ែត្រ (មម)។ វាត្រូវបានរាយការណ៍ពីឧបករណ៍វាស់ទឹកតាមដងទន្លេស្វ័យប្រវត្តិ People in Need (PIN)។",
"10-day precipitation anomaly compared to the long term average. Derived from CHIRPS (UCSB Climate Hazards Group). https://www.chc.ucsb.edu/data/chirps": "ភ្លៀងធ្លាក់រយៈពេល 10 ថ្ងៃខុសពីធម្មតា បើធៀបនឹងរយៈពេលវែងជាមធ្យម។ បានមកពី CHIRPS (UCSB Climate Hazards Group) ។ https://www.chc.ucsb.edu/data/chirps",
"10-day precipitation anomaly compared to the long term average. Derived from [CHIRPS (UCSB Climate Hazards Group)](https://www.chc.ucsb.edu/data/chirps).": "ភ្លៀងធ្លាក់រយៈពេល 10 ថ្ងៃខុសពីធម្មតា បើធៀបនឹងរយៈពេលវែងជាមធ្យម។ បានមកពី CHIRPS (UCSB Climate Hazards Group) ។ https://www.chc.ucsb.edu/data/chirps",
"1-month Standardized Precipitation Index calculated from dekadal CHIRPS data": "សន្ទស្សន៍ទឹកភ្លៀងតាមស្តង់ដាររយៈពេល 1 ខែដែលគណនាពីទិន្នន័យ dekadal CHIRPS",
"Number of consecutive days with less than 2 mm precipitation in the last 30 days": "ចំនួនថ្ងៃជាប់ៗគ្នាដែលមានទឹកភ្លៀងតិចជាង 2 មម ក្នុងរយៈពេល 30 ថ្ងៃចុងក្រោយ",
"Longest number of consecutive days with less than 2 mm precipitation in the last 30 days": "ចំនួនថ្ងៃជាប់ៗគ្នាយូរបំផុតដែលមានភ្លៀងធ្លាក់តិចជាង 2 មីលីម៉ែត្រក្នុងរយៈពេល 30 ថ្ងៃចុងក្រោយ",
Expand Down
22 changes: 11 additions & 11 deletions frontend/src/config/cameroon/layers.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -410,7 +410,7 @@
"type": "bar"
},
"opacity": 0.7,
"legend_text": "Estimate of precipitation over a 10-day period derived from CHIRPS (UCSB Climate Hazards Group). https://www.chc.ucsb.edu/data/chirps",
"legend_text": "Estimate of precipitation over a 10-day period derived from [CHIRPS (UCSB Climate Hazards Group)](https://www.chc.ucsb.edu/data/chirps).",
"legend": [
{
"value": 0,
Expand Down Expand Up @@ -529,7 +529,7 @@
"type": "line"
},
"opacity": 0.7,
"legend_text": "10-day precipitation anomaly compared to the long term average. Derived from CHIRPS (UCSB Climate Hazards Group). https://www.chc.ucsb.edu/data/chirps",
"legend_text": "10-day precipitation anomaly compared to the long term average. Derived from [CHIRPS (UCSB Climate Hazards Group)](https://www.chc.ucsb.edu/data/chirps).",
"legend": [
{
"value": 0,
Expand Down Expand Up @@ -638,7 +638,7 @@
],
"type": "line"
},
"legend_text": "Monthly precipitation anomaly compared to the long term average. Derived from CHIRPS (UCSB Climate Hazards Group). https://www.chc.ucsb.edu/data/chirps",
"legend_text": "Monthly precipitation anomaly compared to the long term average. Derived from [CHIRPS (UCSB Climate Hazards Group)](https://www.chc.ucsb.edu/data/chirps).",
"legend": [
{
"value": 0,
Expand Down Expand Up @@ -744,7 +744,7 @@
],
"type": "line"
},
"legend_text": "3-month precipitation anomaly compared to the long term average. Derived from CHIRPS (UCSB Climate Hazards Group). https://www.chc.ucsb.edu/data/chirps",
"legend_text": "3-month precipitation anomaly compared to the long term average. Derived from [CHIRPS (UCSB Climate Hazards Group)](https://www.chc.ucsb.edu/data/chirps).",
"legend": [
{
"label": "< 60%",
Expand Down Expand Up @@ -791,7 +791,7 @@
"base_url": "https://api.earthobservation.vam.wfp.org/ows/",
"date_interval": "days",
"opacity": 0.7,
"legend_text": "6-month precipitation anomaly compared to the long term average. Derived from CHIRPS (UCSB Climate Hazards Group). https://www.chc.ucsb.edu/data/chirps",
"legend_text": "6-month precipitation anomaly compared to the long term average. Derived from [CHIRPS (UCSB Climate Hazards Group)](https://www.chc.ucsb.edu/data/chirps).",
"legend": [
{
"label": "< 60%",
Expand Down Expand Up @@ -838,7 +838,7 @@
"base_url": "https://api.earthobservation.vam.wfp.org/ows/",
"date_interval": "days",
"opacity": 0.7,
"legend_text": "9-month precipitation anomaly compared to the long term average. Derived from CHIRPS (UCSB Climate Hazards Group). https://www.chc.ucsb.edu/data/chirps",
"legend_text": "9-month precipitation anomaly compared to the long term average. Derived from [CHIRPS (UCSB Climate Hazards Group)](https://www.chc.ucsb.edu/data/chirps).",
"legend": [
{
"label": "< 60%",
Expand Down Expand Up @@ -885,7 +885,7 @@
"base_url": "https://api.earthobservation.vam.wfp.org/ows/",
"date_interval": "days",
"opacity": 0.7,
"legend_text": "1-year precipitation anomaly compared to the long term average. Derived from CHIRPS (UCSB Climate Hazards Group). https://www.chc.ucsb.edu/data/chirps",
"legend_text": "1-year precipitation anomaly compared to the long term average. Derived from [CHIRPS (UCSB Climate Hazards Group)](https://www.chc.ucsb.edu/data/chirps).",
"legend": [
{
"label": "< 60%",
Expand Down Expand Up @@ -954,7 +954,7 @@
],
"type": "bar"
},
"legend_text": "Total aggregate precipitation over a 1-month period, rolling every 10 days. Derived from CHIRPS (UCSB Climate Hazards Group). https://www.chc.ucsb.edu/data/chirps",
"legend_text": "Total aggregate precipitation over a 1-month period, rolling every 10 days. Derived from [CHIRPS (UCSB Climate Hazards Group)](https://www.chc.ucsb.edu/data/chirps).",
"legend": [
{
"value": 0,
Expand Down Expand Up @@ -2590,7 +2590,7 @@
"base_url": "https://api.earthobservation.vam.wfp.org/ows/",
"date_interval": "days",
"opacity": 0.7,
"legend_text": "Longest number of consecutive days with less than 2 mm precipitation in the last 30 days. Derived from CHIRPS (UCSB Climate Hazards Group). https://www.chc.ucsb.edu/data/chirps",
"legend_text": "Longest number of consecutive days with less than 2 mm precipitation in the last 30 days. Derived from [CHIRPS (UCSB Climate Hazards Group)](https://www.chc.ucsb.edu/data/chirps).",
"legend": [
{
"value": 0,
Expand Down Expand Up @@ -2669,7 +2669,7 @@
"base_url": "https://api.earthobservation.vam.wfp.org/ows/",
"date_interval": "days",
"opacity": 0.7,
"legend_text": "Total number of heavy rain days (rainfall > 75th percentile) within last 30 days of dekad. Derived from CHIRPS (UCSB Climate Hazards Group). https://www.chc.ucsb.edu/data/chirps",
"legend_text": "Total number of heavy rain days (rainfall > 75th percentile) within last 30 days of dekad. Derived from [CHIRPS (UCSB Climate Hazards Group)](https://www.chc.ucsb.edu/data/chirps).",
"legend": [
{
"value": 0,
Expand Down Expand Up @@ -2891,7 +2891,7 @@
"base_url": "https://api.earthobservation.vam.wfp.org/ows/",
"date_interval": "days",
"opacity": 0.7,
"legend_text": "Longest consecutive number of heavy rain days (rainfall > 75th percentile) within last 30 days of dekad. Derived from CHIRPS (UCSB Climate Hazards Group). https://www.chc.ucsb.edu/data/chirps",
"legend_text": "Longest consecutive number of heavy rain days (rainfall > 75th percentile) within last 30 days of dekad. Derived from [CHIRPS (UCSB Climate Hazards Group)](https://www.chc.ucsb.edu/data/chirps).",
"legend": [
{
"value": 0,
Expand Down
Loading
Loading