Heatmap: Migrate to CUE (#62173)

* IP migrate heatmap to cue

* WIP

* refactor

* change usages and refactor panelcfg

* CR modifications and docs

* refactor, enable heatmap cue generation, overwrite enum values in types.ts

* small refactor

* refactor types.ts

* cr modifications

* docs

.betterer.results

@@ -6476,6 +6476,9 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
     ],
+    "public/app/plugins/panel/heatmap/types.ts:5381": [
+      [0, 0, 0, "Do not use any type assertions.", "0"]
+    ],
     "public/app/plugins/panel/heatmap/utils.ts:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"],

docs/sources/developers/kinds/composable/heatmappanelcfg/schema-reference.md

@@ -0,0 +1,229 @@
+---
+keywords:
+  - grafana
+  - schema
+title: HeatmapPanelCfg kind
+---
+> Both documentation generation and kinds schemas are in active development and subject to change without prior notice.
+
+## HeatmapPanelCfg
+
+#### Maturity: [merged](../../../maturity/#merged)
+#### Version: 0.0
+
+
+
+| Property              | Type                           | Required | Description                                                                               |
+|-----------------------|--------------------------------|----------|-------------------------------------------------------------------------------------------|
+| `CellValues`          | [object](#cellvalues)          | **Yes**  | Controls cell value options                                                               |
+| `ExemplarConfig`      | [object](#exemplarconfig)      | **Yes**  | Controls exemplar options                                                                 |
+| `FilterValueRange`    | [object](#filtervaluerange)    | **Yes**  | Controls the value filter range                                                           |
+| `HeatmapColorMode`    | string                         | **Yes**  | Controls the color mode of the heatmap<br/>Possible values are: `opacity`, `scheme`.      |
+| `HeatmapColorOptions` | [object](#heatmapcoloroptions) | **Yes**  | Controls various color options                                                            |
+| `HeatmapColorScale`   | string                         | **Yes**  | Controls the color scale of the heatmap<br/>Possible values are: `linear`, `exponential`. |
+| `HeatmapLegend`       | [object](#heatmaplegend)       | **Yes**  | Controls legend options                                                                   |
+| `HeatmapTooltip`      | [object](#heatmaptooltip)      | **Yes**  | Controls tooltip options                                                                  |
+| `PanelFieldConfig`    | [object](#panelfieldconfig)    | **Yes**  |                                                                                           |
+| `PanelOptions`        | [object](#paneloptions)        | **Yes**  |                                                                                           |
+| `RowsHeatmapOptions`  | [object](#rowsheatmapoptions)  | **Yes**  | Controls frame rows options                                                               |
+| `YAxisConfig`         | [object](#yaxisconfig)         | **Yes**  | Configuration options for the yAxis                                                       |
+
+### CellValues
+
+Controls cell value options
+
+| Property   | Type   | Required | Description                                     |
+|------------|--------|----------|-------------------------------------------------|
+| `decimals` | number | No       | Controls the number of decimals for cell values |
+| `unit`     | string | No       | Controls the cell value unit                    |
+
+### ExemplarConfig
+
+Controls exemplar options
+
+| Property | Type   | Required | Description                            |
+|----------|--------|----------|----------------------------------------|
+| `color`  | string | **Yes**  | Sets the color of the exemplar markers |
+
+### FilterValueRange
+
+Controls the value filter range
+
+| Property | Type   | Required | Description                                                              |
+|----------|--------|----------|--------------------------------------------------------------------------|
+| `ge`     | number | No       | Sets the filter range to values greater than or equal to the given value |
+| `le`     | number | No       | Sets the filter range to values less than or equal to the given value    |
+
+### HeatmapColorOptions
+
+Controls various color options
+
+| Property   | Type    | Required | Description                                                                               |
+|------------|---------|----------|-------------------------------------------------------------------------------------------|
+| `exponent` | number  | **Yes**  | Controls the exponent when scale is set to exponential                                    |
+| `fill`     | string  | **Yes**  | Controls the color fill when in opacity mode                                              |
+| `reverse`  | boolean | **Yes**  | Reverses the color scheme                                                                 |
+| `scheme`   | string  | **Yes**  | Controls the color scheme used                                                            |
+| `steps`    | integer | **Yes**  | Controls the number of color steps<br/>Constraint: `>=2 & <=128`.                         |
+| `max`      | number  | No       | Sets the maximum value for the color scale                                                |
+| `min`      | number  | No       | Sets the minimum value for the color scale                                                |
+| `mode`     | string  | No       | Controls the color mode of the heatmap<br/>Possible values are: `opacity`, `scheme`.      |
+| `scale`    | string  | No       | Controls the color scale of the heatmap<br/>Possible values are: `linear`, `exponential`. |
+
+### HeatmapLegend
+
+Controls legend options
+
+| Property | Type    | Required | Description                     |
+|----------|---------|----------|---------------------------------|
+| `show`   | boolean | **Yes**  | Controls if the legend is shown |
+
+### HeatmapTooltip
+
+Controls tooltip options
+
+| Property     | Type    | Required | Description                                                    |
+|--------------|---------|----------|----------------------------------------------------------------|
+| `show`       | boolean | **Yes**  | Controls if the tooltip is shown                               |
+| `yHistogram` | boolean | No       | Controls if the tooltip shows a histogram of the y-axis values |
+
+### PanelFieldConfig
+
+It extends [HideableFieldConfig](#hideablefieldconfig).
+
+| Property            | Type                                                | Required | Description                                                                  |
+|---------------------|-----------------------------------------------------|----------|------------------------------------------------------------------------------|
+| `hideFrom`          | [HideSeriesConfig](#hideseriesconfig)               | No       | *(Inherited from [HideableFieldConfig](#hideablefieldconfig))*<br/>TODO docs |
+| `scaleDistribution` | [ScaleDistributionConfig](#scaledistributionconfig) | No       | TODO docs                                                                    |
+
+### HideSeriesConfig
+
+TODO docs
+
+| Property  | Type    | Required | Description |
+|-----------|---------|----------|-------------|
+| `legend`  | boolean | **Yes**  |             |
+| `tooltip` | boolean | **Yes**  |             |
+| `viz`     | boolean | **Yes**  |             |
+
+### HideableFieldConfig
+
+TODO docs
+
+| Property   | Type                                  | Required | Description |
+|------------|---------------------------------------|----------|-------------|
+| `hideFrom` | [HideSeriesConfig](#hideseriesconfig) | No       | TODO docs   |
+
+### ScaleDistributionConfig
+
+TODO docs
+
+| Property          | Type   | Required | Description                                                              |
+|-------------------|--------|----------|--------------------------------------------------------------------------|
+| `type`            | string | **Yes**  | TODO docs<br/>Possible values are: `linear`, `log`, `ordinal`, `symlog`. |
+| `linearThreshold` | number | No       |                                                                          |
+| `log`             | number | No       |                                                                          |
+
+### PanelOptions
+
+| Property       | Type                                                    | Required | Description                                                                                                     |
+|----------------|---------------------------------------------------------|----------|-----------------------------------------------------------------------------------------------------------------|
+| `color`        | [object](#color)                                        | **Yes**  | Controls the color options Default: `map[exponent:0.5 fill:dark-orange reverse:false scheme:Oranges steps:64]`. |
+| `exemplars`    | [ExemplarConfig](#exemplarconfig)                       | **Yes**  | Controls exemplar options                                                                                       |
+| `legend`       | [HeatmapLegend](#heatmaplegend)                         | **Yes**  | Controls legend options                                                                                         |
+| `showValue`    | string                                                  | **Yes**  | TODO docs<br/>Possible values are: `auto`, `never`, `always`.                                                   |
+| `tooltip`      | [HeatmapTooltip](#heatmaptooltip)                       | **Yes**  | Controls tooltip options                                                                                        |
+| `yAxis`        | [YAxisConfig](#yaxisconfig)                             | **Yes**  | Configuration options for the yAxis                                                                             |
+| `calculate`    | boolean                                                 | No       | Controls if the heatmap should be calculated from data Default: `false`.                                        |
+| `calculation`  | [HeatmapCalculationOptions](#heatmapcalculationoptions) | No       |                                                                                                                 |
+| `cellGap`      | integer                                                 | No       | Controls gap between cells Default: `1`.<br/>Constraint: `>=0 & <=25`.                                          |
+| `cellRadius`   | number                                                  | No       | Controls cell radius                                                                                            |
+| `cellValues`   | [object](#cellvalues)                                   | No       | Controls cell value unit Default: `map[]`.                                                                      |
+| `filterValues` | [object](#filtervalues)                                 | No       | Filters values between a given range Default: `map[le:1e-09]`.                                                  |
+| `rowsFrame`    | [RowsHeatmapOptions](#rowsheatmapoptions)               | No       | Controls frame rows options                                                                                     |
+
+### HeatmapCalculationOptions
+
+| Property   | Type                                                              | Required | Description |
+|------------|-------------------------------------------------------------------|----------|-------------|
+| `xBuckets` | [HeatmapCalculationBucketConfig](#heatmapcalculationbucketconfig) | No       |             |
+| `yBuckets` | [HeatmapCalculationBucketConfig](#heatmapcalculationbucketconfig) | No       |             |
+
+### HeatmapCalculationBucketConfig
+
+| Property | Type                                                | Required | Description                                              |
+|----------|-----------------------------------------------------|----------|----------------------------------------------------------|
+| `mode`   | string                                              | No       | Possible values are: `size`, `count`.                    |
+| `scale`  | [ScaleDistributionConfig](#scaledistributionconfig) | No       | TODO docs                                                |
+| `value`  | string                                              | No       | The number of buckets to use for the axis in the heatmap |
+
+### RowsHeatmapOptions
+
+Controls frame rows options
+
+| Property | Type   | Required | Description                                              |
+|----------|--------|----------|----------------------------------------------------------|
+| `layout` | string | No       | Possible values are: `le`, `ge`, `unknown`, `auto`.      |
+| `value`  | string | No       | Sets the name of the cell when not calculating from data |
+
+### YAxisConfig
+
+Configuration options for the yAxis
+
+It extends [AxisConfig](#axisconfig).
+
+| Property            | Type                                                | Required | Description                                                                                                                             |
+|---------------------|-----------------------------------------------------|----------|-----------------------------------------------------------------------------------------------------------------------------------------|
+| `axisCenteredZero`  | boolean                                             | No       | *(Inherited from [AxisConfig](#axisconfig))*                                                                                            |
+| `axisColorMode`     | string                                              | No       | *(Inherited from [AxisConfig](#axisconfig))*<br/>TODO docs<br/>Possible values are: `text`, `series`.                                   |
+| `axisGridShow`      | boolean                                             | No       | *(Inherited from [AxisConfig](#axisconfig))*                                                                                            |
+| `axisLabel`         | string                                              | No       | *(Inherited from [AxisConfig](#axisconfig))*                                                                                            |
+| `axisPlacement`     | string                                              | No       | *(Inherited from [AxisConfig](#axisconfig))*<br/>TODO docs<br/>Possible values are: `auto`, `top`, `right`, `bottom`, `left`, `hidden`. |
+| `axisSoftMax`       | number                                              | No       | *(Inherited from [AxisConfig](#axisconfig))*                                                                                            |
+| `axisSoftMin`       | number                                              | No       | *(Inherited from [AxisConfig](#axisconfig))*                                                                                            |
+| `axisWidth`         | number                                              | No       | *(Inherited from [AxisConfig](#axisconfig))*                                                                                            |
+| `decimals`          | number                                              | No       | Controls the number of decimals for yAxis values                                                                                        |
+| `max`               | number                                              | No       | Sets the maximum value for the yAxis                                                                                                    |
+| `min`               | number                                              | No       | Sets the minimum value for the yAxis                                                                                                    |
+| `reverse`           | boolean                                             | No       | Reverses the yAxis                                                                                                                      |
+| `scaleDistribution` | [ScaleDistributionConfig](#scaledistributionconfig) | No       | *(Inherited from [AxisConfig](#axisconfig))*<br/>TODO docs                                                                              |
+| `unit`              | string                                              | No       | Sets the yAxis unit                                                                                                                     |
+
+### AxisConfig
+
+TODO docs
+
+| Property            | Type                                                | Required | Description                                                                            |
+|---------------------|-----------------------------------------------------|----------|----------------------------------------------------------------------------------------|
+| `axisCenteredZero`  | boolean                                             | No       |                                                                                        |
+| `axisColorMode`     | string                                              | No       | TODO docs<br/>Possible values are: `text`, `series`.                                   |
+| `axisGridShow`      | boolean                                             | No       |                                                                                        |
+| `axisLabel`         | string                                              | No       |                                                                                        |
+| `axisPlacement`     | string                                              | No       | TODO docs<br/>Possible values are: `auto`, `top`, `right`, `bottom`, `left`, `hidden`. |
+| `axisSoftMax`       | number                                              | No       |                                                                                        |
+| `axisSoftMin`       | number                                              | No       |                                                                                        |
+| `axisWidth`         | number                                              | No       |                                                                                        |
+| `scaleDistribution` | [ScaleDistributionConfig](#scaledistributionconfig) | No       | TODO docs                                                                              |
+
+### CellValues
+
+Controls cell value unit
+
+| Property | Type | Required | Description |
+|----------|------|----------|-------------|
+
+### Color
+
+Controls the color options
+
+| Property | Type | Required | Description |
+|----------|------|----------|-------------|
+
+### FilterValues
+
+Filters values between a given range
+
+| Property | Type | Required | Description |
+|----------|------|----------|-------------|
+
+

packages/grafana-schema/src/common/common.gen.ts

@@ -109,6 +109,33 @@ export enum FrameGeometrySourceMode {
   Lookup = 'lookup',
 }
 
+export enum HeatmapCalculationMode {
+  Count = 'count',
+  Size = 'size',
+}
+
+export enum HeatmapCellLayout {
+  auto = 'auto',
+  ge = 'ge',
+  le = 'le',
+  unknown = 'unknown',
+}
+
+export interface HeatmapCalculationBucketConfig {
+  /**
+   * Sets the bucket calculation mode
+   */
+  mode?: HeatmapCalculationMode;
+  /**
+   * Controls the scale of the buckets
+   */
+  scale?: ScaleDistributionConfig;
+  /**
+   * The number of buckets to use for the axis in the heatmap
+   */
+  value?: string;
+}
+
 export enum LogsSortOrder {
   Ascending = 'Ascending',
   Descending = 'Descending',
@@ -702,6 +729,17 @@ export interface FrameGeometrySource {
   wkt?: string;
 }
 
+export interface HeatmapCalculationOptions {
+  /**
+   * The number of buckets to use for the xAxis in the heatmap
+   */
+  xBuckets?: HeatmapCalculationBucketConfig;
+  /**
+   * The number of buckets to use for the yAxis in the heatmap
+   */
+  yBuckets?: HeatmapCalculationBucketConfig;
+}
+
 export enum LogsDedupStrategy {
   exact = 'exact',
   none = 'none',

packages/grafana-schema/src/common/heatmap.cue

@@ -0,0 +1,21 @@
+package common
+
+HeatmapCalculationMode: "size" | "count" @cuetsy(kind="enum")
+
+HeatmapCellLayout: "le" | "ge" | "unknown" | "auto" @cuetsy(kind="enum",memberNames="le|ge|unknown|auto")
+
+HeatmapCalculationBucketConfig: {
+  // Sets the bucket calculation mode
+  mode?: HeatmapCalculationMode
+  // The number of buckets to use for the axis in the heatmap
+  value?: string
+  // Controls the scale of the buckets
+  scale?: ScaleDistributionConfig
+} @cuetsy(kind="interface")
+
+HeatmapCalculationOptions: {
+  // The number of buckets to use for the xAxis in the heatmap
+  xBuckets?: HeatmapCalculationBucketConfig
+  // The number of buckets to use for the yAxis in the heatmap
+  yBuckets?: HeatmapCalculationBucketConfig
+} @cuetsy(kind="interface")

pkg/kindsys/report.json

@@ -746,6 +746,30 @@
       "pluralName": "GraphOldPanelCfgs",
       "schemaInterface": "PanelCfg"
     },
+    "heatmappanelcfg": {
+      "category": "composable",
+      "codeowners": [
+        "grafana/dataviz-squad"
+      ],
+      "currentVersion": [
+        0,
+        0
+      ],
+      "grafanaMaturityCount": 0,
+      "lineageIsGroup": true,
+      "links": {
+        "docs": "https://grafana.com/docs/grafana/next/developers/kinds/composable/heatmappanelcfg/schema-reference",
+        "go": "n/a",
+        "schema": "https://github.com/grafana/grafana/tree/main/public/app/plugins/panel/heatmap/panelcfg.cue",
+        "ts": "https://github.com/grafana/grafana/tree/main/public/app/plugins/panel/heatmap/panelcfg.gen.ts"
+      },
+      "machineName": "heatmappanelcfg",
+      "maturity": "merged",
+      "name": "HeatmapPanelCfg",
+      "pluralMachineName": "heatmappanelcfgs",
+      "pluralName": "HeatmapPanelCfgs",
+      "schemaInterface": "PanelCfg"
+    },
     "histogrampanelcfg": {
       "category": "composable",
       "codeowners": [
@@ -1920,6 +1944,7 @@
           "graphitedataquery",
           "graphitedatasourcecfg",
           "grapholdpanelcfg",
+          "heatmappanelcfg",
           "histogrampanelcfg",
           "iconpanelcfg",
           "jaegerdataquery",
@@ -1958,7 +1983,7 @@
           "zipkindataquery",
           "zipkindatasourcecfg"
         ],
-        "count": 65
+        "count": 66
       },
       "core": {
         "name": "core",
@@ -2024,13 +2049,14 @@
           "alertgroupspanelcfg",
           "azuremonitordataquery",
           "cloudwatchdataquery",
+          "heatmappanelcfg",
           "playlist",
           "preferences",
           "publicdashboard",
           "serviceaccount",
           "team"
         ],
-        "count": 8
+        "count": 9
       },
       "planned": {
         "name": "planned",

pkg/plugins/pfs/corelist/corelist_load_gen.go

@@ -63,6 +63,7 @@ func corePlugins(rt *thema.Runtime) []pfs.ParsedPlugin {
 		parsePluginOrPanic("public/app/plugins/panel/geomap", "geomap", rt),
 		parsePluginOrPanic("public/app/plugins/panel/gettingstarted", "gettingstarted", rt),
 		parsePluginOrPanic("public/app/plugins/panel/graph", "graph", rt),
+		parsePluginOrPanic("public/app/plugins/panel/heatmap", "heatmap", rt),
 		parsePluginOrPanic("public/app/plugins/panel/histogram", "histogram", rt),
 		parsePluginOrPanic("public/app/plugins/panel/icon", "icon", rt),
 		parsePluginOrPanic("public/app/plugins/panel/live", "live", rt),

public/app/features/transformers/calculateHeatmap/editor/AxisEditor.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 
 import { SelectableValue, StandardEditorProps } from '@grafana/data';
+import { HeatmapCalculationBucketConfig, HeatmapCalculationMode } from '@grafana/schema';
 import { HorizontalGroup, Input, RadioButtonGroup, ScaleDistribution } from '@grafana/ui';
 
-import { HeatmapCalculationBucketConfig, HeatmapCalculationMode } from '../models.gen';
-
 const modeOptions: Array<SelectableValue<HeatmapCalculationMode>> = [
   {
     label: 'Size',

public/app/features/transformers/calculateHeatmap/editor/helper.ts

@@ -1,9 +1,7 @@
 import { PanelOptionsEditorBuilder } from '@grafana/data';
-import { ScaleDistribution } from '@grafana/schema';
+import { ScaleDistribution, HeatmapCalculationMode, HeatmapCalculationOptions } from '@grafana/schema';
 import { ScaleDistributionEditor } from '@grafana/ui/src/options/builder';
 
-import { HeatmapCalculationMode, HeatmapCalculationOptions } from '../models.gen';
-
 import { AxisEditor } from './AxisEditor';
 
 export function addHeatmapCalculationOptions(

public/app/features/transformers/calculateHeatmap/heatmap.test.ts

@@ -1,8 +1,8 @@
 import { FieldType } from '@grafana/data';
 import { toDataFrame } from '@grafana/data/src/dataframe/processDataFrame';
+import { HeatmapCalculationOptions } from '@grafana/schema';
 
 import { rowsToCellsHeatmap, calculateHeatmapFromData } from './heatmap';
-import { HeatmapCalculationOptions } from './models.gen';
 
 describe('Heatmap transformer', () => {
   it('calculate heatmap from input data', async () => {

public/app/features/transformers/calculateHeatmap/heatmap.ts

@@ -16,9 +16,13 @@ import {
   durationToMilliseconds,
   parseDuration,
 } from '@grafana/data';
-import { ScaleDistribution } from '@grafana/schema';
+import {
+  ScaleDistribution,
+  HeatmapCellLayout,
+  HeatmapCalculationMode,
+  HeatmapCalculationOptions,
+} from '@grafana/schema';
 
-import { HeatmapCellLayout, HeatmapCalculationMode, HeatmapCalculationOptions } from './models.gen';
 import { niceLinearIncrs, niceTimeIncrs } from './utils';
 
 export interface HeatmapTransformerOptions extends HeatmapCalculationOptions {

public/app/features/transformers/calculateHeatmap/models.gen.ts

@@ -1,24 +0,0 @@
-import { ScaleDistributionConfig } from '@grafana/schema';
-
-export enum HeatmapCalculationMode {
-  Size = 'size', // When exponential, this is "splitFactor"
-  Count = 'count',
-}
-
-export const enum HeatmapCellLayout {
-  le = 'le',
-  ge = 'ge',
-  unknown = 'unknown', // unknown
-  auto = 'auto', // becomes unknown
-}
-
-export interface HeatmapCalculationBucketConfig {
-  mode?: HeatmapCalculationMode;
-  value?: string; // number or interval string ie 10s, or log "split" divisor
-  scale?: ScaleDistributionConfig;
-}
-
-export interface HeatmapCalculationOptions {
-  xBuckets?: HeatmapCalculationBucketConfig;
-  yBuckets?: HeatmapCalculationBucketConfig;
-}

public/app/plugins/gen.go

@@ -23,7 +23,6 @@ import (
 
 var skipPlugins = map[string]bool{
 	"canvas":      true,
-	"heatmap":     true,
 	"candlestick": true,
 	"table":       true,
 	"timeseries":  true,

public/app/plugins/panel/heatmap/HeatmapHoverView.tsx

@@ -9,10 +9,10 @@ import {
   LinkModel,
   TimeRange,
 } from '@grafana/data';
+import { HeatmapCellLayout } from '@grafana/schema';
 import { LinkButton, VerticalGroup } from '@grafana/ui';
 import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
 import { isHeatmapCellsDense, readHeatmapRowsCustomMeta } from 'app/features/transformers/calculateHeatmap/heatmap';
-import { HeatmapCellLayout } from 'app/features/transformers/calculateHeatmap/models.gen';
 
 import { DataHoverView } from '../geomap/components/DataHoverView';
 

public/app/plugins/panel/heatmap/HeatmapPanel.tsx

@@ -20,8 +20,8 @@ import { isHeatmapCellsDense, readHeatmapRowsCustomMeta } from 'app/features/tra
 
 import { HeatmapHoverView } from './HeatmapHoverView';
 import { prepareHeatmapData } from './fields';
-import { PanelOptions } from './models.gen';
 import { quantizeScheme } from './palettes';
+import { PanelOptions } from './types';
 import { HeatmapHoverEvent, prepConfig } from './utils';
 
 interface HeatmapPanelProps extends PanelProps<PanelOptions> {}

public/app/plugins/panel/heatmap/fields.test.ts

@@ -1,6 +1,6 @@
 import { createTheme } from '@grafana/data';
 
-import { PanelOptions } from './models.gen';
+import { PanelOptions } from './types';
 
 const theme = createTheme();
 

public/app/plugins/panel/heatmap/fields.ts

@@ -12,15 +12,15 @@ import {
   ValueFormatter,
   ValueLinkConfig,
 } from '@grafana/data';
+import { HeatmapCellLayout } from '@grafana/schema';
 import {
   calculateHeatmapFromData,
   isHeatmapCellsDense,
   readHeatmapRowsCustomMeta,
   rowsToCellsHeatmap,
 } from 'app/features/transformers/calculateHeatmap/heatmap';
-import { HeatmapCellLayout } from 'app/features/transformers/calculateHeatmap/models.gen';
 
-import { CellValues, PanelOptions } from './models.gen';
+import { CellValues, PanelOptions } from './types';
 import { boundedMinMax } from './utils';
 
 export interface HeatmapData {

public/app/plugins/panel/heatmap/migrations.ts

@@ -1,13 +1,15 @@
 import { FieldConfigSource, PanelModel, PanelTypeChangedHandler } from '@grafana/data';
-import { AxisPlacement, ScaleDistribution, VisibilityMode } from '@grafana/schema';
 import {
+  AxisPlacement,
+  ScaleDistribution,
+  VisibilityMode,
   HeatmapCellLayout,
   HeatmapCalculationMode,
   HeatmapCalculationOptions,
-} from 'app/features/transformers/calculateHeatmap/models.gen';
+} from '@grafana/schema';
 
-import { PanelOptions, defaultPanelOptions, HeatmapColorMode } from './models.gen';
 import { colorSchemes } from './palettes';
+import { PanelOptions, defaultPanelOptions, HeatmapColorMode } from './types';
 
 /** Called when the version number changes */
 export const heatmapMigrationHandler = (panel: PanelModel): Partial<PanelOptions> => {

public/app/plugins/panel/heatmap/models.gen.ts

@@ -1,133 +0,0 @@
-//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-// NOTE: This file will be auto generated from models.cue
-// It is currenty hand written but will serve as the target for cuetsy
-//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
-import { AxisConfig, AxisPlacement, HideableFieldConfig, ScaleDistributionConfig, VisibilityMode } from '@grafana/schema';
-import { HeatmapCellLayout, HeatmapCalculationOptions } from 'app/features/transformers/calculateHeatmap/models.gen';
-
-export const modelVersion = Object.freeze([1, 0]);
-
-export enum HeatmapColorMode {
-  Opacity = 'opacity',
-  Scheme = 'scheme',
-}
-
-export enum HeatmapColorScale {
-  Linear = 'linear',
-  Exponential = 'exponential',
-}
-
-export interface HeatmapColorOptions {
-  mode: HeatmapColorMode;
-  scheme: string; // when in scheme mode -- the d3 scheme name
-  fill: string; // when opacity mode, the target color
-  scale: HeatmapColorScale; // for opacity mode
-  exponent: number; // when scale== sqrt
-  steps: number; // 2-128
-
-  reverse: boolean;
-
-  // Clamp the colors to the value range
-  min?: number;
-  max?: number;
-}
-export interface YAxisConfig extends AxisConfig {
-  unit?: string;
-  reverse?: boolean;
-  decimals?: number;
-  // Only used when the axis is not ordinal
-  min?: number;
-  max?: number;
-}
-
-export interface CellValues {
-  unit?: string;
-  decimals?: number;
-}
-
-export interface FilterValueRange {
-  le?: number;
-  ge?: number;
-}
-
-export interface HeatmapTooltip {
-  show: boolean;
-  yHistogram?: boolean;
-}
-export interface HeatmapLegend {
-  show: boolean;
-}
-
-export interface ExemplarConfig {
-  color: string;
-}
-
-export interface RowsHeatmapOptions {
-  value?: string; // value field name
-  layout?: HeatmapCellLayout;
-}
-
-export interface PanelOptions {
-  calculate?: boolean;
-  calculation?: HeatmapCalculationOptions;
-
-  color: HeatmapColorOptions;
-  filterValues?: FilterValueRange; // was hideZeroBuckets
-  rowsFrame?: RowsHeatmapOptions;
-  showValue: VisibilityMode;
-
-  cellGap?: number; // was cardPadding
-  cellRadius?: number; // was cardRadius (not used, but migrated from angular)
-  cellValues?: CellValues;
-
-  yAxis: YAxisConfig;
-
-  legend: HeatmapLegend;
-
-  tooltip: HeatmapTooltip;
-  exemplars: ExemplarConfig;
-}
-
-export const defaultPanelOptions: PanelOptions = {
-  calculate: false,
-  color: {
-    mode: HeatmapColorMode.Scheme,
-    scheme: 'Oranges',
-    fill: 'dark-orange',
-    scale: HeatmapColorScale.Exponential,
-    reverse: false,
-    exponent: 0.5,
-    steps: 64,
-  },
-  rowsFrame: {
-    layout: HeatmapCellLayout.auto,
-  },
-  yAxis: {
-    axisPlacement: AxisPlacement.Left,
-  },
-  cellValues: {
-
-  },
-  showValue: VisibilityMode.Auto,
-  tooltip: {
-    show: true,
-    yHistogram: false,
-  },
-  legend: {
-    show: true,
-  },
-  exemplars: {
-    color: 'rgba(255,0,255,0.7)',
-  },
-  filterValues: {
-    le: 1e-9,
-  },
-  cellGap: 1,
-};
-
-export interface PanelFieldConfig extends HideableFieldConfig {
-  scaleDistribution?: ScaleDistributionConfig;
-}
-
-export const defaultPanelFieldConfig: PanelFieldConfig = {};

public/app/plugins/panel/heatmap/module.tsx

@@ -2,19 +2,24 @@ import React from 'react';
 
 import { FieldConfigProperty, FieldType, identityOverrideProcessor, PanelData, PanelPlugin } from '@grafana/data';
 import { config } from '@grafana/runtime';
-import { AxisPlacement, GraphFieldConfig, ScaleDistribution, ScaleDistributionConfig } from '@grafana/schema';
+import {
+  AxisPlacement,
+  GraphFieldConfig,
+  ScaleDistribution,
+  ScaleDistributionConfig,
+  HeatmapCellLayout,
+} from '@grafana/schema';
 import { addHideFrom, ScaleDistributionEditor } from '@grafana/ui/src/options/builder';
 import { ColorScale } from 'app/core/components/ColorScale/ColorScale';
 import { addHeatmapCalculationOptions } from 'app/features/transformers/calculateHeatmap/editor/helper';
 import { readHeatmapRowsCustomMeta } from 'app/features/transformers/calculateHeatmap/heatmap';
-import { HeatmapCellLayout } from 'app/features/transformers/calculateHeatmap/models.gen';
 
 import { HeatmapPanel } from './HeatmapPanel';
 import { prepareHeatmapData } from './fields';
 import { heatmapChangedHandler, heatmapMigrationHandler } from './migrations';
-import { PanelOptions, defaultPanelOptions, HeatmapColorMode, HeatmapColorScale } from './models.gen';
 import { colorSchemes, quantizeScheme } from './palettes';
 import { HeatmapSuggestionsSupplier } from './suggestions';
+import { PanelOptions, defaultPanelOptions, HeatmapColorMode, HeatmapColorScale } from './types';
 
 export const plugin = new PanelPlugin<PanelOptions, GraphFieldConfig>(HeatmapPanel)
   .useFieldConfig({

public/app/plugins/panel/heatmap/palettes.ts

@@ -4,7 +4,7 @@ import tinycolor from 'tinycolor2';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
-import { HeatmapColorOptions, defaultPanelOptions, HeatmapColorMode, HeatmapColorScale } from './models.gen';
+import { HeatmapColorOptions, defaultPanelOptions, HeatmapColorMode, HeatmapColorScale } from './types';
 
 // https://observablehq.com/@d3/color-schemes?collection=@d3/d3-scale-chromatic
 

public/app/plugins/panel/heatmap/panelcfg.cue

@@ -14,19 +14,149 @@
 
 package grafanaplugin
 
+import (
+	ui "github.com/grafana/grafana/packages/grafana-schema/src/common"
+)
+
 composableKinds: PanelCfg: {
 	lineage: {
 		seqs: [
 			{
 				schemas: [
 					{
+						// Controls the color mode of the heatmap
+						HeatmapColorMode: "opacity" | "scheme" @cuetsy(kind="enum")
+						// Controls the color scale of the heatmap
+						HeatmapColorScale: "linear" | "exponential" @cuetsy(kind="enum")
+						// Controls various color options
+						HeatmapColorOptions: {
+							// Sets the color mode
+							mode?: HeatmapColorMode // TODO: remove optional when https://github.com/grafana/cuetsy/issues/74 is fixed
+							// Controls the color scheme used
+							scheme: string
+							// Controls the color fill when in opacity mode
+							fill: string
+							// Controls the color scale
+							scale?: HeatmapColorScale // TODO: remove optional when https://github.com/grafana/cuetsy/issues/74 is fixed
+							// Controls the exponent when scale is set to exponential
+							exponent: float32
+							// Controls the number of color steps
+							steps: uint8 & >=2 & <=128
+							// Reverses the color scheme
+							reverse: bool
+							// Sets the minimum value for the color scale
+							min?: float32
+							// Sets the maximum value for the color scale
+							max?: float32
+						} @cuetsy(kind="interface")
+						// Configuration options for the yAxis
+						YAxisConfig: {
+							ui.AxisConfig
+
+							// Sets the yAxis unit
+							unit?: string
+							// Reverses the yAxis
+							reverse?: bool
+							// Controls the number of decimals for yAxis values
+							decimals?: float32
+							// Sets the minimum value for the yAxis
+							min?: float32
+							// Sets the maximum value for the yAxis
+							max?: float32
+						} @cuetsy(kind="interface")
+						// Controls cell value options
+						CellValues: {
+							// Controls the cell value unit
+							unit?: string
+							// Controls the number of decimals for cell values
+							decimals?: float32
+						} @cuetsy(kind="interface")
+						// Controls the value filter range
+						FilterValueRange: {
+							// Sets the filter range to values less than or equal to the given value
+							le?: float32
+							// Sets the filter range to values greater than or equal to the given value
+							ge?: float32
+						} @cuetsy(kind="interface")
+						// Controls tooltip options
+						HeatmapTooltip: {
+							// Controls if the tooltip is shown
+							show: bool
+							// Controls if the tooltip shows a histogram of the y-axis values
+							yHistogram?: bool
+						} @cuetsy(kind="interface")
+						// Controls legend options
+						HeatmapLegend: {
+							// Controls if the legend is shown
+							show: bool
+						} @cuetsy(kind="interface")
+						// Controls exemplar options
+						ExemplarConfig: {
+							// Sets the color of the exemplar markers
+							color: string
+						} @cuetsy(kind="interface")
+						// Controls frame rows options
+						RowsHeatmapOptions: {
+							// Sets the name of the cell when not calculating from data
+							value?: string
+							// Controls tick alignment when not calculating from data
+							layout?: ui.HeatmapCellLayout
+						} @cuetsy(kind="interface")
 						PanelOptions: {
-							// anything for now
-							...
+							// Controls if the heatmap should be calculated from data
+							calculate?: bool | *false
+							// Calculation options for the heatmap
+							calculation?: ui.HeatmapCalculationOptions
+							// Controls the color options
+							color: HeatmapColorOptions | *{
+								// mode:     HeatmapColorMode // TODO: fix after remove when https://github.com/grafana/cuetsy/issues/74 is fixed
+								scheme: "Oranges"
+								fill:   "dark-orange"
+								// scale:    HeatmapColorScale // TODO: fix after remove when https://github.com/grafana/cuetsy/issues/74 is fixed
+								reverse:  false
+								exponent: 0.5
+								steps:    64
+							}
+							// Filters values between a given range
+							filterValues?: FilterValueRange | *{
+								le: 1e-9
+							}
+							// Controls tick alignment and value name when not calculating from data
+							rowsFrame?: RowsHeatmapOptions
+							// | *{
+							// 	layout: ui.HeatmapCellLayout & "auto" // TODO: fix after remove when https://github.com/grafana/cuetsy/issues/74 is fixed
+							// }
+							// Controls the display of the value in the cell
+							showValue: ui.VisibilityMode | *"auto"
+							// Controls gap between cells
+							cellGap?: uint8 & >=0 & <=25 | *1
+							// Controls cell radius
+							cellRadius?: float32
+							// Controls cell value unit
+							cellValues?: CellValues | *{}
+							// Controls yAxis placement
+							yAxis: YAxisConfig
+							// | *{
+							// 	axisPlacement: ui.AxisPlacement & "left" // TODO: fix after remove when https://github.com/grafana/cuetsy/issues/74 is fixed
+							// }
+							// Controls legend options
+							legend: HeatmapLegend | *{
+								show: true
+							}
+							// Controls tooltip options
+							tooltip: HeatmapTooltip | *{
+								show:       true
+								yHistogram: false
+							}
+							// Controls exemplar options
+							exemplars: ExemplarConfig | *{
+								color: "rgba(255,0,255,0.7)"
+							}
 						} @cuetsy(kind="interface")
 						PanelFieldConfig: {
-							// anything for now
-							...
+							ui.HideableFieldConfig
+
+							scaleDistribution?: ui.ScaleDistributionConfig
 						} @cuetsy(kind="interface")
 					},
 				]

public/app/plugins/panel/heatmap/panelcfg.gen.ts

@@ -0,0 +1,271 @@
+// Code generated - EDITING IS FUTILE. DO NOT EDIT.
+//
+// Generated by:
+//     public/app/plugins/gen.go
+// Using jennies:
+//     TSTypesJenny
+//     PluginTSTypesJenny
+//
+// Run 'make gen-cue' from repository root to regenerate.
+
+import * as ui from '@grafana/schema';
+
+export const PanelCfgModelVersion = Object.freeze([0, 0]);
+
+/**
+ * Controls the color mode of the heatmap
+ */
+export enum HeatmapColorMode {
+  Opacity = 'opacity',
+  Scheme = 'scheme',
+}
+
+/**
+ * Controls the color scale of the heatmap
+ */
+export enum HeatmapColorScale {
+  Exponential = 'exponential',
+  Linear = 'linear',
+}
+
+/**
+ * Controls various color options
+ */
+export interface HeatmapColorOptions {
+  /**
+   * Controls the exponent when scale is set to exponential
+   */
+  exponent: number;
+  /**
+   * Controls the color fill when in opacity mode
+   */
+  fill: string;
+  /**
+   * Sets the maximum value for the color scale
+   */
+  max?: number;
+  /**
+   * Sets the minimum value for the color scale
+   */
+  min?: number;
+  /**
+   * Sets the color mode
+   */
+  mode?: HeatmapColorMode;
+  /**
+   * Reverses the color scheme
+   */
+  reverse: boolean;
+  /**
+   * Controls the color scale
+   */
+  scale?: HeatmapColorScale;
+  /**
+   * Controls the color scheme used
+   */
+  scheme: string;
+  /**
+   * Controls the number of color steps
+   */
+  steps: number;
+}
+
+/**
+ * Configuration options for the yAxis
+ */
+export interface YAxisConfig extends ui.AxisConfig {
+  /**
+   * Controls the number of decimals for yAxis values
+   */
+  decimals?: number;
+  /**
+   * Sets the maximum value for the yAxis
+   */
+  max?: number;
+  /**
+   * Sets the minimum value for the yAxis
+   */
+  min?: number;
+  /**
+   * Reverses the yAxis
+   */
+  reverse?: boolean;
+  /**
+   * Sets the yAxis unit
+   */
+  unit?: string;
+}
+
+/**
+ * Controls cell value options
+ */
+export interface CellValues {
+  /**
+   * Controls the number of decimals for cell values
+   */
+  decimals?: number;
+  /**
+   * Controls the cell value unit
+   */
+  unit?: string;
+}
+
+/**
+ * Controls the value filter range
+ */
+export interface FilterValueRange {
+  /**
+   * Sets the filter range to values greater than or equal to the given value
+   */
+  ge?: number;
+  /**
+   * Sets the filter range to values less than or equal to the given value
+   */
+  le?: number;
+}
+
+/**
+ * Controls tooltip options
+ */
+export interface HeatmapTooltip {
+  /**
+   * Controls if the tooltip is shown
+   */
+  show: boolean;
+  /**
+   * Controls if the tooltip shows a histogram of the y-axis values
+   */
+  yHistogram?: boolean;
+}
+
+/**
+ * Controls legend options
+ */
+export interface HeatmapLegend {
+  /**
+   * Controls if the legend is shown
+   */
+  show: boolean;
+}
+
+/**
+ * Controls exemplar options
+ */
+export interface ExemplarConfig {
+  /**
+   * Sets the color of the exemplar markers
+   */
+  color: string;
+}
+
+/**
+ * Controls frame rows options
+ */
+export interface RowsHeatmapOptions {
+  /**
+   * Controls tick alignment when not calculating from data
+   */
+  layout?: ui.HeatmapCellLayout;
+  /**
+   * Sets the name of the cell when not calculating from data
+   */
+  value?: string;
+}
+
+export interface PanelOptions {
+  /**
+   * Controls if the heatmap should be calculated from data
+   */
+  calculate?: boolean;
+  /**
+   * Calculation options for the heatmap
+   */
+  calculation?: ui.HeatmapCalculationOptions;
+  /**
+   * Controls gap between cells
+   */
+  cellGap?: number;
+  /**
+   * Controls cell radius
+   */
+  cellRadius?: number;
+  /**
+   * Controls cell value unit
+   */
+  cellValues?: CellValues;
+  /**
+   * Controls the color options
+   */
+  color: HeatmapColorOptions;
+  /**
+   * Controls exemplar options
+   */
+  exemplars: ExemplarConfig;
+  /**
+   * Filters values between a given range
+   */
+  filterValues?: FilterValueRange;
+  /**
+   * | *{
+   * 	axisPlacement: ui.AxisPlacement & "left" // TODO: fix after remove when https://github.com/grafana/cuetsy/issues/74 is fixed
+   * }
+   * Controls legend options
+   */
+  legend: HeatmapLegend;
+  /**
+   * Controls tick alignment and value name when not calculating from data
+   */
+  rowsFrame?: RowsHeatmapOptions;
+  /**
+   * | *{
+   * 	layout: ui.HeatmapCellLayout & "auto" // TODO: fix after remove when https://github.com/grafana/cuetsy/issues/74 is fixed
+   * }
+   * Controls the display of the value in the cell
+   */
+  showValue: ui.VisibilityMode;
+  /**
+   * Controls tooltip options
+   */
+  tooltip: HeatmapTooltip;
+  /**
+   * Controls yAxis placement
+   */
+  yAxis: YAxisConfig;
+}
+
+export const defaultPanelOptions: Partial<PanelOptions> = {
+  calculate: false,
+  cellGap: 1,
+  cellValues: {},
+  color: {
+    /**
+     * mode:     HeatmapColorMode // TODO: fix after remove when https://github.com/grafana/cuetsy/issues/74 is fixed
+     */
+    scheme: 'Oranges',
+    fill: 'dark-orange',
+    /**
+     * scale:    HeatmapColorScale // TODO: fix after remove when https://github.com/grafana/cuetsy/issues/74 is fixed
+     */
+    reverse: false,
+    exponent: 0.5,
+    steps: 64,
+  },
+  exemplars: {
+    color: 'rgba(255,0,255,0.7)',
+  },
+  filterValues: {
+    le: 1e-09,
+  },
+  legend: {
+    show: true,
+  },
+  showValue: ui.VisibilityMode.Auto,
+  tooltip: {
+    show: true,
+    yHistogram: false,
+  },
+};
+
+export interface PanelFieldConfig extends ui.HideableFieldConfig {
+  scaleDistribution?: ui.ScaleDistributionConfig;
+}

public/app/plugins/panel/heatmap/suggestions.ts

@@ -2,7 +2,7 @@ import { VisualizationSuggestionsBuilder } from '@grafana/data';
 import { config } from '@grafana/runtime';
 
 import { prepareHeatmapData } from './fields';
-import { PanelOptions, defaultPanelOptions } from './models.gen';
+import { PanelOptions, defaultPanelOptions } from './types';
 
 export class HeatmapSuggestionsSupplier {
   getSuggestionsForData(builder: VisualizationSuggestionsBuilder) {

public/app/plugins/panel/heatmap/types.ts

@@ -0,0 +1,17 @@
+export * from './panelcfg.gen';
+
+import { AxisPlacement, HeatmapCellLayout } from '@grafana/schema';
+
+import {
+  defaultPanelOptions as defaultPanelOptionsGen,
+  HeatmapColorMode,
+  HeatmapColorScale,
+  PanelOptions,
+} from './panelcfg.gen';
+
+export const defaultPanelOptions = {
+  ...defaultPanelOptionsGen,
+  color: { ...defaultPanelOptionsGen.color, mode: HeatmapColorMode.Scheme, scale: HeatmapColorScale.Exponential },
+  yAxis: { ...defaultPanelOptionsGen.yAxis, axisPlacement: AxisPlacement.Left },
+  rowsFrame: { ...defaultPanelOptionsGen.rowsFrame, layout: HeatmapCellLayout.auto },
+} as PanelOptions;

public/app/plugins/panel/heatmap/utils.ts

@@ -16,15 +16,14 @@ import {
   TimeRange,
   FieldType,
 } from '@grafana/data';
-import { AxisPlacement, ScaleDirection, ScaleDistribution, ScaleOrientation } from '@grafana/schema';
+import { AxisPlacement, ScaleDirection, ScaleDistribution, ScaleOrientation, HeatmapCellLayout } from '@grafana/schema';
 import { UPlotConfigBuilder } from '@grafana/ui';
 import { isHeatmapCellsDense, readHeatmapRowsCustomMeta } from 'app/features/transformers/calculateHeatmap/heatmap';
-import { HeatmapCellLayout } from 'app/features/transformers/calculateHeatmap/models.gen';
 
 import { pointWithin, Quadtree, Rect } from '../barchart/quadtree';
 
 import { HeatmapData } from './fields';
-import { PanelFieldConfig, YAxisConfig } from './models.gen';
+import { PanelFieldConfig, YAxisConfig } from './types';
 
 interface PathbuilderOpts {
   each: (u: uPlot, seriesIdx: number, dataIdx: number, lft: number, top: number, wid: number, hgt: number) => void;