@datagrok/bio 2.7.2 → 2.8.1

package/package.json

@@ -5,7 +5,7 @@
     "name": "Leonid Stolbov",
     "email": "lstolbov@datagrok.ai"
   },
-  "version": "2.7.2",
+  "version": "2.8.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",
@@ -24,14 +24,20 @@
       "propertyType": "bool",
       "defaultValue": "true",
       "nullable": false
+    },
+    {
+      "name": "DefaultSeparator",
+      "propertyType": "string",
+      "defaultValue": ".",
+      "nullable": false
     }
   ],
   "dependencies": {
     "@biowasm/aioli": "^3.1.0",
-    "@datagrok-libraries/bio": "^5.33.2",
+    "@datagrok-libraries/bio": "^5.34.0",
     "@datagrok-libraries/chem-meta": "^1.0.1",
     "@datagrok-libraries/ml": "^6.3.39",
-    "@datagrok-libraries/tutorials": "^1.3.2",
+    "@datagrok-libraries/tutorials": "^1.3.6",
     "@datagrok-libraries/utils": "^4.0.17",
     "cash-dom": "^8.0.0",
     "css-loader": "^6.7.3",

package/src/package-types.ts

@@ -9,6 +9,7 @@ import {ObjectPropertyBag} from 'datagrok-api/dg';
 export const enum BioPackagePropertiesNames {
   MaxMonomerLength = 'MaxMonomerLength',
   TooltipWebLogo = 'TooltipWebLogo',
+  DefaultSeparator = 'DefaultSeparator',
 }
 
 
@@ -18,24 +19,34 @@ export class BioPackageProperties extends Map<string, any> {
   public get onPropertyChanged(): Observable<string> { return this._onPropertyChanged; }
 
   /** Monomer name maximum length displayed in short mode. */
-  public get maxMonomerLength(): number {
-    return super.get(BioPackagePropertiesNames.MaxMonomerLength) as unknown as number;
+  public get MaxMonomerLength(): number {
+    return super.get(BioPackagePropertiesNames.MaxMonomerLength) as number;
   }
 
-  public set maxMonomerLength(value: number) {
-    super.set(BioPackagePropertiesNames.MaxMonomerLength, value as unknown as object);
+  public set MaxMonomerLength(value: number) {
+    super.set(BioPackagePropertiesNames.MaxMonomerLength, value);
     this._onPropertyChanged.next(BioPackagePropertiesNames.MaxMonomerLength);
   }
 
-  public get tooltipWebLogo(): boolean {
-    return super.get(BioPackagePropertiesNames.TooltipWebLogo) as unknown as boolean;
+  public get TooltipWebLogo(): boolean {
+    return super.get(BioPackagePropertiesNames.TooltipWebLogo) as boolean;
   }
 
-  public set tooltipWebLogo(value: boolean) {
-    super.set(BioPackagePropertiesNames.TooltipWebLogo, value as unknown as boolean);
+  public set TooltipWebLogo(value: boolean) {
+    super.set(BioPackagePropertiesNames.TooltipWebLogo, value);
     this._onPropertyChanged.next(BioPackagePropertiesNames.TooltipWebLogo);
   }
 
+  public get DefaultSeparator(): string {
+    return super.get(BioPackagePropertiesNames.DefaultSeparator) as string;
+  }
+
+  public set DefaultSeparator(value: string) {
+    if (value.length !== 1) throw new Error('The separator must be of length one.');
+    super.set(BioPackagePropertiesNames.DefaultSeparator, value);
+    this._onPropertyChanged.next(BioPackagePropertiesNames.DefaultSeparator);
+  }
+
   constructor(source: any) {
     super(Object.entries(source));
   }

package/src/package.ts

@@ -64,6 +64,7 @@ import {RDModule} from '@datagrok-libraries/chem-meta/src/rdkit-api';
 import {PackageSettingsEditorWidget} from './widgets/package-settings-editor-widget';
 import {getCompositionAnalysisWidget} from './widgets/composition-analysis-widget';
 import {MacromoleculeColumnWidget} from './utils/macromolecule-column-widget';
+import {addCopyMenuUI} from './utils/context-menu';
 
 export const _package = new BioPackage();
 
@@ -264,7 +265,7 @@ export function SeqActivityCliffsEditor(call: DG.FuncCall) {
 
 //top-menu: Bio | Analyze | Activity Cliffs...
 //name: Sequence Activity Cliffs
-//description: detect activity cliffs
+//description: Detects pairs of molecules with similar structure and significant difference in any given property
 //input: dataframe table [Input data table]
 //input: column molecules {semType: Macromolecule}
 //input: column activities
@@ -358,6 +359,7 @@ export function SequenceSpaceEditor(call: DG.FuncCall) {
 
 //top-menu: Bio | Analyze | Sequence Space...
 //name: Sequence Space
+//description: Creates 2D sequence space with projected sequences by pairwise distance
 //input: dataframe table
 //input: column molecules { semType: Macromolecule }
 //input: string methodName { choices:["UMAP", "t-SNE"] }
@@ -456,7 +458,7 @@ export async function sequenceSpaceTopMenu(
 
 //top-menu: Bio | Convert | To Atomic Level...
 //name: To Atomic Level
-//description: returns molfiles for each monomer from HELM library
+//description: Converts sequences to molblocks
 //input: dataframe df [Input data table]
 //input: column macroMolecule {semType: Macromolecule}
 export async function toAtomicLevel(df: DG.DataFrame, macroMolecule: DG.Column): Promise<void> {
@@ -479,6 +481,7 @@ export async function toAtomicLevel(df: DG.DataFrame, macroMolecule: DG.Column):
 
 //top-menu: Bio | Analyze | MSA...
 //name: MSA
+//description: Performs multiple sequence alignment
 //tags: bio, panel
 export function multipleSequenceAlignmentDialog(): void {
   multipleSequenceAlignmentUI();
@@ -497,6 +500,7 @@ export async function alignSequences(sequenceCol: DG.Column<string> | null = nul
 
 //top-menu: Bio | Analyze | Composition
 //name: Composition Analysis
+//description: Visualizes sequence composition on a WebLogo plot
 //meta.icon: files/icons/composition-analysis.svg
 //output: viewer result
 export async function compositionAnalysis(): Promise<void> {
@@ -704,7 +708,7 @@ export function similaritySearchViewer(): SequenceSimilarityViewer {
 
 //top-menu: Bio | Search | Similarity
 //name: similaritySearch
-//description: finds the most similar sequence
+//description: Finds similar sequences
 //output: viewer result
 export function similaritySearchTopMenu(): void {
   const view = (grok.shell.v as DG.TableView);
@@ -722,7 +726,7 @@ export function diversitySearchViewer(): SequenceDiversityViewer {
 
 //top-menu: Bio | Search | Diversity
 //name: diversitySearch
-//description: finds the most diverse molecules
+//description: Finds the most diverse sequences
 //output: viewer result
 export function diversitySearchTopMenu() {
   const view = (grok.shell.v as DG.TableView);
@@ -732,6 +736,7 @@ export function diversitySearchTopMenu() {
 
 //top-menu: Bio | Search | Substructure...
 //name: bioSubstructureSearch
+//description: Finds sequence with the given subsequence
 export function bioSubstructureSearch(): void {
   const col = getMacromoleculeColumn();
   substructureSearchDialog(col);
@@ -768,6 +773,14 @@ export async function webLogoLargeApp(): Promise<void> {
   }
 }
 
+// -- Handle context menu --
+
+///name: addCopyMenu
+//input: object cell
+//input: object menu
+export function addCopyMenu(cell: DG.Cell, menu: DG.Menu): void {
+  addCopyMenuUI(cell, menu);
+}
 
 // -- Demo --
 

package/src/tests/converters-test.ts

@@ -129,7 +129,7 @@ RNA1{P.R(U)P.R(U)P.R(C)P.R(A)P.R(A)P.R(C)P.P.P}$$$$`,
     return df;
   }
 
-  function converter(tgtNotation: NOTATION, tgtSeparator: string | null = null): ConverterFunc {
+  function converter(tgtNotation: NOTATION, tgtSeparator?: string): ConverterFunc {
     if (tgtNotation === NOTATION.SEPARATOR && !tgtSeparator)
       throw new Error(`Argument 'separator' is mandatory for target notation '${tgtNotation.toString()}'.`);
 
@@ -141,12 +141,12 @@ RNA1{P.R(U)P.R(U)P.R(C)P.R(A)P.R(A)P.R(C)P.P.P}$$$$`,
     };
   }
 
-  async function _testConvert(srcKey: Samples, converter: ConverterFunc, tgtKey: Samples) {
+  async function _testConvert(srcKey: Samples, colConverter: ConverterFunc, tgtKey: Samples) {
     const srcDf: DG.DataFrame = await readCsv(srcKey);
     const srcCol: DG.Column = srcDf.getCol('seq');
 
     // conversion results
-    const resCol: DG.Column = converter(srcCol);
+    const resCol: DG.Column = colConverter(srcCol);
 
     // The correct reference data to compare conversion results with.
     const tgtDf: DG.DataFrame = await readCsv(tgtKey);

package/src/utils/cell-renderer.ts

@@ -135,7 +135,7 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
     const tempMonomerWidth: string | null = tableColTemp[tempTAGS.monomerWidth];
     const monomerWidth: string = (tempMonomerWidth != null) ? tempMonomerWidth : 'short';
     if (monomerWidth === 'short')
-      maxLengthOfMonomer = tableColTemp[mmcrTemps.maxMonomerLength] ?? _package.properties.maxMonomerLength;
+      maxLengthOfMonomer = tableColTemp[mmcrTemps.maxMonomerLength] ?? _package.properties.MaxMonomerLength;
 
 
     let seqColTemp: MonomerPlacer = tableCol.temp[tempTAGS.bioSeqCol];

package/src/utils/context-menu.ts

@@ -0,0 +1,30 @@
+import * as grok from 'datagrok-api/grok';
+import * as DG from 'datagrok-api/dg';
+import * as ui from 'datagrok-api/ui';
+
+import {UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
+import {NOTATION} from '@datagrok-libraries/bio/src/utils/macromolecule';
+import {NotationConverter} from '@datagrok-libraries/bio/src/utils/notation-converter';
+
+import {_package} from '../package';
+
+
+export function addCopyMenuUI(cell: DG.Cell, menu: DG.Menu): void {
+  const uh = UnitsHandler.getOrCreate(cell.column);
+  const tgtNotationList: string[] = Object.values(NOTATION).filter((v) => v !== uh.units);
+
+  menu.group('Copy')
+    .items(tgtNotationList, (tgtNotation) => {
+      const nc = new NotationConverter(cell.column);
+      const separator = tgtNotation === NOTATION.SEPARATOR ? _package.properties.DefaultSeparator : undefined;
+      const converter = nc.getConverter(tgtNotation as NOTATION, separator);
+      const tgtSeq = converter(cell.value);
+
+      if (!navigator.clipboard) {
+        grok.shell.warning('The clipboard functionality requires a secure origin — either HTTPS or localhost');
+      } else {
+        navigator.clipboard.writeText(tgtSeq);
+        grok.shell.info(`Value of notation '${tgtNotation}' copied to clipboard`);
+      }
+    });
+}

package/src/utils/convert.ts

@@ -97,7 +97,7 @@ export function convert(col?: DG.Column): void {
       ]))
       .onOK(async () => {
         const targetNotation = targetNotationInput.value as NOTATION;
-        const separator: string | null = separatorInput.value;
+        const separator: string | undefined = separatorInput.value ?? undefined;
 
         await convertDo(tgtCol, targetNotation, separator);
       })
@@ -116,9 +116,7 @@ export function convert(col?: DG.Column): void {
  * @param {NOTATION} targetNotation Target notation
  * @param {string | null} separator Separator for SEPARATOR notation
  */
-export async function convertDo(
-  srcCol: DG.Column, targetNotation: NOTATION, separator: string | null,
-): Promise<DG.Column> {
+export async function convertDo(srcCol: DG.Column, targetNotation: NOTATION, separator?: string): Promise<DG.Column> {
   const converter = new NotationConverter(srcCol);
   const newColumn = converter.convert(targetNotation, separator);
   srcCol.dataFrame.columns.add(newColumn);

package/src/utils/macromolecule-column-widget.ts

@@ -24,7 +24,7 @@ export class MacromoleculeColumnWidget extends DG.Widget {
 
   async init(): Promise<void> {
     const uh = UnitsHandler.getOrCreate(this.seqCol);
-    const pkgTooltipWebLogo = _package.properties.tooltipWebLogo;
+    const pkgTooltipWebLogo = _package.properties.TooltipWebLogo;
     const colTooltipWebLogo = this.seqCol.getTag(wlTAGS.tooltipWebLogo);
 
     if (pkgTooltipWebLogo !== false && !['false', 'off', 'disable', 'disabled'].includes(colTooltipWebLogo)) {

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

@@ -63,7 +63,7 @@ export class MonomerCellRenderer extends DG.GridCellRenderer {
 
   get defaultHeight(): number { return 15; }
 
-  get defaultWidth(): number { return 30; }
+  get defaultWidth(): number { return 40; }
 
   /**
    * Cell renderer function.
@@ -95,6 +95,6 @@ export class MonomerCellRenderer extends DG.GridCellRenderer {
     const color = palette.get(s);
 
     g.fillStyle = color;
-    g.fillText(monomerToShort(s, 3), x + (w / 2), y + (h / 2), w);
+    g.fillText(monomerToShort(s, 6), x + (w / 2), y + (h / 2), w);
   }
 }

package/src/viewers/vd-regions-viewer.ts

@@ -316,7 +316,8 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
     this.filterSourceInput.root.style.position = 'absolute';
     this.filterSourceInput.root.style.left = '10px';
     this.filterSourceInput.root.style.top = '-3px';
-    ui.tooltip.bind(this.filterSourceInput.root, 'Check to filter sequences for selected VRs');
+    //this.filterSourceInput.setTooltip('Check to filter sequences for selected VRs'); // TODO: GROK-13614
+    ui.tooltip.bind(this.filterSourceInput.input, 'Check to filter sequences for selected VRs');
 
     const _color: string = `#ffbb${Math.ceil(Math.random() * 255).toString(16)}`;
     this.host = ui.div([this.mainLayout, this.filterSourceInput!.root],

package/src/widgets/package-settings-editor-widget.ts

@@ -6,6 +6,7 @@ import {_package} from '../package';
 export class PackageSettingsEditorWidget extends DG.Widget {
   maxMonomerLengthProp: DG.Property;
   tooltipWebLogo: DG.Property;
+  defaultSeparator: DG.Property;
 
   constructor(propList: DG.Property[]) {
     super(ui.div([], {}));
@@ -15,24 +16,33 @@ export class PackageSettingsEditorWidget extends DG.Widget {
 
     this.maxMonomerLengthProp = props['MaxMonomerLength'];
     this.tooltipWebLogo = props['TooltipWebLogo'];
+    this.defaultSeparator = props['DefaultSeparator'];
   }
 
   async init(): Promise<void> {
     const maxMonomerLengthInput = ui.intInput('Max monomer length',
-      _package.properties.maxMonomerLength,
+      _package.properties.MaxMonomerLength,
       (value: number) => {
         // Handle user changed value
-        _package.properties.maxMonomerLength = value;
+        _package.properties.MaxMonomerLength = value;
       });
 
-    const tooltipWebLogo = ui.boolInput('Tooltip WebLogo',
-      _package.properties.tooltipWebLogo,
+    const tooltipWebLogoInput = ui.boolInput('Tooltip WebLogo',
+      _package.properties.TooltipWebLogo,
       (value: boolean) => {
-        _package.properties.tooltipWebLogo = value;
+        _package.properties.TooltipWebLogo = value;
+      });
+
+    const defaultSeparatorInput = ui.choiceInput('Default Separator',
+      _package.properties.DefaultSeparator, ['.', '/', '-'],
+      (value: string) => {
+        _package.properties.DefaultSeparator = value;
       });
 
     this.root.appendChild(ui.form([
       maxMonomerLengthInput,
-      tooltipWebLogo]));
+      tooltipWebLogoInput,
+      defaultSeparatorInput,
+    ]));
   }
 }

package/src/widgets/representations.ts

@@ -32,7 +32,7 @@ export function getMacromoleculeColumnPropertyPanel(col: DG.Column): DG.Widget {
   );
 
   const maxMonomerLength: DG.InputBase = ui.intInput('Max monomer length',
-    col.temp[mmcrTemps.maxMonomerLength] ?? _package.properties.maxMonomerLength,
+    col.temp[mmcrTemps.maxMonomerLength] ?? _package.properties.MaxMonomerLength,
     (value: number) => {
       col.temp[mmcrTemps.maxMonomerLength] = value;
       col.setTag(mmcrTags.RendererSettingsChanged, rendererSettingsChangedState.true);