diff --git a/devenv/dev-dashboards/panel-canvas/canvas-connection-examples.json b/devenv/dev-dashboards/panel-canvas/canvas-connection-examples.json
index 7e4f1202bc4..784bfb2c865 100644
--- a/devenv/dev-dashboards/panel-canvas/canvas-connection-examples.json
+++ b/devenv/dev-dashboards/panel-canvas/canvas-connection-examples.json
@@ -29,7 +29,7 @@
   "panels": [
     {
       "datasource": {
-        "type": "testdata",
+        "type": "grafana-testdata-datasource",
         "uid": "PD8C576611E62080A"
       },
       "fieldConfig": {
@@ -45,6 +45,2202 @@
                 "color": "green",
                 "value": null
               },
+              {
+                "color": "red",
+                "value": 80
+              }
+            ]
+          }
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 22,
+        "w": 24,
+        "x": 0,
+        "y": 0
+      },
+      "id": 5,
+      "options": {
+        "infinitePan": true,
+        "inlineEditing": false,
+        "panZoom": true,
+        "root": {
+          "background": {
+            "color": {
+              "fixed": "transparent"
+            }
+          },
+          "border": {
+            "color": {
+              "fixed": "dark-green"
+            }
+          },
+          "constraint": {
+            "horizontal": "left",
+            "vertical": "top"
+          },
+          "elements": [
+            {
+              "background": {
+                "color": {
+                  "fixed": "transparent"
+                }
+              },
+              "border": {
+                "color": {
+                  "fixed": "dark-green"
+                },
+                "radius": 0,
+                "width": 3
+              },
+              "config": {
+                "align": "center",
+                "color": {
+                  "fixed": "text"
+                },
+                "size": 20,
+                "text": {
+                  "fixed": "Library"
+                },
+                "valign": "middle"
+              },
+              "constraint": {
+                "horizontal": "left",
+                "vertical": "top"
+              },
+              "name": "Element 39",
+              "placement": {
+                "height": 118,
+                "left": 1584,
+                "top": 259,
+                "width": 204
+              },
+              "type": "rectangle"
+            },
+            {
+              "background": {
+                "color": {
+                  "fixed": "transparent"
+                }
+              },
+              "border": {
+                "color": {
+                  "fixed": "dark-blue"
+                },
+                "radius": 0,
+                "width": 3
+              },
+              "config": {
+                "align": "center",
+                "color": {
+                  "fixed": "light-blue"
+                },
+                "size": 20,
+                "text": {
+                  "fixed": "Viewport"
+                },
+                "valign": "bottom"
+              },
+              "connections": [
+                {
+                  "color": {
+                    "fixed": "rgb(204, 204, 220)"
+                  },
+                  "path": "straight",
+                  "size": {
+                    "fixed": 2,
+                    "max": 10,
+                    "min": 1
+                  },
+                  "source": {
+                    "x": -0.8229007633587786,
+                    "y": 0.27741935483870966
+                  },
+                  "target": {
+                    "x": 1.0112359550561798,
+                    "y": -0.012987012987012988
+                  },
+                  "targetName": "Element 20",
+                  "vertices": [
+                    {
+                      "x": -0.18181818181818182,
+                      "y": 0
+                    },
+                    {
+                      "x": -0.18181818181818182,
+                      "y": 1
+                    }
+                  ]
+                },
+                {
+                  "color": {
+                    "fixed": "rgb(204, 204, 220)"
+                  },
+                  "path": "straight",
+                  "radius": {
+                    "fixed": 25,
+                    "max": 200,
+                    "min": 0
+                  },
+                  "size": {
+                    "fixed": 2,
+                    "max": 10,
+                    "min": 1
+                  },
+                  "source": {
+                    "x": -0.3068702290076336,
+                    "y": -0.47419354838709676
+                  },
+                  "target": {
+                    "x": 1.0112359550561798,
+                    "y": -0.4805194805194805
+                  },
+                  "targetName": "Element 20",
+                  "vertices": [
+                    {
+                      "x": 0.415,
+                      "y": 0
+                    },
+                    {
+                      "x": 0.4775,
+                      "y": 1
+                    }
+                  ]
+                },
+                {
+                  "color": {
+                    "fixed": "rgb(204, 204, 220)"
+                  },
+                  "direction": "reverse",
+                  "path": "straight",
+                  "radius": {
+                    "fixed": 0,
+                    "max": 200,
+                    "min": 0
+                  },
+                  "size": {
+                    "fixed": 2,
+                    "max": 10,
+                    "min": 1
+                  },
+                  "source": {
+                    "x": 0.7903930131004366,
+                    "y": -0.36935483870967745
+                  },
+                  "target": {
+                    "x": 1.0120481927710843,
+                    "y": 0.024691358024691357
+                  },
+                  "targetName": "Element 35",
+                  "vertices": [
+                    {
+                      "x": -0.1607843137254902,
+                      "y": 0
+                    },
+                    {
+                      "x": -0.1607843137254902,
+                      "y": 1
+                    }
+                  ]
+                }
+              ],
+              "constraint": {
+                "horizontal": "left",
+                "vertical": "top"
+              },
+              "name": "Element 32",
+              "placement": {
+                "height": 620,
+                "left": 1163,
+                "top": 76,
+                "width": 687
+              },
+              "type": "rectangle"
+            },
+            {
+              "background": {
+                "color": {
+                  "fixed": "transparent"
+                }
+              },
+              "border": {
+                "color": {
+                  "fixed": "#464646"
+                },
+                "radius": 0,
+                "width": 2
+              },
+              "config": {
+                "align": "center",
+                "color": {
+                  "fixed": "#505050"
+                },
+                "size": 20,
+                "text": {
+                  "fixed": "Equipment State"
+                },
+                "valign": "bottom"
+              },
+              "constraint": {
+                "horizontal": "left",
+                "vertical": "top"
+              },
+              "name": "Element 36",
+              "placement": {
+                "height": 229,
+                "left": 1340,
+                "top": 386,
+                "width": 438
+              },
+              "type": "rectangle"
+            },
+            {
+              "background": {
+                "color": {
+                  "fixed": "#D9D9D9"
+                }
+              },
+              "border": {
+                "color": {
+                  "fixed": "dark-orange"
+                },
+                "radius": 0,
+                "width": 3
+              },
+              "config": {
+                "align": "center",
+                "color": {
+                  "fixed": "#000000"
+                },
+                "size": 20,
+                "text": {
+                  "fixed": "Subscriptions"
+                },
+                "valign": "middle"
+              },
+              "constraint": {
+                "horizontal": "left",
+                "vertical": "top"
+              },
+              "name": "Element 28",
+              "placement": {
+                "height": 77,
+                "left": 831,
+                "top": 339,
+                "width": 178
+              },
+              "type": "rectangle"
+            },
+            {
+              "background": {
+                "color": {
+                  "fixed": "#D9D9D9"
+                }
+              },
+              "border": {
+                "color": {
+                  "fixed": "dark-orange"
+                },
+                "radius": 0,
+                "width": 3
+              },
+              "config": {
+                "align": "center",
+                "color": {
+                  "fixed": "#000000"
+                },
+                "size": 20,
+                "text": {
+                  "fixed": "Subscriptions"
+                },
+                "valign": "middle"
+              },
+              "constraint": {
+                "horizontal": "left",
+                "vertical": "top"
+              },
+              "name": "Element 27",
+              "placement": {
+                "height": 77,
+                "left": 821,
+                "top": 329,
+                "width": 178
+              },
+              "type": "rectangle"
+            },
+            {
+              "background": {
+                "color": {
+                  "fixed": "#D9D9D9"
+                }
+              },
+              "border": {
+                "color": {
+                  "fixed": "light-blue"
+                },
+                "radius": 28,
+                "width": 3
+              },
+              "config": {
+                "align": "center",
+                "color": {
+                  "fixed": "#000000"
+                },
+                "size": 20,
+                "text": {
+                  "fixed": "Mutation"
+                },
+                "valign": "middle"
+              },
+              "constraint": {
+                "horizontal": "left",
+                "vertical": "top"
+              },
+              "name": "Element 26",
+              "placement": {
+                "height": 77,
+                "left": 583,
+                "top": 455,
+                "width": 178
+              },
+              "type": "rectangle"
+            },
+            {
+              "background": {
+                "color": {
+                  "fixed": "#D9D9D9"
+                }
+              },
+              "border": {
+                "color": {
+                  "fixed": "light-blue"
+                },
+                "radius": 28,
+                "width": 3
+              },
+              "config": {
+                "align": "center",
+                "color": {
+                  "fixed": "#000000"
+                },
+                "size": 20,
+                "text": {
+                  "fixed": "Mutation"
+                },
+                "valign": "middle"
+              },
+              "constraint": {
+                "horizontal": "left",
+                "vertical": "top"
+              },
+              "name": "Element 25",
+              "placement": {
+                "height": 77,
+                "left": 573,
+                "top": 445,
+                "width": 178
+              },
+              "type": "rectangle"
+            },
+            {
+              "background": {
+                "color": {
+                  "fixed": "#d9d9d9"
+                }
+              },
+              "border": {
+                "color": {
+                  "fixed": "light-blue"
+                },
+                "radius": 28,
+                "width": 3
+              },
+              "config": {
+                "align": "center",
+                "color": {
+                  "fixed": "#000000"
+                },
+                "size": 20,
+                "text": {
+                  "fixed": "Subscription"
+                },
+                "valign": "middle"
+              },
+              "constraint": {
+                "horizontal": "left",
+                "vertical": "top"
+              },
+              "name": "Element 24",
+              "placement": {
+                "height": 77,
+                "left": 583,
+                "top": 338,
+                "width": 178
+              },
+              "type": "rectangle"
+            },
+            {
+              "background": {
+                "color": {
+                  "fixed": "#D9D9D9"
+                }
+              },
+              "border": {
+                "color": {
+                  "fixed": "light-blue"
+                },
+                "radius": 28,
+                "width": 3
+              },
+              "config": {
+                "align": "center",
+                "color": {
+                  "fixed": "#000000"
+                },
+                "size": 20,
+                "text": {
+                  "fixed": "Subscription"
+                },
+                "valign": "middle"
+              },
+              "connections": [
+                {
+                  "color": {
+                    "fixed": "rgb(204, 204, 220)"
+                  },
+                  "path": "straight",
+                  "size": {
+                    "fixed": 2,
+                    "max": 10,
+                    "min": 1
+                  },
+                  "source": {
+                    "x": 0.8876404494382022,
+                    "y": 0.2597402597402597
+                  },
+                  "target": {
+                    "x": -0.9775280898876404,
+                    "y": -0.012987012987012988
+                  },
+                  "targetName": "Element 19"
+                }
+              ],
+              "constraint": {
+                "horizontal": "left",
+                "vertical": "top"
+              },
+              "name": "Element 23",
+              "placement": {
+                "height": 77,
+                "left": 573,
+                "top": 328,
+                "width": 178
+              },
+              "type": "rectangle"
+            },
+            {
+              "background": {
+                "color": {
+                  "fixed": "#D9D9D9"
+                }
+              },
+              "border": {
+                "color": {
+                  "fixed": "light-blue"
+                },
+                "radius": 28,
+                "width": 3
+              },
+              "config": {
+                "align": "center",
+                "color": {
+                  "fixed": "#000000"
+                },
+                "size": 20,
+                "text": {
+                  "fixed": "Query"
+                },
+                "valign": "middle"
+              },
+              "constraint": {
+                "horizontal": "left",
+                "vertical": "top"
+              },
+              "name": "Element 22",
+              "placement": {
+                "height": 77,
+                "left": 583,
+                "top": 221,
+                "width": 178
+              },
+              "type": "rectangle"
+            },
+            {
+              "background": {
+                "color": {
+                  "fixed": "#D9D9D9"
+                }
+              },
+              "border": {
+                "color": {
+                  "fixed": "light-blue"
+                },
+                "radius": 28,
+                "width": 3
+              },
+              "config": {
+                "align": "center",
+                "color": {
+                  "fixed": "#000000"
+                },
+                "size": 20,
+                "text": {
+                  "fixed": "Query"
+                },
+                "valign": "middle"
+              },
+              "connections": [
+                {
+                  "color": {
+                    "fixed": "rgb(204, 204, 220)"
+                  },
+                  "path": "straight",
+                  "size": {
+                    "fixed": 2,
+                    "max": 10,
+                    "min": 1
+                  },
+                  "source": {
+                    "x": 0.8876404494382022,
+                    "y": 0.2597402597402597
+                  },
+                  "target": {
+                    "x": -0.9887640449438202,
+                    "y": -0.06493506493506493
+                  },
+                  "targetName": "Element 18"
+                }
+              ],
+              "constraint": {
+                "horizontal": "left",
+                "vertical": "top"
+              },
+              "name": "Element 21",
+              "placement": {
+                "height": 77,
+                "left": 573,
+                "top": 211,
+                "width": 178
+              },
+              "type": "rectangle"
+            },
+            {
+              "background": {
+                "color": {
+                  "fixed": "#D9D9D9"
+                }
+              },
+              "border": {
+                "color": {
+                  "fixed": "dark-blue"
+                },
+                "radius": 28,
+                "width": 3
+              },
+              "config": {
+                "align": "center",
+                "color": {
+                  "fixed": "#000000"
+                },
+                "size": 20,
+                "text": {
+                  "fixed": "Controllers"
+                },
+                "valign": "middle"
+              },
+              "connections": [
+                {
+                  "color": {
+                    "fixed": "rgb(204, 204, 220)"
+                  },
+                  "path": "straight",
+                  "size": {
+                    "fixed": 2,
+                    "max": 10,
+                    "min": 1
+                  },
+                  "source": {
+                    "x": -0.2247191011235955,
+                    "y": -0.4805194805194805
+                  },
+                  "target": {
+                    "x": 0.011235955056179775,
+                    "y": 0.922077922077922
+                  },
+                  "targetName": "Element 12"
+                },
+                {
+                  "color": {
+                    "fixed": "rgb(204, 204, 220)"
+                  },
+                  "path": "straight",
+                  "size": {
+                    "fixed": 2,
+                    "max": 10,
+                    "min": 1
+                  },
+                  "source": {
+                    "x": 0.7752808988764045,
+                    "y": 0.5194805194805194
+                  },
+                  "target": {
+                    "x": -1.0833333333333333,
+                    "y": 0.020618556701030927
+                  },
+                  "targetName": "Element 15"
+                }
+              ],
+              "constraint": {
+                "horizontal": "left",
+                "vertical": "top"
+              },
+              "name": "Element 11",
+              "placement": {
+                "height": 77,
+                "left": 273,
+                "top": 338,
+                "width": 178
+              },
+              "type": "rectangle"
+            },
+            {
+              "background": {
+                "color": {
+                  "fixed": "#D9D9D9"
+                }
+              },
+              "border": {
+                "color": {
+                  "fixed": "dark-blue"
+                },
+                "radius": 28,
+                "width": 3
+              },
+              "config": {
+                "align": "center",
+                "color": {
+                  "fixed": "#000000"
+                },
+                "size": 20,
+                "text": {
+                  "fixed": "Controllers"
+                },
+                "valign": "middle"
+              },
+              "constraint": {
+                "horizontal": "left",
+                "vertical": "top"
+              },
+              "name": "Element 10",
+              "placement": {
+                "height": 77,
+                "left": 263,
+                "top": 328,
+                "width": 178
+              },
+              "type": "rectangle"
+            },
+            {
+              "background": {
+                "color": {
+                  "fixed": "light-orange"
+                },
+                "size": "contain"
+              },
+              "border": {
+                "color": {
+                  "fixed": "transparent"
+                },
+                "radius": 0,
+                "width": 5
+              },
+              "config": {
+                "fill": {
+                  "fixed": "#D9D9D9"
+                },
+                "path": {
+                  "field": "",
+                  "fixed": "https://upload.wikimedia.org/wikipedia/commons/c/c8/Forme_ligne.svg",
+                  "mode": "fixed"
+                }
+              },
+              "connections": [],
+              "constraint": {
+                "horizontal": "left",
+                "vertical": "top"
+              },
+              "name": "Element 2",
+              "placement": {
+                "height": 96,
+                "left": 1390,
+                "top": 461,
+                "width": 100
+              },
+              "type": "icon"
+            },
+            {
+              "background": {
+                "color": {
+                  "fixed": "transparent"
+                }
+              },
+              "border": {},
+              "config": {
+                "align": "center",
+                "color": {
+                  "fixed": "#000000"
+                },
+                "text": {
+                  "fixed": ""
+                },
+                "valign": "middle"
+              },
+              "connections": [],
+              "constraint": {
+                "horizontal": "left",
+                "vertical": "top"
+              },
+              "name": "Element 3",
+              "placement": {
+                "height": 30,
+                "left": 1390,
+                "top": 423,
+                "width": 30
+              },
+              "type": "ellipse"
+            },
+            {
+              "background": {
+                "color": {
+                  "fixed": "transparent"
+                }
+              },
+              "border": {},
+              "config": {
+                "align": "center",
+                "color": {
+                  "fixed": "#000000"
+                },
+                "text": {
+                  "fixed": ""
+                },
+                "valign": "middle"
+              },
+              "constraint": {
+                "horizontal": "left",
+                "vertical": "top"
+              },
+              "name": "Element 4",
+              "placement": {
+                "height": 30,
+                "left": 1460,
+                "top": 423,
+                "width": 30
+              },
+              "type": "ellipse"
+            },
+            {
+              "background": {
+                "color": {
+                  "fixed": "#D9D9D9"
+                }
+              },
+              "border": {
+                "color": {
+                  "fixed": "dark-blue"
+                },
+                "radius": 28,
+                "width": 3
+              },
+              "config": {
+                "align": "center",
+                "color": {
+                  "fixed": "#000000"
+                },
+                "size": 20,
+                "text": {
+                  "fixed": "Controllers"
+                },
+                "valign": "middle"
+              },
+              "connections": [
+                {
+                  "color": {
+                    "fixed": "green"
+                  },
+                  "path": "straight",
+                  "size": {
+                    "fixed": 2,
+                    "max": 10,
+                    "min": 1
+                  },
+                  "source": {
+                    "x": 1,
+                    "y": 0.5
+                  },
+                  "target": {
+                    "x": -1.0112359550561798,
+                    "y": -0.012987012987012988
+                  },
+                  "targetName": "Element 16",
+                  "vertices": [
+                    {
+                      "x": 0.42748091603053434,
+                      "y": 0
+                    },
+                    {
+                      "x": 0.42748091603053434,
+                      "y": 1
+                    }
+                  ]
+                }
+              ],
+              "constraint": {
+                "horizontal": "left",
+                "vertical": "top"
+              },
+              "name": "Element 6",
+              "placement": {
+                "height": 77,
+                "left": 253,
+                "top": 318,
+                "width": 178
+              },
+              "type": "rectangle"
+            },
+            {
+              "background": {
+                "color": {
+                  "fixed": "#D9D9D9"
+                }
+              },
+              "border": {
+                "color": {
+                  "fixed": "dark-purple"
+                },
+                "width": 4
+              },
+              "config": {
+                "align": "center",
+                "color": {
+                  "fixed": "#000000"
+                },
+                "size": 20,
+                "text": {
+                  "fixed": "DB"
+                },
+                "valign": "middle"
+              },
+              "connections": [
+                {
+                  "color": {
+                    "fixed": "rgb(204, 204, 220)"
+                  },
+                  "direction": "both",
+                  "lineStyle": "dashed",
+                  "path": "straight",
+                  "radius": {
+                    "fixed": 50,
+                    "max": 200,
+                    "min": 0
+                  },
+                  "size": {
+                    "fixed": 2,
+                    "max": 10,
+                    "min": 1
+                  },
+                  "source": {
+                    "x": 0,
+                    "y": -1
+                  },
+                  "target": {
+                    "x": -0.5168539325842697,
+                    "y": 1
+                  },
+                  "targetName": "Element 6",
+                  "vertices": [
+                    {
+                      "x": 0,
+                      "y": 0.5263157894736842
+                    }
+                  ]
+                },
+                {
+                  "color": {
+                    "fixed": "rgb(204, 204, 220)"
+                  },
+                  "direction": "reverse",
+                  "lineStyle": "dashed",
+                  "path": "straight",
+                  "radius": {
+                    "fixed": 15,
+                    "max": 200,
+                    "min": 0
+                  },
+                  "size": {
+                    "fixed": 2,
+                    "max": 10,
+                    "min": 1
+                  },
+                  "source": {
+                    "x": 0,
+                    "y": 1
+                  },
+                  "target": {
+                    "x": -1.0112359550561798,
+                    "y": -0.012987012987012988
+                  },
+                  "targetName": "Element 30",
+                  "vertices": [
+                    {
+                      "x": 0,
+                      "y": 1
+                    }
+                  ]
+                }
+              ],
+              "constraint": {
+                "horizontal": "left",
+                "vertical": "top"
+              },
+              "name": "Element 9",
+              "placement": {
+                "height": 75,
+                "left": 61,
+                "top": 148,
+                "width": 178
+              },
+              "type": "parallelogram"
+            },
+            {
+              "background": {
+                "color": {
+                  "fixed": "#D9D9D9"
+                }
+              },
+              "border": {
+                "color": {
+                  "fixed": "dark-blue"
+                },
+                "radius": 28,
+                "width": 3
+              },
+              "config": {
+                "align": "center",
+                "color": {
+                  "fixed": "#000000"
+                },
+                "size": 20,
+                "text": {
+                  "fixed": "Recipes"
+                },
+                "valign": "middle"
+              },
+              "connections": [
+                {
+                  "color": {
+                    "fixed": "rgb(204, 204, 220)"
+                  },
+                  "direction": "both",
+                  "path": "straight",
+                  "size": {
+                    "fixed": 1,
+                    "max": 10,
+                    "min": 1
+                  },
+                  "source": {
+                    "x": 1,
+                    "y": 0
+                  },
+                  "target": {
+                    "x": -1.0112359550561798,
+                    "y": -0.012987012987012988
+                  },
+                  "targetName": "Element 6"
+                }
+              ],
+              "constraint": {
+                "horizontal": "left",
+                "vertical": "top"
+              },
+              "name": "Element 7",
+              "placement": {
+                "height": 77,
+                "left": 38,
+                "top": 318,
+                "width": 178
+              },
+              "type": "rectangle"
+            },
+            {
+              "background": {
+                "color": {
+                  "fixed": "#D9D9D9"
+                }
+              },
+              "border": {
+                "color": {
+                  "fixed": "dark-red"
+                },
+                "width": 4
+              },
+              "config": {
+                "align": "center",
+                "color": {
+                  "fixed": "#000000"
+                },
+                "size": 20,
+                "text": {
+                  "fixed": "Queue"
+                },
+                "valign": "middle"
+              },
+              "connections": [
+                {
+                  "color": {
+                    "fixed": "rgb(204, 204, 220)"
+                  },
+                  "direction": "both",
+                  "path": "straight",
+                  "size": {
+                    "fixed": 2,
+                    "max": 10,
+                    "min": 1
+                  },
+                  "source": {
+                    "x": 0,
+                    "y": -1
+                  },
+                  "target": {
+                    "x": 0.011235955056179775,
+                    "y": 1.025974025974026
+                  },
+                  "targetName": "Element 6"
+                }
+              ],
+              "constraint": {
+                "horizontal": "left",
+                "vertical": "top"
+              },
+              "name": "Element 8",
+              "placement": {
+                "height": 75,
+                "left": 253,
+                "top": 148,
+                "width": 178
+              },
+              "type": "parallelogram"
+            },
+            {
+              "background": {
+                "color": {
+                  "fixed": "#D9D9D9"
+                }
+              },
+              "border": {
+                "color": {
+                  "fixed": "#5b5959"
+                },
+                "radius": 28,
+                "width": 3
+              },
+              "config": {
+                "align": "center",
+                "color": {
+                  "fixed": "#000000"
+                },
+                "size": 20,
+                "text": {
+                  "fixed": "Data Pipeline"
+                },
+                "valign": "middle"
+              },
+              "constraint": {
+                "horizontal": "left",
+                "vertical": "top"
+              },
+              "name": "Element 12",
+              "placement": {
+                "height": 77,
+                "left": 253,
+                "top": 455,
+                "width": 178
+              },
+              "type": "rectangle"
+            },
+            {
+              "background": {
+                "color": {
+                  "fixed": "#D9D9D9"
+                }
+              },
+              "border": {
+                "color": {
+                  "fixed": "dark-orange"
+                },
+                "radius": 28,
+                "width": 3
+              },
+              "config": {
+                "align": "center",
+                "color": {
+                  "fixed": "#000000"
+                },
+                "size": 20,
+                "text": {
+                  "fixed": "Equipment"
+                },
+                "valign": "middle"
+              },
+              "connections": [
+                {
+                  "color": {
+                    "fixed": "rgb(204, 204, 220)"
+                  },
+                  "direction": "both",
+                  "path": "straight",
+                  "size": {
+                    "fixed": 1,
+                    "max": 10,
+                    "min": 1
+                  },
+                  "source": {
+                    "x": -1,
+                    "y": 0
+                  },
+                  "target": {
+                    "x": -1.0224719101123596,
+                    "y": 0.013333333333333334
+                  },
+                  "targetName": "Element 9",
+                  "vertices": [
+                    {
+                      "x": -0.9523809523809523,
+                      "y": 0
+                    },
+                    {
+                      "x": -0.9523809523809523,
+                      "y": 1
+                    }
+                  ]
+                }
+              ],
+              "constraint": {
+                "horizontal": "left",
+                "vertical": "top"
+              },
+              "name": "Element 13",
+              "placement": {
+                "height": 77,
+                "left": 38,
+                "top": 455,
+                "width": 178
+              },
+              "type": "rectangle"
+            },
+            {
+              "background": {
+                "color": {
+                  "fixed": "#D9D9D9"
+                }
+              },
+              "border": {
+                "color": {
+                  "fixed": "light-blue"
+                },
+                "radius": 28,
+                "width": 3
+              },
+              "config": {
+                "align": "center",
+                "color": {
+                  "fixed": "#000000"
+                },
+                "size": 20,
+                "text": {
+                  "fixed": "Subscription"
+                },
+                "valign": "middle"
+              },
+              "constraint": {
+                "horizontal": "left",
+                "vertical": "top"
+              },
+              "name": "Element 14",
+              "placement": {
+                "height": 77,
+                "left": 563,
+                "top": 318,
+                "width": 178
+              },
+              "type": "rectangle"
+            },
+            {
+              "background": {
+                "color": {
+                  "fixed": "super-light-blue"
+                }
+              },
+              "border": {
+                "color": {
+                  "fixed": "light-blue"
+                },
+                "radius": 28,
+                "width": 3
+              },
+              "config": {
+                "align": "center",
+                "color": {
+                  "fixed": "#000000"
+                },
+                "size": 20,
+                "text": {
+                  "fixed": "Filter"
+                },
+                "valign": "middle"
+              },
+              "constraint": {
+                "horizontal": "left",
+                "vertical": "top"
+              },
+              "name": "Element 15",
+              "placement": {
+                "height": 36,
+                "left": 497,
+                "rotation": 90,
+                "top": 339,
+                "width": 97
+              },
+              "type": "rectangle"
+            },
+            {
+              "background": {
+                "color": {
+                  "fixed": "#D9D9D9"
+                }
+              },
+              "border": {
+                "color": {
+                  "fixed": "light-blue"
+                },
+                "radius": 28,
+                "width": 3
+              },
+              "config": {
+                "align": "center",
+                "color": {
+                  "fixed": "#000000"
+                },
+                "size": 20,
+                "text": {
+                  "fixed": "Query"
+                },
+                "valign": "middle"
+              },
+              "constraint": {
+                "horizontal": "left",
+                "vertical": "top"
+              },
+              "name": "Element 16",
+              "placement": {
+                "height": 77,
+                "left": 563,
+                "top": 201,
+                "width": 178
+              },
+              "type": "rectangle"
+            },
+            {
+              "background": {
+                "color": {
+                  "fixed": "#D9D9D9"
+                }
+              },
+              "border": {
+                "color": {
+                  "fixed": "light-blue"
+                },
+                "radius": 28,
+                "width": 3
+              },
+              "config": {
+                "align": "center",
+                "color": {
+                  "fixed": "#000000"
+                },
+                "size": 20,
+                "text": {
+                  "fixed": "Mutation"
+                },
+                "valign": "middle"
+              },
+              "connections": [
+                {
+                  "color": {
+                    "fixed": "dark-orange"
+                  },
+                  "path": "straight",
+                  "size": {
+                    "fixed": 2,
+                    "max": 10,
+                    "min": 1
+                  },
+                  "source": {
+                    "x": -1,
+                    "y": 0
+                  },
+                  "target": {
+                    "x": 1.0224719101123596,
+                    "y": -0.45454545454545453
+                  },
+                  "targetName": "Element 6",
+                  "vertices": [
+                    {
+                      "x": 0.5692307692307692,
+                      "y": 0
+                    },
+                    {
+                      "x": 0.5692307692307692,
+                      "y": 1
+                    }
+                  ]
+                }
+              ],
+              "constraint": {
+                "horizontal": "left",
+                "vertical": "top"
+              },
+              "name": "Element 17",
+              "placement": {
+                "height": 77,
+                "left": 563,
+                "top": 435,
+                "width": 178
+              },
+              "type": "rectangle"
+            },
+            {
+              "background": {
+                "color": {
+                  "fixed": "#D9D9D9"
+                }
+              },
+              "border": {
+                "color": {
+                  "fixed": "dark-orange"
+                },
+                "radius": 0,
+                "width": 3
+              },
+              "config": {
+                "align": "center",
+                "color": {
+                  "fixed": "#000000"
+                },
+                "size": 20,
+                "text": {
+                  "fixed": "Initial State"
+                },
+                "valign": "middle"
+              },
+              "connections": [
+                {
+                  "color": {
+                    "fixed": "rgb(204, 204, 220)"
+                  },
+                  "path": "straight",
+                  "size": {
+                    "fixed": 2,
+                    "max": 10,
+                    "min": 1
+                  },
+                  "source": {
+                    "x": 1,
+                    "y": 0
+                  },
+                  "target": {
+                    "x": -0.96,
+                    "y": 0.4583333333333333
+                  },
+                  "targetName": "Element 2",
+                  "vertices": [
+                    {
+                      "x": 0.3349875930521092,
+                      "y": 0
+                    },
+                    {
+                      "x": 0.3349875930521092,
+                      "y": 0.12727272727272726
+                    },
+                    {
+                      "x": 0.826302729528536,
+                      "y": 0.13131313131313133
+                    },
+                    {
+                      "x": 0.826302729528536,
+                      "y": 1
+                    }
+                  ]
+                },
+                {
+                  "color": {
+                    "fixed": "rgb(204, 204, 220)"
+                  },
+                  "path": "straight",
+                  "size": {
+                    "fixed": 1,
+                    "max": 10,
+                    "min": 1
+                  },
+                  "source": {
+                    "x": 1,
+                    "y": -0.5
+                  },
+                  "target": {
+                    "x": -0.9761904761904762,
+                    "y": 0.5263157894736842
+                  },
+                  "targetName": "Element 34",
+                  "vertices": [
+                    {
+                      "x": 0.5033557046979866,
+                      "y": 0
+                    },
+                    {
+                      "x": 0.5033557046979866,
+                      "y": 1
+                    }
+                  ]
+                }
+              ],
+              "constraint": {
+                "horizontal": "left",
+                "vertical": "top"
+              },
+              "name": "Element 18",
+              "placement": {
+                "height": 77,
+                "left": 811,
+                "top": 201,
+                "width": 178
+              },
+              "type": "rectangle"
+            },
+            {
+              "background": {
+                "color": {
+                  "fixed": "#D9D9D9"
+                }
+              },
+              "border": {
+                "color": {
+                  "fixed": "dark-orange"
+                },
+                "radius": 0,
+                "width": 3
+              },
+              "config": {
+                "align": "center",
+                "color": {
+                  "fixed": "#000000"
+                },
+                "size": 20,
+                "text": {
+                  "fixed": "Subscriptions"
+                },
+                "valign": "middle"
+              },
+              "constraint": {
+                "horizontal": "left",
+                "vertical": "top"
+              },
+              "name": "Element 19",
+              "placement": {
+                "height": 77,
+                "left": 811,
+                "top": 319,
+                "width": 178
+              },
+              "type": "rectangle"
+            },
+            {
+              "background": {
+                "color": {
+                  "fixed": "#D9D9D9"
+                }
+              },
+              "border": {
+                "color": {
+                  "fixed": "dark-orange"
+                },
+                "radius": 0,
+                "width": 3
+              },
+              "config": {
+                "align": "center",
+                "color": {
+                  "fixed": "#000000"
+                },
+                "size": 20,
+                "text": {
+                  "fixed": "Controls"
+                },
+                "valign": "middle"
+              },
+              "connections": [
+                {
+                  "color": {
+                    "fixed": "rgb(204, 204, 220)"
+                  },
+                  "path": "straight",
+                  "size": {
+                    "fixed": 2,
+                    "max": 10,
+                    "min": 1
+                  },
+                  "source": {
+                    "x": -1,
+                    "y": 0
+                  },
+                  "target": {
+                    "x": 1.0112359550561798,
+                    "y": 0.012987012987012988
+                  },
+                  "targetName": "Element 17"
+                }
+              ],
+              "constraint": {
+                "horizontal": "left",
+                "vertical": "top"
+              },
+              "name": "Element 20",
+              "placement": {
+                "height": 77,
+                "left": 811,
+                "top": 435,
+                "width": 178
+              },
+              "type": "rectangle"
+            },
+            {
+              "background": {
+                "color": {
+                  "fixed": "super-light-blue"
+                }
+              },
+              "border": {
+                "color": {
+                  "fixed": "orange"
+                },
+                "radius": 0,
+                "width": 3
+              },
+              "config": {
+                "align": "center",
+                "color": {
+                  "fixed": "#000000"
+                },
+                "size": 20,
+                "text": {
+                  "fixed": "Filter"
+                },
+                "valign": "middle"
+              },
+              "connections": [
+                {
+                  "color": {
+                    "fixed": "rgb(204, 204, 220)"
+                  },
+                  "path": "straight",
+                  "size": {
+                    "fixed": 2,
+                    "max": 10,
+                    "min": 1
+                  },
+                  "source": {
+                    "x": 1,
+                    "y": -0.5
+                  },
+                  "target": {
+                    "x": -1.0238095238095237,
+                    "y": 0.10526315789473684
+                  },
+                  "targetName": "Element 33"
+                },
+                {
+                  "color": {
+                    "fixed": "rgb(204, 204, 220)"
+                  },
+                  "path": "straight",
+                  "size": {
+                    "fixed": 1,
+                    "max": 10,
+                    "min": 1
+                  },
+                  "source": {
+                    "x": 1,
+                    "y": 0.5
+                  },
+                  "target": {
+                    "x": -1,
+                    "y": 0.05263157894736842
+                  },
+                  "targetName": "Element 34",
+                  "vertices": [
+                    {
+                      "x": 0.5246636771300448,
+                      "y": 0
+                    },
+                    {
+                      "x": 0.5246636771300448,
+                      "y": 1
+                    }
+                  ]
+                },
+                {
+                  "color": {
+                    "fixed": "rgb(204, 204, 220)"
+                  },
+                  "path": "straight",
+                  "size": {
+                    "fixed": 2,
+                    "max": 10,
+                    "min": 1
+                  },
+                  "source": {
+                    "x": 1,
+                    "y": 0
+                  },
+                  "target": {
+                    "x": -0.98,
+                    "y": -0.10416666666666667
+                  },
+                  "targetName": "Element 2",
+                  "vertices": [
+                    {
+                      "x": 0.7564979480164159,
+                      "y": 0
+                    },
+                    {
+                      "x": 0.7564979480164159,
+                      "y": 1
+                    }
+                  ]
+                }
+              ],
+              "constraint": {
+                "horizontal": "left",
+                "vertical": "top"
+              },
+              "name": "Element 29",
+              "placement": {
+                "height": 36,
+                "left": 959,
+                "rotation": 270,
+                "top": 340,
+                "width": 97
+              },
+              "type": "rectangle"
+            },
+            {
+              "background": {
+                "color": {
+                  "fixed": "transparent"
+                }
+              },
+              "border": {
+                "color": {
+                  "fixed": "green"
+                },
+                "radius": 28,
+                "width": 3
+              },
+              "config": {
+                "align": "center",
+                "color": {
+                  "fixed": "text"
+                },
+                "size": 20,
+                "text": {
+                  "fixed": "CAD"
+                },
+                "valign": "middle"
+              },
+              "connections": [
+                {
+                  "color": {
+                    "fixed": "rgb(204, 204, 220)"
+                  },
+                  "lineStyle": "dashed",
+                  "path": "straight",
+                  "size": {
+                    "fixed": 2,
+                    "max": 10,
+                    "min": 1
+                  },
+                  "source": {
+                    "x": 1,
+                    "y": 0
+                  },
+                  "target": {
+                    "x": -1.0112359550561798,
+                    "y": -0.012987012987012988
+                  },
+                  "targetName": "Element 31"
+                },
+                {
+                  "color": {
+                    "fixed": "rgb(204, 204, 220)"
+                  },
+                  "lineStyle": "dashed",
+                  "path": "straight",
+                  "radius": {
+                    "fixed": 15,
+                    "max": 200,
+                    "min": 0
+                  },
+                  "size": {
+                    "fixed": 2,
+                    "max": 10,
+                    "min": 1
+                  },
+                  "source": {
+                    "x": 0,
+                    "y": 1
+                  },
+                  "target": {
+                    "x": -0.029411764705882353,
+                    "y": 1
+                  },
+                  "targetName": "Element 38",
+                  "vertices": [
+                    {
+                      "x": 0,
+                      "y": -0.08737864077669903
+                    },
+                    {
+                      "x": 1,
+                      "y": -0.08737864077669903
+                    }
+                  ]
+                }
+              ],
+              "constraint": {
+                "horizontal": "left",
+                "vertical": "top"
+              },
+              "name": "Element 30",
+              "placement": {
+                "height": 77,
+                "left": 564,
+                "top": 43,
+                "width": 178
+              },
+              "type": "rectangle"
+            },
+            {
+              "background": {
+                "color": {
+                  "fixed": "transparent"
+                }
+              },
+              "border": {
+                "color": {
+                  "fixed": "green"
+                },
+                "radius": 28,
+                "width": 3
+              },
+              "config": {
+                "align": "center",
+                "color": {
+                  "fixed": "text"
+                },
+                "size": 20,
+                "text": {
+                  "fixed": "Layout"
+                },
+                "valign": "middle"
+              },
+              "connections": [
+                {
+                  "color": {
+                    "fixed": "rgb(204, 204, 220)"
+                  },
+                  "path": "straight",
+                  "radius": {
+                    "fixed": 15,
+                    "max": 200,
+                    "min": 0
+                  },
+                  "size": {
+                    "fixed": 2,
+                    "max": 10,
+                    "min": 1
+                  },
+                  "source": {
+                    "x": 1,
+                    "y": 0
+                  },
+                  "target": {
+                    "x": -0.9939759036144579,
+                    "y": 0.5061728395061729
+                  },
+                  "targetName": "Element 35",
+                  "vertices": [
+                    {
+                      "x": 0.48,
+                      "y": 0
+                    },
+                    {
+                      "x": 0.48,
+                      "y": 1
+                    }
+                  ]
+                }
+              ],
+              "constraint": {
+                "horizontal": "left",
+                "vertical": "top"
+              },
+              "name": "Element 31",
+              "placement": {
+                "height": 77,
+                "left": 812,
+                "top": 43,
+                "width": 178
+              },
+              "type": "rectangle"
+            },
+            {
+              "background": {
+                "color": {
+                  "fixed": "semi-dark-red"
+                }
+              },
+              "border": {
+                "color": {
+                  "fixed": "dark-orange"
+                },
+                "radius": 0,
+                "width": 3
+              },
+              "config": {
+                "align": "center",
+                "color": {
+                  "fixed": "#000000"
+                },
+                "size": 20,
+                "text": {
+                  "fixed": "Alerts"
+                },
+                "valign": "middle"
+              },
+              "connections": [
+                {
+                  "color": {
+                    "fixed": "rgb(204, 204, 220)"
+                  },
+                  "path": "straight",
+                  "size": {
+                    "fixed": 2,
+                    "max": 10,
+                    "min": 1
+                  },
+                  "source": {
+                    "x": 1,
+                    "y": 0
+                  },
+                  "target": {
+                    "x": 1.0337078651685394,
+                    "y": 0.45454545454545453
+                  },
+                  "targetName": "Element 20",
+                  "vertices": [
+                    {
+                      "x": -0.05240174672489083,
+                      "y": 0
+                    },
+                    {
+                      "x": -0.05240174672489083,
+                      "y": 1
+                    }
+                  ]
+                }
+              ],
+              "constraint": {
+                "horizontal": "left",
+                "vertical": "top"
+              },
+              "name": "Element 33",
+              "placement": {
+                "height": 38,
+                "left": 1137,
+                "top": 367,
+                "width": 84
+              },
+              "type": "rectangle"
+            },
+            {
+              "background": {
+                "color": {
+                  "fixed": "light-green"
+                }
+              },
+              "border": {
+                "color": {
+                  "fixed": "dark-green"
+                },
+                "radius": 0,
+                "width": 3
+              },
+              "config": {
+                "align": "center",
+                "color": {
+                  "fixed": "#000000"
+                },
+                "size": 20,
+                "text": {
+                  "fixed": "Jobs"
+                },
+                "valign": "middle"
+              },
+              "constraint": {
+                "horizontal": "left",
+                "vertical": "top"
+              },
+              "name": "Element 34",
+              "placement": {
+                "height": 38,
+                "left": 1137,
+                "top": 281,
+                "width": 84
+              },
+              "type": "rectangle"
+            },
+            {
+              "background": {
+                "color": {
+                  "fixed": "transparent"
+                }
+              },
+              "border": {
+                "color": {
+                  "fixed": "dark-green"
+                },
+                "radius": 0,
+                "width": 3
+              },
+              "config": {
+                "align": "center",
+                "color": {
+                  "fixed": "light-blue"
+                },
+                "size": 20,
+                "text": {
+                  "fixed": "Viewport State"
+                },
+                "valign": "middle"
+              },
+              "connections": [
+                {
+                  "color": {
+                    "fixed": "rgb(204, 204, 220)"
+                  },
+                  "path": "straight",
+                  "size": {
+                    "fixed": 2,
+                    "max": 10,
+                    "min": 1
+                  },
+                  "source": {
+                    "x": -1,
+                    "y": 0
+                  },
+                  "target": {
+                    "x": 0.19444444444444445,
+                    "y": 0.9896907216494846
+                  },
+                  "targetName": "Element 29",
+                  "vertices": [
+                    {
+                      "x": 1,
+                      "y": 0
+                    }
+                  ]
+                }
+              ],
+              "constraint": {
+                "horizontal": "left",
+                "vertical": "top"
+              },
+              "name": "Element 35",
+              "placement": {
+                "height": 162,
+                "left": 1189,
+                "top": 98,
+                "width": 332
+              },
+              "type": "rectangle"
+            },
+            {
+              "background": {
+                "color": {
+                  "fixed": "semi-dark-blue"
+                },
+                "size": "contain"
+              },
+              "border": {
+                "color": {
+                  "fixed": "transparent"
+                },
+                "radius": 0,
+                "width": 5
+              },
+              "config": {
+                "fill": {
+                  "fixed": "#D9D9D9"
+                },
+                "path": {
+                  "field": "",
+                  "fixed": "img/icons/iot/pump.svg",
+                  "mode": "fixed"
+                }
+              },
+              "constraint": {
+                "horizontal": "left",
+                "vertical": "top"
+              },
+              "name": "Element 37",
+              "placement": {
+                "height": 96,
+                "left": 1601,
+                "top": 461,
+                "width": 100
+              },
+              "type": "icon"
+            },
+            {
+              "background": {
+                "color": {
+                  "fixed": "#222020"
+                }
+              },
+              "border": {
+                "color": {
+                  "fixed": "dark-green"
+                },
+                "radius": 0,
+                "width": 3
+              },
+              "config": {
+                "align": "center",
+                "color": {
+                  "fixed": "text"
+                },
+                "size": 20,
+                "text": {
+                  "fixed": "Library"
+                },
+                "valign": "middle"
+              },
+              "connections": [
+                {
+                  "color": {
+                    "fixed": "rgb(204, 204, 220)"
+                  },
+                  "path": "straight",
+                  "size": {
+                    "fixed": 2,
+                    "max": 10,
+                    "min": 1
+                  },
+                  "source": {
+                    "x": -1,
+                    "y": 0
+                  },
+                  "target": {
+                    "x": -0.4977168949771689,
+                    "y": 1.017467248908297
+                  },
+                  "targetName": "Element 36",
+                  "vertices": [
+                    {
+                      "x": 1,
+                      "y": 0
+                    }
+                  ]
+                }
+              ],
+              "constraint": {
+                "horizontal": "left",
+                "vertical": "top"
+              },
+              "name": "Element 38",
+              "placement": {
+                "height": 118,
+                "left": 1574,
+                "top": 249,
+                "width": 204
+              },
+              "type": "rectangle"
+            }
+          ],
+          "name": "Element 1711297729286",
+          "placement": {
+            "height": 100,
+            "left": 0,
+            "rotation": 0,
+            "top": 0,
+            "width": 100
+          },
+          "type": "frame"
+        },
+        "showAdvancedTypes": true
+      },
+      "pluginVersion": "11.1.0-pre",
+      "targets": [
+        {
+          "datasource": {
+            "type": "grafana-testdata-datasource",
+            "uid": "PD8C576611E62080A"
+          },
+          "refId": "A",
+          "scenarioId": "random_walk",
+          "seriesCount": 1
+        }
+      ],
+      "title": "Flowcharting",
+      "type": "canvas"
+    },
+    {
+      "datasource": {
+        "type": "testdata",
+        "uid": "PD8C576611E62080A"
+      },
+      "fieldConfig": {
+        "defaults": {
+          "color": {
+            "mode": "thresholds"
+          },
+          "mappings": [],
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "green"
+              },
               {
                 "color": "#6ED0E0",
                 "value": 30
@@ -67,11 +2263,13 @@
         "h": 11,
         "w": 15,
         "x": 5,
-        "y": 0
+        "y": 22
       },
       "id": 4,
       "options": {
+        "infinitePan": false,
         "inlineEditing": true,
+        "panZoom": false,
         "root": {
           "background": {
             "color": {
@@ -83,6 +2281,10 @@
               "fixed": "dark-green"
             }
           },
+          "constraint": {
+            "horizontal": "left",
+            "vertical": "top"
+          },
           "elements": [
             {
               "background": {
@@ -628,11 +2830,18 @@
             }
           ],
           "name": "Element 1672955773575",
+          "placement": {
+            "height": 100,
+            "left": 0,
+            "rotation": 0,
+            "top": 0,
+            "width": 100
+          },
           "type": "frame"
         },
         "showAdvancedTypes": false
       },
-      "pluginVersion": "10.1.0-pre",
+      "pluginVersion": "11.1.0-pre",
       "targets": [
         {
           "csvContent": "gateway, product-details, product-reviews, reviews-ratings, details-checkout\n100, 56, 44, 22, 28",
@@ -669,8 +2878,7 @@
             "mode": "absolute",
             "steps": [
               {
-                "color": "green",
-                "value": null
+                "color": "green"
               },
               {
                 "color": "blue",
@@ -694,11 +2902,13 @@
         "h": 15,
         "w": 15,
         "x": 5,
-        "y": 11
+        "y": 33
       },
       "id": 2,
       "options": {
+        "infinitePan": false,
         "inlineEditing": false,
+        "panZoom": false,
         "root": {
           "background": {
             "color": {
@@ -1400,7 +3610,7 @@
         },
         "showAdvancedTypes": false
       },
-      "pluginVersion": "10.1.0-pre",
+      "pluginVersion": "11.1.0-pre",
       "targets": [
         {
           "csvContent": "database_server, server_database, server_region, region_server, database2_server, server_database2\n10, 53, 35, 12, 22, 81",
@@ -1418,7 +3628,7 @@
   ],
   "refresh": "",
   "revision": 1,
-  "schemaVersion": 38,
+  "schemaVersion": 39,
   "tags": [
     "gdev",
     "panel-tests",
@@ -1431,10 +3641,11 @@
     "from": "now-6h",
     "to": "now"
   },
+  "timeRangeUpdatedDuringEditOrView": false,
   "timepicker": {},
   "timezone": "",
   "title": "Panel Tests - Canvas Connection Examples",
   "uid": "Pu8lwQAVz",
-  "version": 3,
+  "version": 6,
   "weekStart": ""
 }
\ No newline at end of file