@datagrok/sequence-translator 1.1.0 → 1.1.4

package/src/view/tabs/axolabs.ts

@@ -282,14 +282,14 @@ export class AxolabsTabUI {
             lstMy.push(ent);//getShortName(ent));
         }
 
-        let loadPattern = ui.choiceInput('Load Pattern', '', lstMy, (v: string) => parsePatternAndUpdateUi(v));
+        let loadPattern = ui.choiceInput('Load pattern', '', lstMy, (v: string) => parsePatternAndUpdateUi(v));
 
         const currentUserName = (await grok.dapi.users.current()).friendlyName;
         const otherUsers = 'Other users';
 
         const patternListChoiceInput = ui.choiceInput('', currentUserName, [currentUserName, otherUsers], (v: string) => {
           const currentList = v === currentUserName ? lstMy : lstOthers;
-          loadPattern = ui.choiceInput('Load Pattern', '', currentList, (v: string) => parsePatternAndUpdateUi(v));
+          loadPattern = ui.choiceInput('Load pattern', '', currentList, (v: string) => parsePatternAndUpdateUi(v));
 
           loadPattern.root.append(patternListChoiceInput.input);
           loadPattern.root.append(loadPattern.input);
@@ -391,7 +391,7 @@ export class AxolabsTabUI {
     const baseChoices: string[] = Object.keys(axolabsStyleMap);
     const defaultBase: string = baseChoices[0];
     const enumerateModifications = [defaultBase];
-    const sequenceBase = ui.choiceInput('Sequence Basis', defaultBase, baseChoices, (v: string) => {
+    const sequenceBase = ui.choiceInput('Sequence basis', defaultBase, baseChoices, (v: string) => {
       updateBases(v);
       updateOutputExamples();
     });
@@ -421,7 +421,7 @@ export class AxolabsTabUI {
     ));
     const strandLengthInput = Object.fromEntries(STRANDS.map(
       (strand) => {
-        const input = ui.intInput(`${strand} Length`, DEFAULT_SEQUENCE_LENGTH, () => updateUiForNewSequenceLength());
+        const input = ui.intInput(`${STRAND_NAME[strand]} length`, DEFAULT_SEQUENCE_LENGTH, () => updateUiForNewSequenceLength());
         input.setTooltip(`Length of ${STRAND_NAME[strand].toLowerCase()}, including overhangs`);
         return [strand, input];
     }));
@@ -437,7 +437,7 @@ export class AxolabsTabUI {
 
     // todo: rename to strandColumnInput
     const inputStrandColumn = Object.fromEntries(STRANDS.map((strand) => {
-      const input: StringInput = ui.choiceInput(`${STRAND_NAME[strand]} Column`, '', [], (colName: string) => {
+      const input: StringInput = ui.choiceInput(`${STRAND_NAME[strand]} column`, '', [], (colName: string) => {
         validateStrandColumn(colName, strand);
         strandVar[strand] = colName;
       });
@@ -491,19 +491,21 @@ export class AxolabsTabUI {
       // todo: remove ts-ignore
       // @ts-ignore
       outputExample[s].input.disabled = 'true';
+      let options = ui.div([
+        ui.button(ui.iconFA('copy', () => {}), () => {
+          navigator.clipboard.writeText(outputExample[s].value).then(() =>
+            grok.shell.info('Sequence was copied to clipboard'));
+        }),
+      ], 'ui-input-options');
+      options.style.height = 'inherit';
       outputExample[s].root.append(
-        ui.div([
-          ui.button(ui.iconFA('copy', () => {}), () => {
-            navigator.clipboard.writeText(outputExample[s].value).then(() =>
-              grok.shell.info('Sequence was copied to clipboard'));
-          }),
-        ], 'ui-input-options'),
+        options
       );
     })
 
     const inputIdColumnDiv = ui.div([]);
     const svgDiv = ui.div([]);
-    const asExampleDiv = ui.div([]);
+    const asExampleDiv = ui.div([], 'ui-form ui-form-wide');
     const appAxolabsDescription = ui.div([]);
     const loadPatternDiv = ui.div([]);
     const asModificationDiv = ui.div([]);
@@ -526,7 +528,7 @@ export class AxolabsTabUI {
 
     const tables = ui.tableInput('Tables', grok.shell.tables[0], grok.shell.tables, (t: DG.DataFrame) => {
       STRANDS.forEach((strand) => {
-        inputStrandColumn[strand] = ui.choiceInput(`${strand} Column`, '', t.columns.names(), (colName: string) => {
+        inputStrandColumn[strand] = ui.choiceInput(`${strand} column`, '', t.columns.names(), (colName: string) => {
           validateStrandColumn(colName, strand);
           strandVar[strand] = colName;
         });
@@ -535,7 +537,7 @@ export class AxolabsTabUI {
       })
 
       // todo: unify with inputStrandColumn
-      const inputIdColumn = ui.choiceInput('ID Column', '', t.columns.names(), (colName: string) => {
+      const inputIdColumn = ui.choiceInput('ID column', '', t.columns.names(), (colName: string) => {
         validateIdsColumn(colName);
         idVar = colName;
       });
@@ -546,7 +548,7 @@ export class AxolabsTabUI {
 
     // todo: unify with strandVar
     let idVar = '';
-    const inputIdColumn = ui.choiceInput('ID Column', '', [], (colName: string) => {
+    const inputIdColumn = ui.choiceInput('ID column', '', [], (colName: string) => {
       validateIdsColumn(colName);
       idVar = colName;
     });
@@ -554,7 +556,7 @@ export class AxolabsTabUI {
 
     updatePatternsList();
 
-    const createAsStrand = ui.boolInput('Create AS Strand', true, (v: boolean) => {
+    const createAsStrand = ui.boolInput('Anti sense strand', true, (v: boolean) => {
       modificationSection[AS].hidden = !v;
       inputStrandColumnDiv[AS].hidden = !v;
       asLengthDiv.hidden = !v;
@@ -565,7 +567,7 @@ export class AxolabsTabUI {
     });
     createAsStrand.setTooltip('Create antisense strand sections on SVG and table to the right');
 
-    const saveAs = ui.textInput('Save As', 'Pattern Name', () => updateSvgScheme());
+    const saveAs = ui.textInput('Save as', 'Pattern name', () => updateSvgScheme());
     saveAs.setTooltip('Name Of New Pattern');
 
 
@@ -575,11 +577,11 @@ export class AxolabsTabUI {
 
     const comment = ui.textInput('Comment', '', () => updateSvgScheme());
 
-    const savePatternButton = ui.button('Save', () => {
+    const savePatternButton = ui.bigButton('Save', () => {
       if (saveAs.value !== '')
         savePattern().then(() => grok.shell.info('Pattern saved'));
       else {
-        const name = ui.stringInput('Enter Name', '');
+        const name = ui.stringInput('Enter name', '');
         ui.dialog('Pattern Name')
           .add(name.root)
           .onOK(() => {
@@ -590,7 +592,7 @@ export class AxolabsTabUI {
       }
     });
 
-    const convertSequenceButton = ui.button('Convert Sequences', () => {
+    const convertSequenceButton = ui.bigButton('Convert', () => {
       const condition = [true, createAsStrand.value];
       if (STRANDS.some((s, i) => condition[i] && strandVar[s] === ''))
         grok.shell.info('Please select table and columns on which to apply pattern');
@@ -633,22 +635,19 @@ export class AxolabsTabUI {
       inputExample[SS].root,
       outputExample[SS].root,
       asExampleDiv,
-    ], 'ui-form');
+    ], 'ui-form ui-form-wide');
 
-    const inputsSection = ui.div([
+    const inputsSection = ui.block50([
       ui.h1('Convert options'),
-      ui.divH([
-        tables.root,
-        inputStrandColumnDiv[SS],
-      ]),
-      ui.divH([
-        inputStrandColumnDiv[AS],
-        inputIdColumnDiv,
-      ]),
+      tables.root,
+      inputStrandColumnDiv[SS],
+      inputStrandColumnDiv[AS],
+      inputIdColumnDiv,
       ui.buttonsInput([
         convertSequenceButton,
       ]),
-    ], 'ui-form');
+    ]);
+    inputsSection.classList.add('ui-form');
 
     const downloadButton = ui.button('Download', () => svg.saveSvgAsPng(document.getElementById('mySvg'), saveAs.value,
       {backgroundColor: 'white'}));
@@ -665,7 +664,7 @@ export class AxolabsTabUI {
             ui.h1('Pattern options'),
           ]),
           ui.divH([
-            ui.div([
+            ui.block([
               strandLengthInput[SS].root,
               asLengthDiv,
               sequenceBase.root,
@@ -676,7 +675,7 @@ export class AxolabsTabUI {
                 savePatternButton,
               ]),
             ], 'ui-form'),
-            ui.div([
+            ui.block([
               createAsStrand.root,
               fullyPto.root,
               firstPto[SS].root,
@@ -685,7 +684,7 @@ export class AxolabsTabUI {
               terminalModification[SS][THREE_PRIME].root,
               asModificationDiv,
             ], 'ui-form'),
-          ], 'ui-form'),
+          ]),
         ], 'ui-form'),
         inputsSection,
         exampleSection,

package/src/view/tabs/main.ts

@@ -58,9 +58,9 @@ export class MainTabUI {
     const sequenceColoredInput = new ColoredTextInput(this.sequenceInputBase, highlightInvalidSubsequence);
 
     const downloadMolfileButton = ui.button(
-      'Get Molfile',
+      'Get SDF',
       () => { this.saveMolfile(); },
-      'Save sequence as Molfile V3000');
+      'Save structure as SDF');
 
     const copySmilesButton = ui.button(
       'Copy SMILES',
@@ -100,8 +100,8 @@ export class MainTabUI {
 
   private saveMolfile(): void {
     const result = (new SequenceToMolfileConverter(this.sequence, false,
-      this.formatChoiceInput.value!)).convert();
-    download(this.sequence + '.mol', encodeURIComponent(result));
+      this.formatChoiceInput.value!)).convert() + '\n$$$$';
+    download(this.sequence + '.sdf', encodeURIComponent(result));
   }
 
   private copySmiles(): void {

package/src/view/tabs/sdf.ts

@@ -26,9 +26,10 @@ const STRANDS = ['ss', 'as', 'as2'] as const;
 export class SdfTabUI {
   constructor() {
     this.onInput = new rxjs.Subject<string>();
+    this.onInvalidInput = new rxjs.Subject<string>();
     this.inputBase = Object.fromEntries(
       STRANDS.map(
-        (key) => [key, ui.textInput('', DEFAULT_AXOLABS_INPUT, () => { this.onInput.next(); })]
+        (key) => [key, ui.textInput('', '', () => { this.onInput.next(); })]
       )
     );
     this.useChiralInput = ui.boolInput('Use chiral', true);
@@ -43,9 +44,14 @@ export class SdfTabUI {
     DG.debounce<string>(this.onInput, 300).subscribe(async () => {
       await this.updateMoleculeImg();
     });
+
+    DG.debounce<string>(this.onInvalidInput, 1000).subscribe(async () => {
+      grok.shell.warning('Insert Sense strand');
+    });
   }
 
   private onInput: rxjs.Subject<string>;
+  private onInvalidInput: rxjs.Subject<string>;
   private useChiralInput: DG.InputBase<boolean | null>;
   private saveAllStrandsInput: DG.InputBase<boolean | null>;
   private inputBase: {[key: string]: DG.InputBase<string>};
@@ -90,15 +96,21 @@ export class SdfTabUI {
 
     const directionChoiceInput = Object.fromEntries(
       STRANDS.map(
-        (key) => [key, ui.choiceInput(
-          `${key.toUpperCase()} direction`, DIRECTION.STRAIGHT, [DIRECTION.STRAIGHT, DIRECTION.INVERSE]
-        )]
+        (key, idx) => {
+          const selected = (idx === 0) ? DIRECTION.STRAIGHT : DIRECTION.INVERSE;
+          return [key, ui.choiceInput(
+            `${key.toUpperCase()} direction`, selected, [DIRECTION.STRAIGHT, DIRECTION.INVERSE]
+          )]
+        }
       )
     );
 
-    STRANDS.forEach((strand) => {
+    STRANDS.forEach((strand, idx) => {
       directionChoiceInput[strand].onChanged(() => {
-        this.directionInversion[strand] = directionChoiceInput[strand].value === DIRECTION.INVERSE;
+        let value = directionChoiceInput[strand].value === DIRECTION.INVERSE;
+        // warning: the next line is necessary until the legacy notion of direction used in the molfile generation gets fixed
+        if (idx > 0) { value = !value; }
+        this.directionInversion[strand] = value;
         this.onInput.next();
       });
     });
@@ -142,14 +154,22 @@ export class SdfTabUI {
 
   private getStrandData() {
     return Object.fromEntries(
-      STRANDS.map((strand) => [strand, {
-        strand: this.inputBase[strand].value.replace(/\s*/g, ''),
-        invert: this.directionInversion[strand]
-      }])
+      STRANDS.map((strand, idx) => {
+        let invert = this.directionInversion[strand];
+        return [strand, {
+          strand: this.inputBase[strand].value.replace(/\s*/g, ''),
+          invert: invert
+        }]
+      })
     );
   }
 
   private getMolfile(ss: StrandData, as: StrandData, as2: StrandData): string {
+    if (ss.strand === '' && (as.strand !== '' || as2.strand !== '')) {
+      this.onInvalidInput.next();
+      return '';
+    }
+
     return getLinkedMolfile(ss, as, as2, this.useChiralInput.value!);
   }
 

package/src/view/view.ts

@@ -85,9 +85,7 @@ class TabLayout {
       if (control.currentPane.name !== MAIN_TAB)
         this.urlRouter.searchParams.delete('seq');
       else {
-        console.log('sequence:', this.mainTab.sequence);
         this.urlRouter.searchParams.set('seq', this.mainTab.sequence);
-        console.log('searchParams:', Object.entries(this.urlRouter.searchParams));
       }
       this.urlRouter.updatePath(control);
     });

package/src/tests/smiles-tests.ts

@@ -1,33 +0,0 @@
-/* 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 {before, category, expect, test} from '@datagrok-libraries/utils/src/test';
-import {DEFAULT_FORMATS} from '../model/const';
-import {getJsonData} from '../model/data-loading-utils/json-loader';
-import {axolabsToSmiles} from './const';
-import {_package} from '../package';
-import {SequenceToMolfileConverter} from '../model/sequence-to-structure-utils/sequence-to-molfile';
-
-function getSmiles(strand: string, format: string): string {
-  const molfile = (new SequenceToMolfileConverter(strand, false, format)).convert();
-  return DG.chem.convert(molfile, DG.chem.Notation.MolBlock, DG.chem.Notation.Smiles);
-}
-
-const AXOLABS = DEFAULT_FORMATS.AXOLABS;
-
-category('Axolabs to smiles', () => {
-  before(async () => {
-    await getJsonData();
-    await _package.initMonomerLib();
-  });
-
-  for (const strand of Object.keys(axolabsToSmiles)) {
-    test(`${strand} to SMILES`, async () => {
-      const expected = axolabsToSmiles[strand];
-      const result = getSmiles(strand, AXOLABS);
-      expect(result, expected);
-    });
-  }
-});