Improvements to updated date

CHANGELOG.md

@@ -1,6 +1,7 @@
 # Changelog
 
 * Added a link to this changelog from the Auspice view. ([#1727](https://github.com/nextstrain/auspice/pull/1727))
+* Updated the "Data updated" date under the dataset title to be a relative date. ([#1731](https://github.com/nextstrain/auspice/pull/1731))
 
 ## version 2.51.0 - 2023/11/16
 

bundlesize.config.json

@@ -10,7 +10,7 @@
     },
     {
       "path": "./dist/auspice.?(chunk.)core-vendors.bundle.*.js",
-      "maxSize": "220 kB"
+      "maxSize": "250 kB"
     },
     {
       "path": "./dist/auspice.?(chunk.)other-vendors.bundle.*.js",

package.json

@@ -89,6 +89,7 @@
     "linspace": "^1.0.0",
     "lodash": "^4.17.21",
     "lodash-webpack-plugin": "^0.11.6",
+    "luxon": "^3.4.4",
     "marked": "^0.7.0",
     "mousetrap": "^1.6.2",
     "null-loader": "^4.0.0",

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 } from "react-icons/fa";
+import { DateTime } from "luxon";
 import { dataFont, medGrey, materialButton } from "../../globalStyles";
 import { TRIGGER_DOWNLOAD_MODAL } from "../../actions/types";
 import Flex from "./flex";
@@ -72,7 +73,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 (<span>{t("Data updated")} {this.props.metadata.updated}</span>);
     }
     return null;

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";
 
 /**
@@ -11,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 {
@@ -22,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)}
       </>
     );
@@ -106,11 +108,12 @@ function renderMaintainers(t, metadata) {
  * Returns a React component detailing the date the data was last updated.
  * Renders a <span> containing "Data updated X", where X derives from `metadata.updated`
  */
-function renderDataUpdated(t, metadata) {
-  if (metadata.updated) {
+function renderDataUpdated(t, metadata, language) {
+  const date = DateTime.fromISO(metadata.updated);
+  if (date.isValid) {
     return (
       <span>
-        {`${t("Data updated")} ${metadata.updated}. `}
+        {`${t("Data updated")} ${date.toRelativeCalendar({locale: language})}. `}
       </span>
     );
   }

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)?",