@datagrok/bio 2.0.17 → 2.0.19

package/src/tests/splitters-test.ts

@@ -1,11 +1,12 @@
-import {after, before, category, test, expect, expectArray, expectObject} from '@datagrok-libraries/utils/src/test';
-
 import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
-import {WebLogo, SplitterFunc} from '@datagrok-libraries/bio/src/viewers/web-logo';
-import {splitToMonomers, _package, getHelmMonomers} from '../package';
+import * as bio from '@datagrok-libraries/bio';
+
+import {after, before, category, test, expect, expectArray, expectObject} from '@datagrok-libraries/utils/src/test';
 import * as C from '../utils/constants';
+import {splitToMonomers, _package, getHelmMonomers} from '../package';
+
 
 category('splitters', () => {
   let tvList: DG.TableView[];
@@ -121,13 +122,13 @@ PEPTIDE1{hHis.Aca.Cys_SEt}$$$,5.72388
 });
 
 export async function _testFastaSplitter(src: string, tgt: string[]) {
-  const res: string[] = WebLogo.splitterAsFasta(src);
+  const res: string[] = bio.splitterAsFasta(src);
   console.debug(`Bio: tests: splitters: src=${JSON.stringify(src)}, res=${JSON.stringify(res)} .`);
   expectArray(res, tgt);
 }
 
 export async function _testHelmSplitter(src: string, tgt: string[]) {
-  const res: string[] = WebLogo.splitterAsHelm(src);
+  const res: string[] = bio.splitterAsHelm(src);
   console.debug(`Bio: tests: splitters: src=${JSON.stringify(src)}, res=${JSON.stringify(res)} .`);
   expectArray(res, tgt);
 }

package/src/utils/cell-renderer.ts

