@datagrok/sequence-translator 1.0.16 → 1.1.0

package/src/view/tabs/main.ts

@@ -0,0 +1,174 @@
+/* Do not change these import lines to match external modules in webpack configuration */
+import * as grok from 'datagrok-api/grok';
+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 $ from 'cash-dom';
+
+import {highlightInvalidSubsequence} from '../utils/colored-input/input-painters';
+import {ColoredTextInput} from '../utils/colored-input/colored-text-input';
+import {SequenceToMolfileConverter} from '../../model/sequence-to-structure-utils/sequence-to-molfile';
+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 {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 {
+  constructor() {
+    const INPUT_FORMATS = Object.keys(codesToHelmDictionary).concat(DEFAULT_FORMATS.HELM);
+    this.moleculeImgDiv = ui.block([]);
+    this.outputTableDiv = ui.div([]);
+    this.formatChoiceInput = ui.choiceInput('', DEFAULT_FORMATS.HELM, INPUT_FORMATS, async () => {
+      this.format = this.formatChoiceInput.value;
+      this.updateTable();
+      await this.updateMolImg();
+    });
+    this.sequenceInputBase = ui.textInput('', DEFAULT_AXOLABS_INPUT,
+      () => { this.onInput.next(); });
+
+    this.init();
+
+    DG.debounce<string>(this.onInput, 300).subscribe(async () => {
+      this.init();
+      this.formatChoiceInput.value = this.format;
+      this.updateTable();
+      await this.updateMolImg();
+    });
+  }
+
+  // todo: reduce # of state vars by further refactoring legacy code
+  private onInput = new rxjs.Subject<string>();
+  private moleculeImgDiv: HTMLDivElement;
+  private outputTableDiv: HTMLDivElement;
+  private formatChoiceInput: DG.InputBase;
+  private sequenceInputBase: DG.InputBase;
+  private molfile: string;
+  public sequence: string;
+  private format: string | null;
+
+  async getHtmlElement(): Promise<HTMLDivElement> {
+    const sequenceColoredInput = new ColoredTextInput(this.sequenceInputBase, highlightInvalidSubsequence);
+
+    const downloadMolfileButton = ui.button(
+      'Get Molfile',
+      () => { this.saveMolfile(); },
+      'Save sequence as Molfile V3000');
+
+    const copySmilesButton = ui.button(
+      'Copy SMILES',
+      () => { this.copySmiles(); },
+      'Copy SMILES for the sequence');
+
+    const formatChoiceInput = ui.div([this.formatChoiceInput]);
+
+    const inputTableRow = {
+      format: formatChoiceInput,
+      textInput: sequenceColoredInput.root,
+    };
+    const upperBlock = ui.table(
+      [inputTableRow], (item) => [item.format, item.textInput]
+    );
+    upperBlock.classList.add('st-main-input-table');
+
+    const outputTable = ui.block([
+      this.outputTableDiv,
+      downloadMolfileButton,
+      copySmilesButton,
+    ]);
+
+    const mainTabBody = ui.box(
+      ui.div([
+        upperBlock,
+        outputTable,
+        this.moleculeImgDiv,
+      ], {style: {paddingTop: '20px', paddingLeft: '20px'}})
+    );
+
+    this.formatChoiceInput.value = this.format;
+    this.updateTable();
+    await this.updateMolImg();
+    return mainTabBody;
+  }
+
+  private saveMolfile(): void {
+    const result = (new SequenceToMolfileConverter(this.sequence, false,
+      this.formatChoiceInput.value!)).convert();
+    download(this.sequence + '.mol', encodeURIComponent(result));
+  }
+
+  private copySmiles(): void {
+    const smiles = DG.chem.convert(this.molfile, DG.chem.Notation.MolBlock, DG.chem.Notation.Smiles);
+    navigator.clipboard.writeText(smiles).then(
+      () => grok.shell.info(SEQUENCE_COPIED_MSG)
+    );
+  }
+
+  private updateTable(): void {
+    this.outputTableDiv.innerHTML = '';
+    // todo: does not detect correctly (U-A)(U-A)
+    const indexOfInvalidChar = (!this.format) ? 0 : (new SequenceValidator(this.sequence)).getInvalidCodeIndex(this.format!);
+    const translatedSequences = getTranslatedSequences(this.sequence, indexOfInvalidChar, this.format!);
+    const tableRows = [];
+
+    for (const key of Object.keys(translatedSequences)) {
+      const sequence = ('indexOfFirstInvalidChar' in translatedSequences) ?
+        ui.divH([]) :
+        ui.link(
+          translatedSequences[key],
+          () => navigator.clipboard.writeText(translatedSequences[key])
+            .then(() => grok.shell.info(SEQUENCE_COPIED_MSG)),
+          SEQ_TOOLTIP_MSG, ''
+        );
+      tableRows.push({
+        format: key,
+        sequence: sequence,
+      });
+    }
+    const outputTable = ui.table(tableRows, (item) => [item.format, item.sequence], ['FORMAT', 'SEQUENCE']);
+
+    this.outputTableDiv.append(outputTable);
+    this.outputTableDiv.classList.add('st-main-output-table');
+  }
+
+  private async updateMolImg(): Promise<void> {
+    const canvasWidth = 500;
+    const canvasHeight = 170;
+    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
+  private init(): void {
+    this.sequence = this.getFormattedSequence();
+
+    this.format = (new FormatDetector(this.sequence)).getFormat();
+
+    // warning: getMolfile relies on 'this.format', so the order is important
+    this.molfile = this.getMolfile();
+  }
+
+  private getFormattedSequence(): string {
+    return this.sequenceInputBase.value.replace(/\s/g, '');
+  }
+
+  private getMolfile(): string {
+    if (!this.format)
+      return '';
+    if (this.format === DEFAULT_FORMATS.HELM) {
+      const axolabs = (new FormatConverter(this.sequence, this.format).convertTo(DEFAULT_FORMATS.AXOLABS));
+      return (new SequenceToMolfileConverter(axolabs, false, DEFAULT_FORMATS.AXOLABS).convert());
+    }
+    const molfile = (new SequenceToMolfileConverter(this.sequence, false, this.format)).convert();
+    return molfile;
+  }
+}

package/src/view/tabs/sdf.ts

@@ -0,0 +1,173 @@
+/* Do not change these import lines to match external modules in webpack configuration */
+import * as grok from 'datagrok-api/grok';
+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 $ 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′',
+  INVERSE = '3′ → 5′',
+};
+const STRANDS = ['ss', 'as', 'as2'] as const;
+
+export class SdfTabUI {
+  constructor() {
+    this.onInput = new rxjs.Subject<string>();
+    this.inputBase = Object.fromEntries(
+      STRANDS.map(
+        (key) => [key, ui.textInput('', DEFAULT_AXOLABS_INPUT, () => { this.onInput.next(); })]
+      )
+    );
+    this.useChiralInput = ui.boolInput('Use chiral', true);
+    this.saveAllStrandsInput = ui.boolInput('Save as one entity', true);
+    ui.tooltip.bind(this.saveAllStrandsInput.root, 'Save SDF with all strands in one molfile');
+    this.directionInversion = Object.fromEntries(
+      STRANDS.map((key) => [key, false])
+    );
+    this.moleculeImgDiv = ui.block([]);
+    $(this.moleculeImgDiv).addClass('st-sdf-mol-img');
+
+    DG.debounce<string>(this.onInput, 300).subscribe(async () => {
+      await this.updateMoleculeImg();
+    });
+  }
+
+  private onInput: rxjs.Subject<string>;
+  private useChiralInput: DG.InputBase<boolean | null>;
+  private saveAllStrandsInput: DG.InputBase<boolean | null>;
+  private inputBase: {[key: string]: DG.InputBase<string>};
+  private directionInversion: {[key: string]: boolean};
+  private moleculeImgDiv: HTMLDivElement;
+
+  async getHtmlDivElement(): Promise<HTMLDivElement> {
+    const tableLayout = this.getTableInput();
+    const boolInputsAndButton = this.getBoolInputsAndButton();
+    await this.updateMoleculeImg();
+    const bottomDiv = ui.divH([boolInputsAndButton, this.moleculeImgDiv]);
+    $(bottomDiv).addClass('st-sdf-bottom');
+
+    const sdfTabBody = ui.divV([tableLayout, bottomDiv]);
+    $(sdfTabBody).addClass('st-sdf-body');
+
+    return sdfTabBody;
+  }
+
+  private getBoolInputsAndButton(): HTMLDivElement {
+    const saveButton = ui.buttonsInput([
+      ui.bigButton('Save SDF', () => {
+        const strandData = this.getStrandData();
+        saveSdf(strandData.ss, strandData.as, strandData.as2,
+          this.useChiralInput.value!, this.saveAllStrandsInput.value!);
+      })
+    ]);
+
+    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');
+    return boolInputsAndButton;
+  }
+
+  private getTableInput(): HTMLTableElement {
+    const coloredInput = Object.fromEntries(
+      STRANDS.map(
+        (key) => [key, new ColoredTextInput(this.inputBase[key], highlightInvalidSubsequence)]
+      )
+    );
+
+    const directionChoiceInput = Object.fromEntries(
+      STRANDS.map(
+        (key) => [key, ui.choiceInput(
+          `${key.toUpperCase()} direction`, DIRECTION.STRAIGHT, [DIRECTION.STRAIGHT, DIRECTION.INVERSE]
+        )]
+      )
+    );
+
+    STRANDS.forEach((strand) => {
+      directionChoiceInput[strand].onChanged(() => {
+        this.directionInversion[strand] = directionChoiceInput[strand].value === DIRECTION.INVERSE;
+        this.onInput.next();
+      });
+    });
+
+    const labelNames = ['Sense Strand', 'Anti Sense', 'Anti Sense 2'];
+    const labelNameMap = new Map(STRANDS.map(
+      (key, index) => [key, labelNames[index]]
+    ));
+    const label = Object.fromEntries(
+      STRANDS.map(
+        (key) => [key, ui.label(labelNameMap.get(key)!)]
+      )
+    );
+
+    const tableRows = STRANDS.map((strand) => {
+      return {
+        label: label[strand],
+        textInput: coloredInput[strand].root,
+        choiceInput: directionChoiceInput[strand].root,
+      };
+    });
+    const tableLayout = ui.table(
+      tableRows, (item) => [item.label, item.textInput, item.choiceInput]);
+    $(tableLayout).css('margin-top', '10px');
+
+    for (const strand of STRANDS) {
+      let element = label[strand].parentElement!;
+      element.classList.add('st-sdf-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 = this.inputBase[strand].root.parentElement!;
+      element.classList.add('st-sdf-text-input-td');
+    }
+    return tableLayout;
+  }
+
+  private getStrandData() {
+    return Object.fromEntries(
+      STRANDS.map((strand) => [strand, {
+        strand: this.inputBase[strand].value.replace(/\s*/g, ''),
+        invert: this.directionInversion[strand]
+      }])
+    );
+  }
+
+  private getMolfile(ss: StrandData, as: StrandData, as2: StrandData): string {
+    return getLinkedMolfile(ss, as, as2, this.useChiralInput.value!);
+  }
+
+  private async updateMoleculeImg(): Promise<void> {
+    let molfile = '';
+    try {
+      const strandData = this.getStrandData();
+      molfile = this.getMolfile(strandData.ss, strandData.as, strandData.as2);
+    } catch (err) {
+      const errStr = errorToConsole(err);
+      console.error(errStr);
+    }
+    // todo: calculate relative numbers
+    const canvasWidth = 650;
+    const canvasHeight = 150;
+    const molImgObj = new MoleculeImage(molfile);
+    await molImgObj.drawMolecule(this.moleculeImgDiv, canvasWidth, canvasHeight);
+    // should the canvas be returned from the above function?
+    $(this.moleculeImgDiv).find('canvas').css('float', 'inherit');
+  }
+}

package/src/view/utils/app-info-dialog.ts

@@ -0,0 +1,18 @@
+/* Do not change these import lines to match external modules in webpack configuration */
+import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+
+export function showAppInfo() {
+  const textDiv = ui.divText('hello');
+  ui.dialog('Dialog name').add(textDiv).show();
+}
+
+const appMainDescription = ui.info([
+  ui.divText('How to convert one sequence:', {style: {'font-weight': 'bolder'}}),
+  ui.divText('Paste sequence into the text field below'),
+  ui.divText('\n How to convert many sequences:', {style: {'font-weight': 'bolder'}}),
+  ui.divText('1. Drag & drop an Excel or CSV file with sequences into Datagrok'),
+  ui.divText('2. Right-click on the column header, then see the \'Convert\' menu'),
+  ui.divText('This will add the result column to the right of the table'),
+], 'Convert oligonucleotide sequences between Nucleotides, BioSpring, Axolabs, Mermade 12 and GCRS representations.');

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

@@ -0,0 +1,56 @@
+/* Do not change these import lines to match external modules in webpack configuration */
+import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+
+// external modules dependencies
+import $ from 'cash-dom';
+
+// inner dependencies
+import '../../css/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[],
+    /** 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
+      this.textInputBase.onInput(
+        () => {
+          // necessary for the field to be squeezable, not only expandable
+          $(this.textArea).css('height', 0);
+          $(this.textArea).css('height', (this.textArea!.scrollHeight) + 'px');
+        }
+      );
+    }
+    this.highlights = ui.div([]);
+    this.root.appendChild(this.highlights);
+    this.colorize();
+
+    this.textInputBase.onInput(() => this.colorize());
+  }
+
+  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 root() { return this.textInputBase.root; };
+
+  private colorize() {
+    const spans = this.painter(this.textInputBase.value);
+    this.highlights.innerHTML = '';
+    spans.forEach((span: HTMLSpanElement) => this.highlights.appendChild(span));
+  }
+}

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

@@ -0,0 +1,44 @@
+/* Do not change these import lines to match external modules in webpack configuration */
+import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+
+import {SequenceValidator} from '../../../model/parsing-validation/sequence-validator';
+import {FormatDetector} from '../../../model/parsing-validation/format-detector';
+
+import $ from 'cash-dom';
+
+/** Set different colors for letters, can be upgraded to color various monomers */
+export function demoPainter(input: string): HTMLSpanElement[] {
+  const colors = ['red', 'blueviolet', 'chartreuse',
+    'aquamarine', 'darkcyan', 'gold', 'green', 'aqua', 'orange',
+    'blue'];
+  const spans: HTMLSpanElement[] = [];
+  for (let i = 0; i < input.length; ++i) {
+    const span = ui.span([input.charAt(i)]);
+    // $(span).css('-webkit-text-fill-color', colors.at(Math.round(Math.random() * colors.length))!);
+    $(span).css('-webkit-text-fill-color', colors[i % colors.length]!);
+    spans.push(span);
+  }
+  return spans;
+}
+
+// todo: port to another place
+export function highlightInvalidSubsequence(input: string): HTMLSpanElement[] {
+  // validate sequence
+  let cutoff = 0;
+  const format = (new FormatDetector(input)).getFormat();
+  if (format !== null)
+    cutoff = (new SequenceValidator(input)).getInvalidCodeIndex(format!);
+  const isValid = cutoff < 0 || input === '';
+  const greyTextSpan = ui.span([]);
+  $(greyTextSpan).css('-webkit-text-fill-color', 'var(--grey-6)');
+  const redTextSpan = ui.span([]);
+  $(redTextSpan).css('-webkit-text-fill-color', 'red');
+
+  if (!isValid) {
+    greyTextSpan.innerHTML = input.slice(0, cutoff);
+    redTextSpan.innerHTML = input.slice(cutoff);
+  } else { greyTextSpan.innerHTML = input; }
+  return [greyTextSpan, redTextSpan];
+};

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

@@ -0,0 +1,86 @@
+/* Do not change these import lines to match external modules in webpack configuration */
+import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+import {errorToConsole} from '@datagrok-libraries/utils/src/to-console';
+
+import $ from 'cash-dom';
+
+import {extractAtomDataV3000} from '../../model/sequence-to-structure-utils/mol-transformations';
+
+/** Draw molecule on the canvas and append it to the specified div, with the
+ * option of zoom-in */
+export async function drawMolecule(
+  moleculeImgDiv: HTMLDivElement,
+  canvasWidth: number, canvasHeight: number,
+  molfile: string
+): Promise<void> {
+  // clear div's content if any
+  moleculeImgDiv.innerHTML = '';
+
+  if (molfile !== '') {
+    const canvas = ui.canvas(canvasWidth * window.devicePixelRatio, canvasHeight * window.devicePixelRatio);
+
+    // Draw zoomed-out molecule
+    canvas.style.width = `${canvasWidth}px`;
+    canvas.style.height = `${canvasHeight}px`;
+    canvas.style.borderStyle = 'solid';
+    canvas.style.borderColor = 'var(--grey-3)';
+    canvas.style.borderWidth = 'thin';
+    drawMolfileOnCanvas(canvas, molfile);
+
+    // Dialog with zoomed-in molecule
+    $(canvas).on('click', async () => { await drawZoomedInMolecule(molfile); });
+    $(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);
+  }
+}
+
+
+export async function drawZoomedInMolecule(molfile: string): Promise<void> {
+  try {
+    const dialogDivStyle = {
+      overflowX: 'scroll',
+    };
+    const dialogDiv = ui.div([], {style: dialogDivStyle});
+
+    // dialogDiv size required, but now available before dialog show()
+    const atomCoordinates = extractAtomDataV3000(molfile);
+    // const cw: number = $(window).width() * 0.80; // dialogDiv.clientWidth
+    const clientHeight: number = $(window).height() * 0.70; // dialogDiv.clientHeight
+    const molWidth: number = Math.max(...atomCoordinates.x) - Math.min(...atomCoordinates.x);
+    const molHeight: number = Math.max(...atomCoordinates.y) - Math.min(...atomCoordinates.y);
+
+    // const wR: number = cw / molWidth;
+    const hR: number = clientHeight / molHeight;
+    const r: number = hR; // Math.max(wR, hR);
+    const dialogCanvasWidth = r * molWidth;
+    const dialogCanvasHeight = r * molHeight;
+
+    const dialogCanvas = ui.canvas(
+      dialogCanvasWidth * window.devicePixelRatio, dialogCanvasHeight * window.devicePixelRatio
+    );
+    dialogCanvas.style.width = `${dialogCanvasWidth}px`;
+    dialogCanvas.style.height = `${dialogCanvasHeight}px`;
+    await drawMolfileOnCanvas(dialogCanvas, molfile);
+
+    dialogDiv.appendChild(dialogCanvas);
+    ui.dialog('Molecule')
+      .add(dialogDiv)
+      .showModal(true);
+  } catch (err) {
+    const errStr = errorToConsole(err);
+    console.error(errStr);
+  }
+};
+
+
+export async function drawMolfileOnCanvas(canvas: HTMLCanvasElement, molfile: string): Promise<void> {
+  await grok.functions.call('Chem:canvasMol', {
+    x: 0, y: 0, w: canvas.width, h: canvas.height, canvas: canvas,
+    molString: molfile, scaffoldMolString: '',
+    options: {normalizeDepiction: false, straightenDepiction: false}
+  });
+};

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

@@ -0,0 +1,106 @@
+/* Do not change these import lines to match external modules in webpack configuration */
+import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+
+import {MolfileHandler} from '@datagrok-libraries/chem-meta/src/parsing-utils/molfile-handler';
+import {errorToConsole} from '@datagrok-libraries/utils/src/to-console';
+
+import $ from 'cash-dom';
+
+const InvalidMolfileError = class extends Error {
+  constructor(message: string) { super(message); }
+};
+
+export class MoleculeImage {
+  constructor(molblok: string) {
+    this.molblock = molblok;
+  }
+
+  private _validMolBlock: string;
+  get molblock(): string { return this._validMolBlock; }
+
+  set molblock(value: string) {
+    try {
+      this.validateMolBlock(value);
+    } catch (error) {
+      if (error instanceof InvalidMolfileError)
+        value = '';
+      const errorMessage = errorToConsole(error);
+      console.error(errorMessage);
+    }
+    this._validMolBlock = value;
+  }
+
+  private validateMolBlock(molblock: string): void {
+    // todo: add a sound criterion
+    if (molblock === '')
+      throw new InvalidMolfileError('MoleculeImage: invalid molblock');
+  }
+
+  private async drawMolBlockOnCanvas(canvas: HTMLCanvasElement): Promise<void> {
+    try {
+      await grok.functions.call('Chem:canvasMol', {
+        x: 0, y: 0, w: canvas.width, h: canvas.height, canvas: canvas,
+        molString: this.molblock, scaffoldMolString: '',
+        options: {normalizeDepiction: false, straightenDepiction: false}
+      });
+    } catch (err) {
+      const errStr = errorToConsole(err);
+      console.error(errStr);
+    }
+  };
+
+  private getMoleculeDimensions(): {height: number, width: number} {
+    const molData = MolfileHandler.getInstance(this.molblock);
+    const width: number = Math.max(...molData.x) - Math.min(...molData.x);
+    const height: number = Math.max(...molData.y) - Math.min(...molData.y);
+    return {height: height, width: width};
+  }
+
+  private async zoomIn(): Promise<void> {
+    const dialog = ui.dialog('Molecule');
+    const dialogDivStyle = {
+      overflowX: 'scroll',
+    };
+    const dialogDiv = ui.div([], {style: dialogDivStyle});
+
+    const height = $(window).height() * 0.7;
+    const molDimensions = this.getMoleculeDimensions();
+
+    const zoomRatio = height / molDimensions.height;
+
+    const dialogCanvasHeight = height;
+    const dialogCanvasWidth = molDimensions.width * zoomRatio;
+
+    const dialogCanvas = ui.canvas(dialogCanvasWidth, dialogCanvasHeight);
+    await this.drawMolBlockOnCanvas(dialogCanvas);
+
+    dialogDiv.appendChild(dialogCanvas);
+    dialog.add(dialogDiv).showModal(true);
+  }
+
+  public async drawMolecule(
+    moleculeImgDiv: HTMLDivElement,
+    canvasWidth: number, canvasHeight: number
+  ): Promise<void> {
+    moleculeImgDiv.innerHTML = '';
+
+    const canvas = ui.canvas(canvasWidth * window.devicePixelRatio, canvasHeight * window.devicePixelRatio);
+
+    // Draw zoomed-out molecule
+    canvas.style.width = `${canvasWidth}px`;
+    canvas.style.height = `${canvasHeight}px`;
+    canvas.style.borderStyle = 'solid';
+    canvas.style.borderColor = 'var(--grey-3)';
+    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);
+  }
+}