@datagrok/bio 2.12.0 → 2.12.2

package/files/tests/libraries/HELMmonomerSchema.json

@@ -21,7 +21,7 @@
     },
     "id": {
       "description": "Unique ID for the monomer. There is no meaning associated with this ID value.",
-	  "type": "integer"
+	  "type": ["string", "integer"]
     },
     "rgroups": {
       "description": "An array of the monomer R groups and required information.",

package/package.json

@@ -5,7 +5,7 @@
     "name": "Aleksandr Tanas",
     "email": "atanas@datagrok.ai"
   },
-  "version": "2.12.0",
+  "version": "2.12.2",
   "description": "Bioinformatics support (import/export of sequences, conversion, visualization, analysis). [See more](https://github.com/datagrok-ai/public/blob/master/packages/Bio/README.md) for details.",
   "repository": {
     "type": "git",
@@ -36,11 +36,11 @@
     "@biowasm/aioli": "^3.1.0",
     "@datagrok-libraries/bio": "5.40.0",
     "@datagrok-libraries/chem-meta": "^1.2.3",
-    "@datagrok-libraries/ml": "^6.4.12",
+    "@datagrok-libraries/ml": "^6.4.13",
     "@datagrok-libraries/tutorials": "^1.3.12",
     "ajv": "^8.12.0",
     "ajv-errors": "^3.0.0",
-    "@datagrok-libraries/utils": "^4.1.44",
+    "@datagrok-libraries/utils": "^4.2.0",
     "@datagrok-libraries/math": "^1.0.7",
     "cash-dom": "^8.0.0",
     "css-loader": "^6.7.3",

package/src/analysis/sequence-space.ts

@@ -20,7 +20,7 @@ export async function getEncodedSeqSpaceCol(
   const rowCount = seqCol.length;
   const sh = SeqHandler.forColumn(seqCol);
   const encList = Array<string>(rowCount);
-  let charCodeCounter = 36;
+  let charCodeCounter = 1; // start at 1, 0 is reserved for null.
   const charCodeMap = new Map<string, string>();
   const seqColCats = seqCol.categories;
   const seqColRawData = seqCol.getRawData();
@@ -28,7 +28,7 @@ export async function getEncodedSeqSpaceCol(
     const catI = seqColRawData[rowIdx];
     const seq = seqColCats[catI];
     if (seq === null || seqCol.isNone(rowIdx)) {
-      // @ts-ignore
+      //@ts-ignore
       encList[rowIdx] = null;
       continue;
     }
@@ -44,30 +44,13 @@ export async function getEncodedSeqSpaceCol(
     }
   }
   let options = {} as mmDistanceFunctionArgs;
-  if (similarityMetric === MmDistanceFunctionsNames.MONOMER_CHEMICAL_DISTANCE) {
+  if (
+    similarityMetric === MmDistanceFunctionsNames.MONOMER_CHEMICAL_DISTANCE ||
+    similarityMetric === MmDistanceFunctionsNames.NEEDLEMANN_WUNSCH
+  ) {
     const monomers = Array.from(charCodeMap.keys());
     const monomerRes = await getMonomerSubstitutionMatrix(monomers, fingerprintType);
-    // the susbstitution matrix contains similarity, but we need distances
-    monomerRes.scoringMatrix.forEach((row, i) => {
-      row.forEach((val, j) => {
-        monomerRes.scoringMatrix[i][j] = 1 - val;
-      });
-    });
-    const monomerHashToMatrixMap: { [_: string]: number } = {};
-    Object.entries(monomerRes.alphabetIndexes).forEach(([key, value]) => {
-      monomerHashToMatrixMap[charCodeMap.get(key)!] = value;
-    });
-    // sets distance function args in place.
-    options = {scoringMatrix: monomerRes.scoringMatrix, alphabetIndexes: monomerHashToMatrixMap};
-  } else if (similarityMetric === MmDistanceFunctionsNames.NEEDLEMANN_WUNSCH) {
-    const monomers = Array.from(charCodeMap.keys());
-    const monomerRes = await getMonomerSubstitutionMatrix(monomers, fingerprintType);
-    // the susbstitution matrix contains similarity, but we need distances
-    // monomerRes.scoringMatrix.forEach((row, i) => {
-    //   row.forEach((val, j) => {
-    //     monomerRes.scoringMatrix[i][j] = 1 - val;
-    //   });
-    // });
+
     const monomerHashToMatrixMap: { [_: string]: number } = {};
     Object.entries(monomerRes.alphabetIndexes).forEach(([key, value]) => {
       monomerHashToMatrixMap[charCodeMap.get(key)!] = value;

package/src/package.ts

@@ -59,7 +59,7 @@ import {BioPackage, BioPackageProperties} from './package-types';
 import {getCompositionAnalysisWidget} from './widgets/composition-analysis-widget';
 import {MacromoleculeColumnWidget} from './utils/macromolecule-column-widget';
 import {addCopyMenuUI} from './utils/context-menu';
-import {PolyTool} from './utils/poly-tool/ui';
+import {getPolyToolDialog} from './utils/poly-tool/ui';
 import {PolyToolCsvLibHandler} from './utils/poly-tool/csv-to-json-monomer-lib-converter';
 import {_setPeptideColumn} from './utils/poly-tool/utils';
 import {getRegionDo} from './utils/get-region';
@@ -471,9 +471,8 @@ export async function activityCliffs(table: DG.DataFrame, molecules: DG.Column<s
         })
         .onCancel(() => { resolve(undefined); })
         .show();
-    } else {
+    } else
       runCliffs().then((res) => resolve(res)).catch((err) => reject(err));
-    }
   }).catch((err: any) => {
     const [errMsg, errStack] = errInfo(err);
     _package.logger.error(errMsg, undefined, errStack);
@@ -647,9 +646,8 @@ export async function compositionAnalysis(): Promise<void> {
           await handler(col);
       })
       .show();
-  } else {
+  } else
     col = colList[0];
-  }
 
   if (!col)
     return;
