Grafana Canvas Custom Element Responsiveness

Question

Today, I have a dashboard that contains an image that represents the place where some items/devices are located. After adding some custom elements, I have a fixed position, based on the user selection.

However, changing the screen resolution or scale interferes directly in its positioning, just like described in the second figure. Taking this scenario into account, I was not able to find any resource regarding this topic. So, here comes the following doubt: is there any support from Grafana that enables a custom element positioning based on DOM's window or any similar resource that allows this responsiveness, in order to create a "dynamic" layout?

Thank you in advance for any help or suggestion!

Figure 1 - Custom element in desired position (1920x1080 with 100% scale)

Figure 2 - Custom element in a different position (1920x1080 with 125% scale)

Answer 1

As of Grafana 10.1.1, the canvas panel is still in its nascent stages of development, and unfortunately, direct support for responsiveness hasn't been built in.

However, if you're comfortable with delving into Grafana's open-source codebase, there is a workaround you can consider. You can manually edit the canvas panel plugin and rebuild the frontend. I recommend following Grafana's developer guide for building, which can be found here.

To achieve your desired outcome:

1. Add Two Inputs to Panel Config: I introduced two new input fields: Background Width and Background Height. These inputs play a crucial role in calculating the relative position and scale. please insert there resolution of your original image in pixels.

2. Include a Responsiveness Toggle: I added a boolean switch in the panel config to enable or disable the responsive feature. please note, that I created this functionality for background in Contain mode, which is in my opinion only one responsive mode.

these are mine results: Figure 1 Figure 2

Below are mine 3 files I edited:

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

import React, { Component } from 'react';
import { ReplaySubject, Subscription } from 'rxjs';

import { PanelProps } from '@grafana/data';
import { locationService } from '@grafana/runtime/src';
import { PanelContext, PanelContextRoot } from '@grafana/ui';
import { CanvasFrameOptions } from 'app/features/canvas';
import { ElementState } from 'app/features/canvas/runtime/element';
import { Scene } from 'app/features/canvas/runtime/scene';
import { PanelEditEnteredEvent, PanelEditExitedEvent } from 'app/types/events';

import { SetBackground } from './components/SetBackground';
import { InlineEdit } from './editor/inline/InlineEdit';
import { Options } from './panelcfg.gen';
import { AnchorPoint, CanvasTooltipPayload, ConnectionState } from './types';

interface Props extends PanelProps<Options> {}

interface State {
  refresh: number;
  openInlineEdit: boolean;
  openSetBackground: boolean;
  contextMenuAnchorPoint: AnchorPoint;
  moveableAction: boolean;
}

export interface InstanceState {
  scene: Scene;
  selected: ElementState[];
  selectedConnection?: ConnectionState;
}

export interface SelectionAction {
  panel: CanvasPanel;
}

let canvasInstances: CanvasPanel[] = [];
let activeCanvasPanel: CanvasPanel | undefined = undefined;
let isInlineEditOpen = false;
let isSetBackgroundOpen = false;

export const activePanelSubject = new ReplaySubject<SelectionAction>(1);

export class CanvasPanel extends Component<Props, State> {
  declare context: React.ContextType<typeof PanelContextRoot>;
  static contextType = PanelContextRoot;
  panelContext: PanelContext | undefined;

  readonly scene: Scene;
  private subs = new Subscription();
  needsReload = false;
  isEditing = locationService.getSearchObject().editPanel !== undefined;

  //added
  declare backgroundTrueWidth: number;
  declare backgroundTrueHeight: number;

