webpack 5 support

veg · Nov 22, 2024 · a9b3ed0 · a9b3ed0
1 parent 1ea26a2
commit a9b3ed0
Show file tree

Hide file tree

Showing 12 changed files with 730 additions and 2,294 deletions.
diff --git 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
@@ -34,7 +34,6 @@
     "@observablehq/runtime": "4.25",
     "@spond/absrel": "https://api.observablehq.com/@spond/[email protected]?v=3",
     "@spond/busted": "https://api.observablehq.com/@spond/[email protected]?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
@@ -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
@@ -1,41 +1,30 @@
 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 =
     amino_acid_sequence_data.length;
   amino_acid_sequence_data.number_of_sites = 1;
   return (
     <g transform={`translate(${props.translateX}, ${props.translateY})`}>
-      <BaseSVGAlignment
-        sequence_data={codon_sequence_data}
-        site_size={props.site_size}
-      />
-      <BaseSVGAlignment
-        translateX={3 * props.site_size + props.site_padding}
-        sequence_data={amino_acid_sequence_data}
-        site_size={props.site_size}
-        amino_acid
-      />
       <text
         x={(4 * props.site_size + props.site_padding) / 2}
         y={props.height + props.codon_label_height}
@@ -52,7 +41,7 @@ function CodonColumn(props) {
 
 CodonColumn.defaultProps = {
   translateX: 0,
-  translateY: 0
+  translateY: 0,
 };
 
 export default CodonColumn;
diff --git a/src/jsx/components/export-button.jsx b/src/jsx/components/export-button.jsx
@@ -4,14 +4,13 @@ const pd = require("pretty-data").pd;
 
 import { saveAs } from "file-saver";
 import ReactJson from "react-json-view";
-import Alignment from "alignment.js";
 
 class ExportButton extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       showModal: false,
-      fasta: false
+      fasta: false,
     };
   }
 
@@ -26,7 +25,7 @@ class ExportButton extends React.Component {
 
   saveTheJSON() {
     var blob = new Blob([pd.json(this.props.json)], {
-      type: "text/json:charset=utf-8;"
+      type: "text/json:charset=utf-8;",
     });
     saveAs(blob, "result.json");
   }
@@ -117,13 +116,7 @@ class ExportButton extends React.Component {
                     />
                   </div>
                 ) : null}
-                {this.state.showModal == "msa" ? (
-                  <Alignment
-                    fasta={this.props.fasta}
-                    width={800}
-                    height={500}
-                  />
-                ) : null}
+                {null}
               </div>
               <div className="modal-footer">
                 <button

diff --git a/src/jsx/components/input_info.jsx b/src/jsx/components/input_info.jsx
@@ -3,14 +3,13 @@ var React = require("react"),
 var pd = require("pretty-data").pd;
 import { saveAs } from "file-saver";
 import ReactJson from "react-json-view";
-import Alignment from "alignment.js";
 
 class InputInfo extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       showModal: false,
-      fasta: false
+      fasta: false,
     };
   }
 
@@ -25,7 +24,7 @@ class InputInfo extends React.Component {
 
   saveTheJSON() {
     var blob = new Blob([pd.json(this.props.json)], {
-      type: "text/json:charset=utf-8;"
+      type: "text/json:charset=utf-8;",
     });
     saveAs(blob, "result.json");
   }
@@ -144,13 +143,7 @@ class InputInfo extends React.Component {
                     />
                   </div>
                 ) : null}
-                {this.state.showModal == "msa" ? (
-                  <Alignment
-                    fasta={this.props.fasta}
-                    width={800}
-                    height={500}
-                  />
-                ) : null}
+                {null}
               </div>
               <div className="modal-footer">
                 <button