@datagrok/peptides 1.0.1 → 1.0.2

package/src/utils/chem-palette.ts

@@ -1,280 +0,0 @@
-import * as grok from 'datagrok-api/grok';
-import * as ui from 'datagrok-api/ui';
-import * as DG from 'datagrok-api/dg';
-
-import {StringDictionary} from '@datagrok-libraries/utils/src/type-declarations';
-import {MonomerLibrary} from '../monomer-library';
-
-
-export class ChemPalette {
-  cp: StringDictionary = {};
-  isInit: boolean = false;
-  monomerLib: MonomerLibrary | null = null;
-
-  /**
-   * Creates an instance of ChemPalette.
-   *
-   * @param {string} scheme Color scheme to use.
-   * @param {boolean} [grouping=false] Is grouping enabled.
-   * @memberof ChemPalette
-   */
-  private constructor(scheme: string, grouping = false) {
-    if (scheme == 'grok')
-      this.cp = ChemPalette.getDatagrok(grouping);
-  }
-
-  /**
-   * Renders 2D representation of a amino acid residue in a tooltip.
-   *
-   * @param {DG.GridCell} cell Grid cell to show tooltip over.
-   * @param {number} x x coordinate of the mouse pointer.
-   * @param {number} y y coordinate of the mouse pointer.
-   * @param {MonomerLibrary} monomerLib Monomer Library instance
-   */
-  static showTooltip(cell: DG.GridCell, x: number, y: number, monomerLib: MonomerLibrary): void {
-    const s = cell.cell.value as string;
-    let toDisplay = [ui.divText(s)];
-    const [, aarOuter, aarInner] = ChemPalette.getColorAAPivot(s);
-    for (const aar of [aarOuter, aarInner]) {
-      if (monomerLib.monomerNames.includes(aar)) {
-        if (aar in ChemPalette.AANames)
-          toDisplay = [ui.divText(ChemPalette.AANames[aar])];
-
-        if (aar in ChemPalette.AAFullNames)
-          toDisplay = [ui.divText(ChemPalette.AANames[ChemPalette.AAFullNames[aar]])];
-
-        const options = {
-          autoCrop: true,
-          autoCropMargin: 0,
-          suppressChiralText: true,
-        };
-        const sketch = grok.chem.svgMol(monomerLib.getMonomerMol(aar), undefined, undefined, options);
-        if (toDisplay.length == 2)
-          toDisplay.push(ui.divText('Modified'));
-
-        toDisplay.push(sketch);
-      }
-    }
-    ui.tooltip.show(ui.divV(toDisplay), x, y);
-  }
-
-  /**
-   * Retursn divided amino with its content in the bracket, if the conetent is number, then its omitted
-   *
-   * @param {string} c raw amino
-   * @return {[string, string]} outer and inner content
-   */
-  static getInnerOuter(c: string): [string, string] {
-    let isInner = 0;
-    let inner = '';
-    let outer = '';
-
-    for (const char of c) {
-      if (char == '(')
-        isInner++;
-      else if (char == ')')
-        isInner--;
-      else if (isInner)
-        inner += char;
-      else
-        outer += char;
-    }
-
-    return !isNaN(parseInt(inner)) ? [outer, ''] : [outer, inner];
-  }
-
-  static getColorAAPivot(monomer: string = '', scheme: 'grok' = 'grok'): [string, string, string, number] {
-    const chemPaletteInstance = ChemPalette.getPalette(scheme);
-    let [outerMonomer, innerMonomer] = ChemPalette.getInnerOuter(monomer);
-    outerMonomer = (outerMonomer.length > 6 ? `${outerMonomer.slice(0, 3)}...` : outerMonomer);
-    innerMonomer = (innerMonomer.length > 6 ? `${innerMonomer.slice(0, 3)}...` : innerMonomer);
-
-    if (monomer.length == 1 || monomer[1] == '(') {
-      const amino = monomer[0]?.toUpperCase()!;
-      return amino in chemPaletteInstance ?
-        [chemPaletteInstance[amino], amino, innerMonomer, 1]:
-        [ChemPalette.undefinedColor, outerMonomer, innerMonomer, 1];
-    }
-
-    if (monomer[0] == 'd' && monomer[1]! in chemPaletteInstance) {
-      if (monomer.length == 2 || monomer[2] == '(') {
-        const amino = monomer[1]?.toUpperCase()!;
-        return amino in chemPaletteInstance ?
-          [chemPaletteInstance[amino], amino, innerMonomer, 2]:
-          [ChemPalette.undefinedColor, outerMonomer, innerMonomer, 2];
-      }
-    }
-
-    if (monomer.substring(0, 3) in ChemPalette.AAFullNames) {
-      if (monomer.length == 3 || monomer[3] == '(') {
-        const amino = ChemPalette.AAFullNames[monomer.substring(0, 3)];
-        return amino in chemPaletteInstance ?
-          [chemPaletteInstance[amino], amino, innerMonomer, 3]:
-          [ChemPalette.undefinedColor, outerMonomer, innerMonomer, 3];
-      }
-    }
-
-    if (monomer[0]?.toLowerCase() == monomer[0]) {
-      if (monomer.substring(1, 3) in ChemPalette.AAFullNames) {
-        if (monomer.length == 4 || monomer[4] == '(') {
-          const amino = ChemPalette.AAFullNames[monomer.substring(1, 3)];
-          return amino in chemPaletteInstance ?
-            [chemPaletteInstance[amino], amino, innerMonomer, 4]:
-            [ChemPalette.undefinedColor, outerMonomer, innerMonomer, 4];
-        }
-      }
-    }
-
-    return [ChemPalette.undefinedColor, outerMonomer, innerMonomer, 0];
-  }
-
-  static colourPalette: {[key: string]: string[]} = {
-    'orange': ['rgb(255,187,120)', 'rgb(245,167,100)', 'rgb(235,137,70)', 'rgb(205, 111, 71)'],
-    'all_green': ['rgb(44,160,44)', 'rgb(74,160,74)', 'rgb(23,103,57)', 'rgb(30,110,96)', 'rgb(60,131,95)',
-      'rgb(24,110,79)', 'rgb(152,223,138)', 'rgb(182, 223, 138)', 'rgb(152, 193, 138)'],
-    'all_blue': ['rgb(31,119,180)', 'rgb(23,190,207)', 'rgb(122, 102, 189)', 'rgb(158,218,229)', 'rgb(141, 124, 217)',
-      'rgb(31, 120, 150)'],
-    'magenta': ['rgb(162,106,192)', 'rgb(197,165,224)', 'rgb(208,113,218)'],
-    'red': ['rgb(214,39,40)', 'rgb(255,152,150)'],
-    'st_blue': ['rgb(23,190,207)', 'rgb(158,218,229)', 'rgb(31,119,180)'],
-    'dark_blue': ['rgb(31,119,180)', 'rgb(31, 120, 150)'],
-    'light_blue': ['rgb(23,190,207)', 'rgb(158,218,229)', 'rgb(108, 218, 229)', 'rgb(23,190,227)'],
-    'lilac_blue': ['rgb(124,102,211)', 'rgb(149,134,217)', 'rgb(97, 81, 150)'],
-    'dark_green': ['rgb(23,103,57)', 'rgb(30,110,96)', 'rgb(60,131,95)', 'rgb(24,110,79)'],
-    'green': ['rgb(44,160,44)', 'rgb(74,160,74)'],
-    'light_green': ['rgb(152,223,138)', 'rgb(182, 223, 138)', 'rgb(152, 193, 138)'],
-    'st_green': ['rgb(44,160,44)', 'rgb(152,223,138)', 'rgb(39, 174, 96)', 'rgb(74,160,74)'],
-    'pink': ['rgb(247,182,210)'],
-    'brown': ['rgb(140,86,75)', 'rgb(102, 62, 54)'],
-    'gray': ['rgb(127,127,127)', 'rgb(199,199,199)', 'rgb(196,156,148)', 'rgb(222, 222, 180)'],
-    'yellow': ['rgb(188,189,34)'],
-    'white': ['rgb(230,230,230)'],
-  };
-
-  static grokGroups: {[key: string]: string[]} = {
-    'yellow': ['C', 'U'],
-    'red': ['G', 'P'],
-    'all_green': ['A', 'V', 'I', 'L', 'M', 'F', 'Y', 'W'],
-    'light_blue': ['R', 'H', 'K'],
-    'dark_blue': ['D', 'E'],
-    'orange': ['S', 'T', 'N', 'Q'],
-  };
-
-  static undefinedColor = 'rgb(100,100,100)';
-
-  static makePalette(dt: {[key: string]: string[]}, simplified = false, grouping = false): StringDictionary {
-    const palette: { [key: string]: string } = {};
-    const groups = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
-    let currentGroup = 0;
-    for (const [color, monomers] of Object.entries(dt)) {
-      monomers.forEach((monomer, index) => {
-        palette[grouping ? groups[currentGroup] : monomer] = ChemPalette.colourPalette[color][simplified ? 0 : index];
-      });
-      currentGroup++;
-    }
-    return palette;
-  }
-
-  static AANames: StringDictionary = {
-    'G': 'Glycine',
-    'L': 'Leucine',
-    'Y': 'Tyrosine',
-    'S': 'Serine',
-    'E': 'Glutamic acid',
-    'Q': 'Glutamine',
-    'D': 'Aspartic acid',
-    'N': 'Asparagine',
-    'F': 'Phenylalanine',
-    'A': 'Alanine',
-    'K': 'Lysine',
-    'R': 'Arginine',
-    'H': 'Histidine',
-    'C': 'Cysteine',
-    'V': 'Valine',
-    'P': 'Proline',
-    'W': 'Tryptophan',
-    'I': 'Isoleucine',
-    'M': 'Methionine',
-    'T': 'Threonine',
-  };
-
-  static AASmiles: StringDictionary = {
-    'G': 'NCC(=O)O',
-    'L': 'N[C@H](CC(C)C)C(=O)O',
-    'Y': 'NC(CC1=CC=C(O)C=C1)C(=O)O',
-    'S': 'NC(CO)C(=O)O',
-    'E': 'N[C@@H](CCC(O)=O)C(=O)O',
-    'Q': 'N[C@@H](CCC(N)=O)C(=O)O',
-    'D': 'N[C@@H](CC(O)=O)C(=O)O',
-    'N': 'N[C@@H](CC(N)=O)C(=O)O',
-    'F': 'NC(CC1=CC=CC=C1)C(=O)O',
-    'A': 'N[C@H](C)C(=O)O',
-    'K': 'NC(CCCCN)C(=O)O',
-    'R': 'N[C@H](CCCNC(=N)C)C(=O)O',
-    'H': 'NC(CC1=CN=C[N]1)C(=O)O',
-    'C': 'N[C@@H](CS)C(=O)O',
-    'V': 'NC(C(C)C)C(=O)O',
-    'P': 'N(CCC1)C1C(=O)O',
-    'W': 'N[C@@H](Cc1c2ccccc2n([H])c1)C(=O)O',
-    'I': 'N[C@H]([C@H](C)CC)C(=O)O',
-    'M': 'NC(CCSC)C(=O)O',
-    'T': 'NC(C(O)C)C(=O)O',
-  };
-
-  static AASmilesTruncated: StringDictionary = {
-    'G': '*C*',
-    'L': 'CC(C)C[C@H](*)*',
-    'Y': 'C1=CC(=CC=C1CC(*)*)O',
-    'S': 'OCC(*)C*',
-    'E': '*[C@@H](CCC(O)=O)*',
-    'Q': '*N[C@@H](CCC(N)=O)*',
-    'D': '*[C@@H](CC(O)=O)*',
-    'N': '*[C@@H](CC(N)=O)*',
-    'F': 'C1=CC=C(C=C1)CC(*)*',
-    'A': 'C[C@H](*)*',
-    'K': 'C(CCN)CC(*)*',
-    'R': '*[C@H](CCCNC(=N)C)*',
-    'H': 'C1=C(NC=N1)CC(*)*',
-    'C': 'C([C@@H](*)*)S',
-    'V': 'CC(C)C(*)*',
-    'P': 'C1CCN(*)C1*',
-    'W': '*[C@@H](Cc1c2ccccc2n([H])c1)*',
-    'I': 'CC[C@H](C)[C@H](*)*',
-    'M': 'CSCCC(*)*',
-    'T': 'CC(O)C(*)*',
-  };
-
-  static AAFullNames: StringDictionary = {
-    'Ala': 'A',
-    'Arg': 'R',
-    'Asn': 'N',
-    'Asp': 'D',
-    'Cys': 'C',
-    'Gln': 'Q',
-    'Glu': 'E',
-    'Gly': 'G',
-    'His': 'H',
-    'Ile': 'I',
-    'Leu': 'L',
-    'Lys': 'K',
-    'Met': 'M',
-    'Phe': 'F',
-    'Pro': 'P',
-    'Ser': 'S',
-    'Thr': 'T',
-    'Trp': 'W',
-    'Tyr': 'Y',
-    'Val': 'V',
-  };
-
-  static getDatagrok(grouping = false): StringDictionary {
-    return ChemPalette.makePalette(ChemPalette.grokGroups, false, grouping);
-  }
-
-  static getPalette(scheme: 'grok'): StringDictionary {
-    if (scheme == 'grok')
-      return ChemPalette.getDatagrok();
-    else
-      throw new Error(`ChemPalette: scheme \`${scheme}\` does not exist`);
-  }
-}

