Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix sidebar and FASTA ID wrapping #804

Merged
merged 4 commits into from
Oct 21, 2024
Merged

Fix sidebar and FASTA ID wrapping #804

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5040e66
Fix sidebar option selected, share results white spacing & fasta ids
3lviend Oct 3, 2024
7708c0f
Fix table hit wrapping & add scrollbar for mobile view
3lviend Oct 4, 2024
de7438a
Fix border highlight to stay still when selected
3lviend Oct 7, 2024
bfa7fda
Add grey boarder to selected hits when moused over
3lviend Oct 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions public/css/app.css
View file
Open in desktop
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
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion public/js/hit.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop

Large diffs are not rendered by default.

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

Large diffs are not rendered by default.

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

Large diffs are not rendered by default.

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

Large diffs are not rendered by default.