[FEATURE] Add canvas panel plugin

canvas/.cjs.swcrc

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true
+    },
+    "target": "es2022",
+    "transform": {
+      "react": {
+        "runtime": "automatic",
+        "useBuiltins": true
+      }
+    }
+  },
+  "module": {
+    "type": "commonjs"
+  },
+  "exclude": ["\\.(stories|test)\\."]
+}

canvas/.gitignore

@@ -0,0 +1,21 @@
+.idea/
+
+# Local
+.DS_Store
+*.local
+*.log*
+
+# Dist
+node_modules
+dist/
+
+# IDE
+.vscode/*
+!.vscode/extensions.json
+.idea
+
+# generated archives
+*.tar.gz
+
+# external CUE dependencies
+/*/cue.mod/pkg/

canvas/.swcrc

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true
+    },
+    "target": "es2022",
+    "transform": {
+      "react": {
+        "runtime": "automatic",
+        "useBuiltins": true
+      }
+    }
+  },
+  "module": {
+    "type": "es6"
+  },
+  "sourceMaps": true,
+  "exclude": ["\\.(stories|test)\\."]
+}

canvas/README.md

@@ -0,0 +1,43 @@
+# Plugin Module: canvas 
+
+### How to install
+
+This plugin requires react and react-dom 18
+
+Install peer dependencies:
+
+```bash
+npm install react@18 react-dom@18
+```
+
+Install the plugin:
+
+```bash
+npm install @my-org/canvas-plugin
+```
+
+The Perses UI packages your plugin depends on are now maintained in the [`perses/shared`](https://github.com/perses/shared) repository. If you need to develop against local copies of those packages, follow the linking instructions in that repo.
+
+## Development
+
+### Setup
+
+Install dependencies:
+
+```bash
+npm install
+```
+
+### Get Started
+
+Start the dev server:
+
+```bash
+npm run dev
+```
+
+Build the plugin for distribution:
+
+```bash
+npm run build
+```

canvas/cue.mod/module.cue

@@ -0,0 +1,13 @@
+module: "github.com/perses/plugins/canvas@v0"
+language: {
+	version: "v0.12.0"
+}
+source: {
+	kind: "git"
+}
+deps: {
+	"github.com/perses/shared/cue@v0": {
+		v:       "v0.53.1"
+		default: true
+	}
+}

canvas/go.mod

@@ -0,0 +1,25 @@
+// Copyright The Perses Authors
+// 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.
+
+module github.com/perses/plugins/canvas
+
+go 1.26.2
+
+require github.com/perses/perses v0.54.0-beta.2
+
+require (
+	github.com/kr/pretty v0.3.1 // indirect
+	github.com/perses/spec v0.2.0-beta.6 // indirect
+	gopkg.in/check.v1 v1.0.0-20201130134442-10cb98267c6c // indirect
+	gopkg.in/yaml.v3 v3.0.1 // indirect
+)

canvas/go.sum

@@ -0,0 +1,27 @@
+github.com/creack/pty v1.1.9/go.mod h1:oKZEueFk5CKHvIhNR5MUki03XCEU+Q6VDXinZuGJ33E=
+github.com/davecgh/go-spew v1.1.2-0.20180830191138-d8f796af33cc h1:U9qPSI2PIWSS1VwoXQT9A3Wy9MM3WgvqSxFWenqJduM=
+github.com/davecgh/go-spew v1.1.2-0.20180830191138-d8f796af33cc/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/kr/pretty v0.2.1/go.mod h1:ipq/a2n7PKx3OHsz4KJII5eveXtPO4qwEXGdVfWzfnI=
+github.com/kr/pretty v0.3.1 h1:flRD4NNwYAUpkphVc1HcthR4KEIFJ65n8Mw5qdRn3LE=
+github.com/kr/pretty v0.3.1/go.mod h1:hoEshYVHaxMs3cyo3Yncou5ZscifuDolrwPKZanG3xk=
+github.com/kr/pty v1.1.1/go.mod h1:pFQYn66WHrOpPYNljwOMqo10TkYh1fy3cYio2l3bCsQ=
+github.com/kr/text v0.1.0/go.mod h1:4Jbv+DJW3UT/LiOwJeYQe1efqtUx/iVham/4vfdArNI=
+github.com/kr/text v0.2.0 h1:5Nx0Ya0ZqY2ygV366QzturHI13Jq95ApcVaJBhpS+AY=
+github.com/kr/text v0.2.0/go.mod h1:eLer722TekiGuMkidMxC/pM04lWEeraHUUmBw8l2grE=
+github.com/perses/perses v0.54.0-beta.2 h1:0okxiICGuBdSD7IlCL3zgTE6fIzx/MbEBlL/DwES/94=
+github.com/perses/perses v0.54.0-beta.2/go.mod h1:TxPV2XVxR4hs6Q6RSc+Bqqy//nUyVEN94vWtt2hjpN4=
+github.com/perses/spec v0.2.0-beta.6 h1:QppHTJudgwChcsp+miJRPKCe6QsIst3UwxBFuBBlWm0=
+github.com/perses/spec v0.2.0-beta.6/go.mod h1:hV2Hojz3oYF/3Trvsy4E7BE5bP1V6e1/T2ExtHwRfkw=
+github.com/pkg/diff v0.0.0-20210226163009-20ebb0f2a09e/go.mod h1:pJLUxLENpZxwdsKMEsNbx1VGcRFpLqf3715MtcvvzbA=
+github.com/pmezard/go-difflib v1.0.1-0.20181226105442-5d4384ee4fb2 h1:Jamvg5psRIccs7FGNTlIRMkT8wgtp5eCXdBlqhYGL6U=
+github.com/pmezard/go-difflib v1.0.1-0.20181226105442-5d4384ee4fb2/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
+github.com/rogpeppe/go-internal v1.9.0/go.mod h1:WtVeX8xhTBvf0smdhujwtBcq4Qrzq/fJaraNFVN+nFs=
+github.com/rogpeppe/go-internal v1.14.1 h1:UQB4HGPB6osV0SQTLymcB4TgvyWu6ZyliaW0tI/otEQ=
+github.com/rogpeppe/go-internal v1.14.1/go.mod h1:MaRKkUm5W0goXpeCfT7UZI6fk/L7L7so1lCWt35ZSgc=
+github.com/stretchr/testify v1.11.1 h1:7s2iGBzp5EwR7/aIZr8ao5+dra3wiQyKjjFuvgVKu7U=
+github.com/stretchr/testify v1.11.1/go.mod h1:wZwfW3scLgRK+23gO65QZefKpKQRnfz6sD981Nm4B6U=
+gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/check.v1 v1.0.0-20201130134442-10cb98267c6c h1:Hei/4ADfdWqJk1ZMxUNpqntNwaWcugrBjAiHlqqRiVk=
+gopkg.in/check.v1 v1.0.0-20201130134442-10cb98267c6c/go.mod h1:JHkPIbrfpd72SG/EVd6muEfDQjcINNoR0C8j2r3qZ4Q=
+gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
+gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=

canvas/jest.config.ts

@@ -0,0 +1,23 @@
+// Copyright The Perses Authors
+// 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
+//
+// https://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.
+
+import type { Config } from '@jest/types';
+import shared from '../jest.shared';
+
+const jestConfig: Config.InitialOptions = {
+  ...shared,
+
+  setupFilesAfterEnv: [...(shared.setupFilesAfterEnv ?? []), '<rootDir>/src/setup-tests.ts'],
+};
+
+export default jestConfig;

canvas/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@perses-dev/canvas-plugin",
+  "version": "0.1.0",
+  "scripts": {
+    "dev": "rsbuild dev",
+    "build": "npm run build-mf && concurrently \"npm:build:*\"",
+    "build-mf": "rsbuild build",
+    "build:cjs": "swc ./src -d dist/lib/cjs --strip-leading-paths --config-file .cjs.swcrc",
+    "build:esm": "swc ./src -d dist/lib --strip-leading-paths --config-file .swcrc",
+    "build:types": "tsc --project tsconfig.build.json",
+    "lint": "eslint src --ext .ts,.tsx",
+    "test": "cross-env LC_ALL=C TZ=UTC jest",
+    "type-check": "tsc --noEmit"
+  },
+  "main": "lib/cjs/index.js",
+  "module": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "peerDependencies": {
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
+    "@hookform/resolvers": "^3.2.0",
+    "@perses-dev/components": "^0.54.0-beta.3",
+    "@perses-dev/plugin-system": "^0.54.0-beta.3",
+    "@perses-dev/spec": "^0.2.0-beta.2",
+    "date-fns": "^4.1.0",
+    "date-fns-tz": "^3.2.0",
+    "echarts": "5.5.0",
+    "immer": "^10.1.1",
+    "react": "^17.0.2 || ^18.0.0",
+    "react-dom": "^17.0.2 || ^18.0.0",
+    "use-resize-observer": "^9.0.0"
+  },
+  "files": [
+    "lib/**/*",
+    "__mf/**/*",
+    "mf-manifest.json",
+    "mf-stats.json"
+  ],
+  "perses": {
+    "plugins": [
+      {
+        "kind": "Panel",
+        "spec": {
+          "display": {
+            "name": "Canvas"
+          },
+          "name": "Canvas"
+        }
+      }
+    ]
+  },
+  "dependencies": {
+    "d3-selection": "^3.0.0",
+    "d3-zoom": "^3.0.0"
+  },
+  "devDependencies": {
+    "@types/d3-selection": "^3.0.11",
+    "@types/d3-zoom": "^3.0.8"
+  }
+}