  constructor(props: Props) {
    super(props);
    this.state = {
      refresh: 0,
      openInlineEdit: false,
      openSetBackground: false,
      contextMenuAnchorPoint: { x: 0, y: 0 },
      moveableAction: false,
    };

    // Only the initial options are ever used.
    // later changes are all controlled by the scene
    this.scene = new Scene(
      this.props.options.root,
      this.props.options.inlineEditing,
      this.props.options.showAdvancedTypes,
      this.onUpdateScene,
      this
    );
    this.scene.updateSize(props.width, props.height);
    this.scene.updateData(props.data);
    this.scene.inlineEditingCallback = this.openInlineEdit;
    this.scene.setBackgroundCallback = this.openSetBackground;
    this.scene.tooltipCallback = this.tooltipCallback;
    this.scene.moveableActionCallback = this.moveableActionCallback;

    this.subs.add(
      this.props.eventBus.subscribe(PanelEditEnteredEvent, (evt: PanelEditEnteredEvent) => {
        // Remove current selection when entering edit mode for any panel in dashboard
        this.scene.clearCurrentSelection();
        this.closeInlineEdit();
      })
    );

    this.subs.add(
      this.props.eventBus.subscribe(PanelEditExitedEvent, (evt: PanelEditExitedEvent) => {
        if (this.props.id === evt.payload) {
          this.needsReload = true;
          this.scene.clearCurrentSelection();
        }
      })
    );
  }

  //added
  calculateBackgroundSize(){
    let panelRatio = this.props.width / this.props.height;
    let backgroundRatio = this.props.options.backgroundWidth / this.props.options.backgroundHeight;
    if(backgroundRatio>=0){
      if(panelRatio>backgroundRatio){
        this.backgroundTrueHeight = this.props.height;
        this.backgroundTrueWidth = this.props.height * backgroundRatio;

      }else{
        this.backgroundTrueWidth = this.props.width;
        this.backgroundTrueHeight = this.props.width / backgroundRatio;
      }
    }else{
      if(panelRatio>backgroundRatio){
        this.backgroundTrueHeight = this.props.height;
        this.backgroundTrueWidth = this.props.height / backgroundRatio;

      }else{
        this.backgroundTrueWidth = this.props.width;
        this.backgroundTrueHeight = this.props.width * backgroundRatio;
      }
    }
    return;
  };

  //added
  calculateRelativePosition(xDisplayed: number, yDisplayed: number): { xOriginal: number, yOriginal: number }{
    let widthRatioPos = this.props.options.backgroundWidth / this.backgroundTrueWidth;
    let heightRatioPos = this.props.options.backgroundHeight / this.backgroundTrueHeight;
    let xOriginal = xDisplayed * widthRatioPos;
    let yOriginal = yDisplayed * heightRatioPos;
    return {xOriginal, yOriginal};
  }

  //added
  calculateRelativeScale(xDisplayed: number, yDisplayed: number): { xOriginal: number, yOriginal: number }{
    let widthRatioScale = this.props.options.backgroundWidth / this.backgroundTrueWidth;
    let heightRatioScale = this.props.options.backgroundHeight / this.backgroundTrueHeight;
    let xOriginal = xDisplayed * widthRatioScale;
    let yOriginal = yDisplayed * heightRatioScale;
    return {xOriginal, yOriginal};
  }

  //added
  calculateNewPosition(xRelativePos: number, yRelativePos: number, originalWidth: number, originalHeight: number, newWidth: number, newHeight: number): { xNew: number, yNew: number } {
    let xNew = (newWidth / originalWidth) * xRelativePos;
    let yNew = (newHeight / originalHeight) * yRelativePos;
    return { xNew, yNew };
  }

  //added
  calculateNewScale(xRelativeScale: number, yRelativeScale: number, originalWidth: number, originalHeight: number, newWidth: number, newHeight: number): { xNew: number, yNew: number } {
    let xNew = (newWidth / originalWidth) * xRelativeScale;
    let yNew = (newHeight / originalHeight) * yRelativeScale;
    return { xNew, yNew };
  }

