@datagrok/sequence-translator 1.1.5 → 1.2.1

package/src/view/{tabs/axolabs.ts → apps/oligo-pattern.ts}

@@ -18,7 +18,7 @@ import $ from 'cash-dom';
 type BooleanInput = DG.InputBase<boolean | null>;
 type StringInput = DG.InputBase<string | null>;
 
-export class AxolabsTabUI {
+export class PatternLayoutHandler {
   get htmlDivElement() {
     function updateModification(strand: string) {
       modificationItems[strand].innerHTML = '';
@@ -79,11 +79,12 @@ export class AxolabsTabUI {
         updateInputExamples();
         updateOutputExamples();
       } else {
-        ui.dialog('Sequence length is out of range')
+        ui.dialog('Out of range')
           .add(ui.divText('Sequence length should be less than ' +
             MAX_SEQUENCE_LENGTH.toString() + ' due to UI constrains.'))
-          .add(ui.divText('Please change sequence length in order to define new pattern.'))
-          .show();
+          .onOK(()=> {Object.values(strandLengthInput).every((input)=> input.value = 34)})
+          .onCancel(()=> {Object.values(strandLengthInput).every((input)=> input.value = 34)})
+          .showModal(false);
       }
     }
 
@@ -294,7 +295,8 @@ export class AxolabsTabUI {
           loadPattern.root.append(patternListChoiceInput.input);
           loadPattern.root.append(loadPattern.input);
           // @ts-ignore
-          loadPattern.input.style.maxWidth = '100px';
+          loadPattern.input.style.maxWidth = '120px';
+          loadPattern.input.style.marginLeft = '12px';
           loadPattern.setTooltip('Apply Existing Pattern');
 
           loadPatternDiv.innerHTML = '';
@@ -315,6 +317,7 @@ export class AxolabsTabUI {
             ], 'ui-input-options'),
           );
         });
+        patternListChoiceInput.input.style.maxWidth = '142px';
         loadPattern.root.append(patternListChoiceInput.input);
         loadPattern.root.append(loadPattern.input);
         // @ts-ignore
@@ -400,6 +403,12 @@ export class AxolabsTabUI {
       updatePto(v);
       updateOutputExamples();
     });
+    fullyPto.captionLabel.classList.add('ui-label-right');
+    fullyPto.captionLabel.style.textAlign = 'left';
+    fullyPto.captionLabel.style.maxWidth = '100px';
+    fullyPto.captionLabel.style.maxWidth = '100px';
+    fullyPto.captionLabel.style.minWidth = '40px';
+    fullyPto.captionLabel.style.width = 'auto';
 
     const maxStrandLength = Object.fromEntries(STRANDS.map(
       (strand) => [strand, DEFAULT_SEQUENCE_LENGTH]
@@ -432,7 +441,7 @@ export class AxolabsTabUI {
     ));
     const inputExample = Object.fromEntries(STRANDS.map(
       (strand) => [strand, ui.textInput(
-        `${STRAND_NAME[strand]}`, generateExample(strandLengthInput[strand].value!, sequenceBase.value!))
+        ``, generateExample(strandLengthInput[strand].value!, sequenceBase.value!))
       ]));
 
     // todo: rename to strandColumnInput
@@ -442,12 +451,22 @@ export class AxolabsTabUI {
         strandVar[strand] = colName;
       });
       inputStrandColumnDiv[strand].append(input.root);
+      //input.addPostfix(``);
       return [strand, input];
     }));
 
     const firstPto = Object.fromEntries(STRANDS.map((strand) => {
       const input = ui.boolInput(`First ${strand} PTO`, fullyPto.value!, () => updateSvgScheme());
       input.setTooltip(`ps linkage before first nucleotide of ${STRAND_NAME[strand].toLowerCase()}`);
+
+      input.captionLabel.classList.add('ui-label-right');
+      input.captionLabel.style.textAlign = 'left';
+      input.captionLabel.style.maxWidth = '100px';
+      input.captionLabel.style.minWidth = '40px';
+      input.captionLabel.style.width = 'auto';
+      
+    
+
       return [strand, input];
     }));
 
