Add chrome extension demo with react flow and plasmo

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-flow-extension",
   "displayName": "React flow extension",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "An extension for GitHub, GitLab and Bitbucket to see the diff-graph over the files changed and easily navigate the pull request changes.",
   "author": "Avikalp Gupta <[email protected]>",
   "scripts": {
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@plasmohq/messaging": "^0.7.1",
+    "@xyflow/react": "^12.4.3",
     "plasmo": "0.90.3",
     "react": "18.2.0",
     "react-dom": "18.2.0"

src/sidepanel/index.tsx

@@ -1,4 +1,7 @@
 import { useEffect, useState } from "react"
+import { ReactFlow } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import { edges, nodes } from "~utils/reactFlow/sexiest-pr-data";
 
 interface PRInfo {
 	repo: string
@@ -82,7 +85,7 @@ function IndexSidePanel() {
 					justifyContent: "center",
 					color: "#666"
 				}}>
-				Canvas area for React Flow
+				<ReactFlow nodes={nodes} edges={edges} />
 			</div>
 		</div>
 	)

src/utils/reactFlow/initial-data.tsx

@@ -0,0 +1,180 @@
+import React from 'react';
+import { MarkerType, type Edge, type Node } from '@xyflow/react';
+
+export const nodes: Node[] = [
+	{
+		id: 'annotation-1',
+		type: 'annotation',
+		draggable: false,
+		selectable: false,
+		data: {
+			level: 1,
+			label:
+				'Built-in node and edge types. Draggable, deletable and connectable!',
+			arrowStyle: {
+				right: 0,
+				bottom: 0,
+				transform: 'translate(-30px,10px) rotate(-80deg)',
+			},
+		},
+		position: { x: -200, y: -30 },
+	},
+	{
+		id: '1-1',
+		type: 'input',
+		data: {
+			label: 'Input Node',
+		},
+		position: { x: 150, y: 0 },
+	},
+	{
+		id: '1-2',
+		type: 'default',
+		data: {
+			label: 'Default Node',
+		},
+		position: { x: 0, y: 100 },
+	},
+	{
+		id: '1-3',
+		type: 'output',
+		data: {
+			label: 'Output Node',
+		},
+		position: { x: 300, y: 100 },
+	},
+	{
+		id: 'annotation-2',
+		type: 'annotation',
+		draggable: false,
+		selectable: false,
+		data: {
+			level: 2,
+			label: 'Sub flows, toolbars and resizable nodes!',
+			arrowStyle: {
+				left: 0,
+				bottom: 0,
+				transform: 'translate(5px, 25px) scale(1, -1) rotate(100deg)',
+			},
+		},
+		position: { x: 220, y: 200 },
+	},
+	{
+		id: '2-1',
+		type: 'group',
+		data: {},
+		position: {
+			x: -170,
+			y: 250,
+		},
+		style: {
+			width: 380,
+			height: 180,
+		},
+	},
+	{
+		id: '2-2',
+		data: {},
+		type: 'tools',
+		position: { x: 50, y: 50 },
+		style: {
+			width: 80,
+			height: 80,
+		},
+		parentId: '2-1',
+		extent: 'parent',
+	},
+	{
+		id: '2-3',
+		type: 'resizer',
+		data: {
+			label: 'Resize Me',
+		},
+		position: { x: 250, y: 50 },
+		style: {
+			width: 80,
+			height: 80,
+		},
+		parentId: '2-1',
+		extent: 'parent',
+	},
+	{
+		id: 'annotation-3',
+		type: 'annotation',
+		draggable: false,
+		selectable: false,
+		data: {
+			level: 3,
+			label: <>Nodes and edges can be anything and are fully customizable!</>,
+			arrowStyle: {
+				right: 0,
+				bottom: 0,
+				transform: 'translate(-35px, 20px) rotate(-80deg)',
+			},
+		},
+		position: { x: -40, y: 570 },
+	},
+	{
+		id: '3-2',
+		type: 'textinput',
+		position: { x: 150, y: 650 },
+		data: {},
+	},
+	{
+		id: '3-1',
+		type: 'circle',
+		position: { x: 350, y: 500 },
+		data: {},
+	},
+];
+
+export const edges: Edge[] = [
+	{
+		id: 'e1-2',
+		source: '1-1',
+		target: '1-2',
+		label: 'edge',
+		type: 'smoothstep',
+	},
+	{
+		id: 'e1-3',
+		source: '1-1',
+		target: '1-3',
+		animated: true,
+		label: 'animated edge',
+	},
+	{
+		id: 'e2-2',
+		source: '1-2',
+		target: '2-2',
+		type: 'smoothstep',
+		markerEnd: {
+			type: MarkerType.ArrowClosed,
+		},
+	},
+	{
+		id: 'e2-3',
+		source: '2-2',
+		target: '2-3',
+		type: 'smoothstep',
+		markerEnd: {
+			type: MarkerType.ArrowClosed,
+		},
+	},
+	{
+		id: 'e3-3',
+		source: '2-3',
+		sourceHandle: 'a',
+		target: '3-2',
+		type: 'button',
+		animated: true,
+		style: { stroke: 'rgb(158, 118, 255)' },
+	},
+	{
+		id: 'e3-4',
+		source: '2-3',
+		sourceHandle: 'b',
+		target: '3-1',
+		type: 'button',
+	},
+];