  componentDidMount() {
    activeCanvasPanel = this;
    activePanelSubject.next({ panel: this });

    this.panelContext = this.context;
    if (this.panelContext.onInstanceStateChange) {
      this.panelContext.onInstanceStateChange({
        scene: this.scene,
        layer: this.scene.root,
      });

      this.subs.add(
        this.scene.selection.subscribe({
          next: (v) => {
            if (v.length) {
              activeCanvasPanel = this;
              activePanelSubject.next({ panel: this });
            }

            canvasInstances.forEach((canvasInstance) => {
              if (canvasInstance !== activeCanvasPanel) {
                canvasInstance.scene.clearCurrentSelection(true);
                canvasInstance.scene.connections.select(undefined);
              }
            });

            this.panelContext?.onInstanceStateChange!({
              scene: this.scene,
              selected: v,
              layer: this.scene.root,
            });
          },
        })
      );

      this.subs.add(
        this.scene.connections.selection.subscribe({
          next: (v) => {
            if (!this.context.instanceState) {
              return;
            }

            this.panelContext?.onInstanceStateChange!({
              scene: this.scene,
              selected: this.context.instanceState.selected,
              selectedConnection: v,
              layer: this.scene.root,
            });

            if (v) {
              activeCanvasPanel = this;
              activePanelSubject.next({ panel: this });
            }

            canvasInstances.forEach((canvasInstance) => {
              if (canvasInstance !== activeCanvasPanel) {
                canvasInstance.scene.clearCurrentSelection(true);
                canvasInstance.scene.connections.select(undefined);
              }
            });

            setTimeout(() => {
              this.forceUpdate();
            });
          },
        })
      );
    }


    //added
    if(this?.props?.options?.isResponsive === true){
      this.calculateBackgroundSize();
      let newWidth = this?.backgroundTrueWidth;
      let newHeight = this?.backgroundTrueHeight;
      let originalWidth = this?.props?.options?.backgroundWidth;
      let originalHeight = this?.props?.options?.backgroundHeight;
      let elements = this?.props?.options?.root?.elements;

      //calculate now positions of elements
      elements.forEach(element => {
        if (element.placement && typeof element.placement.xRelativePos === 'number' && typeof element.placement.yRelativePos === 'number') {
            let newPosition = this.calculateNewPosition(element.placement.xRelativePos, element.placement.yRelativePos, originalWidth, originalHeight, newWidth, newHeight);
            element.placement.left = newPosition.xNew;
            element.placement.top = newPosition.yNew;
        }
      });

      //calculate now scale of elements
      elements.forEach(element => {
        if (element.placement && typeof element.placement.xRelativeScale === 'number' && typeof element.placement.yRelativeScale === 'number') {
            let newPosition = this.calculateNewScale(element.placement.xRelativeScale, element.placement.yRelativeScale, originalWidth, originalHeight, newWidth, newHeight);
            element.placement.width = newPosition.xNew;
            element.placement.height = newPosition.yNew;
        }
      });
      this.scene.updateData(this?.props?.data);
      this.scene.updateSize(this?.props?.width, this?.props?.height);
    }
    canvasInstances.push(this);
  }

  componentWillUnmount() {
    this.scene.subscription.unsubscribe();
    this.subs.unsubscribe();
    isInlineEditOpen = false;
    isSetBackgroundOpen = false;
    canvasInstances = canvasInstances.filter((ci) => ci.props.id !== activeCanvasPanel?.props.id);
  }

  // NOTE, all changes to the scene flow through this function
  // even the editor gets current state from the same scene instance!
  onUpdateScene = (root: CanvasFrameOptions) => {
    const { onOptionsChange, options } = this.props;
    onOptionsChange({
      ...options,
      root,
    });

    this.setState({ refresh: this.state.refresh + 1 });
    activePanelSubject.next({ panel: this });
  };

