@datagrok/sequence-translator 1.1.4 → 1.2.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datagrok/sequence-translator",
   "friendlyName": "Sequence Translator",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "author": {
     "name": "Alexey Choposky",
     "email": "achopovsky@datagrok.ai"

package/src/demo/demo-st-ui.ts

@@ -2,24 +2,18 @@ import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
-import {handleError} from './handle-error';
-
 import {delay} from '@datagrok-libraries/utils/src/test';
 import {getJsonData} from '../model/data-loading-utils/json-loader';
-import {SequenceTranslatorUI} from '../view/view';
-import {_package} from '../package';
+import {_package, oligoTranslatorApp, oligoPatternApp, oligoStructureApp} from '../package';
+import {tryCatch} from '../model/helpers';
 
-export async function demoTranslateSequenceUI() {
-  try {
-    openSequenceTranslatorOnPane(0);
-  } catch (err: any) {
-    handleError(err);
-  }
+export async function demoOligoTranslatorUI() {
+  await tryCatch(async () => oligoTranslatorApp());
 }
 
-export async function demoDesignPatternUI() {
-  try {
-    async function emulateUserInput(value: string, idx: number, idxUpdate: (idx: number) => number) {
+export async function demoOligoPatternUI() {
+  await tryCatch(async () => {
+    async function emulateUserInput(value: string, idx: number, idxUpdate: (idx: number) => number): Promise<void> {
       await delay(3000);
 
       // warning: this redefinition is necessary because
@@ -32,7 +26,7 @@ export async function demoDesignPatternUI() {
       selectElement.dispatchEvent(event);
     }
 
-    openSequenceTranslatorOnPane(1);
+    await oligoPatternApp();
 
     let len: number;
 
@@ -44,28 +38,24 @@ export async function demoDesignPatternUI() {
     const asNewValues = ['2\'-O-Methyl', '2\'-Fluoro', '2\'-O-MOE'];
     asNewValues.forEach(async (value, idx) => {
       emulateUserInput(value, idx, (i) => (len - 2 - 2 * i));
-    })
-  } catch (err: any) {
-    handleError(err);
-  }
-}
-
-export async function demoVisualizeDuplexUI() {
-  try {
-    await openSequenceTranslatorOnPane(2);
-  } catch (err: any) {
-    handleError(err);
-  }
+    });
+  })
 }
 
-async function openSequenceTranslatorOnPane(paneNumber: number): Promise<void> {
-  let tabControl: DG.TabControl;
-  let panes: DG.TabPane[];
-  await getJsonData();
-  await _package.initMonomerLib();
-  const v = new SequenceTranslatorUI();
-  await v.createLayout();
-  tabControl = (await v.tabs.getControl());
-  panes = tabControl.panes;
-  tabControl.currentPane = panes[paneNumber];
+export async function demoOligoStructureUI() {
+  await tryCatch(async () => {
+    async function setInputValue(idx: number, sequence: string): Promise<void> {
+      await delay(500);
+      const textInputs: NodeListOf<HTMLTextAreaElement> = document.querySelectorAll('.colored-text-input > textarea');
+      const textarea = textInputs[idx];
+      textarea.value = sequence;
+      const event = new Event('input');
+      textarea.dispatchEvent(event);
+    }
+    await oligoStructureApp();
+    const inputSequences = ['Afcgacsu', 'Afcgacsu', 'Afcgacsu'];
+    inputSequences.forEach(async (sequence, idx) => {
+      await setInputValue(idx, sequence);
+    })
+  });
 }

package/src/model/helpers.ts

@@ -1,3 +1,6 @@
+/* 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 sortByReverseLength(array: string[]): string[] {
@@ -10,3 +13,17 @@ export function download(name: string, href: string): void {
   element.setAttribute('download', name);
   element.click();
 }
+
+export async function tryCatch<T>(func: () => Promise<T>, finallyFunc?: () => any, callbackName: string = 'Oligo app'): Promise<T> {
+  try {
+    return await func();
+  } catch (err: any) {
+    const errMsg: string = err.hasOwnProperty('message') ? err.message : err.toString();
+    grok.shell.error(`${callbackName} error: ` + errMsg);
+    throw err;
+  } finally {
+    if (finallyFunc)
+      finallyFunc();
+  }
+};
+

package/src/model/sequence-to-structure-utils/monomer-code-parser.ts

@@ -12,15 +12,12 @@ import {monomersWithPhosphateLinkers} from '../data-loading-utils/json-loader';
  * omitted linkers, if needed)  */
 export class MonomerSequenceParser {
   constructor(
-    private sequence: string, private invert: boolean = false,
+    private sequence: string, 
     // todo: remove from the list of parameters
     private codeMap: Map<string, string>
   ) {
-    this.lib = MonomerLibWrapper.getInstance();
   }
 
-  private lib: MonomerLibWrapper;
-
   /** Get sequence of parsed monomer symbols, which are unique short names for
    * the monomers within the Monomer Library */
   parseSequence(): string[] {
@@ -65,7 +62,7 @@ export class MonomerSequenceParser {
       const code = allCodesOfFormat.find(
         (s: string) => s === this.sequence.substring(i, i + s.length)
       )!;
-      this.invert ? parsedCodes.unshift(code) : parsedCodes.push(code);
+      parsedCodes.push(code);
       i += code.length;
     }
     return parsedCodes;

package/src/model/sequence-to-structure-utils/sdf-tab.ts

@@ -62,7 +62,7 @@ export function saveSdf(
     nonEmptyStrands.length === 0 ||
     nonEmptyStrands.length === 1 && ss.strand === ''
   ) {
-    grok.shell.warning('Enter SS and AS/AS2 to save SDF');
+    grok.shell.warning('Enter SS and optionally AS/AS2 to save SDF');
   } else {
     let result: string;
     if (oneEntity) {

package/src/model/sequence-to-structure-utils/sequence-to-molfile.ts

@@ -8,11 +8,11 @@ import {MonomerLibWrapper} from '../monomer-lib/lib-wrapper';
 
 export class SequenceToMolfileConverter {
   constructor(
-    sequence: string, invert: boolean = false, format: string
+    sequence: string, private invert: boolean = false, format: string
   ) {
     this.lib = MonomerLibWrapper.getInstance();
     const codeToSymbolMap = this.lib.getCodeToSymbolMap(format);
-    this.parser = new MonomerSequenceParser(sequence, invert, codeToSymbolMap);
+    this.parser = new MonomerSequenceParser(sequence, codeToSymbolMap);
   }
 
   private parser: MonomerSequenceParser;
@@ -25,7 +25,24 @@ export class SequenceToMolfileConverter {
       const monomerMolfile = this.getMonomerMolfile(monomerSymbol, idx);
       monomerMolfiles.push(monomerMolfile);
     })
-    return this.getPolymerMolfile(monomerMolfiles);
+    let molfile = this.getPolymerMolfile(monomerMolfiles);
+    if (this.invert) {
+      molfile = this.reflect(molfile);
+      molfile = this.invertBondConfiguration(molfile);
+    }
+    return molfile;
+  }
+
+  private invertBondConfiguration(molfile: string): string {
+    const beginIdx = molfile.indexOf('M  V30 BEGIN BOND');
+    const endIdx = molfile.indexOf('M  V30 END BOND');
+    let bondBlock = molfile.substring(beginIdx, endIdx);
+    bondBlock = bondBlock.replace(
+      /(CFG=)([13])/g,
+      (match, group1, group2) => (group2 === '1') ? `${group1}3` : (group2 === '3') ? `${group1}1` : match
+    );
+    const result = molfile.substring(0, beginIdx) + bondBlock + molfile.substring(endIdx);
+    return result;
   }
 
   private getMonomerMolfile(monomerSymbol: string, idx: number): string {

package/src/package.ts

@@ -2,7 +2,8 @@ import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
-import {SequenceTranslatorUI} from './view/view';
+import {AppUIFactory, CombinedAppUI} from './view/app-ui';
+import {tryCatch} from './model/helpers';
 import {LIB_PATH, DEFAULT_LIB_FILENAME} from './model/data-loading-utils/const';
 import {IMonomerLib} from '@datagrok-libraries/bio/src/types';
 import {getMonomerLibHelper, IMonomerLibHelper} from '@datagrok-libraries/bio/src/monomer-works/monomer-utils';
@@ -12,15 +13,17 @@ import {linkStrandsV3000} from './model/sequence-to-structure-utils/mol-transfor
 import {MonomerLibWrapper} from './model/monomer-lib/lib-wrapper';
 import {FormatDetector} from './model/parsing-validation/format-detector';
 import {SequenceValidator} from './model/parsing-validation/sequence-validator';
-import {demoDesignPatternUI, demoVisualizeDuplexUI, demoTranslateSequenceUI} from './demo/demo-st-ui';
+import {demoOligoTranslatorUI, demoOligoPatternUI, demoOligoStructureUI} from './demo/demo-st-ui';
 import {FormatConverter} from './model/format-translation/format-converter';
+import {APP} from './view/const/ui';
+import {getExternalAppViewFactories} from './plugins/mermade';
 
 class StPackage extends DG.Package {
   private _monomerLib?: IMonomerLib;
 
   get monomerLib(): IMonomerLib {
     if (!this._monomerLib)
-      throw new Error ('ST: monomer lib not loaded')
+      throw new Error ('Monomer lib not loaded')
     return this._monomerLib!;
   }
 
@@ -29,37 +32,54 @@ class StPackage extends DG.Package {
       return;
 
     const pi: DG.TaskBarProgressIndicator = DG.TaskBarProgressIndicator.create(
-      'Initializing Sequence Translator monomer library ...');
-    try {
+      `Initializing ${APP.COMBINED} monomer library ...`);
+    await tryCatch(async () => {
       const libHelper: IMonomerLibHelper = await getMonomerLibHelper();
       this._monomerLib = await libHelper.readLibrary(LIB_PATH, DEFAULT_LIB_FILENAME);
-    } catch (err: any) {
-      const errMsg: string = err.hasOwnProperty('message') ? err.message : err.toString();
-      throw new Error('Loading monomer library: ' + errMsg);
-    } finally {
-      pi.close();
-    }
+    }, () => pi.close());
   }
 }
 
 export const _package: StPackage = new StPackage();
 
-//name: Sequence Translator
+async function buildLayout(appName: string): Promise<void> {
+  await initSequenceTranslatorLibData();
+  const appUI = AppUIFactory.getUI(appName);
+  await appUI.createAppLayout();
+}
+
+
+//name: Oligo Toolkit
+//meta.icon: img/icons/toolkit.png
 //tags: app
-export async function sequenceTranslatorApp(): Promise<void> {
-  const pi: DG.TaskBarProgressIndicator = DG.TaskBarProgressIndicator.create('Loading Sequence Translator app ...');
-
-  try {
-    await initSequenceTranslatorLibData();
-    const v = new SequenceTranslatorUI();
-    await v.createLayout();
-  } catch (err: any) {
-    const errMsg: string = err.hasOwnProperty('message') ? err.message : err.toString();
-    grok.shell.error(`Loading Sequence Translator application error: ` + errMsg);
-    throw err;
-  } finally {
-    pi.close();
-  }
+export async function oligoToolkitApp(): Promise<void> {
+  await initSequenceTranslatorLibData();
+  const externalViewFactories = await getExternalAppViewFactories();
+  if (!externalViewFactories)
+    throw new Error('External app view factories not loaded');
+  const appUI = new CombinedAppUI(externalViewFactories!);
+  await appUI.createAppLayout();
+}
+
+//name: Oligo Translator
+//meta.icon: img/icons/translator.png
+//tags: app
+export async function oligoTranslatorApp(): Promise<void> {
+  await buildLayout(APP.TRANSLATOR);
+}
+
+//name: Oligo Pattern
+//meta.icon: img/icons/pattern.png
+//tags: app
+export async function oligoPatternApp(): Promise<void> {
+  await buildLayout(APP.PATTERN);
+}
+
+//name: Oligo Structure
+//meta.icon: img/icons/structure.png
+//tags: app
+export async function oligoStructureApp(): Promise<void> {
+  await buildLayout(APP.STRUCTRE);
 }
 
 //name: initSequenceTranslatorLibData
@@ -99,28 +119,28 @@ export function linkStrands(strands: { senseStrands: string[], antiStrands: stri
   return linkStrandsV3000(strands, true);
 }
 
-//name: demoTranslateSequence
-//meta.demoPath: Bioinformatics | Oligonucleotide Sequence: Translate
+//name: demoOligoTranslator
+//meta.demoPath: Bioinformatics | Oligo Toolkit | Translator
 //description: Translate oligonucleotide sequences across various formats accepted by different synthesizers
 //meta.path: /apps/Tutorials/Demo/Bioinformatics/Oligonucleotide%20Sequence:%20Translate
 export async function demoTranslateSequence(): Promise<void> {
-  await demoTranslateSequenceUI();
+  await demoOligoTranslatorUI();
 }
 
-//name: demoDesignPattern
-//meta.demoPath: Bioinformatics | Oligonucleotide Sequence: Design
+//name: demoOligoPattern
+//meta.demoPath: Bioinformatics | Oligo Toolkit | Pattern
 //description: Design a modification pattern for an oligonucleotide sequence
 //meta.path:%20/apps/Tutorials/Demo/Bioinformatics/Oligonucleotide%20Sequence:%20Visualize%20duplex
-export async function demoDesignPattern(): Promise<void> {
-  await demoDesignPatternUI();
+export async function demoOligoPattern(): Promise<void> {
+  await demoOligoPatternUI();
 }
 
-//name: demoVisualizeDuplex
-//meta.demoPath: Bioinformatics | Oligonucleotide Sequence: Visualize duplex
+//name: demoOligoStructure
+//meta.demoPath: Bioinformatics | Oligo Toolkit | Structure
 //description: Visualize duplex and save SDF
 //meta.path:%20/apps/Tutorials/Demo/Bioinformatics/Oligonucleotide%20Sequence:%20Visualize%20duplex
-export async function demoVisualizeDuplex(): Promise<void> {
-  await demoVisualizeDuplexUI();
+export async function demoOligoStructure(): Promise<void> {
+  await demoOligoStructureUI();
 }
 
 //name: translateOligonucleotideSequence

package/src/plugins/const.ts

@@ -0,0 +1,4 @@
+export const enum MERMADE {
+  FUNCTION_NAME = 'Mermadesynthesis:merMadeSynthesis',
+  TAB_NAME = 'SYNTHESIZE',
+}

package/src/plugins/mermade.ts

@@ -0,0 +1,48 @@
+/* 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 {ExternalPluginUI} from '../view/app-ui';
+import {ColoredTextInput} from '../view/utils/colored-input/colored-text-input';
+import {highlightInvalidSubsequence} from '../view/utils/colored-input/input-painters';
+import {codesToHelmDictionary} from '../model/data-loading-utils/json-loader';
+import {MERMADE} from './const';
+
+export async function getExternalAppViewFactories(): Promise<{[name: string]: () => DG.View} | undefined> {
+  const externalPluginData = {
+  [MERMADE.FUNCTION_NAME]: {
+      tabName: MERMADE.TAB_NAME,
+      parameters: getMerMadeParameters()
+    },
+  }
+
+  const result: {[tabName: string]: () => DG.View} = {};
+
+  for (const [pluginName, data] of Object.entries(externalPluginData)) {
+    let div: HTMLDivElement;
+    try {
+      div = await grok.functions.call(pluginName, data.parameters);
+    } catch (err) {
+      console.error(`Plugin ${pluginName} not loaded, error:`, err)
+      div = ui.divText('error loading');
+    }
+    const pluginUI = new ExternalPluginUI(data.tabName, div);
+
+    // intentonally don't await for the promise
+    pluginUI.initView();
+
+    result[data.tabName] = () => pluginUI.getView();
+  }
+  return result;
+}
+
+function getMerMadeParameters(): {[name: string]: any} {
+  const base = ui.textInput('', '');
+  const input = new ColoredTextInput(base, highlightInvalidSubsequence);
+
+  return {
+    coloredInput: input,
+    codes: codesToHelmDictionary
+  }
+}

package/src/view/app-ui.ts

@@ -0,0 +1,193 @@
+/* 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 {TAB, APP} from './const/ui';
+import {TranslatorLayoutHandler} from './apps/oligo-translator';
+import {StructureLayoutHandler} from './apps/oligo-structure';
+import {PatternLayoutHandler} from './apps/oligo-pattern';
+import {MonomerLibViewer} from './monomer-lib-viewer/viewer';
+import {_package} from '../package';
+import {tryCatch} from '../model/helpers';
+
+type ViewFactories = {[name: string]: () => DG.View};
+
+export abstract class AppUIBase {
+  constructor(protected appName: string, protected parentAppName?: string) { }
+  abstract addView(): Promise<void>;
+
+  async createAppLayout(): Promise<void> {
+    const pi: DG.TaskBarProgressIndicator = DG.TaskBarProgressIndicator.create(`Loading ${this.appName}...`);
+
+    let currentView = grok.shell.v?.root;
+    if (currentView)
+      ui.setUpdateIndicator(currentView, true);
+
+    await tryCatch(async () => {
+      await this.addView();
+    }, () => pi.close());
+
+    if (currentView)
+      ui.setUpdateIndicator(currentView, false);
+  }
+}
+
+abstract class SimpleAppUIBase extends AppUIBase {
+  constructor(appName: string) {
+    super(appName);
+    this.view = DG.View.create();
+    this.setupView();
+  }
+
+  protected view: DG.View;
+  async addView(): Promise<void> {
+    await this.initView();
+    const name = this.parentAppName ? this.parentAppName + '/' + this.appName : this.appName;
+    this.view.path = `/apps/${_package.name}/${name.replace(/\s/g, '')}/`;
+    grok.shell.addView(this.view);
+  }
+
+  protected abstract getHtml(): Promise<HTMLDivElement>;
+  async initView(): Promise<void> {
+    const html = await this.getHtml();
+    this.view.append(html);
+  }
+
+  protected setupView(): void {
+    this.view.box = true;
+    this.view.name = this.appName;
+
+    const windows = grok.shell.windows;
+    windows.showProperties = false;
+    windows.showToolbox = false;
+    windows.showHelp = false;
+  }
+
+  getView(): DG.View {
+    return this.view;
+  }
+}
+
+export class CombinedAppUI extends AppUIBase {
+  constructor(externalViewFactories: ViewFactories) {
+    super(APP.COMBINED)
+    this.externalViewFactories = externalViewFactories;
+    const factories = this.getViewFactories();
+    this.multiView = new DG.MultiView({viewFactories: factories}); 
+  }
+
+  private multiView: DG.MultiView;
+  private externalViewFactories?: ViewFactories;
+
+  private getViewFactories(): ViewFactories {
+    function viewFactory(uiConstructor: new (view: DG.View) => SimpleAppUIBase): () => DG.View {
+      const view = DG.View.create();
+      const translateUI = new uiConstructor(view);
+      // intentonally don't await for the promise
+      translateUI.initView();
+      return () => translateUI.getView();
+    }
+
+    let result: {[key: string]: () => DG.View } = {
+      [TAB.TRANSLATOR]: viewFactory(OligoTranslatorUI),
+      [TAB.PATTERN]: viewFactory(OligoPatternUI),
+      [TAB.STRUCTRE]: viewFactory(OligoStructureUI),
+    }
+
+    if (this.externalViewFactories)
+      result = Object.assign({}, result, this.externalViewFactories);
+
+    return result
+  }
+
+  private getPath(): string {
+    let name = this.multiView.tabs.currentPane.name;
+    name = name.charAt(0).toUpperCase() + name.substring(1).toLowerCase();
+    const path = `/apps/${_package.name}/OligoToolkit/${name}`;
+    return path;
+  }
+
+  private setUrl(): void {
+    this.multiView.path = this.getPath();
+  }
+
+  async addView(): Promise<void> {
+    this.multiView.tabs.onTabChanged.subscribe(() => this.setUrl());
+    this.setUrl();
+    grok.shell.addView(this.multiView);
+  }
+}
+
+/** For plugins from external packages */
+export class ExternalPluginUI extends SimpleAppUIBase {
+  constructor(viewName: string, layout: HTMLDivElement) {
+    super(viewName);
+    this.layout = layout;
+  }
+  private layout: HTMLDivElement;
+
+  protected getHtml(): Promise<HTMLDivElement> {
+    return Promise.resolve(this.layout);
+  }
+}
+
+export class AppUIFactory {
+  private constructor() {}
+
+  static getUI(appName: string): SimpleAppUIBase {
+    switch (appName) {
+      case APP.TRANSLATOR:
+        return new OligoTranslatorUI();
+      case APP.PATTERN:
+        return new OligoPatternUI();
+      case APP.STRUCTRE:
+        return new OligoStructureUI();
+      default:
+        throw new Error(`Unknown app name: ${appName}`);
+    }
+  }
+}
+
+class OligoTranslatorUI extends SimpleAppUIBase {
+  constructor() {
+    super(APP.TRANSLATOR);
+
+    const viewMonomerLibIcon = ui.iconFA('book', MonomerLibViewer.view, 'View monomer library');
+    this.topPanel = [
+      viewMonomerLibIcon,
+    ];
+    this.view.setRibbonPanels([this.topPanel]);
+    this.ui = new TranslatorLayoutHandler();
+  }
+
+  private readonly topPanel: HTMLElement[];
+  private readonly ui: TranslatorLayoutHandler;
+
+  protected getHtml(): Promise<HTMLDivElement> {
+    return this.ui.getHtmlElement();
+  };
+}
+
+class OligoPatternUI extends SimpleAppUIBase {
+  constructor() {
+    super(APP.PATTERN);
+    this.ui = new PatternLayoutHandler();
+  }
+  private readonly ui: PatternLayoutHandler;
+  protected getHtml(): Promise<HTMLDivElement> {
+    return Promise.resolve(this.ui.htmlDivElement);
+  }
+}
+
+class OligoStructureUI extends SimpleAppUIBase {
+  constructor() {
+    super(APP.STRUCTRE)
+    this.ui = new StructureLayoutHandler();
+  }
+  private readonly ui: StructureLayoutHandler;
+
+  protected getHtml(): Promise<HTMLDivElement> {
+    return this.ui.getHtmlDivElement();
+  }
+}