canvas/rsbuild.config.ts

@@ -0,0 +1,38 @@
+// Copyright The Perses Authors
+// 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.
+
+import { pluginReact } from '@rsbuild/plugin-react';
+import { createConfigForPlugin } from '../rsbuild.shared';
+
+export default createConfigForPlugin({
+  name: 'Canvas',
+  rsbuildConfig: {
+    server: { port: 3033 },
+    plugins: [pluginReact()],
+  },
+  moduleFederation: {
+    exposes: [{ './Canvas': './src/Canvas.tsx' }],
+    shared: {
+      react: { requiredVersion: '18.2.0', singleton: true },
+      'react-dom': { requiredVersion: '18.2.0', singleton: true },
+      echarts: { singleton: true },
+      'date-fns': { singleton: true },
+      'date-fns-tz': { singleton: true },
+      '@perses-dev/components': { singleton: true },
+      '@perses-dev/plugin-system': { singleton: true },
+      '@emotion/react': { requiredVersion: '^11.11.3', singleton: true },
+      '@emotion/styled': { singleton: true },
+      '@hookform/resolvers': { singleton: true },
+    },
+  },
+});

canvas/schemas/panels/canvas/canvas.cue

@@ -0,0 +1,97 @@
+// Copyright The Perses Authors
+// 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
+//
+// https://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 model
+
+import (
+	"github.com/perses/shared/cue/common"
+)
+
+kind: "Canvas"
+spec: close({
+	legend?:                 #legend
+	thresholds?:             common.#thresholds
+	format?:                 common.#format
+	querySettings?:          #querySettings
+	edgeDefaultStrokeWidth?: number & >0
+	edgeThresholdWidths?: [...#edgeThresholdStep]
+	backgrounds?: [...#background]
+	nodes?: [...#node]
+	edges?: [...#edge]
+})
+
+#legend: {
+	position: "bottom" | "right"
+}
+
+#querySettings: [...{
+	queryIndex: int & >=0
+	colorMode:  "fixed" | "fixed-single"
+	colorValue: =~"^#(?:[0-9a-fA-F]{3}){1,2}$" // hexadecimal color code
+}]
+
+#background: {
+	id:        string
+	name?:     string
+	x:         number
+	y:         number
+	width:     number & >0
+	height:    number & >0
+	color?:    =~"^#(?:[0-9a-fA-F]{3}){1,2}$"
+	opacity?:  number & >=0 & <=1
+	image?:    string
+	imageFit?: "cover" | "contain" | "stretch"
+	global?:   bool
+}
+
+#node: {
+	id:               string
+	x:                number
+	y:                number
+	width:            number & >0
+	height:           number & >0
+	kind:             "rectangle" | "icon" | "text"
+	label?:           string
+	labelPosition?:   "above" | "below" | "left" | "right" | "center"
+	labelPadding?:    number & >=0
+	icon?:            string
+	link?:            string
+	background?:      =~"^#(?:[0-9a-fA-F]{3}){1,2}$"
+	backgroundImage?: string
+	queryIndex?:      int & >=0
+	colorMode?:       "threshold" | "fixed"
+	color?:           =~"^#(?:[0-9a-fA-F]{3}){1,2}$"
+}
+
+#edge: {
+	id:                   string
+	name?:                string
+	source:               string
+	target:               string
+	sourceAnchor?:        "n" | "s" | "e" | "w" | "nw" | "ne" | "sw" | "se"
+	targetAnchor?:        "n" | "s" | "e" | "w" | "nw" | "ne" | "sw" | "se"
+	x2?:                  number
+	y2?:                  number
+	bidirectional?:       bool
+	thicknessMode?:       "fixed" | "threshold"
+	strokeWidth?:         number & >0
+	sourceQueryIndex?:    int & >=0
+	targetQueryIndex?:    int & >=0
+	sourceLabelTemplate?: string
+	targetLabelTemplate?: string
+}
+
+#edgeThresholdStep: {
+	value:       number
+	strokeWidth: number & >0
+}