[FEATURE] Add canvas panel plugin by adrianSepiol · Pull Request #729 · perses/plugins

adrianSepiol · 2026-07-15T17:20:23Z

Description

Introduces the canvas panel plugin — a free-form network diagram editor for building weathermap-style dashboards. Users can place nodes, connect them with edges, and overlay background shapes or images. Node and edge colors can be driven by query-bound thresholds, and edge thickness can scale with metric values.

Screenshots

Here's a walkthrough of the main interactions:

Example weather map created in canvas:

Adding a node:

Screen.Recording.2026-07-20.at.15.26.09.mov

After creating a node, you can specify its label and position, add a link, bind a query to it, and use the query value in the label or derive the color from thresholds.

Adding an edge:

Screen.Recording.2026-07-20.at.15.26.45.mov

Edges are created by dragging from one node to another. They can be bidirectional and, like nodes, can have a query bound to them.

Zoom, pan, and resize:

Screen.Recording.2026-07-20.at.15.32.35.mov

Adding backgrounds:

adding.background.mov

Multiple backgrounds can be added with an image or a solid color at varying opacity levels. If "Global" is selected, the background always fills the entire view regardless of pan/zoom; otherwise it is scoped to a specified area.

Checklist

Pull request has a descriptive title and context useful to a reviewer.
Pull request title follows the [<catalog_entry>] <commit message> naming convention using one of the
following catalog_entry values: FEATURE, ENHANCEMENT, BUGFIX, BREAKINGCHANGE, DOC,IGNORE.
All commits have DCO signoffs.

UI Changes

Changes that impact the UI include screenshots and/or screencasts of the relevant changes.
Code follows the UI guidelines.

jgbernalp · 2026-07-24T08:53:36Z

