Merge pull request #32 from moleculemaker/ythorat2/molconvert-svg-dis…

…play Resize and display SVGs generated by molconvert
moleculemaker · Oct 11, 2023 · 7de4051 · 7de4051
2 parents ea6f34d + 538e7ed
commit 7de4051
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 17 deletions.
diff --git a/src/app/components/chemscraper/results/results.component.html b/src/app/components/chemscraper/results/results.component.html
@@ -120,11 +120,9 @@ <h3>
                     </ng-template>
                     <ng-template pTemplate="body" let-molecule let-expanded="expanded">
                       <tr [pSelectableRow]="molecule" [pRowToggler]="molecule">
-                        <!-- <td ><p-tableCheckbox [value]="molecule" (click)="selectRow($event)"></p-tableCheckbox></td> -->
                         <td> <i [ngClass]="expanded ? 'pi pi-chevron-down p-button-icon-left' : 'pi pi-chevron-right p-button-icon-left'"></i> {{ molecule.name }}</td>
-                        <td [innerHTML]="molecule.structure"></td>
+                        <td class="svg-column" [innerHTML]="molecule.structure"></td>
                         <td>{{ molecule.SMILE }}</td>
-                        <!-- <td *ngIf="!splitView">{{ molecule.doc_no }}</td> -->
                         <td *ngIf="!splitView">{{ molecule.page_no }}</td>
                         <td *ngIf="!splitView">{{ molecule.PubChemCID }}</td>
                         <td *ngIf="!splitView">{{ molecule.confidence }}</td>
@@ -136,19 +134,6 @@ <h3>
                           <div class="result-molecules-details-container">
                             <p-panel>
                               <ng-template pTemplate="header">
-                                <!-- <div class="header-buttons-container">
-                                  <div class="tag-buttons">
-                                    <p-button label="View in context" icon="pi pi-file" styleClass="p-button-sm p-button-outlined p-button-secondary result-molecules-details-button"></p-button>
-                                    <p-button label="View similar structures" styleClass="p-button-sm p-button-outlined p-button-secondary result-molecules-details-button">
-                                      <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                        <path d="M11.001 8.5C11.6514 8.49981 12.2842 8.28822 12.8039 7.89712C13.3236 7.50601 13.7022 6.95659 13.8825 6.33163C14.0628 5.70668 14.0351 5.04005 13.8036 4.4322C13.5721 3.82435 13.1493 3.30821 12.5989 2.96156C12.0485 2.6149 11.4004 2.45652 10.7522 2.51026C10.104 2.56401 9.49076 2.82698 9.00499 3.25954C8.51922 3.69211 8.1872 4.27083 8.05896 4.90851C7.93071 5.54619 8.01319 6.20828 8.29397 6.795L5.95397 7.965C5.53976 7.66947 5.04523 7.50736 4.53644 7.50034C4.02766 7.49333 3.52884 7.64173 3.10663 7.92572C2.68443 8.20972 2.35893 8.61578 2.17362 9.08968C1.98832 9.56357 1.95203 10.0827 2.06961 10.5778C2.18719 11.0729 2.45303 11.5203 2.83163 11.8602C3.21022 12.2002 3.68354 12.4165 4.18836 12.4804C4.69318 12.5442 5.20545 12.4525 5.65675 12.2174C6.10804 11.9824 6.47687 11.6152 6.71397 11.165L9.00997 12.313C8.96453 12.7974 9.0972 13.2817 9.38315 13.6753C9.6691 14.0689 10.0887 14.3448 10.5634 14.4513C11.0381 14.5578 11.5354 14.4876 11.9621 14.2539C12.3888 14.0202 12.7156 13.6389 12.8814 13.1815C13.0473 12.7242 13.0407 12.222 12.863 11.7691C12.6852 11.3163 12.3485 10.9437 11.9159 10.7212C11.4832 10.4987 10.9843 10.4416 10.5125 10.5604C10.0408 10.6793 9.62853 10.9661 9.35297 11.367L6.99397 10.187C7.0332 9.6785 6.91521 9.17022 6.65597 8.731L8.87897 7.621C9.15727 7.90016 9.48802 8.12153 9.8522 8.27239C10.2164 8.42324 10.6068 8.5006 11.001 8.5ZM11.001 7.5C10.4705 7.5 9.96183 7.28929 9.58676 6.91422C9.21168 6.53914 9.00097 6.03044 9.00097 5.5C9.00097 4.96957 9.21168 4.46086 9.58676 4.08579C9.96183 3.71072 10.4705 3.5 11.001 3.5C11.5314 3.5 12.0401 3.71072 12.4152 4.08579C12.7903 4.46086 13.001 4.96957 13.001 5.5C13.001 6.03044 12.7903 6.53914 12.4152 6.91422C12.0401 7.28929 11.5314 7.5 11.001 7.5ZM4.50097 11.5C4.10315 11.5 3.72161 11.342 3.44031 11.0607C3.15901 10.7794 3.00097 10.3978 3.00097 10C3.00097 9.60218 3.15901 9.22065 3.44031 8.93934C3.72161 8.65804 4.10315 8.5 4.50097 8.5C4.89879 8.5 5.28033 8.65804 5.56163 8.93934C5.84294 9.22065 6.00097 9.60218 6.00097 10C6.00097 10.3978 5.84294 10.7794 5.56163 11.0607C5.28033 11.342 4.89879 11.5 4.50097 11.5ZM12.001 12.5C12.001 12.7652 11.8956 13.0196 11.7081 13.2071C11.5205 13.3946 11.2662 13.5 11.001 13.5C10.7358 13.5 10.4814 13.3946 10.2939 13.2071C10.1063 13.0196 10.001 12.7652 10.001 12.5C10.001 12.2348 10.1063 11.9804 10.2939 11.7929C10.4814 11.6054 10.7358 11.5 11.001 11.5C11.2662 11.5 11.5205 11.6054 11.7081 11.7929C11.8956 11.9804 12.001 12.2348 12.001 12.5Z" fill="#495057"/>
-                                      </svg>
-                                    </p-button>
-                                  </div>
-                                  <div class="flag-button">
-                                    <i class="pi pi-flag"></i>
-                                  </div>
-                                </div> -->
 
                               </ng-template>
                               <div class="molecule-details-container">

