From 4818868a1719a00183f755caae1a2f3b4f1b9c4d Mon Sep 17 00:00:00 2001 From: NikoAnderson Date: Wed, 18 Sep 2024 14:51:45 -0400 Subject: [PATCH 1/2] jsdraw disable fix --- src/app/core/config/config.model.ts | 2 +- .../structure-editor.component.ts | 51 ++++++++++--------- .../structure-details.component.html | 8 +-- .../structure-details.component.scss | 5 +- .../structure-details.component.ts | 3 +- ...bstance-form-structure-card.component.html | 1 + .../substance-form.component.ts | 9 ++-- 7 files changed, 45 insertions(+), 34 deletions(-) diff --git a/src/app/core/config/config.model.ts b/src/app/core/config/config.model.ts index 397416cd1..9952701b6 100644 --- a/src/app/core/config/config.model.ts +++ b/src/app/core/config/config.model.ts @@ -78,7 +78,7 @@ export interface Config { structureEditor?: 'ketcher' | 'jsdraw'; nameFormPageSizeOptions?: Array; nameFormPageSizeDefault?: number; - jsdrawLicense?: boolean; + disableJSDraw?: boolean; disableKetcher?: boolean; useApprovalAPI?: boolean; dummyWhoami?: Auth; diff --git a/src/app/core/structure-editor/structure-editor.component.ts b/src/app/core/structure-editor/structure-editor.component.ts index b13852980..4e2885083 100644 --- a/src/app/core/structure-editor/structure-editor.component.ts +++ b/src/app/core/structure-editor/structure-editor.component.ts @@ -51,6 +51,7 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro tempClass = ""; enableJSDraw = true; enableKetcher = true; + ketcherWindowActive = false; private overlayContainer: HTMLElement; @ViewChild('structure_canvas', { static: false }) myCanvas: ElementRef; @@ -121,9 +122,15 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro var elmR=document.getElementById("root"); if(this.structureEditor==="ketcher"){ if( elmR && elmR.querySelector(":focus-within")){ - this.getSketcher().activated=true; + this.ketcherWindowActive = true; + if(this.enableJSDraw) { + this.getSketcher().activated=true; + } }else{ - this.getSketcher().activated=false; + this.ketcherWindowActive = false; + if(this.enableJSDraw) { + this.getSketcher().activated=false; + } } } } @@ -135,7 +142,7 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro // override JSDraw for Molvec paste event. Using the JSDraw menu copy function seems to ignore this at first checkPaste = (event: ClipboardEvent ) => { - if ((this.jsdraw || this.ketcher )&& this.getSketcher().activated) { + if ((this.jsdraw || this.ketcher )&& (this.ketcherWindowActive || (this.enableJSDraw && this.getSketcher().activated))) { event.preventDefault(); event.stopPropagation(); event.stopImmediatePropagation(); @@ -154,20 +161,14 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro } ngOnInit() { - // window.addEventListener('keyup',this.listener); window.addEventListener('click',this.listener); this.overlayContainer = this.overlayContainerService.getContainerElement(); - - if (isPlatformBrowser(this.platformId)) { - - window.addEventListener('dragover', this.preventDrag); window.addEventListener('drop', this.preventDrag); window.addEventListener('paste', this.checkPaste); - this.structureEditor = environment.structureEditor; let pref = sessionStorage.getItem('gsrsStructureEditor'); if (pref && this.enableJSDraw) { @@ -176,13 +177,21 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro } else if (pref === 'jsdraw') { this.structureEditor = 'jsdraw'; } + } else if (!this.enableJSDraw) { + this.structureEditor = 'ketcher'; } - if (this.configService && this.configService.configData && this.configService.configData.jsdrawLicense ) { - this.enableJSDraw = this.configService.configData.jsdrawLicense; - if (!this.enableJSDraw) { + if (this.configService && this.configService.configData && this.configService.configData.disableJSDraw ) { + this.enableJSDraw = false; this.structureEditor = 'ketcher'; - } + if (this.firstload && this.structureEditor === 'ketcher' ) { + document.getElementById("root").style.display=""; + this.waitForKetcherFirstLoad(); + this.firstload = false; + + } else if (this.firstload) { + this.firstload = false; + } } else if (this.configService && this.configService.configData && this.configService.configData.disableKetcher ) { this.enableKetcher = !this.configService.configData.disableKetcher; @@ -193,7 +202,7 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro this.editorSwitched.emit(this.structureEditor); - if ( !window['JSDraw']) { + if ( !window['JSDraw'] && this.enableJSDraw) { // this is extremely hacky but no way around it @@ -227,11 +236,6 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro document.getElementsByTagName('head')[0].appendChild(node); } - const node = document.createElement('link'); - node.href = `${environment.baseHref || ''}assets/ketcherOld/ketcher.css`; - node.rel="stylesheet"; - // document.getElementsByTagName('head')[0].appendChild(node); - const node2 = document.createElement('link'); node2.href = `${environment.baseHref || ''}assets/ketcher/static/css/main.3fc9c0f8.css`; node2.rel="stylesheet"; @@ -240,15 +244,16 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro } ketcherOnLoad(ketcher: any): void { - // this.ketcher = ketcher; - // this.ketcherLoaded = true; + // now unused due to async issues with jsdraw } getSketcher(){ var skt; + if(window['JSDraw2']){ for(var k in window['JSDraw2'].Editor._allitems){ skt= window['JSDraw2'].Editor._allitems[k]; } + } return skt; } @@ -339,7 +344,7 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro });*/ - + if (this.enableJSDraw){ this.ketcher.editor.event.change.handlers.push({f:(c)=>{ this.ketcher.getMolfile().then(result => { let mfile = [null]; @@ -348,7 +353,7 @@ export class StructureEditorComponent implements OnInit, AfterViewInit, OnDestro }) } }); - + } }, 150); }); diff --git a/src/app/core/substance-details/structure-details/structure-details.component.html b/src/app/core/substance-details/structure-details/structure-details.component.html index 6b2230b03..24f936796 100644 --- a/src/app/core/substance-details/structure-details/structure-details.component.html +++ b/src/app/core/substance-details/structure-details/structure-details.component.html @@ -71,8 +71,8 @@ - - + +
@@ -111,8 +111,8 @@

