@datagrok/sequence-translator 1.2.7 → 1.3.0

package/files/pattern-app-data.json

@@ -0,0 +1,80 @@
+{
+  "Axolabs": {
+    "RNA": {
+      "color": "rgb(255,230,153)",
+      "substitution": "$1"
+    },
+    "DNA": {
+      "color": "rgb(66, 120, 245)",
+      "substitution": "d$1"
+    },
+    "2'-Fluoro": {
+      "color": "rgb(95, 212, 245)",
+      "substitution": "$1f"
+    },
+    "2'-O-Methyl": {
+      "color": "rgb(150, 95, 245)",
+      "substitution": "$1f"
+    },
+    "2'-O-MOE": {
+      "color": "rgb(129, 199, 130)",
+      "substitution": "$1m"
+    },
+    "GNA": {
+      "color": "rgb(199, 169, 129)",
+      "substitution": "(GNA-$1)"
+    },
+    "LNA": {
+      "color": "rgb(250, 185, 182)",
+      "substitution": "$1b"
+    },
+    "UNA": {
+      "color": "rgb(237, 104, 184)",
+      "substitution": "$1o"
+    },
+    "A": {
+      "color": "rgb(255,230,153)",
+      "substitution": "A"
+    },
+    "C": {
+      "color": "rgb(255,230,153)",
+      "substitution": "C"
+    },
+    "G": {
+      "color": "rgb(255,230,153)",
+      "substitution": "G"
+    },
+    "U": {
+      "color": "rgb(255,230,153)",
+      "substitution": "U"
+    },
+    "X-New": {
+      "color": "rgb(196, 91, 252)",
+      "substitution": "X"
+    },
+    "Y-New": {
+      "color": "rgb(150, 177, 255)",
+      "substitution": "Y"
+    },
+    "Z-New": {
+      "color": "rgb(11, 222, 71)",
+      "substitution": "Z"
+    },
+    "invAb": {
+      "color": "rgb(243, 153, 247)",
+      "substitution": "(invAb)"
+    },
+    "5'-vinylps": {
+      "color": "rgb(99, 3, 40)",
+      "substitution": "(vinu)"
+    },
+    "invAb(o)": {
+      "color": "rgb(240, 224, 108)",
+      "substitution": "(invAb)"
+    },
+    "2'-OMe-U(o)": {
+      "color": "rgb(190, 237, 123)",
+      "substitution": "mU"
+    }
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datagrok/sequence-translator",
   "friendlyName": "Sequence Translator",
-  "version": "1.2.7",
+  "version": "1.3.0",
   "author": {
     "name": "Alexey Choposky",
     "email": "achopovsky@datagrok.ai"
@@ -13,39 +13,46 @@
     "directory": "packages/SequenceTranslator"
   },
   "dependencies": {
-    "@datagrok-libraries/bio": "^5.32.1",
-    "@datagrok-libraries/chem-meta": "^1.0.9",
-    "@datagrok-libraries/tutorials": "^1.3.2",
-    "@datagrok-libraries/utils": "^1.17.2",
+    "@datagrok-libraries/bio": "^5.41.9",
+    "@datagrok-libraries/chem-meta": "^1.2.3",
+    "@datagrok-libraries/tutorials": "^1.3.12",
+    "@datagrok-libraries/utils": "^4.1.45",
     "@types/react": "^18.0.15",
     "cash-dom": "^8.1.0",
-    "datagrok-api": "^1.17.4",
+    "datagrok-api": "^1.18.6",
+    "lodash": "^4.17.21",
+    "object-hash": "^3.0.0",
     "openchemlib": "6.0.1",
     "save-svg-as-png": "^1.4.17",
     "ts-loader": "^9.3.1",
-    "typescript": "^4.7.4"
+    "typescript": "^5.4.2",
+    "typeahead-standalone": "4.14.1"
   },
   "devDependencies": {
-    "@datagrok/bio": "^2.10.0",
-    "@datagrok/chem": "1.7.2",
+    "@datagrok/bio": "^2.12.0",
+    "@datagrok/chem": "1.9.0",
     "@types/jquery": "^3.5.14",
     "@types/js-yaml": "^4.0.5",
+    "@types/lodash": "^4.14.202",
     "@types/node-fetch": "^2.6.2",
+    "@types/object-hash": "^3.0.6",
     "@types/react": "^18.0.15",
-    "@typescript-eslint/eslint-plugin": "latest",
-    "@typescript-eslint/parser": "parser",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
     "css-loader": "^6.7.3",
-    "eslint": "^7.32.0",
+    "eslint": "^8.57.0",
     "eslint-config-google": "latest",
     "style-loader": "^3.3.1",
     "ts-loader": "^9.3.1",
     "typescript": "^4.7.4",
+    "typescript-eslint": "^7.2.0",
     "webpack": "^5.75.0",
     "webpack-cli": "latest"
   },
   "scripts": {
     "link-api": "npm link datagrok-api",
-    "link-all": "npm link datagrok-api @datagrok-libraries/utils @datagrok-libraries/bio",
+    "link-bio": "npm link @datagrok-libraries/bio",
+    "link-all": "npm link @datagrok-libraries/chem-meta datagrok-api @datagrok-libraries/utils @datagrok-libraries/bio @datagrok-libraries/tutorials",
     "debug-sequencetranslator": "grok publish",
     "release-sequencetranslator": "grok publish localhost --release",
     "build-sequencetranslator": "webpack",
@@ -58,7 +65,8 @@
     "lint-fix": "eslint \"./src/**/*.ts\" --fix",
     "test": "grok test",
     "test-dev": "grok test --host dev",
-    "test-local": "grok test --host localhost"
+    "test-local": "grok test --host localhost",
+    "build-all": "npm --prefix ./../../libraries/chem-meta run build && npm --prefix ./../../js-api run build && npm --prefix ./../../libraries/utils run build && npm --prefix ./../../libraries/bio run build && npm --prefix ./../../libraries/tutorials run build && npm run build"
   },
   "canEdit": [
     "Developers"

package/src/{model → apps/common/model}/const.ts

@@ -3,7 +3,7 @@ import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
-export const NUCLEOTIDES = ['A', 'G', 'C', 'U', 'T'];
+export const NUCLEOTIDES = ['A', 'G', 'C', 'U'];
 
 export const TECHNOLOGIES = {
   DNA: 'DNA',

package/src/{model/data-loading-utils → apps/common/model/data-loader}/const.ts

@@ -2,7 +2,12 @@ export const LIB_PATH = 'System:AppData/SequenceTranslator';
 export const DEFAULT_LIB_FILENAME = 'monomer-lib.json';
 
 export const APP_PATH = 'System:AppData/SequenceTranslator';
-export const AXOLABS_STYLE_FILENAME = 'axolabs-style.json';
+export const PATTERN_APP_DATA_FILENAME = 'pattern-app-data.json';
 export const CODES_TO_HELM_DICT_FILENAME = 'formats-to-helm.json';
 export const CODES_TO_SYMBOLS_FILENAME = 'codes-to-symbols.json';
-export const MONOMERS_WITH_PHOSPHATE_LINKERS = 'linkers.json';
+export const MONOMERS_WITH_PHOSPHATE_FILENAME = 'linkers.json';
+
+export const enum MODIFICATION_DATA_FIELDS {
+  COLOR = 'color',
+  SUBSTITUTION = 'substitution',
+}

package/src/apps/common/model/data-loader/json-loader.ts

@@ -0,0 +1,48 @@
+/* Do not change these import lines to match external modules in webpack configuration */
+import * as DG from 'datagrok-api/dg';
+
+import {
+  APP_PATH, PATTERN_APP_DATA_FILENAME, CODES_TO_HELM_DICT_FILENAME,
+  CODES_TO_SYMBOLS_FILENAME, MONOMERS_WITH_PHOSPHATE_FILENAME
+} from './const';
+import {PatternAppData, CodeToSymbol, FormatToHELMDict} from './types';
+
+const fileSource = new DG.FileSource(APP_PATH);
+
+export let PATTERN_APP_DATA: PatternAppData;
+export let CODES_TO_HELM_DICT: FormatToHELMDict;
+export let CODES_TO_SYMBOLS_DICT: CodeToSymbol;
+export let MONOMERS_WITH_PHOSPHATE: {[key: string]: string[]};
+
+export async function loadJsonData(): Promise<void> {
+  if (isAllJsonDataLoaded())
+    return;
+
+  const jsonFileNames = [
+    PATTERN_APP_DATA_FILENAME, CODES_TO_HELM_DICT_FILENAME, CODES_TO_SYMBOLS_FILENAME, MONOMERS_WITH_PHOSPHATE_FILENAME
+  ];
+
+  [
+    PATTERN_APP_DATA,
+    CODES_TO_HELM_DICT,
+    CODES_TO_SYMBOLS_DICT,
+    MONOMERS_WITH_PHOSPHATE
+  ] = await Promise.all(
+    jsonFileNames.map((fileName) => loadAndParseJson(fileName))
+  );
+}
+
+async function loadAndParseJson(filePath: string): Promise<any> {
+  try {
+    const content = await fileSource.readAsText(filePath);
+    return JSON.parse(content);
+  } catch (err) {
+    console.error(`Error loading json from ${filePath}:`, err);
+  }
+}
+
+function isAllJsonDataLoaded(): boolean {
+  const data = [PATTERN_APP_DATA, CODES_TO_HELM_DICT, CODES_TO_SYMBOLS_DICT, MONOMERS_WITH_PHOSPHATE];
+
+  return data.every((item) => item !== undefined);
+}

package/src/{model/data-loading-utils → apps/common/model/data-loader}/types.ts

@@ -1,15 +1,22 @@
+import {MODIFICATION_DATA_FIELDS as F} from './const';
+
 type KeyToValue = {[key: string]: string};
 
 export type Edges = {
   [key: string]: KeyToValue
 }
 
-export type AxolabsStyle = {
-  [index: string]: {
-    fullName: string,
-    symbols: string[],
-    color: string,
-  }
+export type ModificationData = {
+  [F.COLOR]: string,
+  [F.SUBSTITUTION]: string,
+}
+
+export type ModificationEntry = {
+  [modification: string]: ModificationData
+}
+
+export type PatternAppData = {
+  [format: string]: ModificationEntry
 };
 
 export type CodesInfo = {

package/src/{model → apps/common/model}/monomer-lib/lib-wrapper.ts

@@ -1,16 +1,13 @@
-/* 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 {_package} from '../../package';
+import {_package} from '../../../../package';
 import {DEFAULT_FORMATS} from '../const';
 
 import {IMonomerLib, Monomer} from '@datagrok-libraries/bio/src/types';
+import {HELM_REQUIRED_FIELD as REQ, HELM_OPTIONAL_FIELDS as OPT} from '@datagrok-libraries/bio/src/utils/const';
 
-import {HELM_REQUIRED_FIELDS as REQ, HELM_OPTIONAL_FIELDS as OPT} from '@datagrok-libraries/bio/src/utils/const';
 import {META_FIELDS as MET} from './const';
-import {codesToSymbolsDictionary} from '../../model/data-loading-utils/json-loader';
+import {CODES_TO_SYMBOLS_DICT} from '../data-loader/json-loader';
 
 export class MonomerLibWrapper {
   private constructor() {
@@ -34,10 +31,10 @@ export class MonomerLibWrapper {
     formats.forEach((format) => {
       if (format === DEFAULT_FORMATS.HELM)
         return;
-      const map = codesToSymbolsDictionary[format];
+      const map = CODES_TO_SYMBOLS_DICT[format];
       const codes = Object.keys(map).filter((code) => map[code] === sourceObj.symbol);
       formattedObject[format] = codes.join(', ');
-    })
+    });
 
     return formattedObject;
   }
@@ -88,15 +85,15 @@ export class MonomerLibWrapper {
   }
 
   getCodeToSymbolMap(format: string): Map<string, string> {
-    return new Map<string, string>(Object.entries(codesToSymbolsDictionary[format]));
+    return new Map<string, string>(Object.entries(CODES_TO_SYMBOLS_DICT[format]));
   }
 
   getCodesByFormat(format: string): string[] {
-    return Object.keys(codesToSymbolsDictionary[format]);
+    return Object.keys(CODES_TO_SYMBOLS_DICT[format]);
   }
 
   getAllFormats(): string[] {
-    return Object.keys(codesToSymbolsDictionary);
+    return Object.keys(CODES_TO_SYMBOLS_DICT);
   }
 
   getTableForViewer(): DG.DataFrame {
@@ -107,7 +104,7 @@ export class MonomerLibWrapper {
 
   getCodesToWeightsMap(): Map<string, number> {
     const codesToWeightsMap = new Map<string, number>();
-    Object.entries(codesToSymbolsDictionary).forEach(([_, dict]) => {
+    Object.entries(CODES_TO_SYMBOLS_DICT).forEach(([_, dict]) => {
       Object.entries(dict).forEach(([code, monomerSymbol]) => {
         const monomer = this.getMonomer(monomerSymbol);
         const weight = monomer[OPT.META]?.[MET.MOLWEIGHT];

package/src/apps/common/model/oligo-toolkit-package.ts

@@ -0,0 +1,30 @@
+import * as DG from 'datagrok-api/dg';
+
+import {getMonomerLibHelper, IMonomerLibHelper} from '@datagrok-libraries/bio/src/monomer-works/monomer-utils';
+import {IMonomerLib} from '@datagrok-libraries/bio/src/types';
+
+import {APP_NAME} from '../view/const';
+import {DEFAULT_LIB_FILENAME, LIB_PATH} from './data-loader/const';
+import {tryCatch} from './helpers';
+
+export class OligoToolkitPackage extends DG.Package {
+  private _monomerLib?: IMonomerLib;
+
+  get monomerLib(): IMonomerLib {
+    if (!this._monomerLib)
+      throw new Error('Monomer lib not loaded');
+    return this._monomerLib!;
+  }
+
+  async initMonomerLib(): Promise<void> {
+    if (this._monomerLib !== undefined)
+      return;
+
+    const pi: DG.TaskBarProgressIndicator = DG.TaskBarProgressIndicator.create(
+      `Initializing ${APP_NAME.COMBINED} monomer library ...`);
+    await tryCatch(async () => {
+      const libHelper: IMonomerLibHelper = await getMonomerLibHelper();
+      this._monomerLib = await libHelper.readLibrary(LIB_PATH, DEFAULT_LIB_FILENAME);
+    }, () => pi.close());
+  }
+}

package/src/{model → apps/common/model}/parsing-validation/format-detector.ts

@@ -6,13 +6,13 @@ import * as DG from 'datagrok-api/dg';
 import {sortByReverseLength} from '../helpers';
 import {DEFAULT_FORMATS} from '../const';
 import {MonomerLibWrapper} from '../monomer-lib/lib-wrapper';
-import {codesToHelmDictionary} from '../data-loading-utils/json-loader';
+import {CODES_TO_HELM_DICT} from '../data-loader/json-loader';
 import {SequenceValidator} from './sequence-validator';
 
 export class FormatDetector {
-  constructor (private sequence: string) {
+  constructor(private sequence: string) {
     this.libWrapper = MonomerLibWrapper.getInstance();
-    this.formats = Object.keys(codesToHelmDictionary);
+    this.formats = Object.keys(CODES_TO_HELM_DICT);
   };
 
   private libWrapper: MonomerLibWrapper;
@@ -39,9 +39,9 @@ export class FormatDetector {
   // todo: rename
   private getListOfPossibleSynthesizersByFirstMatchedCode(): string[] {
     const sequence = this.sequence;
-    let synthesizers: string[] = [];
+    const synthesizers: string[] = [];
     for (const format of this.formats) {
-      let codes = sortByReverseLength(this.libWrapper.getCodesByFormat(format));
+      const codes = sortByReverseLength(this.libWrapper.getCodesByFormat(format));
       let start = 0;
       for (let i = 0; i < sequence.length; i++) {
         if (sequence[i] === ')' && i !== sequence.length - 1) {

package/src/{model → apps/common/model}/parsing-validation/format-handler.ts

@@ -3,10 +3,10 @@ import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
-import {codesToHelmDictionary} from '../data-loading-utils/json-loader';
-import {CodesInfo} from '../data-loading-utils/types';
+import {CODES_TO_HELM_DICT} from '../data-loader/json-loader';
+import {CodesInfo} from '../data-loader/types';
 import {DEFAULT_FORMATS} from '../const';
-import {GROUP_TYPE, PHOSPHATE_SYMBOL} from '../translator-app/const';
+import {GROUP_TYPE, PHOSPHATE_SYMBOL} from '../../../translator/model/const';
 
 const inverseLengthComparator = (a: string, b: string) => b.length - a.length;
 
@@ -34,7 +34,7 @@ export class FormatHandler {
   getHelmToFormatDict(format: string): {[key: string]: string} {
     this.validateFormat(format);
 
-    const codesInfoObject = codesToHelmDictionary[format] as CodesInfo;
+    const codesInfoObject = CODES_TO_HELM_DICT[format] as CodesInfo;
     const dict = getHelmToCodeDict(codesInfoObject);
     return dict;
   }
@@ -42,7 +42,7 @@ export class FormatHandler {
   getFormatToHelmDict(format: string): {[key: string]: string} {
     this.validateFormat(format);
 
-    const codesInfoObject = codesToHelmDictionary[format] as CodesInfo;
+    const codesInfoObject = CODES_TO_HELM_DICT[format] as CodesInfo;
     const dict = Object.assign({}, ...Object.values(codesInfoObject)) as {[code: string]: string};
     return dict;
   }
@@ -75,7 +75,7 @@ export class FormatHandler {
   getPhosphateHelmCodesRegExp(format: string): RegExp {
     this.validateFormat(format);
 
-    const codesInfoObject = codesToHelmDictionary[format] as CodesInfo;
+    const codesInfoObject = CODES_TO_HELM_DICT[format] as CodesInfo;
     const phosphateHELMCodes = Array.from(
       new Set(Object.values(codesInfoObject[GROUP_TYPE.LINKAGE]))
     ).sort(inverseLengthComparator);
@@ -89,7 +89,7 @@ export class FormatHandler {
   }
 
   private getFormats(): string[] {
-    return Object.keys(codesToHelmDictionary);
+    return Object.keys(CODES_TO_HELM_DICT);
   }
 
   private validateFormat(format: string) {
@@ -106,7 +106,7 @@ export class FormatHandler {
     const formatCodes = Object.keys(dict).sort(inverseLengthComparator);
     return formatCodes;
   }
-  
+
   private getNonHelmFormatRegExp(format: string): RegExp {
     const formatCodes = this.getCodesByFormat(format);
     const formatRegExp = new RegExp(getRegExpPattern(formatCodes) + '|\\([^()]*\\)|.', 'g'); // the added group before '|.' is to avoid mismatch inside parenths
@@ -116,14 +116,14 @@ export class FormatHandler {
 
 export function getRegExpPattern(arr: string[]): string {
   const negativeLookBehind = '(?<!\\([^()]*)'; // not '(' followed by non-parenths
-  const negativeLookAhead = '(?![^()]*\\))';  // not ')' preceded by non-parenths
+  const negativeLookAhead = '(?![^()]*\\))'; // not ')' preceded by non-parenths
   const escaped = arr.map((key) => key.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
     .map((key) => {
-    if (!key.includes('(') && !key.includes(')'))
-      return `${negativeLookBehind}${key}${negativeLookAhead}`;
-    return key;
-  });
-  const result =  escaped.join('|');
+      if (!key.includes('(') && !key.includes(')'))
+        return `${negativeLookBehind}${key}${negativeLookAhead}`;
+      return key;
+    });
+  const result = escaped.join('|');
   return result;
 }
 
@@ -132,16 +132,15 @@ function getHelmToCodeDict(infoObj: CodesInfo) {
   Object.values(infoObj).forEach((obj: {[code: string]: string}) => {
     Object.entries(obj).forEach(([code, helm]) => {
       const key = helm.replace(/\)p/g, ')').replace(/\]p/g, ']');
-      if (result[key] === undefined) {
+      if (result[key] === undefined)
         result[key] = [code];
-      } else {
+      else
         (result[key] as string[]).push(code);
-      }
-    })
+    });
   });
   Object.entries(result).forEach(([key, value]) => {
     const sorted = (value as string[]).sort(inverseLengthComparator);
     result[key] = sorted[0] as string;
-  })
+  });
   return result as {[key: string]: string};
 }

package/src/{model → apps/common/model}/parsing-validation/sequence-validator.ts

@@ -42,7 +42,7 @@ export class SequenceValidator {
       indexOfFirstInvalidChar += matchedCode.length;
     }
     if (indexOfFirstInvalidChar === this.sequence.length)
-      indexOfFirstInvalidChar = -1
+      indexOfFirstInvalidChar = -1;
     return indexOfFirstInvalidChar;
   }
 

package/src/apps/common/view/app-ui-base.ts

@@ -0,0 +1,28 @@
+/* Do not change these import lines to match external modules in webpack configuration */
+import * as DG from 'datagrok-api/dg';
+import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+
+export abstract class AppUIBase {
+  constructor(protected appName: string, protected parentAppName?: string) { }
+  protected abstract constructView(): Promise<DG.ViewBase>;
+
+  async getAppView(): Promise<DG.ViewBase> {
+    const progressIndicator: DG.TaskBarProgressIndicator =
+      DG.TaskBarProgressIndicator.create(`Loading ${this.appName}...`);
+
+    const currentView = grok.shell.v?.root;
+    if (currentView)
+      ui.setUpdateIndicator(currentView, true);
+
+    try {
+      const view = await this.constructView();
+      return view;
+    } finally {
+      progressIndicator.close();
+      if (currentView)
+        ui.setUpdateIndicator(currentView, false);
+    }
+  }
+}
+

package/src/apps/common/view/combined-app-ui.ts

@@ -0,0 +1,66 @@
+/* Do not change these import lines to match external modules in webpack configuration */
+import * as DG from 'datagrok-api/dg';
+import * as grok from 'datagrok-api/grok';
+
+import {_package} from '../../../package';
+import {OligoPatternUI} from '../../pattern/view/ui';
+import {OligoStructureUI} from '../../structure/view/ui';
+import {OligoTranslatorUI} from '../../translator/view/ui';
+import {AppUIBase} from './app-ui-base';
+import {IsolatedAppUIBase} from './isolated-app-ui';
+import {APP_NAME, TAB_NAME} from './const';
+
+type ViewFactories = {[name: string]: () => DG.View};
+
+export class CombinedAppUI extends AppUIBase {
+  constructor(externalViewFactories: ViewFactories) {
+    super(APP_NAME.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) => IsolatedAppUIBase): () => DG.View {
+      const view = DG.View.create();
+      const translateUI = new UiConstructor(view);
+      translateUI.initView().catch(
+        (e) => console.error(`Failed to initialize ${UiConstructor.name}: ${e}`)
+      );
+      return () => translateUI.getView();
+    }
+
+    let result: {[key: string]: () => DG.View } = {
+      [TAB_NAME.TRANSLATOR]: viewFactory(OligoTranslatorUI),
+      [TAB_NAME.PATTERN]: viewFactory(OligoPatternUI),
+      [TAB_NAME.STRUCTURE]: viewFactory(OligoStructureUI),
+    };
+
+    if (this.externalViewFactories)
+      result = Object.assign({}, result, this.externalViewFactories);
+
+    return result;
+  }
+
+  private getCurrentPanePath(): 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.getCurrentPanePath();
+  }
+
+  protected async constructView(): Promise<DG.ViewBase> {
+    this.multiView.tabs.onTabChanged.subscribe(() => this.setUrl());
+    this.setUrl();
+    return this.multiView;
+  }
+}
+

package/src/{view/utils → apps/common/view/components}/colored-input/colored-text-input.ts

@@ -7,7 +7,7 @@ import * as DG from 'datagrok-api/dg';
 import $ from 'cash-dom';
 
 // inner dependencies
-import '../../style/colored-text-input.css';
+import './style.css';
 
 
 /** Class for colorizing input in the textarea of DG.InputBase.  */

package/src/{view/utils → apps/common/view/components}/draw-molecule.ts

@@ -6,7 +6,7 @@ import {errorToConsole} from '@datagrok-libraries/utils/src/to-console';
 
 import $ from 'cash-dom';
 
-import {extractAtomDataV3000} from '../../model/structure-app/mol-transformations';
+import {extractAtomDataV3000} from '../../../structure/model/mol-transformations';
 
 /** Draw molecule on the canvas and append it to the specified div, with the
  * option of zoom-in */

package/src/{view/utils → apps/common/view/components}/molecule-img.ts

@@ -64,7 +64,7 @@ export class MoleculeImage {
   }
 
   private async zoomIn(): Promise<void> {
-    const dialog = ui.dialog({title: 'Molecule', showFooter:false});
+    const dialog = ui.dialog({title: 'Molecule', showFooter: false});
     const dialogDivStyle = {
       overflowX: 'scroll',
     };
@@ -79,7 +79,7 @@ export class MoleculeImage {
 
     const dialogCanvas = ui.canvas(dialogCanvasWidth, dialogCanvasHeight);
     await this.drawMolBlockOnCanvas(dialogCanvas);
-    
+
     const dialogDiv = ui.block([dialogCanvas], {style: dialogDivStyle});
     dialog.add(dialogDiv).showModal(true);
 
@@ -117,6 +117,6 @@ export class MoleculeImage {
     //$(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'));
+    moleculeImgDiv.append(ui.tooltip.bind(canvas, 'Click to zoom'));
   }
 }

package/src/{view/const/ui.ts → apps/common/view/const.ts}

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