slac.jsx

var React = require("react"),
  createReactClass = require("create-react-class"),
  ReactDOM = require("react-dom"),
  _ = require("underscore"),
  d3_save_svg = require("d3-save-svg"),
  datamonkey = require("../datamonkey/datamonkey.js");

import { Tree } from "./components/tree.jsx";
import { Header } from "./components/header.jsx";
import {
  DatamonkeyTable,
  DatamonkeyPartitionTable,
  DatamonkeyModelTable,
  DatamonkeyTimersTable
} from "./components/tables.jsx";
import {
  DatamonkeyScatterplot,
  DatamonkeySeries
} from "./components/graphs.jsx";
import { ResultsPage } from "./components/results_page.jsx";
import PropTypes from "prop-types";
import { saveSvgAsPng } from "save-svg-as-png";
import Phylotree, { placenodes, phylotreev1 } from "react-phylotree";
import { SitePlotAxis, colors } from "alignment.js";
import CodonColumn from "./components/codon_column.jsx";

require("../datamonkey/helpers.js");

const DEFAULT_AMBIGUITY_HANDLING = "RESOLVED";

var SLACSites = createReactClass({
  propTypes: {
    headers: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)).isRequired,
    mle: PropTypes.object.isRequired,
    sample25: PropTypes.object,
    sampleMedian: PropTypes.object,
    sample975: PropTypes.object,
    initialAmbigHandling: PropTypes.string.isRequired,
    partitionSites: PropTypes.object.isRequired
  },

  getInitialState: function() {
    var canDoCI =
      this.props.sample25 && this.props.sampleMedian && this.props.sample975;

    return {
      ambigOptions: this.dm_AmbigOptions(this.props),
      ambigHandling: this.props.initialAmbigHandling,
      filters: new Object(null),
      showIntervals: false,
      showCellColoring: canDoCI,
      hasCI: canDoCI,
      filterField: ["Site", -1],
      filterOp: "AND",
      canAddFilter: false,
      lowerFilterBound: -Infinity,
      upperFilterBound: Infinity
    };
  },

  getDefaultProps: function() {
    return {
      sample25: null,
      sampleMedian: null,
      sample975: null,
      initialAmbigHandling: DEFAULT_AMBIGUITY_HANDLING
    };
  },

  componentWillReceiveProps: function(nextProps) {
    this.setState({
      ambigOptions: this.dm_AmbigOptions(nextProps),
      ambigHandling: nextProps.initialAmbigHandling
    });
  },

  dm_formatNumber: d3.format(".3r"),
  dm_formatNumberShort: d3.format(".2r"),
  dm_rangeColorizer: d3.scale
    .linear()
    .range([d3.rgb("blue"), d3.rgb("white"), d3.rgb("red")])
    .clamp(true)
    .domain([-1, 0, 1]),
  dm_rangeTextColorizer: d3.scale
    .linear()
    .range([d3.rgb("white"), d3.rgb("black"), d3.rgb("black")])
    .clamp(true)
    .domain([-1, -0.25, 1]),

  dm_log10times: _.before(10, function(v) {
    return 0;
  }),

  dm_formatInterval: function(values) {
    //this.dm_log10times (values);

    return (
      this.dm_formatNumber(values[0]) +
      " / " +
      this.dm_formatNumber(values[2]) +
      " [" +
      this.dm_formatNumber(values[1]) +
      " : " +
      this.dm_formatNumber(values[3]) +
      "]"
    );
  },

  dm_AmbigOptions: function(theseProps) {
    return _.keys(theseProps.mle[0]);
  },

  dm_setAmbigOption: function(value) {
    this.setState({
      ambigHandling: value
    });
  },

  dm_toggleIntervals: function(event) {
    this.setState({
      showIntervals: !this.state.showIntervals,
      showCellColoring: this.state.showIntervals
        ? this.state.showCellColoring
        : false
    });
  },

  dm_toggleCellColoring: function(event) {
    this.setState({
      showCellColoring: !this.state.showCellColoring
    });
  },

  dm_toggleVariableFilter: function(event) {
    var filterState = new Object(null);
    _.extend(filterState, this.state.filters);
    if (!("variable" in this.state.filters)) {
      filterState["variable"] = true;
    } else {
      delete filterState["variable"];
    }
    this.setState({ filters: filterState });
  },

  dm_makeFilterFunction: function() {
    var filterFunction = null;

    _.each(this.state.filters, function(value, key) {
      var composeFunction = null;

      switch (key) {
        case "variable": {
          if (filterFunction) {
            composeFunction = function(
              f,
              partitionIndex,
              index,
              site,
              siteData
            ) {
              return (
                f(partitionIndex, index, site, siteData) &&
                siteData[2] + siteData[3] > 0
              );
            };
          } else {
            filterFunction = function(partitionIndex, index, site, siteData) {
              return siteData[2] + siteData[3] > 0;
            };
          }
          break;
        }
        default: {
          if (_.isArray(value)) {
            var new_condition = null,
              filter_index = value[0][1];
            switch (filter_index) {
              case -2:
                new_condition = function(
                  partitionIndex,
                  index,
                  site,
                  siteData
                ) {
                  return (
                    partitionIndex >= value[1] && partitionIndex <= value[2]
                  );
                };
                break;
              case -1:
                new_condition = function(
                  partitionIndex,
                  index,
                  site,
                  siteData
                ) {
                  return site >= value[1] && site <= value[2];
                };
                break;
              default:
                new_condition = function(
                  partitionIndex,
                  index,
                  site,
                  siteData
                ) {
                  return (
                    siteData[filter_index] >= value[1] &&
                    siteData[filter_index] <= value[2]
                  );
                };
            }

            if (new_condition) {
              if (value[3] == "AND") {
                composeFunction = function(
                  f,
                  partitionIndex,
                  index,
                  site,
                  siteData
                ) {
                  return (
                    (!f || f(partitionIndex, index, site, siteData)) &&
                    new_condition(partitionIndex, index, site, siteData)
                  );
                };
              } else {
                if (filterFunction) {
                  composeFunction = function(
                    f,
                    partitionIndex,
                    index,
                    site,
                    siteData
                  ) {
                    return (
                      f(partitionIndex, index, site, siteData) ||
                      new_condition(partitionIndex, index, site, siteData)
                    );
                  };
                } else {
                  filterFunction = function(
                    partitionIndex,
                    index,
                    site,
                    siteData
                  ) {
                    return new_condition(partitionIndex, index, site, siteData);
                  };
                }
              }
            }
          }
        }
      }

      if (composeFunction) {
        filterFunction = _.wrap(filterFunction, composeFunction);
      }
    });

    return filterFunction;
  },

  dm_makeHeaderRow: function() {
    var headers = [
        { value: "Partition", sortable: true },
        { value: "Site", sortable: true }
      ],
      doCI = this.state.showIntervals,
      filterable = [
        ["Partition", -2],
        ["Site", -1]
      ];

    if (doCI) {
      var secondRow = ["", ""];

      _.each(this.props.headers, function(value, index) {
        headers.push({
          value: value[0],
          abbr: value[1],
          span: 4,
          style: { textAlign: "center" }
        });
        filterable.push([value[0], index]);
        _.each(["MLE", "Med", "2.5%", "97.5%"], function(v) {
          secondRow.push({ value: v, sortable: true });
        });
      });
      return { headers: [headers, secondRow], filterable: filterable };
    } else {
      _.each(this.props.headers, function(value, index) {
        headers.push({ value: value[0], abbr: value[1], sortable: true });
        filterable.push([value[0], index]);
      });
    }
    return { headers: headers, filterable: filterable };
  },

  dm_makeDataRows: function(filter) {
    var rows = [],
      partitionCount = datamonkey.helpers.countPartitionsJSON(
        this.props.partitionSites
      ),
      partitionIndex = 0,
      self = this,
      doCI = this.state.showIntervals,
      siteCount = 0;

    while (partitionIndex < partitionCount) {
      _.each(self.props.partitionSites[partitionIndex].coverage[0], function(
        site,
        index
      ) {
        var siteData =
          self.props.mle[partitionIndex][self.state.ambigHandling][index];
        if (
          !filter ||
          filter(partitionIndex + 1, index + 1, site + 1, siteData)
        ) {
          var thisRow = [partitionIndex + 1, site + 1];
          //secondRow = doCI ? ['',''] : null;
          siteCount++;

          _.each(siteData, function(estimate, colIndex) {
            var sampled_range = null,
              scaled_median_mle_dev = 0;

            if (self.state.hasCI) {
              sampled_range = [
                self.props.sampleMedian[partitionIndex][
                  self.state.ambigHandling
                ][index][colIndex],
                self.props.sample25[partitionIndex][self.state.ambigHandling][
                  index
                ][colIndex],
                self.props.sample975[partitionIndex][self.state.ambigHandling][
                  index
                ][colIndex]
              ];

              var range = sampled_range[2] - sampled_range[1];
              if (range > 0) {
                scaled_median_mle_dev = (estimate - sampled_range[0]) / range;
              }
            }

            if (doCI) {
              thisRow.push({ value: estimate, format: self.dm_formatNumber });
              thisRow.push({
                value: sampled_range[0],
                format: self.dm_formatNumberShort
              });
              thisRow.push({
                value: sampled_range[1],
                format: self.dm_formatNumberShort
              });
              thisRow.push({
                value: sampled_range[2],
                format: self.dm_formatNumberShort
              });
            } else {
              var this_cell = { value: estimate, format: self.dm_formatNumber };
              if (self.state.hasCI) {
                if (self.state.showCellColoring) {
                  this_cell.style = {
                    backgroundColor: self.dm_rangeColorizer(
                      scaled_median_mle_dev
                    ),
                    color: self.dm_rangeTextColorizer(scaled_median_mle_dev)
                  };
                }
                this_cell.tooltip =
                  self.dm_formatNumberShort(sampled_range[0]) +
                  " [" +
                  self.dm_formatNumberShort(sampled_range[1]) +
                  " - " +
                  self.dm_formatNumberShort(sampled_range[2]) +
                  "]";
              }
              thisRow.push(this_cell);
            }
          });
          rows.push(thisRow);
          //if (secondRow) {
          //    rows.push (secondRow);
          //}
        }
      });

      partitionIndex++;
    }

    return { rows: rows, count: siteCount };
  },

  dm_handleLB: function(e) {
    var new_value = parseFloat(e.target.value);
    this.setState({
      lowerFilterBound: _.isFinite(new_value) ? new_value : -Infinity
    });
  },

  dm_handleUB: function(e) {
    var new_value = parseFloat(e.target.value);
    this.setState({
      upperFilterBound: _.isFinite(new_value) ? new_value : Infinity
    });
  },

  dm_handleFilterField: function(value) {
    this.setState({ filterField: value });
  },

  dm_checkFilterValidity: function() {
    if (_.isFinite(this.state.lowerFilterBound)) {
      if (_.isFinite(this.state.upperFilterBound)) {
        return this.state.lowerFilterBound <= this.state.upperFilterBound;
      }
      return true;
    }
    return _.isFinite(this.state.upperFilterBound);
  },

  dm_unique_filter_ID: 0,

  dm_handleAddCondition: function(e) {
    e.preventDefault();
    var filterState = new Object(null);
    _.extend(filterState, this.state.filters);
    filterState[this.dm_unique_filter_ID++] = [
      this.state.filterField,
      this.state.lowerFilterBound,
      this.state.upperFilterBound,
      this.state.filterOp
    ];

    this.setState({ filters: filterState });
  },

  dm_handleRemoveCondition: function(key, e) {
    e.preventDefault();
    var filterState = new Object(null);
    _.extend(filterState, this.state.filters);
    delete filterState[key];

    this.setState({ filters: filterState });
  },

  render: function() {
    var self = this;
    var { rows } = this.dm_makeDataRows(this.dm_makeFilterFunction());
    var { headers, filterable } = this.dm_makeHeaderRow();

    var show_ci_menu = function() {
      if (self.state.hasCI) {
        var ci_menu = [<li key="ci_divider" className="divider" />];
        if (!self.state.showIntervals) {
          ci_menu.push(
            <li key="coloring">
              <a
                href="#"
                data-value="showIntervals"
                tabIndex="-1"
                onClick={self.dm_toggleCellColoring}
              >
                <input
                  type="checkbox"
                  checked={self.state.showCellColoring}
                  defaultChecked={self.state.showCellColoring}
                  onChange={self.dm_toggleCellColoring}
                />
                &nbsp;Color cells based on MLE-median
              </a>
            </li>
          );
        }
        return ci_menu;
      }
      return null;
    };

    var result = (
      <div className="table-responsive">
        <nav className="navbar">
          <form className="form-inline justify-content-between w-100">
            <div className="form-group">
              <div className="input-group">
                <ul className="dropdown-menu">
                  <li key="variable">
                    <a
                      href="#"
                      data-value="variable"
                      tabIndex="-1"
                      onClick={self.dm_toggleVariableFilter}
                    >
                      <input
                        type="checkbox"
                        checked={"variable" in self.state.filters}
                        defaultChecked={"variable" in self.state.filters}
                        onChange={self.dm_toggleVariableFilter}
                      />
                      &nbsp;Variable sites only
                    </a>
                  </li>
                  {show_ci_menu()}
                </ul>
                <button
                  className="btn.btn-secondary btn-sm dropdown-toggle form-control"
                  type="button"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                >
                  Display
                  <span className="caret" />
                </button>
              </div>

              <div className="input-group">
                <ul className="dropdown-menu">
                  {_.map(this.state.ambigOptions, function(value, index) {
                    return (
                      <li key={index}>
                        <a
                          href="javascript:void(0);"
                          tabIndex="-1"
                          onClick={_.partial(self.dm_setAmbigOption, value)}
                        >
                          {value}
                        </a>
                      </li>
                    );
                  })}
                </ul>
                <button
                  className="btn.btn-secondary btn-sm dropdown-toggle form-control"
                  type="button"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                >
                  Ambiguities <span className="caret" />
                </button>
              </div>
            </div>
            <div className="form-group">
              <div className="input-group">
                <ul className="dropdown-menu">
                  {_.map(filterable, function(d, index) {
                    return (
                      <li key={index}>
                        <a
                          href="javascript:void(0);"
                          tabIndex="-1"
                          onClick={_.partial(self.dm_handleFilterField, d)}
                        >
                          {d[0]}
                        </a>
                      </li>
                    );
                  })}
                </ul>
                <button
                  className="btn.btn-secondary btn-sm dropdown-toggle form-control"
                  type="button"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                >
                  {self.state.filterField[0]} <span className="caret" />
                </button>
              </div>
              <div className="input-group">
                <span className="input-group-addon"> {"is in ["} </span>
                <input
                  type="text"
                  className="form-control"
                  style={{ width: "75px" }}
                  placeholder="-∞"
                  defaultValue={"-" + String.fromCharCode(8734)}
                  onChange={self.dm_handleLB}
                />
              </div>
              <div className="input-group">
                <span className="input-group-addon">,</span>
                <input
                  type="text"
                  className="form-control"
                  style={{ width: "75px" }}
                  placeholder="∞"
                  defaultValue={String.fromCharCode(8734)}
                  onChange={self.dm_handleUB}
                />
                <span className="input-group-addon">]</span>
              </div>

              <div className="input-group">
                <ul className="dropdown-menu">
                  {_.map(["AND", "OR"], function(d, index) {
                    return (
                      <li key={index}>
                        <a
                          href="#"
                          tabIndex="-1"
                          onClick={function() {
                            self.setState({ filterOp: d });
                          }}
                        >
                          {d}
                        </a>
                      </li>
                    );
                  })}
                </ul>
                <button
                  className="btn.btn-secondary btn-sm dropdown-toggle form-control"
                  type="button"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                >
                  {self.state.filterOp} <span className="caret" />
                </button>
              </div>

              <div className="input-group">
                <button
                  className={
                    "btn.btn-secondary " +
                    (self.dm_checkFilterValidity() ? "" : "disabled")
                  }
                  onClick={self.dm_handleAddCondition}
                >
                  {" "}
                  Add filter{" "}
                </button>
              </div>
            </div>
          </form>
        </nav>

        {self.state.hasCI ? (
          <div className="alert alert-info alert-dismissable">
            <button
              type="button"
              className="close float-right"
              data-dismiss="alert"
              aria-hidden="true"
            >
              {" "}
              &times;{" "}
            </button>
            <p>
              <strong>Color legend:</strong> MLE is &nbsp;
              <span className="blue-badge">is much less</span>
              &nbsp;
              <span className="white-badge">is the same as</span>
              &nbsp;
              <span className="red-badge">is much greater</span>
              &nbsp; than the sampled median.
            </p>
            <p>
              Default table shading is used to indicate the magnitude of
              difference between the estimate of a specific quantity using the
              MLE ancestral state reconstruction, and the median of the estimate
              using a sample from the distribution of ancestral state
              reconstructions.
            </p>
            <small>
              You can mouse over the cells to see individual sampling intervals.
            </small>
          </div>
        ) : null}

        {_.keys(self.state.filters).length > 0 ? (
          <div className="well well-sm">
            {_.map(self.state.filters, function(value, key) {
              if (key == "variable") {
                return (
                  <div
                    className="input-group"
                    style={{ display: "inline" }}
                    key={key}
                  >
                    <span className="badge badge-info">
                      (AND) variable sites
                      <i
                        className="fa fa-times-circle"
                        style={{ marginLeft: "0.25em" }}
                        onClick={self.dm_toggleVariableFilter}
                      />
                    </span>
                  </div>
                );
              } else {
                var label =
                  (value[3] == "AND" ? " (AND) " : " (OR) ") + value[0][0];

                if (_.isFinite(value[1])) {
                  if (_.isFinite(value[2])) {
                    label +=
                      String.fromCharCode(8712) +
                      "[" +
                      value[1] +
                      "," +
                      value[2] +
                      "]";
                  } else {
                    label += String.fromCharCode(8805) + value[1];
                  }
                } else {
                  label += String.fromCharCode(8804) + value[2];
                }

                return (
                  <div
                    className="input-group"
                    style={{ display: "inline" }}
                    key={key}
                  >
                    <span className="badge badge-info">
                      {label}
                      <i
                        className="fa fa-times-circle"
                        style={{ marginLeft: "0.25em" }}
                        onClick={_.bind(
                          _.partial(self.dm_handleRemoveCondition, key),
                          self
                        )}
                      />
                    </span>
                  </div>
                );
              }
            })}
          </div>
        ) : null}

        <DatamonkeyTable
          headerData={headers}
          bodyData={rows}
          initialSort={1}
          paginate={20}
          export_csv
        />
      </div>
    );

    return result;
  }
});

