Canvas: Prettier
Change-Id: I620dde109df0f29f0c85c6fe150e347d2c32a03e
diff --git a/apps/canvas/front/src/components/canvas.tsx b/apps/canvas/front/src/components/canvas.tsx
index 8898b58..122de3f 100644
--- a/apps/canvas/front/src/components/canvas.tsx
+++ b/apps/canvas/front/src/components/canvas.tsx
@@ -1,123 +1,136 @@
-import '@xyflow/react/dist/style.css';
-import { ReactFlow, Background, Controls, Connection, BackgroundVariant, Edge, useReactFlow, Panel } from '@xyflow/react';
-import { useStateStore, AppState, AppNode, useEnv } from '@/lib/state';
+import "@xyflow/react/dist/style.css";
+import {
+ ReactFlow,
+ Background,
+ Controls,
+ Connection,
+ BackgroundVariant,
+ Edge,
+ useReactFlow,
+ Panel,
+} from "@xyflow/react";
+import { useStateStore, AppState, AppNode, useEnv } from "@/lib/state";
import { useShallow } from "zustand/react/shallow";
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo } from "react";
import { NodeGatewayHttps } from "@/components/node-gateway-https";
-import { NodeApp } from '@/components/node-app';
-import { NodeVolume } from './node-volume';
-import { NodePostgreSQL } from './node-postgresql';
-import { NodeMongoDB } from './node-mongodb';
-import { NodeGithub } from './node-github';
-import { Actions } from './actions';
-import { NodeGatewayTCP } from './node-gateway-tcp';
-import { NodeNetwork } from './node-network';
+import { NodeApp } from "@/components/node-app";
+import { NodeVolume } from "./node-volume";
+import { NodePostgreSQL } from "./node-postgresql";
+import { NodeMongoDB } from "./node-mongodb";
+import { NodeGithub } from "./node-github";
+import { Actions } from "./actions";
+import { NodeGatewayTCP } from "./node-gateway-tcp";
+import { NodeNetwork } from "./node-network";
const selector = (state: AppState) => ({
- nodes: state.nodes,
- edges: state.edges,
- onNodesChange: state.onNodesChange,
- onEdgesChange: state.onEdgesChange,
- onConnect: state.onConnect,
+ nodes: state.nodes,
+ edges: state.edges,
+ onNodesChange: state.onNodesChange,
+ onEdgesChange: state.onEdgesChange,
+ onConnect: state.onConnect,
});
export function Canvas() {
- const { nodes, edges, onNodesChange, onEdgesChange, onConnect } = useStateStore(
- useShallow(selector),
- );
- const store = useStateStore();
- const flow = useReactFlow();
- const nodeTypes = useMemo(() => ({
- "network": NodeNetwork,
- "app": NodeApp,
- "gateway-https": NodeGatewayHttps,
- "gateway-tcp": NodeGatewayTCP,
- "volume": NodeVolume,
- "postgresql": NodePostgreSQL,
- "mongodb": NodeMongoDB,
- "github": NodeGithub,
- }), []);
- const isValidConnection = useCallback((c: Edge | Connection) => {
- if (c.source === c.target) {
- return false;
- }
- const sn = flow.getNode(c.source)! as AppNode;
- const tn = flow.getNode(c.target)! as AppNode;
- if (sn.type === "github") {
- return c.targetHandle === "repository";
- }
- if (sn.type === "app") {
- if (c.sourceHandle === "ports" && (!sn.data.ports || sn.data.ports.length === 0)) {
- return false;
- }
- }
- if (tn.type === "gateway-https") {
- if (c.targetHandle === "https" && tn.data.https !== undefined) {
- return false;
- }
- }
- if (sn.type === "volume") {
- if (c.targetHandle !== "volume") {
- return false;
- }
- return true;
- }
- if (tn.type === "network") {
- if (c.sourceHandle !== "subdomain") {
- return false;
- }
- if (sn.type !== "gateway-https" && sn.type !== "gateway-tcp") {
- return false;
- }
- }
- return true;
- }, [flow]);
- const env = useEnv();
- useEffect(() => {
- const networkNodes: AppNode[] = env.networks.map((n) => ({
- id: n.domain,
- type: "network",
- position: {
- x: 0,
- y: 0,
- },
- isConnectable: true,
- data: {
- domain: n.domain,
- label: n.domain,
- envVars: [],
- ports: [],
- state: "success", // TODO(gio): monitor network health
- },
- }));
- const prevNodes = store.nodes;
- const newNodes = networkNodes.concat(prevNodes.filter((n) => n.type !== "network"));
- // TODO(gio): actually compare
- if (prevNodes.length !== newNodes.length) {
- store.setNodes(newNodes);
- }
- }, [env, store]);
- return (
- <div style={{ width: '100%', height: '100%' }}>
- <ReactFlow
- nodeTypes={nodeTypes}
- nodes={nodes}
- edges={edges}
- onNodesChange={onNodesChange}
- onEdgesChange={onEdgesChange}
- onConnect={onConnect}
- isValidConnection={isValidConnection}
- fitView
- proOptions={{ hideAttribution: true }}
- >
- <Controls />
- <Background variant={BackgroundVariant.Dots} gap={12} size={1} />
- <Panel position="bottom-right">
- <Actions />
- </Panel>
- </ReactFlow>
- </div>
- );
+ const { nodes, edges, onNodesChange, onEdgesChange, onConnect } = useStateStore(useShallow(selector));
+ const store = useStateStore();
+ const flow = useReactFlow();
+ const nodeTypes = useMemo(
+ () => ({
+ network: NodeNetwork,
+ app: NodeApp,
+ "gateway-https": NodeGatewayHttps,
+ "gateway-tcp": NodeGatewayTCP,
+ volume: NodeVolume,
+ postgresql: NodePostgreSQL,
+ mongodb: NodeMongoDB,
+ github: NodeGithub,
+ }),
+ [],
+ );
+ const isValidConnection = useCallback(
+ (c: Edge | Connection) => {
+ if (c.source === c.target) {
+ return false;
+ }
+ const sn = flow.getNode(c.source)! as AppNode;
+ const tn = flow.getNode(c.target)! as AppNode;
+ if (sn.type === "github") {
+ return c.targetHandle === "repository";
+ }
+ if (sn.type === "app") {
+ if (c.sourceHandle === "ports" && (!sn.data.ports || sn.data.ports.length === 0)) {
+ return false;
+ }
+ }
+ if (tn.type === "gateway-https") {
+ if (c.targetHandle === "https" && tn.data.https !== undefined) {
+ return false;
+ }
+ }
+ if (sn.type === "volume") {
+ if (c.targetHandle !== "volume") {
+ return false;
+ }
+ return true;
+ }
+ if (tn.type === "network") {
+ if (c.sourceHandle !== "subdomain") {
+ return false;
+ }
+ if (sn.type !== "gateway-https" && sn.type !== "gateway-tcp") {
+ return false;
+ }
+ }
+ return true;
+ },
+ [flow],
+ );
+ const env = useEnv();
+ useEffect(() => {
+ const networkNodes: AppNode[] = env.networks.map((n) => ({
+ id: n.domain,
+ type: "network",
+ position: {
+ x: 0,
+ y: 0,
+ },
+ isConnectable: true,
+ data: {
+ domain: n.domain,
+ label: n.domain,
+ envVars: [],
+ ports: [],
+ state: "success", // TODO(gio): monitor network health
+ },
+ }));
+ const prevNodes = store.nodes;
+ const newNodes = networkNodes.concat(prevNodes.filter((n) => n.type !== "network"));
+ // TODO(gio): actually compare
+ if (prevNodes.length !== newNodes.length) {
+ store.setNodes(newNodes);
+ }
+ }, [env, store]);
+ return (
+ <div style={{ width: "100%", height: "100%" }}>
+ <ReactFlow
+ nodeTypes={nodeTypes}
+ nodes={nodes}
+ edges={edges}
+ onNodesChange={onNodesChange}
+ onEdgesChange={onEdgesChange}
+ onConnect={onConnect}
+ isValidConnection={isValidConnection}
+ fitView
+ proOptions={{ hideAttribution: true }}
+ >
+ <Controls />
+ <Background variant={BackgroundVariant.Dots} gap={12} size={1} />
+ <Panel position="bottom-right">
+ <Actions />
+ </Panel>
+ </ReactFlow>
+ </div>
+ );
}
export default Canvas;