Fix conflict

.github/workflows/tests.yml

@@ -18,7 +18,7 @@
     test:
       runs-on: ubuntu-latest
       steps:
-        - uses: actions/checkout@v3
+        - uses: actions/checkout@v4
 
         - name: Get BLAST
           working-directory: /opt
@@ -44,9 +44,9 @@
           run: bundle install
 
         - name: Setup Node.js
-          uses: actions/setup-node@v3
+          uses: actions/setup-node@v4
           with:
-            node-version: '16'
+            node-version: '22'
 
         - name: Install NPM Dependencies
           run: npm install
@@ -79,7 +79,7 @@
           continue-on-error: true
 
         - name: upload rspec coverage report
-          uses: actions/upload-artifact@v3
+          uses: actions/upload-artifact@v4
           with:
             name: rspec-code-coverage-report
             path: coverage
@@ -93,7 +93,7 @@
           continue-on-error: true
 
         - name: upload Jest coverage report
-          uses: actions/upload-artifact@v3
+          uses: actions/upload-artifact@v4
           with:
             name: jest-code-coverage-report
             path: coverage/lcov-report/

.gitignore

@@ -56,4 +56,5 @@ pkg
 node_modules
 
 spec/dotdir/*
-spec/downloads/*
+spec/downloads/*
+spec/tmp

lib/sequenceserver/routes.rb

@@ -66,7 +66,7 @@ class Routes < Sinatra::Base
         secret: ENV.fetch('SESSION_SECRET') { SecureRandom.alphanumeric(64) }
       )
 
-      use Rack::Csrf, raise: true, skip: ['POST:/cloud_share']
+      use Rack::Csrf, raise: true, skip: ['POST:/cloud_share'] unless ENV['SKIP_CSRF_PROTECTION'] == 'true'
     end
 
     unless ENV['SEQUENCE_SERVER_COMPRESS_RESPONSES'] == 'false'

public/css/app.css

@@ -25,7 +25,7 @@ svg .axis path,
 }
 
 .grapher.circos .caption {
-  @apply text-base font-bold p-0;
+  @apply text-base p-0;
 }
 
 .alignment-overview.svg-container {

public/js/report.js

@@ -1,12 +1,12 @@
 import './jquery_world'; // for custom $.tooltip function
 import React, { Component } from 'react';
-import _ from 'underscore';
 
 import Sidebar from './sidebar';
-import Hits from './hits';
-import Circos from './circos';
 import AlignmentExporter from './alignment_exporter';
 import ReportPlugins from 'report_plugins';
+import RunSummary from './report/run_summary';
+import GraphicalOverview from './report/graphical_overview';
+import AlignmentResults from './report/alignment_results';
 
 /**
  * Renders entire report.
@@ -191,14 +191,23 @@ class Report extends Component {
                     />
                 </div>
                 <div className="col-span-1 md:col-span-3">
-                    {this.overviewJSX()}
-                    {this.circosJSX()}
-                    {this.plugins.generateStats(this.state.queries)}
-                    {this.state.results}
-                    <Hits
+                    <RunSummary
+                        seqserv_version={this.state.seqserv_version}
+                        program_version={this.state.program_version}
+                        submitted_at={this.state.submitted_at}
+                        querydb={this.state.querydb}
+                        stats={this.state.stats}
+                        params={this.state.params}
+                    />
+                    <GraphicalOverview
+                        queries={this.state.queries}
+                        prorgam={this.state.program}
+                        plugins={this.plugins}
+                    />
+                    <AlignmentResults
                         state={this.state}
-                        componentFinishedUpdating={(_) => this.componentFinishedUpdating(_)}
                         populate_hsp_array={this.populate_hsp_array.bind(this)}
+                        componentFinishedUpdating={(_) => this.componentFinishedUpdating(_)}
                         plugins={this.plugins}
                         {...this.props}
                     />
@@ -239,57 +248,6 @@ class Report extends Component {
             </div>
         );
     }
-    /**
-   * Renders report overview.
-   */
-    overviewJSX() {
-        return (
-            <div className="overview mr-0 mb-0">
-                <p className="m-0 text-sm">
-                    <strong>SequenceServer {this.state.seqserv_version}</strong> using{' '}
-                    <strong>{this.state.program_version}</strong>
-                    {this.state.submitted_at &&
-            `, query submitted on ${this.state.submitted_at}`}
-                </p>
-                <p className="m-0 text-sm">
-                    <strong> Databases: </strong>
-                    {this.state.querydb
-                        .map((db) => {
-                            return db.title;
-                        })
-                        .join(', ')}{' '}
-          ({this.state.stats.nsequences} sequences,&nbsp;
-                    {this.state.stats.ncharacters} characters)
-                </p>
-                <p className="m-0 text-sm">
-                    <strong>Parameters: </strong>{' '}
-                    {_.map(this.state.params, function (val, key) {
-                        return key + ' ' + val;
-                    }).join(', ')}
-                </p>
-                <p className="m-0 text-sm">
-          Please cite:{' '}
-                    <a href="https://doi.org/10.1093/molbev/msz185" className="text-seqblue hover:text-seqorange">
-            https://doi.org/10.1093/molbev/msz185
-                    </a>
-                </p>
-            </div>
-        );
-    }
-
-    /**
-   * Return JSX for circos if we have at least one hit.
-   */
-    circosJSX() {
-        return this.atLeastTwoHits() ? (
-            <Circos
-                queries={this.state.queries}
-                program={this.state.program}
-            />
-        ) : (
-            <span></span>
-        );
-    }
 
     // Controller //
 