package/src/viewers/stacked-barchart-viewer.ts

@@ -1,321 +0,0 @@
-import * as DG from 'datagrok-api/dg';
-import * as rxjs from 'rxjs';
-import {MonomerLibrary} from '../monomer-library';
-
-import * as C from '../utils/constants';
-import * as type from '../utils/types';
-import {PeptidesModel} from '../model';
-
-export function addViewerToHeader(grid: DG.Grid, barchart: StackedBarChart): void {
-  if (grid.temp['containsBarchart'])
-    return;
-
-  const eventAction = (ev: MouseEvent): void => {
-    const cell = grid.hitTest(ev.offsetX, ev.offsetY);
-    if (cell?.isColHeader && cell.tableColumn?.semType == C.SEM_TYPES.AMINO_ACIDS) {
-      const newBarPart = barchart.findAARandPosition(cell, ev);
-      // barchart._currentBarPart = newBarPart;
-      barchart.requestAction(ev, newBarPart);
-      barchart.computeData();
-    }
-  };
-
-  // The following events makes the barchart interactive
-  rxjs.fromEvent<MouseEvent>(grid.overlay, 'mousemove').subscribe((mouseMove: MouseEvent) => eventAction(mouseMove));
-  rxjs.fromEvent<MouseEvent>(grid.overlay, 'click').subscribe((mouseMove: MouseEvent) => eventAction(mouseMove));
-  rxjs.fromEvent<MouseEvent>(grid.overlay, 'mouseout').subscribe(() => barchart.computeData());
-
-  barchart.tableCanvas = grid.canvas;
-
-  //Setting grid options
-  grid.setOptions({'colHeaderHeight': 130});
-
-  grid.onCellTooltip((cell, x, y) => {
-    const colSemType = cell.tableColumn?.semType as C.SEM_TYPES;
-    if (colSemType == C.SEM_TYPES.ALIGNED_SEQUENCE || colSemType == C.SEM_TYPES.AMINO_ACIDS) {
-      if (!cell.isColHeader) {
-        const monomerLib = cell.cell.dataFrame.temp[MonomerLibrary.id];
-        PeptidesModel.chemPalette.showTooltip(cell, x, y, monomerLib);
-      }
-    }
-    return true;
-  });
-
-  grid.onCellRender.subscribe((args) => {
-    const context = args.g;
-    const boundX = args.bounds.x;
-    const boundY = args.bounds.y;
-    const boundWidth = args.bounds.width;
-    const boundHeight = args.bounds.height;
-    const cell = args.cell;
-    context.save();
-    context.beginPath();
-    context.rect(boundX, boundY, boundWidth, boundHeight);
-    context.clip();
-
-    if (cell.isColHeader && barchart.aminoColumnNames.includes(cell.gridColumn.name)) {
-      barchart.renderBarToCanvas(context, cell, boundX, boundY, boundWidth, boundHeight);
-      args.preventDefault();
-    }
-    context.restore();
-  });
-
-  grid.temp['containsBarchart'] = true;
-}
-
-export class StackedBarChart extends DG.JsViewer {
-  dataEmptyAA: string;
-  tableCanvas: HTMLCanvasElement | undefined;
-  aminoColumnNames: string[] = [];
-  ord: { [Key: string]: number; } = {};
-  aminoColumnIndices: {[Key: string]: number} = {};
-  aggregatedFilterTables: type.DataFrameDict = {};
-  max = 0;
-  barStats: {[Key: string]: type.BarChart.BarStatsObject[]} = {};
-  selected: type.BarChart.BarPart[] = [];
-  aggregatedSelectedTables: type.DataFrameDict = {};
-  model!: PeptidesModel;
-
-  constructor() {
-    super();
-    this.dataEmptyAA = this.string('dataEmptyAA', '-');
-  }
-
-  init(): void {
-    const groups: {[key: string]: string[]} = {
-      'yellow': ['C', 'U'],
-      'red': ['G', 'P'],
-      'all_green': ['A', 'V', 'I', 'L', 'M', 'F', 'Y', 'W'],
-      'light_blue': ['R', 'H', 'K'],
-      'dark_blue': ['D', 'E'],
-      'orange': ['S', 'T', 'N', 'Q'],
-    };
-    let i = 0;
-
-    for (const value of Object.values(groups)) {
-      for (const obj of value)
-        this.ord[obj] = i++;
-    }
-
-    this.aminoColumnNames = [];
-  }
-
-  // Stream subscriptions
-  async onTableAttached(): Promise<void> {
-    this.init();
-    this.model = await PeptidesModel.getInstance(this.dataFrame);
-    // this.controller.init(this.dataFrame);
-    if (this.dataFrame) {
-      this.subs.push(DG.debounce(this.dataFrame.selection.onChanged, 50).subscribe((_) => this.computeData()));
-      this.subs.push(DG.debounce(this.dataFrame.filter.onChanged, 50).subscribe((_) => this.computeData()));
-      this.subs.push(DG.debounce(this.dataFrame.onValuesChanged, 50).subscribe(() => this.computeData()));
-    }
-    this.computeData();
-  }
-
-  // Cancel subscriptions when the viewer is detached
-  detach(): void {
-    this.subs.forEach((sub) => sub.unsubscribe());
-  }
-
-  computeData(): void {
-    this.aminoColumnNames = [];
-    this.aminoColumnIndices = {};
-
-    this.dataFrame.columns.names().forEach((name: string) => {
-      if (this.dataFrame.getCol(name).semType === C.SEM_TYPES.AMINO_ACIDS &&
-          !this.dataFrame.getCol(name).categories.includes('COOH') &&
-          !this.dataFrame.getCol(name).categories.includes('NH2')) {
-        this.aminoColumnIndices[name] = this.aminoColumnNames.length + 1;
-        this.aminoColumnNames.push(name);
-      }
-    });
-
-    this.aggregatedFilterTables = {};
-    this.aggregatedSelectedTables = {};
-    //TODO: optimize it, why store so many tables?
-    this.aminoColumnNames.forEach((name) => {
-      this.aggregatedFilterTables[name] = this.dataFrame
-        .groupBy([name])
-        .whereRowMask(this.dataFrame.filter)
-        .add('count', name, `${name}_count`)
-        .aggregate();
-
-      this.aggregatedSelectedTables[name] = this.dataFrame
-        .groupBy([name])
-        .whereRowMask(this.dataFrame.selection)
-        .add('count', name, `${name}_count`)
-        .aggregate();
-    });
-
-    this.barStats = {};
-
-    for (const [name, df] of Object.entries(this.aggregatedFilterTables)) {
-      const colData: {'name': string, 'count': number, 'selectedCount': number}[] = [];
-      const aminoCol = df.getCol(name);
-      const aminoCountCol = df.getCol(`${name}_count`);
-      this.barStats[name] = colData;
-
-      for (let i = 0; i < df.rowCount; i++) {
-        const amino = aminoCol.get(i);
-        const aminoCount = aminoCountCol.get(i);
-        const aminoObj = {'name': amino, 'count': aminoCount, 'selectedCount': 0};
-        const aggSelectedAminoCol = this.aggregatedSelectedTables[name].getCol(`${name}`);
-        const aggSelectedCountCol = this.aggregatedSelectedTables[name].getCol(`${name}_count`);
-
-        if (!amino || amino === this.dataEmptyAA)
-          continue;
-
-        colData.push(aminoObj);
-
-        for (let j = 0; j < aggSelectedCountCol.length; j++) {
-          const selectedAmino = aggSelectedAminoCol.get(j);
-          const curAmino = (selectedAmino);
-          if (curAmino == amino) {
-            aminoObj['selectedCount'] = aggSelectedCountCol.get(j);
-            break;
-          }
-        }
-      }
-
-      colData.sort((o1, o2) => this.ord[o2['name']] - this.ord[o1['name']]);
-    }
-
-    this.max = this.dataFrame.filter.trueCount;
-  }
-
-  renderBarToCanvas(g: CanvasRenderingContext2D, cell: DG.GridCell, x: number, y: number, w: number, h: number): void {
-    const name = cell.tableColumn!.name;
-    const colNameSize = g.measureText(name).width;
-    const barData = this.barStats[name];
-    const margin = 0.2;
-    const innerMargin = 0.02;
-    const selectLineRatio = 0.1;
-    let sum = 0;
-
-    barData.forEach((obj) => {
-      sum += obj['count'];
-    });
-
-    x = x + w * margin;
-    y = y + h * margin / 4;
-    w = w - w * margin * 2;
-    h = h - h * margin;
-    const barWidth = w - 10;
-    g.fillStyle = 'black';
-    g.textBaseline = 'top';
-    g.font = `${h * margin / 2}px`;
-    g.fillText(name, x + (w - colNameSize) / 2, y + h + h * margin / 4);
-
-    barData.forEach((obj) => {
-      const sBarHeight = h * obj['count'] / this.max;
-      const gapSize = sBarHeight * innerMargin;
-      const verticalShift = (this.max - sum) / this.max;
-      const [color, aarOuter] = PeptidesModel.chemPalette.getColorAAPivot(obj['name']);
-      const textSize = g.measureText(aarOuter);
-      const fontSize = 11;
-      const leftMargin = (w - (aarOuter.length > 1 ? fontSize : textSize.width - 8)) / 2;
-      const subBartHeight = sBarHeight - gapSize;
-      const yStart = h * verticalShift + gapSize / 2;
-      const xStart = (w - barWidth) / 2;
-      const absX = x + leftMargin;
-      const absY = y + yStart + subBartHeight / 2 + (aarOuter.length == 1 ? + 4 : 0);
-      const eps = 0.1;
-
-      g.strokeStyle = color;
-      g.fillStyle = color;
-      if (textSize.width <= subBartHeight) {
-        const origTransform = g.getTransform();
-
-        if (color != PeptidesModel.chemPalette.undefinedColor) {
-          g.fillRect(x + xStart, y + yStart, barWidth, subBartHeight);
-          g.fillStyle = 'black';
-        } else
-          g.strokeRect(x + xStart + 0.5, y + yStart, barWidth - 1, subBartHeight);
-
-        g.font = `${fontSize}px monospace`;
-        g.textAlign = 'center';
-        g.textBaseline = 'bottom';
-
-        if (aarOuter.length > 1) {
-          g.translate(absX, absY);
-          g.rotate(Math.PI / 2);
-          g.translate(-absX, -absY);
-        }
-
-        g.fillText(aarOuter, absX, absY);
-        g.setTransform(origTransform);
-      } else
-        g.fillRect(x + xStart, y + yStart, barWidth, subBartHeight);
-
-      if (obj['selectedCount'] > eps) {
-        g.fillStyle = 'rgb(255,165,0)';
-        g.fillRect(
-          x + xStart - w * selectLineRatio * 2,
-          y + yStart,
-          barWidth * selectLineRatio,
-          h * obj['selectedCount'] / this.max - gapSize,
-        );
-      }
-
-      sum -= obj['count'];
-    });
-  }
-
-  //TODO: refactor and simplify it
-  findAARandPosition(cell: DG.GridCell, mouseEvent: MouseEvent): {colName: string, aaName: string} | null {
-    if (!cell.tableColumn?.name || !this.aminoColumnNames.includes(cell.tableColumn.name))
-      return null;
-
-    const offsetX = mouseEvent.offsetX;
-    const offsetY = mouseEvent.offsetY;
-    const colName = cell.tableColumn?.name;
-    const innerMargin = 0.02;
-    const margin = 0.2;
-    const bound = cell.bounds;
-    const height = 130;
-    const x = bound.x + bound.width * margin;
-    const y = height * margin / 4;
-    const w = bound.width - bound.width * margin * 2;
-    const h = height - height * margin;
-    const barData = this.barStats[colName];
-    const barWidth = w - 10;
-    let sum = 0;
-
-    barData.forEach((obj) => {
-      sum += obj['count'];
-    });
-
-    const xStart = x + (w - barWidth) / 2;
-    for (const obj of barData) {
-      const sBarHeight = h * obj['count'] / this.max;
-      const gapSize = sBarHeight * innerMargin;
-      const verticalShift = (this.max - sum) / this.max;
-      const subBartHeight = sBarHeight - gapSize;
-      const yStart = y + h * verticalShift + gapSize / 2;
-
-      const isIntersectingX = offsetX >= xStart && offsetX <= xStart + barWidth;
-      const isIntersectingY = offsetY >= yStart && offsetY <= yStart + subBartHeight;
-
-      if (isIntersectingX && isIntersectingY)
-        return {'colName': colName, 'aaName': obj['name']};
-
-      sum -= obj['count'];
-    }
-
-    return null;
-  }
-
-  /** Requests highlight/select/filter action based on currentBarPart */
-  requestAction(event: MouseEvent, barPart: {colName: string, aaName: string} | null): void {
-    if (!barPart)
-      return;
-    const aar = barPart['aaName'];
-    const position = barPart['colName'];
-    if (event.type === 'click') {
-      event.shiftKey ? this.model.modifyCurrentSelection(aar, position) :
-        this.model.initCurrentSelection(aar, position);
-    } else
-      this.model.showTooltip(aar, position, event.clientX, event.clientY);
-  }
-}

