From d458182ec7c968fd00e8c78468b9b4f7a6aeecbe Mon Sep 17 00:00:00 2001
From: Victor Lin <13424970+victorlin@users.noreply.github.com>
Date: Wed, 8 Jan 2025 09:48:58 -0800
Subject: [PATCH 1/4] Add luxon dependency
To be used for date parsing and validation.
---
bundlesize.config.json | 2 +-
package-lock.json | 15 +++++++++++++++
package.json | 1 +
webpack.config.js | 1 +
4 files changed, 18 insertions(+), 1 deletion(-)
diff --git a/bundlesize.config.json b/bundlesize.config.json
index dae3c6ef9..b08cd0785 100644
--- a/bundlesize.config.json
+++ b/bundlesize.config.json
@@ -10,7 +10,7 @@
},
{
"path": "./dist/auspice.?(chunk.)core-vendors.bundle.*.js",
- "maxSize": "220 kB"
+ "maxSize": "240 kB"
},
{
"path": "./dist/auspice.?(chunk.)other-vendors.bundle.*.js",
diff --git a/package-lock.json b/package-lock.json
index f8923ef04..cd78a484b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -59,6 +59,7 @@
"linspace": "^1.0.0",
"lodash": "^4.17.21",
"lodash-webpack-plugin": "^0.11.6",
+ "luxon": "^3.5.0",
"marked": "^4.0.10",
"mousetrap": "^1.6.2",
"null-loader": "^4.0.0",
@@ -10013,6 +10014,15 @@
"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
"integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
},
+ "node_modules/luxon": {
+ "version": "3.5.0",
+ "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.5.0.tgz",
+ "integrity": "sha512-rh+Zjr6DNfUYR3bPwJEnuwDdqMbxZW7LOQfUN4B54+Cl+0o5zaU9RJ6bcidfDtC1cWCZXQ+nvX8bf6bAji37QQ==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=12"
+ }
+ },
"node_modules/make-dir": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@@ -20686,6 +20696,11 @@
}
}
},
+ "luxon": {
+ "version": "3.5.0",
+ "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.5.0.tgz",
+ "integrity": "sha512-rh+Zjr6DNfUYR3bPwJEnuwDdqMbxZW7LOQfUN4B54+Cl+0o5zaU9RJ6bcidfDtC1cWCZXQ+nvX8bf6bAji37QQ=="
+ },
"make-dir": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
diff --git a/package.json b/package.json
index fafc12d95..d8cc100d8 100644
--- a/package.json
+++ b/package.json
@@ -83,6 +83,7 @@
"linspace": "^1.0.0",
"lodash": "^4.17.21",
"lodash-webpack-plugin": "^0.11.6",
+ "luxon": "^3.5.0",
"marked": "^4.0.10",
"mousetrap": "^1.6.2",
"null-loader": "^4.0.0",
diff --git a/webpack.config.js b/webpack.config.js
index cf332a42d..e9020ee51 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -133,6 +133,7 @@ const generateConfig = ({extensionPath, devMode=false, customOutputPath, analyze
"style-loader",
"@hot-loader/react-dom",
"react(-(redux|select|helmet|i18next))?",
+ "luxon",
"leaflet",
"redux",
"leaflet(-gesture-handling)?",
From e5d810b0ef248bf6532fdf9c50be30236e92bf79 Mon Sep 17 00:00:00 2001
From: Victor Lin <13424970+victorlin@users.noreply.github.com>
Date: Wed, 8 Jan 2025 09:49:48 -0800
Subject: [PATCH 2/4] Hide "Data updated" for invalid dates
A bad value could show as an inaccuracy such as "Data updated today",
which shouldn't be allowed. I discovered this upon looking at the mers
example dataset provided by get-data.sh.
---
src/components/framework/fine-print.js | 3 ++-
src/components/info/byline.js | 3 ++-
2 files changed, 4 insertions(+), 2 deletions(-)
diff --git a/src/components/framework/fine-print.js b/src/components/framework/fine-print.js
index 368639946..4b613b39f 100644
--- a/src/components/framework/fine-print.js
+++ b/src/components/framework/fine-print.js
@@ -3,6 +3,7 @@ import { connect } from "react-redux";
import styled from 'styled-components';
import { withTranslation } from "react-i18next";
import { FaDownload, FaExternalLinkSquareAlt } from "react-icons/fa";
+import { DateTime } from "luxon";
import { dataFont, medGrey, materialButton } from "../../globalStyles";
import { SET_MODAL } from "../../actions/types";
import Flex from "./flex";
@@ -73,7 +74,7 @@ class FinePrint extends React.Component {
getUpdated() {
const { t } = this.props;
- if (this.props.metadata.updated) {
+ if (DateTime.fromISO(this.props.metadata.updated).isValid) {
return ({t("Data updated")} {this.props.metadata.updated});
}
return null;
diff --git a/src/components/info/byline.js b/src/components/info/byline.js
index 83f136611..0dc9d17a6 100644
--- a/src/components/info/byline.js
+++ b/src/components/info/byline.js
@@ -2,6 +2,7 @@ import React from "react";
import { connect } from "react-redux";
import { withTranslation } from 'react-i18next';
import styled from 'styled-components';
+import { DateTime } from "luxon";
import { headerFont } from "../../globalStyles";
/**
@@ -107,7 +108,7 @@ function renderMaintainers(t, metadata) {
* Renders a containing "Data updated X", where X derives from `metadata.updated`
*/
function renderDataUpdated(t, metadata) {
- if (metadata.updated) {
+ if (DateTime.fromISO(metadata.updated).isValid) {
return (
{`${t("Data updated")} ${metadata.updated}. `}
From a8c6e4cbdd9c8262c555fdbbb7ac285c2d4bfce2 Mon Sep 17 00:00:00 2001
From: Victor Lin <13424970+victorlin@users.noreply.github.com>
Date: Mon, 11 Dec 2023 16:40:19 -0800
Subject: [PATCH 3/4] Render "Data updated" as a relative date
To us humans, "Data updated 5 years ago" is more interpretable than
"Data updated 2020-01-01". Time flies!
---
src/components/info/byline.js | 16 +++++++++++-----
1 file changed, 11 insertions(+), 5 deletions(-)
diff --git a/src/components/info/byline.js b/src/components/info/byline.js
index 0dc9d17a6..e3d4e8e0d 100644
--- a/src/components/info/byline.js
+++ b/src/components/info/byline.js
@@ -12,7 +12,8 @@ import { headerFont } from "../../globalStyles";
*/
@connect((state) => {
return {
- metadata: state.metadata
+ metadata: state.metadata,
+ language: state.general.language
};
})
class Byline extends React.Component {
@@ -23,7 +24,7 @@ class Byline extends React.Component {
{renderAvatar(t, this.props.metadata)}
{renderBuildInfo(t, this.props.metadata)}
{renderMaintainers(t, this.props.metadata)}
- {renderDataUpdated(t, this.props.metadata)}
+ {renderDataUpdated(t, this.props.metadata, this.props.language)}
{renderDataProvenance(t, this.props.metadata)}
);
@@ -107,11 +108,16 @@ function renderMaintainers(t, metadata) {
* Returns a React component detailing the date the data was last updated.
* Renders a containing "Data updated X", where X derives from `metadata.updated`
*/
-function renderDataUpdated(t, metadata) {
- if (DateTime.fromISO(metadata.updated).isValid) {
+function renderDataUpdated(t, metadata, language) {
+ const date = DateTime.fromISO(metadata.updated);
+ if (date.isValid) {
+ // This is splitting translation on a English-based boundary, so it might
+ // not be proper grammar for all languages. Hopefully it still gets the
+ // point across.
+ const relativeDate = date > DateTime.now().minus({ weeks: 1 }) ? t("in the last week") : date.toRelativeCalendar({ locale: language });
return (
- {`${t("Data updated")} ${metadata.updated}. `}
+ {`${t("Data updated")} ${relativeDate} (${metadata.updated}). `}
);
}
From dff1f6ef8a91ed08c6202d6c2548f3a6d92faf5c Mon Sep 17 00:00:00 2001
From: Victor Lin <13424970+victorlin@users.noreply.github.com>
Date: Tue, 12 Dec 2023 11:44:25 -0800
Subject: [PATCH 4/4] Update changelog
---
CHANGELOG.md | 1 +
1 file changed, 1 insertion(+)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 20ce4a662..7d04608fe 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
# Changelog
* Bugfix: Clicking on the icons for FULL and GRID layout now changes the layout, just like clicking on the text ([#1911](https://github.com/nextstrain/auspice/issues/1911))
+* Added a relative date to the "Data updated" line under the dataset title ([#1731](https://github.com/nextstrain/auspice/pull/1731))
## version 2.61.2 - 2024/11/19