Create a Tutorial class with interactive steps and track registration
Help the user create an interactive tutorial that educates users about Datagrok platform features.
/write-tutorial [tutorial-name] [--package <package-name>] [--track <track-name>]
The package must depend on @datagrok-libraries/tutorials:
npm install @datagrok-libraries/tutorials
Create a TypeScript file (e.g., src/tutorials/custom-tutorial.ts) with a class extending Tutorial:
import {Tutorial} from '@datagrok-libraries/tutorials';
export class CustomTutorial extends Tutorial {
get name(): string { return 'Custom Tutorial'; }
get description(): string { return 'Teaches users about a feature'; }
protected async _run(): Promise<void> {
// Define steps using this.action() and helper methods
// Steps are event-based and can include interactive hints
}
}
Key points:
name and description getters._run method with a sequence of steps.action method or helper methods that call it internally.Add a registration function with metadata annotations:
import {CustomTutorial} from './tutorials/custom-tutorial';
//tags: tutorial
//meta.icon: images/custom-tutorial.png
//meta.name: Custom Tutorial
//meta.track: Test Track
//description: This tutorial illustrates a new feature
//output: object
export function registerTutorial() {
return new CustomTutorial();
}
| Annotation | Description |
|---|---|
tags | Must include tutorial |
meta.name | Display name of the tutorial |
output | Must be object (returns a Tutorial instance) |
| Annotation | Description |
|---|---|
meta.track | Track name this tutorial belongs to. If omitted, a new track is created for the package. If an existing track name is used, the tutorial is added to that track (even from another package). |
meta.icon | Path to icon relative to package root. Default icon used if absent. |
description | Displayed in the tutorial UI. Empty description if absent. |
To define a custom track that groups tutorials:
import {Track} from '@datagrok-libraries/tutorials';
//tags: track
//help-url: https://datagrok.ai/help
//output: object
//meta.name: Test Track
export function registerTrack() {
return new Track('Test Track', [], 'https://datagrok.ai/help');
}
Track registration annotations:
tags: track (required)meta.name (required): track display namehelp-url (required): link to documentationoutput: object (required)The Tutorials package provides default tracks (e.g., Exploratory Data Analysis, Data Access). Their visibility can be controlled at the user group level via package settings.
webpack
grok publish dev
_run implementation.package.ts with correct annotations.@datagrok-libraries/tutorials dependency is present in package.json.meta.track, tutorials get their own package-specific track.