wrap list of databases if there are more than 200 characters

Author: Lazy-poet

public/js/report.js

@@ -59,7 +59,7 @@ class Page extends Component {
 
                 {/* Add a hidden span tag containing chars used in HSPs */}
                 <pre className="pre-reset hsp-lines" ref={this.hspChars} hidden>
-          ABCDEFGHIJKLMNOPQRSTUVWXYZ +-
+                    ABCDEFGHIJKLMNOPQRSTUVWXYZ +-
                 </pre>
 
                 {/* Required by Grapher for SVG and PNG download */}
@@ -85,6 +85,10 @@ class Report extends Component {
     constructor(props) {
         super(props);
         this.fetchResults();
+        this.getDatabaseListString = this.getDatabaseListString.bind(this);
+        this.toggleShowDatabases = this.toggleShowDatabases.bind(this);
+        this.renderToggleDatabasesList = this.renderToggleDatabasesList.bind(this);
+        this.maxDatabasesStringLength = 200;
 
         // Properties below are internal state used to render results in small
         // slices (see updateState).
@@ -104,6 +108,8 @@ class Report extends Component {
             querydb: [],
             params: [],
             stats: [],
+            databasesList: '',
+            showMore: false
         };
     }
     /**
@@ -153,8 +159,8 @@ class Report extends Component {
    * bound to the window, document, or body.
    */
     componentDidMount() {
-    // This sets up an event handler which enables users to select text from
-    // hit header without collapsing the hit.
+        // This sets up an event handler which enables users to select text from
+        // hit header without collapsing the hit.
         this.preventCollapseOnSelection();
         this.toggleTable();
     }
@@ -165,8 +171,11 @@ class Report extends Component {
    * and circos would have been rendered at this point. At this stage we kick
    * start iteratively adding 1 HSP to the page every 25 milli-seconds.
    */
-    componentDidUpdate() {
-    // Log to console how long the last update take?
+    componentDidUpdate(props, state) {
+        if (this.getDatabaseListString() !== this.getDatabaseListString(state.querydb)) {
+            this.setState({ databasesList: this.getDatabaseListString().substring(0, this.maxDatabasesStringLength) + '...' });
+        }
+        // Log to console how long the last update take?
         console.log((Date.now() - this.lastTimeStamp) / 1000);
 
         // Lock sidebar in its position on the first update.
@@ -242,11 +251,11 @@ class Report extends Component {
                         <HSP
                             key={
                                 'Query_' +
-                query.number +
-                '_Hit_' +
-                hit.number +
-                '_HSP_' +
-                hsp.number
+                                query.number +
+                                '_Hit_' +
+                                hit.number +
+                                '_HSP_' +
+                                hsp.number
                             }
                             query={query}
                             hit={hit}
@@ -305,12 +314,12 @@ class Report extends Component {
                     </h1>
                     <p>
                         <br />
-            This can take some time depending on the size of your query and
-            database(s). The page will update automatically when BLAST is done.
+                        This can take some time depending on the size of your query and
+                        database(s). The page will update automatically when BLAST is done.
                         <br />
                         <br />
-            You can bookmark the page and come back to it later or share the
-            link with someone.
+                        You can bookmark the page and come back to it later or share the
+                        link with someone.
                     </p>
                 </div>
             </div>
@@ -338,7 +347,20 @@ class Report extends Component {
             </div>
         );
     }
-
+    getDatabaseListString(querydb = this.state.querydb) {
+        return querydb
+            .map((db) => {
+                return db.title;
+            })
+            .join(', ');
+    }
+    toggleShowDatabases() {
+        const databases = this.state.showMore ? `${this.getDatabaseListString().substring(0, this.maxDatabasesStringLength)}...` : `${this.getDatabaseListString()}`;
+        this.setState({ databasesList: databases, showMore: !this.state.showMore });
+    }
+    renderToggleDatabasesList() {
+        return <span onClick={this.toggleShowDatabases}>{this.state.databasesList}<span style={{ cursor: 'pointer' }} className="btn-link hover-bold">&nbsp;&nbsp;{this.state.showMore ? 'Show Less' : 'Show More'}</span></span>;
+    }
     /**
    * Renders report overview.
    */
@@ -349,16 +371,12 @@ class Report extends Component {
                     <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}`}
+                        `, query submitted on ${this.state.submitted_at}`}
                 </p>
                 <p>
                     <strong> Databases: </strong>
-                    {this.state.querydb
-                        .map((db) => {
-                            return db.title;
-                        })
-                        .join(', ')}{' '}
-          ({this.state.stats.nsequences} sequences,&nbsp;
+                    {this.getDatabaseListString().length <= this.maxDatabasesStringLength ? this.getDatabaseListString() : this.renderToggleDatabasesList()}{' '}
+                    ({this.state.stats.nsequences} sequences,&nbsp;
                     {this.state.stats.ncharacters} characters)
                 </p>
                 <p>
@@ -368,9 +386,9 @@ class Report extends Component {
                     }).join(', ')}
                 </p>
                 <p>
-          Please cite:{' '}
+                    Please cite:{' '}
                     <a href="https://doi.org/10.1093/molbev/msz185">
-            https://doi.org/10.1093/molbev/msz185
+                        https://doi.org/10.1093/molbev/msz185
                     </a>
                 </p>
             </div>