@@ -1,31 +1,26 @@
-import * as C from './constants';
-import * as DG from 'datagrok-api/dg';
-import {AminoacidsPalettes} from '@datagrok-libraries/bio/src/aminoacids';
-import {NucleotidesPalettes} from '@datagrok-libraries/bio/src/nucleotides';
-import {UnknownSeqPalettes} from '@datagrok-libraries/bio/src/unknown';
-import {SplitterFunc, WebLogo} from '@datagrok-libraries/bio/src/viewers/web-logo';
-import {SeqPalette} from '@datagrok-libraries/bio/src/seq-palettes';
+import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
-import {printLeftOrCentered, DrawStyle} from '@datagrok-libraries/bio/src/utils/cell-renderer';
-import {UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
+import * as DG from 'datagrok-api/dg';
+import * as bio from '@datagrok-libraries/bio';
+import * as C from './constants';
 
 const undefinedColor = 'rgb(100,100,100)';
-const monomerToShortFunction: (amino: string, maxLengthOfMonomer: number) => string = WebLogo.monomerToShort;
+const monomerToShortFunction: (amino: string, maxLengthOfMonomer: number) => string = bio.monomerToShort;
 
 
-function getPaletteByType(paletteType: string): SeqPalette {
+function getPaletteByType(paletteType: string): bio.SeqPalette {
   switch (paletteType) {
   case 'PT':
-    return AminoacidsPalettes.GrokGroups;
+    return bio.AminoacidsPalettes.GrokGroups;
   case 'NT':
-    return NucleotidesPalettes.Chromatogram;
+    return bio.NucleotidesPalettes.Chromatogram;
   case 'DNA':
-    return NucleotidesPalettes.Chromatogram;
+    return bio.NucleotidesPalettes.Chromatogram;
   case 'RNA':
-    return NucleotidesPalettes.Chromatogram;
+    return bio.NucleotidesPalettes.Chromatogram;
     // other
   default:
-    return UnknownSeqPalettes.Color;
+    return bio.UnknownSeqPalettes.Color;
   }
 }
 
@@ -66,7 +61,7 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
   }
 
   onMouseMove(gridCell: DG.GridCell, e: MouseEvent): void {
-    if (gridCell.cell.column.getTag(UnitsHandler.TAGS.aligned) !== 'SEQ.MSA')
+    if (gridCell.cell.column.getTag(bio.UnitsHandler.TAGS.aligned) !== 'SEQ.MSA')
       return;
 
     const maxLengthWordsSum = gridCell.cell.column.temp['bio-sum-maxLengthWords'];
@@ -94,7 +89,7 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
     }
     left = (argsX >= maxLengthWordsSum[left]) ? left + 1 : left;
     const separator = gridCell.cell.column.getTag('separator') ?? '';
-    const splitterFunc: SplitterFunc = WebLogo.getSplitter('separator', separator);
+    const splitterFunc: bio.SplitterFunc = bio.getSplitter('separator', separator);
     const subParts: string[] = splitterFunc(gridCell.cell.value);
     (((subParts[left]?.length ?? 0) > 0)) ?
       ui.tooltip.show(ui.div(subParts[left]), e.x + 16, e.y + 16) : ui.tooltip.hide();
@@ -135,7 +130,7 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
 
     const separator = gridCell.cell.column.getTag('separator') ?? '';
     const splitLimit = gridCell.bounds.width / 5;
-    const splitterFunc: SplitterFunc = WebLogo.getSplitter(units, separator, splitLimit);
+    const splitterFunc: bio.SplitterFunc = bio.getSplitter(units, separator, splitLimit);
     const referenceSequence: string[] = splitterFunc(((gridCell.cell.column?.temp['reference-sequence'] != null) && (gridCell.cell.column?.temp['reference-sequence'] != ''))
       ? gridCell.cell.column.temp['reference-sequence'] : gridCell.cell.column.temp['current-word'] ?? '');
     const monomerWidth = (gridCell.cell.column?.temp['monomer-width'] != null) ? gridCell.cell.column.temp['monomer-width'] : 'short';
@@ -188,15 +183,15 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
     const subParts: string[] = splitterFunc(cell.value);
     let x1 = x;
     let color = undefinedColor;
-    let drawStyle = DrawStyle.classic;
+    let drawStyle = bio.DrawStyle.classic;
     if (gridCell.cell.column.getTag('aligned').includes('MSA') && gridCell.cell.column.getTag('units') === 'separator')
-      drawStyle = DrawStyle.MSA;
+      drawStyle = bio.DrawStyle.MSA;
 
     subParts.every((amino, index) => {
       color = palette.get(amino);
       g.fillStyle = undefinedColor;
       let last = index === subParts.length - 1;
-      x1 = printLeftOrCentered(x1, y, w, h, g, amino, color, 0, true, 1.0, separator, last, drawStyle, maxLengthWords, index, gridCell, referenceSequence, maxLengthOfMonomer);
+      x1 = bio.printLeftOrCentered(x1, y, w, h, g, amino, color, 0, true, 1.0, separator, last, drawStyle, maxLengthWords, index, gridCell, referenceSequence, maxLengthOfMonomer);
       return x1 - minDistanceRenderer - gridCell.gridColumn.left + (gridCell.gridColumn.left - gridCell.bounds.x) <= gridCell.bounds.width;
     });
 
@@ -233,7 +228,9 @@ export class MonomerCellRenderer extends DG.GridCellRenderer {
     g.textAlign = 'center';
 
     const palette = getPaletteByType(gridCell.cell.column.getTag(C.TAGS.ALPHABET));
-    const s: string = gridCell.cell.value || '-';
+    const s: string = gridCell.cell.value;
+    if (!s)
+      return;
     const color = palette.get(s);
 
     g.fillStyle = color;
@@ -273,10 +270,10 @@ export class MacromoleculeDifferenceCellRenderer extends DG.GridCellRenderer {
     w = getUpdatedWidth(grid, g, x, w);
     //TODO: can this be replaced/merged with splitSequence?
     const [s1, s2] = s.split('#');
-    const splitter = WebLogo.getSplitter(units, separator);
+    const splitter = bio.getSplitter(units, separator);
     const subParts1 = splitter(s1);
     const subParts2 = splitter(s2);
-    drawMoleculeDifferenceOnCanvas(g, x, y, w, h, subParts1, subParts2, units, separator);
+    drawMoleculeDifferenceOnCanvas(g, x, y, w, h, subParts1, subParts2, units);
   }
 }
 
@@ -315,7 +312,7 @@ export function drawMoleculeDifferenceOnCanvas(
   g.font = '12px monospace';
   g.textBaseline = 'top';
 
-  let palette: SeqPalette = UnknownSeqPalettes.Color;
+  let palette: bio.SeqPalette = bio.UnknownSeqPalettes.Color;
   if (units != 'HELM')
     palette = getPaletteByType(units.substring(units.length - 2));
 
@@ -327,12 +324,12 @@ export function drawMoleculeDifferenceOnCanvas(
 
     if (amino1 != amino2) {
       const color2 = palette.get(amino2);
-      const subX0 = printLeftOrCentered(updatedX, updatedY - vShift, w, h, g, amino1, color1, 0, true);
-      const subX1 = printLeftOrCentered(updatedX, updatedY + vShift, w, h, g, amino2, color2, 0, true);
+      const subX0 = bio.printLeftOrCentered(updatedX, updatedY - vShift, w, h, g, amino1, color1, 0, true);
+      const subX1 = bio.printLeftOrCentered(updatedX, updatedY + vShift, w, h, g, amino2, color2, 0, true);
       updatedX = Math.max(subX1, subX0);
       if (molDifferences)
         molDifferences[i] = createDifferenceCanvas(amino1, amino2, color1, color2, updatedY, vShift, h);
-    } else { updatedX = printLeftOrCentered(updatedX, updatedY, w, h, g, amino1, color1, 0, true, 0.5); }
+    } else { updatedX = bio.printLeftOrCentered(updatedX, updatedY, w, h, g, amino1, color1, 0, true, 0.5); }
     updatedX += 4;
   }
   g.restore();
@@ -356,7 +353,7 @@ function createDifferenceCanvas(
   canvas.width = width + 4;
   context.font = '12px monospace';
   context.textBaseline = 'top';
-  printLeftOrCentered(0, y - shift, width, h, context, amino1, color1, 0, true);
-  printLeftOrCentered(0, y + shift, width, h, context, amino2, color2, 0, true);
+  bio.printLeftOrCentered(0, y - shift, width, h, context, amino1, color1, 0, true);
+  bio.printLeftOrCentered(0, y + shift, width, h, context, amino2, color2, 0, true);
   return canvas;
 }

package/src/utils/convert.ts

@@ -1,11 +1,10 @@
 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 $ from 'cash-dom';
 import {Subscription} from 'rxjs';
-import {NotationConverter} from '@datagrok-libraries/bio/src/utils/notation-converter';
-import {NOTATION, UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
 
 
 let convertDialog: DG.Dialog | null = null;
@@ -17,13 +16,13 @@ let convertDialogSubs: Subscription[] = [];
  * @param {DG.column} col Column with 'Macromolecule' semantic type
  */
 export function convert(col: DG.Column): void {
-  const converter = new NotationConverter(col);
-  const currentNotation: NOTATION = converter.notation;
+  const converter = new bio.NotationConverter(col);
+  const currentNotation: bio.NOTATION = converter.notation;
   //TODO: read all notations
   const notations = [
-    NOTATION.FASTA,
-    NOTATION.SEPARATOR,
-    NOTATION.HELM
+    bio.NOTATION.FASTA,
+    bio.NOTATION.SEPARATOR,
+    bio.NOTATION.HELM
   ];
   const separatorArray = ['-', '.', '/'];
   const filteredNotations = notations.filter((e) => e !== currentNotation);
@@ -33,7 +32,7 @@ export function convert(col: DG.Column): void {
 
   // hide the separator input for non-SEPARATOR target notations
   const toggleSeparator = () => {
-    if (targetNotationInput.value !== NOTATION.SEPARATOR)
+    if (targetNotationInput.value !== bio.NOTATION.SEPARATOR)
       $(separatorInput.root).hide();
     else
       $(separatorInput.root).show();
@@ -64,7 +63,7 @@ export function convert(col: DG.Column): void {
         separatorInput.root
       ]))
       .onOK(async () => {
-        const targetNotation = targetNotationInput.value as NOTATION;
+        const targetNotation = targetNotationInput.value as bio.NOTATION;
         const separator: string | null = separatorInput.value;
 
         await convertDo(col, targetNotation, separator);
@@ -81,9 +80,9 @@ export function convert(col: DG.Column): void {
 
 /** Creates a new column with converted sequences and detects its semantic type */
 export async function convertDo(
-  srcCol: DG.Column, targetNotation: NOTATION, separator: string | null
+  srcCol: DG.Column, targetNotation: bio.NOTATION, separator: string | null
 ): Promise<DG.Column> {
-  const converter = new NotationConverter(srcCol);
+  const converter = new bio.NotationConverter(srcCol);
   const newColumn = converter.convert(targetNotation, separator);
   srcCol.dataFrame.columns.add(newColumn);
 

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

@@ -1,9 +1,9 @@
 import * as DG from 'datagrok-api/dg';
 import * as ui from 'datagrok-api/ui';
 import * as grok from 'datagrok-api/grok';
-import {SplitterFunc, WebLogo} from '@datagrok-libraries/bio/src/viewers/web-logo';
+import * as bio from '@datagrok-libraries/bio';
+
 import wu from 'wu';
-import {UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
 
 const FASTA_LINE_WIDTH = 60;
 
@@ -27,7 +27,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 UnitsHandler(col);
+        const uh = new bio.UnitsHandler(col);
         return uh.isFasta();
       }
       return false;
@@ -69,7 +69,7 @@ export function saveAsFastaUI() {
 export function saveAsFastaDo(
   idColList: DG.Column[], seqCol: DG.Column, lineWidth: number = FASTA_LINE_WIDTH, lineSeparator: string = '\n'
 ): string {
-  const splitter: SplitterFunc = WebLogo.splitterAsFasta;
+  const splitter: bio.SplitterFunc = bio.splitterAsFasta;
 
   const fastaLines: string[] = [];
 
@@ -91,7 +91,7 @@ export function saveAsFastaDo(
 }
 
 /* split sequence for monomers to prevent wrapping monomer partially */
-export function wrapSequence(seq: string, splitter: SplitterFunc, lineWidth: number = FASTA_LINE_WIDTH): string[] {
+export function wrapSequence(seq: string, splitter: bio.SplitterFunc, lineWidth: number = FASTA_LINE_WIDTH): string[] {
   const seqMonomerList = splitter(seq);
   let seqPos: number = 0;
   const seqLength: number = seqMonomerList.length;

package/src/utils/utils.ts

@@ -1,6 +1,8 @@
-import * as DG from 'datagrok-api/dg';
-import {WebLogo, SplitterFunc} from '@datagrok-libraries/bio/src/viewers/web-logo';
 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 {
   CAP_GROUP_NAME, CAP_GROUP_SMILES, jsonSdfMonomerLibDict, MONOMER_ENCODE_MAX, MONOMER_ENCODE_MIN, MONOMER_SYMBOL,
   RGROUP_ALTER_ID, RGROUP_FIELD, RGROUP_LABEL, SDF_MONOMER_NAME
@@ -18,7 +20,7 @@ export function encodeMonomers(col: DG.Column): DG.Column | null {
   const monomerSymbolDict: { [key: string]: number } = {};
   const units = col.tags[DG.TAGS.UNITS];
   const sep = col.getTag(UnitsHandler.TAGS.separator);
-  const splitterFunc: SplitterFunc = WebLogo.getSplitter(units, sep);
+  const splitterFunc: bio.SplitterFunc = bio.getSplitter(units, sep);
   const encodedStringArray = [];
   for (let i = 0; i < col.length; ++i) {
     let encodedMonomerStr = '';
@@ -42,7 +44,7 @@ export function encodeMonomers(col: DG.Column): DG.Column | null {
 export function getMolfilesFromSeq(col: DG.Column, monomersLibObject: any[]): any[][] | null {
   const units = col.tags[DG.TAGS.UNITS];
   const sep = col.getTag('separator');
-  const splitterFunc: SplitterFunc = WebLogo.getSplitter(units, sep);
+  const splitterFunc: bio.SplitterFunc = bio.getSplitter(units, sep);
   const monomersDict = createMomomersMolDict(monomersLibObject);
   const molFiles = [];
   for (let i = 0; i < col.length; ++i) {
@@ -66,7 +68,7 @@ export function getMolfilesFromSeq(col: DG.Column, monomersLibObject: any[]): an
 export function getMolfilesFromSingleSeq(cell: DG.Cell, monomersLibObject: any[]): any[][] | null {
   const units = cell.column.tags[DG.TAGS.UNITS];
   const sep = cell.column!.getTag('separator');
-  const splitterFunc: SplitterFunc = WebLogo.getSplitter(units, sep);
+  const splitterFunc: bio.SplitterFunc = bio.getSplitter(units, sep);
   const monomersDict = createMomomersMolDict(monomersLibObject);
   const molFiles = [];
   const macroMolecule = cell.value;

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

@@ -1,12 +1,9 @@
 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';
 
-import {VdRegionType, VdRegion} from '@datagrok-libraries/bio/src/vd-regions';
-import {IVdRegionsViewer} from '@datagrok-libraries/bio/src/viewers/vd-regions-viewer';
-import {WebLogo} from '@datagrok-libraries/bio/src/viewers/web-logo';
-
-const vrt = VdRegionType;
+const vrt = bio.VdRegionType;
 
 // Positions of regions for numbering schemes
 // http://www.bioinf.org.uk/abs/info.html
@@ -37,7 +34,7 @@ const vrt = 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 IVdRegionsViewer {
+export class VdRegionsViewer extends DG.JsViewer implements bio.IVdRegionsViewer {
   // private regionsDf: DG.DataFrame;
   private regionsFg: DG.FilterGroup | null = null;
   // private regionsTV: DG.TableView;
@@ -46,7 +43,7 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
   private isOpened: boolean = false;
   private panelNode: DG.DockNode | null = null;
 
-  public regions: VdRegion[] = [];
+  public regions: bio.VdRegion[] = [];
   public regionTypes: string[];
   public chains: string[];
   public sequenceColumnNamePostfix: string;
@@ -60,7 +57,7 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
   }
 
   // TODO: .onTableAttached is not calling on dataFrame set, onPropertyChanged  also not calling
-  public async setDf(value: DG.DataFrame, regions: VdRegion[]) {
+  public async setDf(value: DG.DataFrame, regions: bio.VdRegion[]) {
     console.debug('VdRegionsViewer.setDf()');
     await this.destroyView();
     this.regions = regions;
@@ -177,7 +174,7 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
   //#region -- View --
   private host: HTMLElement | null = null;
   private mainLayout: HTMLTableElement | null = null;
-  private logos: { [chain: string]: WebLogo }[] = [];
+  private logos: { [chain: string]: bio.WebLogo }[] = [];
 
   private async destroyView(): Promise<void> {
     // TODO: Unsubscribe from and remove all view elements
@@ -197,16 +194,16 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
     const colNames: { [chain: string]: string } = Object.assign({},
       ...this.chains.map((chain) => ({[chain]: `${chain} ${this.sequenceColumnNamePostfix}`})));
 
-    const regionsFiltered: VdRegion[] = this.regions.filter((r: VdRegion) => this.regionTypes.includes(r.type));
+    const regionsFiltered: bio.VdRegion[] = this.regions.filter((r: bio.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]: WebLogo } = {};
+      const regionChains: { [chain: string]: bio.WebLogo } = {};
       for (const chain of this.chains) {
-        const region: VdRegion | undefined = regionsFiltered
+        const region: bio.VdRegion | undefined = regionsFiltered
           .find((r) => r.order == orderList[orderI] && r.chain == chain);
         regionChains[chain] = (await this.dataFrame.plot.fromType('WebLogo', {
           sequenceColumnName: colNames[chain],
@@ -215,7 +212,7 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
           fixWidth: true,
           skipEmptyPositions: this.skipEmptyPositions,
           positionWidth: this.positionWidth,
-        })) as unknown as WebLogo;
+        })) as unknown as bio.WebLogo;
       }
       // WebLogo creation fires onRootSizeChanged event even before control being added to this.logos
       this.logos[orderI] = regionChains;
@@ -240,7 +237,7 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
           })] : []),
           // List with controls for regions
           ...[...Array(orderList.length).keys()].map((orderI) => {
-            const wl: WebLogo = this.logos[orderI][chain];
+            const wl: bio.WebLogo = this.logos[orderI][chain];
             wl.root.style.height = '100%';
 
             const resDiv = ui.div([wl.root]/*`${chain} ${regionsFiltered[rI]}`*/, {
@@ -257,7 +254,7 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
       },
       ['', ...[...Array(orderList.length).keys()].map(
         (orderI: number) => regionsFiltered.find(
-          (r: VdRegion) => r.order == orderList[orderI] && r.chain == this.chains[0]
+          (r: bio.VdRegion) => r.order == orderList[orderI] && r.chain == this.chains[0]
         )!.name || 'Name')]
     );
     this.mainLayout.className = 'mlb-vd-regions-viewer-table2';

package/src/widgets/bio-substructure-filter.ts

@@ -0,0 +1,151 @@
+/**
+ * Macromolecules substructure filter that uses Datagrok's collaborative filtering.
+ * 1. On onRowsFiltering event, only FILTER OUT rows that do not satisfy this filter's criteria
+ * 2. Call dataFrame.rows.requestFilter when filtering criteria changes.
+ * */
+
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+import wu from 'wu';
+import {linearSubstructureSearch} from '../substructure-search/substructure-search';
+import {Subject, Subscription} from 'rxjs';
+import {NOTATION} from '@datagrok-libraries/bio/src/utils/units-handler';
+import * as C from '../utils/constants';
+
+export class BioSubstructureFilter extends DG.Filter {
+  bioFilter: FastaFilter | SeparatorFilter | null = null;
+  bitset: DG.BitSet | null = null;
+  loader: HTMLDivElement = ui.loader();
+  onBioFilterChangedSubs?: Subscription;
+
+  get calculating(): boolean { return this.loader.style.display == 'initial'; }
+  set calculating(value: boolean) { this.loader.style.display = value ? 'initial' : 'none'; }
+
+  get filterSummary(): string {
+    return this.bioFilter!.substructure;
+  }
+
+  get isFiltering(): boolean {
+    return super.isFiltering && this.bioFilter!.substructure !== '';
+  }
+
+  get isReadyToApplyFilter(): boolean {
+    return !this.calculating && this.bitset != null;
+  }
+
+  constructor() {
+    super();
+    this.root = ui.divV([]);
+    this.calculating = false;
+  }
+
+  attach(dataFrame: DG.DataFrame): void {
+    super.attach(dataFrame);
+    this.column = dataFrame.columns.bySemType(DG.SEMTYPE.MACROMOLECULE);
+    this.columnName = this.column?.name;
+    const notation = this.column?.getTag(DG.TAGS.UNITS);
+    this.bioFilter = notation === NOTATION.FASTA ?
+      new FastaFilter() : new SeparatorFilter(this.column!.getTag(C.TAGS.SEPARATOR));
+    this.root.appendChild(this.bioFilter!.filterPanel);
+    this.root.appendChild(this.loader);
+
+    this.onBioFilterChangedSubs?.unsubscribe();
+    const onChangedEvent: any = this.bioFilter.onChanged;
+    this.onBioFilterChangedSubs = onChangedEvent.subscribe(async (_: any) => await this._onInputChanged());
+  }
+
+  detach() {
+    super.detach();
+  }
+
+  applyFilter(): void {
+    if (this.bitset && !this.isDetached)
+      this.dataFrame?.filter.and(this.bitset);
+  }
+
+  /** Override to save filter state. */
+  saveState(): any {
+    const state = super.saveState();
+    state.bioSubstructure = this.bioFilter?.substructure;
+    return state;
+  }
+
+  /** Override to load filter state. */
+  applyState(state: any): void {
+    super.applyState(state);
+    if (state.bioSubstructure)
+      this.bioFilter!.substructureInput.value = state.bioSubstructure;
+
+    const that = this;
+    if (state.bioSubstructure)
+      setTimeout(function() { that._onInputChanged(); }, 1000);
+  }
+
+  /**
+    * Performs the actual filtering
+    * When the results are ready, triggers `rows.requestFilter`, which in turn triggers `applyFilter`
+    * that would simply apply the bitset synchronously.
+    */
+  async _onInputChanged(): Promise<void> {
+    if (!this.isFiltering) {
+      this.bitset = null;
+      this.dataFrame?.rows.requestFilter();
+    } else if (wu(this.dataFrame!.rows.filters).has(`${this.columnName}: ${this.filterSummary}`)) {
+      // some other filter is already filtering for the exact same thing
+      return;
+    } else {
+      this.calculating = true;
+      try {
+        this.bitset = linearSubstructureSearch(this.bioFilter!.substructure, this.column!);
+        this.calculating = false;
+        this.dataFrame?.rows.requestFilter();
+      } finally {
+        this.calculating = false;
+      }
+    }
+  }
+}
+
+class FastaFilter {
+  onChanged: Subject<any> = new Subject<any>();
+  substructureInput: DG.InputBase<string> = ui.stringInput('', '', () => {
+    this.onChanged.next();
+  }, {placeholder: 'Substructure'});
+
+  constructor() {
+  }
+
+  get filterPanel() {
+    return this.substructureInput.root;
+  }
+
+  get substructure() {
+    return this.substructureInput.value;
+  }
+}
+
+class SeparatorFilter extends FastaFilter {
+  separatorInput: DG.InputBase<string> = ui.stringInput('', '', () => {
+    this.onChanged.next();
+  }, {placeholder: 'Separator'});
+  colSeparator = '';
+
+  constructor(separator: string) {
+    super();
+    this.colSeparator = separator;
+    this.separatorInput.value = separator;
+  }
+
+  get filterPanel() {
+    return ui.divV([
+      this.substructureInput.root,
+      this.separatorInput.root
+    ]);
+  }
+
+  get substructure() {
+    return this.separatorInput.value && this.separatorInput.value !== this.colSeparator ?
+      this.substructureInput.value.replaceAll(this.separatorInput.value, this.colSeparator):
+      this.substructureInput.value;
+  }
+}