sequenceserver 3.1.3 → 3.2.0

data/public/js/sequence_modal.js

@@ -13,6 +13,7 @@ export default class SequenceModal extends React.Component {
       error_msgs: [],
       sequences: [],
       requestCompleted: false,
+      isModalVisible: false,
     };
     this.modalRef = createRef();
   }
@@ -20,44 +21,43 @@ export default class SequenceModal extends React.Component {
   // Lifecycle methods. //
 
   render() {
+    const { isModalVisible, requestCompleted } = this.state;
+
     return (
-      <div className="modal sequence-viewer" ref={this.modalRef} tabIndex="-1">
-        <div className="modal-dialog">
-          <div className="modal-content">
-            <div className="modal-header">
-              <h3>View sequence</h3>
+      <div className="relative sequence-viewer-wrap">
+        <dialog ref={this.modalRef} className="sequence-viewer fixed p-4 w-full max-w-2xl bg-transparent focus:outline-none overflow-visible z-50">
+          <div className="relative flex flex-col rounded-lg bg-white shadow">
+            <div className="flex items-start justify-between rounded-t border-b p-5">
+              <h3 className="text-xl font-medium text-gray-900">
+                View sequence
+              </h3>
+              <button className="sequence-viewer-close ml-auto inline-flex items-center rounded-lg bg-transparent p-1.5 text-gray-400 hover:bg-gray-200" onClick={this.hide}>
+                <i className="fa-solid fa-xmark hover:text-black"></i>
+              </button>
+            </div>
+            <div className="sequence-viewer-content max-h-[80vh] overflow-y-scroll">
+              {(requestCompleted && this.resultsJSX()) || this.loadingJSX()}
             </div>
-
-            {(this.state.requestCompleted && this.resultsJSX()) ||
-              this.loadingJSX()}
           </div>
-        </div>
+        </dialog>
       </div>
     );
   }
 
-  /*
-   * Returns jQuery reference to the main modal container.
-   */
-  modal() {
-    return $(this.modalRef.current);
-  }
-
   /**
    * Shows sequence viewer.
    */
-  show(url) {
-    this.setState({ requestCompleted: false }, () => {
-      this.modal().modal("show");
-      this.loadJSON(url);
-    });
+  show = (url) => {
+    this.modalRef.current?.showModal();
+    this.setState({ requestCompleted: false });
+    this.loadJSON(url);
   }
 
   /**
    * Hide sequence viewer.
    */
-  hide() {
-    this.modal().modal("hide");
+  hide = () => {
+    this.modalRef.current?.close();
   }
 
   /**
@@ -66,29 +66,30 @@ export default class SequenceModal extends React.Component {
   async loadJSON(url) {
     // Fetch sequence and update state.
     try {
-      const response = await $.getJSON(url);
+      const response = await fetch(url);
+      const data = await response.json();
       this.setState({
-        sequences: response.sequences,
-        error_msgs: response.error_msgs,
+        sequences: data.sequences,
+        error_msgs: data.error_msgs,
         requestCompleted: true,
       });
     } catch (error) {
       console.log('Error fetching sequence:', error);
       this.hide();
-      this.props.showErrorModal(error.responseJSON);
+      this.props.showErrorModal(error);
     }
   }
 
   resultsJSX() {
     return (
-      <div className="modal-body">
+      <div className="pt-2 px-6 pb-6 mt-2">
         {this.state.error_msgs.map((error_msg, index) => (
           <div key={`error-message-${index}`} className="fastan">
-            <div className="section-header">
-              <h4>{error_msg[0]}</h4>
+            <div className="section-header border-b border-seqorange pl-px table mb-0 w-full pb-2">
+              <h4 className="text-sm table-cell">{error_msg[0]}</h4>
             </div>
-            <div className="section-content">
-              <pre className="pre-reset">{error_msg[1]}</pre>
+            <div className="pt-0 px-0 pb-px">
+              <pre className="m-0 p-0 rounded-none border-0 bg-inherit whitespace-pre-wrap break-keep">{error_msg[1]}</pre>
             </div>
           </div>
         ))}
@@ -101,7 +102,7 @@ export default class SequenceModal extends React.Component {
 
   loadingJSX() {
     return (
-      <div className="modal-body text-center">
+      <div className="my-4 text-center">
         <i className="fa fa-spinner fa-3x fa-spin"></i>
       </div>
     );
@@ -122,13 +123,13 @@ class SequenceViewer extends React.Component {
 
     return (
       <div className="fastan">
-        <div className="section-header">
-          <h4>
+        <div className="section-header border-b border-seqorange pl-px table mb-0 w-full pb-2">
+          <h4 className="text-sm table-cell">
             {this.props.sequence.id}
-            <small>&nbsp; {this.props.sequence.title}</small>
+            <small className="text-inherit">&nbsp; {this.props.sequence.title}</small>
           </h4>
         </div>
-        <div className="section-content">
+        <div className="fastan-content relative pt-0 px-0 pb-px">
           <div className={this.widgetClass} id={this.widgetID}></div>
         </div>
       </div>

data/public/js/share_url.js

@@ -10,14 +10,14 @@ const ShareURLComponent = ({ querydb, program, queryLength, url }) => {
     };
 
     return (
-        <div className="share-url-component">
-            <input name="shareableUrl" type="text" value={url} readOnly />
-            <div className="actions">
-                <button className="btn btn-primary" onClick={copyToClipboard}>{copied ? 'Copied!' : 'Copy to Clipboard'}</button>
+        <div className="px-6 share-url-component">
+            <input className="w-full mb-3 pt-3" name="shareableUrl" type="text" value={url} readOnly />
+            <div className="py-4 flex justify-between items-center">
+                <button className="py-2 px-3 border border-transparent rounded-md shadow-sm text-white bg-seqblue hover:bg-seqorange focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-seqorange" onClick={copyToClipboard}>{copied ? 'Copied!' : 'Copy to Clipboard'}</button>
                 <a href={asMailtoHref(querydb, program, queryLength, url, true)}>Share via email</a>
             </div>
         </div>
     );
 };
 
-export default ShareURLComponent;
+export default ShareURLComponent;

data/public/js/sidebar.js

@@ -41,14 +41,6 @@ export default class extends Component {
     }
 
     componentDidMount() {
-        /**
-         * Fixes tooltips in the sidebar, allows tooltip display on click
-         */
-        $(function () {
-            $('.sidebar [data-toggle="tooltip"]').tooltip({ placement: 'right' });
-            $('#copyURL').tooltip({ title: 'Copied!', trigger: 'click', placement: 'right', delay: 0 });
-        });
-
         //keep track of the current queryIndex so it doesn't get lost on page reload
         const urlMatch = window.location.href.match(/#Query_(\d+)/);
         if (urlMatch && urlMatch.length > 1) {
@@ -181,25 +173,25 @@ export default class extends Component {
         return false;
     }
 
-
-
-
     /**
      * Handles copying the URL into the user's clipboard. Modified from: https://stackoverflow.com/a/49618964/18117380
      * Hides the 'Copied!' tooltip after 3 seconds
      */
 
     copyURL() {
-        var element = document.createElement('input');
-        var url = window.location.href;
+        const element = document.createElement('input');
+        const url = window.location.href;
         document.body.appendChild(element);
         element.value = url;
         element.select();
         document.execCommand('copy');
         document.body.removeChild(element);
 
-        setTimeout(function () {
-            $('#copyURL')._tooltip('hide');
+        const tooltip = document.getElementById('tooltip');
+        tooltip.classList.remove('hidden');
+
+        setTimeout(() => {
+            tooltip.classList.add('hidden');
         }, 3000);
     }
 
@@ -216,20 +208,20 @@ export default class extends Component {
         var rootURL = path.join('/');
         return (
             <div className="sidebar-top-panel">
-                <div className="section-header-sidebar">
-                    <h4>
+                <div className="pl-px table mb-0 w-full">
+                    <h4 className="text-sm font-bold mb-0 mt-0.5">
                         {this.summaryString()}
                     </h4>
                 </div>
                 {this.props.data.queries.length > 12 && this.queryIndexButtons()}
                 <div>
-                    <a href={`${rootURL}/?job_id=${job_id}`}>
+                    <a href={`${rootURL}/?job_id=${job_id}`} className="text-sm text-seqblue hover:text-seqorange cursor-pointer">
                         <i className="fa fa-pencil"></i> Edit search
                     </a>
-                    <span className="line">|</span>
+                    <span className="text-seqorange px-1">|</span>
                     <a href={`${rootURL}/`}
-                        onClick={this.clearSession}>
-                        <i className="fa fa-file-o"></i> New search
+                        onClick={this.clearSession} className="text-sm text-seqblue hover:text-seqorange cursor-pointer">
+                        <i className="fa-regular fa-file"></i> New search
                     </a>
                 </div>
                 {this.props.shouldShowIndex && this.indexJSX()}
@@ -253,7 +245,7 @@ export default class extends Component {
         const buttonStyle = {
             outline: 'none', border: 'none', background: 'none'
         };
-        const buttonClasses = 'btn-link nowrap-ellipsis hover-bold';
+        const buttonClasses = 'text-sm text-seqblue hover:text-seqorange hover:bg-gray-200';
 
         const handlePreviousBtnClick = () => this.handleQueryIndexChange(this.state.queryIndex - 1);
         const handleNextBtnClick = () => this.handleQueryIndexChange(this.state.queryIndex + 1);
@@ -264,15 +256,15 @@ export default class extends Component {
         );
         return <div style={{ display: 'flex', width: '100%', margin: '7px 0' }}>
             {this.state.queryIndex > 1 && <NavButton text="Previous Query" onClick={handlePreviousBtnClick} />}
-            {this.state.queryIndex > 1 && this.state.queryIndex < this.props.data.queries.length && <span className="line">|</span>}
+            {this.state.queryIndex > 1 && this.state.queryIndex < this.props.data.queries.length && <span className="text-seqorange px-1">|</span>}
             {this.state.queryIndex < this.props.data.queries.length && <NavButton onClick={handleNextBtnClick} text="Next Query" />}
         </div>;
     }
     indexJSX() {
-        return <ul className="nav hover-reset active-bold"> {
+        return <ul className="w-full"> {
             _.map(this.props.data.queries, (query) => {
                 return <li key={'Side_bar_' + query.id}>
-                    <a className="btn-link nowrap-ellipsis hover-bold"
+                    <a className="side-nav text-sm text-seqblue hover:text-seqorange focus:text-seqorange active:text-seqorange cursor-pointer hover-bold line-clamp-1 mb-1.5"
                         title={'Query= ' + query.id + ' ' + query.title}
                         href={'#Query_' + query.number}>
                         {'Query= ' + query.id}
@@ -286,77 +278,113 @@ export default class extends Component {
     downloadsPanelJSX() {
         return (
             <div className="downloads">
-                <div className="section-header-sidebar">
-                    <h4>
+                <div className="pl-px table mb-0 w-full">
+                    <h4 className="text-sm font-bold mb-0 mt-2.5">
                         Download FASTA, XML, TSV
                     </h4>
                 </div>
-                <ul className="nav">
+                <ul>
                     {
-                        !(this.props.data.imported_xml || this.props.data.non_parse_seqids) && <li>
-                            <a href="#" className={`btn-link download-fasta-of-all ${!this.props.atLeastOneHit && 'disabled'}`}
-                                onClick={this.downloadFastaOfAll}>
-                                FASTA of all hits
+                        !(this.props.data.imported_xml || this.props.data.non_parse_seqids) && <li className="hover:bg-gray-200 mb-1">
+                            <a
+                                href="#"
+                                className={`text-sm text-seqblue download-fasta-of-all hover:text-seqorange cursor-pointer py-0.5 px-0.5 ${!this.props.atLeastOneHit && 'disabled'}`}
+                                onClick={this.props.atLeastOneHit ? this.downloadFastaOfAll : (e) => e.preventDefault()}>
+                                    FASTA of all hits
                             </a>
                         </li>
                     }
                     {
-                        !(this.props.data.imported_xml || this.props.data.non_parse_seqids) && <li>
-                            <a href="#" className="btn-link download-fasta-of-selected disabled"
+                        !(this.props.data.imported_xml || this.props.data.non_parse_seqids) && <li className="mb-1">
+                            <a
+                                href="#"
+                                className="flex text-sm download-fasta-of-selected text-seqblue disabled py-0.5 px-0.5"
                                 onClick={this.downloadFastaOfSelected}>
-                                FASTA of <span className="text-bold"></span> selected hit(s)
+                                FASTA of <span className="font-bold px-0.5"></span> selected hit(s)
                             </a>
                         </li>
                     }
-                    <li>
-                        <a href="#" className={`btn-link download-alignment-of-all ${!this.props.atLeastOneHit && 'disabled'}`}>
+                    <li className="hover:bg-gray-200 mb-1">
+                        <a href="#" className={`text-sm text-seqblue download-alignment-of-all hover:text-seqorange cursor-pointer py-0.5 px-0.5 ${!this.props.atLeastOneHit && 'disabled'}`}>
                             Alignment of all hits
                         </a>
                     </li>
-                    <li>
-                        <a href="#" className="btn-link download-alignment-of-selected disabled">
-                            Alignment of <span className="text-bold"></span> selected hit(s)
+                    <li className="mb-1">
+                        <a href="#" className="flex text-sm download-alignment-of-selected text-seqblue disabled py-0.5 px-0.5">
+                            Alignment of <span className="font-bold px-0.5"></span> selected hit(s)
                         </a>
                     </li>
                     {
-                        !this.props.data.imported_xml && <li>
-                            <a className="btn-link download" data-toggle="tooltip"
-                                title="15 columns: query and subject ID; scientific
-                                name, alignment length, mismatches, gaps, identity,
-                                start and end coordinates, e value, bitscore, query
-                                coverage per subject and per HSP."
-                                href={'download/' + this.props.data.search_id + '.std_tsv'}>
-                                Standard tabular report
+                        !this.props.data.imported_xml && <li className="hover:bg-gray-200 mb-1">
+                            <a href={'download/' + this.props.data.search_id + '.std_tsv'}>
+                                <div className="relative flex flex-col items-center group">
+                                    <div className="flex items-center w-full">
+                                        <span className="w-full text-sm text-seqblue hover:text-seqorange download cursor-pointer py-0.5 px-0.5">Standard tabular report</span>
+                                        <div className="absolute hidden left-full ml-2 items-center group-hover:flex tooltip-wrap">
+                                            <div className="w-0 h-0 border-y-8 border-r-8 border-t-transparent border-b-transparent border-r-black -mr-px"></div>
+                                            <span className="relative z-10 p-2 side-tooltip-text leading-4 text-center text-white whitespace-no-wrap bg-black shadow-lg rounded-md">
+                                                15 columns: query and subject ID; scientific
+                                                name, alignment length, mismatches, gaps, identity,
+                                                start and end coordinates, e value, bitscore, query
+                                                coverage per subject and per HSP.
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
                             </a>
                         </li>
                     }
                     {
-                        !this.props.data.imported_xml && <li>
-                            <a className="btn-link download" data-toggle="tooltip"
-                                title="44 columns: query and subject ID, GI,
-                                accessions, and length; alignment details;
-                                taxonomy details of subject sequence(s) and
-                                query coverage per subject and per HSP."
-                                href={'download/' + this.props.data.search_id + '.full_tsv'}>
-                                Full tabular report
+                        !this.props.data.imported_xml && <li className="hover:bg-gray-200 mb-1">
+                            <a href={'download/' + this.props.data.search_id + '.full_tsv'}>
+                                <div className="relative flex flex-col items-center group">
+                                    <div className="flex items-center w-full">
+                                        <span className="w-full text-sm text-seqblue hover:text-seqorange download cursor-pointer py-0.5 px-0.5">Full tabular report</span>
+                                        <div className="absolute hidden left-full ml-2 items-center group-hover:flex tooltip-wrap">
+                                            <div className="w-0 h-0 border-y-8 border-r-8 border-t-transparent border-b-transparent border-r-black -mr-px"></div>
+                                            <span className="relative z-10 p-2 side-tooltip-text leading-4 text-center text-white whitespace-no-wrap bg-black shadow-lg rounded-md">
+                                                44 columns: query and subject ID, GI,
+                                                accessions, and length; alignment details;
+                                                taxonomy details of subject sequence(s) and
+                                                query coverage per subject and per HSP.
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
                             </a>
                         </li>
                     }
                     {
-                        !this.props.data.imported_xml && <li>
-                            <a className="btn-link download" data-toggle="tooltip"
-                                title="Results in XML format."
-                                href={'download/' + this.props.data.search_id + '.xml'}>
-                                Full XML report
+                        !this.props.data.imported_xml && <li className="hover:bg-gray-200 mb-1">
+                            <a href={'download/' + this.props.data.search_id + '.xml'}>
+                                <div className="relative flex flex-col items-center group">
+                                    <div className="flex items-center w-full">
+                                        <span className="w-full text-sm text-seqblue hover:text-seqorange download cursor-pointer py-0.5 px-0.5">Full XML report</span>
+                                        <div className="absolute hidden left-full ml-2 items-center group-hover:flex tooltip-wrap">
+                                            <div className="w-0 h-0 border-y-8 border-r-8 border-t-transparent border-b-transparent border-r-black -mr-px"></div>
+                                            <span className="relative z-10 p-2 side-tooltip-text leading-4 text-center text-white whitespace-no-wrap bg-black shadow-lg rounded-md">
+                                                Results in XML format.
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
                             </a>
                         </li>
                     }
                     {
-                        !this.props.data.imported_xml && <li>
-                            <a className="btn-link download" data-toggle="tooltip"
-                                title="Results in text format."
-                                href={'download/' + this.props.data.search_id + '.pairwise'}>
-                                Full Text report
+                        !this.props.data.imported_xml && <li className="hover:bg-gray-200 mb-1">
+                            <a href={'download/' + this.props.data.search_id + '.pairwise'}>
+                                <div className="relative flex flex-col items-center group">
+                                    <div className="flex items-center w-full">
+                                        <span className="w-full text-sm text-seqblue hover:text-seqorange download cursor-pointer py-0.5 px-0.5">Full Text report</span>
+                                        <div className="absolute hidden left-full ml-2 items-center group-hover:flex tooltip-wrap">
+                                            <div className="w-0 h-0 border-y-8 border-r-8 border-t-transparent border-b-transparent border-r-black -mr-px"></div>
+                                            <span className="relative z-10 p-2 side-tooltip-text leading-4 text-center text-white whitespace-no-wrap bg-black shadow-lg rounded-md">
+                                                Results in text format.
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
                             </a>
                         </li>
                     }
@@ -369,35 +397,69 @@ export default class extends Component {
     sharingPanelJSX() {
         return (
             <div className="sharing-panel">
-                <div className="section-header-sidebar">
-                    <h4>
+                <div className="pl-px table mb-0 w-full">
+                    <h4 className="text-sm font-bold mb-0 mt-2.5">
                         Share results
                     </h4>
                 </div>
-                <ul className="nav">
+                <ul>
                     {!this.props.cloudSharingEnabled &&
-                        <li>
-                            <a id="copyURL" className="btn-link copy-URL cursor-pointer" data-toggle="tooltip"
-                                onClick={this.copyURL}>
-                                <i className="fa fa-copy"></i> Copy URL to clipboard
+                        <li className="hover:text-seqorange hover:bg-gray-200">
+                            <a id="copyURL" className="flex text-sm text-seqblue hover:text-seqorange copy-URL cursor-pointer py-0.5 px-0.5 w-full" onClick={this.copyURL}>
+                                <div className="relative flex gap-2 items-center group w-full">
+                                    <i className="fa fa-copy"></i>
+                                    <div className="flex items-center">
+                                        <span className="w-full">Copy URL to clipboard</span>
+                                        <div id="tooltip" className="absolute hidden left-full ml-2 items-center">
+                                            <div className="flex items-center">
+                                                <div className="w-0 h-0 border-y-8 border-r-8 border-t-transparent border-b-transparent border-r-black -mr-px"></div>
+                                                <span className="relative z-10 p-2 side-tooltip-text leading-4 text-center text-white whitespace-no-wrap bg-black shadow-lg rounded-md">
+                                                    Copied!
+                                                </span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
                             </a>
                         </li>
                     }
                     {!this.props.cloudSharingEnabled &&
-                        <li>
-                            <a id="sendEmail" className="btn-link email-URL cursor-pointer" data-toggle="tooltip"
-                                title="Send by email" href={asMailtoHref(this.props.data.querydb, this.props.data.program, this.props.data.queries.length, window.location.href)}
+                        <li className="hover:text-seqorange hover:bg-gray-200">
+                            <a id="sendEmail" className="flex text-sm text-seqblue hover:text-seqorange email-URL cursor-pointer py-0.5 px-0.5 w-full"
+                                href={asMailtoHref(this.props.data.querydb, this.props.data.program, this.props.data.queries.length, window.location.href)}
                                 target="_blank" rel="noopener noreferrer">
-                                <i className="fa fa-envelope"></i> Send by email
+                                <div className="relative flex gap-2 items-center group w-full">
+                                    <i className="fa fa-envelope"></i>
+                                    <div className="flex items-center w-full">
+                                        <span className="w-full">Send by email</span>
+                                        <div className="absolute hidden left-full ml-2 items-center group-hover:flex tooltip-wrap">
+                                            <div className="w-0 h-0 border-y-8 border-r-8 border-t-transparent border-b-transparent border-r-black -mr-px"></div>
+                                            <span className="relative z-10 p-2 side-tooltip-text leading-4 text-center text-white whitespace-no-wrap bg-black shadow-lg rounded-md">
+                                                Send by email
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
                             </a>
                         </li>
                     }
                     {this.props.cloudSharingEnabled &&
-                        <li>
-                            <button className="btn-link cloud-Post cursor-pointer" data-toggle="tooltip"
-                                title="Upload results to SequenceServer Cloud where it will become accessable
-                                to everyone who has a link." onClick={this.shareCloudInit}>
-                                <i className="fa fa-cloud"></i> Share to cloud
+                        <li className="hover:text-seqorange hover:bg-gray-200">
+                            <button className="flex text-sm text-seqblue hover:text-seqorange cloud-Post cursor-pointer py-0.5 px-0.5 w-full" onClick={this.shareCloudInit}>
+                                <div className="relative flex gap-2 items-center group w-full">
+                                    <i className="fa fa-cloud"></i>
+                                    <div className="flex items-center">
+                                        <span className="w-full">Share to cloud</span>
+                                        <div className="absolute hidden left-full ml-2 items-center group-hover:flex tooltip-wrap">
+                                            <div className="w-0 h-0 border-y-8 border-r-8 border-t-transparent border-b-transparent border-r-black -mr-px"></div>
+                                            <span className="relative z-10 p-2 side-tooltip-text leading-4 text-center text-white whitespace-no-wrap bg-black shadow-lg rounded-md">
+                                                Results in pairwise format
+                                                Upload results to SequenceServer Cloud where it will become accessable
+                                                to everyone who has a link.
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
                             </button>
                         </li>
                     }
@@ -416,14 +478,14 @@ export default class extends Component {
 
     render() {
         return (
-            <div className="sidebar">
+            <div className="sidebar sticky top-0 print:hidden">
                 {this.topPanelJSX()}
                 {this.downloadsPanelJSX()}
                 {this.sharingPanelJSX()}
                 <div className="referral-panel">
-                    <div className="section-header-sidebar">
-                        <h4>Recommend SequenceServer</h4>
-                        <p><a href="https://sequenceserver.com/referral-program" target="_blank">Earn up to $400 per signup</a></p>
+                    <div className="pl-px table mb-0 w-full text-sm">
+                        <h4 className="font-bold mb-0 mt-2.5">Recommend SequenceServer</h4>
+                        <p><a href="https://sequenceserver.com/referral-program" target="_blank" className="text-seqblue hover:text-seqorange">Earn up to $400 per signup</a></p>
                     </div>
                 </div>
             </div>

data/public/js/svgExporter.js

@@ -8,6 +8,7 @@
  *
  */
 import * as Exporter from './exporter';
+import * as d3 from 'd3';
 
 /**
  * Exports the given <svg> DOM node as a .svg file.
@@ -44,7 +45,11 @@ var export_as_png = function (svg, filename) {
         Exporter.download_url(canvas.toDataURL('image/png'), filename);
     };
 
-    img.src = 'data:image/svg+xml;base64,' + window.btoa(serialize_svg(svg));
+    var svgString = serialize_svg(svg);
+    var encodedSvg = encodeURIComponent(svgString).replace(/%([0-9A-F]{2})/gi, function(match, p1) {
+        return String.fromCharCode('0x' + p1);
+    });
+    img.src = 'data:image/svg+xml;base64,' + window.btoa(encodedSvg);
 };
 
 var serialize_svg = function(svg) {
@@ -61,8 +66,8 @@ var serialize_svg = function(svg) {
 
     svg.removeAttribute('xmlns');
     svg.removeAttribute('xlink');
-    svg.setAttributeNS(d3.ns.prefix.xmlns, 'xmlns', d3.ns.prefix.svg);
-    svg.setAttributeNS(d3.ns.prefix.xmlns, 'xmlns:xlink', d3.ns.prefix.xlink);
+    svg.setAttributeNS(d3.namespaces.xmlns, 'xmlns', d3.namespaces.svg);
+    svg.setAttributeNS(d3.namespaces.xmlns, 'xmlns:xlink', d3.namespaces.xlink);
 
     var source = (new XMLSerializer()).serializeToString(svg);
     var doctype = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC ' +

data/public/js/tests/form.spec.js

@@ -12,7 +12,7 @@ export const setMockJSONResult = (result) => {
     global.$.getJSON = (_, cb) => cb(result);
 };
 
-describe('ADVANCED PARAMETERS', () => {
+describe('PARAMETERS', () => {
     let csrfMetaTag;
 
     beforeEach(() => {

data/public/js/tests/visualisation_helpers.spec.js

@@ -0,0 +1,28 @@
+// Import the necessary functions
+import { tick_formatter, formatNumberUnits } from '../visualisation_helpers';
+
+describe('tick_formatter', () => {
+    test('formats tick for amino_acid sequence', () => {
+        const formatter = tick_formatter(null, 'amino_acid');
+        expect(formatter(1_000)).toBe('1 kaa');
+        expect(formatter(25_286_936)).toBe('25.3 Maa');
+    });
+
+    test('formats tick for nucleic_acid sequence', () => {
+        const formatter = tick_formatter(null, 'nucleic_acid');
+        expect(formatter(1_000)).toBe('1 kbp');
+        expect(formatter(25_965_000)).toBe('26 Mbp');
+    });
+});
+
+describe('formatNumberUnits', () => {
+    test('formats number with units correctly', () => {
+        expect(formatNumberUnits('1.9k')).toBe('1.9 k');
+        expect(formatNumberUnits('1.5k')).toBe('1.5 k');
+    });
+
+    test('rounds up correctly based on threshold', () => {
+        expect(formatNumberUnits('2.95k')).toBe('3 k');
+        expect(formatNumberUnits('2.94k')).toBe('2.9 k');
+    });
+});