Add option to display mini map

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))*<br/>fixed: T -- will be added by each element |
+| `field`  | string | No       |         | _(Inherited from [BaseDimensionConfig](#basedimensionconfig))_<br/>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))*<br/>fixed: T -- will be added by each element |
+| `field`  | string | No       |         | _(Inherited from [BaseDimensionConfig](#basedimensionconfig))_<br/>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))*<br/>fixed: T -- will be added by each element |
+| `field`  | string | No       |         | _(Inherited from [BaseDimensionConfig](#basedimensionconfig))_<br/>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<br/>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)<br/>Possible values are: `frame`. |
-
-

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<CanvasElementOptions> = {
 };
 
 export interface Options {
+  /**
+   * Display mini map during zoom
+   */
+  displayMiniMap: boolean;
   /**
    * Enable inline editing
    */
@@ -134,6 +138,7 @@ export interface Options {
 }
 
 export const defaultOptions: Partial<Options> = {
+  displayMiniMap: true,
   inlineEditing: true,
   showAdvancedTypes: true,
 };

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',
           }}
         >
+          {this.shouldDisplayMiniMap && (
             <MiniMap width={200} borderColor={config.theme2.colors.border.weak}>
               {element}
             </MiniMap>
+          )}
         </div>
         <TransformComponent>{element}</TransformComponent>
       </TransformWrapper>

public/app/plugins/panel/canvas/CanvasPanel.tsx

@@ -67,6 +67,7 @@ export class CanvasPanel extends Component<Props, State> {
       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<Props, State> {
     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;

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<Options>(CanvasPanel)

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: {

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

@@ -102,6 +102,10 @@ export const defaultCanvasElementOptions: Partial<CanvasElementOptions> = {
 };
 
 export interface Options {
+  /**
+   * Display mini map during zoom
+   */
+  displayMiniMap: boolean;
   /**
    * Enable inline editing
    */
@@ -131,6 +135,7 @@ export interface Options {
 }
 
 export const defaultOptions: Partial<Options> = {
+  displayMiniMap: true,
   inlineEditing: true,
   showAdvancedTypes: true,
 };