diff --git a/.babelrc b/.babelrc index 49831054..9075db0a 100644 --- a/.babelrc +++ b/.babelrc @@ -1,17 +1,14 @@ { "plugins": [ "@babel/plugin-proposal-class-properties", - "@babel/plugin-syntax-dynamic-import" - ], - "presets": [ - "@babel/preset-env", - "@babel/preset-react" + "@babel/plugin-syntax-dynamic-import", + "@babel/plugin-proposal-optional-chaining", + "@babel/plugin-proposal-nullish-coalescing-operator" ], + "presets": ["@babel/preset-env", "@babel/preset-react"], "env": { "start": { - "presets": [ - "@babel/preset-env" - ] + "presets": ["@babel/preset-env"] } } } diff --git a/package.json b/package.json index 0683afe1..25b172f2 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,6 @@ "@observablehq/runtime": "4.25", "@spond/absrel": "https://api.observablehq.com/@spond/absrel@5186.tgz?v=3", "@spond/busted": "https://api.observablehq.com/@spond/busted@4691.tgz?v=3", - "alignment.js": "0.3.0", "bootstrap": "4.x", "chi-squared": "^1.1.0", "circos": "^2.1.0", @@ -116,7 +115,6 @@ "interpolate-html-plugin": "^4.0.0", "jest": "^29.3.1", "mini-css-extract-plugin": "^1.6.1", - "node-sass": "^7.0.1", "npm-version": "^1.1.0", "patch-package": "^8.0.0", "path-browserify": "^1.0.1", @@ -128,7 +126,7 @@ "react-addons-test-utils": "^15.6.0", "react-lazy-render": "0.3.0", "react-test-renderer": "17.0.2", - "sass": "^1.26.2", + "sass": "^1.81.0", "sass-loader": "^12.1.0", "scss-loader": "^0.0.1", "stream-browserify": "^3.0.0", @@ -156,6 +154,7 @@ "dist/hyphyvision.css", "dist/hyphyvision.min.js", "dist/hyphyvision-min.map", - "dist/application.scss" + "dist/application.scss", + "dist/variables.scss" ] } diff --git a/src/application.scss b/src/application.scss index 7f0568ee..984d9aa6 100644 --- a/src/application.scss +++ b/src/application.scss @@ -2,13 +2,13 @@ $hyphy-green: #00a99d; $theme-colors: ( - "primary": $hyphy-green + "primary": $hyphy-green, ); /**************************/ /******** Imports *********/ /**************************/ -@import "variables"; +@import "./variables"; @import "~bootstrap/scss/bootstrap"; $fa-font-path: "~@fortawesome/fontawesome-free/webfonts"; @@ -17,7 +17,6 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts"; @import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Noto+Sans:400,400i,700,700i"); -@import "~alignment.js/styles.scss"; @import "~react-phylotree/styles/phylotree.css"; /* End Imports */ @@ -567,7 +566,7 @@ tr.highlight { /* aBSREL */ #code-data-and-libraries { - display:none; + display: none; } .hyphy-omega-bar line, @@ -1624,7 +1623,9 @@ li.active > a:hover { /* GARD */ .gard { - font-family:"Source Serif Pro",Iowan Old Style,Apple Garamond,Palatino Linotype,Times New Roman,"Droid Serif",Times,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; + font-family: "Source Serif Pro", Iowan Old Style, Apple Garamond, + Palatino Linotype, Times New Roman, "Droid Serif", Times, serif, + Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; } .gard td { @@ -1634,7 +1635,7 @@ li.active > a:hover { /* FEL */ .fel { - font-family:"Source Serif Pro",Iowan Old Style,Apple Garamond,Palatino Linotype,Times New Roman,"Droid Serif",Times,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; + font-family: "Source Serif Pro", Iowan Old Style, Apple Garamond, + Palatino Linotype, Times New Roman, "Droid Serif", Times, serif, + Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; } - - diff --git a/src/jsx/components/codon_column.jsx b/src/jsx/components/codon_column.jsx index b15c719d..64422fb2 100644 --- a/src/jsx/components/codon_column.jsx +++ b/src/jsx/components/codon_column.jsx @@ -1,24 +1,23 @@ import React from "react"; -import { BaseSVGAlignment } from "alignment.js"; import translate from "../../helpers/translate"; function CodonColumn(props) { - const codon_sequence_data = props.sequence_data.map(record => { + const codon_sequence_data = props.sequence_data.map((record) => { return { header: record.header, - seq: record.seq.slice(3 * props.site, 3 * props.site + 3) + seq: record.seq.slice(3 * props.site, 3 * props.site + 3), }; }); codon_sequence_data.number_of_sequences = codon_sequence_data.length; codon_sequence_data.number_of_sites = 3; - const amino_acid_sequence_data = props.sequence_data.map(record => { + const amino_acid_sequence_data = props.sequence_data.map((record) => { const codon = record.seq.slice(3 * props.site, 3 * props.site + 3), amino_acid = translate(codon, 1); return { header: record.header, - seq: amino_acid + seq: amino_acid, }; }); amino_acid_sequence_data.number_of_sequences = @@ -26,16 +25,6 @@ function CodonColumn(props) { amino_acid_sequence_data.number_of_sites = 1; return ( - - ) : null} - {this.state.showModal == "msa" ? ( - - ) : null} + {null}
) : null} - {this.state.showModal == "msa" ? ( - - ) : null} + {null}
@@ -144,7 +118,6 @@ class ResultsPage extends React.Component { } render() { - var self = this; if (!this.state.json) { @@ -177,7 +150,7 @@ class ResultsPage extends React.Component { fasta: this.state.fasta, originalFile: this.props.originalFile, analysisLog: this.props.analysisLog, - partitionedData: this.props.partitionedData + partitionedData: this.props.partitionedData, })} @@ -191,7 +164,7 @@ ResultsPage.defaultProps = { fasta: false, originalFile: false, analysisLog: false, - displaySummary: true + displaySummary: true, }; export { ResultsPage }; diff --git a/src/jsx/fel.jsx b/src/jsx/fel.jsx index 08d4e77b..eb686b54 100644 --- a/src/jsx/fel.jsx +++ b/src/jsx/fel.jsx @@ -9,14 +9,13 @@ import { Runtime, Inspector } from "@observablehq/runtime"; import notebook from "@hyphy_software/fel-analysis-result-visualization"; class FELContents extends React.Component { - figureRef = React.createRef(); constructor(props) { super(props); this.state = { input: null, - fits: {} + fits: {}, }; } @@ -29,70 +28,65 @@ class FELContents extends React.Component { } processData(data) { - // Observable this.figureRef.current.replaceChildren(); $(this.figureRef.current).empty(); const runtime = new Runtime(); - let main = runtime.module(notebook, name => { - + let main = runtime.module(notebook, (name) => { let toInclude = [ "intro", "citation", "summary_table", "cssStyles", - "viewof pv", - "viewof table_filter", - "viewof plot_type", - "fig1caption", - "figure1", - "table1caption", - "viewof table1", - "table1legend", - "viewof tree_id", - "viewof treeDim", - "treeLegend", - "figure2" + "viewof pv", + "viewof table_filter", + "viewof plot_type", + "fig1caption", + "figure1", + "table1caption", + "viewof table1", + "table1legend", + "viewof tree_id", + "viewof treeDim", + "treeLegend", + "figure2", ]; if (_.includes(toInclude, name)) { const node = Inspector.into(this.figureRef.current)(name); - if(name == "viewof table1") { - node._node.classList.add('table') - node._node.classList.add('table-striped') - } - return node; + if (name == "viewof table1") { + node._node.classList.add("table"); + node._node.classList.add("table-striped"); + } + return node; } - }); this.setState({ input: data.input, fits: data.fits, main: main, - data: data + data: data, }); } render() { - if (this.state.main) { this.state.main.redefine("results_json", this.state.data); } return ( -

- FEL + FEL

Fixed Effects Likelihood

-
+
- -
+ +
diff --git a/src/jsx/slac.jsx b/src/jsx/slac.jsx index 6adf1c60..530a67f7 100644 --- a/src/jsx/slac.jsx +++ b/src/jsx/slac.jsx @@ -8,20 +8,19 @@ var React = require("react"), import { Tree } from "./components/tree.jsx"; import { Header } from "./components/header.jsx"; import { - DatamonkeyTable, - DatamonkeyPartitionTable, DatamonkeyModelTable, - DatamonkeyTimersTable + DatamonkeyPartitionTable, + DatamonkeyTable, + DatamonkeyTimersTable, } from "./components/tables.jsx"; import { DatamonkeyScatterplot, - DatamonkeySeries + 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 Phylotree, { phylotreev1, placenodes } from "react-phylotree"; import CodonColumn from "./components/codon_column.jsx"; require("../datamonkey/helpers.js"); @@ -36,10 +35,10 @@ var SLACSites = createReactClass({ sampleMedian: PropTypes.object, sample975: PropTypes.object, initialAmbigHandling: PropTypes.string.isRequired, - partitionSites: PropTypes.object.isRequired + partitionSites: PropTypes.object.isRequired, }, - getInitialState: function() { + getInitialState: function () { var canDoCI = this.props.sample25 && this.props.sampleMedian && this.props.sample975; @@ -54,23 +53,23 @@ var SLACSites = createReactClass({ filterOp: "AND", canAddFilter: false, lowerFilterBound: -Infinity, - upperFilterBound: Infinity + upperFilterBound: Infinity, }; }, - getDefaultProps: function() { + getDefaultProps: function () { return { sample25: null, sampleMedian: null, sample975: null, - initialAmbigHandling: DEFAULT_AMBIGUITY_HANDLING + initialAmbigHandling: DEFAULT_AMBIGUITY_HANDLING, }; }, - componentWillReceiveProps: function(nextProps) { + componentWillReceiveProps: function (nextProps) { this.setState({ ambigOptions: this.dm_AmbigOptions(nextProps), - ambigHandling: nextProps.initialAmbigHandling + ambigHandling: nextProps.initialAmbigHandling, }); }, @@ -87,11 +86,11 @@ var SLACSites = createReactClass({ .clamp(true) .domain([-1, -0.25, 1]), - dm_log10times: _.before(10, function(v) { + dm_log10times: _.before(10, function (v) { return 0; }), - dm_formatInterval: function(values) { + dm_formatInterval: function (values) { //this.dm_log10times (values); return ( @@ -106,32 +105,32 @@ var SLACSites = createReactClass({ ); }, - dm_AmbigOptions: function(theseProps) { + dm_AmbigOptions: function (theseProps) { return _.keys(theseProps.mle[0]); }, - dm_setAmbigOption: function(value) { + dm_setAmbigOption: function (value) { this.setState({ - ambigHandling: value + ambigHandling: value, }); }, - dm_toggleIntervals: function(event) { + dm_toggleIntervals: function (event) { this.setState({ showIntervals: !this.state.showIntervals, showCellColoring: this.state.showIntervals ? this.state.showCellColoring - : false + : false, }); }, - dm_toggleCellColoring: function(event) { + dm_toggleCellColoring: function (event) { this.setState({ - showCellColoring: !this.state.showCellColoring + showCellColoring: !this.state.showCellColoring, }); }, - dm_toggleVariableFilter: function(event) { + dm_toggleVariableFilter: function (event) { var filterState = new Object(null); _.extend(filterState, this.state.filters); if (!("variable" in this.state.filters)) { @@ -142,16 +141,16 @@ var SLACSites = createReactClass({ this.setState({ filters: filterState }); }, - dm_makeFilterFunction: function() { + dm_makeFilterFunction: function () { var filterFunction = null; - _.each(this.state.filters, function(value, key) { + _.each(this.state.filters, function (value, key) { var composeFunction = null; switch (key) { case "variable": { if (filterFunction) { - composeFunction = function( + composeFunction = function ( f, partitionIndex, index, @@ -164,7 +163,7 @@ var SLACSites = createReactClass({ ); }; } else { - filterFunction = function(partitionIndex, index, site, siteData) { + filterFunction = function (partitionIndex, index, site, siteData) { return siteData[2] + siteData[3] > 0; }; } @@ -176,7 +175,7 @@ var SLACSites = createReactClass({ filter_index = value[0][1]; switch (filter_index) { case -2: - new_condition = function( + new_condition = function ( partitionIndex, index, site, @@ -188,7 +187,7 @@ var SLACSites = createReactClass({ }; break; case -1: - new_condition = function( + new_condition = function ( partitionIndex, index, site, @@ -198,7 +197,7 @@ var SLACSites = createReactClass({ }; break; default: - new_condition = function( + new_condition = function ( partitionIndex, index, site, @@ -213,7 +212,7 @@ var SLACSites = createReactClass({ if (new_condition) { if (value[3] == "AND") { - composeFunction = function( + composeFunction = function ( f, partitionIndex, index, @@ -227,7 +226,7 @@ var SLACSites = createReactClass({ }; } else { if (filterFunction) { - composeFunction = function( + composeFunction = function ( f, partitionIndex, index, @@ -240,7 +239,7 @@ var SLACSites = createReactClass({ ); }; } else { - filterFunction = function( + filterFunction = function ( partitionIndex, index, site, @@ -263,35 +262,35 @@ var SLACSites = createReactClass({ return filterFunction; }, - dm_makeHeaderRow: function() { + dm_makeHeaderRow: function () { var headers = [ { value: "Partition", sortable: true }, - { value: "Site", sortable: true } + { value: "Site", sortable: true }, ], doCI = this.state.showIntervals, filterable = [ ["Partition", -2], - ["Site", -1] + ["Site", -1], ]; if (doCI) { var secondRow = ["", ""]; - _.each(this.props.headers, function(value, index) { + _.each(this.props.headers, function (value, index) { headers.push({ value: value[0], abbr: value[1], span: 4, - style: { textAlign: "center" } + style: { textAlign: "center" }, }); filterable.push([value[0], index]); - _.each(["MLE", "Med", "2.5%", "97.5%"], function(v) { + _.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) { + _.each(this.props.headers, function (value, index) { headers.push({ value: value[0], abbr: value[1], sortable: true }); filterable.push([value[0], index]); }); @@ -299,7 +298,7 @@ var SLACSites = createReactClass({ return { headers: headers, filterable: filterable }; }, - dm_makeDataRows: function(filter) { + dm_makeDataRows: function (filter) { var rows = [], partitionCount = datamonkey.helpers.countPartitionsJSON( this.props.partitionSites @@ -310,85 +309,88 @@ var SLACSites = createReactClass({ 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( + 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; - _.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 (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) - }; + 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]) + + "]"; } - 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); } - thisRow.push(this_cell); - } - }); - rows.push(thisRow); - //if (secondRow) { - // rows.push (secondRow); - //} + }); + rows.push(thisRow); + //if (secondRow) { + // rows.push (secondRow); + //} + } } - }); + ); partitionIndex++; } @@ -396,25 +398,25 @@ var SLACSites = createReactClass({ return { rows: rows, count: siteCount }; }, - dm_handleLB: function(e) { + dm_handleLB: function (e) { var new_value = parseFloat(e.target.value); this.setState({ - lowerFilterBound: _.isFinite(new_value) ? new_value : -Infinity + lowerFilterBound: _.isFinite(new_value) ? new_value : -Infinity, }); }, - dm_handleUB: function(e) { + dm_handleUB: function (e) { var new_value = parseFloat(e.target.value); this.setState({ - upperFilterBound: _.isFinite(new_value) ? new_value : Infinity + upperFilterBound: _.isFinite(new_value) ? new_value : Infinity, }); }, - dm_handleFilterField: function(value) { + dm_handleFilterField: function (value) { this.setState({ filterField: value }); }, - dm_checkFilterValidity: function() { + dm_checkFilterValidity: function () { if (_.isFinite(this.state.lowerFilterBound)) { if (_.isFinite(this.state.upperFilterBound)) { return this.state.lowerFilterBound <= this.state.upperFilterBound; @@ -426,7 +428,7 @@ var SLACSites = createReactClass({ dm_unique_filter_ID: 0, - dm_handleAddCondition: function(e) { + dm_handleAddCondition: function (e) { e.preventDefault(); var filterState = new Object(null); _.extend(filterState, this.state.filters); @@ -434,13 +436,13 @@ var SLACSites = createReactClass({ this.state.filterField, this.state.lowerFilterBound, this.state.upperFilterBound, - this.state.filterOp + this.state.filterOp, ]; this.setState({ filters: filterState }); }, - dm_handleRemoveCondition: function(key, e) { + dm_handleRemoveCondition: function (key, e) { e.preventDefault(); var filterState = new Object(null); _.extend(filterState, this.state.filters); @@ -449,12 +451,12 @@ var SLACSites = createReactClass({ this.setState({ filters: filterState }); }, - render: function() { + render: function () { var self = this; var { rows } = this.dm_makeDataRows(this.dm_makeFilterFunction()); var { headers, filterable } = this.dm_makeHeaderRow(); - var show_ci_menu = function() { + var show_ci_menu = function () { if (self.state.hasCI) { var ci_menu = [
  • ]; if (!self.state.showIntervals) { @@ -521,7 +523,7 @@ var SLACSites = createReactClass({