Systematic Names:

- - + +
\ No newline at end of file diff --git a/src/app/core/substance-details/structure-details/structure-details.component.scss b/src/app/core/substance-details/structure-details/structure-details.component.scss index e93b598e6..0171ac113 100644 --- a/src/app/core/substance-details/structure-details/structure-details.component.scss +++ b/src/app/core/substance-details/structure-details/structure-details.component.scss @@ -14,8 +14,9 @@ } .structure-img-big { - width: 100%; - height: 500px !important; + width: auto; + height: auto!important; + margin: auto; } diff --git a/src/app/core/substance-details/structure-details/structure-details.component.ts b/src/app/core/substance-details/structure-details/structure-details.component.ts index 1b3f12d77..ce545d74b 100644 --- a/src/app/core/substance-details/structure-details/structure-details.component.ts +++ b/src/app/core/substance-details/structure-details/structure-details.component.ts @@ -94,7 +94,8 @@ export class StructureDetailsComponent extends SubstanceCardBase implements OnIn openModal(templateRef) { const dialogRef = this.dialog.open(templateRef, { - width: '650px', + width: '85%', + height: '85%', panelClass: 'structure-image-panel', }); this.overlayContainer.style.zIndex = '1002'; diff --git a/src/app/core/substance-form/structure/substance-form-structure-card.component.html b/src/app/core/substance-form/structure/substance-form-structure-card.component.html index c7dd66d71..2ba892a9a 100644 --- a/src/app/core/substance-form/structure/substance-form-structure-card.component.html +++ b/src/app/core/substance-form/structure/substance-form-structure-card.component.html @@ -2,6 +2,7 @@

Draw or import a structure using Ketcher. Then, if any features are detected a table will be automatically displayed under the editor.

+
diff --git a/src/app/core/substance-form/substance-form.component.ts b/src/app/core/substance-form/substance-form.component.ts index a48691879..232d8bc14 100644 --- a/src/app/core/substance-form/substance-form.component.ts +++ b/src/app/core/substance-form/substance-form.component.ts @@ -550,8 +550,9 @@ export class SubstanceFormComponent implements OnInit, AfterViewInit, OnDestroy this.loadingService.setLoading(false); this.UNII = this.substanceFormService.getUNII(); }, 5); - - this.updateHiddenFormSections() + if (!this.featuresOnly){ + this.updateHiddenFormSections(); + } }); }); // this.loadingService.setLoading(false); @@ -847,7 +848,9 @@ export class SubstanceFormComponent implements OnInit, AfterViewInit, OnDestroy }); this.formSections[index].dynamicComponentRef.changeDetectorRef.detectChanges(); - this.updateHiddenFormSections() + if (!this.featuresOnly){ + this.updateHiddenFormSections(); + } }); }); From d93c6b7e18f01eb27b984edd21b8edfee3b720a7 Mon Sep 17 00:00:00 2001 From: NikoAnderson Date: Mon, 23 Sep 2024 12:16:30 -0400 Subject: [PATCH 2/2] styling changes, feature structure transfer --- .../substance-form-structure-card.component.html | 2 +- .../substance-form-structure-card.component.scss | 7 +++++++ .../substance-form-structure-card.component.ts | 13 +++++++++++++ 3 files changed, 21 insertions(+), 1 deletion(-) diff --git a/src/app/core/substance-form/structure/substance-form-structure-card.component.html b/src/app/core/substance-form/structure/substance-form-structure-card.component.html index 2ba892a9a..b71eb3703 100644 --- a/src/app/core/substance-form/structure/substance-form-structure-card.component.html +++ b/src/app/core/substance-form/structure/substance-form-structure-card.component.html @@ -2,7 +2,7 @@

Draw or import a structure using Ketcher. Then, if any features are detected a table will be automatically displayed under the editor.

- +
diff --git a/src/app/core/substance-form/structure/substance-form-structure-card.component.scss b/src/app/core/substance-form/structure/substance-form-structure-card.component.scss index aedac636e..735d4eacd 100644 --- a/src/app/core/substance-form/structure/substance-form-structure-card.component.scss +++ b/src/app/core/substance-form/structure/substance-form-structure-card.component.scss @@ -20,6 +20,13 @@ margin-top: -50px; } + +.registration-button { + margin-top: -10px; + margin-left: 25px; + float: right; +} + .button-row { display: flex; justify-content: space-between; diff --git a/src/app/core/substance-form/structure/substance-form-structure-card.component.ts b/src/app/core/substance-form/structure/substance-form-structure-card.component.ts index dc7225643..5bcf7313e 100644 --- a/src/app/core/substance-form/structure/substance-form-structure-card.component.ts +++ b/src/app/core/substance-form/structure/substance-form-structure-card.component.ts @@ -367,6 +367,19 @@ export class SubstanceFormStructureCardComponent extends SubstanceFormBase imple }, () => { }); } + loadForm():void { + this.structureEditor.getSmiles().pipe(take(1)).subscribe(smiles => { + + const navigationExtras: NavigationExtras = { + queryParams: { + importStructure: encodeURIComponent(smiles) + } + }; + this.router.navigate(['/substances/register/chemical'], navigationExtras); + }); + + } + openStructureImageModal(): void { const dialogRef = this.dialog.open(StructureImageModalComponent, {