var SLACBanner = createReactClass({
  dm_countSites: function(json, cutoff) {
    var result = {
      all: 0,
      positive: 0,
      negative: 0
    };

    result.all = datamonkey.helpers.countSitesFromPartitionsJSON(json);

    result.positive = datamonkey.helpers.sum(json["MLE"]["content"], function(
      partition
    ) {
      return _.reduce(
        partition["by-site"][DEFAULT_AMBIGUITY_HANDLING],
        function(sum, row) {
          return sum + (row[8] <= cutoff ? 1 : 0);
        },
        0
      );
    });

    result.negative = datamonkey.helpers.sum(json["MLE"]["content"], function(
      partition
    ) {
      return _.reduce(
        partition["by-site"][DEFAULT_AMBIGUITY_HANDLING],
        function(sum, row) {
          return sum + (row[9] <= cutoff ? 1 : 0);
        },
        0
      );
    });

    return result;
  },

  dm_computeState: function(state, pvalue) {
    return {
      sites: this.dm_countSites(state, pvalue)
    };
  },

  dm_formatP: d3.format(".3f"),

  getInitialState: function() {
    return this.dm_computeState(this.props.analysis_results, this.props.pValue);
  },

  componentWillReceiveProps: function(nextProps) {
    this.setState(
      this.dm_computeState(nextProps.analysis_results, nextProps.pValue)
    );
  },

  componentDidMount() {
    $('[data-toggle="popover"]').popover();
  },

  render: function() {
    return (
      <div className="row">
        <div className="col-md-12">
          <div className="main-result border border-primary border-left-0 border-right-0 mt-3">
            <p>
              SLAC <strong className="hyphy-highlight">found evidence</strong>{" "}
              of pervasive
            </p>
            <p>
              <i className="fa fa-plus-circle" aria-hidden="true">
                {" "}
              </i>{" "}
              positive/diversifying selection at
              <span className="hyphy-highlight">
                {" "}
                {this.state.sites.positive}{" "}
              </span>
              sites
            </p>
            <p>
              <i className="fa fa-minus-circle" aria-hidden="true">
                {" "}
              </i>{" "}
              negative/purifying selection at
              <span className="hyphy-highlight">
                {" "}
                {this.state.sites.negative}{" "}
              </span>
              sites
            </p>
            <p>
              with p-value threshold of
              <input
                style={{
                  display: "inline-block",
                  marginLeft: "5px",
                  width: "100px"
                }}
                className="form-control"
                type="number"
                defaultValue="0.1"
                step="0.01"
                min="0"
                max="1"
                onChange={this.props.pAdjuster}
              />
              .
            </p>
            <hr />
            <p>
              <small>
                See{" "}
                <a href="http://hyphy.org/methods/selection-methods/#slac">
                  here
                </a>{" "}
                for more information about the SLAC method.
                <br />
                Please cite{" "}
                <a
                  href="http://www.ncbi.nlm.nih.gov/pubmed/15703242"
                  target="_blank"
                >
                  PMID 15703242
                </a>{" "}
                if you use this result in a publication, presentation, or other
                scientific work.
              </small>
            </p>
          </div>
        </div>
      </div>
    );
  }
});

