@datagrok/bio 2.7.1 → 2.8.0

package/package.json

@@ -5,7 +5,7 @@
     "name": "Leonid Stolbov",
     "email": "lstolbov@datagrok.ai"
   },
-  "version": "2.7.1",
+  "version": "2.8.0",
   "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",
@@ -53,9 +59,9 @@
     "source-map-loader": "^4.0.1",
     "ts-loader": "^9.2.5",
     "typescript": "^4.8.4",
-    "webpack": "^5.76.0",
+    "webpack": "^5.76.3",
     "webpack-bundle-analyzer": "latest",
-    "webpack-cli": "^4.6.0",
+    "webpack-cli": "^4.9.1",
     "@datagrok/chem": "1.4.21",
     "@datagrok/helm": "2.1.7"
   },

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();
 
@@ -262,9 +263,9 @@ export function SeqActivityCliffsEditor(call: DG.FuncCall) {
     .show();
 }
 
-//top-menu: Bio | SAR | Activity Cliffs...
+//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
@@ -356,8 +357,9 @@ export function SequenceSpaceEditor(call: DG.FuncCall) {
     .show();
 }
 
-//top-menu: Bio | Structure | Sequence Space...
+//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"] }
@@ -454,9 +456,9 @@ export async function sequenceSpaceTopMenu(
   } */
 };
 
-//top-menu: Bio | Atomic Level | To Atomic Level...
+//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> {
@@ -477,8 +479,9 @@ export async function toAtomicLevel(df: DG.DataFrame, macroMolecule: DG.Column):
     grok.shell.warning(ui.list(atomicLevelRes.warnings));
 }
 
-//top-menu: Bio | Alignment | MSA...
-//name: MSA...
+//top-menu: Bio | Analyze | MSA...
+//name: MSA
+//description: Performs multiple sequence alignment
 //tags: bio, panel
 export function multipleSequenceAlignmentDialog(): void {
   multipleSequenceAlignmentUI();
@@ -495,8 +498,9 @@ export async function alignSequences(sequenceCol: DG.Column<string> | null = nul
   return multipleSequenceAlignmentUI({col: sequenceCol, clustersCol});
 }
 
-//top-menu: Bio | Structure | Composition Analysis
+//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> {
@@ -554,7 +558,7 @@ export async function compositionAnalysis(): Promise<void> {
   await handler(col);
 }
 
-//top-menu: Bio | Atomic Level | SDF to JSON Library...
+//top-menu: Bio | Convert | SDF to JSON Library...
 //name: SDF to JSON Library
 //input: dataframe table
 export async function sdfToJsonLib(table: DG.DataFrame) {
@@ -595,7 +599,7 @@ export function importBam(fileContent: string): DG.DataFrame [] {
   return [];
 }
 
-//top-menu: Bio | Convert...
+//top-menu: Bio | Convert | Notation...
 //name: convertDialog
 export function convertDialog() {
   const col = getMacromoleculeColumn();
@@ -675,7 +679,7 @@ export function SplitToMonomersEditor(call: DG.FuncCall): void {
     .show();
 }
 
-//top-menu: Bio | Split to Monomers
+//top-menu: Bio | Convert | Split to Monomers...
 //name: Split to Monomers
 //input: dataframe table
 //input: column sequence { semType: Macromolecule }
@@ -702,9 +706,9 @@ export function similaritySearchViewer(): SequenceSimilarityViewer {
   return new SequenceSimilarityViewer();
 }
 
-//top-menu: Bio | Search | Similarity Search
+//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);
@@ -720,9 +724,9 @@ export function diversitySearchViewer(): SequenceDiversityViewer {
   return new SequenceDiversityViewer();
 }
 
-//top-menu: Bio | Search | Diversity Search
+//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);
@@ -730,8 +734,9 @@ export function diversitySearchTopMenu() {
   view.dockManager.dock(viewer, 'down');
 }
 
-//top-menu: Bio | Structure | Substructure Search ...
+//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/substructure-search/substructure-search.ts

@@ -105,6 +105,7 @@ export async function helmSubstructureSearch(substructure: string, col: DG.Colum
   if (col.version !== col.temp[MONOMERIC_COL_TAGS.LAST_INVALIDATED_VERSION])
     await invalidateMols(col, true);
   const substructureCol: DG.Column<string> = DG.Column.string('helm', 1).init((_i) => substructure);
+  substructureCol.semType = DG.SEMTYPE.MACROMOLECULE;
   substructureCol.setTag(DG.TAGS.UNITS, NOTATION.HELM);
   const substructureMolsCol =
     await getMonomericMols(substructureCol, true, col.temp[MONOMERIC_COL_TAGS.MONOMERS_DICT]);

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/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);

package/tsconfig.json

@@ -4,7 +4,7 @@
 
     /* Basic Options */
     // "incremental": true,                         /* Enable incremental compilation */
-    "target": "es2020",                                /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
+    "target": "es2020",                             /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
     "module": "es2020",                             /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
     "lib": ["ES2022", "dom"],      /* Specify library files to be included in the compilation. */
     // "allowJs": true,                             /* Allow javascript files to be compiled. */
@@ -66,8 +66,7 @@
 
     /* Advanced Options */
     "skipLibCheck": false,                          /* Skip type checking of declaration files. */
-    "forceConsistentCasingInFileNames": true,
-    /* Disallow inconsistently-cased references to the same file. */
+    "forceConsistentCasingInFileNames": true,       /* Disallow inconsistently-cased references to the same file. */
     //"jsx": "react"
   }
 }

package/webpack.config.js

@@ -36,7 +36,7 @@ module.exports = {
   },
   output: {
     filename: '[name].js',
-    library: 'bio',
+    library: packageName,
     libraryTarget: 'var',
     path: path.resolve(__dirname, 'dist'),
   },