@datagrok/peptides 1.27.4 → 1.27.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datagrok/peptides",
   "friendlyName": "Peptides",
-  "version": "1.27.4",
+  "version": "1.27.6",
   "author": {
     "name": "Davit Rizhinashvili",
     "email": "drizhinashvili@datagrok.ai"
@@ -13,7 +13,7 @@
     "directory": "packages/Peptides"
   },
   "dependencies": {
-    "@datagrok-libraries/bio": "^5.61.3",
+    "@datagrok-libraries/bio": "^5.63.2",
     "@datagrok-libraries/math": "^1.2.6",
     "@datagrok-libraries/ml": "^6.10.7",
     "@datagrok-libraries/statistics": "^1.2.12",
@@ -21,7 +21,7 @@
     "@datagrok-libraries/utils": "^4.6.9",
     "@webgpu/types": "^0.1.40",
     "cash-dom": "^8.1.5",
-    "datagrok-api": "^1.25.0",
+    "datagrok-api": "^1.26.0",
     "file-loader": "^6.2.0",
     "rxjs": "^6.5.5",
     "uuid": "^10.0.0",

package/src/demo/fasta.ts

@@ -7,7 +7,6 @@ import * as C from '../utils/constants';
 import {scaleActivity} from '../utils/misc';
 import {ALIGNMENT, ALPHABET, NOTATION, TAGS as bioTAGS} from '@datagrok-libraries/bio/src/utils/macromolecule';
 import {PeptidesModel} from '../model';
-import {awaitCheck, delay} from '@datagrok-libraries/test/src/test';
 import {MCLSettings} from '../utils/types';
 
 export async function macromoleculeSarFastaDemoUI(): Promise<void> {
@@ -19,7 +18,7 @@ export async function macromoleculeSarFastaDemoUI(): Promise<void> {
   if (!simpleTable.id)
     simpleTable.id = `Simple-peptides-analysis-table-id-${Math.random()}-${Date.now()}`;
   const view = grok.shell.addTableView(simpleTable);
-  await delay(50);
+  await DG.delay(50);
   const grid = view.grid;
   await new Promise((res) => {
     let timer: any = null;

package/src/package.g.ts

@@ -14,8 +14,8 @@ export function Peptides() : any {
 
 //name: Bio Peptides
 //top-menu: Bio | Analyze | SAR...
-export function peptidesDialog() : any {
-  return PackageFunctions.peptidesDialog();
+export async function peptidesDialog() : Promise<any> {
+  return await PackageFunctions.peptidesDialog();
 }
 
 //input: viewer v 
@@ -28,8 +28,8 @@ export async function testInitFunctionPeptides(v: any) : Promise<void> {
 //input: column col { semType: Macromolecule }
 //output: widget result
 //meta.role: widgets,panel
-export function peptidesPanel(col: DG.Column) : any {
-  return PackageFunctions.peptidesPanel(col);
+export async function peptidesPanel(col: DG.Column) : Promise<any> {
+  return await PackageFunctions.peptidesPanel(col);
 }
 
 //name: Sequence Variability Map

package/src/package.ts

@@ -128,7 +128,7 @@ export class PackageFunctions {
     'name': 'Bio Peptides',
     'outputs': [],
   })
-  static peptidesDialog(): DG.Dialog | null {
+  static async peptidesDialog(): Promise<DG.Dialog | null> {
     if (!grok.shell.t || !grok.shell.t.columns.bySemType('Macromolecule')?.length) {
       grok.shell.warning('SAR Analysis requires an active table with Macromolecule column');
       return null;
@@ -139,7 +139,7 @@ export class PackageFunctions {
       return null;
     }
 
-    const analyzeObject = analyzePeptidesUI(grok.shell.t);
+    const analyzeObject = await analyzePeptidesUI(grok.shell.t);
     const dialog = ui.dialog('Analyze Peptides').add(analyzeObject.host).onOK(async () => {
       const startSuccess = analyzeObject.callback();
       if (!startSuccess)
@@ -163,11 +163,11 @@ export class PackageFunctions {
     meta: {role: 'widgets'},
     tags: ['widgets', 'panel'],
   })
-  static peptidesPanel(
-    @grok.decorators.param({'options': {'semType': 'Macromolecule'}}) col: DG.Column): DG.Widget {
+  static async peptidesPanel(
+    @grok.decorators.param({'options': {'semType': 'Macromolecule'}}) col: DG.Column): Promise<DG.Widget> {
     if (!col.dataFrame || !DG.Utils.firstOrNull(col.dataFrame.columns.numerical))
       return new DG.Widget(ui.divText('SAR Analysis requires an active table with at least one numerical column for activity'));
-    const analyzeObject = analyzePeptidesUI(col.dataFrame, col);
+    const analyzeObject = await analyzePeptidesUI(col.dataFrame, col);
     return new DG.Widget(analyzeObject.host);
   }
 

package/src/viewers/position-statistics-viewer.ts

@@ -10,23 +10,18 @@ import {TAGS as bioTAGS, MONOMER_MOTIF_SPLITTER} from '@datagrok-libraries/bio/s
 export const POSITION_HIDDEN_NAME = '~sequence_position_monomers';
 
 export class SequencePositionStatsViewer extends DG.JsViewer {
-  public position: number;
+  public positions: string;
   public sequenceColumnName: string;
   private _positionColumn?: DG.Column;
   private _boxPlotViewer?: DG.Viewer;
   public valueColumnName: string;
-  public leftMotifLength: number = 0;
-  public rightMotifLength: number = 0;
   public showPositionInfo: boolean = true;
   constructor() {
     super();
-    // starting from 1!
-    this.position = this.int('position', 1, {nullable: false, showSlider: false, min: 1});
+    this.positions = this.string('positions', '1', {description: 'Comma-separated sequence positions (1-based) to analyze'});
     this.sequenceColumnName = this.column('sequence', {semType: DG.SEMTYPE.MACROMOLECULE, nullable: false});
     this.valueColumnName = this.column('value', {columnTypeFilter: 'numerical', nullable: false});
-    this.leftMotifLength = this.int('leftMotifLength', 0, {nullable: false, min: 0, max: 10});
-    this.rightMotifLength = this.int('rightMotifLength', 0, {nullable: false, min: 0, max: 10});
-    this.showPositionInfo = this.bool('showPositionInfo', true, {nullable: false, defaultValue: true, description: 'Show position and overhangs info in the viewer header'});
+    this.showPositionInfo = this.bool('showPositionInfo', true, {nullable: false, defaultValue: true, description: 'Show position selector in the viewer header'});
     this.subs.push(grok.events.onContextMenu.subscribe((e) => {
       if (e.causedBy && e.causedBy.target && this._boxPlotViewer?.root.contains(e.causedBy.target)) {
         e.causedBy.preventDefault();
@@ -48,6 +43,19 @@ export class SequencePositionStatsViewer extends DG.JsViewer {
     return Math.max(1, position);
   }
 
+  parsePositions(): number[] {
+    if (!this.positions) return [1];
+    const result = this.positions.split(',')
+      .map((s) => parseInt(s.trim()))
+      .filter((n) => !Number.isNaN(n) && n >= 1);
+    return [...new Set(result)].sort((a, b) => a - b);
+  }
+
+  private _setPositions(positions: number[]): void {
+    const unique = [...new Set(positions)].sort((a, b) => a - b);
+    this.getProperty('positions')!.set(this, unique.join(', '));
+  }
+
   onTableAttached(): void {
     super.onTableAttached();
     if (this.dataFrame.columns.bySemType(DG.SEMTYPE.MACROMOLECULE) == null) {
@@ -63,18 +71,19 @@ export class SequencePositionStatsViewer extends DG.JsViewer {
 
     this.getProperty('sequenceColumnName')!.set(this, this.dataFrame.columns.bySemType(DG.SEMTYPE.MACROMOLECULE)!.name);
     this.getProperty('valueColumnName')!.set(this, wu(this.dataFrame.columns.numerical).next().value.name);
-    this.getProperty('position')!.set(this, this.getPositionFromColumn());
+    this.getProperty('positions')!.set(this, String(this.getPositionFromColumn()));
 
     this.subs.push(DG.debounce(this.dataFrame.onMetadataChanged, 200).subscribe((_) => {
       const curPosition = this.getPositionFromColumn();
-      if (this.position !== curPosition)
-        this.getProperty('position')!.set(this, curPosition);
+      const currentPositions = this.parsePositions();
+      if (!currentPositions.includes(curPosition))
+        this._setPositions([curPosition]);
     }));
   }
 
   render(): void {
-    const position0Based = (this.position ?? -1) - 1;
-    if (this.dataFrame == null || !this.sequenceColumnName || position0Based < 0 || !this._positionColumn || !this.valueColumnName)
+    const positions = this.parsePositions();
+    if (this.dataFrame == null || !this.sequenceColumnName || !positions.length || !this._positionColumn || !this.valueColumnName)
       return;
 
     $(this.root).empty();
@@ -82,12 +91,9 @@ export class SequencePositionStatsViewer extends DG.JsViewer {
     const seqHelper = PeptideUtils.getSeqHelper();
     const sequenceColumn = this.dataFrame.col(this.sequenceColumnName)!;
     const seqHandler = seqHelper.getSeqHandler(sequenceColumn);
-    const leftOverhang = Math.min(Math.max(this.leftMotifLength ?? 0, 0), 10);
-    const rightOverhang = Math.min(Math.max(this.rightMotifLength ?? 0, 0), 10);
-    const start = Math.max(0, position0Based - leftOverhang);
-    const end = rightOverhang + position0Based;
-    const canonicals = Array.from({length: end - start + 1}).fill('')
-      .map((_, i) => seqHandler.getMonomersAtPosition(start + i, true));
+    const maxPos = seqHandler.maxLength;
+
+    const canonicals = positions.map((p) => seqHandler.getMonomersAtPosition(p - 1, true));
     this._positionColumn.init((i) => canonicals.map((c) => c[i]).join(MONOMER_MOTIF_SPLITTER));
 
     this._boxPlotViewer = this.dataFrame.plot.box({categoryColumnNames: [this._positionColumn.name], plotStyle: 'violin',
@@ -96,30 +102,10 @@ export class SequencePositionStatsViewer extends DG.JsViewer {
       autoLayout: false, labelOrientation: 'Vert',
     });
 
-    const leftOverhangInput = ui.input.int('Left Overhang', {value: leftOverhang, min: 0, max: 10, step: 1, showSlider: false, showPlusMinus: true,
-      onValueChanged: (v) => {
-        this.getProperty('leftMotifLength')!.set(this, leftOverhangInput.value);
-      }, tooltipText: 'Left overhang motif length from the selected position',
-    });
-    const rightOverhangInput = ui.input.int('Right Overhang', {value: rightOverhang, min: 0, max: 10, step: 1, showSlider: false, showPlusMinus: true,
-      onValueChanged: (v) => {
-        this.getProperty('rightMotifLength')!.set(this, rightOverhangInput.value);
-      }, tooltipText: 'Right overhang motif length from the selected position',
-    });
-
-    const descriptionDiv = ui.divH([
-      leftOverhangInput.root, ui.h2(`${this.sequenceColumnName}: Position ${this.position}`),
-      rightOverhangInput.root,
-    ], {style: {alignItems: 'center', justifyContent: 'space-around', width: '100%'}});
     if (this.showPositionInfo) {
-      this.root.appendChild(descriptionDiv);
-      leftOverhangInput.input.style.width = '20px';
-      rightOverhangInput.input.style.width = '20px';
+      const selectorDiv = this._renderPositionSelector(positions, maxPos);
+      this.root.appendChild(selectorDiv);
     }
-    // setTimeout(() => {
-    //   this._boxPlotViewer!.props.title = 'Sequence Position Statistics';
-    //   this._boxPlotViewer!.props.description = `${this.sequenceColumnName}: Position ${this.position + 1}`;
-    // }, 200);
 
     this._boxPlotViewer.props.statistics = ['min', 'max', 'avg', 'med', 'count'];
 
@@ -134,6 +120,110 @@ export class SequencePositionStatsViewer extends DG.JsViewer {
     }));
   }
 
+  private _renderPositionSelector(positions: number[], maxPos: number): HTMLElement {
+    const container = ui.divH([], {style: {alignItems: 'center', justifyContent: 'center', gap: '4px', flexWrap: 'wrap', padding: '4px 8px', width: '100%'}});
+
+    const label = ui.label(`${this.sequenceColumnName}:`);
+    label.style.fontWeight = 'bold';
+    label.style.marginRight = '4px';
+    container.appendChild(label);
+
+    for (const pos of positions)
+      container.appendChild(this._createChip(pos, positions, maxPos));
+
+    container.appendChild(this._createAddButton(container, positions, maxPos));
+    return container;
+  }
+
+  private _createChip(pos: number, allPositions: number[], maxPos: number): HTMLElement {
+    const isSingle = allPositions.length === 1;
+    const posLabel = document.createElement('span');
+    posLabel.textContent = String(pos);
+    posLabel.style.marginRight = '3px';
+
+    const actionIcon = isSingle ?
+      ui.iconFA('pencil', () => this._showInlineEdit(chip, pos, maxPos), 'Edit position') :
+      ui.iconFA('times', () => this._setPositions(allPositions.filter((p) => p !== pos)), 'Remove position');
+    actionIcon.style.cursor = 'pointer';
+    actionIcon.style.fontSize = '10px';
+    actionIcon.style.opacity = '0.6';
+
+    const chip = ui.divH([posLabel, actionIcon], {style: {
+      display: 'inline-flex', alignItems: 'center',
+      background: '#f0f0f0', borderRadius: '12px', padding: '2px 8px',
+      fontSize: '12px', cursor: 'default', border: '1px solid #d0d0d0',
+    }});
+    return chip;
+  }
+
+  private _showInlineEdit(chip: HTMLElement, currentPos: number, maxPos: number): void {
+    const input = document.createElement('input');
+    input.type = 'number';
+    input.min = '1';
+    input.max = String(maxPos);
+    input.value = String(currentPos);
+    input.style.cssText = 'width:45px;height:22px;font-size:12px;text-align:center;border-radius:12px;border:1px solid #aaa;outline:none;padding:0 4px;';
+
+    let handled = false;
+    const confirm = () => {
+      if (handled) return;
+      handled = true;
+      const val = parseInt(input.value);
+      const positions = this.parsePositions();
+      if (!Number.isNaN(val) && val >= 1 && val <= maxPos && val !== currentPos)
+        this._setPositions(positions.map((p) => p === currentPos ? val : p));
+      else
+        input.replaceWith(chip);
+    };
+
+    input.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') confirm();
+      if (e.key === 'Escape') {handled = true; chip.parentElement?.replaceChild(chip, input);}
+    });
+    input.addEventListener('blur', confirm);
+
+    chip.parentElement?.replaceChild(input, chip);
+    input.focus();
+    input.select();
+  }
+
+  private _createAddButton(container: HTMLElement, positions: number[], maxPos: number): HTMLElement {
+    const addBtn = ui.iconFA('plus-circle', () => {
+      if (container.querySelector('.position-add-input'))
+        return;
+      const input = document.createElement('input');
+      input.type = 'number';
+      input.min = '1';
+      input.max = String(maxPos);
+      input.className = 'position-add-input';
+      input.style.cssText = 'width:45px;height:22px;font-size:12px;text-align:center;border-radius:12px;border:1px solid #aaa;outline:none;padding:0 4px;';
+
+      let handled = false;
+      const confirm = () => {
+        if (handled) return;
+        handled = true;
+        const val = parseInt(input.value);
+        if (!Number.isNaN(val) && val >= 1 && val <= maxPos && !positions.includes(val))
+          this._setPositions([...positions, val]);
+        else
+          input.remove();
+      };
+
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') confirm();
+        if (e.key === 'Escape') {handled = true; input.remove();}
+      });
+      input.addEventListener('blur', confirm);
+
+      container.insertBefore(input, addBtn);
+      input.focus();
+    }, 'Add position');
+    addBtn.style.cursor = 'pointer';
+    addBtn.style.fontSize = '14px';
+    addBtn.style.color = '#2083d5';
+    return addBtn;
+  }
+
   onPropertyChanged(property: DG.Property | null): void {
     if (this.dataFrame == null || !this.sequenceColumnName)
       return;

package/src/widgets/peptides.ts

@@ -12,6 +12,7 @@ import {ALIGNMENT, NOTATION, TAGS as bioTAGS} from '@datagrok-libraries/bio/src/
 import {ILogoSummaryTable, LogoSummaryTable} from '../viewers/logo-summary';
 import {MmDistanceFunctionsNames} from '@datagrok-libraries/ml/src/macromolecule-distance-functions';
 import {MCL_INPUTS} from './settings';
+import {createSequenceColumnInput, ISequenceColumnInput} from '@datagrok-libraries/bio/src/utils/sequence-column-input';
 //@ts-ignore
 import '../styles.css';
 export type DialogParameters = { host: HTMLElement, callback: () => Promise<boolean> };
@@ -22,10 +23,10 @@ export type DialogParameters = { host: HTMLElement, callback: () => Promise<bool
  * @param [col] - Peptides column
  * @return - UI host and analysis start callback
  */
-export function analyzePeptidesUI(df: DG.DataFrame, col?: DG.Column<string>): DialogParameters {
+export async function analyzePeptidesUI(df: DG.DataFrame, col?: DG.Column<string>): Promise<DialogParameters> {
   const mclOptions = new type.MCLSettings();
   const logoHost = ui.div();
-  let seqColInput: DG.InputBase | null = null;
+  let sequenceColInput: ISequenceColumnInput | null = null;
   if (typeof col === 'undefined') {
     // Building UI for starting analysis from dialog (top menu)
     const potentialCol = DG.Utils.firstOrNull(
@@ -36,7 +37,7 @@ export function analyzePeptidesUI(df: DG.DataFrame, col?: DG.Column<string>): Di
       grok.shell.info('Sequences column contains missing values. They will be ignored during analysis');
 
 
-    seqColInput = ui.input.column('Sequence', {table: df, value: potentialCol, onValueChanged: (value) => {
+    sequenceColInput = await createSequenceColumnInput('Sequence', {table: df, value: potentialCol, onValueChanged: (value) => {
       $(logoHost).empty().append(ui.wait(async () => {
         const viewer = await df.plot.fromType('WebLogo', {sequenceColumnName: value.name});
         viewer.root.style.setProperty('height', '130px');
@@ -45,7 +46,7 @@ export function analyzePeptidesUI(df: DG.DataFrame, col?: DG.Column<string>): Di
       if (value.stats.missingValueCount !== 0)
         grok.shell.info('Sequences column contains missing values. They will be ignored during analysis');
     }, filter: (col: DG.Column) => col.semType === DG.SEMTYPE.MACROMOLECULE, nullable: false});
-    seqColInput.setTooltip('Macromolecule column in FASTA, HELM or separated format');
+    sequenceColInput.inputBase.setTooltip('Macromolecule column in FASTA, HELM or separated format');
   }
 
   let funcs = DG.Func.find({package: 'Bio', name: 'webLogoViewer'});
@@ -117,8 +118,8 @@ export function analyzePeptidesUI(df: DG.DataFrame, col?: DG.Column<string>): Di
 
 
   const inputsList = [activityColumnChoice, activityScalingMethod, clustersColumnChoice, generateClustersInput];
-  if (seqColInput !== null)
-    inputsList.splice(0, 0, seqColInput);
+  if (sequenceColInput !== null)
+    inputsList.splice(0, 0, sequenceColInput.inputBase);
 
   // ### MCL INPUTS ###
   const similarityThresholdInput = ui.input.float(MCL_INPUTS.THRESHOLD, {
@@ -188,7 +189,7 @@ export function analyzePeptidesUI(df: DG.DataFrame, col?: DG.Column<string>): Di
   const bitsetChanged = df.filter.onChanged.subscribe(() => activityScalingMethodState());
 
   const startAnalysisCallback = async (): Promise<boolean> => {
-    const sequencesCol = col ?? seqColInput!.value;
+    const sequencesCol = col ?? sequenceColInput!.value;
     bitsetChanged.unsubscribe();
     if (sequencesCol) {
       const model = await startAnalysis(activityColumnChoice.value!, sequencesCol, clustersColumnChoice.value, df,
@@ -210,7 +211,7 @@ export function analyzePeptidesUI(df: DG.DataFrame, col?: DG.Column<string>): Di
   }
 
   $(logoHost).empty().append(ui.wait(async () => {
-    const viewer = await df.plot.fromType('WebLogo', {sequenceColumnName: col?.name ?? seqColInput!.value!.name});
+    const viewer = await df.plot.fromType('WebLogo', {sequenceColumnName: col?.name ?? sequenceColInput!.value!.name});
     viewer.root.style.setProperty('height', '130px');
     return viewer.root;
   }));
@@ -218,9 +219,9 @@ export function analyzePeptidesUI(df: DG.DataFrame, col?: DG.Column<string>): Di
   const mainHost = ui.divV([
     logoHost,
     ui.splitH([
-      ui.splitV(inputElements),
+      ui.splitV(inputElements, {style: {flex: '0 1 auto'}}),
       histogramHost,
-    ], {style: {height: bottomHeight, minWidth: '500px', maxWidth: '600px'}}),
+    ], {style: {height: bottomHeight, minWidth: '600px', maxWidth: '750px'}}),
     mclInputsHost,
   ]);
   return {host: mainHost, callback: startAnalysisCallback};