@@ -318,18 +276,6 @@ class Report extends Component {
         return this.state.queries.some((query) => query.hits.length > 0);
     }
 
-    /**
-   * Does the report have at least two hits? This is used to determine
-   * whether Circos should be enabled or not.
-   */
-    atLeastTwoHits() {
-        var hit_num = 0;
-        return this.state.queries.some((query) => {
-            hit_num += query.hits.length;
-            return hit_num > 1;
-        });
-    }
-
     /**
    * Returns true if index should be shown in the sidebar. Index is shown
    * only for 2 and 8 queries.

public/js/report/alignment_results.js

@@ -0,0 +1,18 @@
+import ReportHeader from './report_header';
+import Hits from '../hits';
+
+const AlignmentResults = (props) => {
+    const renderContent = () => (
+        <div>
+            {props.state.results}
+            <Hits
+                {...props}
+                componentFinishedUpdating={(_) => props.componentFinishedUpdating(_)}
+            />
+        </div>
+    );
+
+    return <ReportHeader name="Alignment Results" renderContent={renderContent} />;
+};
+
+export default AlignmentResults;

public/js/report/graphical_overview.js

@@ -0,0 +1,33 @@
+import Circos from '../circos';
+import ReportHeader from './report_header';
+
+const GraphicalOverview = ({queries, program, plugins}) => {
+    /**
+    * Does the report have at least two hits? This is used to determine
+    * whether Circos should be enabled or not.
+    */
+    const atLeastTwoHits = () => {
+        let hitNum = 0;
+        return queries.some((query) => {
+            hitNum += query.hits.length;
+            return hitNum > 1;
+        });
+    }
+
+    const renderContent = () => {
+        if(!atLeastTwoHits()) return null;
+
+        return (
+            <>
+                <Circos queries={queries} program={program} />
+                {plugins.generateStats(queries)}
+            </>
+        )
+    }
+
+    return (
+        <ReportHeader name="Graphical Overview" renderContent={renderContent} renderable={atLeastTwoHits()} />
+    )
+}
+
+export default GraphicalOverview;

public/js/report/report_header.js

@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+import CollapsePreferences from '../collapse_preferences';
+
+const ReportHeader = (props) => {
+    const [state, setState] = useState({ collapsed: null });
+    const [renderable, _setRenderable] = useState(props.renderable === undefined ? true : props.renderable);
+    const collapsePreferences = new CollapsePreferences({ name: props.name, state: { ...state }, setState: setState });
+
+    if (state.collapsed === null) setState({ collapsed: collapsePreferences.preferenceStoredAsCollapsed() });
+    if (!renderable) return null;
+
+    return (
+        <>
+            <h3 className="caption font-bold border-b-2 border-seqorange" onClick={() => collapsePreferences.toggleCollapse()}>
+                {collapsePreferences.renderCollapseIcon()}
+                <span> {props.name}</span>
+            </h3>
+            <div className='mx-1'>
+                {!state.collapsed && props.renderContent()}
+            </div>
+        </>
+    );
+};
+
+export default ReportHeader;

public/js/report/run_summary.js

@@ -0,0 +1,43 @@
+import ReportHeader from './report_header';
+import _ from 'underscore';
+
+const RunSummary = (props) => {
+    const renderContent = () => {
+        return (
+            <div className="overview mr-0 mb-0">
+                <p className="m-0 text-sm">
+                    <strong>SequenceServer {props.seqserv_version}</strong> using{' '}
+                    <strong>{props.program_version}</strong>
+                    {props.submitted_at &&
+                        `, query submitted on ${props.submitted_at}`}
+                </p>
+                <p className="m-0 text-sm">
+                    <strong> Databases: </strong>
+                    {props.querydb
+                        .map((db) => {
+                            return db.title;
+                        })
+                        .join(', ')}{' '}
+                    ({props.stats.nsequences} sequences,&nbsp;
+                    {props.stats.ncharacters} characters)
+                </p>
+                <p className="m-0 text-sm">
+                    <strong>Parameters: </strong>{' '}
+                    {_.map(props.params, function (val, key) {
+                        return key + ' ' + val;
+                    }).join(', ')}
+                </p>
+                <p className="m-0 text-sm">
+                    Please cite:{' '}
+                    <a href="https://doi.org/10.1093/molbev/msz185" className="text-seqblue hover:text-seqorange">
+                        https://doi.org/10.1093/molbev/msz185
+                    </a>
+                </p>
+            </div>
+        );
+    };
+
+    return <ReportHeader name="Run Summary" renderContent={renderContent} />;
+};
+
+export default RunSummary;

spec/spec_helper.rb

@@ -17,7 +17,7 @@
 
 Capybara.app = SequenceServer
 Capybara.server = :webrick
-Capybara.default_max_wait_time = 10
+Capybara.default_max_wait_time = 15
 
 chrome_options = Selenium::WebDriver::Chrome::Options.new
 chrome_options.add_preference('download.default_directory', DownloadHelpers::DOWNLOADS_DIR)
@@ -46,6 +46,11 @@
 Capybara.default_driver = ENV['BROWSER_DEBUG'] ? :chrome : :headless_chrome
 Capybara.javascript_driver = ENV['BROWSER_DEBUG'] ? :chrome : :headless_chrome
 
+Capybara::Screenshot.instance_variable_set :@capybara_root, File.join(__dir__, 'tmp')
+Capybara::Screenshot.register_driver :headless_chrome do |driver, path|
+  driver.browser.save_screenshot(path)
+end
+
 RSpec.configure do |config|
   # Explicitly enable should syntax of rspec.
   config.expect_with :rspec do |expectations|