Merge pull request #1209 from ivan-aksamentov/fix/unescaped-css-selec…

…tors

fix: ensure generated svg ids are escaped

package.json

@@ -60,6 +60,7 @@
     "core-js": "^3.6.5",
     "create-react-class": "^15.6.0",
     "css-loader": "^2.1.1",
+    "css.escape": "^1.5.1",
     "d3-array": "^1.2.0",
     "d3-axis": "^1.0.6",
     "d3-brush": "^1.0.4",

src/components/tree/phyloTree/helpers.js

@@ -5,8 +5,9 @@ import {getTraitFromNode, getDivFromNode} from "../../../util/treeMiscHelpers";
  * Note that this cannot have any "special" characters
  */
 export const getDomId = (type, strain) => {
-  const name = typeof strain === "string" ? strain.replace(/[/_.;,~|[\]-]/g, '') : strain;
-  return `${type}_${name}`;
+  // Replace non-alphanumeric characters with dashes (probably unnecessary)
+  const name = `${type}_${strain}`.replace(/(\W+)/g, '-');
+  return CSS.escape(name);
 };
 
 /**

src/index.js

@@ -4,6 +4,7 @@
 import "whatwg-fetch"; // eslint-disable-line
 import "core-js";
 import "regenerator-runtime";
+import "css.escape";
 /* L I B R A R I E S */
 import "react-hot-loader";
 import React from "react";