Skip to content

Commit

Permalink
Fix sidebar and FASTA ID wrapping (#804)
Browse files Browse the repository at this point in the history 
* Fix sidebar option selected, share results white spacing & fasta ids

* Fix table hit wrapping & add scrollbar for mobile view

* Fix border highlight to stay still when selected

* Add grey boarder to selected hits when moused over
  • Loading branch information
@3lviend
3lviend authored Oct 21, 2024
1 parent 14a8936 commit 481f570
Show file tree
Hide file tree
Showing 12 changed files with 49 additions and 60 deletions.
5 changes: 5 additions & 0 deletions public/css/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,11 @@ pre.indL {
@apply cursor-not-allowed pointer-events-none text-gray-400;
}

li:hover .download-fasta-of-selected:not(.disabled),
li:hover .download-alignment-of-selected:not(.disabled) {
@apply bg-gray-200 text-seqorange;
}

/* Text size */
.hit-text,
.pre-text,
Expand Down
2 changes: 1 addition & 1 deletion public/css/app.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion public/js/hit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -242,7 +242,7 @@ export default class extends Component {
}
render() {
return (
<div className="hit mt-1" id={this.domID()} data-hit-def={this.props.hit.id}
<div className="hit mt-1 border-l-2 border-transparent pl-1 -ml-1" id={this.domID()} data-hit-def={this.props.hit.id}
data-hit-len={this.props.hit.length} data-hit-evalue={this.props.hit.evalue}>
{this.headerJSX()} {this.contentJSX()}
</div>
Expand Down
26 changes: 17 additions & 9 deletions public/js/hits.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,7 @@ class Hits extends Component {
/* eslint complexity: ["error", 6] */
/* -----------------------------------
* Event-handler when hit is selected
* Adds glow to hit component.
* Adds border-seqorange to hit component.
* Updates number of Fasta that can be downloaded
*/
selectHit(id) {
Expand All @@ -210,27 +210,35 @@ class Hits extends Component {
// Highlight selected hit and enable 'Download FASTA/Alignment of
// selected' links.
if (checkbox.is(':checked')) {
$hit.addClass('glow');
$hit.next('.hsp').addClass('glow');
$hit.addClass('border-seqorange');
$hit.next('.hsp').addClass('border-seqorange');
$hit.removeClass('border-transparent');
$hit.next('.hsp').removeClass('border-transparent');
$('.download-fasta-of-selected').enable();
$('.download-alignment-of-selected').enable();
} else {
$hit.removeClass('glow');
$hit.next('.hsp').removeClass('glow');
$hit.removeClass('border-seqorange');
$hit.next('.hsp').removeClass('border-seqorange');
$hit.addClass('border-transparent');
$hit.next('.hsp').addClass('border-transparent');
$('.download-fasta-of-selected').attr('href', '#').removeAttr('download');
}

var $a = $('.download-fasta-of-selected');
var $b = $('.download-alignment-of-selected');

if (num_checked >= 1) {
$a.find('.text-bold').html(num_checked);
$b.find('.text-bold').html(num_checked);
$a.find('.font-bold').html(num_checked);
$b.find('.font-bold').html(num_checked);
$a.find('.font-bold').addClass('px-1').removeClass('px-0.5');
$b.find('.font-bold').addClass('px-1').removeClass('px-0.5');
}

if (num_checked == 0) {
$a.addClass('disabled').find('.text-bold').html('');
$b.addClass('disabled').find('.text-bold').html('');
$a.addClass('disabled').find('.font-bold').html('');
$b.addClass('disabled').find('.font-bold').html('');
$a.find('.font-bold').removeClass('px-1').addClass('px-0.5');
$b.find('.font-bold').removeClass('px-1').addClass('px-0.5');
}
}

Expand Down
2 changes: 1 addition & 1 deletion public/js/hsp.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export default class HSP extends React.Component {
render() {
return (
<div
className="hsp pt-px pb-5"
className="hsp pt-px pb-5 border-l-2 border-transparent pl-1 -ml-1"
id={this.domID()}
ref={this.hspRef}
data-parent-hit={this.hitDOM_ID()}
Expand Down
2 changes: 1 addition & 1 deletion public/js/jquery_world.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ global.$ = $;
.appendTo(this);
}
},
items: 'rect',
items: 'rect, .tooltip-item',
show: false,
hide: false,
content: function() {
Expand Down
52 changes: 14 additions & 38 deletions public/js/query.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -415,11 +415,11 @@ class HitsTable extends Component {
<tr className="text-neutral-500">
<th className="text-left font-normal">#</th>
<th style={{ width: `${seqwidth}%` }} className="text-left font-normal">Similar sequences</th>
{hasName && <th className="text-left font-normal w-1/6">Species</th>}
{!this.props.imported_xml && <th className="text-right font-normal w-1/6">Query coverage (%)</th>}
<th className="text-right font-normal w-1/10">Total score</th>
<th className="text-right font-normal w-1/10">E value</th>
<th className="text-right font-normal w-1/10">Identity (%)</th>
{hasName && <th className="text-left font-normal w-2/12">Species</th>}
{!this.props.imported_xml && <th className="text-right font-normal w-2/12">Query coverage (%)</th>}
<th className="text-right font-normal w-1/12">Total score</th>
<th className="text-right font-normal w-1/12">E value</th>
<th className="text-right font-normal w-1/12">Identity (%)</th>
</tr>
</thead>
<tbody>
Expand All @@ -428,43 +428,19 @@ class HitsTable extends Component {
return (
<tr key={hit.number}>
<td className="text-left">{hit.number + '.'}</td>
<td className="text-ellipsis">
<div className="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">
<a href={'#Query_' + this.props.query.number + '_hit_' + hit.number}
className="text-sm text-seqblue hover:text-seqorange cursor-pointer">{hit.id} {hit.title}</a>
</span>
<div className="absolute hidden bottom-5 items-center flex-col-reverse 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 -mt-1 -mr-px tooltip-arrow-rotate"></div>
<span className="relative z-10 p-2 hit-text leading-4 text-center text-white whitespace-no-wrap bg-black shadow-lg rounded-md">
{`${hit.id} ${hit.title}`}
</span>
</div>
</div>
</div>
<td>
<a href={'#Query_' + this.props.query.number + '_hit_' + hit.number}
className="text-sm text-seqblue hover:text-seqorange cursor-pointer pe-1 line-clamp-1 tooltip-item" title={`${hit.id} ${hit.title}`}>{hit.id} {hit.title}</a>
</td>
{hasName &&
<td className="text-ellipsis" data-placement="top">
<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">
{hit.sciname}
</span>
<div className="absolute hidden bottom-5 items-center flex-col-reverse 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 -mt-1 -mr-px tooltip-arrow-rotate"></div>
<span className="relative z-10 p-2 hit-text leading-4 text-center text-white whitespace-no-wrap bg-black shadow-lg rounded-md">
{hit.sciname}
</span>
</div>
</div>
</div>
<td className="pe-1 line-clamp-1 tooltip-item" title={hit.sciname}>
{hit.sciname}
</td>
}
{!this.props.imported_xml && <td className="text-right">{hit.qcovs}</td>}
<td className="text-right">{hit.total_score}</td>
<td className="text-right">{Utils.inExponential(hit.hsps[0].evalue)}</td>
<td className="text-right">{Utils.inPercentage(hit.hsps[0].identity, hit.hsps[0].length)}</td>
<td className="pe-1 text-right">{hit.total_score}</td>
<td className="pe-1 text-right">{Utils.inExponential(hit.hsps[0].evalue)}</td>
<td className="pe-1 text-right">{Utils.inPercentage(hit.hsps[0].identity, hit.hsps[0].length)}</td>
</tr>
);
}, this))
Expand All @@ -480,7 +456,7 @@ class HitsTable extends Component {
{this.collapsePreferences.renderCollapseIcon()}
<span> {this.name}</span>
</h4>
<div id={'Query_' + this.props.query.number + 'HT_' + this.props.query.number}>
<div id={'Query_' + this.props.query.number + 'HT_' + this.props.query.number} className="overflow-auto md:overflow-hidden">
{!this.state.collapsed && this.tableJSX()}
</div>
</div>
Expand Down
10 changes: 5 additions & 5 deletions public/js/sidebar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -298,9 +298,9 @@ export default class extends Component {
!(this.props.data.imported_xml || this.props.data.non_parse_seqids) && <li className="mb-1">
<a
href="#"
className="text-sm download-fasta-of-selected disabled py-0.5 px-0.5"
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>
}
Expand All @@ -310,8 +310,8 @@ export default class extends Component {
</a>
</li>
<li className="mb-1">
<a href="#" className="text-sm download-alignment-of-selected disabled py-0.5 px-0.5">
Alignment of <span className="text-bold"></span> selected hit(s)
<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>
{
Expand Down Expand Up @@ -425,7 +425,7 @@ export default class extends Component {
}
{!this.props.cloudSharingEnabled &&
<li className="hover:text-seqorange hover:bg-gray-200">
<a id="sendEmail" className="block text-sm text-seqblue email-URL cursor-pointer py-0.5 px-0.5"
<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">
<div className="relative flex gap-2 items-center group w-full">
Expand Down
2 changes: 1 addition & 1 deletion public/sequenceserver-report.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion public/sequenceserver-report.min.js.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion public/sequenceserver-search.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion public/sequenceserver-search.min.js.map
View file

Large diffs are not rendered by default.

0 comments on commit 481f570

Please sign in to comment.