get up to date

CHANGELOG.md

@@ -2,6 +2,9 @@
 title: Changelog
 ---
 
+## version 2.15.0 - 2020/05/06
+
+
 ## version 2.14.0 - 2020/04/24
 
 

bundlesize.config.json

@@ -2,11 +2,11 @@
   "files": [
     {
       "path": "./dist/auspice.bundle.js",
-      "maxSize": "180 kB"
+      "maxSize": "200 kB"
     },
     {
       "path": "./dist/auspice.chunk.*.bundle.js",
-      "maxSize": "110 kB"
+      "maxSize": "120 kB"
     }
   ]
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "auspice",
-  "version": "2.14.0",
+  "version": "2.15.0",
   "description": "Web app for visualizing pathogen evolution",
   "author": "James Hadfield, Trevor Bedford and Richard Neher",
   "license": "AGPL-3.0-only",

src/components/controls/language.js

@@ -31,7 +31,8 @@ class Language extends React.Component {
       {value: "pt", label: "Português"},
       {value: "fr", label: "Français"},
       {value: "tr", label: "Türkçe"},
-      {value: "ja", label: "日本語"}
+      {value: "ja", label: "日本語"},
+      {value: "ar", label: "العربية"}
     ];
     return languages;
   }

src/components/framework/footer.js

@@ -1,7 +1,5 @@
 import React from "react";
 import { connect } from "react-redux";
-import marked from "marked";
-import dompurify from "dompurify";
 import styled from 'styled-components';
 import { withTranslation } from "react-i18next";
 import { FaDownload } from "react-icons/fa";
@@ -13,6 +11,7 @@ import { version } from "../../version";
 import { publications } from "../download/downloadModal";
 import { isValueValid } from "../../util/globals";
 import hardCodedFooters from "./footer-descriptions";
