@datagrok/bio 2.1.11 → 2.4.2

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

@@ -13,15 +13,16 @@ import {helmSubstructureSearch, linearSubstructureSearch} from '../substructure-
 import {Subject, Subscription} from 'rxjs';
 import * as C from '../utils/constants';
 import {updateDivInnerHTML} from '../utils/ui-utils';
-import {NOTATION} from '@datagrok-libraries/bio';
-import { delay } from '@datagrok-libraries/utils/src/test';
+import {TAGS as bioTAGS, NOTATION} from '@datagrok-libraries/bio/src/utils/macromolecule';
+import {delay} from '@datagrok-libraries/utils/src/test';
+import {debounceTime} from 'rxjs/operators';
 
 export class BioSubstructureFilter extends DG.Filter {
   bioFilter: FastaFilter | SeparatorFilter | HelmFilter | null = null;
   bitset: DG.BitSet | null = null;
   loader: HTMLDivElement = ui.loader();
   onBioFilterChangedSubs?: Subscription;
-  notation: string | undefined = '';
+  notation: string | undefined = undefined;
 
   get calculating(): boolean { return this.loader.style.display == 'initial'; }
 
@@ -39,6 +40,20 @@ export class BioSubstructureFilter extends DG.Filter {
     return !this.calculating && this.bitset != null;
   }
 
+  get _debounceTime(): number {
+    if (this.column == null)
+      return 1000;
+    const length = this.column.length;
+    const minLength = 500;
+    const maxLength = 10000;
+    const msecMax = 1000;
+    if (length < minLength) return 0;
+    if (length > maxLength) return msecMax;
+    return Math.floor(msecMax * ((length - minLength) / (maxLength - minLength)));
+  }
+
+  //column name setter overload
+
   constructor() {
     super();
     this.root = ui.divV([]);
@@ -48,16 +63,18 @@ export class BioSubstructureFilter extends DG.Filter {
   attach(dataFrame: DG.DataFrame): void {
     super.attach(dataFrame);
     this.column = dataFrame.columns.bySemType(DG.SEMTYPE.MACROMOLECULE);
-    this.columnName = this.column?.name;
-    this.notation = this.column?.getTag(DG.TAGS.UNITS);
+    this.columnName ??= this.column?.name;
+    this.notation ??= this.column?.getTag(DG.TAGS.UNITS);
     this.bioFilter = this.notation === NOTATION.FASTA ?
       new FastaFilter() : this.notation === NOTATION.SEPARATOR ?
-        new SeparatorFilter(this.column!.getTag(C.TAGS.SEPARATOR)) : new HelmFilter();
+        new SeparatorFilter(this.column!.getTag(bioTAGS.separator)) : new HelmFilter();
     this.root.appendChild(this.bioFilter!.filterPanel);
     this.root.appendChild(this.loader);
 
     this.onBioFilterChangedSubs?.unsubscribe();
-    const onChangedEvent: any = this.bioFilter.onChanged;
+
+    let onChangedEvent: any = this.bioFilter.onChanged;
+    onChangedEvent = onChangedEvent.pipe(debounceTime(this._debounceTime));
     this.onBioFilterChangedSubs = onChangedEvent.subscribe(async (_: any) => await this._onInputChanged());
   }
 
@@ -79,7 +96,7 @@ export class BioSubstructureFilter extends DG.Filter {
 
   /** Override to load filter state. */
   applyState(state: any): void {
-    super.applyState(state);
+    super.applyState(state); //column, columnName
     if (state.bioSubstructure)
       this.bioFilter!.substructure = state.bioSubstructure;
 
@@ -133,12 +150,14 @@ abstract class BioFilterBase {
 }
 
 class FastaFilter extends BioFilterBase {
-  substructureInput: DG.InputBase<string> = ui.stringInput('', '', () => {
-    this.onChanged.next();
-  }, {placeholder: 'Substructure'});
+  readonly substructureInput: DG.InputBase<string>;
 
   constructor() {
     super();
+
+    this.substructureInput = ui.stringInput('', '', () => {
+      this.onChanged.next();
+    }, {placeholder: 'Substructure'});
   }
 
   get filterPanel() {
@@ -159,13 +178,15 @@ class FastaFilter extends BioFilterBase {
 }
 
 export class SeparatorFilter extends FastaFilter {
-  separatorInput: DG.InputBase<string> = ui.stringInput('', '', () => {
-    this.onChanged.next();
-  }, {placeholder: 'Separator'});
+  readonly separatorInput: DG.InputBase<string>;
   colSeparator = '';
 
   constructor(separator: string) {
     super();
+
+    this.separatorInput = ui.stringInput('', '', () => {
+      this.onChanged.next();
+    }, {placeholder: 'Separator'});
     this.colSeparator = separator;
     this.separatorInput.value = separator;
   }
@@ -212,7 +233,8 @@ export class HelmFilter extends BioFilterBase {
       ui.dialog({showHeader: false, showFooter: true})
         .add(editorDiv)
         .onOK(() => {
-          const helmString = webEditor.canvas.getHelm(true).replace(/<\/span>/g, '').replace(/<span style='background:#bbf;'>/g, '');
+          const helmString = webEditor.canvas.getHelm(true)
+            .replace(/<\/span>/g, '').replace(/<span style='background:#bbf;'>/g, '');
           this.helmSubstructure = helmString;
           this.updateFilterPanel(this.substructure);
           setTimeout(() => { this.onChanged.next(); }, 10);
@@ -242,15 +264,7 @@ export class HelmFilter extends BioFilterBase {
       this._filterPanel.parentElement!.clientWidth;
     const height = width / 2;
     if (!helmString) {
-      const editDivStyle = {style: {
-        width: `${width}px`,
-        height: `${height/2}px`,
-        textAlign: 'center',
-        verticalAlign: 'middle',
-        lineHeight: `${height/2}px`,
-        border: '1px solid #dbdcdf'
-      }};
-      const editDiv = ui.divText('Click to edit', editDivStyle);
+      const editDiv = ui.divText('Click to edit', 'helm-substructure-filter');
       updateDivInnerHTML(this._filterPanel, editDiv);
     } else {
       updateDivInnerHTML(this._filterPanel, this.helmEditor.host);

package/tsconfig.json

@@ -1,74 +1,73 @@
 {
-    "compilerOptions": {
-      /* Visit https://aka.ms/tsconfig.json to read more about this file */
-  
-      /* Basic Options */
-      // "incremental": true,                         /* Enable incremental compilation */
-      "target": "es6",                                /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
-      "module": "es2020",                             /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
-      "lib": ["es2020", "dom", "ES2021.String"],                       /* Specify library files to be included in the compilation. */
-      // "allowJs": true,                             /* Allow javascript files to be compiled. */
-      // "checkJs": true,                             /* Report errors in .js files. */
-      // "jsx": "preserve",                           /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */
-      // "declaration": true,                         /* Generates corresponding '.d.ts' file. */
-      // "declarationMap": true,                      /* Generates a sourcemap for each corresponding '.d.ts' file. */
-      // "sourceMap": true,                           /* Generates corresponding '.map' file. */
-      // "outFile": "./",                             /* Concatenate and emit output to single file. */
-      // "outDir": "./",                              /* Redirect output structure to the directory. */
-      // "rootDir": "./",                             /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
-      // "composite": true,                           /* Enable project compilation */
-      // "tsBuildInfoFile": "./",                     /* Specify file to store incremental compilation information */
-      // "removeComments": true,                      /* Do not emit comments to output. */
-      // "noEmit": true,                              /* Do not emit outputs. */
-      // "importHelpers": true,                       /* Import emit helpers from 'tslib'. */
-      // "downlevelIteration": true,                  /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
-      // "isolatedModules": true,                     /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
-  
-      /* Strict Type-Checking Options */
-      "strict": true,                                 /* Enable all strict type-checking options. */
-      // "noImplicitAny": true,                       /* Raise error on expressions and declarations with an implied 'any' type. */
-      // "strictNullChecks": true,                    /* Enable strict null checks. */
-      // "strictFunctionTypes": true,                 /* Enable strict checking of function types. */
-      // "strictBindCallApply": true,                 /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
-      // "strictPropertyInitialization": true,        /* Enable strict checking of property initialization in classes. */
-      // "noImplicitThis": true,                      /* Raise error on 'this' expressions with an implied 'any' type. */
-      // "alwaysStrict": true,                        /* Parse in strict mode and emit "use strict" for each source file. */
-  
-      /* Additional Checks */
-      // "noUnusedLocals": true,                      /* Report errors on unused locals. */
-      // "noUnusedParameters": true,                  /* Report errors on unused parameters. */
-      // "noImplicitReturns": true,                   /* Report error when not all code paths in function return a value. */
-      // "noFallthroughCasesInSwitch": true,          /* Report errors for fallthrough cases in switch statement. */
-      // "noUncheckedIndexedAccess": true,            /* Include 'undefined' in index signature results */
-      // "noPropertyAccessFromIndexSignature": true,  /* Require undeclared properties from index signatures to use element accesses. */
-  
-      /* Module Resolution Options */
-      "moduleResolution": "node",                     /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
-      // "baseUrl": "./",                             /* Base directory to resolve non-absolute module names. */
-      // "paths": {},                                 /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
-      // "rootDirs": [],                              /* List of root folders whose combined content represents the structure of the project at runtime. */
-      // "typeRoots": [],                             /* List of folders to include type definitions from. */
-      // "types": [],                                 /* Type declaration files to be included in compilation. */
-      // "allowSyntheticDefaultImports": true,        /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
-      "esModuleInterop": true,                        /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
-      // "preserveSymlinks": true,                    /* Do not resolve the real path of symlinks. */
-      // "allowUmdGlobalAccess": true,                /* Allow accessing UMD globals from modules. */
-  
-      /* Source Map Options */
-      // "sourceRoot": "",                            /* Specify the location where debugger should locate TypeScript files instead of source locations. */
-      // "mapRoot": "",                               /* Specify the location where debugger should locate map files instead of generated locations. */
-      // "inlineSourceMap": true,                     /* Emit a single file with source maps instead of having a separate file. */
-      // "inlineSources": true,                       /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
-  
-      /* Experimental Options */
-      // "experimentalDecorators": true,              /* Enables experimental support for ES7 decorators. */
-      // "emitDecoratorMetadata": true,               /* Enables experimental support for emitting type metadata for decorators. */
-  
-      /* Advanced Options */
-      "skipLibCheck": false,                          /* Skip type checking of declaration files. */
-      "forceConsistentCasingInFileNames": true,
-      /* Disallow inconsistently-cased references to the same file. */
-      //"jsx": "react"
-    }
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig.json to read more about this file */
+
+    /* Basic Options */
+    // "incremental": true,                         /* Enable incremental compilation */
+    "target": "es6",                                /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
+    "module": "es2020",                             /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
+    "lib": ["es2020", "dom", "ES2021.String"],      /* Specify library files to be included in the compilation. */
+    // "allowJs": true,                             /* Allow javascript files to be compiled. */
+    // "checkJs": true,                             /* Report errors in .js files. */
+    // "jsx": "preserve",                           /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */
+    // "declaration": true,                         /* Generates corresponding '.d.ts' file. */
+    // "declarationMap": true,                      /* Generates a sourcemap for each corresponding '.d.ts' file. */
+    "sourceMap": true,                              /* Generates corresponding '.map' file. */
+    // "outFile": "./",                             /* Concatenate and emit output to single file. */
+    // "outDir": "./",                              /* Redirect output structure to the directory. */
+    // "rootDir": "./",                             /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    // "composite": true,                           /* Enable project compilation */
+    // "tsBuildInfoFile": "./",                     /* Specify file to store incremental compilation information */
+    // "removeComments": true,                      /* Do not emit comments to output. */
+    // "noEmit": true,                              /* Do not emit outputs. */
+    // "importHelpers": true,                       /* Import emit helpers from 'tslib'. */
+    // "downlevelIteration": true,                  /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+    // "isolatedModules": true,                     /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+
+    /* Strict Type-Checking Options */
+    "strict": true,                                 /* Enable all strict type-checking options. */
+    // "noImplicitAny": true,                       /* Raise error on expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,                    /* Enable strict null checks. */
+    // "strictFunctionTypes": true,                 /* Enable strict checking of function types. */
+    // "strictBindCallApply": true,                 /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
+    "strictPropertyInitialization": false,          /* Enable strict checking of property initialization in classes. */
+    // "noImplicitThis": true,                      /* Raise error on 'this' expressions with an implied 'any' type. */
+    // "alwaysStrict": true,                        /* Parse in strict mode and emit "use strict" for each source file. */
+
+    /* Additional Checks */
+    // "noUnusedLocals": true,                      /* Report errors on unused locals. */
+    // "noUnusedParameters": true,                  /* Report errors on unused parameters. */
+    // "noImplicitReturns": true,                   /* Report error when not all code paths in function return a value. */
+    // "noFallthroughCasesInSwitch": true,          /* Report errors for fallthrough cases in switch statement. */
+    // "noUncheckedIndexedAccess": true,            /* Include 'undefined' in index signature results */
+    // "noPropertyAccessFromIndexSignature": true,  /* Require undeclared properties from index signatures to use element accesses. */
+
+    /* Module Resolution Options */
+    "moduleResolution": "node",                     /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+    // "baseUrl": "./",                             /* Base directory to resolve non-absolute module names. */
+    // "paths": {},                                 /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    // "rootDirs": [],                              /* List of root folders whose combined content represents the structure of the project at runtime. */
+    // "typeRoots": [],                             /* List of folders to include type definitions from. */
+    // "types": [],                                 /* Type declaration files to be included in compilation. */
+    // "allowSyntheticDefaultImports": true,        /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+    "esModuleInterop": true,                        /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+    // "preserveSymlinks": true,                    /* Do not resolve the real path of symlinks. */
+    // "allowUmdGlobalAccess": true,                /* Allow accessing UMD globals from modules. */
+
+    /* Source Map Options */
+    // "sourceRoot": "",                            /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    // "mapRoot": "",                               /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,                     /* Emit a single file with source maps instead of having a separate file. */
+    // "inlineSources": true,                       /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+
+    /* Experimental Options */
+    // "experimentalDecorators": true,              /* Enables experimental support for ES7 decorators. */
+    // "emitDecoratorMetadata": true,               /* Enables experimental support for emitting type metadata for decorators. */
+
+    /* Advanced Options */
+    "skipLibCheck": false,                          /* Skip type checking of declaration files. */
+    "forceConsistentCasingInFileNames": true,
+    /* Disallow inconsistently-cased references to the same file. */
+    //"jsx": "react"
   }
-  
+}

package/webpack.config.js

@@ -17,19 +17,12 @@ module.exports = {
   },
   module: {
     rules: [
-      {
-        test: /\.ts(x?)$/,
-        use: 'ts-loader',
-        exclude: /node_modules/,
-      },
-      {
-        test: /\.css$/,
-        use: ['style-loader', 'css-loader'],
-        exclude: /node_modules/,
-      },
+      {test: /\.js$/, enforce: 'pre', use: ['source-map-loader'], exclude: /node_modules/},
+      {test: /\.ts(x?)$/, use: 'ts-loader', exclude: /node_modules/},
+      {test: /\.css$/, use: ['style-loader', 'css-loader']},
     ],
   },
-  devtool: 'inline-source-map',
+  devtool: 'source-map',
   externals: {
     'datagrok-api/dg': 'DG',
     'datagrok-api/grok': 'grok',