@@ -0,0 +1,20 @@
+{
+  "kind": "Canvas",


It appears to me that this is a nodes panel rather than a canvas. Unless we are thinking about adding other things different from nodes in the future.

Yes, We would like to develop it further with new things. I think adding background is one of the things that is already here and fits more into "canvas" than "nodes" plugin.

jgbernalp · 2026-07-24T08:59:53Z

First of all, awesome job @adrianSepiol!

Would be there an option to create a graph (nodes and connections) based on a query? for example network topology charts have queries that return a list of nodes and their connections. In that case could this panel create a graph from that information in addition to the manual placement of nodes?

adrianSepiol · 2026-07-30T13:01:32Z

First of all, awesome job @adrianSepiol!

Would be there an option to create a graph (nodes and connections) based on a query? for example network topology charts have queries that return a list of nodes and their connections. In that case could this panel create a graph from that information in addition to the manual placement of nodes?

That is something we also discussed and would like to work on in the future, but the idea is to make this work with this spec for the first iteration and then add new functionalities gradually.

ibakshay

Great job Adrian! My agent found some nits.

ibakshay · 2026-08-18T10:16:38Z

+export function PanelEdgeLayer({ spec, seriesByQueryIndex, k, paletteColors }: PanelEdgeLayerProps): ReactElement {
+  const nodes = spec.nodes ?? [];
+  const edges = spec.edges ?? [];
+  const nodeById = new Map(nodes.map((n) => [n.id, n]));


[NOTE] Rule: js-index-maps — Build Maps for Repeated Lookups

const nodeById = new Map(nodes.map((n) => [n.id, n])) is created on every render without useMemo. Since PanelEdgeLayer re-renders on zoom changes, this map is rebuilt every time even though spec.nodes hasn't changed.

Fix: Wrap in useMemo(() => new Map(nodes.map(...)), [nodes]).

ibakshay · 2026-08-18T10:40:30Z

[SUGGESTION] please add a "info" message in the panel for the end users when the canvas is empty. Otherwise, it looks blank. Otherwise, the panel looks blank.

ibakshay · 2026-08-18T12:09:07Z

In the edge settings, please add full names for north, south, ... instead of short abbreviations.

shahrokni · 2026-08-19T09:38:04Z

@adrianSepiol
Thank you for the great contribution. ❤️
Do we need a data source to connect to?

network observability or service-mesh health overviews
How could we validate the plugin against a real network?

shahrokni · 2026-08-19T11:25:49Z

+      const v = e.target.value;
+      onChange({ ...edge, sourceQueryIndex: v === '' ? undefined : Number(v) });
+    },


Should we validate sourceQueryIndex here?
Currently any none-empty value is converted with Number(V), which could potentially result in NaN, a negative value, or non-integer index.

I've extracted parseNumberInput and use it in such cases.

shahrokni · 2026-08-19T11:34:32Z

+      <TextField
+        select
+        label="Source anchor"
+        size="small"
+        value={edge.sourceAnchor ?? 'n'}
+        onChange={onSourceAnchorChange}
+        slotProps={{ select: { MenuProps: { PaperProps: { style: { maxHeight: 240 } } } } }}
+      >
+        {ANCHOR_OPTIONS.map((a) => (
+          <MenuItem key={a} value={a}>
+            {a}
+          </MenuItem>
+        ))}
+      </TextField>


@shahrokni Test 👀

shahrokni · 2026-08-19T11:55:29Z

+      case 'selecting': {
+        const ids = applySelection();
+        selectItems(ids);
+        endInteraction();
+        break;
+      }


@shahrokni 👀 Test: Could it draw a selection box over an empty space of the canvas? Then what would happen?

shahrokni · 2026-08-19T11:56:06Z

+  const onSvgDoubleClick = useCallback(
+    (event: MouseEvent<SVGSVGElement>): void => {
+      if (event.ctrlKey || event.metaKey) {
+        const boundingBox = nodeBoundingBox(displayNodes);
+        if (boundingBox) {
+          fitView(boundingBox, width, height);
+        }
+      } else {
+        resetPan();
+      }
+    },
+    [displayNodes, fitView, resetPan, width, height]
+  );


@shahrokni Test 👀

shahrokni · 2026-08-19T12:02:09Z

+  const onKeyDown = useCallback(
+    (event: KeyboardEvent<SVGSVGElement>): void => {
+      if (event.key !== 'Delete' && event.key !== 'Backspace') {
+        return;
+      }
+      if (selectedIds.size > 0) {
+        deleteSelected();
+      }
+    },
+    [selectedIds, deleteSelected]
+  );


Not with this PR, but as a follow up,
Probably we should consider a simple Undo, Redo support,
Imagine that you have selected many nodes in a huge canvas, and just unintentionally, you press Delete.
Would be painful to reorganize everything again.

shahrokni · 2026-08-19T12:05:52Z

+            <EditorNode
+              key={node.id}
+              node={node}
+              isHovered={hoveredId === node.id}


@shahrokni Test 👀 Overlapping nodes

shahrokni · 2026-08-19T12:27:11Z

+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");


@shahrokni Test 👀 Node self connection?

shahrokni · 2026-08-19T12:43:19Z

+    const canvasWidth = containerRef.current?.clientWidth ?? 0;
+    const cx = transform.invertX(canvasWidth / 2);
+    const cy = transform.invertY(CANVAS_HEIGHT / 2);
+    addNode(cx, cy);


Should we avoid adding a node when the container is unavailable or has zero width?
Falling back to 0 here could result in calculating an unintended canvas position.
Simply, if no canvas or no width, why should we add a node?

I've added guard to check if canvas is mounted.

shahrokni · 2026-08-19T13:04:44Z

+        <TextField
+          label="X"
+          size="small"
+          type="number"
+          value={Math.round(node.x)}
+          onChange={onIntFieldChange('x')}
+          sx={{ width: 80 }}
+        />
+        <TextField
+          label="Y"
+          size="small"
+          type="number"
+          value={Math.round(node.y)}
+          onChange={onIntFieldChange('y')}
+          sx={{ width: 80 }}
+        />
+        <TextField
+          label="Width"
+          size="small"
+          type="number"
+          value={Math.round(node.width)}
+          slotProps={{ htmlInput: { min: 8 } }}
+          onChange={onIntFieldChange('width', 8)}
+          sx={{ width: 80 }}
+        />
+        <TextField
+          label="Height"
+          size="small"
+          type="number"
+          value={Math.round(node.height)}
+          slotProps={{ htmlInput: { min: 8 } }}
+          onChange={onIntFieldChange('height', 8)}
+          sx={{ width: 80 }}
+        />


We have some duplication here. The Text Fields could be dynamically generated by a loop over and object-keys or array of X ,Y, Width, Height

There are too many differences to have gain from loop especially after introducing point type but as I mentioned before I created component and use it here as well.

shahrokni · 2026-08-19T13:20:22Z

+          sx={{ width: 80 }}
+        />
+      </Stack>
+


@shahrokni Test 👀

shahrokni · 2026-08-19T14:09:35Z

+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");


@shahrokni Test 👀 Pre-ordered SVG layers. Could it be problamatic?

shahrokni · 2026-08-19T14:12:19Z

+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//


@shahrokni Test 👀 Importance of Ctrl+ Click for select for larger canvases.

shahrokni · 2026-08-20T08:06:43Z

@@ -0,0 +1,63 @@
+// Copyright The Perses Authors


@shahrokni Test 👀 Collision if it is a long list of legends?

adrianSepiol · 2026-09-04T12:42:23Z

@adrianSepiol Thank you for the great contribution. ❤️ Do we need a data source to connect to?

network observability or service-mesh health overviews
How could we validate the plugin against a real network?

@shahrokni This plugin functions as a canvas where you manually create nodes and edges, then connect queries to the edges/nodes of your choice. It supports time series queries. To test it, simply create a query, add nodes/edges, and connect them. Query results can be displayed as labels on nodes/edges, and you can define thresholds that dynamically change the color of nodes/edges based on the returned values.

I've addressed all your comments, either through code changes or replies in the comments. Whenever you have time, feel free to take another look.

Signed-off-by: Adrian Sepiół <a.sepiol@sap.com> [ENHANCEMENT] update panel schema re-exports to use @perses-dev/plugin-system panelEditorSchema and buildPanelEditorSchema have moved from @perses-dev/spec to @perses-dev/plugin-system. Signed-off-by: Adrian Sepiół <a.sepiol@sap.com>

Signed-off-by: Adrian Sepiół <a.sepiol@sap.com>

…mponent Signed-off-by: Adrian Sepiół <a.sepiol@sap.com>

…eeEndpoint properties Signed-off-by: Adrian Sepiół <a.sepiol@sap.com>

Signed-off-by: Adrian Sepiół <a.sepiol@sap.com>

…points Signed-off-by: Adrian Sepiół <a.sepiol@sap.com>

Signed-off-by: Adrian Sepiół <a.sepiol@sap.com>

… component for numeric inputs Signed-off-by: Adrian Sepiół <a.sepiol@sap.com>

shahrokni

From my perspective, and for the comments I left, the issues are resolved.

ibakshay

I have texted the UI manually as well. Spectacular work!! 🚀 @adrianSepiol

adrianSepiol force-pushed the feature/canvas-panel-plugin branch 8 times, most recently from 39b9803 to d73e5e2 Compare July 17, 2026 07:54

adrianSepiol marked this pull request as ready for review July 20, 2026 13:42

adrianSepiol requested review from a team, AntoineThebaud and Nexucis as code owners July 20, 2026 13:42

adrianSepiol requested review from shahrokni and removed request for a team July 20, 2026 13:42

jgbernalp reviewed Jul 24, 2026

View reviewed changes

ibakshay reviewed Aug 18, 2026

View reviewed changes

shahrokni reviewed Aug 18, 2026

View reviewed changes

Comment thread canvas/sdk/go/canvas.go

Comment thread canvas/sdk/go/canvas.go Outdated

Comment thread canvas/sdk/go/canvas.go Outdated

Comment thread canvas/sdk/go/canvas.go Outdated

shahrokni reviewed Aug 18, 2026

View reviewed changes

Comment thread canvas/src/components/editor/BackgroundPropertiesPanel.tsx Outdated

shahrokni reviewed Aug 18, 2026

View reviewed changes

Comment thread canvas/src/components/editor/BackgroundPropertiesPanel.tsx Outdated

shahrokni reviewed Aug 19, 2026

View reviewed changes

Comment thread canvas/src/components/editor/BackgroundPropertiesPanel.tsx Outdated

Comment thread canvas/src/components/editor/EdgePropertiesPanel.tsx Outdated

shahrokni reviewed Aug 19, 2026

View reviewed changes

Comment thread canvas/src/components/editor/EdgePropertiesPanel.tsx Outdated

shahrokni reviewed Aug 19, 2026

View reviewed changes

shahrokni reviewed Aug 20, 2026

View reviewed changes

shahrokni reviewed Aug 21, 2026

View reviewed changes

adrianSepiol force-pushed the feature/canvas-panel-plugin branch from 4b84d3b to 7c250fb Compare August 21, 2026 11:29

adrianSepiol force-pushed the feature/canvas-panel-plugin branch 4 times, most recently from 784c15b to 2742a8a Compare September 4, 2026 11:49

adrianSepiol added 17 commits September 8, 2026 09:55

[IGNORE] Refactor node rendering to use EditorNodeItem component

156f807

Signed-off-by: Adrian Sepiół <a.sepiol@sap.com>

[IGNORE] format code with oxfmt and fix package-lock.json after merge.

ad89525

Signed-off-by: Adrian Sepiół <a.sepiol@sap.com>

[IGNORE] Refactor edge rendering to use EditorEdgeItem

aeacd51

Signed-off-by: Adrian Sepiół <a.sepiol@sap.com>

[IGNORE] fix dependencies

9267ae5

Signed-off-by: Adrian Sepiół <a.sepiol@sap.com>

[IGNORE] apply code best practices

8b7f657

Signed-off-by: Adrian Sepiół <a.sepiol@sap.com>

[IGNORE] Refactor Edge and Node property panels to use SelectField co…

ebc0553

…mponent Signed-off-by: Adrian Sepiół <a.sepiol@sap.com>

refactor: update node and edge data structures to use position and fr…

ba7f0b1

…eeEndpoint properties Signed-off-by: Adrian Sepiół <a.sepiol@sap.com>

refactor: fix lint errors

573c240

Signed-off-by: Adrian Sepiół <a.sepiol@sap.com>

refactor: fix lint warnings

c4807d4

Signed-off-by: Adrian Sepiół <a.sepiol@sap.com>

feat: refactor anchor options to use constants for improved readability

a650a3a

Signed-off-by: Adrian Sepiół <a.sepiol@sap.com>

feat: enhance zoom functionality with panning state management

f180c39

Signed-off-by: Adrian Sepiół <a.sepiol@sap.com>

feat: introduce ThicknessMode type and update EdgeSpec to use it

de497de

Signed-off-by: Adrian Sepiół <a.sepiol@sap.com>

refactor: unify point representation in edge and connection components

0038281

Signed-off-by: Adrian Sepiół <a.sepiol@sap.com>

feat: refactor selection rectangle handling to use anchor and corner …

a2f70b7

…points Signed-off-by: Adrian Sepiół <a.sepiol@sap.com>

refactor: simplify input handling in NodePropertiesPanel

46d93d9

Signed-off-by: Adrian Sepiół <a.sepiol@sap.com>

feat: refactor background and edge property panels to use NumberField…

efe4e10

… component for numeric inputs Signed-off-by: Adrian Sepiół <a.sepiol@sap.com>

adrianSepiol force-pushed the feature/canvas-panel-plugin branch from cb0a0ba to efe4e10 Compare September 8, 2026 07:56

shahrokni approved these changes Sep 9, 2026

View reviewed changes

ibakshay approved these changes Sep 9, 2026

View reviewed changes

ibakshay added this pull request to the merge queue Sep 9, 2026

Merged via the queue into perses:main with commit 6df72c9 Sep 9, 2026
17 checks passed

		// Copyright The Perses Authors
		// Licensed under the Apache License, Version 2.0 (the "License");

Conversation

adrianSepiol commented Jul 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Screenshots

Checklist

UI Changes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jgbernalp commented Jul 24, 2026

Uh oh!

adrianSepiol commented Jul 30, 2026

Uh oh!

ibakshay left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ibakshay commented Aug 18, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ibakshay commented Aug 18, 2026

Uh oh!

Uh oh!

Uh oh!

shahrokni commented Aug 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

adrianSepiol commented Jul 15, 2026 •

edited

Loading

ibakshay left a comment •

edited

Loading

shahrokni commented Aug 19, 2026 •

edited

Loading