Skip to content

Commit

Permalink
wrap list of databases if there are more than 200 characters
Browse files Browse the repository at this point in the history
  • Loading branch information
@Lazy-poet
Lazy-poet committed Jul 12, 2022
1 parent 4497343 commit c8d89be
Show file tree
Hide file tree
Showing 3 changed files with 81 additions and 73 deletions.
100 changes: 59 additions & 41 deletions public/js/report.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 */}
Expand All @@ -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).
Expand All @@ -104,6 +108,8 @@ class Report extends Component {
querydb: [],
params: [],
stats: [],
databasesList: '',
showMore: false
};
}
/**
Expand All @@ -116,23 +122,23 @@ class Report extends Component {
function poll() {
$.getJSON(location.pathname + '.json').complete(function (jqXHR) {
switch (jqXHR.status) {
case 202:
var interval;
if (intervals.length === 1) {
interval = intervals[0];
} else {
interval = intervals.shift();
}
setTimeout(poll, interval);
break;
case 200:
component.setStateFromJSON(jqXHR.responseJSON);
break;
case 404:
case 400:
case 500:
component.props.showErrorModal(jqXHR.responseJSON);
break;
case 202:
var interval;
if (intervals.length === 1) {
interval = intervals[0];
} else {
interval = intervals.shift();
}
setTimeout(poll, interval);
break;
case 200:
component.setStateFromJSON(jqXHR.responseJSON);
break;
case 404:
case 400:
case 500:
component.props.showErrorModal(jqXHR.responseJSON);
break;
}
});
}
Expand All @@ -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();
}
Expand All @@ -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.
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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.
*/
Expand All @@ -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>
Expand All @@ -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>
Expand Down
Loading

0 comments on commit c8d89be

Please sign in to comment.