Skip to content

Commit

Permalink
Add sort functionality (#64)
Browse files Browse the repository at this point in the history 
Co-authored-by: ythorat2 <[email protected]>
  • Loading branch information
@yashdeep97
yashdeep97 and ythorat2 authored Feb 3, 2024
1 parent 652d588 commit 6153525
Show file tree
Hide file tree
Showing 3 changed files with 168 additions and 20 deletions.
51 changes: 39 additions & 12 deletions src/app/components/chemscraper/results/results.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,11 @@ <h3>
<i class="pi pi-copy copy_and_paste_button" (click)="copyAndPasteURL()"></i>
</h3>
<!-- todo: change to output job summary data -->
<h5>Job summary goes here</h5>

<!-- <div class="details">
<div class="sequence_time">Submission Time: {{statusResponse?.created_at | date:'short' }}</div>
</div> -->
<div class="details">
<div *ngIf="statusResponse" class="sequence_time">Document Submitted: {{statusResponse.job_info}} | Submission Time: {{statusResponse.time_created | date:'short' }}</div>
</div>
</div>

<div class="spacer"></div>

<div class="buttons">
<!-- <button *ngIf="!contentLoaded" pButton label="Cancel" class="p-button-outlined p-button-secondary p-button-xs"></button> -->
<a pButton label="Run a new Request" icon="pi pi-plus" class="p-button-outlined p-button-sm"
Expand Down Expand Up @@ -66,18 +62,49 @@ <h3>
</div>
<div class="result-container">
<div class="column2">
<div class="marvin-filter-container">
<div class="p-inputgroup">
<textarea pInputTextarea class="form-control" [(ngModel)]="marvinJsSmiles" placeholder="Filter results by SMILES..."></textarea>
<button pButton class="p-button-secondary p-button-link p-button-outlined" icon="pi pi-pencil" (click)="openMarvinjsEditor($event)">{{ marvinJsSmiles ? 'Edit' : 'Draw' }} Structure</button>
<div class="table-controls">
<div class="marvin-filter-container">
<div class="p-inputgroup">
<textarea pInputTextarea class="form-control" [(ngModel)]="marvinJsSmiles" [rows]="1" placeholder="Filter results by SMILES..."></textarea>
<button pButton class="p-button-secondary p-button-link p-button-outlined" icon="pi pi-pencil" (click)="openMarvinjsEditor($event)"> {{ marvinJsSmiles ? 'Edit' : 'Draw' }} Structure</button>
</div>
</div>
<div>
<p-button styleClass="p-button-outlined ui-button-success"><i class="p-button-icon-left pi pi-file-edit"></i></p-button>
</div>
<div>
<p-button styleClass="p-button-outlined ui-button-success" (click)="sortOverlay.toggle($event)"><i class="p-button-icon-left pi pi-sort-alt"></i>{{selectedSortOption}}</p-button>

<p-overlayPanel #sortOverlay>
<div class="table-controls-overlay">
<p class="table-controls-overlay-heading">Sort by<p>
<p-dropdown [options]="sortOptions" [(ngModel)]="selectedSortOption" (onChange)="onSortChange($event)" placeholder="Select"></p-dropdown>
<p-button *ngIf="isAscending" icon="pi pi-sort-amount-up-alt" (click)="toggleSort()"></p-button>
<p-button *ngIf="!isAscending" icon="pi pi-sort-amount-down" (click)="toggleSort()"></p-button>
</div>
</p-overlayPanel>

</div>
<div>
<p-button styleClass="p-button-outlined ui-button-success" (click)="filterOverlay.toggle($event)"><i class="p-button-icon-left pi pi-filter"></i></p-button>

<p-overlayPanel #filterOverlay>
<div class="table-controls-overlay">
<p class="table-controls-overlay-heading">Molecule Status<p>
<p-dropdown [options]="moleculeStatusFilterOptions" [(ngModel)]="selectedMoleculeStatusFilterOption" (onChange)="onFilterChange($event)" placeholder="Select"></p-dropdown>
</div>
<div class="table-controls-overlay">
<p class="table-controls-overlay-heading">Flagged<p>
<p-dropdown [options]="flaggedFilterOptions" [(ngModel)]="selectedFlaggedFilterOption" (onChange)="onFilterChange($event)" placeholder="Select"></p-dropdown>
</div>
</p-overlayPanel>
</div>
</div>

<div class="sort-row">
<div class="sort-text">
Showing {{filterBySmiles(molecules, marvinJsSmiles).length}} / {{molecules.length}} identified molecules
</div>
<!-- <button pButton type="button" class="sort-button p-button-text" (click)="sortResults()"> Sort by <i class="p-button-icon-right pi pi-chevron-down"></i></button> -->
</div>
<div class="table-container">
<p-table #resultsTable [value]="filterBySmiles(molecules, marvinJsSmiles)" dataKey="id" selectionMode="single" [(selection)]="selectedMolecule" (onRowSelect)="onRowSelected($event)" (onRowUnselect)="onRowUnselected($event)" [paginator]="true" [rows]="10" [rowsPerPageOptions]="[5, 10, 25]" [scrollable]="true" scrollHeight="700px" styleClass="molecule_table" [(first)]="firstRowIndex">
Expand Down
18 changes: 18 additions & 0 deletions src/app/components/chemscraper/results/results.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -627,12 +627,21 @@ p-panel {
padding: 2px;
}

.table-controls{
margin: 12px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}

.marvin-filter-container{
padding: 5px;
border: #CED4DA;
border-style: solid;
border-width: 1px;
border-radius: 6px;
flex: 1;

.p-inputgroup{
textarea{
Expand All @@ -645,3 +654,12 @@ p-panel {
}
}
}

.table-controls-overlay{
padding: 12px;
}

.table-controls-overlay-heading{
font-weight: 700;
margin-bottom: 12px;
}
119 changes: 111 additions & 8 deletions src/app/components/chemscraper/results/results.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,13 @@ import { finalize, startWith, switchMap, takeWhile } from "rxjs/operators";
import { Router } from '@angular/router';
import { MenuItem, Message } from 'primeng/api';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { PredictionRow, PollingResponseResult, PollingResponseStatus, SingleSeqResult, SeqResult, HighlightBox, Molecule } from '../../../models';
import { PredictionRow, PollingResponseResult, PollingResponseStatus, SingleSeqResult, SeqResult, HighlightBox, Molecule, Job } from '../../../models';
import { ChemScraperService } from 'src/app/chemscraper.service';
import { PdfViewerComponent } from '../pdf-viewer/pdf-viewer.component';
import { Table } from 'primeng/table';
import { PdfViewerDialogServiceComponent } from '../pdf-viewer-dialog-service/pdf-viewer-dialog-service.component';
import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
import { OverlayPanel } from 'primeng/overlaypanel';

@Component({
selector: 'app-results',
Expand All @@ -36,7 +37,7 @@ export class ResultsComponent {
failedJob: boolean = false;
jobID: string | undefined;
downloadRows: string[][] = [['Identifier', 'Predicted EC Number']];
statusResponse: PollingResponseStatus;
statusResponse: Job;
useExample: boolean = false;
preComputedMessage: Message[];
jobFailedMessage: Message[];
Expand All @@ -61,8 +62,17 @@ export class ResultsComponent {

pages_count: number = 0;
ref: DynamicDialogRef;
sortOptions: any[];
moleculeStatusFilterOptions: any[];
flaggedFilterOptions: any[];
selectedSortOption: any;
selectedMoleculeStatusFilterOption: any;
selectedFlaggedFilterOption: any;
similaritySortSMILE: string = "";
isAscending: boolean = true;

@ViewChild('resultsTable') resultsTable: Table;
@ViewChild('sortOverlay') sortOverlay: OverlayPanel;

constructor(
private router: Router,
Expand All @@ -71,7 +81,24 @@ export class ResultsComponent {
private _chemScraperService: ChemScraperService,
private sanitizer: DomSanitizer,
private dialogService: DialogService
) { }
) {
this.sortOptions = [
{ label: 'Location In PDF (default)', value: 'Location In PDF', disabled: false },
{ label: 'Molecular Weight', value: 'Molecular Weight', disabled: false },
{ label: 'Occurrences', value: 'Occurrences', disabled: false },
{ label: 'Similarity', value: 'Similarity', disabled: true }
];
this.moleculeStatusFilterOptions = [
{ label: 'All molecules found', value: 'all' },
{ label: 'Has converted CDXML structure', value: 'hasCDXML' },
{ label: 'No converted CDXML structure', value: 'noCDXML' }
];
this.flaggedFilterOptions = [
{ label: 'All', value: 'all' },
{ label: 'No', value: 'no' },
{ label: 'Yes', value: 'yes' }
];
}

@ViewChild(PdfViewerComponent) pdfViewerComponent: PdfViewerComponent;

Expand Down Expand Up @@ -106,6 +133,9 @@ export class ResultsComponent {

// Temp file read function
// this.process_example_file();
this.selectedSortOption = "Location In PDF";
this.selectedMoleculeStatusFilterOption = "all";
this.selectedFlaggedFilterOption = "all";

this.getResult();

Expand Down Expand Up @@ -154,10 +184,6 @@ export class ResultsComponent {
this.filterPanelVisible = true;
}

sortResults(){

}

selectRow(event: Event){
// event.stopPropagation();
}
Expand Down Expand Up @@ -204,6 +230,9 @@ export class ResultsComponent {
takeWhile(() => this.pollForResult)
).subscribe(
(jobStatus) => {
this.statusResponse = jobStatus;
console.log(jobStatus);

if (jobStatus.phase == "completed") {
this.updateStatusStage(1);
this.pollForResult = false;
Expand Down Expand Up @@ -362,13 +391,18 @@ export class ResultsComponent {
}

similaritySort(smile: string){
this.similaritySortSMILE = smile;
this.updateSimilaritySortDisabledState();
if(this.jobID)
this._chemScraperService.getSimilaritySortedOrder(this.jobID, smile).subscribe(
(response) => {
this.molecules.sort((data1: Molecule, data2: Molecule) => {
const indexA = response.indexOf(data1.id);
const indexB = response.indexOf(data2.id);
return indexA - indexB;
if(this.isAscending){
return indexA - indexB;
}
return indexB - indexA;
});
this.goToRow(0);
}
Expand All @@ -380,6 +414,75 @@ export class ResultsComponent {
this.showMarvinJsEditor = false;
}

toggleSort() {
console.log(this.isAscending);

this.isAscending = !this.isAscending;
this.sortData(this.selectedSortOption);
}

onSortChange(event: any) {
this.sortData(event.value);
// this.sortOverlay.hide();
}

onFilterChange(event: any) {
console.log(this.selectedMoleculeStatusFilterOption);
console.log(this.selectedFlaggedFilterOption);

}

sortData(value: string){
if(value == "Location In PDF"){
this.molecules.sort((data1: Molecule, data2: Molecule) => {
if(this.isAscending){
return data1.id - data2.id;
}
return data2.id - data1.id;
});
} else if (value == "Molecular Weight") {
this.molecules.sort((data1: Molecule, data2: Molecule) => {
if(!data2.molecularWeight || data2.molecularWeight == 'Unavailable'){
return -1;
}
if(!data1.molecularWeight || data1.molecularWeight == 'Unavailable'){
return 1;
}
const weight1 = parseFloat(data1.molecularWeight);
const weight2 = parseFloat(data2.molecularWeight);
if (isNaN(weight2)){
return -1;
}
if(isNaN(weight1)){
return 1;
}
if(this.isAscending){
return weight1 - weight2;
}
return weight2 - weight1;
});

} else if (value == "Occurrences") {
this.molecules.sort((data1: Molecule, data2: Molecule) => {
if(this.isAscending){
return data1.OtherInstances.length - data2.OtherInstances.length;
}
return data2.OtherInstances.length - data1.OtherInstances.length;
});
} else if (value == "Similarity") {
this.similaritySort(this.similaritySortSMILE);
}
}

updateSimilaritySortDisabledState(){
this.sortOptions = this.sortOptions.map(sortOption => {
if (sortOption.value === 'Similarity') {
return { ...sortOption, label: "Similarity: " + this.similaritySortSMILE, disabled: this.similaritySortSMILE == "" };
}
return sortOption;
});
}

}


0 comments on commit 6153525

Please sign in to comment.