+import { parseMarkdown } from "../../util/parseMarkdown";
 
 const dot = (
   <span style={{marginLeft: 10, marginRight: 10}}>
@@ -138,36 +137,9 @@ export const getAcknowledgments = (metadata, dispatch) => {
    * Jover. December 2019.
   */
   if (metadata.description) {
-    dompurify.addHook("afterSanitizeAttributes", (node) => {
-      // Set external links to open in a new tab
-      if ('href' in node && location.hostname !== node.hostname) {
-        node.setAttribute('target', '_blank');
-        node.setAttribute('rel', 'noreferrer nofollow');
-      }
-      // Find nodes that contain images and add imageContainer class to update styling
-      const nodeContainsImg = ([...node.childNodes].filter((child) => child.localName === 'img')).length > 0;
-      if (nodeContainsImg) {
-        // For special case of image links, set imageContainer on outer parent
-        if (node.localName === 'a') {
-          node.parentNode.className += ' imageContainer';
-        } else {
-          node.className += ' imageContainer';
-        }
-      }
-    });
-
-    const sanitizer = dompurify.sanitize;
-    const sanitizerConfig = {
-      ALLOWED_TAGS: ['div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'em', 'strong', 'del', 'ol', 'ul', 'li', 'a', 'img', '#text', 'code', 'pre', 'hr'],
-      ALLOWED_ATTR: ['href', 'src', 'width', 'height', 'alt'],
-      KEEP_CONTENT: false,
-      ALLOW_DATA_ATTR: false
-    };
-
     let cleanDescription;
     try {
-      const rawDescription = marked(metadata.description);
-      cleanDescription = sanitizer(rawDescription, sanitizerConfig);
+      cleanDescription = parseMarkdown(metadata.description);
     } catch (error) {
       console.error(`Error parsing footer description: ${error}`);
       cleanDescription = '<p>There was an error parsing the footer description.</p>';

src/components/frequencies/functions.js

@@ -5,9 +5,12 @@ import { axisBottom, axisLeft } from "d3-axis";
 import { rgb } from "d3-color";
 import { area } from "d3-shape";
 import { format } from "d3-format";
+import _range from "lodash/range";
 import { dataFont } from "../../globalStyles";
 import { unassigned_label } from "../../util/processFrequencies";
 import { isColorByGenotype, decodeColorByGenotype } from "../../util/getGenotype";
+import { numericToCalendar } from "../../util/dateHelpers";
+import { createDisplayDate, calculateMajorGridSeperationForTime } from "../tree/phyloTree/grid";
 
 /* C O N S T A N T S */
 const opacity = 0.85;
@@ -52,11 +55,11 @@ const getOrderedCategories = (matrixCategories, colorScale) => {
   return orderedCategories;
 };
 
-export const calcXScale = (chartGeom, pivots, ticks) => {
+export const calcXScale = (chartGeom, pivots) => {
   const x = scaleLinear()
     .domain([pivots[0], pivots[pivots.length - 1]])
     .range([chartGeom.spaceLeft, chartGeom.width - chartGeom.spaceRight]);
-  return {x, numTicksX: ticks.length};
+  return {x};
 };
 
 export const calcYScale = (chartGeom, maxY) => {
@@ -80,13 +83,22 @@ const removeProjectionInfo = (svg) => {
 };
 
 export const drawXAxis = (svg, chartGeom, scales) => {
+  const domain = scales.x.domain(),
+    range = scales.x.range();
+  const {majorStep} = calculateMajorGridSeperationForTime(
+    domain[1] - domain[0],
+    range[1] - range[0]
+  );
+  const customDate = (date) => createDisplayDate(majorStep, date);
   removeXAxis(svg);
   svg.append("g")
     .attr("class", "x axis")
     .attr("transform", `translate(0,${chartGeom.height - chartGeom.spaceBottom})`)
     .style("font-family", dataFont)
     .style("font-size", "12px")
-    .call(axisBottom(scales.x).ticks(scales.numTicksX, ".1f"));
+    .call(axisBottom(scales.x)
+      .tickValues(_range(domain[0], domain[1], majorStep))
+      .tickFormat(customDate));
 };
 
 export const drawYAxis = (svg, chartGeom, scales) => {
@@ -296,7 +308,7 @@ export const drawStream = (
       .style("font-weight", 300)
       .html(
         `<p>${parseColorBy(colorBy, colorOptions)}: ${labels[i]}</p>
-        <p>${t("Time point")}: ${pivots[pivotIdx]}</p>
+        <p>${t("Time point")}: ${numericToCalendar(pivots[pivotIdx])}</p>
         <p>${frequencyText}: ${freqVal}</p>`
       );
   }

src/components/frequencies/index.js

@@ -12,7 +12,6 @@ import "../../css/entropy.css";
   return {
     data: state.frequencies.data,
     pivots: state.frequencies.pivots,
-    ticks: state.frequencies.ticks,
     matrix: state.frequencies.matrix,
     projection_pivot: state.frequencies.projection_pivot,
     version: state.frequencies.version,
@@ -36,7 +35,7 @@ class Frequencies extends React.Component {
     const data = processMatrix({...props});
     newState.maxY = data.maxY;
     newState.categories = data.categories;
-    const scalesX = calcXScale(chartGeom, props.pivots, props.ticks);
+    const scalesX = calcXScale(chartGeom, props.pivots);
     const scalesY = calcYScale(chartGeom, data.maxY);
     newState.scales = {...scalesX, ...scalesY};
     drawXAxis(newState.svg, chartGeom, scalesX);

src/components/narrative/MainDisplayMarkdown.js

@@ -1,10 +1,8 @@
 import React from "react";
 import { connect } from "react-redux";
-import marked from "marked";
 import styled from 'styled-components';
-import dompurify from "dompurify";
 import { dataFont } from "../../globalStyles";
-
+import { parseMarkdown } from "../../util/parseMarkdown";
 
 /**
  * The following code borrows heavily from the Footer
@@ -105,7 +103,7 @@ const Container = styled.div`
 `;
 
 const EXPERIMENTAL_MainDisplayMarkdown = ({narrativeBlock, width, mobile}) => {
-  const cleanHTML = mdToHtml(narrativeBlock.mainDisplayMarkdown);
+  const cleanHTML = parseMarkdown(narrativeBlock.mainDisplayMarkdown);
   return (
     <Container width={width} mobile={mobile}>
       <div
@@ -120,36 +118,3 @@ const EXPERIMENTAL_MainDisplayMarkdown = ({narrativeBlock, width, mobile}) => {
 export default connect((state) => ({
   narrativeBlock: state.narrative.blocks[state.narrative.blockIdx]
 }))(EXPERIMENTAL_MainDisplayMarkdown);
-
-function mdToHtml(md) {
-  /* this is copy & pasted from `../framework/footer.js` and should be abstracted
-  into a function */
-  dompurify.addHook("afterSanitizeAttributes", (node) => {
-    // Set external links to open in a new tab
-    if ('href' in node && location.hostname !== node.hostname) {
-      node.setAttribute('target', '_blank');
-      node.setAttribute('rel', 'noreferrer nofollow');
-    }
-    // Find nodes that contain images and add imageContainer class to update styling
-    const nodeContainsImg = ([...node.childNodes].filter((child) => child.localName === 'img')).length > 0;
-    if (nodeContainsImg) {
-      // For special case of image links, set imageContainer on outer parent
-      if (node.localName === 'a') {
-        node.parentNode.className += ' imageContainer';
-      } else {
-        node.className += ' imageContainer';
-      }
-    }
-  });
-
-  const sanitizer = dompurify.sanitize;
-  const sanitizerConfig = {
-    ALLOWED_TAGS: ['div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'em', 'strong', 'del', 'ol', 'ul', 'li', 'a', 'img', '#text', 'pre', 'hr', 'table', 'thead', 'tbody', 'th', 'tr', 'td'],
-    ALLOWED_ATTR: ['href', 'src', 'width', 'height', 'alt'],
-    KEEP_CONTENT: false,
-    ALLOW_DATA_ATTR: false
-  };
-  const rawDescription = marked(md);
-  const cleanDescription = sanitizer(rawDescription, sanitizerConfig);
-  return cleanDescription;
-}