var SLACGraphs = createReactClass({
  getInitialState: function() {
    return {
      ambigHandling: this.props.initialAmbigHandling,
      ambigOptions: this.dm_AmbigOptions(this.props),
      xLabel: "Site",
      yLabel: "dN-dS"
    };
  },

  getDefaultProps: function() {
    return {
      mle: null,
      partitionSites: null,
      initialAmbigHandling: DEFAULT_AMBIGUITY_HANDLING
    };
  },

  dm_AmbigOptions: function(theseProps) {
    return _.keys(theseProps.mle[0]);
  },

  componentWillReceiveProps: function(nextProps) {
    this.setState({
      ambigOptions: this.dm_AmbigOptions(nextProps),
      ambigHandling: nextProps.initialAmbigHandling
    });
  },

  dm_makePlotData: function(xlabel, ylabels) {
    var self = this;

    var x = [];
    var y = [[]];

    var partitionCount = datamonkey.helpers.countPartitionsJSON(
        this.props.partitionSites
      ),
      partitionIndex = 0,
      siteCount = 0,
      col_index = [],
      x_index = -1;

    _.each(self.props.headers, function(d, i) {
      if (
        _.find(ylabels, function(l) {
          return l == d[0];
        })
      ) {
        col_index.push(i);
      }
    });

    x_index = _.pluck(self.props.headers, 0).indexOf(xlabel);

    y = _.map(col_index, function() {
      return [];
    });

    while (partitionIndex < partitionCount) {
      _.each(self.props.partitionSites[partitionIndex].coverage[0], function(
        site,
        index
      ) {
        var siteData =
          self.props.mle[partitionIndex][self.state.ambigHandling][index];
        siteCount++;
        if (x_index < 0) {
          x.push(siteCount);
        } else {
          x.push(siteData[x_index]);
        }
        _.each(col_index, function(ci, i) {
          y[i].push(siteData[ci]);
        });
      });

      partitionIndex++;
    }

    return { x: x, y: y };
  },

  dm_xAxis: function(column) {
    this.setState({ xLabel: column });
  },

  dm_yAxis: function(column) {
    this.setState({ yLabel: column });
  },

  dm_setAmbigOption: function(value) {
    this.setState({
      ambigHandling: value
    });
  },

  dm_doScatter: function() {
    return this.state.xLabel != "Site";
  },

  savePNG() {
    saveSvgAsPng(document.getElementById("dm-chart"), "datamonkey-chart.png");
  },

  saveSVG() {
    d3_save_svg.save(d3.select("#dm-chart").node(), {
      filename: "datamonkey-chart"
    });
  },

  render: function() {
    var self = this;
    var { x: x, y: y } = this.dm_makePlotData(this.state.xLabel, [
      this.state.yLabel
    ]);

    return (
      <div className="table-responsive">
        <nav className="navbar" style={{ borderBottom: "none" }}>
          <form className="form-inline justify-content-between w-100">
            <div className="form-group">
              <div className="input-group">
                <span className="input-group-addon">X-axis:</span>

                <ul className="dropdown-menu">
                  {_.map(
                    ["Site"].concat(_.pluck(self.props.headers, 0)),
                    function(value) {
                      return (
                        <li key={value}>
                          <a
                            href="javascript:void(0);"
                            tabIndex="-1"
                            onClick={_.partial(self.dm_xAxis, value)}
                          >
                            {value}
                          </a>
                        </li>
                      );
                    }
                  )}
                </ul>
                <button
                  className="btn.btn-secondary btn-sm dropdown-toggle form-control"
                  type="button"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                >
                  {self.state.xLabel}
                  <span className="caret" />
                </button>
              </div>
              <div className="input-group">
                <span className="input-group-addon">Y-axis:</span>

                <ul className="dropdown-menu">
                  {_.map(_.pluck(self.props.headers, 0), function(value) {
                    return (
                      <li key={value}>
                        <a
                          href="javascript:void(0);"
                          tabIndex="-1"
                          onClick={_.partial(self.dm_yAxis, value)}
                        >
                          {value}
                        </a>
                      </li>
                    );
                  })}
                </ul>
                <button
                  className="btn.btn-secondary btn-sm dropdown-toggle form-control"
                  type="button"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                >
                  {self.state.yLabel}
                  <span className="caret" />
                </button>
              </div>
              <div className="input-group">
                <span className="input-group-addon">Ambiguities </span>
                <ul className="dropdown-menu">
                  {_.map(this.state.ambigOptions, function(value, index) {
                    return (
                      <li key={index}>
                        <a
                          href="javascript:void(0);"
                          tabIndex="-1"
                          onClick={_.partial(self.dm_setAmbigOption, value)}
                        >
                          {value}
                        </a>
                      </li>
                    );
                  })}
                </ul>
                <button
                  className="btn.btn-secondary btn-sm dropdown-toggle form-control"
                  type="button"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                >
                  {self.state.ambigHandling} <span className="caret" />
                </button>
              </div>
            </div>
            <div className="form-group">
              <div className="input-group">
                <button
                  id="export-chart-png"
                  type="button"
                  className="btn.btn-secondary btn-sm float-right btn-export btn-export-chart-png"
                  onClick={self.savePNG}
                >
                  <span className="far fa-save" /> Export to PNG
                </button>
                <button
                  id="export-chart-png"
                  type="button"
                  className="btn.btn-secondary btn-sm float-right btn-export btn-export-chart-svg"
                  onClick={self.saveSVG}
                >
                  <span className="far fa-save" /> Export to SVG
                </button>
              </div>
            </div>
            {/*<div className="form-group navbar-right">
                                <span className="badge" style={{marginLeft : "0.5em"}}>X: {self.state.currentX}</span>
                                <span className="badge" style={{marginLeft : "0.5em"}}>Y: {self.state.currentY}</span>
                          </div>*/}
          </form>
        </nav>
        <center>
          {self.dm_doScatter() ? (
            <DatamonkeyScatterplot
              x={x}
              y={y}
              x_label={self.state.xLabel}
              y_label={self.state.yLabel}
              marginLeft={50}
              transitions={true}
            />
          ) : (
            <DatamonkeySeries
              x={x}
              y={y}
              x_label={self.state.xLabel}
              y_label={self.state.yLabel}
              marginLeft={50}
              transitions={true}
              doDots={true}
            />
          )}
        </center>
      </div>
    );
  }
});