@@ -690,10 +688,9 @@ export function convertDialog() {
 //name: polyTool
 //description: Perform cyclization of polymers
 export async function polyTool(): Promise<void> {
-  const polytool = new PolyTool();
   let dialog: DG.Dialog;
   try {
-    dialog = await polytool.getPolyToolDialog();
+    dialog = await getPolyToolDialog();
     dialog.show();
   } catch (err: any) {
     grok.shell.warning('To run PolyTool, open a dataframe with macromolecules');

package/src/tests/substructure-filters-tests.ts

@@ -2,6 +2,10 @@ import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
+import $ from 'cash-dom';
+import wu from 'wu';
+
+
 import {after, before, category, test, expect, delay, testEvent, awaitCheck} from '@datagrok-libraries/utils/src/test';
 import {getMonomerLibHelper, IMonomerLibHelper} from '@datagrok-libraries/bio/src/monomer-works/monomer-utils';
 import {
@@ -19,7 +23,7 @@ import {HelmBioFilter} from '../widgets/bio-substructure-filter-helm';
 import {_package} from '../package-test';
 
 
-category('substructureFilters', async () => {
+category('bio-substructure-filters', async () => {
   let monomerLibHelper: IMonomerLibHelper;
   /** Backup actual user's monomer libraries settings */
   let userLibSettings: UserLibSettings;
@@ -305,6 +309,144 @@ category('substructureFilters', async () => {
     await Promise.all([f1.awaitRendered(), f2.awaitRendered()]);
     await awaitGrid(view.grid);
   });
+
+  // two seq columns
+
+  const twoColumnsCsv: string = `id,seq1,seq2,trueSeq1,trueSeq2
+0,CGGCTACGGC,ATTGCATTCG,0,1,
+1,CGGCTGCCGC,ATAGCATTCG,1,1,
+2,CGGCTGCGCC,AATGCATACG,1,0,
+3,CGGCTGCATT,TTTGCATTCG,1,1,
+4,CGGCTGCATT,AAAGCATACG,1,0,
+`;
+
+  test('two-columns-fasta', async () => {
+    const df = DG.DataFrame.fromCsv(twoColumnsCsv);
+    await grok.data.detectSemanticTypes(df);
+    const view = grok.shell.addTableView(df);
+
+    const fSeq1ColName: string = 'seq1';
+    const fSeq1SubStr: string = 'CGGCTG';
+    const fSeq1Trues: number[] = df.getCol('trueSeq1').toList();
+
+    const fSeq2ColName: string = 'seq2';
+    const fSeq2SubStr: string = 'GCATT';
+    const fSeq2Trues: number[] = df.getCol('trueSeq2').toList();
+
+    //const seq2Filter = new BioSubstructureFilter();
+    const filterList: any[] = [
+      {type: 'Bio:bioSubstructureFilter', columnName: fSeq1ColName},
+      {type: 'Bio:bioSubstructureFilter', columnName: fSeq2ColName},
+    ];
+    const fg = (await df.plot.fromType(DG.VIEWER.FILTERS,
+      {filters: filterList})) as DG.FilterGroup;
+    view.dockManager.dock(fg, DG.DOCK_TYPE.LEFT);
+    await delay(100);
+    await awaitGrid(view.grid);
+
+    const seq1Filter = fg.filters[0] as BioSubstructureFilter;
+    const seq2Filter = fg.filters[1] as BioSubstructureFilter;
+    expect(seq1Filter.column!.name, fSeq1ColName);
+    expect(seq2Filter.column!.name, fSeq2ColName);
+
+    const seq1Bf = seq1Filter.bioFilter as FastaBioFilter;
+    const seq2Bf = seq2Filter.bioFilter as FastaBioFilter;
+
+    await testEvent(df.onRowsFiltered, () => {}, () => {
+      seq1Bf.props = new BioFilterProps(fSeq1SubStr);
+    }, 1000);
+    await testEvent(df.onRowsFiltered, () => {}, () => {
+      seq2Bf.props = new BioFilterProps('');
+    }, 1000, 'testEvent onRowsFiltered on seq1');
+    expect(df.filter.trueCount, fSeq1Trues.filter((v) => v === 1).length);
+    expect(df.filter.toBinaryString(), fSeq1Trues.map((v) => v.toString()).join(''));
+
+    await testEvent(df.onRowsFiltered, () => {}, () => {
+      seq1Bf.props = new BioFilterProps('');
+    }, 1000);
+    await testEvent(df.onRowsFiltered, () => {}, () => {
+      seq2Bf.props = new BioFilterProps(fSeq2SubStr);
+    }, 1000, 'testEvent onRowsFiltered on seq2');
+    expect(df.filter.trueCount, fSeq2Trues.filter((v) => v === 1).length);
+    expect(df.filter.toBinaryString(), fSeq2Trues.map((v) => v.toString()).join(''));
+
+    await testEvent(df.onRowsFiltered, () => {}, () => {
+      seq1Bf.props = new BioFilterProps('');
+    }, 1000);
+    await testEvent(df.onRowsFiltered, () => {}, () => {
+      seq2Bf.props = new BioFilterProps('');
+    }, 1000, 'testEvent onRowsFiltered on neither');
+    expect(df.filter.trueCount, df.rowCount);
+
+    await testEvent(df.onRowsFiltered, () => {}, () => {
+      seq1Bf.props = new BioFilterProps(fSeq1SubStr);
+    }, 5000);
+    await testEvent(df.onRowsFiltered, () => {}, () => {
+      seq2Bf.props = new BioFilterProps(fSeq2SubStr);
+    }, 5000, 'testEvent onRowsFiltered on both');
+    const bothTrues: number[] = wu.count(0).take(df.rowCount)
+      .map((rowI) => fSeq1Trues[rowI] * fSeq2Trues[rowI]).toArray();
+    expect(df.filter.trueCount, bothTrues.filter((v) => v === 1).length);
+    expect(df.filter.toBinaryString(), bothTrues.map((v) => v.toString()).join(''));
+
+    await Promise.all([seq1Filter.awaitRendered(), seq2Filter.awaitRendered(), awaitGrid(view.grid)]);
+  });
+
+  // -- reset --
+
+  test('reset-fasta', async () => {
+    const df = await readDataframe('tests/filter_FASTA.csv');
+    await grok.data.detectSemanticTypes(df);
+    const view = grok.shell.addTableView(df);
+
+    const fSeqColName: string = 'fasta';
+    const fSubStr: string = 'MD';
+    const fTrueCount: number = 3;
+
+    const filterList = [{type: 'Bio:bioSubstructureFilter', columnName: fSeqColName}];
+    const fg = (await df.plot.fromType(DG.VIEWER.FILTERS,
+      {filters: filterList})) as DG.FilterGroup;
+    view.dockManager.dock(fg, DG.DOCK_TYPE.LEFT);
+    await delay(100);
+    await awaitGrid(view.grid);
+
+    const seqFilter = fg.filters[0] as BioSubstructureFilter;
+    const seqBf = seqFilter.bioFilter as FastaBioFilter;
+    await testEvent(df.onRowsFiltered, () => {}, () => {
+      seqBf.props = new BioFilterProps(fSubStr);
+    }, 1000, 'testEvent onRowsFiltered');
+    expect(df.filter.trueCount, fTrueCount);
+    expect(seqBf.props.substructure, fSubStr);
+    expect(seqBf.substructureInput.value, fSubStr);
+
+    const fgResetIconEl: HTMLElement = $(fg.root).find('i[name="icon-arrow-rotate-left"]')[0] as HTMLElement;
+    fgResetIconEl.click();
+    await delay(100);
+    await awaitGrid(view.grid);
+    expect(seqBf.props.substructure, '');
+    expect(seqBf.substructureInput.value, '');
+  });
+
+  test('reopen', async () => {
+    const df = await _package.files.readCsv('tests/filter_FASTA.csv');
+    const view = grok.shell.addTableView(df);
+
+    const filterList = [{type: 'Bio:bioSubstructureFilter', columnName: 'fasta'}];
+
+    const fg1 = (await df.plot.fromType(DG.VIEWER.FILTERS,
+      {filters: filterList})) as DG.FilterGroup;
+    const fg1Dn = view.dockManager.dock(fg1, DG.DOCK_TYPE.LEFT);
+    await delay(100);
+    await awaitGrid(view.grid);
+    fg1.close();
+    await awaitGrid(view.grid);
+
+    const fg2 = (await df.plot.fromType(DG.VIEWER.FILTERS,
+      {filters: filterList})) as DG.FilterGroup;
+    const fg2Dn = view.dockManager.dock(fg2, DG.DOCK_TYPE.LEFT);
+    await delay(100);
+    await awaitGrid(view.grid);
+  });
 });
 
 async function createFilter(colName: string, df: DG.DataFrame): Promise<BioSubstructureFilter> {

package/src/utils/poly-tool/ui.ts

@@ -5,144 +5,55 @@ import * as DG from 'datagrok-api/dg';
 
 import {addTransformedColumn} from './transformation';
 import {RULES_PATH, RULES_STORAGE_NAME} from './transformation';
+import {ActiveFiles} from '@datagrok-libraries/utils/src/settings/active-files-base';
 
-export type UserRuleSettings = {
-  included: string[],
-  notIncluded: string[],
-}
-
-async function getAllAvailableRuleFiles(): Promise<string[]> {
-  const list = await grok.dapi.files.list(RULES_PATH);
-  const paths = list.map((fileInfo) => {
-    return fileInfo.fullPath;
-  });
-
-  return paths;
-}
-
-async function getUserRulesSettings(): Promise<UserRuleSettings> {
-  const resStr: string = await grok.dapi.userDataStorage.getValue(RULES_STORAGE_NAME, 'Settings', true);
-  const res = resStr ? JSON.parse(resStr) : {included: [], enotIncludedxplicit: []};
-
-  res.included = res.included instanceof Array ? res.included : [];
-  res.notIncluded = res.notIncluded instanceof Array ? res.notIncluded : [];
-
-  return res!;
-}
-
-async function setUserLibSettings(value: UserRuleSettings): Promise<void> {
-  await grok.dapi.userDataStorage.postValue(RULES_STORAGE_NAME, 'Settings', JSON.stringify(value), true);
-}
-
-export class PolyTool {
-  ruleFiles: string[];
-  userRuleSettings: UserRuleSettings;
-  ruleFilesInputs: HTMLDivElement;// DG.InputBase<boolean | null>[];
-  dialog: DG.Dialog;
-
-  constructor() {
-    this.ruleFiles = [];
-    this.userRuleSettings = {included: [], notIncluded: []};
-  }
-
-  private updateRulesSelectionStatus(ruleFileName: string, isSelected: boolean): void {
-    const isRuleFileSelected = this.userRuleSettings.included.includes(ruleFileName);
-
-    if (!isRuleFileSelected && isSelected) {
-      this.userRuleSettings.included.push(ruleFileName);
-      this.userRuleSettings.included = this.userRuleSettings.included.sort();
-
-      const index = this.userRuleSettings.notIncluded.indexOf(ruleFileName);
-      if (index > -1)
-        this.userRuleSettings.notIncluded.splice(index, 1);
-    } else {
-      const index = this.userRuleSettings.included.indexOf(ruleFileName);
-      if (index > -1)
-        this.userRuleSettings.included.splice(index, 1);
-
-      this.userRuleSettings.notIncluded.push(ruleFileName);
-      this.userRuleSettings.notIncluded = this.userRuleSettings.notIncluded.sort();
-    }
-
-    setUserLibSettings(this.userRuleSettings);
+class RuleInputs extends ActiveFiles {
+  constructor(path: string, userStorageName: string, ext: string ) {
+    super(path, userStorageName, ext);
   }
+}
 
-  private getAddButton(): HTMLButtonElement {
-    return ui.button('ADD RULES', () => {
-      DG.Utils.openFile({
-        accept: '.csv',
-        open: async (selectedFile) => {
-          const content = await selectedFile.text();
-          await grok.dapi.files.writeAsText(RULES_PATH + `${selectedFile.name}`, content);
-          this.updateRulesSelectionStatus(selectedFile.name, false);
-          const cb = ui.boolInput(
-            selectedFile.name,
-            false,
-            (isSelected: boolean) => this.updateRulesSelectionStatus(RULES_PATH + `${selectedFile.name}`, isSelected)
-          );
-          this.ruleFilesInputs.append(cb.root);
-        },
-      });
+export async function getPolyToolDialog(): Promise<DG.Dialog> {
+  const targetColumns = grok.shell.t.columns.bySemTypeAll(DG.SEMTYPE.MACROMOLECULE);
+  if (!targetColumns)
+    throw new Error('No dataframe with macromolecule columns open');
+
+  const targetColumnInput = ui.columnInput(
+    'Column', grok.shell.t, targetColumns[0], null,
+    {filter: (col: DG.Column) => col.semType === DG.SEMTYPE.MACROMOLECULE}
+  );
+
+  const generateHelmChoiceInput = ui.boolInput('Get HELM', true);
+  ui.tooltip.bind(generateHelmChoiceInput.root, 'Add HELM column');
+
+  const chiralityEngineInput = ui.boolInput('Chirality engine', false);
+  const ruleInputs = new RuleInputs(RULES_PATH, RULES_STORAGE_NAME, '.csv');
+  const rulesForm = await ruleInputs.getForm();
+
+  const div = ui.div([
+    targetColumnInput,
+    generateHelmChoiceInput,
+    chiralityEngineInput,
+    'Rules used',
+    rulesForm
+  ]);
+
+  const dialog = ui.dialog('Poly Tool')
+    .add(div)
+    .onOK(async () => {
+      const molCol = targetColumnInput.value;
+      if (!molCol) {
+        grok.shell.warning('No marcomolecule column chosen!');
+        return;
+      }
+
+      const files = await ruleInputs.getActive();
+
+      addTransformedColumn(molCol!,
+        generateHelmChoiceInput.value!,
+        files,
+        chiralityEngineInput.value!);
     });
-  }
-
-  private async getRuleFilesBlock(): Promise<DG.InputBase<boolean | null>[]> {
-    this.ruleFiles = await getAllAvailableRuleFiles();
-    this.userRuleSettings = await getUserRulesSettings();
-    const cBoxes: DG.InputBase<boolean | null>[] = [];
-
-    for (let i = 0; i < this.ruleFiles.length; i++) {
-      const ruleFileName = this.ruleFiles[i];
-      const isRuleFileSelected = this.userRuleSettings.included.includes(ruleFileName);
-      const cb = ui.boolInput(
-        ruleFileName.replace(RULES_PATH, ''),
-        isRuleFileSelected,
-        (isSelected: boolean) => this.updateRulesSelectionStatus(ruleFileName, isSelected)
-      );
-
-      cBoxes.push(cb);
-    }
-    return cBoxes;
-  }
 
-  async getPolyToolDialog(): Promise<DG.Dialog> {
-    const targetColumns = grok.shell.t.columns.bySemTypeAll(DG.SEMTYPE.MACROMOLECULE);
-    if (!targetColumns)
-      throw new Error('No dataframe with macromolecule columns open');
-
-    const targetColumnInput = ui.columnInput(
-      'Column', grok.shell.t, targetColumns[0], null,
-      {filter: (col: DG.Column) => col.semType === DG.SEMTYPE.MACROMOLECULE}
-    );
-
-    const generateHelmChoiceInput = ui.boolInput('Get HELM', true);
-    ui.tooltip.bind(generateHelmChoiceInput.root, 'Add HELM column');
-
-    const addButton = this.getAddButton();
-    this.ruleFilesInputs = ui.div(await this.getRuleFilesBlock());
-    //const rulesFiles = ui.div(this.ruleFilesInputs);
-    const chiralityEngineInput = ui.boolInput('Chirality engine', false);
-
-    const div = ui.div([
-      targetColumnInput,
-      generateHelmChoiceInput,
-      chiralityEngineInput,
-      'Rules used',
-      this.ruleFilesInputs,
-      addButton
-    ]);
-
-    this.dialog = ui.dialog('Poly Tool')
-      .add(div)
-      .onOK(async () => {
-        const molCol = targetColumnInput.value;
-        if (!molCol) {
-          grok.shell.warning('No marcomolecule column chosen!');
-          return;
-        }
-        addTransformedColumn(molCol!, generateHelmChoiceInput.value!, this.userRuleSettings.included, chiralityEngineInput.value!);
-      });
-
-    return this.dialog;
-  }
+  return dialog;
 }

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

@@ -6,50 +6,24 @@ import {Observable, Subject, Unsubscribable} from 'rxjs';
 import {_package} from '../package';
 
 export interface IFilterProps {
-  get onChanged(): Observable<void>;
-
-  save(): object;
-  apply(propsObj: object): void;
 }
 
 /** Fasta and Helm */
 export class BioFilterProps implements IFilterProps {
-  private _onChanged: Subject<void> = new Subject<void>();
-
-  get onChanged(): Observable<void> { return this._onChanged; }
-
   constructor(
-    public substructure: string
+    public readonly substructure: string,
+    /** Pass false from an inheritors constructor, at the end set true. */ protected readOnly: boolean = true,
   ) {
     return new Proxy(this, {
       set: (target: any, key: string | symbol, value: any) => {
         _package.logger.debug(`BioFilterProps.set ${key.toString()}( '${value}' )`);
+        if (this.readOnly)
+          throw new Error('Properties are immutable.');
         target[key] = value;
-        this._onChanged.next();
         return true;
       }
     });
   }
-
-  save(): object {
-    const propsObj = {};
-    for (const [key, value] of Object.entries(this)) {
-      if (key !== '_onChanged') {
-        // @ts-ignore
-        propsObj[key] = this[key];
-      }
-    }
-    return propsObj;
-  }
-
-  apply(propsObj: object) {
-    for (const [key, value] of Object.entries(this)) {
-      if (key !== '_onChanged') {
-        // @ts-ignore
-        this[key] = propsObj[key];
-      }
-    }
-  }
 }
 
 export interface IBioFilter {
@@ -58,6 +32,9 @@ export interface IBioFilter {
   get props(): IFilterProps;
   set props(value: IFilterProps);
 
+  applyProps(props: IFilterProps): void;
+  saveProps(): IFilterProps;
+
   get onChanged(): Observable<void>;
   get filterPanel(): HTMLElement;
   get filterSummary(): string;
@@ -79,7 +56,6 @@ export abstract class BioFilterBase<TProps extends BioFilterProps> implements IB
 
   private _props: TProps;
   protected _propsChanging: boolean = false;
-  private _propsOnChangedSub: Unsubscribable | null = null;
 
   abstract get type(): string;
 
@@ -91,33 +67,31 @@ export abstract class BioFilterBase<TProps extends BioFilterProps> implements IB
   set props(value: TProps) {
     this._propsChanging = true;
     try {
-      if (this._propsOnChangedSub) {
-        this._propsOnChangedSub.unsubscribe();
-        this._propsOnChangedSub = null;
-      }
       this._props = value;
       this.applyProps();
       this.onChanged.next();
-      this._propsOnChangedSub = this._props.onChanged
-        .subscribe(() => {
-          this.onChanged.next();
-        });
     } finally {
       this._propsChanging = false;
     }
   };
 
-  abstract attach(): Promise<void>;
-
-  async detach(): Promise<void> {
-    if (this._propsOnChangedSub) {
-      this._propsOnChangedSub.unsubscribe();
-      this._propsOnChangedSub = null;
+  saveProps(): IFilterProps {
+    const propsObj = {};
+    for (const [key, value] of Object.entries(this.props)) {
+      if (key !== '_onChanged') {
+        // @ts-ignore
+        propsObj[key] = this.props[key];
+      }
     }
+    return propsObj;
   }
 
   abstract applyProps(): void;
 
+  abstract attach(): Promise<void>;
+
+  async detach(): Promise<void> { }
+
   get filterSummary(): string { return this.props.substructure; };
 
   get isFiltering(): boolean { return this.props.substructure !== ''; }