package/src/widgets/multiple-sequence-alignment.ts

@@ -1,9 +0,0 @@
-import * as DG from 'datagrok-api/dg';
-import {runKalign} from '../utils/multiple-sequence-alignment';
-
-export async function msaWidget(col: DG.Column): Promise<DG.DataFrame> {
-  const msaCol = await runKalign(col, true);
-  const table = col.dataFrame;
-  table.columns.add(msaCol);
-  return table;
-}

package/src/widgets/peptide-molecule.ts

@@ -1,82 +0,0 @@
-import * as grok from 'datagrok-api/grok';
-import * as ui from 'datagrok-api/ui';
-import * as DG from 'datagrok-api/dg';
-import * as C from '../utils/constants';
-import {PeptidesModel} from '../model';
-
-/**
- * 3D representation widget of peptide molecule.
- *
- * @export
- * @param {string} pep Peptide string.
- * @return {Promise<DG.Widget>} Widget.
- */
-export async function peptideMoleculeWidget(pep: string, currentTable: DG.DataFrame): Promise<DG.Widget> {
-  const pi = DG.TaskBarProgressIndicator.create('Creating NGL view');
-  const separator = currentTable.columns.bySemType(C.SEM_TYPES.ALIGNED_SEQUENCE)!.tags[C.TAGS.SEPARATOR];
-
-  let widgetHost;
-  let smiles = '';
-  let molfileStr = '';
-  try {
-    try {
-      const params = {table: currentTable};
-      const result = await grok.functions.call('Customerextensions:getPeptideStructure', params) as string[];
-      if (result.length !== 0) {
-        smiles = result[0];
-        molfileStr = result[1];
-        throw new Error(`Found structure in DB`);
-      }
-
-      smiles = getMolecule(pep, separator);
-      if (smiles == '')
-        throw new Error('Couldn\'t get smiles');
-
-      molfileStr = (await grok.functions.call('Peptides:SmiTo3D', {smiles})) as string;
-    } catch (e) {
-      console.warn(e);
-    }
-
-    try {
-      molfileStr = molfileStr.replaceAll('\\n', '\n');
-      const stringBlob = new Blob([molfileStr], {type: 'text/plain'});
-      const nglHost = ui.div([], {classes: 'd4-ngl-viewer', id: 'ngl-3d-host'});
-
-      //@ts-ignore
-      const stage = new NGL.Stage(nglHost, {backgroundColor: 'white'});
-      //@ts-ignore
-      stage.loadFile(stringBlob, {ext: 'sdf'}).then(function(comp: NGL.StructureComponent) {
-        stage.setSize(300, 300);
-        comp.addRepresentation('ball+stick');
-        comp.autoView();
-      });
-      const sketch = grok.chem.svgMol(molfileStr);
-      const panel = ui.divH([sketch]);
-
-      widgetHost = ui.div([panel, nglHost]);
-    } catch (e) {
-      widgetHost = ui.divText('Couldn\'t get peptide structure');
-    }
-  } catch (e) {
-    widgetHost = ui.divText('Couldn\'t get peptide structure');
-  }
-  pi.close();
-  return new DG.Widget(widgetHost);
-}
-
-export function getMolecule(pep: string, separator: string): string {
-  const split = pep.split(separator);
-  const mols = [];
-  const chemPalette = PeptidesModel.chemPalette;
-  for (let i = 1; i < split.length - 1; i++) {
-    if (split[i] in chemPalette.AASmiles) {
-      const aar = chemPalette.AASmiles[split[i]];
-      mols[i] = aar.substring(0, aar.length - 1);
-    } else if (!split[i] || split[i] == '-')
-      mols[i] = '';
-    else
-      return '';
-  }
-
-  return mols.join('') + 'O';
-}