  shouldComponentUpdate(nextProps: Props, nextState: State ) {
    const { width, height, data, options } = this.props;
    let changed = false;

    if (width !== nextProps.width || height !== nextProps.height) {
      //added
      if(this?.props?.options?.isResponsive === true){
        this.calculateBackgroundSize();
        //console.log("panel changed!");
        let newWidth = this?.backgroundTrueWidth;
        let newHeight = this?.backgroundTrueHeight;
        let originalWidth = this?.props?.options?.backgroundWidth;
        let originalHeight = this?.props?.options?.backgroundHeight;
        let elements = nextProps?.options?.root?.elements;

        //calculate now positions of elements
        elements.forEach(element => {
          if (element.placement && typeof element.placement.xRelativePos === 'number' && typeof element.placement.yRelativePos === 'number') {
              let newPosition = this.calculateNewPosition(element.placement.xRelativePos, element.placement.yRelativePos, originalWidth, originalHeight, newWidth, newHeight);
              element.placement.left = newPosition.xNew;
              element.placement.top = newPosition.yNew;
          }
        });

        //calculate now scale of elements
        elements.forEach(element => {
          if (element.placement && typeof element.placement.xRelativeScale === 'number' && typeof element.placement.yRelativeScale === 'number') {
              let newPosition = this.calculateNewScale(element.placement.xRelativeScale, element.placement.yRelativeScale, originalWidth, originalHeight, newWidth, newHeight);
              element.placement.width = newPosition.xNew;
              element.placement.height = newPosition.yNew;
          }
        });
      }
      this.scene.updateData(nextProps.data);
      this.scene.updateSize(nextProps.width, nextProps.height);
      changed = true;
    }

    if (data !== nextProps.data && !this.scene.ignoreDataUpdate) {
      this.scene.updateData(nextProps.data);
      changed = true;
    }

    if (options !== nextProps.options && !this.scene.ignoreDataUpdate) {
      this.scene.updateData(nextProps.data);
      changed = true;
      
      //added
      if(this?.props?.options?.isResponsive === true){
        this.calculateBackgroundSize();
        let elements = nextProps?.options?.root?.elements;
        if (elements && elements.length) {
          elements.forEach(element => {
              //calculating relative position of elements
              if (typeof element?.placement?.left === 'number' && typeof element?.placement?.top === 'number') {
                  let relativePos = this.calculateRelativePosition(element.placement.left, element.placement.top);
                  element.placement.xRelativePos = relativePos.xOriginal;
                  element.placement.yRelativePos = relativePos.yOriginal;
              }
              //calculating relative scale of elements
              if (typeof element?.placement?.width === 'number' && typeof element?.placement?.height === 'number') {
                  let relativeScale = this.calculateRelativeScale(element.placement.width, element.placement.height);
                  element.placement.xRelativeScale = relativeScale.xOriginal;
                  element.placement.yRelativeScale = relativeScale.yOriginal;
              }
          });
          // Here elements array has updated positions and scale.
        }
      }

    }

    if (this.state.refresh !== nextState.refresh) {
      changed = true;
    }

    if (this.state.openInlineEdit !== nextState.openInlineEdit) {
      changed = true;
    }

    if (this.state.openSetBackground !== nextState.openSetBackground) {
      changed = true;
    }

    if (this.state.moveableAction !== nextState.moveableAction) {
      changed = true;
    }

    // After editing, the options are valid, but the scene was in a different panel or inline editing mode has changed
    const inlineEditingSwitched = this.props.options.inlineEditing !== nextProps.options.inlineEditing;
    const shouldShowAdvancedTypesSwitched =
      this.props.options.showAdvancedTypes !== nextProps.options.showAdvancedTypes;
    if (this.needsReload || inlineEditingSwitched || shouldShowAdvancedTypesSwitched) {
      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.updateSize(nextProps.width, nextProps.height);
      this.scene.updateData(nextProps.data);
      changed = true;
    }
    return changed;
  }

  openInlineEdit = () => {
    if (isInlineEditOpen) {
      this.forceUpdate();
      this.setActivePanel();
      return;
    }

    this.setActivePanel();
    this.setState({ openInlineEdit: true });
    isInlineEditOpen = true;
  };