function SLACAlignmentTreeCountWrapper(props) {
  if (!props.json) return null;
  const { trees } = props.json,
    branchAttributes = props.json['branch attributes'],
    partitions = props.json['data partitions'],
    number_of_partitions = _.keys(partitions).length,
    all_partition_data = [],
    partition_map = [];
  for(let partition=0; partition < number_of_partitions; partition++) {
    let partition_data = {},
      sites_in_partition = partitions[partition].coverage[0].length,
      zeros = Array(sites_in_partition).fill(0),
      fasta = _.keys(branchAttributes[partition]).map(key => {
        return {
          header: key,
          seq: branchAttributes[partition][key].codon[0].join("")
        };
      });
    if(partition == 0) {
      partition_data.offset = 0;
    } else {
      let previous_data = all_partition_data[partition-1];
      partition_data.offset = previous_data.sites + previous_data.offset;
    }
    partition_data.sites = sites_in_partition;
    partition_data.syn_substitutions = _.values(branchAttributes[partition])
      .map(ba => ba["synonymous substitution count"][0])
      .reduce((a, b) => a.map((d, i) => d + b[i]), zeros),
    partition_data.nonsyn_substitutions = _.values(branchAttributes[partition])
      .map(ba => ba["nonsynonymous substitution count"][0])
      .reduce((a, b) => a.map((d, i) => d + b[i]), zeros);
    const newick = trees[partition].newickString,
      tree = new phylotreev1(newick);
    placenodes(tree, true);
    const number_of_links = tree.links.length,
      tree_hash = _.object(
        tree.links.map(l => l.target.data.name),
        Array(number_of_links).fill(true)
      );
    tree_hash.root = false;
    const node_to_ordered_index = _.object(
      tree.node_order,
      _.range(tree.node_order.length)
    );
    partition_data.tree = tree;
    partition_data.sequence_data = fasta
      .filter(record => tree_hash[record.header])
      .sort((a, b) => {
        const a_index = node_to_ordered_index[a.header],
          b_index = node_to_ordered_index[b.header];
        return a_index - b_index;
      });
    if (number_of_links != partition_data.sequence_data.length) {
      throw "Mismatch in FASTA/tree... refusing to proceed!";
    }
    all_partition_data.push(partition_data);
    partition_map.push(...Array(sites_in_partition).fill(partition));
  }
  return (<SLACAlignmentTreeCountWidget
    partitionData={all_partition_data}
    partitionMap={partition_map}
    branchAttributes={branchAttributes}
  />)
}

