Menü
Create info panels that appear in the context panel based on semantic types
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
Use whenever you need the Datagrok browser to actually execute JavaScript — adding viewers, filtering, modifying the view, or returning a result widget to the chat. Open this skill before calling the datagrok_exec tool.
Filter rows of a Datagrok DataFrame inside a datagrok-exec block through the Filters panel — by range, equals/contains/in-set, multi-value, boolean, free-text row expressions, or substructure (SMILES / SMARTS / molblock). Also covers clearing, inverting, the show-only-filtered vs destructive-drop split, and the filter event lifecycle (onRowsFiltering / onFilterChanged / onRowsFiltered). Use whenever the user says "filter", "show only", "hide rows where", "narrow to subset", "find rows that", "contains", "substructure search", "categorical filter", "range filter", "invert", "clear the filter", "clear filters", "drop rows", or asks for the filtered subset as a new table. Does NOT cover selection (separate skill) or generic DataFrame cloning (datagrok-df-and-columns).
Add a calculated, formula-based column to a dataframe inside a datagrok-exec block. Use whenever the user asks to compute, derive, add, or create a new column from existing columns — LipE, ratios, log/round, heavy atom count, any expression in the Datagrok formula DSL. Replaces hand-written addNewFloat/addNewInt + for-loop with a single formula-attached column that recomputes when source columns change.
Find, describe, add, remove, rename, clone, or set metadata on columns of a Datagrok DataFrame inside a datagrok-exec block. Use whenever the user asks to locate "the X column", summarize a column, add a typed/empty/values-filled/virtual column, set semantic type / units / format / friendly name, apply linear or categorical or conditional color coding, drop or rename columns, or copy a DataFrame. Covers everything in DataFrame.columns and Column.meta — but not row filtering/selection (datagrok-filtering, datagrok-selection) and not formula-only columns (datagrok-calc-column).
Sort, hide, show, reorder, resize, pin, format, and color-code columns in a Datagrok TableView grid from a datagrok-exec block. Use whenever the user asks to sort by a column (any direction), multi-sort, hide / show / reorder / pin / resize columns, freeze the first N columns, change number-format display, color-code cells (defaults and grid-only tint here; full per-type reference in datagrok-df-and-columns), set row height, or reset the grid back to defaults. Distinct from datagrok-df-and-columns (which owns column-level data metadata like semType, units, friendlyName, and is also where canonical color-coding lives) and from datagrok-viewers (which owns scatter plot / histogram / etc.). Does NOT cover filtering (`datagrok-filtering`), selection (`datagrok-selection`), custom cell renderer authoring (`create-cell-renderer`), saving / restoring layouts, or grid event handlers.
Add a viewer, configure a viewer, change viewer options, find viewer, close viewer, view a scatter plot, bar chart, histogram, line chart, box plot, pie chart, heat map, correlation plot, 3D scatter, trellis, density plot, statistics, on a Datagrok TableView inside a datagrok-exec block. Use whenever the user asks to plot, chart, visualize, show a graph, draw a distribution, color by a column, swap a viewer's axis, toggle a legend / regression line / log scale, replace one viewer with another, close every chart, reset the view to just the grid, or find an existing viewer by type. Plugin viewers like "Chem space", "sequence space", "activity cliffs" are NOT viewer types — they're registered functions — route those to `grok.functions.call`. Does NOT cover filtering (separate skill `datagrok-filtering`), selection (`datagrok-selection`), grid cell rendering (`datagrok-grid-customization`), layout save/restore, or custom-viewer authoring.
| name | add-info-panel |
| description | Create info panels that appear in the context panel based on semantic types |
| when-to-use | When user asks to add an info panel, context panel, or property panel to a package |
| effort | medium |
Help the user create info panels that display context-specific information in Datagrok's context panel.
/add-info-panel [panel-name] [--semtype <semantic-type>] [--input-type <string|column|dataframe|file>]
Info panels appear in the context panel on the right side of the Datagrok UI. They show additional information about the currently selected object (cell value, column, table, file). Panels are re-evaluated whenever the selected object changes.
src/package.tsA panel function must be annotated with panel tag and return a widget:
//name: MyPanel
//tags: panel, widgets
//input: string str {semType: Molecule}
//output: widget result
export function myPanel(str: string) {
return new DG.Widget(ui.divV([
ui.divText('Info about: ' + str)
]));
}
Key annotations:
//tags: panel, widgets -- marks this as a panel function returning a widget//input: -- defines what object triggers the panel//output: widget result -- panels must output a widget{semType: <type>} on the input -- restricts panel to columns with this semantic typePanels accept a single input parameter of various types:
// For cell values (filtered by semantic type)
//input: string str {semType: text}
// For columns
//input: column col
// For dataframes
//input: dataframe table
// For files
//input: file file
// For semantic values (preserves cell context)
//input: semantic_value smiles {semType: Molecule}
Using semantic_value gives access to the cell's column and row context:
//input: semantic_value smiles {semType: Molecule}
//output: widget result
export function valueWidget(value) {
return value
? new DG.Widget(ui.divText('Column: ' + value.cell.column.name))
: new DG.Widget(ui.divText('No value'));
}
Control when panels appear using the //condition: annotation:
By semantic type (most common -- use semType on the input parameter):
//input: string str {semType: Molecule}
By column properties:
//input: column x
//condition: x.isnumerical && x.name == "f3" && x.stats.missingvaluecount > 0
By dataset:
//condition: table.gettag("database") == "northwind"
By user role:
//condition: user.hasrole("chemist")
By column semantic type in condition:
//condition: columnName.semType == "Molecule"
Custom function condition:
//condition: isTextFile(file)
Conditions use Grok Script syntax regardless of the panel's implementation language.
Panels can also be written as scripts in Python, R, etc. These execute on the server:
# name: string length
# language: python
# tags: panel
# input: string s {semType: text}
# output: int length
# condition: true
length = len(s)
Return interactive visualizations in a panel:
//name: ScatterPanel
//tags: panel, widgets
//input: dataframe table
//condition: table.columns.containsAll(["height", "weight"])
//output: widget result
export function scatterPanel(table: DG.DataFrame) {
const viewer = DG.Viewer.scatterPlot(table, {x: 'height', y: 'weight'});
return new DG.Widget(viewer.root);
}
npm run build
grok publish dev
To test: open a dataset, click on a cell in a column with the matching semantic type, and check the context panel on the right for your panel.
To manually set a column's semantic type for testing: right-click the column header, select Column Properties, add the tag quality: <semType>.
DG.Widget as the return wrapper -- the panel output must be a widget.semantic_value input type when the user needs access to cell/column context.detectors.js to auto-detect custom types.