Merge pull request #823 from nextstrain/color-order

preserve color-by order for v2 JSONs
nextstrain · Nov 15, 2019 · 0bc5ed1 · 0bc5ed1
2 parents 0d08d63 + d691949
commit 0bc5ed1
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 42 deletions.
diff --git a/cli/server/convertJsonSchemas.js b/cli/server/convertJsonSchemas.js
@@ -101,6 +101,43 @@ const setColorings = (v2, meta) => {
     }
     v2.colorings.push(coloring);
   }
+
+
+  /* Auspice (until 2.0.3) changed the ordering of colors by sorting against a predefined list.
+  * The intention of v2 JSONs was that the order defined there was reflected in auspice.
+  * We still sort v1 JSONs to keep things unchanged
+  */
+  const colorByMenuPreferredOrdering = [
+    "clade_membership",
+    "cHI",
+    "cTiter",
+    "fitness",
+    "gt",
+    "ep",
+    "ne",
+    "rb",
+    "lbi",
+    "dfreq",
+    "division",
+    "country",
+    "region",
+    "date",
+    "glyc",
+    "age",
+    "age_score",
+    "gender",
+    "host",
+    "subtype"
+  ];
+  v2.colorings.sort((a, b) => {
+    const [ia, ib] = [colorByMenuPreferredOrdering.indexOf(a.key), colorByMenuPreferredOrdering.indexOf(b.key)];
+    if (ia === -1 || ib === -1) {
+      if (ia === -1) return 1;
+      else if (ib === -1) return -1;
+      return 0;
+    }
+    return ia > ib ? 1 : -1;
+  });
 };
 
 const setAuthorInfoOnTree = (v2, meta) => {

diff --git a/src/components/controls/color-by.js b/src/components/controls/color-by.js
@@ -4,7 +4,7 @@ import { connect } from "react-redux";
 import Select from "react-select";
 import { debounce } from "lodash";
 import { sidebarField } from "../../globalStyles";
-import { controlsWidth, colorByMenuPreferredOrdering, nucleotide_gene } from "../../util/globals";
+import { controlsWidth, nucleotide_gene } from "../../util/globals";
 import { changeColorBy } from "../../actions/colors";
 import { analyticsControlsEvent } from "../../util/googleAnalytics";
 import { isColorByGenotype, decodeColorByGenotype, encodeColorByGenotype, decodePositions } from "../../util/getGenotype";
@@ -175,26 +175,10 @@ class ColorBy extends React.Component {
     };
   }
 
-  getColorByOptions() {
-    return Object.keys(this.props.colorings).map((key) => {
-      return {
-        value: key,
-        label: this.props.colorings[key].title
-      };
-    }).sort((a, b) => {
-      const [ia, ib] = [colorByMenuPreferredOrdering.indexOf(a.value), colorByMenuPreferredOrdering.indexOf(b.value)];
-      if (ia === -1 || ib === -1) {
-        if (ia === -1) return 1;
-        else if (ib === -1) return -1;
-        return 0;
-      }
-      return ia > ib ? 1 : -1;
-    });
-  }
-
   render() {
     const styles = this.getStyles();
-    const colorOptions = this.getColorByOptions();
+    const colorOptions = Object.keys(this.props.colorings)
+      .map((key) => ({value: key, label: this.props.colorings[key].title}));
     return (
       <div style={styles.base}>
         <Select

diff --git a/src/util/globals.js b/src/util/globals.js
@@ -137,29 +137,6 @@ export const notificationDuration = 10000;
 /* server init stuff */
 export const charonAPIAddress = "/charon";
 
-export const colorByMenuPreferredOrdering = [
-  "clade_membership",
-  "cHI",
-  "cTiter",
-  "fitness",
-  "gt",
-  "ep",
-  "ne",
-  "rb",
-  "lbi",
-  "dfreq",
-  "division",
-  "country",
-  "region",
-  "date",
-  "glyc",
-  "age",
-  "age_score",
-  "gender",
-  "host",
-  "subtype"
-];
-
 export const months = {
   1: 'Jan',
   2: 'Feb',