Create a custom view for Datagrok by extending ViewBase
Create a custom view for the Datagrok platform that can be opened via URL, saved in projects, and added to navigation.
/create-custom-view [view-name] [package-path]
When this skill is invoked, help the user create a custom view by extending DG.ViewBase.
Create a new file in the package's src/ directory (e.g., src/my-view.ts).
The class must extend DG.ViewBase and implement:
get type() - view type identifier stringget name() - display nameget path() - URL path for the view (used for routing)get helpUrl() (optional) - link to help pagegetIcon() (optional) - returns an HTMLElement for the view iconsaveStateMap() / loadStateMap(stateMap) - state serialization for project savinghandlePath(path) - restore view from a URL pathacceptsPath(path) - return true if this view handles the given URL pathexport class MyView extends DG.ViewBase {
private TYPE = 'MyView';
private PATH = '/myview';
constructor(params: any, path: string) {
super(params, path);
this.TYPE = 'MyView';
this.PATH = '/myview';
}
get type() { return this.TYPE; }
get helpUrl() { return '/help/path/to/help.md'; }
get name() { return 'My View'; }
get path() { return `${this.PATH}/${this.viewId}`; }
getIcon(): HTMLElement {
let img = document.createElement('img');
img.src = '/images/entities/my-icon.png';
img.height = 18;
img.width = 18;
return img;
}
// State serialization for project saving
saveStateMap(): Record<string, any> { return {'viewId': this.viewId}; }
loadStateMap(stateMap: Record<string, any>) { this.open(stateMap['viewId']); }
// URL routing
handlePath(path: string) {
let id = path.replace(`${this.PATH}/`, '');
this.open(id);
}
acceptsPath(path: string): boolean { return path.startsWith(this.PATH); }
}
Add a factory function in package.ts with the view tag:
//name: My View
//description: Creates a My View
//input: map params
//input: string path
//tags: view
//output: view result
export function myView(params: any = null, path: string = '') {
return new MyView(params, path);
}
The registration rules:
view tagparams (map) and path (string) inputsviewAdd UI content to the view in the constructor or an open() method:
this.root.appendChild(ui.divText('Hello from My View!'));
this.root.appendChild(ui.button('Click me', () => grok.shell.info('Clicked')));
For ad-hoc views (quick prototyping without a class):
let view = grok.shell.newView('My Quick View', [ui.divText('Hi!')]);
saveStateMap / loadStateMap enable saving views as part of a projecthandlePath / acceptsPath enable URL-based routing (opening views from links)path property should return a unique URL that can reconstruct the view statepublic/packages/Notebooks/src/package.jspackage.tsimport * as DG from 'datagrok-api/dg', import * as grok from 'datagrok-api/grok', import * as ui from 'datagrok-api/ui')