diff --git a/src/actions/recomputeReduxState.js b/src/actions/recomputeReduxState.js
index 0345f4293..09d734dbe 100644
--- a/src/actions/recomputeReduxState.js
+++ b/src/actions/recomputeReduxState.js
@@ -743,6 +743,9 @@ const createMetadataStateFromJSON = (json) => {
if (json.meta.description) {
metadata.description = json.meta.description;
}
+ if (json.meta.warning) {
+ metadata.warning = json.meta.warning;
+ }
if (json.version) {
metadata.version = json.version;
}
diff --git a/src/components/framework/fine-print.js b/src/components/framework/fine-print.js
index 368639946..5943a1eec 100644
--- a/src/components/framework/fine-print.js
+++ b/src/components/framework/fine-print.js
@@ -161,7 +161,9 @@ export function getCustomFinePrint() {
return (
>}>
-
+
);
diff --git a/src/components/framework/footer.js b/src/components/framework/footer.js
index 32e6018c4..0f88784e6 100644
--- a/src/components/framework/footer.js
+++ b/src/components/framework/footer.js
@@ -163,7 +163,10 @@ export const getAcknowledgments = (metadata, dispatch) => {
if (metadata.description) {
return (
}>
-
+
);
}
diff --git a/src/components/info/info.js b/src/components/info/info.js
index 7734df881..43b3415ae 100644
--- a/src/components/info/info.js
+++ b/src/components/info/info.js
@@ -4,6 +4,7 @@ import { withTranslation } from 'react-i18next';
import Card from "../framework/card";
import { titleFont, headerFont, medGrey, darkGrey } from "../../globalStyles";
import Byline from "./byline";
+import Warning from "./warning";
import {datasetSummary} from "./datasetSummary";
import FiltersSummary from "./filtersSummary";
@@ -48,6 +49,10 @@ class Info extends React.Component {
+
{animating ? t("Animation in progress") + ". " : null}
{showExtended &&
diff --git a/src/components/info/warning.js b/src/components/info/warning.js
new file mode 100644
index 000000000..09a724f94
--- /dev/null
+++ b/src/components/info/warning.js
@@ -0,0 +1,67 @@
+import React, { Suspense, lazy } from "react";
+import { connect } from "react-redux";
+import styled from 'styled-components';
+import { FaExclamationTriangle } from "react-icons/fa";
+import { withTranslation } from 'react-i18next';
+
+const MarkdownDisplay = lazy(() => import("../markdownDisplay"));
+
+const WarningContainer = styled.div`
+ background-color: #FFF1D1;
+ display: flex;
+ align-items: stretch;
+`;
+
+const WarningIconContainer = styled.div`
+ background-color: #FFC641;
+ padding: 0 7px;
+ display: flex;
+ align-items: center;
+`;
+
+const WarningIcon = styled.div`
+ padding-top: 3px;
+ color: white;
+ font-size: 24px;
+`;
+
+const WarningText = styled.div`
+ padding: 0 7px;
+ font-size: 15px;
+`;
+
+/**
+ * React component for the warning of the current dataset.
+ */
+@connect((state) => {
+ return {
+ warning: state.metadata.warning
+ };
+})
+class Warning extends React.Component {
+ render() {
+ const { warning } = this.props;
+
+ if (warning === undefined) return null;
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+const WithTranslation = withTranslation()(Warning);
+export default WithTranslation;
diff --git a/src/components/markdownDisplay/index.js b/src/components/markdownDisplay/index.js
index 26b7a95ff..b243c0339 100644
--- a/src/components/markdownDisplay/index.js
+++ b/src/components/markdownDisplay/index.js
@@ -1,18 +1,31 @@
import React from "react";
import { parseMarkdown } from "../../util/parseMarkdown";
-export default function MarkdownDisplay({ mdstring, ...props }) {
- let cleanDescription;
+export default function MarkdownDisplay({ mdstring, placeholder, ...props }) {
try {
- cleanDescription = parseMarkdown(mdstring);
+ return (
+
+ );
} catch (error) {
- console.error(`Error parsing Markdown: ${error}`);
- cleanDescription = '
There was an error parsing the Markdown. See the JS console.
';
+ if (typeof mdstring === 'string') {
+ // This runs when there is a bug within parseMarkdown or the marked package.
+ console.error(`There was an error parsing the provided text as Markdown. Using the raw text as-is. Error: ${error}`);
+ return (
+
+
{mdstring}
+
Note: This message was meant to be rendered with formatting, however there was an error parsing the message as Markdown.
+
+ );
+ } else {
+ console.error(`There was an error parsing the provided text as Markdown or raw text. Error: ${error}`);
+ return (
+
+ );
+ }
}
- return (
-
- );
}
diff --git a/src/components/narrative/MainDisplayMarkdown.js b/src/components/narrative/MainDisplayMarkdown.js
index cc8870021..924b51b59 100644
--- a/src/components/narrative/MainDisplayMarkdown.js
+++ b/src/components/narrative/MainDisplayMarkdown.js
@@ -108,7 +108,10 @@ const MainDisplayMarkdown = ({ narrativeBlock, width, mobile }) => {
return (
-
+
);
diff --git a/src/util/parseMarkdown.js b/src/util/parseMarkdown.js
index 37f0821b6..131248e07 100644
--- a/src/util/parseMarkdown.js
+++ b/src/util/parseMarkdown.js
@@ -63,7 +63,7 @@ ALLOWED_ATTR.push("z", "zoomAndPan");
export const parseMarkdown = (mdString) => {
const sanitizer = dompurify.sanitize;
const sanitizerConfig = {ALLOWED_TAGS, ALLOWED_ATTR, KEEP_CONTENT: false, ALLOW_DATA_ATTR: false};
- const rawDescription = marked(mdString);
- const cleanDescription = sanitizer(rawDescription, sanitizerConfig);
- return cleanDescription;
+ const rawHtml = marked(mdString);
+ const html = sanitizer(rawHtml, sanitizerConfig);
+ return html;
};