@@ -464,14 +483,17 @@ export class AxolabsTabUI {
       }));
 
     const outputExample = Object.fromEntries(STRANDS.map((strand) => {
-      const input = ui.textInput(' ', translateSequence(
+      const input = ui.textInput('', translateSequence(
         inputExample[strand].value, baseInputsObject[strand], ptoLinkages[strand], terminalModification[strand][THREE_PRIME],terminalModification[strand][FIVE_PRIME], firstPto[strand].value!
       ));
+      input.input.style.minWidth = 'none';
+      input.input.style.flexGrow = '1';
+      $(input.root.lastChild).css('height', 'auto');
       return [strand, input];
     }));
 
     const modificationSection = Object.fromEntries(STRANDS.map((strand) => {
-      const panel = ui.panel([
+      const panel = ui.block([
         ui.h1(`${STRAND_NAME[strand]}`),
         ui.divH([
           ui.div([ui.divText('#')], {style: {width: '20px'}})!,
@@ -484,13 +506,15 @@ export class AxolabsTabUI {
     }));
 
     STRANDS.forEach((s) => {
+      
       inputExample[s].input.style.resize = 'none';
-      inputExample[s].input.style.minWidth = EXAMPLE_MIN_WIDTH;
+      //inputExample[s].input.style.minWidth = EXAMPLE_MIN_WIDTH;
       outputExample[s].input.style.resize = 'none';
-      outputExample[s].input.style.minWidth = EXAMPLE_MIN_WIDTH;
-      // todo: remove ts-ignore
-      // @ts-ignore
-      outputExample[s].input.disabled = 'true';
+      //outputExample[s].input.styl
+      inputExample[s].input.style.minWidth = 'none';
+      inputExample[s].input.style.flexGrow = '1';
+      outputExample[s].input.style.minWidth = 'none';
+      outputExample[s].input.style.flexGrow = '1';
       let options = ui.div([
         ui.button(ui.iconFA('copy', () => {}), () => {
           navigator.clipboard.writeText(outputExample[s].value).then(() =>
@@ -508,7 +532,7 @@ export class AxolabsTabUI {
     const asExampleDiv = ui.div([], 'ui-form ui-form-wide');
     const appAxolabsDescription = ui.div([]);
     const loadPatternDiv = ui.div([]);
-    const asModificationDiv = ui.div([]);
+    const asModificationDiv = ui.form([]);
     const isEnumerateModificationsDiv = ui.divH([
       ui.boolInput(defaultBase, true, (v: boolean) => {
         if (v) {
@@ -591,6 +615,7 @@ export class AxolabsTabUI {
           .show();
       }
     });
+    saveAs.addOptions(savePatternButton);
 
     const convertSequenceButton = ui.bigButton('Convert', () => {
       const condition = [true, createAsStrand.value];
@@ -649,8 +674,26 @@ export class AxolabsTabUI {
     ]);
     inputsSection.classList.add('ui-form');
 
-    const downloadButton = ui.button('Download', () => svg.saveSvgAsPng(document.getElementById('mySvg'), saveAs.value,
-      {backgroundColor: 'white'}));
+    const downloadButton = ui.link('Download', () => svg.saveSvgAsPng(document.getElementById('mySvg'), saveAs.value,
+      {backgroundColor: 'white'}), 'Download pattern as PNG image', '');
+     
+    const editPattern = ui.link('Edit pattern', ()=>{
+      ui.dialog('Edit patter')
+      .add(ui.divV([
+        ui.h1('PTO'),
+        ui.divH([
+          fullyPto.root,
+          firstPto[SS].root,
+          firstPto[AS].root,
+        ], {style:{gap:'12px'}})
+      ]))
+      .add(ui.divH([
+        modificationSection[SS],
+        modificationSection[AS],
+      ], {style:{gap:'24px'}}))
+      .onOK(()=>{grok.shell.info('Saved')})
+      .show()
+    }, 'Edit pattern', '');  
 
     const mainSection = ui.panel([
       ui.block([
@@ -672,7 +715,7 @@ export class AxolabsTabUI {
               loadPatternDiv,
               saveAs.root,
               ui.buttonsInput([
-                savePatternButton,
+                //savePatternButton,
               ]),
             ], 'ui-form'),
             ui.block([
@@ -702,18 +745,55 @@ export class AxolabsTabUI {
         ui.divText('This will add the result column(s) to the right of the table'),
       ], 'Create and apply Axolabs translation patterns.',
     );
+    strandLengthInput[SS].addCaption('Length');
 
     return ui.splitH([
-      ui.div([
-        appAxolabsDescription,
-        mainSection!,
-      ])!,
       ui.box(
+        ui.div([
+          ui.h1('Pattern'),
+          createAsStrand.root,
+          strandLengthInput[SS],
+          strandLengthInput[AS],
+          sequenceBase.root,
+          comment.root,
+          loadPatternDiv,
+          saveAs.root,
+          ui.h1('Convert'),
+          tables.root,
+          inputStrandColumn[SS],
+          inputStrandColumn[AS],
+          inputIdColumn.root,
+          ui.buttonsInput([
+            convertSequenceButton,
+          ]),
+        ], 'ui-form')
+      , {style:{maxWidth:'450px'}}),
+      ui.panel([
+        svgDiv,
+        isEnumerateModificationsDiv,
         ui.divH([
-          modificationSection[SS],
-          modificationSection[AS],
-        ]), {style: {maxWidth: '360px'}},
-      ),
-    ]);
+          downloadButton,
+          editPattern
+        ], {style:{gap:'12px', marginTop:'12px'}}),
+        ui.divH([
+          ui.divV([
+            ui.h1('Sense strand'),
+            inputExample[SS].root,
+            outputExample[SS].root,
+          ], 'ui-block'),
+          ui.divV([
+            ui.h1('Anti sense'),
+            inputExample[AS],
+            outputExample[AS]
+          ], 'ui-block'),
+        ], {style:{gap:'24px', marginTop:'24px'}}),
+        ui.h1('Additional modifications'),
+            ui.form([
+              terminalModification[SS][FIVE_PRIME],
+              terminalModification[SS][THREE_PRIME],
+            ]),
+            asModificationDiv,
+      ], {style: {overflowX: 'scroll', padding:'12px 24px'}})
+    ], {}, true)
   }
 }

package/src/view/{tabs/sdf.ts → apps/oligo-structure.ts}

@@ -4,18 +4,16 @@ import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
 import * as rxjs from 'rxjs';
-import '../css/sdf-tab.css';
+import '../style/structure-app.css';
 import $ from 'cash-dom';
 
 import {errorToConsole} from '@datagrok-libraries/utils/src/to-console';
 
-// import {drawMolecule} from '../../utils/structures-works/draw-molecule';
 import {highlightInvalidSubsequence} from '../utils/colored-input/input-painters';
 import {getLinkedMolfile, saveSdf} from '../../model/sequence-to-structure-utils/sdf-tab';
 import {ColoredTextInput} from '../utils/colored-input/colored-text-input';
 import {MoleculeImage} from '../utils/molecule-img';
 import {StrandData} from '../../model/sequence-to-structure-utils/sdf-tab';
-import {DEFAULT_AXOLABS_INPUT} from '../const/view';
 
 const enum DIRECTION {
   STRAIGHT = '5′ → 3′',
@@ -23,7 +21,7 @@ const enum DIRECTION {
 };
 const STRANDS = ['ss', 'as', 'as2'] as const;
 
-export class SdfTabUI {
+export class StructureLayoutHandler {
   constructor() {
     this.onInput = new rxjs.Subject<string>();
     this.onInvalidInput = new rxjs.Subject<string>();
@@ -39,7 +37,7 @@ export class SdfTabUI {
       STRANDS.map((key) => [key, false])
     );
     this.moleculeImgDiv = ui.block([]);
-    $(this.moleculeImgDiv).addClass('st-sdf-mol-img');
+    $(this.moleculeImgDiv).addClass('st-structure-mol-img');
 
     DG.debounce<string>(this.onInput, 300).subscribe(async () => {
       await this.updateMoleculeImg();
@@ -63,10 +61,10 @@ export class SdfTabUI {
     const boolInputsAndButton = this.getBoolInputsAndButton();
     await this.updateMoleculeImg();
     const bottomDiv = ui.divH([boolInputsAndButton, this.moleculeImgDiv]);
-    $(bottomDiv).addClass('st-sdf-bottom');
+    $(bottomDiv).addClass('st-structure-bottom');
 
     const sdfTabBody = ui.divV([tableLayout, bottomDiv]);
-    $(sdfTabBody).addClass('st-sdf-body');
+    $(sdfTabBody).addClass('st-structure-body');
 
     return sdfTabBody;
   }
@@ -83,7 +81,7 @@ export class SdfTabUI {
     const boolInputsAndButtonArray = [this.saveAllStrandsInput.root, this.useChiralInput.root, saveButton];
     const boolInputsAndButton = ui.divV(boolInputsAndButtonArray);
     for (const item of boolInputsAndButtonArray)
-      $(item).addClass('st-sdf-bool-button-block');
+      $(item).addClass('st-structure-bool-button-block');
     return boolInputsAndButton;
   }
 
@@ -138,16 +136,16 @@ export class SdfTabUI {
 
     for (const strand of STRANDS) {
       let element = label[strand].parentElement!;
-      element.classList.add('st-sdf-input-form');
+      element.classList.add('st-structure-input-form');
       // the following line is necessary because otherwise overridden by
       // d4-item-table class
       $(element).css('padding-top', '3px');
 
       element = directionChoiceInput[strand].root.parentElement!;
-      element.classList.add('st-sdf-input-form', 'st-sdf-direction-choice');
+      element.classList.add('st-structure-input-form', 'st-structure-direction-choice');
 
       element = this.inputBase[strand].root.parentElement!;
-      element.classList.add('st-sdf-text-input-td');
+      element.classList.add('st-structure-text-input-td');
     }
     return tableLayout;
   }
@@ -165,10 +163,10 @@ export class SdfTabUI {
   }
 
   private getMolfile(ss: StrandData, as: StrandData, as2: StrandData): string {
-    if (ss.strand === '' && (as.strand !== '' || as2.strand !== '')) {
-      this.onInvalidInput.next();
-      return '';
-    }
+    // if (ss.strand === '' && (as.strand !== '' || as2.strand !== '')) {
+    //   this.onInvalidInput.next();
+    //   return '';
+    // }
 
     return getLinkedMolfile(ss, as, as2, this.useChiralInput.value!);
   }
@@ -177,7 +175,8 @@ export class SdfTabUI {
     let molfile = '';
     try {
       const strandData = this.getStrandData();
-      molfile = this.getMolfile(strandData.ss, strandData.as, strandData.as2);
+      if (Object.values(strandData).some((data) => data.strand !== ''))
+        molfile = this.getMolfile(strandData.ss, strandData.as, strandData.as2);
     } catch (err) {
       const errStr = errorToConsole(err);
       console.error(errStr);

package/src/view/{tabs/main.ts → apps/oligo-translator.ts}

@@ -4,7 +4,7 @@ import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
 import * as rxjs from 'rxjs';
-import '../css/main-tab.css';
+import '../style/translator-app.css';
 import $ from 'cash-dom';
 
 import {highlightInvalidSubsequence} from '../utils/colored-input/input-painters';
@@ -13,18 +13,23 @@ import {SequenceToMolfileConverter} from '../../model/sequence-to-structure-util
 import {getTranslatedSequences} from '../../model/format-translation/conversion-utils';
 import {MoleculeImage} from '../utils/molecule-img';
 import {download} from '../../model/helpers';
-import {SEQUENCE_COPIED_MSG, SEQ_TOOLTIP_MSG} from '../const/main-tab';
-import {DEFAULT_AXOLABS_INPUT} from '../const/view';
+import {SEQUENCE_COPIED_MSG, SEQ_TOOLTIP_MSG} from '../const/oligo-translator';
+import {DEFAULT_AXOLABS_INPUT} from '../const/ui';
 import {FormatDetector} from '../../model/parsing-validation/format-detector';
 import {SequenceValidator} from '../../model/parsing-validation/sequence-validator';
 import {FormatConverter} from '../../model/format-translation/format-converter';
 import {codesToHelmDictionary} from '../../model/data-loading-utils/json-loader';
 import {DEFAULT_FORMATS} from '../../model/const';
 
-export class MainTabUI {
+export class TranslatorLayoutHandler {
   constructor() {
     const INPUT_FORMATS = Object.keys(codesToHelmDictionary).concat(DEFAULT_FORMATS.HELM);
-    this.moleculeImgDiv = ui.block([]);
+    this.moleculeImgDiv = ui.div([]);
+    this.moleculeImgDiv.className = 'mol-host';
+    this.moleculeImgDiv.style.border = '1px solid var(--grey-2)';
+    this.moleculeImgDiv.style.borderRadius = '1px';
+    this.moleculeImgDiv.style.marginTop = '12px';
+
     this.outputTableDiv = ui.div([]);
     this.formatChoiceInput = ui.choiceInput('', DEFAULT_FORMATS.HELM, INPUT_FORMATS, async () => {
       this.format = this.formatChoiceInput.value;
@@ -76,7 +81,7 @@ export class MainTabUI {
     const upperBlock = ui.table(
       [inputTableRow], (item) => [item.format, item.textInput]
     );
-    upperBlock.classList.add('st-main-input-table');
+    upperBlock.classList.add('st-translator-input-table');
 
     const outputTable = ui.block([
       this.outputTableDiv,
@@ -85,11 +90,11 @@ export class MainTabUI {
     ]);
 
     const mainTabBody = ui.box(
-      ui.div([
+      ui.panel([
         upperBlock,
         outputTable,
-        this.moleculeImgDiv,
-      ], {style: {paddingTop: '20px', paddingLeft: '20px'}})
+        ui.block([ui.box(this.moleculeImgDiv)])
+      ]),
     );
 
     this.formatChoiceInput.value = this.format;
@@ -135,7 +140,7 @@ export class MainTabUI {
     const outputTable = ui.table(tableRows, (item) => [item.format, item.sequence], ['FORMAT', 'SEQUENCE']);
 
     this.outputTableDiv.append(outputTable);
-    this.outputTableDiv.classList.add('st-main-output-table');
+    this.outputTableDiv.classList.add('st-translator-output-table');
   }
 
   private async updateMolImg(): Promise<void> {
@@ -144,7 +149,6 @@ export class MainTabUI {
     const molImgObj = new MoleculeImage(this.molfile);
     await molImgObj.drawMolecule(this.moleculeImgDiv, canvasWidth, canvasHeight);
     // should the canvas be returned from the above function?
-    $(this.moleculeImgDiv).find('canvas').css('float', 'inherit');
   }
 
   // todo: sort mehtods

package/src/view/const/ui.ts

@@ -0,0 +1,14 @@
+export const enum TAB {
+  TRANSLATOR = 'TRANSLATOR',
+  PATTERN = 'PATTERN',
+  STRUCTRE = 'STRUCTURE'
+}
+
+export const enum APP {
+  COMBINED = 'Oligo Toolkit',
+  TRANSLATOR = 'Oligo Translator',
+  PATTERN = 'Oligo Pattern',
+  STRUCTRE = 'Oligo Structure',
+}
+
+export const DEFAULT_AXOLABS_INPUT = 'Afcgacsu';

package/src/view/style/pattern-app.css

@@ -0,0 +1 @@
+/* Naming convention: class names should begin with st and app name to avoid naming collitions */

package/src/view/style/structure-app.css

@@ -0,0 +1,39 @@
+/* Naming convention: class names should begin with st and app name to avoid naming collitions */
+
+.st-structure-body {
+  padding-right: 20px;
+}
+
+.st-structure-input-form {
+  text-align: right;
+  vertical-align: top;
+  min-width: 95px;
+}
+
+.st-structure-direction-choice label {
+  min-width: 100px;
+  float: right;
+}
+
+.st-structure-direction-choice div {
+  justify-content: right;
+}
+
+.st-structure-text-input-td { /* Style for td containing textarea */
+  width: 100%;
+}
+
+.st-structure-mol-img {
+  margin-right: 30px;
+  float: right;
+}
+
+.st-structure-bool-button-block {
+  justify-content: right;
+  margin-bottom: 10px;
+}
+
+.st-structure-bottom {
+  flex-direction: row-reverse;
+  padding-top: 20px;
+}

package/src/view/style/translator-app.css

@@ -0,0 +1,46 @@
+/* Naming convention: class names should begin with st and app name to avoid naming collitions */
+.st-translator-input-table {
+  width: 100%;
+}
+
+.st-translator-input-table td:has(textarea) {
+  width: 100%;
+  padding-right: 20px;
+}
+
+.st-translator-input-table td:has(select) {
+  min-width: 120px;
+  vertical-align: top;
+}
+
+.st-translator-output-table {
+  margin-top: 20px;
+  margin-right: 20px;
+  margin-bottom: 10px;
+}
+
+.st-translator-output-table table {
+  width: 100%;
+  table-layout: fixed;
+}
+
+/* .st-translator-output-table table tbody tr td { */
+/*   max-width: 20%; */
+/* } */
+
+.st-translator-output-table td {
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+.st-translator-output-table tr:nth-child(even) {
+  background-color: var(--grey-1);
+}
+
+.st-translator-output-table td:nth-child(odd) {
+  width: 120px;
+  vertical-align: top;
+}
+
+.st-translator-output-table td a {
+  overflow-wrap: break-word;
+}

package/src/view/utils/colored-input/colored-text-input.ts

@@ -7,19 +7,18 @@ import * as DG from 'datagrok-api/dg';
 import $ from 'cash-dom';
 
 // inner dependencies
-import '../../css/colored-text-input.css';
+import '../../style/colored-text-input.css';
 
 
 /** Class for colorizing input in the textarea of DG.InputBase.  */
 export class ColoredTextInput {
   constructor(
     private textInputBase: DG.InputBase<string>,
-    painter: (str: string) => HTMLSpanElement[],
+    /** Divide input value into an array of spans, each with its own text color, use -webkit-text-fill-color. */
+    private painter: (str: string) => HTMLSpanElement[],
     /** Resize, no scrolls  */
     resizeable: boolean = true
   ) {
-    this.textInputBase = textInputBase;
-    this.painter = painter;
     $(this.root).addClass('colored-text-input');
     if (resizeable) {
       // make input field automatically resizeable
@@ -39,13 +38,15 @@ export class ColoredTextInput {
   }
 
   private highlights: HTMLDivElement;
-  /** Divide input value into an array of spans, each with its own text color, use -webkit-text-fill-color. */
-  private painter: (str: string) => HTMLSpanElement[];
 
   get textArea() {
     return this.textInputBase.root.getElementsByTagName('textarea').item(0);
   };
 
+  get inputBase() {
+    return this.textInputBase;
+  }
+
   get root() { return this.textInputBase.root; };
 
   private colorize() {

package/src/view/utils/molecule-img.ts

@@ -21,6 +21,11 @@ export class MoleculeImage {
   get molblock(): string { return this._validMolBlock; }
 
   set molblock(value: string) {
+    if (value === '') {
+      this._validMolBlock = value;
+      return;
+    }
+
     try {
       this.validateMolBlock(value);
     } catch (error) {
@@ -59,11 +64,10 @@ export class MoleculeImage {
   }
 
   private async zoomIn(): Promise<void> {
-    const dialog = ui.dialog('Molecule');
+    const dialog = ui.dialog({title: 'Molecule', showFooter:false});
     const dialogDivStyle = {
       overflowX: 'scroll',
     };
-    const dialogDiv = ui.div([], {style: dialogDivStyle});
 
     const height = $(window).height() * 0.7;
     const molDimensions = this.getMoleculeDimensions();
@@ -75,9 +79,14 @@ export class MoleculeImage {
 
     const dialogCanvas = ui.canvas(dialogCanvasWidth, dialogCanvasHeight);
     await this.drawMolBlockOnCanvas(dialogCanvas);
-
-    dialogDiv.appendChild(dialogCanvas);
+    
+    const dialogDiv = ui.block([dialogCanvas], {style: dialogDivStyle});
     dialog.add(dialogDiv).showModal(true);
+
+    $(dialog.root).find('.d4-dialog-contents').removeClass('ui-form');
+    $(dialog.root).find('.d4-dialog-contents').removeClass('ui-panel');
+    $(dialog.root).find('.d4-dialog-contents').addClass('ui-box');
+    $(dialog.root).find('.d4-dialog-contents').css('padding', '0');
   }
 
   public async drawMolecule(
@@ -91,16 +100,23 @@ export class MoleculeImage {
     // Draw zoomed-out molecule
     canvas.style.width = `${canvasWidth}px`;
     canvas.style.height = `${canvasHeight}px`;
+    canvas.style.cursor = 'zoom-in';
+    /*
     canvas.style.borderStyle = 'solid';
-    canvas.style.borderColor = 'var(--grey-3)';
+    canvas.style.borderRadius = '1px';
+    canvas.style.borderColor = 'var(--grey-2)';
     canvas.style.borderWidth = 'thin';
+    */
     this.drawMolBlockOnCanvas(canvas);
 
     // Dialog with zoomed-in molecule
-    $(canvas).on('click', async () => { await this.zoomIn(); });
-    $(canvas).on('mouseover', () => $(canvas).css('cursor', 'grab')); // for some reason 'zoom-in' value wouldn't work
-    $(canvas).on('mouseout', () => $(canvas).css('cursor', 'default'));
-
-    moleculeImgDiv.append(canvas);
+    canvas.addEventListener('click', async () => {
+      await this.zoomIn();
+    });
+    //$(canvas).on('click', async () => { await this.zoomIn(); });
+    //$(canvas).on('mouseover', () => $(canvas).css('cursor', 'grab')); // for some reason 'zoom-in' value wouldn't work
+    //$(canvas).on('mouseout', () => $(canvas).css('cursor', 'default'));
+
+    moleculeImgDiv.append(ui.tooltip.bind(canvas,'Click to zoom'));
   }
 }