  openSetBackground = (anchorPoint: AnchorPoint) => {
    if (isSetBackgroundOpen) {
      this.forceUpdate();
      this.setActivePanel();
      return;
    }

    this.setActivePanel();
    this.setState({ openSetBackground: true });
    this.setState({ contextMenuAnchorPoint: anchorPoint });

    isSetBackgroundOpen = true;
  };

  tooltipCallback = (tooltip: CanvasTooltipPayload | undefined) => {
    this.scene.tooltip = tooltip;
    this.forceUpdate();
  };

  moveableActionCallback = (updated: boolean) => {
    this.setState({ moveableAction: updated });
    this.forceUpdate();
  };

  closeInlineEdit = () => {
    this.setState({ openInlineEdit: false });
    isInlineEditOpen = false;
  };

  closeSetBackground = () => {
    this.setState({ openSetBackground: false });
    isSetBackgroundOpen = false;
  };

  setActivePanel = () => {
    activeCanvasPanel = this;
    activePanelSubject.next({ panel: this });
  };

  renderInlineEdit = () => {
    return <InlineEdit onClose={() => this.closeInlineEdit()} id={this.props.id} scene={this.scene} />;
  };

  renderSetBackground = () => {
    return (
      <SetBackground
        onClose={() => this.closeSetBackground()}
        scene={this.scene}
        anchorPoint={this.state.contextMenuAnchorPoint}
      />
    );
  };

  render() {
    return (
      <>
        {this.scene.render()}
        {this.state.openInlineEdit && this.renderInlineEdit()}
        {this.state.openSetBackground && this.renderSetBackground()}
      </>
    );
  }
}

/grafana/public/app/plugins/panel/canvas/module.tsx

import { FieldConfigProperty, PanelOptionsEditorBuilder, PanelPlugin } from '@grafana/data';
import { FrameState } from 'app/features/canvas/runtime/frame';

import { CanvasPanel, InstanceState } from './CanvasPanel';
import { getConnectionEditor } from './editor/connectionEditor';
import { getElementEditor } from './editor/element/elementEditor';
import { getLayerEditor } from './editor/layer/layerEditor';
import { canvasMigrationHandler } from './migrations';
import { Options } from './panelcfg.gen';

export const addStandardCanvasEditorOptions = (builder: PanelOptionsEditorBuilder<Options>) => {
  builder.addBooleanSwitch({
    path: 'inlineEditing',
    name: 'Inline editing',
    description: 'Enable editing the panel directly',
    defaultValue: true,
  });

  builder.addBooleanSwitch({
    path: 'showAdvancedTypes',
    name: 'Experimental element types',
    description: 'Enable selection of experimental element types',
    defaultValue: true,
  });

  //added
  builder.addBooleanSwitch({
    path: 'isResponsive',
    name: 'Responsive elements',
    description: 'Set true if you want to elements have responsive position and scale based on backgroung',
    defaultValue: false,
  });

  //added
  builder.addNumberInput({
    path: 'backgroundWidth',
    name: 'Background width',
    description: 'Width of original backgronud picture in pixels',
    defaultValue: 800,
  });

  //added
  builder.addNumberInput({
    path: 'backgroundHeight',
    name: 'Background height',
    description: 'Height of original backgronud picture in pixels',
    defaultValue: 600,
  });
};

export const plugin = new PanelPlugin<Options>(CanvasPanel)
  .setNoPadding() // extend to panel edges
  .useFieldConfig({
    standardOptions: {
      [FieldConfigProperty.Mappings]: {
        settings: {
          icon: true,
        },
      },
    },
  })
  .setMigrationHandler(canvasMigrationHandler)
  .setPanelOptions((builder, context) => {
    const state: InstanceState = context.instanceState;

    addStandardCanvasEditorOptions(builder);

    if (state) {
      builder.addNestedOptions(getLayerEditor(state));

      const selection = state.selected;
      const connectionSelection = state.selectedConnection;

      if (selection?.length === 1) {
        const element = selection[0];
        if (!(element instanceof FrameState)) {
          builder.addNestedOptions(
            getElementEditor({
              category: [`Selected element (${element.options.name})`],
              element,
              scene: state.scene,
            })
          );
        }
      }

      if (connectionSelection) {
        builder.addNestedOptions(
          getConnectionEditor({
            category: ['Selected connection'],
            connection: connectionSelection,
            scene: state.scene,
          })
        );
      }
    }
  });

