Class decorators

Package functions are typically registered in the main package file package.ts. Each function has a special parameter annotation depending on its role. You can use class decorators to register such package functions as:

If a function uses a subclass that extends classes from Datagrok JS API, you can use a decorator @grok.decorators.<name>. This is equivalent to adding a function to package.ts. There is no need to add anything other than the class itself. When you run the build script for your package, the webpack plugin called FuncGeneratorPlugin will add a special package.g.ts file to your project. Note that it is not on the ignore list, so you should commit this file to the repository.

Enabling decorators in a package

In tsconfig.json, enable these experimental options:

"experimentalDecorators": true,   /* Enables experimental support for ES7 decorators. */
"emitDecoratorMetadata": true,    /* Enables experimental support for emitting type metadata for decorators. */

In webpack.config.js, enable FuncGeneratorPlugin:

const FuncGeneratorPlugin = require('datagrok-tools/plugins/func-gen-plugin');

module.exports = {
  /** ... */
  plugins: [
    new FuncGeneratorPlugin({outputPath: './src/package.g.ts'}),
  ],
};

In package.json, add datagrok-tools to dev dependencies; upgrade its version, if necessary:
```
"devDependencies": {
  "datagrok-tools": "^4.12.x"
}
```

Examples

Custom viewers

@grok.decorators.viewer({
  name: 'Test Viewer',
  description: 'Creates a Test Viewer instance',
  icon: 'images/icon.png',
  toolbox: true,
  viewerPath: 'Tests | Show results',
})
export class TestViewer extends DG.JsViewer {
}

Custom filters

@grok.decorators.filter({
  name: 'Radio Button Filter',
  description: 'Single option filter',
  semType: 'Country',
})
export class RadioButtonFilter extends DG.Filter {
}

Custom cell renderers

@grok.decorators.cellRenderer({
  name: 'Fasta Sequence Cell Renderer',
  description: 'Macromolecule renderer',
  cellType: 'sequence',
  columnTags: 'quality=Macromolecule, units=fasta',
})
export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
}

Class decorators

Enabling decorators in a package​

Examples​

Enabling decorators in a package

Examples