diff --git a/docs/sources/developers/kinds/composable/canvas/panelcfg/schema-reference.md b/docs/sources/developers/kinds/composable/canvas/panelcfg/schema-reference.md index 90b7312b126..dbf9ed2b7ec 100644 --- a/docs/sources/developers/kinds/composable/canvas/panelcfg/schema-reference.md +++ b/docs/sources/developers/kinds/composable/canvas/panelcfg/schema-reference.md @@ -9,17 +9,17 @@ labels: - oss title: CanvasPanelCfg kind --- + > Both documentation generation and kinds schemas are in active development and subject to change without prior notice. ## CanvasPanelCfg #### Maturity: [experimental](../../../maturity/#experimental) + #### Version: 0.0 - - | Property | Type | Required | Default | Description | -|-------------------------|----------------------------------|----------|---------|-----------------------------------------------------------------------| +| ----------------------- | -------------------------------- | -------- | ------- | --------------------------------------------------------------------- | | `BackgroundConfig` | [object](#backgroundconfig) | **Yes** | | | | `BackgroundImageSize` | string | **Yes** | | Possible values are: `original`, `contain`, `cover`, `fill`, `tile`. | | `CanvasConnection` | [object](#canvasconnection) | **Yes** | | | @@ -37,7 +37,7 @@ title: CanvasPanelCfg kind ### BackgroundConfig | Property | Type | Required | Default | Description | -|----------|-----------------------------------------------------|----------|---------|----------------------------------------------------------------------| +| -------- | --------------------------------------------------- | -------- | ------- | -------------------------------------------------------------------- | | `color` | [ColorDimensionConfig](#colordimensionconfig) | No | | | | `image` | [ResourceDimensionConfig](#resourcedimensionconfig) | No | | Links to a resource (image/svg path) | | `size` | string | No | | Possible values are: `original`, `contain`, `cover`, `fill`, `tile`. | @@ -47,14 +47,14 @@ title: CanvasPanelCfg kind It extends [BaseDimensionConfig](#basedimensionconfig). | Property | Type | Required | Default | Description | -|----------|--------|----------|---------|--------------------------------------------------------------------------------------------------------------| -| `field` | string | No | | *(Inherited from [BaseDimensionConfig](#basedimensionconfig))*
fixed: T -- will be added by each element | +| -------- | ------ | -------- | ------- | ------------------------------------------------------------------------------------------------------------ | +| `field` | string | No | | _(Inherited from [BaseDimensionConfig](#basedimensionconfig))_
fixed: T -- will be added by each element | | `fixed` | string | No | | | ### BaseDimensionConfig | Property | Type | Required | Default | Description | -|----------|--------|----------|---------|-------------------------------------------| +| -------- | ------ | -------- | ------- | ----------------------------------------- | | `field` | string | No | | fixed: T -- will be added by each element | ### ResourceDimensionConfig @@ -64,15 +64,15 @@ Links to a resource (image/svg path) It extends [BaseDimensionConfig](#basedimensionconfig). | Property | Type | Required | Default | Description | -|----------|--------|----------|---------|--------------------------------------------------------------------------------------------------------------| +| -------- | ------ | -------- | ------- | ------------------------------------------------------------------------------------------------------------ | | `mode` | string | **Yes** | | Possible values are: `fixed`, `field`, `mapping`. | -| `field` | string | No | | *(Inherited from [BaseDimensionConfig](#basedimensionconfig))*
fixed: T -- will be added by each element | +| `field` | string | No | | _(Inherited from [BaseDimensionConfig](#basedimensionconfig))_
fixed: T -- will be added by each element | | `fixed` | string | No | | | ### CanvasConnection | Property | Type | Required | Default | Description | -|--------------|-------------------------------------------------|----------|---------|----------------------------------| +| ------------ | ----------------------------------------------- | -------- | ------- | -------------------------------- | | `path` | string | **Yes** | | Possible values are: `straight`. | | `source` | [ConnectionCoordinates](#connectioncoordinates) | **Yes** | | | | `target` | [ConnectionCoordinates](#connectioncoordinates) | **Yes** | | | @@ -83,7 +83,7 @@ It extends [BaseDimensionConfig](#basedimensionconfig). ### ConnectionCoordinates | Property | Type | Required | Default | Description | -|----------|--------|----------|---------|-------------| +| -------- | ------ | -------- | ------- | ----------- | | `x` | number | **Yes** | | | | `y` | number | **Yes** | | | @@ -92,17 +92,17 @@ It extends [BaseDimensionConfig](#basedimensionconfig). It extends [BaseDimensionConfig](#basedimensionconfig). | Property | Type | Required | Default | Description | -|----------|--------|----------|---------|--------------------------------------------------------------------------------------------------------------| +| -------- | ------ | -------- | ------- | ------------------------------------------------------------------------------------------------------------ | | `max` | number | **Yes** | | | | `min` | number | **Yes** | | | -| `field` | string | No | | *(Inherited from [BaseDimensionConfig](#basedimensionconfig))*
fixed: T -- will be added by each element | +| `field` | string | No | | _(Inherited from [BaseDimensionConfig](#basedimensionconfig))_
fixed: T -- will be added by each element | | `fixed` | number | No | | | | `mode` | string | No | | Possible values are: `linear`, `quad`. | ### CanvasElementOptions | Property | Type | Required | Default | Description | -|---------------|-----------------------------------------|----------|---------|---------------------------------------------------------| +| ------------- | --------------------------------------- | -------- | ------- | ------------------------------------------------------- | | `name` | string | **Yes** | | | | `type` | string | **Yes** | | | | `background` | [BackgroundConfig](#backgroundconfig) | No | | | @@ -115,21 +115,21 @@ It extends [BaseDimensionConfig](#basedimensionconfig). ### Constraint | Property | Type | Required | Default | Description | -|--------------|--------|----------|---------|-----------------------------------------------------------------------| +| ------------ | ------ | -------- | ------- | --------------------------------------------------------------------- | | `horizontal` | string | No | | Possible values are: `left`, `right`, `leftright`, `center`, `scale`. | | `vertical` | string | No | | Possible values are: `top`, `bottom`, `topbottom`, `center`, `scale`. | ### LineConfig | Property | Type | Required | Default | Description | -|----------|-----------------------------------------------|----------|---------|-------------| +| -------- | --------------------------------------------- | -------- | ------- | ----------- | | `color` | [ColorDimensionConfig](#colordimensionconfig) | No | | | | `width` | number | No | | | ### Placement | Property | Type | Required | Default | Description | -|----------|--------|----------|---------|-------------| +| -------- | ------ | -------- | ------- | ----------- | | `bottom` | number | No | | | | `height` | number | No | | | | `left` | number | No | | | @@ -140,7 +140,8 @@ It extends [BaseDimensionConfig](#basedimensionconfig). ### Options | Property | Type | Required | Default | Description | -|---------------------|-----------------|----------|---------|--------------------------------------------------------------------------------------------------------------------------------------| +| ------------------- | --------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ | +| `displayMiniMap` | boolean | **Yes** | `true` | Display mini map during zoom | | `inlineEditing` | boolean | **Yes** | `true` | Enable inline editing | | `root` | [object](#root) | **Yes** | | The root element of canvas (frame), where all canvas elements are nested
TODO: Figure out how to define a default value for this | | `showAdvancedTypes` | boolean | **Yes** | `true` | Show all available element types | @@ -151,9 +152,7 @@ The root element of canvas (frame), where all canvas elements are nested TODO: Figure out how to define a default value for this | Property | Type | Required | Default | Description | -|------------|-------------------------------------------------|----------|---------|----------------------------------------------------------------| +| ---------- | ----------------------------------------------- | -------- | ------- | -------------------------------------------------------------- | | `elements` | [CanvasElementOptions](#canvaselementoptions)[] | **Yes** | | The list of canvas elements attached to the root element | | `name` | string | **Yes** | | Name of the root element | | `type` | string | **Yes** | | Type of root element (frame)
Possible values are: `frame`. | - - diff --git a/packages/grafana-schema/src/raw/composable/canvas/panelcfg/x/CanvasPanelCfg_types.gen.ts b/packages/grafana-schema/src/raw/composable/canvas/panelcfg/x/CanvasPanelCfg_types.gen.ts index 8a3eaf86e1b..05402c5e8fe 100644 --- a/packages/grafana-schema/src/raw/composable/canvas/panelcfg/x/CanvasPanelCfg_types.gen.ts +++ b/packages/grafana-schema/src/raw/composable/canvas/panelcfg/x/CanvasPanelCfg_types.gen.ts @@ -11,7 +11,7 @@ import * as ui from '@grafana/schema'; -export const pluginVersion = "10.3.0-pre"; +export const pluginVersion = '10.3.0-pre'; export enum HorizontalConstraint { Center = 'center', @@ -105,6 +105,10 @@ export const defaultCanvasElementOptions: Partial = { }; export interface Options { + /** + * Display mini map during zoom + */ + displayMiniMap: boolean; /** * Enable inline editing */ @@ -134,6 +138,7 @@ export interface Options { } export const defaultOptions: Partial = { + displayMiniMap: true, inlineEditing: true, showAdvancedTypes: true, }; diff --git a/public/app/features/canvas/runtime/scene.tsx b/public/app/features/canvas/runtime/scene.tsx index 8cadc1d15cd..31af4a7ac6b 100644 --- a/public/app/features/canvas/runtime/scene.tsx +++ b/public/app/features/canvas/runtime/scene.tsx @@ -68,6 +68,7 @@ export class Scene { currentLayer?: FrameState; isEditingEnabled?: boolean; shouldShowAdvancedTypes?: boolean; + shouldDisplayMiniMap?: boolean; skipNextSelectionBroadcast = false; ignoreDataUpdate = false; panel: CanvasPanel; @@ -104,10 +105,11 @@ export class Scene { cfg: CanvasFrameOptions, enableEditing: boolean, showAdvancedTypes: boolean, + displayMiniMap: boolean, public onSave: (cfg: CanvasFrameOptions) => void, panel: CanvasPanel ) { - this.root = this.load(cfg, enableEditing, showAdvancedTypes); + this.root = this.load(cfg, enableEditing, showAdvancedTypes, displayMiniMap); this.subscription = this.editModeEnabled.subscribe((open) => { if (!this.moveable || !this.isEditingEnabled) { @@ -140,7 +142,7 @@ export class Scene { return !this.byName.has(v); }; - load(cfg: CanvasFrameOptions, enableEditing: boolean, showAdvancedTypes: boolean) { + load(cfg: CanvasFrameOptions, enableEditing: boolean, showAdvancedTypes: boolean, displayMiniMap: boolean) { this.root = new RootElement( cfg ?? { type: 'frame', @@ -152,6 +154,7 @@ export class Scene { this.isEditingEnabled = enableEditing; this.shouldShowAdvancedTypes = showAdvancedTypes; + this.shouldDisplayMiniMap = displayMiniMap; setTimeout(() => { if (this.div) { @@ -730,9 +733,11 @@ export class Scene { right: '0px', }} > - - {element} - + {this.shouldDisplayMiniMap && ( + + {element} + + )} {element} diff --git a/public/app/plugins/panel/canvas/CanvasPanel.tsx b/public/app/plugins/panel/canvas/CanvasPanel.tsx index 38838f80913..cf02bc11737 100644 --- a/public/app/plugins/panel/canvas/CanvasPanel.tsx +++ b/public/app/plugins/panel/canvas/CanvasPanel.tsx @@ -67,6 +67,7 @@ export class CanvasPanel extends Component { this.props.options.root, this.props.options.inlineEditing, this.props.options.showAdvancedTypes, + this.props.options.displayMiniMap, this.onUpdateScene, this ); @@ -227,14 +228,20 @@ export class CanvasPanel extends Component { const inlineEditingSwitched = this.props.options.inlineEditing !== nextProps.options.inlineEditing; const shouldShowAdvancedTypesSwitched = this.props.options.showAdvancedTypes !== nextProps.options.showAdvancedTypes; - if (this.needsReload || inlineEditingSwitched || shouldShowAdvancedTypesSwitched) { + const displayMiniMapSwitched = this.props.options.displayMiniMap !== nextProps.options.displayMiniMap; + if (this.needsReload || inlineEditingSwitched || shouldShowAdvancedTypesSwitched || displayMiniMapSwitched) { if (inlineEditingSwitched) { // Replace scene div to prevent selecto instance leaks this.scene.revId++; } this.needsReload = false; - this.scene.load(nextProps.options.root, nextProps.options.inlineEditing, nextProps.options.showAdvancedTypes); + this.scene.load( + nextProps.options.root, + nextProps.options.inlineEditing, + nextProps.options.showAdvancedTypes, + nextProps.options.displayMiniMap + ); this.scene.updateSize(nextProps.width, nextProps.height); this.scene.updateData(nextProps.data); changed = true; diff --git a/public/app/plugins/panel/canvas/module.tsx b/public/app/plugins/panel/canvas/module.tsx index 60936b2c12c..09e36af952c 100644 --- a/public/app/plugins/panel/canvas/module.tsx +++ b/public/app/plugins/panel/canvas/module.tsx @@ -22,6 +22,13 @@ export const addStandardCanvasEditorOptions = (builder: PanelOptionsEditorBuilde description: 'Enable selection of experimental element types', defaultValue: true, }); + + builder.addBooleanSwitch({ + path: 'displayMiniMap', + name: 'Mini Map', + description: 'Display mini map during zoom', + defaultValue: true, + }); }; export const plugin = new PanelPlugin(CanvasPanel) diff --git a/public/app/plugins/panel/canvas/panelcfg.cue b/public/app/plugins/panel/canvas/panelcfg.cue index 0e0be5a3050..f8c618923bd 100644 --- a/public/app/plugins/panel/canvas/panelcfg.cue +++ b/public/app/plugins/panel/canvas/panelcfg.cue @@ -88,6 +88,8 @@ composableKinds: PanelCfg: { inlineEditing: bool | *true // Show all available element types showAdvancedTypes: bool | *true + // Display mini map during zoom + displayMiniMap: bool | *true // The root element of canvas (frame), where all canvas elements are nested // TODO: Figure out how to define a default value for this root: { diff --git a/public/app/plugins/panel/canvas/panelcfg.gen.ts b/public/app/plugins/panel/canvas/panelcfg.gen.ts index c7dee893e30..914d06eaa63 100644 --- a/public/app/plugins/panel/canvas/panelcfg.gen.ts +++ b/public/app/plugins/panel/canvas/panelcfg.gen.ts @@ -102,6 +102,10 @@ export const defaultCanvasElementOptions: Partial = { }; export interface Options { + /** + * Display mini map during zoom + */ + displayMiniMap: boolean; /** * Enable inline editing */ @@ -131,6 +135,7 @@ export interface Options { } export const defaultOptions: Partial = { + displayMiniMap: true, inlineEditing: true, showAdvancedTypes: true, };