Skip to content

Commit

Permalink
Merge pull request #523 from ncats/ketcher_bugfix
Browse files Browse the repository at this point in the history 
ketcher bugfixes
  • Loading branch information
@NikoAnderson
NikoAnderson authored Jul 9, 2024
2 parents 76072fe + e17d2f1 commit 1250261
Show file tree
Hide file tree
Showing 11 changed files with 85 additions and 47 deletions.
17 changes: 17 additions & 0 deletions projects/ketcher-wrapper/src/lib/ketcher-wrapper.component.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1,18 @@
<div id="root" style = "height:618px;clear:both;display:none" class = "ketcher-frame" #ketcherFrame></div>
<style>
button[title='3D Viewer'] {
display:none;
}
.LeftToolbar-module_group__0s41t.LeftToolbar-module_groupItem__OqQu0:has(button[data-testid='reaction-plus']) {
display: none;
}
.LeftToolbar-module_group__0s41t.LeftToolbar-module_groupItem__OqQu0:has(button[data-testid='shape-ellipse']) {
display: none;
}
div#root{
border: 0.001em solid white;
}
div#root:focus-within {
border: 0.001em solid blue !important;
}
</style>
6 changes: 3 additions & 3 deletions projects/ketcher-wrapper/src/lib/ketcher-wrapper.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@
border: none;
}