diff --git a/src/app/components/chemscraper/results/results.component.scss b/src/app/components/chemscraper/results/results.component.scss
@@ -454,6 +454,10 @@ p-panel {
   vertical-align: middle;
 }
 
+.svg-column{
+  width: 200px;
+}
+
 :host ::ng-deep .p-datatable-table .p-datatable-tbody > tr > td {
   overflow-wrap: anywhere;
 }

diff --git a/src/app/components/chemscraper/results/results.component.ts b/src/app/components/chemscraper/results/results.component.ts
@@ -169,10 +169,11 @@ export class ResultsComponent {
             this._chemScraperService.getResult(jobID).subscribe(
               (data) => {
                 data.forEach(molecule => {
-                  molecule.structure = this.sanitizer.bypassSecurityTrustHtml(molecule.structure.toString());
+                  molecule.structure = this.sanitizer.bypassSecurityTrustHtml(this.modifySvg(molecule.structure.toString()));
                 })
                 this.molecules = data;
                 this.pages_count = Math.max(...this.molecules.map(molecule => parseInt(molecule.page_no)))
+
                 this.updateStatusStage(2);
 
                 this.getHighlightBoxes(1);
@@ -267,4 +268,32 @@ export class ResultsComponent {
     });
   }
 
+  modifySvg(svgString: string): string {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(svgString, 'image/svg+xml');
+    const svgElem = doc.querySelector('svg');
+
+    if (svgElem) {
+      // Extract width and height values
+      const width = svgElem.getAttribute('width');
+      const height = svgElem.getAttribute('height');
+
+      // Remove width and height attributes
+      svgElem.removeAttribute('width');
+      svgElem.removeAttribute('height');
+
+      // Add viewBox attribute
+      if (width && height && !svgElem.getAttribute('viewBox')) {
+        svgElem.setAttribute('viewBox', `0 0 ${width} ${height}`);
+      }
+
+      // Convert modified SVG back to string
+      const serializer = new XMLSerializer();
+      return serializer.serializeToString(svgElem);
+    }
+
+    return svgString; // return original if modifications failed
+  }
+
+
 }