/grafana/public/app/plugins/panel/canvas/panelcfg.cue

// Copyright 2023 Grafana Labs
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

package grafanaplugin

import (
    ui "github.com/grafana/grafana/packages/grafana-schema/src/common"
)

composableKinds: PanelCfg: {
    maturity: "experimental"

    lineage: {
        schemas: [{
            version: [0, 0]
            schema: {
                HorizontalConstraint: "left" | "right" | "leftright" | "center" | "scale" @cuetsy(kind="enum", memberNames="Left|Right|LeftRight|Center|Scale")
                VerticalConstraint:   "top" | "bottom" | "topbottom" | "center" | "scale" @cuetsy(kind="enum", memberNames="Top|Bottom|TopBottom|Center|Scale")

                Constraint: {
                    horizontal?: HorizontalConstraint
                    vertical?:   VerticalConstraint
                } @cuetsy(kind="interface")

                Placement: {
                    top?:    float64
                    left?:   float64
                    right?:  float64
                    bottom?: float64
                    width?:  float64
                    height?: float64
                    xRelativePos?:    float64
                    yRelativePos?:    float64
                    xRelativeScale?:  float64
                    yRelativeScale?:  float64
                } @cuetsy(kind="interface")

                BackgroundImageSize: "original" | "contain" | "cover" | "fill" | "tile" @cuetsy(kind="enum", memberNames="Original|Contain|Cover|Fill|Tile")
                BackgroundConfig: {
                    color?: ui.ColorDimensionConfig
                    image?: ui.ResourceDimensionConfig
                    size?:  BackgroundImageSize
                } @cuetsy(kind="interface")

                BackgroundTrueSizeInPixels: {
                    width?:  float64
                    height?: float64
                } @cuetsy(kind="interface")

                LineConfig: {
                    color?: ui.ColorDimensionConfig
                    width?: float64
                } @cuetsy(kind="interface")

                ConnectionCoordinates: {
                    x: float64
                    y: float64
                } @cuetsy(kind="interface")

                ConnectionPath: "straight" @cuetsy(kind="enum", memberNames="Straight")

                CanvasConnection: {
                    source:      ConnectionCoordinates
                    target:      ConnectionCoordinates
                    targetName?: string
                    path:        ConnectionPath
                    color?:      ui.ColorDimensionConfig
                    size?:       ui.ScaleDimensionConfig
                } @cuetsy(kind="interface")

                CanvasElementOptions: {
                    name: string
                    type: string
                    // TODO: figure out how to define this (element config(s))
                    config?:     _
                    constraint?: Constraint
                    placement?:  Placement
                    background?: BackgroundConfig
                    border?:     LineConfig
                    connections?: [...CanvasConnection]
                } @cuetsy(kind="interface")

                Options: {
                    // Enable inline editing
                    inlineEditing: bool | *true
                    // Show all available element types
                    showAdvancedTypes: 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: {
                        // Name of the root element
                        name: string
                        // Type of root element (frame)
                        type: "frame"
                        // The list of canvas elements attached to the root element
                        elements: [...CanvasElementOptions]
                    } @cuetsy(kind="interface")
                    // Added properties for responsiveness
                    backgroundHeight: float64
                    backgroundWidth:  float64
                    isResponsive:     bool | *false
                } @cuetsy(kind="interface")
            }
        }]
        lenses: []
    }
}