@datagrok/bio 2.16.9 → 2.17.1

package/package.json

@@ -2,10 +2,10 @@
   "name": "@datagrok/bio",
   "friendlyName": "Bio",
   "author": {
-    "name": "Aleksandr Tanas",
-    "email": "atanas@datagrok.ai"
+    "name": "Leonid Stolbov",
+    "email": "lstolbov@datagrok.ai"
   },
-  "version": "2.16.9",
+  "version": "2.17.1",
   "description": "Bioinformatics support (import/export of sequences, conversion, visualization, analysis). [See more](https://github.com/datagrok-ai/public/blob/master/packages/Bio/README.md) for details.",
   "repository": {
     "type": "git",
@@ -37,7 +37,7 @@
   ],
   "dependencies": {
     "@biowasm/aioli": "^3.1.0",
-    "@datagrok-libraries/bio": "^5.45.7",
+    "@datagrok-libraries/bio": "^5.45.11",
     "@datagrok-libraries/chem-meta": "^1.2.7",
     "@datagrok-libraries/math": "^1.2.2",
     "@datagrok-libraries/ml": "^6.7.4",
@@ -62,7 +62,7 @@
     "@datagrok-libraries/js-draw-lite": "^0.0.10",
     "@datagrok/chem": "^1.12.3",
     "@datagrok/dendrogram": "^1.2.33",
-    "@datagrok/helm": "^2.5.3",
+    "@datagrok/helm": "^2.5.10",
     "@types/node": "^17.0.24",
     "@types/wu": "^2.1.44",
     "@typescript-eslint/eslint-plugin": "^8.8.1",

package/src/package.ts

@@ -1,3 +1,5 @@
+/* eslint-disable max-params */
+/* eslint-disable max-len */
 /* eslint max-lines: "off" */
 import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
@@ -9,7 +11,7 @@ import {getActivityCliffs} from '@datagrok-libraries/ml/src/viewers/activity-cli
 import {MmDistanceFunctionsNames} from '@datagrok-libraries/ml/src/macromolecule-distance-functions';
 import {BitArrayMetrics, KnownMetrics} from '@datagrok-libraries/ml/src/typed-metrics';
 import {NOTATION, TAGS as bioTAGS} from '@datagrok-libraries/bio/src/utils/macromolecule';
-import {IMonomerLib, IMonomerLibBase, IMonomerSet} from '@datagrok-libraries/bio/src/types';
+import {IMonomerLib} from '@datagrok-libraries/bio/src/types';
 import {SeqPalette} from '@datagrok-libraries/bio/src/seq-palettes';
 import {FastaFileHandler} from '@datagrok-libraries/bio/src/utils/fasta-handler';
 import {SCORE} from '@datagrok-libraries/bio/src/utils/macromolecule/scoring';
@@ -24,14 +26,13 @@ import {ITSNEOptions, IUMAPOptions} from '@datagrok-libraries/ml/src/multi-colum
 import {generateLongSequence, generateLongSequence2} from '@datagrok-libraries/bio/src/utils/generator';
 import {getUserLibSettings, setUserLibSettings} from '@datagrok-libraries/bio/src/monomer-works/lib-settings';
 import {ISeqHelper} from '@datagrok-libraries/bio/src/utils/seq-helper';
-import {RDModule} from '@datagrok-libraries/chem-meta/src/rdkit-api';
+import {RDModule as _RDMoule} from '@datagrok-libraries/chem-meta/src/rdkit-api';
 import {getRdKitModule} from '@datagrok-libraries/bio/src/chem/rdkit-module';
 import {ISeqHandler} from '@datagrok-libraries/bio/src/utils/macromolecule/seq-handler';
 import {MmcrTemps} from '@datagrok-libraries/bio/src/utils/cell-renderer-consts';
 
 import {getMacromoleculeColumns} from './utils/ui-utils';
 import {MacromoleculeDifferenceCellRenderer, MacromoleculeSequenceCellRenderer,} from './utils/cell-renderer';
-import {MacromoleculeCustomCellRenderer} from './utils/cell-renderer-custom';
 import {VdRegionsViewer} from './viewers/vd-regions-viewer';
 import {SequenceAlignment} from './seq_align';
 import {getEncodedSeqSpaceCol} from './analysis/sequence-space';
@@ -318,7 +319,7 @@ export function SeqActivityCliffsEditor(call: DG.FuncCall) {
 //meta.columnTags: quality=Macromolecule, units=custom
 //output: grid_cell_renderer result
 export function customSequenceCellRenderer(): DG.GridCellRenderer {
-  return new MacromoleculeCustomCellRenderer();
+  return new MacromoleculeSequenceCellRenderer();
 }
 
 //name: fastaSequenceCellRenderer
@@ -764,7 +765,7 @@ export function convertDialog() {
 export async function convertSeqNotation(sequence: string, targetNotation: NOTATION, separator?: string): Promise<string | undefined | null> {
   try {
     const col = DG.Column.fromStrings('sequence', [sequence]);
-    const df = DG.DataFrame.fromColumns([col]);
+    const _df = DG.DataFrame.fromColumns([col]);
     const semType = await grok.functions.call('Bio:detectMacromolecule', {col: col});
     if (semType)
       col.semType = semType;

package/src/tests/activity-cliffs-tests.ts

@@ -44,7 +44,7 @@ category('activityCliffs', async () => {
   test('activityCliffsOpens', async () => {
     const testData = !DG.Test.isInBenchmark ?
       {fileName: 'tests/100_3_clustests.csv', tgt: {cliffCount: 3}} :
-      {fileName: 'tests/peptides_motif-with-random_10000.csv', tgt: {cliffCount: 53}};
+      {fileName: 'tests/peptides_with_random_motif_1600.csv', tgt: {cliffCount: 64}};
     const actCliffsDf = await readDataframe(testData.fileName);
     const actCliffsTableView = grok.shell.addTableView(actCliffsDf);
 

package/src/tests/msa-tests.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines-per-function */
 import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
@@ -8,7 +9,6 @@ import {ISeqHelper, getSeqHelper} from '@datagrok-libraries/bio/src/utils/seq-he
 
 import {runKalign} from '../utils/multiple-sequence-alignment';
 import {multipleSequenceAlignmentUI} from '../utils/multiple-sequence-alignment-ui';
-import {awaitContainerStart} from '../utils/docker';
 
 category('MSA', async () => {
   let seqHelper: ISeqHelper;
@@ -87,14 +87,12 @@ MWRSWYCKHPMWRSWYCKHPMWRSWYCKHPMWRSWYCKHPMWRSWYCKHPMWRSWYCKHPMWRSWYCKHPMWRSWYCKHP
   });
 
   test('isCorrectHelm', async () => {
-    await awaitContainerStart();
     await _testMSAOnColumn(helmFromCsv, helmToCsv, NOTATION.HELM, NOTATION.SEPARATOR, undefined, 'mafft');
-  }, {timeout: 60000 /* docker */});
+  }, {timeout: 80000 /* docker */});
 
   test('isCorrectHelmLong', async () => {
-    await awaitContainerStart();
     await _testMSAOnColumn(longHelmFromCsv, longHelmToCsv, NOTATION.HELM, NOTATION.SEPARATOR, undefined, 'mafft');
-  }, {timeout: 60000 /* docker */});
+  }, {timeout: 80000 /* docker */});
 
   test('isCorrectSeparator', async () => {
     await _testMSAOnColumn(

package/src/tests/pepsea-tests.ts

@@ -4,7 +4,6 @@ import {before, category, expect, expectArray, test} from '@datagrok-libraries/u
 import {runPepsea} from '../utils/pepsea';
 import {TestLogger} from './utils/test-logger';
 import {errInfo} from '@datagrok-libraries/bio/src/utils/err-info';
-import {awaitContainerStart} from '../utils/docker';
 
 category('PepSeA', () => {
   const testCsv = `HELM,MSA
@@ -30,10 +29,6 @@ category('PepSeA', () => {
 `;
   const pepseaErrorError: string = 'PepSeA error: The pair (*,M) couldn\'t be found in the substitution matrix';
 
-  before(async () => {
-    await awaitContainerStart();
-  });
-
   test('Basic alignment', async () => {
     const df = DG.DataFrame.fromCsv(testCsv);
     const resMsaCol = await runPepsea(df.getCol('HELM'), 'msa(HELM)');

package/src/tests/renderers-test.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines-per-function */
 import * as grok from 'datagrok-api/grok';
 import * as DG from 'datagrok-api/dg';
 import * as ui from 'datagrok-api/ui';
@@ -196,6 +197,8 @@ category('renderers', () => {
     const df: DG.DataFrame = await grok.dapi.files.readCsv('System:AppData/Bio/samples/FASTA_PT.csv');
     const view = grok.shell.addTableView(df);
     await awaitGrid(view.grid);
+    await df.meta.detectSemanticTypes();
+    await grok.data.detectSemanticTypes(df);
 
     const srcCol = df.getCol('sequence');
     const sh = seqHelper.getSeqHandler(srcCol);
@@ -239,6 +242,8 @@ CTCGGCATGC,2,0
     const df = DG.DataFrame.fromCsv(seqCoordsCsv);
     df.currentRowIdx = 0;
     const view = grok.shell.addTableView(df);
+    await df.meta.detectSemanticTypes();
+    await grok.data.detectSemanticTypes(df);
     const sp: DG.ScatterPlotViewer = df.plot.scatter({x: 'x', y: 'y'});
     view.dockManager.dock(sp, DG.DOCK_TYPE.RIGHT, null);
     await Promise.all([
@@ -253,7 +258,7 @@ CTCGGCATGC,2,0
       clientX: spBcr.left + wp.x, clientY: spBcr.top + wp.y
     });
     const spCanvas = $(sp.root).find('canvas').get()[0] as HTMLCanvasElement;
-    await testEvent(fromEvent(spCanvas, 'mousemove'), () => {
+    await testEvent(DG.debounce(fromEvent(spCanvas, 'mousemove'), 200), () => {
       _package.logger.debug(`Test: event, currentRowIdx=${df.currentRowIdx}`);
       expect($(ui.tooltip.root).find('div table.d4-row-tooltip-table tr td canvas').length, 1);
       expect(sp.hitTest(wp.x, wp.y), 1);

package/src/tests/sequence-space-test.ts

@@ -16,7 +16,7 @@ category('sequenceSpace', async () => {
   test('sequenceSpaceOpens', async () => {
     const testData = !DG.Test.isInBenchmark ?
       {fileName: 'tests/100_3_clustests.csv'} :
-      {fileName: 'tests/peptides_motif-with-random_10000.csv'};
+      {fileName: 'tests/peptides_with_random_motif_1600.csv'};
     testFastaDf = await readDataframe(testData.fileName);
     testFastaTableView = grok.shell.addTableView(testFastaDf);
     await _testSequenceSpaceReturnsResult(testFastaDf, DimReductionMethods.UMAP, 'sequence');

package/src/tests/substructure-filters-tests.ts

@@ -1,3 +1,5 @@
+/* eslint-disable max-lines */
+/* eslint-disable max-lines-per-function */
 import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
@@ -152,8 +154,9 @@ category('bio-substructure-filters', async () => {
   test('helm-dialog', async () => {
     const logPrefix = 'Bio tests: substructureFilters/helm-dialog';
     const df = await readDataframe('tests/filter_HELM.csv');
-    await grok.data.detectSemanticTypes(df);
     const view = grok.shell.addTableView(df);
+    await grok.data.detectSemanticTypes(df);
+    await df.meta.detectSemanticTypes();
 
     _package.logger.debug(`${logPrefix}, filter attaching.`);
     const filter = new BioSubstructureFilter(seqHelper, _package.logger);
@@ -178,7 +181,9 @@ category('bio-substructure-filters', async () => {
       await testEvent(df.onRowsFiltered, () => {}, () => {
         bf.props = new BioFilterProps('PEPTIDE1{C}$$$$V2.0');
       }, 20000);
+      setTimeout(() => view.grid.invalidate(), 500);
       await awaitGrid(view.grid);
+      await delay(1000);
       _package.logger.debug(`${logPrefix}, filter 2 changed.`);
       expect(filter.dataFrame!.filter.trueCount, 2);
       expect(filter.dataFrame!.filter.toBinaryString(), '1001');
@@ -187,7 +192,7 @@ category('bio-substructure-filters', async () => {
     }
     await filter.awaitRendered();
     await delay(3000); //TODO: await for grid.onLookChanged
-  });
+  }, {});
 
   // Generates unhandled exception accessing isFiltering before bioFilter created
   test('helm-view', async () => {
@@ -398,8 +403,9 @@ category('bio-substructure-filters', async () => {
 
   test('reset-fasta', async () => {
     const df = await readDataframe('tests/filter_FASTA.csv');
-    await grok.data.detectSemanticTypes(df);
     const view = grok.shell.addTableView(df);
+    await grok.data.detectSemanticTypes(df);
+    await df.meta.detectSemanticTypes();
 
     const fSeqColName: string = 'fasta';
     const fSubStr: string = 'MD';
@@ -432,6 +438,8 @@ category('bio-substructure-filters', async () => {
   test('reopen', async () => {
     const df = await _package.files.readCsv('tests/filter_FASTA.csv');
     const view = grok.shell.addTableView(df);
+    await grok.data.detectSemanticTypes(df);
+    await df.meta.detectSemanticTypes();
 
     const filterList = [{type: 'Bio:bioSubstructureFilter', columnName: 'fasta'}];
 
@@ -448,7 +456,7 @@ category('bio-substructure-filters', async () => {
     const fg2Dn = view.dockManager.dock(fg2, DG.DOCK_TYPE.LEFT);
     await delay(100);
     await awaitGrid(view.grid);
-  });
+  }, {});
 
   async function createFilter(colName: string, df: DG.DataFrame): Promise<BioSubstructureFilter> {
     if (!df.columns.names().includes(colName)) {
@@ -464,5 +472,5 @@ category('bio-substructure-filters', async () => {
     //filter.tableName = df.name;
     return filter;
   };
-});
+}, );
 

package/src/tests/utils.ts

@@ -4,8 +4,6 @@ import * as grok from 'datagrok-api/grok';
 import {delay, expect, testEvent} from '@datagrok-libraries/utils/src/test';
 import {asRenderer, IRenderer, isRenderer} from '@datagrok-libraries/bio/src/types/renderer';
 
-import {startDockerContainer} from '../utils/docker';
-
 import {_package} from '../package-test';
 import {CellRendererBackBase, getGridCellColTemp} from '@datagrok-libraries/bio/src/utils/cell-renderer-back-base';
 

package/src/utils/cell-renderer-custom.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 import * as grok from 'datagrok-api/grok';
 import * as DG from 'datagrok-api/dg';
 import * as ui from 'datagrok-api/ui';
@@ -8,6 +9,7 @@ import {ISeqHelper} from '@datagrok-libraries/bio/src/utils/seq-helper';
 
 import {_package} from '../package';
 
+/// NB! UNUSED LEGACY CODE
 export class MacromoleculeCustomCellRenderer extends DG.GridCellRenderer {
   private readonly seqHelper: ISeqHelper;
 
@@ -41,7 +43,7 @@ export class MacromoleculeCustomCellRenderer extends DG.GridCellRenderer {
     back?.onMouseEnter(gridCell, e);
   }
 
-  override onMouseLeave(gridCell: DG.GridCell, e: MouseEvent) {
+  override onMouseLeave(_gridCell: DG.GridCell, _e: MouseEvent) {
     // TODO: We get gridCell from another column here, so we can not get back object from the column rendered.
     ui.tooltip.hide();
     // const back = this.getRendererBack(gridCell);

package/src/utils/cell-renderer.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 /* eslint-disable max-lines */
 /* eslint-disable max-params */
 /* eslint-disable max-lines-per-function */
@@ -22,7 +23,7 @@ import {getSplitter} from '@datagrok-libraries/bio/src/utils/macromolecule/utils
 import {IMonomerLibBase} from '@datagrok-libraries/bio/src/types';
 import {GapOriginals} from '@datagrok-libraries/bio/src/utils/macromolecule/consts';
 import {execMonomerHoverLinks} from '@datagrok-libraries/bio/src/monomer-works/monomer-hover';
-import {getGridCellColTemp} from '@datagrok-libraries/bio/src/utils/cell-renderer-back-base';
+import {CellRendererBackBase, getGridCellColTemp} from '@datagrok-libraries/bio/src/utils/cell-renderer-back-base';
 import {HelmTypes} from '@datagrok-libraries/bio/src/helm/consts';
 import {MmcrTemps, rendererSettingsChangedState, tempTAGS} from '@datagrok-libraries/bio/src/utils/cell-renderer-consts';
 
@@ -53,6 +54,7 @@ export function processSequence(subParts: string[]): [string[], boolean] {
   return [text, simplified];
 }
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 type RendererGridCellTemp = {
   [MmcrTemps.monomerPlacer]: MonomerPlacer
 }
@@ -73,21 +75,58 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
     this.seqHelper = _package.seqHelper;
   }
 
-  onClick(gridCell: DG.GridCell, _e: MouseEvent): void {
+  getRendererBack(gridCell: DG.GridCell): CellRendererBackBase<string> | null {
+    const [gridCol, tableCol, _temp] = getGridCellColTemp<string, any>(gridCell);
+    if (tableCol.meta.units !== NOTATION.CUSTOM)
+      return _temp.rendererBack;
+    let back: CellRendererBackBase<string> | null = null;
+
+    if (this.seqHelper) {
+      const sh = this.seqHelper.getSeqHandler(tableCol);
+      back = sh.getRendererBack(gridCol, tableCol);
+    }
+    return back;
+  }
+
+  override onClick(gridCell: DG.GridCell, _e: MouseEvent): void {
     const colTemp: TempType = gridCell.cell.column.temp;
     colTemp[tempTAGS.currentWord] = gridCell.cell.value;
     gridCell.grid.invalidate();
+    if (gridCell.cell.column.meta.units === NOTATION.CUSTOM) {
+      const back = this.getRendererBack(gridCell);
+      back?.onClick(gridCell, _e);
+    }
+  }
+
+  override onMouseEnter(gridCell: DG.GridCell, e: MouseEvent) {
+    const back = this.getRendererBack(gridCell);
+    back?.onMouseEnter(gridCell, e);
   }
 
   override onMouseMove(gridCell: DG.GridCell, e: MouseEvent): void {
-    const [gridCol, tableCol, temp] = getGridCellColTemp<string, MonomerPlacer>(gridCell);
-    temp.rendererBack?.onMouseMove(gridCell, e);
+    const back = this.getRendererBack(gridCell);
+    back?.onMouseMove(gridCell, e);
   }
 
-  override onMouseLeave(gridCell: DG.GridCell, e: MouseEvent) {
+  override onMouseLeave(gridCell: DG.GridCell, _e: MouseEvent) {
     execMonomerHoverLinks(gridCell, null);
   }
 
+  override onDoubleClick(gridCell: DG.GridCell, e: MouseEvent) {
+    const back = this.getRendererBack(gridCell);
+    back?.onDoubleClick(gridCell, e);
+  }
+
+  override onKeyDown(gridCell: DG.GridCell, e: KeyboardEvent) {
+    const back = this.getRendererBack(gridCell);
+    back?.onKeyDown(gridCell, e);
+  }
+
+  override onKeyPress(gridCell: DG.GridCell, e: KeyboardEvent) {
+    const back = this.getRendererBack(gridCell);
+    back?.onKeyPress(gridCell, e);
+  }
+
   /**
    * Cell renderer function.
    *
@@ -99,11 +138,11 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
    * @param {DG.GridCell} gridCell Grid cell.
    * @param {DG.GridCellStyle} _cellStyle Cell style.
    */
-  render(
+  renderInt(
     g: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, gridCell: DG.GridCell,
     _cellStyle: DG.GridCellStyle
   ): void {
-    const logPrefix: string = 'MacromoleculeSequenceCellRenderer.render()';
+    const _logPrefix: string = 'MacromoleculeSequenceCellRenderer.render()';
 
     const [gridCol, tableCol, temp] =
       getGridCellColTemp<string, MonomerPlacer>(gridCell);
@@ -111,7 +150,7 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
     const tableColTemp: TempType = tableCol.temp;
     const sh = this.seqHelper.getSeqHandler(tableCol);
 
-    let gapLength = 0;
+    const gapLength = 0;
     const msaGapLength = 8;
 
     // Cell renderer settings
@@ -140,6 +179,15 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
 
     seqColTemp.render(g, x, y, w, h, gridCell, _cellStyle);
   }
+
+  override render(g: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, gridCell: DG.GridCell, cellStyle: DG.GridCellStyle): void {
+    if (gridCell.cell.column?.meta?.units === NOTATION.CUSTOM) {
+      const back = this.getRendererBack(gridCell);
+      back?.render(g, x, y, w, h, gridCell, cellStyle);
+      return;
+    }
+    this.renderInt(g, x, y, w, h, gridCell, cellStyle);
+  }
 }
 
 export class MacromoleculeDifferenceCellRendererBack extends CellRendererWithMonomerLibBackBase {
@@ -151,7 +199,7 @@ export class MacromoleculeDifferenceCellRendererBack extends CellRendererWithMon
   }
 
   render(g: CanvasRenderingContext2D,
-    x: number, y: number, w: number, h: number, gridCell: DG.GridCell, cellStyle: DG.GridCellStyle
+    x: number, y: number, w: number, h: number, gridCell: DG.GridCell, _cellStyle: DG.GridCellStyle
   ): void {
     const dpr = window.devicePixelRatio;
     const grid = gridCell.grid;
@@ -172,7 +220,7 @@ export class MacromoleculeDifferenceCellRendererBack extends CellRendererWithMon
     drawMoleculeDifferenceOnCanvas(g, x, y, w, h, subParts1, subParts2, biotype, this.monomerLib, undefined, undefined);
   }
 
-  async awaitRendered(timeout: number = 10000, reason: string = `${timeout} timeout`): Promise<void> {
+  async awaitRendered(timeout: number = 10000, _reason: string = `${timeout} timeout`): Promise<void> {
     return Promise.resolve();
   }
 
@@ -258,15 +306,15 @@ export function drawMoleculeDifferenceOnCanvas(
       const amino2 = subParts2[i];
 
       let color1 = undefinedColor;
-      if (monomerLib) {
+      if (monomerLib)
         color1 = monomerLib.getMonomerTextColor(biotype, amino1);
-      }
+
 
       if (amino1 != amino2) {
         let color2 = undefinedColor;
-        if (monomerLib) {
+        if (monomerLib)
           color2 = monomerLib.getMonomerTextColor(biotype, amino2);
-        }
+
         const subX0 = printLeftOrCentered(g, amino1, updatedX, updatedY - vShift, w, h,
           {color: color1, pivot: 0, left: true});
         const subX1 = printLeftOrCentered(g, amino2, updatedX, updatedY + vShift, w, h,

package/src/utils/monomer-lib/library-file-manager/style.css

@@ -4,5 +4,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  min-width: 220px;
   width: 100%;
+
 }

package/src/utils/monomer-lib/library-file-manager/ui.ts

@@ -77,6 +77,9 @@ class MonomerLibraryManagerWidget {
   private async getWidgetContent(): Promise<HTMLElement> {
     const libControlsForm = await LibraryControlsManager.createControlsForm();
     $(libControlsForm).addClass('monomer-lib-controls-form');
+    setTimeout(() => {
+      libControlsForm && $(libControlsForm) && $(libControlsForm).removeClass('ui-form-condensed');
+    }, 200);
     const widgetContent = ui.divV([libControlsForm]);
     return widgetContent;
   }
@@ -132,7 +135,7 @@ class LibraryControlsManager {
 
   private _createControlsForm(): HTMLElement {
     const libraryControls = this.createLibraryControls();
-    const inputsForm = ui.form(libraryControls, undefined, false);
+    const inputsForm = ui.wideForm(libraryControls, undefined);
     $(inputsForm).addClass('monomer-lib-controls-form');
 
     return inputsForm;
@@ -287,7 +290,7 @@ class LibManagerView {
         const rightWidth = combinedWidth - leftWidth;
         right.style.width = `${rightWidth}px`;
       }, 100);
-      this._view.subs.push(grok.events.onCurrentViewChanged.subscribe(async () => {
+      this._view.subs.push(grok.events.onCurrentViewChanged.subscribe(() => {
         try {
           const inst = LibManagerView._instance;
           if (inst && inst._view && 'id' in grok.shell.v && grok.shell.v.id === inst._view.id)

package/src/utils/monomer-lib/monomer-manager/duplicate-monomer-manager.ts

@@ -47,12 +47,12 @@ class MonomerCard {
 
 class DuplicateSymbolRow {
   root: HTMLElement = ui.divH([],
-      {style: {
-        alignItems: 'center',
-        width: '100%',
-        overflow: 'hidden',
-        visibility: 'visible',
-      }, classes: 'duplicate-monomer-symbol-row'}
+    {style: {
+      alignItems: 'center',
+      width: '100%',
+      overflow: 'hidden',
+      visibility: 'visible',
+    }, classes: 'duplicate-monomer-symbol-row'}
   );
   monomerCards: MonomerCard[];
   constructor(

package/src/utils/monomer-lib/monomer-manager/monomer-manager.ts

@@ -102,7 +102,7 @@ export class MonomerManager implements IMonomerManager {
   async createNewMonomerLib(libName: string, _monomers: Monomer[]): Promise<void> {
     this.tv?.grid && ui.setUpdateIndicator(this.tv.grid.root, true);
     try {
-      const monomersString = JSON.stringify(_monomers.map((m) => ({...m, lib: undefined, wem: undefined})));
+      const monomersString = JSON.stringify(_monomers.map((m) => ({...m, lib: undefined, wem: undefined})), null, 2);
       if (!libName.endsWith('.json'))
         libName += '.json';
       await (await this.monomerLibManamger.getFileManager()).addLibraryFile(monomersString, libName);
@@ -214,13 +214,23 @@ export class MonomerManager implements IMonomerManager {
     return tv ?? null;
   }
 
+  private _skipLibInputOnchange: boolean = false;
+
   async getViewRoot(libName?: string) {
     const availableMonLibs = (await this.monomerLibManamger.getFileManager()).getValidLibraryPaths();
     this._newMonomerForm.molSketcher.resize();
     if ((this.tv = this.findActiveManagerView()) && (libName ?? this.libInput.value)) {
       // get monomer library list
-      this.libInput && ((this.libInput as DG.ChoiceInput<string>).items = availableMonLibs);
-      libName && (this.libInput.value = libName);
+      try {
+        this._skipLibInputOnchange = true;
+        this.libInput && ((this.libInput as DG.ChoiceInput<string>).items = availableMonLibs);
+        libName && (this.libInput.value = libName);
+      } catch (e) {
+        grok.shell.error('Error updating library list');
+        console.error(e);
+      } finally {
+        this._skipLibInputOnchange = false;
+      }
       const df = await this.getMonomersDf(libName);
       this.tv.dataFrame = df;
       this.adjustColWidths();
@@ -287,6 +297,7 @@ export class MonomerManager implements IMonomerManager {
     this.tv.name = MonomerManager.VIEW_NAME;
     this.libInput = ui.input.choice('Monomer Library', {value: libName, items: availableMonLibs, nullable: false, onValueChanged: async () => {
       try {
+        if (this._skipLibInputOnchange) return;
         const df = await this.getMonomersDf(this.libInput.value!);
           this.tv!.dataFrame = df;
           this.adjustColWidths();
@@ -553,6 +564,8 @@ class MonomerForm implements INewMonomerForm {
       }
       try {
         this.rgroupsGridRoot.style.display = 'none';
+        const rGroupsPane = this.inputsTabControl.panes.find((p) => p.name?.toLowerCase() === 'r-groups');
+        rGroupsPane && (rGroupsPane.header.style.removeProperty('background-color'));
         let smiles = this.molSketcher.getSmiles();
         if (!smiles) {
           this.rgroupsGrid.items = [];
@@ -568,9 +581,21 @@ class MonomerForm implements INewMonomerForm {
           this.rgroupsGrid.items = [];
           this.rgroupsGrid.render();
           this.saveValidationResult = 'At least one R-group is required';
+          rGroupsPane && (rGroupsPane.header.style.setProperty('background-color', '#ff000030'));
           this.invalidateSaveButton();
           return;
         }
+
+        // check for duplicate r-groups
+        const rGroupsSet = new Set(rGroupMatches.map((match) => match[0]));
+        if (rGroupsSet.size !== rGroupMatches.length) {
+          this.saveValidationResult = 'Duplicate R-groups are not allowed';
+          this.rgroupsGridRoot.style.display = 'flex';
+          rGroupsPane && (rGroupsPane.header.style.setProperty('background-color', '#ff000030'));
+          this.invalidateSaveButton();
+          return;
+        }
+
         const rGroupNums = rGroupMatches.map((match) => Number.parseInt(match[0].match(/[1-9]/g)![0]));
         const rGroupItems: RGroup[] = rGroupNums.map((num) => {
           const existingRGroup = this.rgroupsGrid.items.find((rg) => rg[HELM_RGROUP_FIELDS.LABEL] === `R${num}`) as RGroup | undefined;
@@ -581,8 +606,8 @@ class MonomerForm implements INewMonomerForm {
             [HELM_RGROUP_FIELDS.LABEL]: `R${num}`,
           } as unknown as RGroup;
         });
-        if (this.rgroupsGrid.items.length !== rGroupItems.length)
-          this.rgroupsGrid.items = rGroupItems;
+        // if (this.rgroupsGrid.items.length !== rGroupItems.length)
+        this.rgroupsGrid.items = rGroupItems.sort((a, b) => a.label.localeCompare(b.label));
         this.rgroupsGrid.render();
         this.rgroupsGridRoot.style.display = 'flex';
         const mostSimilar = await mostSimilarNaturalAnalog(capSmiles(smiles, rGroupItems), this.polymerTypeInput.value ?? '');
@@ -830,7 +855,7 @@ class MonomerForm implements INewMonomerForm {
       .add(infoTables)
       .addButton('Remove', async () => {
         libJSON = libJSON.filter((m) => !removingMonomers.includes(m));
-        await grok.dapi.files.writeAsText(LIB_PATH + libName, JSON.stringify(libJSON));
+        await grok.dapi.files.writeAsText(LIB_PATH + libName, JSON.stringify(libJSON, null, 2));
         await (await MonomerLibManager.getInstance()).loadLibraries(true);
         await this.refreshTable();
 
@@ -865,7 +890,7 @@ class MonomerForm implements INewMonomerForm {
         else
           libJSON.push({...monomer, lib: undefined, wem: undefined});
 
-        await grok.dapi.files.writeAsText(LIB_PATH + libName, JSON.stringify(libJSON));
+        await grok.dapi.files.writeAsText(LIB_PATH + libName, JSON.stringify(libJSON, null, 2));
         await (await MonomerLibManager.getInstance()).loadLibraries(true);
         await this.refreshTable(monomer.symbol);
         this._molChanged = false; // reset the flag

package/src/utils/multiple-sequence-alignment-ui.ts

@@ -12,7 +12,6 @@ import {pepseaMethods, runPepsea} from './pepsea';
 import {checkInputColumn} from './check-input-column';
 import {MultipleSequenceAlignmentUIOptions} from './types';
 import {kalignVersion, msaDefaultOptions} from './constants';
-import {awaitContainerStart} from './docker';
 
 import '../../css/msa.css';
 import {_package} from '../package';
@@ -176,7 +175,6 @@ async function onColInputChange(
       gapExtendInput.value ??= msaDefaultOptions.pepsea.gapExtend;
 
       return async () => {
-        await awaitContainerStart();
         return runPepsea(col, unusedName, methodInput.value!,
           gapOpenInput.value!, gapExtendInput.value!, clustersColInput.value);
       };
@@ -190,7 +188,6 @@ async function onColInputChange(
       // convert to helm and assign alignment function to PepSea
 
       return async () => {
-        await awaitContainerStart();
         return runPepsea(helmCol, unusedName, methodInput.value!,
           gapOpenInput.value!, gapExtendInput.value!, clustersColInput.value);
       };

package/src/utils/pepsea.ts

@@ -49,9 +49,6 @@ export async function runPepsea(srcCol: DG.Column<string>, unUsedName: string,
   clustersCol: DG.Column<string | number> | null = null, logger?: ILogger
 ): Promise<DG.Column<string>> {
   const pepseaContainer = await Pepsea.getDockerContainer();
-  if (pepseaContainer.status !== 'started' && pepseaContainer.status !== 'checking')
-    throw new Error('PepSeA container has not started yet');
-
   const peptideCount = srcCol.length;
   clustersCol ??= DG.Column.int('Clusters', peptideCount).init(0);
   if (clustersCol.type != DG.COLUMN_TYPE.STRING)