@datagrok/sequence-translator 1.3.12 → 1.3.14

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datagrok/sequence-translator",
   "friendlyName": "Sequence Translator",
-  "version": "1.3.12",
+  "version": "1.3.14",
   "author": {
     "name": "Alexey Choposky",
     "email": "achopovsky@datagrok.ai"
@@ -22,10 +22,10 @@
     }
   ],
   "dependencies": {
-    "@datagrok-libraries/bio": "5.42.9",
+    "@datagrok-libraries/bio": "5.42.12",
     "@datagrok-libraries/chem-meta": "^1.2.5",
     "@datagrok-libraries/tutorials": "^1.3.13",
-    "@datagrok-libraries/utils": "^4.2.13",
+    "@datagrok-libraries/utils": "^4.2.29",
     "@types/react": "^18.0.15",
     "cash-dom": "^8.1.0",
     "datagrok-api": "^1.20.0",
@@ -39,10 +39,10 @@
     "wu": "latest"
   },
   "devDependencies": {
-    "@datagrok-libraries/helm-web-editor": "^1.1.8",
-    "@datagrok-libraries/js-draw-lite": "^0.0.6",
+    "@datagrok-libraries/helm-web-editor": "^1.1.10",
+    "@datagrok-libraries/js-draw-lite": "^0.0.8",
     "@datagrok/bio": "^2.14.2",
-    "@datagrok/helm": "^2.4.1",
+    "@datagrok/helm": "^2.4.4",
     "@datagrok/chem": "^1.11.3",
     "@types/jquery": "^3.5.14",
     "@types/js-yaml": "^4.0.5",

package/src/apps/common/view/components/colored-input/style.css

@@ -25,4 +25,5 @@
   color: transparent;
   white-space: pre-wrap;
   word-wrap: break-word;
+  padding-left: 35px;
 }

package/src/apps/structure/view/style.css

@@ -4,25 +4,6 @@
   padding-right: 20px;
 }
 
-.st-structure-input-form {
-  text-align: right;
-  vertical-align: top;
-  min-width: 95px;
-}
-
-.st-structure-direction-choice label {
-  min-width: 100px;
-  float: right;
-}
-
-.st-structure-direction-choice div {
-  justify-content: right;
-}
-
-.st-structure-text-input-td { /* Style for td containing textarea */
-  width: 100%;
-}
-
 .st-structure-mol-img {
   margin-right: 30px;
   float: right;
@@ -37,3 +18,17 @@
   flex-direction: row-reverse;
   padding-top: 20px;
 }
+
+.st-structure-clear-buttons {
+  justify-content: space-between;
+  padding: 13px 10px 13px 10px;
+}
+
+.st-direction-inputs {
+  align-items: end;
+}
+
+.st-structure-inputs {
+  flex-grow: 2;
+  padding-left: 10px;
+}

package/src/apps/structure/view/ui.ts

