@datagrok/peptides 0.4.2 → 0.6.1

package/detectors.js

@@ -3,7 +3,7 @@ class PeptidesPackageDetectors extends DG.Package {
   //input: column col
   //output: string semType
   detectAligned(col) {
-    const regexp = new RegExp(/^([^-^\n]*-){2,49}(\w|\(|\))+$/);
+    const regexp = new RegExp(/^([^-^\n]*-){7,49}(\w|\(|\))+$/);
     return DG.Detector.sampleCategories(col, (s) => regexp.test(s.trim())) ? 'alignedSequence' : null;
   }
 }

package/package.json

@@ -1,19 +1,19 @@
 {
 	"name": "@datagrok/peptides",
-	"version": "0.4.2",
+	"version": "0.6.1",
 	"description": "",
 	"dependencies": {
 		"@keckelt/tsne": "^1.0.2",
 		"cash-dom": "latest",
 		"d3": "latest",
-		"datagrok-api": ">=0.95.11",
+		"datagrok-api": ">=0.104.0",
 		"dayjs": "latest",
 		"jaro-winkler-typescript": "^1.0.1",
 		"jstat": "^1.9.5",
 		"logojs-react": "^2.1.1",
 		"rxjs": "^6.5.5",
 		"umap-js": "^1.3.3",
-		"@datagrok-libraries/utils": ">=0.0.11",
+		"@datagrok-libraries/utils": ">=0.0.13",
 		"@datagrok-libraries/statistics": ">=0.1.5",
 		"@types/d3": "^7.0.0",
 		"@types/jquery": "^3.5.6"
@@ -21,6 +21,8 @@
 	"devDependencies": {
 		"typescript": "^4.4.4",
 		"ts-loader": "^9.2.5",
+		"css-loader": "^5.2.4",
+		"style-loader": "^2.0.0",
 		"@typescript-eslint/eslint-plugin": "^4.29.1",
 		"@typescript-eslint/parser": "^4.29.1",
 		"eslint": "^7.32.0",

package/src/describe.ts

@@ -1,5 +1,3 @@
-// eslint-disable-next-line no-unused-vars
-import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 import {splitAlignedPeptides} from './utils/split-aligned';
@@ -10,7 +8,7 @@ import {setAARRenderer} from './utils/cell-renderer';
 
 const cp = new ChemPalette('grok');
 
-const aarGroups = {
+export const aarGroups = {
   'R': 'PC',
   'H': 'PC',
   'K': 'PC',
@@ -47,6 +45,15 @@ const groupDescription: {[key: string]: {'description': string, 'aminoAcids': st
   '-': {'description': 'Unknown Amino Acid', 'aminoAcids': ['-']},
 };
 
+/*function customGridColumnHeader(cell: DG.GridCell) {
+  if (cell.isColHeader && cell.tableColumn != null) {
+    if (highlightedColumns.includes(parseInt(cell.tableColumn.name))) {
+      cell.style.backColor = 0xff1f77b4;
+    }
+  }
+}*/
+
+//TODO: decomposition!
 export async function describe(
   df: DG.DataFrame,
   activityColumn: string,
@@ -62,6 +69,7 @@ export async function describe(
   const col: DG.Column = df.columns.bySemType('alignedSequence');
   [splitSeqDf, invalidIndexes] = splitAlignedPeptides(col);
   splitSeqDf.name = 'Split sequence';
+
   const positionColumns = splitSeqDf.columns.names();
   const activityColumnScaled = `${activityColumn}Scaled`;
   const renderColNames: string[] = splitSeqDf.columns.names();
@@ -170,7 +178,7 @@ export async function describe(
 
   //calculate p-values based on t-test
   let position: string;
-  let AAR: string;
+  let aar: string;
   let currentActivity: number[];
   let otherActivity: number[];
   let testResult;
@@ -182,17 +190,17 @@ export async function describe(
   const pValCol: DG.Column = matrixDf.columns.addNewFloat('pValue');
   for (let i = 0; i < matrixDf.rowCount; i++) {
     position = matrixDf.get(positionColName, i);
-    AAR = matrixDf.get(aminoAcidResidue, i);
+    aar = matrixDf.get(aminoAcidResidue, i);
 
     //@ts-ignore
-    splitSeqDf.rows.select((row) => groupMapping[row[position]] === AAR);
+    splitSeqDf.rows.select((row) => groupMapping[row[position]] === aar);
     currentActivity = splitSeqDf
       .clone(splitSeqDf.selection, [activityColumnScaled])
       .getCol(activityColumnScaled)
       .toList();
 
     //@ts-ignore
-    splitSeqDf.rows.select((row) => groupMapping[row[position]] !== AAR);
+    splitSeqDf.rows.select((row) => groupMapping[row[position]] !== aar);
     otherActivity = splitSeqDf
       .clone(splitSeqDf.selection, [activityColumnScaled])
       .getCol(activityColumnScaled)
@@ -240,11 +248,9 @@ export async function describe(
   aarList.sort((first, second) => getWeight(second) - getWeight(first));
 
   matrixDf.getCol(aminoAcidResidue).setCategoryOrder(aarList);
-  //const sequenceDf = segregateBestAtAllCateg(statsDf, twoColorMode);
 
   // SAR vertical table (naive, choose best Mean difference from pVals <= 0.01)
   // TODO: aquire ALL of the positions
-
   let sequenceDf = statsDf.groupBy(['Mean difference', aminoAcidResidue, positionColName, 'Count', 'Ratio', 'pValue'])
     .where('pValue <= 0.1')
     .aggregate();
@@ -265,23 +271,23 @@ export async function describe(
   renderColNames.push('Mean difference');
 
   // !!! DRAWING PHASE !!!
-  const SARgrid = matrixDf.plot.grid();
-  SARgrid.sort([aminoAcidResidue]);
-  SARgrid.columns.setOrder([aminoAcidResidue].concat(positionColumns));
+  const sarGrid = matrixDf.plot.grid();
+  sarGrid.sort([aminoAcidResidue]);
+  sarGrid.columns.setOrder([aminoAcidResidue].concat(positionColumns));
 
-  const SARVgrid = sequenceDf.plot.grid();
-  SARVgrid.sort([positionColName]);
-  SARVgrid.col('pValue')!.format = 'four digits after comma';
-  SARVgrid.col('pValue')!.name = 'P-Value';
+  const sarVGrid = sequenceDf.plot.grid();
+  sarVGrid.sort([positionColName]);
+  sarVGrid.col('pValue')!.format = 'four digits after comma';
+  sarVGrid.col('pValue')!.name = 'P-Value';
 
   if (!grouping) {
     let tempCol = matrixDf.columns.byName(aminoAcidResidue);
     if (tempCol) {
-      setAARRenderer(tempCol, SARgrid);
+      setAARRenderer(tempCol, sarGrid);
     }
     tempCol = sequenceDf.columns.byName(aminoAcidResidue);
     if (tempCol) {
-      setAARRenderer(tempCol, SARgrid);
+      setAARRenderer(tempCol, sarGrid);
     }
   }
 
@@ -298,19 +304,6 @@ export async function describe(
       return;
     }
 
-    // if (args.cell.isColHeader) {
-    //   if (args.cell.gridColumn.name != aminoAcidResidue) {
-    //     const textSize = args.g.measureText(args.cell.gridColumn.name);
-    //     args.g.fillStyle = '#4b4b4a';
-    //     args.g.fillText(
-    //       args.cell.gridColumn.name,
-    //       args.bounds.x + (args.bounds.width - textSize.width) / 2,
-    //       args.bounds.y + (textSize.actualBoundingBoxAscent + textSize.actualBoundingBoxDescent),
-    //     );
-    //   }
-    //   args.preventDefault();
-    // }
-
     if (
       args.cell.isTableCell &&
       args.cell.tableRowIndex !== null &&
@@ -365,8 +358,8 @@ export async function describe(
     }
     args.g.restore();
   };
-  SARgrid.onCellRender.subscribe(cellRendererFunc);
-  SARVgrid.onCellRender.subscribe(cellRendererFunc);
+  sarGrid.onCellRender.subscribe(cellRendererFunc);
+  sarVGrid.onCellRender.subscribe(cellRendererFunc);
 
   // show all the statistics in a tooltip over cell
   const onCellTooltipFunc = function(cell: DG.GridCell, x: number, y: number) {
@@ -419,10 +412,10 @@ export async function describe(
     }
     return true;
   };
-  SARgrid.onCellTooltip(onCellTooltipFunc);
-  SARVgrid.onCellTooltip(onCellTooltipFunc);
+  sarGrid.onCellTooltip(onCellTooltipFunc);
+  sarVGrid.onCellTooltip(onCellTooltipFunc);
 
-  sourceGrid.onCellPrepare((cell) => {
+  sourceGrid.onCellPrepare((cell: DG.GridCell) => {
     const currentRowIndex = cell.tableRowIndex;
     if (currentRowIndex && invalidIndexes.includes(currentRowIndex) && !cell.isRowHeader) {
       cell.style.backColor = DG.Color.lightLightGray;
@@ -430,13 +423,16 @@ export async function describe(
   });
 
   for (const col of matrixDf.columns.names()) {
-    SARgrid.col(col)!.width = SARgrid.props.rowHeight;
+    sarGrid.col(col)!.width = sarGrid.props.rowHeight;
   }
 
   if (grouping) {
-    SARgrid.col(aminoAcidResidue)!.name = 'Groups';
-    SARVgrid.col(aminoAcidResidue)!.name = 'Groups';
+    sarGrid.col(aminoAcidResidue)!.name = 'Groups';
+    sarVGrid.col(aminoAcidResidue)!.name = 'Groups';
   }
 
-  return [SARgrid, SARVgrid, statsDf, groupMapping];
+  sarGrid.props.allowEdit = false;
+  sarVGrid.props.allowEdit = false;
+
+  return [sarGrid, sarVGrid, statsDf, groupMapping];
 }

package/src/package.ts

@@ -15,7 +15,8 @@ import {PeptideSimilaritySpaceWidget} from './utils/peptide-similarity-space';
 import {manualAlignmentWidget} from './widgets/manual-alignment';
 import {SARViewer, SARViewerVertical} from './viewers/sar-viewer';
 import {peptideMoleculeWidget} from './widgets/peptide-molecule';
-import {correlationAnalysisPlots} from './utils/correlation-analysis';
+import {SpiralPlot} from './viewers/spiral-plot';
+import {SubstViewer} from './viewers/subst-viewer';
 
 export const _package = new DG.Package();
 let tableGrid: DG.Grid;
@@ -25,35 +26,13 @@ let view: DG.TableView;
 
 async function main(chosenFile: string) {
   const pi = DG.TaskBarProgressIndicator.create('Loading Peptides');
-  //let peptides =
-  //  await grok.data.loadTable('https://datagrok.jnj.com/p/ejaeger.il23peptideidp5562/il-23_peptide_idp-5562');
   const path = _package.webRoot + 'files/' + chosenFile;
   const peptides = (await grok.data.loadTable(path));
   peptides.name = 'Peptides';
   peptides.setTag('dataType', 'peptides');
   const view = grok.shell.addTableView(peptides);
   tableGrid = view.grid;
-  // peptides.onSemanticTypeDetecting.subscribe((_: any) => {
-  //   const regexp = new RegExp(/^([^-^\n]*-){2,49}(\w|\(|\))+$/);
-  //   for (const col of peptides.columns) {
-  //     col.semType = DG.Detector.sampleCategories(col, (s: any) => regexp.test(s.trim())) ? 'alignedSequence' : null;
-  //     if (col.semType == 'alignedSequence') {
-  //       expandColumn(col, tableGrid, (ent)=>{
-  //         const subParts:string[] = ent.split('-');
-  //         // eslint-disable-next-line no-unused-vars
-  //         const [text, _] = processSequence(subParts);
-  //         let textSize = 0;
-  //         text.forEach((aar)=>{
-  //           textSize += aar.length;
-  //         });
-  //         return textSize;
-  //       });
-  //     }
-  //   }
-  // });
-
   view.name = 'PeptidesView';
-
   grok.shell.windows.showProperties = true;
 
   pi.close();
@@ -67,7 +46,6 @@ export function Peptides() {
 
   const appDescription = ui.info(
     [
-      // ui.divText('\n To start the application :', {style: {'font-weight': 'bolder'}}),
       ui.list([
         '- automatic recognition of peptide sequences',
         '- native integration with tons of Datagrok out-of-the box features (visualization, filtering, clustering, ' +
@@ -86,25 +64,18 @@ export function Peptides() {
     'Use and analyse peptide sequence data to support your research:',
   );
 
-  const annotationViewerDiv = ui.div();
-
   const windows = grok.shell.windows;
   windows.showToolbox = false;
   windows.showHelp = false;
   windows.showProperties = false;
 
-  const mainDiv = ui.div();
   grok.shell.newView('Peptides', [
     appDescription,
     ui.info([textLink]),
-    ui.div([
-      ui.block25([
-        ui.button('Open peptide sequences demonstration set', () => main('aligned.csv'), ''),
-        ui.button('Open complex case demo', () => main('aligned_2.csv'), ''),
-      ]),
-      ui.block75([annotationViewerDiv]),
+    ui.divH([
+      ui.button('Open peptide sequences demonstration set', () => main('aligned.csv'), ''),
+      ui.button('Open complex case demo', () => main('aligned_2.csv'), ''),
     ]),
-    mainDiv,
   ]);
 }
 
@@ -113,6 +84,9 @@ export function Peptides() {
 //input: column col {semType: alignedSequence}
 //output: widget result
 export async function peptidesPanel(col: DG.Column): Promise<DG.Widget> {
+  if (col.getTag('isAnalysisApplicable') === 'false') {
+    return new DG.Widget(ui.divText('Analysis is not applicable'));
+  }
   view = (grok.shell.v as DG.TableView);
   tableGrid = view.grid;
   currentDf = col.dataFrame;
@@ -136,6 +110,14 @@ export function sarVertical(): SARViewerVertical {
   return new SARViewerVertical();
 }
 
+//name: substitution-analysis-viewer
+//description: Substitution Analysis Viewer
+//tags: viewer
+//output: viewer result
+export function subst(): SubstViewer {
+  return new SubstViewer();
+}
+
 //name: StackedBarchart Widget
 //tags: panel, widgets
 //input: column col {semType: aminoAcids}
@@ -201,14 +183,15 @@ export async function peptideSpacePanel(col: DG.Column): Promise<DG.Widget> {
   return await widget.draw();
 }
 
-//name: Correllation analysis
-export async function correlationAnalysis() {
-  view = (grok.shell.v as DG.TableView);
-
-  const df = await grok.data.files.openTable('Demo:TestJobs:Files:DemoFiles/bio/peptides.csv');
-  const tview = grok.shell.addTableView(df);
-  const [cpviewer, bpviewer] = correlationAnalysisPlots(df.getCol('AlignedSequence'));
-
-  tview.dockManager.dock(cpviewer, 'right');
-  tview.dockManager.dock(bpviewer, 'down');
+//name: Spiral Plot
+////input: dataframe table
+////input: column activity
+//tags: viewer, panel
+//output: viewer result
+export async function spiralPlot(): Promise<DG.Viewer> {//(table: DG.DataFrame, activity: DG.Column) {
+// Read as dataframe
+  const table = await grok.data.files.openTable('Demo:TestJobs:Files:DemoFiles/bio/peptides.csv');
+  const activity = await table.columns.addNewCalculated('-log10(Activity)', '0-Log10(${Activity})');
+  view = grok.shell.addTableView(table);
+  return view.addViewer(SpiralPlot.fromTable(table, {valuesColumnName: activity.name}));
 }

package/src/peptides.ts

@@ -2,8 +2,26 @@ import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 import {createPeptideSimilaritySpaceViewer} from './utils/peptide-similarity-space';
 import {addViewerToHeader} from './viewers/stacked-barchart-viewer';
+// import $ from 'cash-dom';
 
+/**
+ * Peptides controller class.
+ *
+ * @export
+ * @class Peptides
+ */
 export class Peptides {
+  /**
+   * Class initializer
+   *
+   * @param {DG.Grid} tableGrid Working talbe grid.
+   * @param {DG.TableView} view Working view.
+   * @param {DG.DataFrame} currentDf Working table.
+   * @param {{[key: string]: string}} options SAR viewer options
+   * @param {DG.Column} col Aligned sequences column.
+   * @param {string} activityColumnChoice Activity column name.
+   * @memberof Peptides
+   */
   async init(
     tableGrid: DG.Grid,
     view: DG.TableView,
@@ -13,10 +31,10 @@ export class Peptides {
     activityColumnChoice: string,
   ) {
     for (let i = 0; i < tableGrid.columns.length; i++) {
-      const col = tableGrid.columns.byIndex(i);
-      if (col &&
-          col.name &&
-          col.column?.semType != 'aminoAcids'
+      const aarCol = tableGrid.columns.byIndex(i);
+      if (aarCol &&
+          aarCol.name &&
+          aarCol.column?.semType != 'aminoAcids'
       ) {
         //@ts-ignore
         tableGrid.columns.byIndex(i)?.visible = false;
@@ -24,12 +42,18 @@ export class Peptides {
     }
 
     const originalDfColumns = (currentDf.columns as DG.ColumnList).names();
+    const originalDfName = currentDf.name;
+
+    const substViewer = view.addViewer(
+      'substitution-analysis-viewer', {'activityColumnName': options['activityColumnName']},
+    );
+    view.dockManager.dock(substViewer, DG.DOCK_TYPE.RIGHT, null, 'Substitution Analysis');
 
     const sarViewer = view.addViewer('peptide-sar-viewer', options);
     const sarNode = view.dockManager.dock(sarViewer, DG.DOCK_TYPE.DOWN, null, 'SAR Viewer');
 
     const sarViewerVertical = view.addViewer('peptide-sar-viewer-vertical');
-    view.dockManager.dock(sarViewerVertical, DG.DOCK_TYPE.RIGHT, sarNode, 'SAR Vertical Viewer');
+    const sarVNode = view.dockManager.dock(sarViewerVertical, DG.DOCK_TYPE.RIGHT, sarNode, 'SAR Vertical Viewer');
 
     const peptideSpaceViewer = await createPeptideSimilaritySpaceViewer(
       currentDf,
@@ -40,10 +64,13 @@ export class Peptides {
       view,
       `${activityColumnChoice}Scaled`,
     );
-    view.dockManager.dock(peptideSpaceViewer, DG.DOCK_TYPE.LEFT, sarNode, 'Peptide Space Viewer', 0.3);
+    const psNode = view.dockManager.dock(peptideSpaceViewer, DG.DOCK_TYPE.LEFT, sarNode, 'Peptide Space Viewer', 0.3);
+    // const sarDockNodes = [sarNode, sarVNode, psNode];
+    // const sarViewers = [sarViewer, sarViewerVertical, peptideSpaceViewer];
 
     const StackedBarchartProm = currentDf.plot.fromType('StackedBarChartAA');
     addViewerToHeader(tableGrid, StackedBarchartProm);
+    tableGrid.props.allowEdit = false;
 
     const hideIcon = ui.iconFA('window-close', () => { //undo?, times?
       const viewers = [];
@@ -66,10 +93,47 @@ export class Peptides {
 
       tableGrid.setOptions({'colHeaderHeight': 20});
       tableGrid.columns.setVisible(originalDfColumns);
+      tableGrid.props.allowEdit = true;
+      currentDf.name = originalDfName;
 
       view.setRibbonPanels(ribbonPanels);
     }, 'Close viewers and restore dataframe');
 
+    // let substViewer: DG.Viewer | null = null;
+    // let substNode: DG.DockNode | null = null;
+    // let isSA = false;
+    // let viewLayout1: DG.ViewLayout | null = null;
+    // let viewLayout2: DG.ViewLayout | null = null;
+    // const switchViewers = ui.iconFA('toggle-on', () => {
+    //   if (isSA) {
+    //     viewLayout2 = view.saveLayout();
+    //     // view.dockManager.close(substNode!);
+    //     substViewer?.close();
+
+    //     view.loadLayout(viewLayout1!);
+
+    //     $(switchViewers).removeClass('fa-toggle-off');
+    //     $(switchViewers).addClass('fa-toggle-on');
+    //   } else {
+    //     viewLayout1 = view.saveLayout();
+    //     // sarDockNodes.forEach((node) => view.dockManager.close(node));
+    //     sarViewers.forEach((v) => v.close());
+
+    //     if (viewLayout2 === null) {
+    //       substViewer = view.addViewer(
+    //         'substitution-analysis-viewer', {'activityColumnName': options['activityColumnName']},
+    //       );
+    //       substNode = view.dockManager.dock(substViewer, DG.DOCK_TYPE.DOWN, null, 'Substitution Analysis');
+    //     } else {
+    //       view.loadLayout(viewLayout2);
+    //     }
+
+    //     $(switchViewers).removeClass('fa-toggle-on');
+    //     $(switchViewers).addClass('fa-toggle-off');
+    //   }
+    //   isSA = !isSA;
+    // });
+
     const ribbonPanels = view.getRibbonPanels();
     view.setRibbonPanels([[hideIcon]]);
   }

package/src/styles.css

@@ -0,0 +1,37 @@
+.pep-textarea-box {
+  position: relative;
+}
+
+.pep-textarea-box:hover .pep-snippet-editor-icon {
+  visibility: visible;
+}
+
+.pep-snippet-editor-icon {
+  position: absolute;
+  top: 5px;
+  visibility: hidden;
+  margin: 5px;
+  z-index: 1;
+}
+
+.pep-reset-icon {
+  right: 10px;
+}
+
+.pep-snippet-editor-icon i {
+  font-size: 13px;
+}
+
+.pep-snippet-editor-icon:hover {
+  background-color: var(--steel-1);
+  border-radius: 2px;
+}
+
+.pep-snippet-inline-icon i {
+  font-size: 13px;
+}
+
+.pep-textinput {
+  height: 50px;
+  overflow: hidden;
+}