@datagrok/bio 2.1.11 → 2.4.2

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

@@ -1,16 +1,14 @@
 /* Do not change these import lines to match external modules in webpack configuration */
-import * as grok from 'datagrok-api/grok';
-import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
-import * as bio from '@datagrok-libraries/bio';
 
 import {FastaFileHandler} from '@datagrok-libraries/bio/src/utils/fasta-handler';
-
-//@ts-ignore
+import {TAGS as bioTAGS} from '@datagrok-libraries/bio/src/utils/macromolecule';
+//@ts-ignore: there are no types for this library
 import Aioli from '@biowasm/aioli';
 
 import {AlignedSequenceEncoder} from '@datagrok-libraries/bio/src/sequence-encoder';
-import {UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
+const fastaInputFilename = 'input.fa';
+const fastaOutputFilename = 'result.fasta';
 
 /**
  * Converts array of sequences into simple fasta string.
@@ -30,48 +28,73 @@ function _stringsToFasta(sequences: string[]): string {
  * @param {string} unUsedName
  * @return {Promise<DG.Column>} Aligned sequences.
  */
-export async function runKalign(srcCol: DG.Column, isAligned = false, unUsedName: string = ''): Promise<DG.Column> {
-  let sequences = srcCol.toList();
+export async function runKalign(srcCol: DG.Column<string>, isAligned: boolean = false, unUsedName: string = '',
+  clustersCol: DG.Column | null = null): Promise<DG.Column> {
+  let sequences: string[] = srcCol.toList();
 
   if (isAligned)
-    sequences = sequences.map((v: string, _) => AlignedSequenceEncoder.clean(v).replace(/\-/g, ''));
+    sequences = sequences.map((v: string) => AlignedSequenceEncoder.clean(v).replace(/\-/g, ''));
+
+  const sequencesLength = srcCol.length;
+  clustersCol ??= DG.Column.string('Clusters', sequencesLength).init('0');
+  if (clustersCol.type != DG.COLUMN_TYPE.STRING)
+    clustersCol = clustersCol.convertTo(DG.TYPE.STRING);
+  clustersCol.compact();
+  
+  //TODO: use fixed-size inner arrays, but first need to expose the method to get each category count
+  const clustersColCategories = clustersCol.categories;
+  const clustersColData = clustersCol.getRawData();
+  const fastaSequences: string[][] = new Array(clustersColCategories.length);
+  const clusterIndexes: number[][] = new Array(clustersColCategories.length);
+  for (let rowIdx = 0; rowIdx < sequencesLength; ++rowIdx) {
+    const clusterCategoryIdx = clustersColData[rowIdx];
+    (fastaSequences[clusterCategoryIdx] ??= []).push(sequences[rowIdx]);
+    (clusterIndexes[clusterCategoryIdx] ??= []).push(rowIdx);
+  }
 
-  const fasta = _stringsToFasta(sequences);
   const CLI = await new Aioli([
     'base/1.0.0',
-    {tool: 'kalign', version: '3.3.1', reinit: true,}
+    {tool: 'kalign', version: '3.3.1', reinit: true}
   ]);
+  const tgtCol = DG.Column.string(unUsedName, sequencesLength);
 
-  console.log(['fasta.length =', fasta.length]);
+  for (let clusterIdx = 0; clusterIdx < clustersColCategories.length; ++clusterIdx) {
+    const clusterSequences = fastaSequences[clusterIdx];
+    const fasta = _stringsToFasta(clusterSequences);
+    
+    console.log(['fasta.length =', fasta.length]);
 
-  await CLI.fs.writeFile('input.fa', fasta);
-  const output = await CLI.exec('kalign input.fa -f fasta -o result.fasta');
-  console.warn(output);
+    await CLI.fs.writeFile(fastaInputFilename, fasta);
+    const output = await CLI.exec(`kalign ${fastaInputFilename} -f fasta -o ${fastaOutputFilename}`);
+    console.warn(output);
 
-  const buf = await CLI.cat('result.fasta');
-  if (!buf)
-    throw new Error(`kalign output no result`);
+    const buf = await CLI.cat(fastaOutputFilename);
+    if (!buf)
+      throw new Error(`kalign output no result`);
 
-  const ffh = new FastaFileHandler(buf);
-  const aligned = ffh.sequencesArray; // array of sequences extracted from FASTA
-  const tgtCol = DG.Column.fromStrings(unUsedName, aligned);
+    const ffh = new FastaFileHandler(buf);
+    const aligned = ffh.sequencesArray; // array of sequences extracted from FASTA
+    const clusterRowIds = clusterIndexes[clusterIdx];
+    for (let clusterRowIdIdx = 0; clusterRowIdIdx < aligned.length; ++clusterRowIdIdx)
+      tgtCol.set(clusterRowIds[clusterRowIdIdx], aligned[clusterRowIdIdx]);
+  }
 
   // units
   const srcUnits = srcCol.getTag(DG.TAGS.UNITS);
   //aligned
-  const srcAligned = srcCol.getTag(bio.TAGS.aligned);
+  const srcAligned = srcCol.getTag(bioTAGS.aligned);
   const tgtAligned = srcAligned + '.MSA';
   //alphabet
-  const srcAlphabet = srcCol.getTag(bio.TAGS.alphabet);
+  const srcAlphabet = srcCol.getTag(bioTAGS.alphabet);
 
   tgtCol.setTag(DG.TAGS.UNITS, srcUnits);
-  tgtCol.setTag(bio.TAGS.aligned, tgtAligned);
-  tgtCol.setTag(bio.TAGS.alphabet, srcAlphabet);
+  tgtCol.setTag(bioTAGS.aligned, tgtAligned);
+  tgtCol.setTag(bioTAGS.alphabet, srcAlphabet);
   tgtCol.semType = DG.SEMTYPE.MACROMOLECULE;
   return tgtCol;
 }
 
-export async function testMSAEnoughMemory(col: DG.Column): Promise<void> {
+export async function testMSAEnoughMemory(col: DG.Column<string>): Promise<void> {
   const sequencesCount = col.length;
   const delta = sequencesCount / 100;
 

package/src/utils/pepsea.ts

@@ -0,0 +1,78 @@
+/* Do not change these import lines to match external modules in webpack configuration */
+import * as grok from 'datagrok-api/grok';
+import * as DG from 'datagrok-api/dg';
+import {NOTATION, TAGS as bioTAGS, ALIGNMENT, ALPHABET} from '@datagrok-libraries/bio/src/utils/macromolecule';
+import * as C from './constants';
+
+export const pepseaMethods = ['mafft --auto', 'mafft', 'linsi', 'ginsi', 'einsi', 'fftns', 'fftnsi', 'nwns', 'nwnsi'];
+const alignmentObjectMetaKeys = ['AlignedSeq', 'AlignedSubpeptide', 'HELM', 'ID', 'PolymerID'];
+type PepseaRepsonse = {
+  Alignment: {
+    PolymerID: string, AlignedSubpeptide: string, HELM: string, ID: string, AlignedSeq: string, [key: string]: string,
+  }[],
+  AlignmentScore: {[key: string]: number | null},
+};
+type PepseaBodyUnit = {ID: string, HELM: string};
+
+export async function runPepsea(srcCol: DG.Column<string>, unUsedName: string,
+  method: typeof pepseaMethods[number] = 'ginsi', gapOpen: number = 1.53, gapExtend: number = 0.0,
+  clustersCol: DG.Column<string | number> | null = null,
+  ): Promise<DG.Column<string>> {
+  const peptideCount = srcCol.length;
+  clustersCol ??= DG.Column.int('Clusters', peptideCount).init(0);
+  if (clustersCol.type != DG.COLUMN_TYPE.STRING)
+    clustersCol = clustersCol.convertTo(DG.TYPE.STRING);
+
+  const clusters = clustersCol.categories;
+  const bodies: PepseaBodyUnit[][] = new Array(clusters.length);
+
+  // Grouping data by clusters
+  for (let rowIndex = 0; rowIndex < peptideCount; ++rowIndex) {
+    const cluster = clustersCol.get(rowIndex) as string;
+    if (cluster === '')
+      continue;
+
+    const clusterId = clusters.indexOf(cluster);
+    const helmSeq = srcCol.get(rowIndex);
+    if (helmSeq)
+      (bodies[clusterId] ??= []).push({ID: rowIndex.toString(), HELM: helmSeq});
+  }
+
+  //@ts-ignore: this is a temporary workaround for the issue with docker containers. This will be fixed in 1.14.0
+  const pepseaContainer = await (grok.dapi.docker !== undefined ? grok.dapi.docker.dockerContainers : grok.dapi.dockerfiles).filter('bio').first();
+  const alignedSequences: string[] = new Array(peptideCount);
+  for (const body of bodies) { // getting aligned sequences for each cluster
+    const alignedObject = await requestAlignedObjects(pepseaContainer.id, body, method, gapOpen, gapExtend);
+    const alignments = alignedObject.Alignment;
+
+    for (const alignment of alignments) {  // filling alignedSequencesCol
+      alignedSequences[parseInt(alignment.ID)] = Object.entries(alignment)
+        .filter((v) => !alignmentObjectMetaKeys.includes(v[0]))
+        .map((v) => v[1] !== '-' ? v[1] : '')
+        .join(C.PEPSEA.SEPARATOR);
+    }
+  }
+
+  const alignedSequencesCol: DG.Column<string> = DG.Column.fromStrings(unUsedName, alignedSequences);
+  alignedSequencesCol.setTag(DG.TAGS.UNITS, NOTATION.SEPARATOR);
+  alignedSequencesCol.setTag(bioTAGS.separator, C.PEPSEA.SEPARATOR);
+  alignedSequencesCol.setTag(bioTAGS.aligned, ALIGNMENT.SEQ_MSA);
+  alignedSequencesCol.setTag(bioTAGS.alphabet, ALPHABET.UN);
+  alignedSequencesCol.semType = DG.SEMTYPE.MACROMOLECULE;
+
+  return alignedSequencesCol;
+}
+
+async function requestAlignedObjects(dockerfileId: string, body: PepseaBodyUnit[], method: string, gapOpen: number,
+  gapExtend: number): Promise<PepseaRepsonse> {
+  const params = {
+    method: 'POST',
+    headers: {'Accept': 'application/json', 'Content-Type': 'application/json'},
+    body: JSON.stringify(body),
+  };
+  const path = `/align?method=${method}&gap_open=${gapOpen}&gap_extend=${gapExtend}`;
+  //@ts-ignore: this is a temporary workaround for the issue with docker containers
+  const response = await (grok.dapi.docker !== undefined ? grok.dapi.docker.dockerContainers : grok.dapi.dockerfiles)
+    .request(dockerfileId, path, params);
+  return JSON.parse(response ?? '{}');
+}

package/src/utils/save-as-fasta.ts

@@ -1,16 +1,17 @@
 import * as DG from 'datagrok-api/dg';
 import * as ui from 'datagrok-api/ui';
 import * as grok from 'datagrok-api/grok';
-import * as bio from '@datagrok-libraries/bio';
 
 import wu from 'wu';
+import {splitterAsFasta, SplitterFunc} from '@datagrok-libraries/bio/src/utils/macromolecule';
+import {UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
 
 const FASTA_LINE_WIDTH = 60;
 
 /** Shows dialog to select id columns list and seq column, builds and downloads FASTA content */
 export function saveAsFastaUI() {
   // Use grid for column order adjusted by user
-  let grid: DG.Grid = grok.shell.tv.grid;
+  const grid: DG.Grid = grok.shell.tv.grid;
 
   const idGColList: DG.GridColumn[] = wu.count(0).take(grid.columns.length)
     .map((colI: number) => grid.columns.byIndex(colI)!)
@@ -27,7 +28,7 @@ export function saveAsFastaUI() {
     .filter((gc: DG.GridColumn) => {
       const col: DG.Column | null = gc.column;
       if (col && col.semType === DG.SEMTYPE.MACROMOLECULE) {
-        const uh = new bio.UnitsHandler(col);
+        const uh = new UnitsHandler(col);
         return uh.isFasta();
       }
       return false;
@@ -39,7 +40,7 @@ export function saveAsFastaUI() {
 
   const lineWidthInput = ui.intInput('FASTA line width', FASTA_LINE_WIDTH);
 
-  ui.dialog({title: 'Save as FASTA',})
+  ui.dialog({title: 'Save as FASTA'})
     .add(ui.inputs([
       idGColListInput,
       seqColInput,
@@ -57,7 +58,7 @@ export function saveAsFastaUI() {
 
       const resFastaTxt: string = saveAsFastaDo(valueIdColList, valueSeqCol!, valueLineWidth);
 
-      const aEl: HTMLAnchorElement = document.createElement('a',);
+      const aEl: HTMLAnchorElement = document.createElement('a');
       aEl.setAttribute('href', `data:text/plain;charset=utf-8,${encodeURIComponent(resFastaTxt)}`);
       aEl.setAttribute('download', `${grid.dataFrame.name}.fasta`);
       aEl.click();
@@ -69,7 +70,7 @@ export function saveAsFastaUI() {
 export function saveAsFastaDo(
   idColList: DG.Column[], seqCol: DG.Column, lineWidth: number = FASTA_LINE_WIDTH, lineSeparator: string = '\n'
 ): string {
-  const splitter: bio.SplitterFunc = bio.splitterAsFasta;
+  const splitter: SplitterFunc = splitterAsFasta;
 
   const fastaLines: string[] = [];
 
@@ -91,7 +92,7 @@ export function saveAsFastaDo(
 }
 
 /* split sequence for monomers to prevent wrapping monomer partially */
-export function wrapSequence(seq: string, splitter: bio.SplitterFunc, lineWidth: number = FASTA_LINE_WIDTH): string[] {
+export function wrapSequence(seq: string, splitter: SplitterFunc, lineWidth: number = FASTA_LINE_WIDTH): string[] {
   const seqMonomerList = splitter(seq);
   let seqPos: number = 0;
   const seqLength: number = seqMonomerList.length;
@@ -106,4 +107,4 @@ export function wrapSequence(seq: string, splitter: bio.SplitterFunc, lineWidth:
   }
 
   return seqLineList;
-}
+}

package/src/utils/ui-utils.ts

@@ -1,4 +1,16 @@
+import * as grok from 'datagrok-api/grok';
+import * as DG from 'datagrok-api/dg';
+
+export function getMacromoleculeColumn(): DG.Column | any {
+  const col = grok.shell.t.columns.bySemType(DG.SEMTYPE.MACROMOLECULE);
+  if (col === null) {
+    grok.shell.error('Current table does not contain macromolecules');
+    return;
+  }
+  return col;
+}
+
 export function updateDivInnerHTML(div: HTMLElement, content: string | Node): void {
-    div.innerHTML = '';
-    div.append(content);
-  }
+  div.innerHTML = '';
+  div.append(content);
+}

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

@@ -1,9 +1,16 @@
 import * as ui from 'datagrok-api/ui';
-import * as grok from 'datagrok-api/grok';
 import * as DG from 'datagrok-api/dg';
-import * as bio from '@datagrok-libraries/bio';
 
-const vrt = bio.VdRegionType;
+import * as rxjs from 'rxjs';
+import {FilterSources, WebLogoViewer, PROPS as wlPROPS} from '../viewers/web-logo-viewer';
+import {
+  VdRegionsPropsDefault, VdRegionsProps, IVdRegionsViewer,
+  VdRegion, VdRegionType
+} from '@datagrok-libraries/bio/src/viewers/vd-regions';
+import {PositionHeight} from '@datagrok-libraries/bio/src/viewers/web-logo';
+import {Unsubscribable} from 'rxjs';
+
+const vrt = VdRegionType;
 
 // Positions of regions for numbering schemes
 // http://www.bioinf.org.uk/abs/info.html
@@ -34,7 +41,9 @@ const vrt = bio.VdRegionType;
 /** Viewer with tabs based on description of chain regions.
  *  Used to define regions of an immunoglobulin LC.
  */
-export class VdRegionsViewer extends DG.JsViewer implements bio.IVdRegionsViewer {
+export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
+  private viewed: boolean = false;
+
   // private regionsDf: DG.DataFrame;
   private regionsFg: DG.FilterGroup | null = null;
   // private regionsTV: DG.TableView;
@@ -43,43 +52,29 @@ export class VdRegionsViewer extends DG.JsViewer implements bio.IVdRegionsViewer
   private isOpened: boolean = false;
   private panelNode: DG.DockNode | null = null;
 
-  public regions: bio.VdRegion[] = [];
-  public regionTypes: string[];
+  public regions: VdRegion[] = [];
+  public regionTypes: VdRegionType[];
   public chains: string[];
-  public sequenceColumnNamePostfix: string;
+  // public sequenceColumnNamePostfix: string;
 
   public skipEmptyPositions: boolean;
   public positionWidth: number;
-  public positionHeight: string;
-
-
-  public get df(): DG.DataFrame {
-    return this.dataFrame;
-  }
-
-  // TODO: .onTableAttached is not calling on dataFrame set, onPropertyChanged  also not calling
-  public async setDf(value: DG.DataFrame, regions: bio.VdRegion[]) {
-    console.debug('VdRegionsViewer.setDf()');
-    await this.destroyView();
-    this.regions = regions;
-    this.dataFrame = value;
-    await this.buildView();
-  }
+  public positionHeight: PositionHeight;
 
   constructor() {
     super();
 
     // To prevent ambiguous numbering scheme in MLB
     this.regionTypes = this.stringList('regionTypes', [vrt.CDR],
-      {choices: Object.values(vrt).filter((t) => t != vrt.Unknown)});
+      {choices: Object.values(vrt).filter((t) => t != vrt.Unknown)}) as VdRegionType[];
     this.chains = this.stringList('chains', ['Heavy', 'Light'],
       {choices: ['Heavy', 'Light']});
-    this.sequenceColumnNamePostfix = this.string('sequenceColumnNamePostfix', 'chain sequence');
+    // this.sequenceColumnNamePostfix = this.string('sequenceColumnNamePostfix', 'chain sequence');
 
     this.skipEmptyPositions = this.bool('skipEmptyPositions', false);
     this.positionWidth = this.float('positionWidth', 16);
-    this.positionHeight = this.string('positionHeight', bio.PositionHeight.Entropy,
-      {choices: Object.keys(bio.PositionHeight)});
+    this.positionHeight = this.string('positionHeight', PositionHeight.Entropy,
+      {choices: Object.keys(PositionHeight)}) as PositionHeight;
   }
 
   public async init() {
@@ -107,18 +102,30 @@ export class VdRegionsViewer extends DG.JsViewer implements bio.IVdRegionsViewer
     // this.mlbView.dockManager.dock(this.regionsFg.root, DG.DOCK_TYPE.LEFT, rootNode, 'Filter regions', 0.2);
 
     this.subs.push(ui.onSizeChanged(this.root).subscribe(this.rootOnSizeChanged.bind(this)));
-    // rxjs.fromEvent(this.root, 'mousemove').subscribe(this.onMouseMoveRoot.bind(this));
-    this.root.addEventListener('mousemove', this.onMouseMoveRoot.bind(this));
+    this.subs.push(rxjs.fromEvent<MouseEvent>(this.root, 'mousemove').subscribe(this.rootOnMouseMove.bind(this)));
 
-    await this.buildView();
+    // await this.buildView('init'); // init
   }
 
   public override async onTableAttached() {
-    await this.init();
+    const superOnTableAttached = super.onTableAttached.bind(this);
+    this.viewPromise = this.viewPromise.then(async () => { // onTableAttached
+      superOnTableAttached();
+      if (!this.viewed) {
+        await this.buildView('onTableAttached'); // onTableAttached
+        this.viewed = true;
+      }
+    });
   }
 
-  public override async onPropertyChanged(property: DG.Property | null) {
+  public override onPropertyChanged(property: DG.Property | null): void {
     super.onPropertyChanged(property);
+
+    if (!property) {
+      console.warn('Bio: VdRegionsViewer.onPropertyChanged() property is null');
+      return;
+    }
+
     if (property) {
       switch (property.name) {
       case 'regionTypes':
@@ -127,7 +134,6 @@ export class VdRegionsViewer extends DG.JsViewer implements bio.IVdRegionsViewer
         break;
       case 'sequenceColumnNamePostfix':
         break;
-      case 'skipEmptyPositions':
         // for (let orderI = 0; orderI < this.logos.length; orderI++) {
         //   for (let chainI = 0; chainI < this.chains.length; chainI++) {
         //     const chain: string = this.chains[chainI];
@@ -135,56 +141,72 @@ export class VdRegionsViewer extends DG.JsViewer implements bio.IVdRegionsViewer
         //   }
         // }
         // this.calcSize();
-        await this.destroyView();
-        await this.buildView();
-        break;
-      case 'positionWidth':
-        await this.destroyView();
-        await this.buildView();
-        break;
-
-      case 'positionHeight':
-        await this.destroyView();
-        await this.buildView();
-        break;
       }
     }
-  }
-
-
-  public async reset() {
 
-  }
-
-  public async open(mlbView: DG.TableView) {
-    if (!this.isOpened) {
-      this.isOpened = true;
-      this.panelNode = mlbView.dockManager.dock(this.root, DG.DOCK_TYPE.TOP, null, 'Regions', 0.2);
+    switch (property.name) {
+    case 'skipEmptyPositions':
+    case 'positionWidth':
+    case 'positionHeight':
+      this.setData(this.dataFrame, this.regions); // onPropertyChanged
+      break;
     }
   }
 
-  public async show(mlbView: DG.TableView) {
+  // -- Data --
 
-  }
+  // TODO: .onTableAttached is not calling on dataFrame set, onPropertyChanged  also not calling
+  public setData(mlbDf: DG.DataFrame, regions: VdRegion[]) {
+    console.debug('Bio: VdRegionsViewer.setData()');
+    this.viewPromise = this.viewPromise.then(async () => { // setData
+      if (this.viewed) {
+        await this.destroyView('setData'); // setData
+        this.viewed = false;
+      }
+    });
 
-  // #region -- Handle controls' events --
+    this.regions = regions;
+    this.dataFrame = mlbDf; // causes detach and onTableAttached
 
-  private resizing: boolean = false;
+    this.viewPromise = this.viewPromise.then(async () => { // setData
+      if (!this.viewed) {
+        await this.buildView('setData'); // setData
+        this.viewed = true;
+      }
+    });
+  }
 
-  private rootOnSizeChanged(args: any): void {
-    this.calcSize();
+  override detach() {
+    const superDetach = super.detach.bind(this);
+    this.viewPromise = this.viewPromise.then(async () => { // detach
+      if (this.viewed) {
+        await this.destroyView('detach'); // detach
+        this.viewed = false;
+      }
+      superDetach();
+    });
   }
 
-  // #endregion
+  // -- View --
+
+  private viewPromise: Promise<void> = Promise.resolve();
 
-  //#region -- View --
   private host: HTMLElement | null = null;
+  private filterSourceInput: DG.InputBase<boolean | null> | null = null;
   private mainLayout: HTMLTableElement | null = null;
-  private logos: { [chain: string]: bio.WebLogoViewer }[] = [];
+  private logos: { [chain: string]: WebLogoViewer }[] = [];
+
+  private viewSubs: Unsubscribable[] = [];
 
-  private async destroyView(): Promise<void> {
+  private async destroyView(purpose: string): Promise<void> {
     // TODO: Unsubscribe from and remove all view elements
-    console.debug(`VdRegionsViewer.destroyView( mainLayout = ${!this.mainLayout ? 'none' : 'value'} )`);
+    console.debug(`Bio: VdRegionsViewer.destroyView( mainLayout = ${!this.mainLayout ? 'none' : 'value'} ), ` +
+      `purpose = '${purpose}'`);
+    if (this.filterSourceInput) {
+      //
+      ui.empty(this.filterSourceInput.root);
+    }
+
     if (this.mainLayout != null) {
       // this.root.removeChild(this.host);
       this.mainLayout.remove();
@@ -192,34 +214,31 @@ export class VdRegionsViewer extends DG.JsViewer implements bio.IVdRegionsViewer
       this.host = null;
       this.mainLayout = null;
     }
-  }
 
-  private async buildView(): Promise<void> {
-    console.debug('VdRegionsViewer.buildView() start');
-
-    const colNames: { [chain: string]: string } = Object.assign({},
-      ...this.chains.map((chain) => ({[chain]: `${chain} ${this.sequenceColumnNamePostfix}`})));
+    for (const sub of this.viewSubs) sub.unsubscribe();
+  }
 
-    const regionsFiltered: bio.VdRegion[] = this.regions.filter((r: bio.VdRegion) => this.regionTypes.includes(r.type));
+  private async buildView(purpose: string): Promise<void> {
+    console.debug(`Bio: VdRegionsViewer.buildView() begin, ` + `purpose = '${purpose}'`);
 
+    const regionsFiltered: VdRegion[] = this.regions.filter((r: VdRegion) => this.regionTypes.includes(r.type));
     const orderList: number[] = Array.from(new Set(regionsFiltered.map((r) => r.order))).sort();
 
     this.logos = [];
-
     for (let orderI = 0; orderI < orderList.length; orderI++) {
-      const regionChains: { [chain: string]: bio.WebLogoViewer } = {};
+      const regionChains: { [chain: string]: WebLogoViewer } = {};
       for (const chain of this.chains) {
-        const region: bio.VdRegion | undefined = regionsFiltered
+        const region: VdRegion | undefined = regionsFiltered
           .find((r) => r.order == orderList[orderI] && r.chain == chain);
         regionChains[chain] = (await this.dataFrame.plot.fromType('WebLogo', {
-          sequenceColumnName: colNames[chain],
+          sequenceColumnName: region!.sequenceColumnName,
           startPositionName: region!.positionStartName,
           endPositionName: region!.positionEndName,
           fixWidth: true,
           skipEmptyPositions: this.skipEmptyPositions,
           positionWidth: this.positionWidth,
           positionHeight: this.positionHeight,
-        })) as unknown as bio.WebLogoViewer;
+        })) as unknown as WebLogoViewer;
       }
       // WebLogo creation fires onRootSizeChanged event even before control being added to this.logos
       this.logos[orderI] = regionChains;
@@ -244,7 +263,7 @@ export class VdRegionsViewer extends DG.JsViewer implements bio.IVdRegionsViewer
           })] : []),
           // List with controls for regions
           ...[...Array(orderList.length).keys()].map((orderI) => {
-            const wl: bio.WebLogoViewer = this.logos[orderI][chain];
+            const wl: WebLogoViewer = this.logos[orderI][chain];
             wl.root.style.height = '100%';
 
             const resDiv = ui.div([wl.root]/*`${chain} ${regionsFiltered[rI]}`*/, {
@@ -261,7 +280,7 @@ export class VdRegionsViewer extends DG.JsViewer implements bio.IVdRegionsViewer
       },
       ['', ...[...Array(orderList.length).keys()].map(
         (orderI: number) => regionsFiltered.find(
-          (r: bio.VdRegion) => r.order == orderList[orderI] && r.chain == this.chains[0]
+          (r: VdRegion) => r.order == orderList[orderI] && r.chain == this.chains[0]
         )!.name || 'Name')]
     );
     this.mainLayout.className = 'mlb-vd-regions-viewer-table2';
@@ -269,15 +288,21 @@ export class VdRegionsViewer extends DG.JsViewer implements bio.IVdRegionsViewer
     // this.mainLayout.style.height = '100%';
     // this.mainLayout.style.border = '1px solid black';
 
+    this.filterSourceInput = ui.boolInput('', false, this.filterSourceInputOnValueChanged.bind(this));
+    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');
+
     const color: string = `#ffbb${Math.ceil(Math.random() * 255).toString(16)}`;
-    this.host = ui.box(this.mainLayout,
+    this.host = ui.div([this.mainLayout, this.filterSourceInput!.root],
       {/*style: {backgroundColor: color}*/});
     this.root.appendChild(this.host);
     this.root.style.overflowX = 'auto';
 
     this.calcSize();
 
-    console.debug('VdRegionsViewer.buildView() end');
+    console.debug('Bio: VdRegionsViewer.buildView() end');
   }
 
   private calcSize() {
@@ -296,10 +321,27 @@ export class VdRegionsViewer extends DG.JsViewer implements bio.IVdRegionsViewer
     }
   }
 
-  //#endregion -- View --
+  // -- Handle events --
 
-  private onMouseMoveRoot(e: MouseEvent) {
+  private rootOnSizeChanged(args: any): void {
+    this.calcSize();
+  }
+
+  private rootOnMouseMove(e: MouseEvent) {
     // ui.tooltip.show('text', e.x + 8, e.y + 8,);
     // console.log(`onMouseMoveRoot.( x: ${e.x}, y: ${e.y} )`);
   }
+
+  private filterSourceInputOnValueChanged(): void {
+    const filterSource: FilterSources = this.filterSourceInput!.value == true ?
+      FilterSources.Selected : FilterSources.Filtered;
+
+    for (let orderI = 0; orderI < this.logos.length; orderI++) {
+      for (let chainI = 0; chainI < this.chains.length; chainI++) {
+        const chain: string = this.chains[chainI];
+        const wl: DG.JsViewer = this.logos[orderI][chain];
+        wl.setOptions({[wlPROPS.filterSource]: filterSource});
+      }
+    }
+  }
 }