[explode] don't allow tanglegrams

Tanglegrams would be useful for exploded trees but are added complexity for an already complex feature. For the time being, it's acceptable to force users to choose one or the other.

src/actions/loadData.js

@@ -10,6 +10,7 @@ import { parseMarkdownNarrativeFile } from "../util/parseNarrative";
 import { NoContentError } from "../util/exceptions";
 import { parseMarkdown } from "../util/parseMarkdown";
 import { updateColorByWithRootSequenceData } from "../actions/colors";
+import { explodeTree } from "./tree";
 
 export function getDatasetNamesFromUrl(url) {
   let secondTreeUrl;
@@ -41,6 +42,12 @@ export const loadSecondTree = (secondTreeUrl, firstTreeUrl) => async (dispatch,
   }
 
   const oldState = getState();
+
+  /* if the first tree is exploded, then reconstruct it before loading a second tree */
+  if (oldState.controls.explodeAttr) {
+    dispatch(explodeTree(undefined));
+  }
+
   const newState = createTreeTooState({treeTooJSON: secondJson.tree, oldState, originalTreeUrl: firstTreeUrl, secondTreeUrl: secondTreeUrl, dispatch});
   dispatch({type: types.TREE_TOO_DATA, ...newState});
 };

src/components/controls/choose-explode-attr.js

@@ -13,7 +13,8 @@ import { controlsWidth } from "../../util/globals";
  */
 @connect((state) => ({
   selected: state.controls.explodeAttr,
-  available: state.metadata.colorings
+  available: state.metadata.colorings,
+  showThisUI: !state.controls.showTreeToo
 }))
 class ChooseExplodeAttr extends React.Component {
   constructor(props) {
@@ -31,6 +32,7 @@ class ChooseExplodeAttr extends React.Component {
     return options;
   }
   render() {
+    if (!this.props.showThisUI) return null;
     const { t } = this.props;
     return (
       <div style={{paddingTop: 5}}>