@@ -33,7 +33,7 @@ class StructureAppLayout {
     this.onInvalidInput = new rxjs.Subject<string>();
     this.inputBase = Object.fromEntries(
       STRANDS.map(
-        (key) => [key, ui.input.textArea('', {value: '', onValueChanged: () => { this.onInput.next(); }})]
+        (key) => [key, ui.input.textArea(key.toUpperCase(), {value: '', onValueChanged: () => { this.onInput.next(); }})]
       )
     );
     this.useChiralInput = ui.input.bool('Use chiral', {value: true});
@@ -91,7 +91,7 @@ class StructureAppLayout {
     return boolInputsAndButton;
   }
 
-  private getTableInput(th: ITranslationHelper): HTMLTableElement {
+  private getTableInput(th: ITranslationHelper): HTMLElement {
     const coloredInput = Object.fromEntries(
       STRANDS.map(
         (key) => [key, new ColoredTextInput(this.inputBase[key], th.highlightInvalidSubsequence)]
@@ -140,32 +140,16 @@ class StructureAppLayout {
         }
       ));
 
-    const tableRows = STRANDS.map((strand) => {
-      return {
-        label: label[strand],
-        textInput: coloredInput[strand].root,
-        clear: clearBlock[strand],
-        choiceInput: directionChoiceInput[strand].root,
-      };
-    });
-    const tableLayout = ui.table(
-      tableRows, (item) => [item.label, item.textInput, item.clear, item.choiceInput]);
-    $(tableLayout).css('margin-top', '10px');
+    const sequenseInputs = ui.form([], 'st-structure-inputs');
+    const clearButtons = ui.divV([], 'st-structure-clear-buttons');
+    const directionInputs = ui.form([], 'st-direction-inputs'); 
 
     for (const strand of STRANDS) {
-      let element = label[strand].parentElement!;
-      element.classList.add('st-structure-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-structure-input-form', 'st-structure-direction-choice');
-
-      element = this.inputBase[strand].root.parentElement!;
-      element.classList.add('st-structure-text-input-td');
+      sequenseInputs.append(this.inputBase[strand].root);
+      clearButtons.append(clearBlock[strand]);
+      directionInputs.append(directionChoiceInput[strand].root);
     }
-    return tableLayout;
+    return ui.divH([sequenseInputs, clearButtons, directionInputs]);
   }
 
   private getStrandData() {

package/src/package.ts

@@ -16,12 +16,12 @@ import {demoOligoPatternUI, demoOligoStructureUI, demoOligoTranslatorUI} from '.
 import {getExternalAppViewFactories} from './plugins/mermade';
 
 //polytool specific
-import {getPolyToolConversionDialog, polyToolEnumerateHelmUI, polyToolEnumerateChemUI} from './polytool/pt-dialog';
+import {getPolyToolConversionDialog, polyToolEnumerateChemUI} from './polytool/pt-dialog';
+import {polyToolEnumerateHelmUI} from './polytool/pt-enumeration-helm-dialog';
 import {_setPeptideColumn} from './polytool/utils';
 import {PolyToolCsvLibHandler} from './polytool/csv-to-json-monomer-lib-converter';
 import {ITranslationHelper} from './types';
 import {addContextMenuUI} from './utils/context-menu';
-import {NOTATION} from '@datagrok-libraries/bio/src/utils/macromolecule/consts';
 
 export const _package: OligoToolkitPackage = new OligoToolkitPackage(/*{debug: true}/**/);
 
@@ -152,7 +152,7 @@ async function getSpecifiedAppView(appName: string): Promise<DG.ViewBase> {
   return view;
 }
 
-//top-menu: Bio | Convert | PolyTool-Convert
+//top-menu: Bio | PolyTool | Convert...
 //name: polyToolConvert
 //description: Perform cyclization of polymers
 export async function polyToolConvert(): Promise<void> {
@@ -165,14 +165,14 @@ export async function polyToolConvert(): Promise<void> {
   }
 }
 
-//top-menu: Bio | Convert | PolyTool-Enumerate HELM
+//top-menu: Bio | PolyTool | Enumerate HELM...
 //name: polyToolEnumerateHelm
 //description: Perform cyclization of polymers
 export async function polyToolEnumerateHelm(): Promise<void> {
-  await polyToolEnumerateHelmUI();
+  await polyToolEnumerateHelmUI(grok.shell.tv?.dataFrame.currentCell);
 }
 
-//top-menu: Bio | Convert | PolyTool-Enumerate Chem
+//top-menu: Bio | PolyTool | Enumerate Chem...
 //name: polyToolEnumerateChem
 //description: Perform cyclization of polymers
 export async function polyToolEnumerateChem(): Promise<void> {

package/src/polytool/pt-dialog.ts

@@ -4,13 +4,8 @@ import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
 import $ from 'cash-dom';
-import wu from 'wu';
-import {Unsubscribable} from 'rxjs';
 
-import {NOTATION} from '@datagrok-libraries/bio/src/utils/macromolecule/consts';
 import {getHelmHelper} from '@datagrok-libraries/bio/src/helm/helm-helper';
-import {HelmAtom, HelmMol} from '@datagrok-libraries/bio/src/helm/types';
-// import {FormsViewer} from '@datagrok-libraries/utils/src/viewers/forms-viewer';
 
 import {RuleInputs, RULES_PATH, RULES_STORAGE_NAME} from './pt-rules';
 import {addTransformedColumn} from './pt-conversion';
@@ -18,75 +13,13 @@ import {addTransformedColumn} from './pt-conversion';
 import {handleError} from './utils';
 import {defaultErrorHandler} from '../utils/err-info';
 import {getLibrariesList} from './utils';
-import {getPtEnumeratorHelm, PT_HELM_EXAMPLE} from './pt-enumeration-helm';
 import {getEnumerationChem, PT_CHEM_EXAMPLE} from './pt-enumeration-chem';
 import {
-  PolyToolEnumeratorParams, PolyToolEnumeratorType, PolyToolEnumeratorTypes, PolyToolPlaceholders
-} from './types';
+  PT_ERROR_DATAFRAME, PT_UI_ADD_HELM, PT_UI_DIALOG_CONVERSION, PT_UI_DIALOG_ENUMERATION,
+  PT_UI_GET_HELM, PT_UI_RULES_USED, PT_UI_USE_CHIRALITY, PT_WARNING_COLUMN
+} from './const';
 
 import {_package} from '../package';
-import {PolyToolPlaceholdersInput} from './pt-placeholders-input';
-import {InputBase} from 'datagrok-api/dg';
-import {PT_ERROR_DATAFRAME, PT_UI_ADD_HELM, PT_UI_DIALOG_CONVERSION, PT_UI_DIALOG_ENUMERATION, PT_UI_GET_HELM, PT_UI_RULES_USED, PT_UI_USE_CHIRALITY, PT_WARNING_COLUMN} from './const';
-import {PolyToolEnumerateDialog} from './pt-enumeration-helm-dialog';
-
-export async function polyToolEnumerateHelmUI(cell?: DG.Cell): Promise<void> {
-  const maxWidth = window.innerWidth;
-  const maxHeight = window.innerHeight;
-
-  try {
-    const resizeInputs = () => {
-      const contentHeight = $(dialog.root).find('div.d4-dialog-contents').get(0)!.clientHeight;
-
-      const fitInputs: { [idx: number]: number } = {1: 1 /*, 3: 0.5*/};
-      const fitInputsSumHeight = Object.values(fitInputs).reduce((sum, h) => sum + h, 0);
-
-      const otherInputsHeight: number = dialog.inputs.filter((input, idx) => !(idx in fitInputs))
-        .map((input) => input.root.offsetHeight).reduce((sum, h) => sum + h, 0);
-      const remainFitHeight = contentHeight - otherInputsHeight - 38;
-      dialog.inputs.forEach((input, idx) => {
-        if (idx in fitInputs) {
-          const inputFitHeight = remainFitHeight * fitInputs[idx] / fitInputsSumHeight;
-          input.root.style.height = `${inputFitHeight}px`;
-        }
-      });
-    };
-    const [dialog, inputs] = await PolyToolEnumerateDialog.create2(cell, resizeInputs);
-
-    let isFirstShow = true;
-    ui.onSizeChanged(dialog.root).subscribe(() => {
-      if (isFirstShow) {
-        const dialogInputList = dialog.inputs;
-        const dialogRootCash = $(dialog.root);
-        const contentMaxHeight = maxHeight
-          - dialogRootCash.find('div.d4-dialog-header').get(0)!.offsetHeight
-          - dialogRootCash.find('div.d4-dialog-footer').get(0)!.offsetHeight;
-
-        // dialog.inputs2.macromolecule.root.style.backgroundColor = '#CCFFCC';
-
-        const dialogWidth = maxWidth * 0.7;
-        const dialogHeight = maxHeight * 0.7;
-
-        // Centered, but resizable dialog
-        dialog.root.style.width = `${Math.min(maxWidth, dialogWidth)}px`;
-        dialog.root.style.height = `${Math.min(maxHeight, dialogHeight)}px`;
-        dialog.root.style.left = `${Math.floor((maxWidth - dialog.root.offsetWidth) / 2)}px`;
-        dialog.root.style.top = `${Math.floor((maxHeight - dialog.root.offsetHeight) / 2)}px`;
-
-        isFirstShow = false;
-      }
-
-      resizeInputs();
-    });
-
-    _package.logger.debug('PolyToolEnumerateHelmUI: dialog before show');
-    const res = dialog.show({width: Math.max(350, maxWidth * 0.7), /* center: true,*/ resizable: true});
-    _package.logger.debug('PolyToolEnumerateHelmUI: dialog after show');
-    const k = 42;
-  } catch (_err: any) {
-    grok.shell.warning('To run PolyTool Enumeration, sketch the macromolecule and select monomers to vary');
-  }
-}
 
 export function polyToolEnumerateChemUI(cell?: DG.Cell): void {
   getPolyToolEnumerationChemDialog(cell)