class SLACAlignmentTreeCountWidget extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      current_site: 1,
      current_site_index: 0,
      select_value: "amino-acid"
    };
  }
  savePNG() {
    saveSvgAsPng(
      document.getElementById("slac-widget"),
      "slac-ancestral-phylo.png"
    );
  }
  handleInputChange(e) {
    const new_current_site = e.target.value ? +e.target.value : "",
      max_sites = this.props.partitionMap.length;
    if (new_current_site == "") {
      this.setState({
        current_site: "",
        current_site_index: 0
      });
    } else if (new_current_site > 0 && new_current_site <= max_sites) {
      this.setState({
        current_site: new_current_site,
        current_site_index: new_current_site - 1
      });
    }
  }
  render() {
    const { site_size, branchAttributes } = this.props,
      { current_site, current_site_index } = this.state,
      partition = this.props.partitionMap[current_site_index],
      horizontal_pad = 10,
      vertical_pad = site_size / 2,
      {
        sequence_data, tree, syn_substitutions, nonsyn_substitutions, offset
      } = this.props.partitionData[partition],
      offset_site_index = current_site_index - offset,
      phylotree_props = {
        width: 700 - 2 * horizontal_pad,
        height: site_size * sequence_data.length - 2 * vertical_pad,
        tree: tree,
        transform: `translate(2, ${vertical_pad})`
      },
      site_padding = 5,
      codon_label_height = 30,
      syn_count = syn_substitutions[offset_site_index],
      nonsyn_count = nonsyn_substitutions[offset_site_index],
      total_count = syn_count + nonsyn_count,
      column_padding = 40,
      codon_column_width = 4 * site_size + site_padding + column_padding,
      ccw_nopad = 4 * site_size + site_padding,
      bar_height = 200,
      svg_props = {
        width: phylotree_props.width + codon_column_width + 2 * horizontal_pad,
        height:
          phylotree_props.height +
          codon_label_height +
          bar_height +
          2 * vertical_pad
      },
      legend_colors = {
        total: "black",
        nonsyn: "#00a99d",
        syn: "grey"
      };
    const bar_scale = d3.scale
        .linear()
        .domain([0, total_count])
        .range([0, bar_height]),
      bar_padding = 5,
      bar_width = (ccw_nopad - 4 * bar_padding) / 3;

    const { select_value } = this.state;
    const codons = {},
      codon_colors = d3.scale.category10().range();
    var codon_color_index = 0;
    tree.traverse_and_compute(node => {
      if (node.data.name != "root") {
        if (select_value != "none") {
          const character =
            branchAttributes[partition][node.data.name][select_value][0][
              offset_site_index
            ];
          node.data.annotation = character;
          if (select_value == "codon") {
            if (!codons[character]) {
              codons[character] = codon_colors[codon_color_index++];
            }
          }
        } else {
          node.data.annotation = null;
        }
      }
    });

    const color_scale =
      select_value != "codon" ? colors.amino_acid_colors : codons;
    return (
      <div>
        <div
          style={{
            display: "flex",
            justifyContent: "space-around",
            alignItems: "center",
            paddingBottom: 20
          }}
        >
          <span>
            Current site:
            <input
              type="number"
              value={current_site}
              onChange={e => this.handleInputChange(e)}
              ref={input => {
                this.numberInput = input;
              }}
              style={{ width: 50 }}
            />
          </span>

          <span>
            Show{" "}
            <select
              value={this.state.select_value}
              onChange={e => this.setState({ select_value: e.target.value })}
            >
              <option value="amino-acid">amino acid</option>
              <option value="codon">codon</option>
              <option value="none">none</option>
            </select>{" "}
            on tree
          </span>

          <button
            onClick={() => this.savePNG()}
            type="button"
            className="btn btn-secondary"
            data-dismiss="modal"
          >
            <span className="far fa-save" />
            PNG
          </button>
        </div>

        <div style={{ textAlign: "center" }}>
          <svg
            {...svg_props}
            id="slac-widget"
            style={{ fontFamily: "sans-serif" }}
          >
            <g transform="translate(0, 5)">
              <rect
                x={0}
                y={0}
                width={svg_props.width}
                height={svg_props.height}
                fill="white"
              />
              <g transform={`translate(${phylotree_props.width - 100}, 50)`}>
                <rect
                  x={5}
                  y={10}
                  width={20}
                  height={20}
                  fill={legend_colors.total}
                />
                <text x={0} y={20} textAnchor="end" alignmentBaseline="middle">
                  Total
                </text>
                <rect
                  x={5}
                  y={40}
                  width={20}
                  height={20}
                  fill={legend_colors.nonsyn}
                />
                <text x={0} y={50} textAnchor="end" alignmentBaseline="middle">
                  Nonsynonymous
                </text>
                <rect
                  x={5}
                  y={70}
                  width={20}
                  height={20}
                  fill={legend_colors.syn}
                />
                <text x={0} y={80} textAnchor="end" alignmentBaseline="middle">
                  Synonymous
                </text>
              </g>
              <SitePlotAxis
                data={[syn_count, nonsyn_count, total_count]}
                axis_label="Substitution counts"
                height={bar_height}
                label_width={75}
                translateX={phylotree_props.width - 75}
                padding={{ top: 0, right: 0, bottom: 0, left: 0 }}
              />
              <rect
                x={phylotree_props.width + bar_padding}
                y={bar_height - bar_scale(total_count)}
                width={bar_width}
                height={bar_scale(total_count)}
                fill={legend_colors.total}
              />
              <rect
                x={phylotree_props.width + 2 * bar_padding + bar_width}
                y={bar_height - bar_scale(nonsyn_count)}
                width={bar_width}
                height={bar_scale(nonsyn_count)}
                fill={legend_colors.nonsyn}
              />
              <rect
                x={phylotree_props.width + 3 * bar_padding + 2 * bar_width}
                y={bar_height - bar_scale(syn_count)}
                width={bar_width}
                height={bar_scale(syn_count)}
                fill={legend_colors.syn}
              />
              <g transform={`translate(0, ${bar_height + 5})`}>
                <Phylotree
                  {...phylotree_props}
                  internalNodeLabels
                  skipPlacement
                  highlightBranches={color_scale}
                />
                <CodonColumn
                  site={offset_site_index}
                  translateX={phylotree_props.width + horizontal_pad}
                  site_size={site_size}
                  site_padding={site_padding}
                  codon_label_height={codon_label_height}
                  height={phylotree_props.height}
                  sequence_data={sequence_data}
                  tree={tree}
                  {...this.state}
                />
              </g>
            </g>
          </svg>
        </div>
      </div>
    );
  }
}

