@datagrok/sequence-translator 1.2.3 → 1.2.4

package/package.json

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

package/src/view/apps/oligo-pattern.ts

@@ -5,7 +5,7 @@ import * as DG from 'datagrok-api/dg';
 
 import {axolabsStyleMap} from '../../model/data-loading-utils/json-loader';
 import {
-  DEFAULT_PTO, DEFAULT_SEQUENCE_LENGTH, MAX_SEQUENCE_LENGTH, USER_STORAGE_KEY, EXAMPLE_MIN_WIDTH, SS, AS, STRAND_NAME, STRANDS, TERMINAL, TERMINAL_KEYS, THREE_PRIME, FIVE_PRIME, JSON_FIELD as FIELD
+  DEFAULT_PTO, DEFAULT_SEQUENCE_LENGTH, MAX_SEQUENCE_LENGTH, USER_STORAGE_KEY, SS, AS, STRAND_NAME, STRANDS, TERMINAL, TERMINAL_KEYS, THREE_PRIME, FIVE_PRIME, JSON_FIELD as FIELD
 } from '../../model/pattern-app/const';
 import {isOverhang} from '../../model/pattern-app/helpers';
 import {generateExample, translateSequence, getShortName, isCurrentUserCreatedThisPattern, findDuplicates, addColumnWithIds, addColumnWithTranslatedSequences} from '../../model//pattern-app/oligo-pattern';
@@ -530,7 +530,6 @@ export class PatternLayoutHandler {
     const inputIdColumnDiv = ui.div([]);
     const svgDiv = ui.div([]);
     const asExampleDiv = ui.div([], 'ui-form ui-form-wide');
-    const appAxolabsDescription = ui.div([]);
     const loadPatternDiv = ui.div([]);
     const asModificationDiv = ui.form([]);
     const isEnumerateModificationsDiv = ui.divH([
@@ -678,7 +677,7 @@ export class PatternLayoutHandler {
       {backgroundColor: 'white'}), 'Download pattern as PNG image', '');
      
     const editPattern = ui.link('Edit pattern', ()=>{
-      ui.dialog('Edit patter')
+      ui.dialog('Edit pattern')
       .add(ui.divV([
         ui.h1('PTO'),
         ui.divH([
@@ -695,56 +694,6 @@ export class PatternLayoutHandler {
       .show()
     }, 'Edit pattern', '');  
 
-    const mainSection = ui.panel([
-      ui.block([
-        svgDiv,
-      ], {style: {overflowX: 'scroll'}}),
-      downloadButton,
-      isEnumerateModificationsDiv,
-      ui.div([
-        ui.div([
-          ui.divH([
-            ui.h1('Pattern options'),
-          ]),
-          ui.divH([
-            ui.block([
-              strandLengthInput[SS].root,
-              asLengthDiv,
-              sequenceBase.root,
-              comment.root,
-              loadPatternDiv,
-              saveAs.root,
-              ui.buttonsInput([
-                //savePatternButton,
-              ]),
-            ], 'ui-form'),
-            ui.block([
-              createAsStrand.root,
-              fullyPto.root,
-              firstPto[SS].root,
-              firstPto[AS].root,
-              terminalModification[SS][FIVE_PRIME].root,
-              terminalModification[SS][THREE_PRIME].root,
-              asModificationDiv,
-            ], 'ui-form'),
-          ]),
-        ], 'ui-form'),
-        inputsSection,
-        exampleSection,
-      ], {style: {flexWrap: 'wrap'}}),
-    ]);
-
-    const info = ui.info(
-      [
-        ui.divText('\n How to define new pattern:', {style: {'font-weight': 'bolder'}}),
-        ui.divText('1. Choose table and columns with sense and antisense strands'),
-        ui.divText('2. Choose lengths of both strands by editing checkboxes below'),
-        ui.divText('3. Choose basis and PTO status for each nucleotide'),
-        ui.divText('4. Set additional modifications for sequence edges'),
-        ui.divText('5. Press \'Convert Sequences\' button'),
-        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([

package/src/view/apps/oligo-structure.ts

@@ -126,9 +126,10 @@ export class StructureLayoutHandler {
     const clearBlock = Object.fromEntries(
       STRANDS.map(
         (key) => {
-          const icon = ui.iconFA('eraser', () => {coloredInput[key].inputBase.value = ''});
-          ui.tooltip.bind(icon, `Clear ${key.toUpperCase()}`);
-          return [key, icon];
+          const clearIcon = ui.icons.delete(() => { coloredInput[key].inputBase.value = '' });
+          const clearButton = ui.button(clearIcon, () => {});
+          ui.tooltip.bind(clearButton, `Clear ${key.toUpperCase()}`);
+          return [key, clearIcon];
         }
       ));
 

package/src/view/apps/oligo-translator.ts

@@ -5,7 +5,6 @@ import * as DG from 'datagrok-api/dg';
 
 import * as rxjs from 'rxjs';
 import '../style/translator-app.css';
-import $ from 'cash-dom';
 
 import {highlightInvalidSubsequence} from '../utils/colored-input/input-painters';
 import {ColoredTextInput} from '../utils/colored-input/colored-text-input';
@@ -74,12 +73,19 @@ export class TranslatorLayoutHandler {
 
     const formatChoiceInput = ui.div([this.formatChoiceInput]);
 
+    const clearButton = ui.button(
+      ui.icons.delete(() => { sequenceColoredInput.inputBase.value = '' }),
+      () => {}
+    );
+    ui.tooltip.bind(clearButton, 'Clear input');
+
     const inputTableRow = {
       format: formatChoiceInput,
       textInput: sequenceColoredInput.root,
+      clearBtn: clearButton
     };
     const upperBlock = ui.table(
-      [inputTableRow], (item) => [item.format, item.textInput]
+      [inputTableRow], (item) => [item.format, item.textInput, item.clearBtn]
     );
     upperBlock.classList.add('st-translator-input-table');
 

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

@@ -1,11 +1,11 @@
 /* Naming convention: class names should begin with st and app name to avoid naming collitions */
 .st-translator-input-table {
-  width: 100%;
+  /* width: 100%; */
+  margin-right: 20px;
 }
 
 .st-translator-input-table td:has(textarea) {
   width: 100%;
-  padding-right: 20px;
 }
 
 .st-translator-input-table td:has(select) {