Store scatterplot state in URL query

See added documentation for available queries

docs/advanced-functionality/view-settings.md

@@ -33,7 +33,7 @@ For instance, if you set `display_defaults.color_by` to `country`, but load the
 | `geo_resolution`    | Geographic resolution | "country" |
 | `distance_measure`  | Phylogeny x-axis measure     | "div" or "num_date" |
 | `map_triplicate`    | Should the map repeat, so that you can pan further in each direction? | Boolean |
-| `layout`            | Tree layout        | "rect", "radial", "clock" or "unrooted |
+| `layout`            | Tree layout        | "rect", "radial", "unrooted", "clock" or "scatter" |
 | `branch_label`      | Which set of branch labels are to be displayed | "aa", "lineage" |
 | `panels`            | List of panels which (if available) are to be displayed  | ["tree", "map"] |
 | `transmission_lines`| Should transmission lines (if available) be rendered on the map?  | Boolean |
@@ -58,6 +58,11 @@ All URL queries modify the view away from the default settings -- if you change
 | `r`        | Geographic resolution | `r=region` |
 | `m`        | Phylogeny x-axis measure | `m=div` |
 | `l`        | Phylogeny layout | `l=clock` |
+| `scatterX` | Scatterplot X variable | `scatterX=num_date` |
+| `scatterY` | Scatterplot Y variable | `scatterY=num_date` |
+| `branches` | Hide branches | `branches=hide` |
+| `regression` | Show/Hide regression line | `regression=hide`, `regression=show` |
+| `transmissions` | Hide transmission lines | `transmissions=hide`|
 | `lang`     | Language | `lang=ja` (Japanese) |
 | `dmin`     | Temporal range (minimum) | `dmin=2008-05-13` |
 | `dmax`     | Temporal range (maximum) | `dmax=2010-05-13` |

src/actions/recomputeReduxState.js

@@ -146,6 +146,12 @@ const modifyStateViaURLQuery = (state, query) => {
       state.showTransmissionLines = false;
     }
   }
+  /* parse queries which may modify scatterplot-like views. These will be validated before dispatch. */
+  if (query.branches==="hide") state.scatterVariables.showBranches = false;
+  if (query.regression==="show") state.scatterVariables.showRegression = true;
+  if (query.regression==="hide") state.scatterVariables.showRegression = false;
+  if (query.scatterX) state.scatterVariables.x = query.scatterX;
+  if (query.scatterY) state.scatterVariables.y = query.scatterY;
   return state;
 };
 
@@ -177,6 +183,7 @@ const restoreQueryableStateToDefaults = (state) => {
   state["panelLayout"] = calcBrowserDimensionsInitialState().width > twoColumnBreakpoint ? "grid" : "full";
   state.panelsToDisplay = state.panelsAvailable.slice();
   state.tipLabelKey = strainSymbol;
+  state.scatterVariables = {};
   // console.log("state now", state);
   return state;
 };
@@ -557,10 +564,25 @@ const checkAndCorrectErrorsInState = (state, metadata, query, tree, viewingNarra
   /* if we are starting in a scatterplot-like layout, we need to ensure we have `scatterVariables`
   If not, we deliberately don't instantiate them, so that they are instantiated when first
   triggering a scatterplot, thus defaulting to the colorby in use at that time */
-  // todo: these should be URL query & JSON definable (and stored as defaults)
+  // todo: these should be JSON definable (via display_defaults)
   if (state.layout==="scatter" || state.layout==="clock") {
-    state.scatterVariables = validateScatterVariables({}, metadata.colorings, state.distanceMeasure, state.colorBy, state.layout==="clock");
+    state.scatterVariables = validateScatterVariables(
+      state.scatterVariables, metadata.colorings, state.distanceMeasure, state.colorBy, state.layout==="clock"
+    );
+    if (query.scatterX && query.scatterX!==state.scatterVariables.x) delete query.scatterX;
+    if (query.scatterY && query.scatterY!==state.scatterVariables.y) delete query.scatterY;
+    if (state.layout==="clock") {
+      delete query.scatterX;
+      delete query.scatterY;
+    }
+  } else {
+    state.scatterVariables = {};
+    delete query.scatterX;
+    delete query.scatterY;
+    delete query.regression;
+    delete query.branches;
   }
+
   return state;
 };
 

src/middleware/changeURL.js

@@ -75,6 +75,13 @@ export const changeURLMiddleware = (store) => (next) => (action) => {
       break;
     }
     case types.CHANGE_LAYOUT: {
+      const sv = action.scatterVariables;
+      query.scatterX = action.layout==="scatter" && state.controls.distanceMeasure!==sv.x ? sv.x : undefined;
+      query.scatterY = action.layout==="scatter" && state.controls.colorBy!==sv.y ? sv.y : undefined;
+      query.branches = (action.layout==="scatter" || action.layout==="clock") && sv.showBranches===false ? "hide" : undefined;
+      query.regression = action.layout==="scatter" && sv.showRegression===true ? "show" :
+        action.layout==="clock" && sv.showRegression===false ? "hide" :
+          undefined;
       query.l = action.layout === state.controls.defaults.layout ? undefined : action.layout;
       if (!shouldDisplayTemporalConfidence(state.controls.temporalConfidence.exists, state.controls.distanceMeasure, query.l)) {
         query.ci = undefined;

src/reducers/controls.js

@@ -23,8 +23,7 @@ export const getDefaultControlsState = () => {
     filters: {},
     colorBy: defaultColorBy,
     selectedBranchLabel: "none",
-    showTransmissionLines: true,
-    scatterVariables: {x: undefined, y: undefined}
+    showTransmissionLines: true
   };
   // a default sidebarOpen status is only set via JSON, URL query
   // _or_ if certain URL keywords are triggered
@@ -50,6 +49,7 @@ export const getDefaultControlsState = () => {
     mutType: defaultMutType,
     temporalConfidence: { exists: false, display: false, on: false },
     layout: defaults.layout,
+    scatterVariables: {},
     distanceMeasure: defaults.distanceMeasure,
     dateMin,
     dateMinNumeric,