SLACAlignmentTreeCountWidget.defaultProps = {
  site_size: 20
};

class SLACContents extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      analysis_results: null,
      error_message: null,
      pValue: 0.1,
      input_data: null
    };
  }

  componentDidMount = () => {
    this.dm_initializeFromJSON(this.props.json);
  };

  componentWillReceiveProps(nextProps) {
    this.dm_initializeFromJSON(nextProps.json);
  }

  dm_initializeFromJSON = data => {
    if (data["fits"]["Nucleotide GTR"]) {
      data["fits"]["Nucleotide GTR"]["Rate Distributions"] = {};
    }

    data["trees"] = _.map(data["input"]["trees"], (val, key) => {
      var branchLengths = {
        "Global MG94xREV": _.mapObject(
          data["branch attributes"][key],
          val1 => val1["Global MG94xREV"]
        ),
        "Nucleotide GTR": _.mapObject(
          data["branch attributes"][key],
          val1 => val1["Nucleotide GTR"]
        )
      };

      return { newickString: val, branchLengths: branchLengths };
    });

    data["fits"]["Global MG94xREV"][
      "branch-annotations"
    ] = this.formatBranchAnnotations(data);
    if (data["fits"]["Nucleotide GTR"]) {
      data["fits"]["Nucleotide GTR"][
        "branch-annotations"
      ] = this.formatBranchAnnotations(data);
    }

    this.setState({
      analysis_results: data,
      input_data: data.input
    });
  };

  formatBranchAnnotations = json => {
    // attach is_foreground to branch annotations
    var branch_annotations = d3.range(json.trees.length).map(i => {
      return _.mapObject(json["tested"][i], (val, key) => {
        return { is_foreground: val == "test" };
      });
    });
    return branch_annotations;
  };

  dm_adjustPvalue = event => {
    this.setState({ pValue: parseFloat(event.target.value) });
  };

  render() {
    const self = this;

    if (self.state.error_message) {
      return (
        <div
          id="datamonkey-error"
          className="alert alert-danger alert-dismissible"
          role="alert"
        >
          <button
            type="button"
            className="close"
            data-dismiss="alert"
            aria-label="Close"
          >
            <span aria-hidden="true">&times;</span>
          </button>
          <strong>{self.state.error_message}</strong>{" "}
          <span id="datamonkey-error-text" />
        </div>
      );
    }

    const { analysis_results, tree } = self.state;

    if(!tree) {
    }

    if (analysis_results) {
      var trees = analysis_results
        ? {
            newick: analysis_results.input.trees,
            tested: analysis_results.tested
          }
        : null;

      var edgeColorizer = function(element, data, foreground_color) {
        var is_foreground = data.target.annotations.is_foreground,
          color_fill = foreground_color(0);

        element
          .style("stroke", is_foreground ? color_fill : "black")
          .style("stroke-linejoin", "round")
          .style("stroke-linejoin", "round")
          .style("stroke-linecap", "round");
      };

      var tree_settings = {
        omegaPlot: {},
        "tree-options": {
          /* value arrays have the following meaning
                  [0] - the value of the attribute
                  [1] - does the change in attribute value trigger tree re-layout?
              */
          "hyphy-tree-model": ["Unconstrained model", true],
          "hyphy-tree-highlight": ["RELAX.test", false],
          "hyphy-tree-branch-lengths": [false, true],
          "hyphy-tree-hide-legend": [true, false],
          "hyphy-tree-fill-color": [true, false]
        },
        "hyphy-tree-legend-type": "discrete",
        "suppress-tree-render": false,
        "chart-append-html": true,
        edgeColorizer: edgeColorizer
      };

      var models = {};
      if (this.state.analysis_results) {
        models = this.state.analysis_results.fits;
      }

      return (
        <div>
          <SLACBanner
            analysis_results={analysis_results}
            pValue={self.state.pValue}
            pAdjuster={_.bind(self.dm_adjustPvalue, self)}
            input_data={self.state.input_data}
          />

          <div className="row hidden-print">
            <div id="datamonkey-slac-tree-summary" className="col-md-12">
              <h4 className="dm-table-header border-primary mb-3">Partition information</h4>

              <DatamonkeyPartitionTable
                pValue={self.state.pValue}
                trees={trees}
                partitions={analysis_results["data partitions"]}
                branchAttributes={analysis_results["branch attributes"]}
                siteResults={analysis_results.MLE}
                accessorPositive={function(json, partition) {
                  if (!json["content"][partition]) return null;
                  return _.map(
                    json["content"][partition]["by-site"][
                      DEFAULT_AMBIGUITY_HANDLING
                    ],
                    function(v) {
                      return v[8];
                    }
                  );
                }}
                accessorNegative={function(json, partition) {
                  if (!json["content"][partition]) return null;
                  return _.map(
                    json["content"][partition]["by-site"][
                      DEFAULT_AMBIGUITY_HANDLING
                    ],
                    function(v) {
                      return v[9];
                    }
                  );
                }}
              />
            </div>
            <div id="datamonkey-slac-model-fits" className="col-md-8">
              {<DatamonkeyModelTable fits={analysis_results.fits} />}
            </div>
            <div id="datamonkey-slac-timers" className="col-md-4">
              <h4 className="dm-table-header border-primary mb-3">Execution time</h4>

              <DatamonkeyTimersTable
                timers={analysis_results.timers}
                totalTime={"Total time"}
              />
            </div>
          </div>

          <div className="row">
            <div className="col-md-12" id="slac-table">
              <Header
                title="SLAC Site Table"
                popover="<ul><li>Adjust display or handling of alignment ambiguities with the left navbar.</li><li>Apply filters to columns using the right navbar.</li></ul>"
              />
              <SLACSites
                headers={analysis_results.MLE.headers}
                mle={datamonkey.helpers.map(
                  datamonkey.helpers.filter(
                    analysis_results.MLE.content,
                    function(value, key) {
                      return _.has(value, "by-site");
                    }
                  ),
                  function(value, key) {
                    return value["by-site"];
                  }
                )}
                sample25={analysis_results["sample-2.5"]}
                sampleMedian={analysis_results["sample-median"]}
                sample975={analysis_results["sample-97.5"]}
                partitionSites={analysis_results["data partitions"]}
              />
            </div>
          </div>

          <div className="row">
            <div className="col-md-12" id="slac-graph">
              <Header
                title="SLAC Site Graph"
                popover='<p>Changing the x-axis to anything but "Site" results in a scatter plot.'
              />
              <SLACGraphs
                mle={datamonkey.helpers.map(
                  datamonkey.helpers.filter(
                    analysis_results.MLE.content,
                    function(value, key) {
                      return _.has(value, "by-site");
                    }
                  ),
                  function(value, key) {
                    return value["by-site"];
                  }
                )}
                partitionSites={analysis_results["data partitions"]}
                headers={analysis_results.MLE.headers}
              />
            </div>
          </div>

          <div className="row">
            <div id="tree-tab" className="col-md-12">
              <Tree
                models={models}
                json={this.state.analysis_results}
                settings={tree_settings}
                method={"slac"}
                color_gradient={["#00a99d", "#000000"]}
                grayscale_gradient={["#444444", "#000000"]}
                multitree
              />
            </div>
          </div>

          <div className="row">
            <div id="phylo-alignment" className="col-md-12">
              <Header
                title="SLAC Phylogenetic Alignment"
                popover="<ul><li>View individual codons and amino acids with corresponding phylogenetic information.</li><li>Select individual sites and view substitution counts across the phylogeny.</li></ul>"
              />
              <SLACAlignmentTreeCountWrapper
                json={analysis_results}
              />
            </div>
          </div>
        </div>
      );
    }
    return null;
  }
}

export function SLAC(props) {
  return (
    <ResultsPage
      data={props.data}
      scrollSpyInfo={[
        { label: "summary", href: "slac-summary" },
        { label: "information", href: "datamonkey-slac-tree-summary" },
        { label: "table", href: "slac-table" },
        { label: "graph", href: "slac-graph" },
        { label: "tree", href: "tree-tab" },
        { label: "phylo alignment", href: "phylo-alignment" }
      ]}
      methodName="Single-Likelihood Ancestor Counting"
      fasta={props.fasta}
      originalFile={props.originalFile}
      analysisLog={props.analysisLog}
    >
      {SLACContents}
    </ResultsPage>
  );
}

// Will need to make a call to this
// omega distributions
export default function render_slac(
  data,
  element,
  fasta,
  originalFile,
  analysisLog
) {
  ReactDOM.render(
    <SLAC
      data={data}
      fasta={fasta}
      originalFile={originalFile}
      analysisLog={analysisLog}
    />,
    document.getElementById(element)
  );
}