button[title='3D Viewer'] {
::ng-deep button[title='3D Viewer'] {
display:none;
}
.LeftToolbar-module_group__0s41t.LeftToolbar-module_groupItem__OqQu0:has(button[data-testid=\'reaction-plus\']) {
::ng-deep .LeftToolbar-module_group__0s41t.LeftToolbar-module_groupItem__OqQu0:has(button[data-testid=\'reaction-plus\']) {
display: none;
}
.LeftToolbar-module_group__0s41t.LeftToolbar-module_groupItem__OqQu0:has(button[data-testid=\'shape-ellipse\']) {
::ng-deep .LeftToolbar-module_group__0s41t.LeftToolbar-module_groupItem__OqQu0:has(button[data-testid=\'shape-ellipse\']) {
display: none;
}
div#root{
Expand Down
17 changes: 16 additions & 1 deletion src/app/core/assets/ketcher/static/css/main.3fc9c0f8.css
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions src/app/core/config/config.model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ export interface Config {
nameFormPageSizeOptions?: Array<number>;
nameFormPageSizeDefault?: number;
jsdrawLicense?: boolean;
disableKetcher?: boolean;
useApprovalAPI?: boolean;
}

Expand Down
33 changes: 7 additions & 26 deletions src/app/core/structure-editor/structure-editor-implementation.model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,27 +58,10 @@ export class EditorImplementation implements Editor {
return new Observable<any>(observer => {
if (this.ketcher && this.ketcher != null) {
from(this.ketcher.getMolfile()).pipe(take(1)).subscribe(result => {
console.log(result);
let mfile = result;
mfile = mfile.replace(/0.0000[ ]D[ ][ ][ ]/g, '0.0000 H ');
const chargeLine = this.getMCharge();

if (mfile.indexOf('M CHG') < 0) {
if (chargeLine !== null) {
const lines = mfile.split('\n');
for (let i = lines.length - 1; i >= 3; i--) {
if (lines[i] === 'M END') {
const old = lines[i];
lines[i] = chargeLine;
lines[i + 1] = old;
mfile = lines.join('\n');
break;
}
}
}

observer.next(mfile);
}

});


Expand Down Expand Up @@ -114,7 +97,6 @@ export class EditorImplementation implements Editor {
getSmiles(): Observable<string> {
if (this.ketcher != null) {
return from(this.ketcher.getSmiles()).pipe(switchMap(data => {
console.log(data);
return data;}));
} else if (this.jsdraw != null) {
return new Observable<string>(observer => {
Expand Down Expand Up @@ -180,21 +162,20 @@ export class EditorImplementation implements Editor {
});
};
} else if (this.ketcher != null) {
/* disabled - keeping ketcher changes processed in the editor component to prevent async structure issues when switching
this.ketcher.editor.subscribe('change', operations => {
console.log(operations)
if(!(operations.length == 1 && operations[0].operation == 'Load canvas')){
console.log('not a new load');
from(this.ketcher.getMolfile()).pipe(take(1)).subscribe(result => { console.log(result);
from(this.ketcher.getMolfile()).pipe(take(1)).subscribe(result => {
observer.next(result);
});
} else {
console.log(this.tempMol)
observer.next(this.tempMol);
this.getMolfile().pipe(take(1)).subscribe(result => {
observer.next(result);
});
// observer.next(this.tempMol);
}


});*/
});//*/

}
else {
Expand Down
4 changes: 2 additions & 2 deletions src/app/core/structure-editor/structure-editor.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div appDragDropPaste (dropHandler)="onDropHandler($event)" class="z-index" [ngClass]="tempClass">
<button mat-button color="primary" id = "toggle-edit" (click) = "toggleEditor()" *ngIf = "structureEditor === 'ketcher' && enableJSDraw">Toggle Editor to JSDraw</button>
<button mat-button color="primary" id = "toggle-edit" (click) = "toggleEditor()" *ngIf = "structureEditor === 'jsdraw' && enableJSDraw">Toggle Editor to Ketcher</button>
<button mat-button color="primary" id = "toggle-edit" (click) = "toggleEditor()" *ngIf = "structureEditor === 'ketcher' && enableJSDraw && enableKetcher">Toggle Editor to JSDraw</button>
<button mat-button color="primary" id = "toggle-edit" (click) = "toggleEditor()" *ngIf = "structureEditor === 'jsdraw' && enableJSDraw && enableKetcher">Toggle Editor to Ketcher</button>
<div style = "width: 100%">
<ncats-jsdraw-wrapper id = "jsdrawwrap" oncontextmenu="return false" (jsDrawOnLoad)="jsDrawOnLoad($event)" [hidden]="structureEditor === 'ketcher' && !firstload" style = "width:990px"></ncats-jsdraw-wrapper>
</div>
Expand Down
36 changes: 25 additions & 11 deletions src/app/core/structure-editor/structure-editor.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro
canvasMessage = '';
tempClass = "";
enableJSDraw = true;
enableKetcher = true;
private overlayContainer: HTMLElement;

@ViewChild('structure_canvas', { static: false }) myCanvas: ElementRef;
Expand Down Expand Up @@ -147,12 +148,7 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro
window.addEventListener('click',this.listener);
this.overlayContainer = this.overlayContainerService.getContainerElement();

if (this.configService && this.configService.configData && this.configService.configData.jsdrawLicense ) {
this.enableJSDraw = this.configService.configData.jsdrawLicense;
if (!this.enableJSDraw) {
this.structureEditor = 'ketcher';
}
}

if (isPlatformBrowser(this.platformId)) {


Expand All @@ -164,14 +160,27 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro

this.structureEditor = environment.structureEditor;
let pref = sessionStorage.getItem('gsrsStructureEditor');
console.log(pref);
if (pref && this.enableJSDraw) {
if (pref === 'ketcher') {
this.structureEditor = 'ketcher';
} else if (pref === 'jsdraw') {
this.structureEditor = 'jsdraw';
}
}

if (this.configService && this.configService.configData && this.configService.configData.jsdrawLicense ) {
this.enableJSDraw = this.configService.configData.jsdrawLicense;
if (!this.enableJSDraw) {
this.structureEditor = 'ketcher';
}
} else if (this.configService && this.configService.configData && this.configService.configData.disableKetcher ) {
this.enableKetcher = !this.configService.configData.disableKetcher;

if (!this.enableKetcher) {
this.structureEditor = 'jsdraw';
}
}

this.editorSwitched.emit(this.structureEditor);

if ( !window['JSDraw']) {
Expand Down Expand Up @@ -211,7 +220,7 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro
const node = document.createElement('link');
node.href = `${environment.baseHref || ''}assets/ketcherOld/ketcher.css`;
node.rel="stylesheet";
document.getElementsByTagName('head')[0].appendChild(node);
// document.getElementsByTagName('head')[0].appendChild(node);

const node2 = document.createElement('link');
node2.href = `${environment.baseHref || ''}assets/ketcher/static/css/main.3fc9c0f8.css`;
Expand All @@ -223,6 +232,12 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro
ketcherOnLoad(ketcher: any): void {
this.ketcher = ketcher;
this.ketcherLoaded = true;
this.ketcher.editor.event.change.handlers.push({f:(c)=>{
let mfile = [null];
mfile[0]=this.ketcher.getMolfile();
this.getSketcher().setFile(mfile[0], "mol");
}
});
}

getSketcher(){
Expand Down Expand Up @@ -258,6 +273,7 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro
}

this.editor.getMolfile().pipe(take(1)).subscribe(Response => {

this.structureEditor = 'ketcher';
this.editor = new EditorImplementation(this.ketcher);
this.structureService.interpretStructure(Response).subscribe(resp => {
Expand All @@ -282,7 +298,6 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro
this.editorSwitched.emit(this.structureEditor);

if (this.firstload && this.structureEditor === 'ketcher' ) {
console.log('loadking ketcher');
document.getElementById("root").style.display="";
this.waitForKetcherFirstLoad();
this.firstload = false;
Expand All @@ -298,8 +313,7 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro
setTimeout(() => {
this.ketcher = window['ketcher'];
this.ketcherLoaded = true;

console.log('ketcher loaded');
document.getElementById("root").style.display="";
this.editor = new EditorImplementation(this.ketcher);
this.editorOnLoad.emit(this.editor);
this.editorSwitched.emit(this.structureEditor);
Expand Down
2 changes: 1 addition & 1 deletion src/app/core/substance-form/structure/substance-form-structure-card.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div>
<div>
<div>
<app-structure-editor (loadedMolfile)="molvecUpdate($event)" (editorOnLoad)="editorOnLoad($event)" style="z-index: 9999">
<app-structure-editor (loadedMolfile)="molvecUpdate($event)" (editorOnLoad)="editorOnLoad($event)" (editorSwitched) = "changeEditor($event)" style="z-index: 9999">
</app-structure-editor>
</div>
<div [ngClass]="{'messages-container': true, collapsed: !userMessage, expanded: userMessage}">
Expand Down
11 changes: 8 additions & 3 deletions src/app/core/substance-form/structure/substance-form-structure-card.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,6 @@ export class SubstanceFormStructureCardComponent extends SubstanceFormBase imple
} else {
this.menuLabelUpdate.emit('Structure');
const structSubscription = this.substanceFormStructureService.substanceStructure.subscribe(structure => {

this.structure = structure;
this.loadStructure();
});
Expand Down Expand Up @@ -122,6 +121,12 @@ export class SubstanceFormStructureCardComponent extends SubstanceFormBase imple
this.isInitializing = false;
}

changeEditor(event: any) {
if (this.structure && this.structureEditor && this.structure.molfile) {
// this.loadStructure();
}
}

loadStructure(): void {
if (this.structure && this.structureEditor && this.structure.molfile) {
this.isInitializing = true;
Expand All @@ -131,7 +136,7 @@ export class SubstanceFormStructureCardComponent extends SubstanceFormBase imple
// imported structures from search results require a second structure refresh to display stereochemistry and other calculated fields
if ( this.activatedRoute && this.activatedRoute.snapshot.queryParams && this.activatedRoute.snapshot.queryParams['importStructure']) {
setTimeout(()=>{
this.updateStructureForm(this.structure.molfile), 2000
this.updateStructureForm(this.structure.molfile), 1000
});
}
this.isInitializing = false;
Expand All @@ -148,6 +153,7 @@ export class SubstanceFormStructureCardComponent extends SubstanceFormBase imple
this.structure.molfile = molfile;
this.structureService.interpretStructure(molfile).subscribe(response => {
this.processStructurePostResponse(response);
this.structure.molfile = molfile;
});
}
}
Expand All @@ -160,7 +166,6 @@ export class SubstanceFormStructureCardComponent extends SubstanceFormBase imple
if (this.substanceType === 'polymer' ||
this.structure['hash'] !== structurePostResponse.structure['hash'] ||
this.structure['charge'] !== structurePostResponse.structure['charge']) {

this.smiles = structurePostResponse.structure.smiles;
this.mol = structurePostResponse.structure.molfile;
// this is sometimes overly ambitious
Expand Down
4 changes: 4 additions & 0 deletions src/app/core/substance-form/substance-form.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -235,3 +235,7 @@ word-break: break-word;
color: var(--link-color);
height: 33px;
}

.mat-button, .mat-icon-button, .mat-stroked-button, .mat-flat-button {
min-width: auto;
}
1 change: 1 addition & 0 deletions src/app/core/substance-form/substance-form.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1215,6 +1215,7 @@ getDrafts() {
this.substanceFormService.bypassUpdateCheck();
if (response === 'continue') {
this.router.navigate(['/substances', this.id, 'edit']);
setTimeout(()=>{window.location.reload();},50);
} else if (response === 'browse') {
this.router.navigate(['/browse-substance']);
} else if (response === 'staging') {
Expand Down

0 comments on commit 1250261

Please sign in to comment.