src/utils/reactFlow/sexiest-pr-data.tsx

@@ -0,0 +1,143 @@
+import React from 'react';
+import { MarkerType, type Edge, type Node } from '@xyflow/react';
+
+export const nodes: Node[] = [
+	{
+		id: 'browser_use/browser/browser.py',
+		type: 'default',
+		draggable: false,
+		selectable: false,
+		data: {
+			level: 1,
+			label:
+				'browser_use/browser/browser.py',
+		},
+		position: { x: 0, y: 0 },
+		style: {
+			width: 200,
+			height: 300,
+			fontSize: 12,
+		},
+	},
+	{
+		id: 'BrowserConfig',
+		type: 'default',
+		data: {
+			label: 'class BrowserConfig',
+			level: 1,
+		},
+		position: { x: 30, y: 30 },
+		style: {
+			width: 130,
+			height: 20,
+			fontSize: 10,
+			textAlign: "center",
+			alignItems: "flex-start",
+			padding: "1px",
+			backgroundColor: "yellow"
+
+		},
+	},
+	{
+		id: 'Browser',
+		type: 'default',
+		data: {
+			label: 'class Browser',
+			level: 1,
+		},
+		position: { x: 30, y: 60 },
+		style: {
+			width: 130,
+			height: 230,
+			fontSize: 10,
+			textAlign: "center",
+			alignItems: "flex-start",
+			padding: "1px"
+		},
+	},
+	{
+		id: '_setup_cdp',
+		type: 'default',
+		data: {
+			label: 'fn _setup_cdp',
+			level: 1,
+		},
+		position: { x: 40, y: 90 },
+		style: {
+			width: 110,
+			height: 40,
+			fontSize:8,
+			textAlign: "center",
+			alignItems: "flex-start",
+			padding: "1px",
+			backgroundColor: "yellow",
+		},
+	},
+	{
+		id: '_setup_users',
+		type: 'default',
+		data: {
+			label: 'fn _setup_users',
+			level: 1,
+		},
+		position: { x: 40, y: 140 },
+		style: {
+			width: 110,
+			height: 40,
+			fontSize: 8,
+			textAlign: "center",
+			alignItems: "flex-start",
+			padding: "1px",
+			backgroundColor: "yellow"
+		},
+	},
+	{
+		id: '_setup_browser_with_instance',
+		type: 'default',
+		data: {
+			label: 'fn _setup_browser_with_instance',
+			level: 1,
+		},
+		position: { x: 40, y: 190 },
+		style: {
+			width: 110,
+			height: 40,
+			fontSize: 8,
+			textAlign: "center",
+			alignItems: "flex-start",
+			padding: "1px",
+			backgroundColor: "yellow"
+		},
+	},
+	{
+		id: '_setup_browser',
+		type: 'default',
+		data: {
+			label: 'fn _setup_browser',
+			level: 1,
+		},
+		position: { x: 40, y: 240 },
+		style: {
+			width: 110,
+			height: 40,
+			fontSize: 8,
+			textAlign: "center",
+			alignItems: "flex-start",
+			padding: "1px",
+			backgroundColor: "yellow"
+		},
+	},
+];
+
+export const edges: Edge[] = [
+	{
+		id: 'e1-2',
+		source: 'BrowserConfig',
+		target: 'Browser',
+		label: 'Line 75',
+		type: 'smoothstep',
+		markerEnd: {
+			type: MarkerType.ArrowClosed,
+		},
+	},
+];